Add Interactivity API support

parthnvaswani commented 6 months ago

Description

This PR addresses the task of updating node packages and integrating support for JavaScript modules into the project. The focus is on enhancing theme scripts for the Interactivity API while ensuring compatibility with the latest dependencies, without breaking existing functionality.

Technical Details

Updated package.json to include the latest dependencies without affecting existing functionality.
Updated wp-script dependency to version 27.6.0.
Added @wordpress/interactivity as a dependency.
Modified scripts to include the --experimental-modules flag for compatibility with JavaScript modules.
Configured Webpack to enable experimental module features as follows:
```
experiments: {
  outputModule: true,
},
output: {
  module: true,
},
```
Added checks in Webpack configuration to support both module and non-module scripts.
Implemented proper enqueueing of scripts using wp_enqueue_script_module.
Organized changes within Theme Elementary, placing them in a subfolder named modules in assets/src/js.
Added an example script using the Interactivity API in the modules folder to demonstrate the implementation of JavaScript modules in the project.

Checklist

[x] Update package.json to include the latest dependencies without breaking existing functionality.
[x] Update wp-script dependency to version 27.6.0.
[x] Add @wordpress/interactivity as a dependency.
[x] Modify scripts to include the --experimental-modules flag.
[x] Configure Webpack to enable experimental module features.
[x] Add checks in Webpack configuration to support both module and non-module scripts.
[x] Implement proper enqueueing of scripts using wp_enqueue_script_module.
[x] Organize changes within Theme Elementary, placing them in a subfolder named modules in assets/src/js.
[x] Add an example script using the Interactivity API in the modules folder.

Screenshots/Recordings

https://github.com/rtCamp/theme-elementary/assets/53994579/2080642f-fa9b-462d-90e8-9fce0d4b839e

Fixes/Covers issue

Fixes #450

SH4LIN commented 3 months ago

@parthnvaswani Can you look into why the PHP Unit test is failing? Also, add title of adding support for Interactivity API.

SH4LIN commented 3 months ago

@rtCamp/team-sys We are facing an issue with the PHP Unit test, it is failing because of this issue https://github.com/rtCamp/theme-elementary/actions/runs/9960495534/job/27712384396#step:6:58

ERROR: for d3b0d4ac2f17bdfbd1266d369562057c_mysql_1  'ContainerConfig'
Creating d3b0d4ac2f17bdfbd1266d369[56](https://github.com/rtCamp/theme-elementary/actions/runs/9960495534/job/27712384396#step:6:57)2057c_tests-wordpress_1 ... done
[2628] Failed to execute script docker-compose

ERROR: for mysql  'ContainerConfig'
Traceback (most recent call last):
  File "docker-compose", line 3, in <module>
  File "compose/cli/main.py", line 81, in main
  File "compose/cli/main.py", line 203, in perform_command
  File "compose/metrics/decorator.py", line 18, in wrapper
  File "compose/cli/main.py", line 1186, in up
  File "compose/cli/main.py", line 1182, in up
  File "compose/project.py", line 702, in up
  File "compose/parallel.py", line 108, in parallel_execute
  File "compose/parallel.py", line 206, in producer
  File "compose/project.py", line 688, in do
  File "compose/service.py", line 581, in execute_convergence_plan
  File "compose/service.py", line 503, in _execute_convergence_recreate
  File "compose/parallel.py", line 108, in parallel_execute
  File "compose/parallel.py", line 206, in producer
  File "compose/service.py", line 496, in recreate
  File "compose/service.py", line 615, in recreate_container
  File "compose/service.py", line 334, in create_container
  File "compose/service.py", line 922, in _get_container_create_options
  File "compose/service.py", line 962, in _build_container_volume_options
  File "compose/service.py", line 1549, in merge_volume_bindings
  File "compose/service.py", line 1[57](https://github.com/rtCamp/theme-elementary/actions/runs/9960495534/job/27712384396#step:6:58)9, in get_container_data_volumes
KeyError: 'ContainerConfig'
Error: Process completed with exit code 255.

I am adding an error log here as well.

thelovekesh commented 3 months ago

The wp-env package was outdated, and GitHub runners no longer support Docker Compose v1, which caused the error. I have rebased the changes with the main branch.

rtCamp / theme-elementary