Add Interactivity API support #451

parthnvaswani · 2024-04-09T12:31:39Z

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

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

Screenshots/Recordings

Screen.Recording.2024-04-09.at.5.57.50.PM.mov

Fixes/Covers issue

Fixes #450

SH4LIN · 2024-07-16T12:10:01Z

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

SH4LIN · 2024-07-21T09:10:35Z

@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 · 2024-07-21T09:43:09Z

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.

webpack.config.js

inc/classes/class-elementary-theme.php

inc/classes/block-extension/class-media-text-interactive.php

assets/src/js/modules/media-text-interactive.js

divyarajmasani · 2024-12-23T07:55:13Z

@parthnvaswani Please take a looks at the suggestions.

divyarajmasani · 2024-12-26T08:42:31Z

@parthnvaswani,

To add support for interactive blocks I think only following things are needed,

Add @wordpress/interactiviy as dependency
block's view.js ( FE script ) will implement the interactivity.
Add support in block.json for "interactivity": true.
use viewScriptModule attribute to load the script.
Add --experimental-modules flag to build and start npm scripts in package.json

Changes in webpack.config, other php classes etc are only to support custom modules, either for block independent functionality or for demonstration on core blocks.

parthnvaswani · 2025-01-10T10:18:54Z

@divyarajmasani Yup it's correct the webpack was modified for implementation on core blocks.

divyarajmasani · 2025-01-13T11:21:10Z

@nani-samireddy

Please look at the suggested changes on the review. And make following changes.

Update webpack config to look for modules and prepare modules entry dynamically, just like what we do for the CSS. You could consider that modules will be present in src/js/modules.

Cc: @parthnvaswani

package.json

webpack.config.js

…duplication

assets/src/js/modules/media-text.js

inc/classes/block-extension/class-media-text-interactive.php

webpack.config.js

divyarajmasani

There are still some inconsistencies in the build process but those will be handled in a separate issue.

For now, this PR looks good to go.

…e/add-support-for-js-modules

divyarajmasani · 2025-01-15T07:38:02Z

Merging this keeping the PR limited to adding support for the interactivity API, more changes or improvements to other parts of the skeleton will be handle separately.

Thanks for your reviews @thelovekesh , and do suggests any other change that would benefit overall development. If you would run through the changes once and approve. 🙇

parthnvaswani requested a review from divyarajmasani April 9, 2024 12:33

parthnvaswani self-assigned this Apr 9, 2024

thelovekesh marked this pull request as draft July 16, 2024 16:18

thelovekesh marked this pull request as ready for review July 16, 2024 16:18

parthnvaswani and others added 5 commits July 21, 2024 15:02

Chore: Update node packages

2ada29b

Feat: Update webpack config to support modules

bbbd6c9

Feat: Add example for JS modules

f852ec6

Update lockfile

9783a2b

Remove phpVersion key

f2334bf

thelovekesh force-pushed the feature/add-support-for-js-modules branch from eb25c11 to f2334bf Compare July 21, 2024 09:39

thelovekesh changed the title ~~Update node packages and add support for JS modules~~ Add Interactivity API support Jul 21, 2024

thelovekesh requested changes Jul 21, 2024

View reviewed changes

divyarajmasani assigned nani-samireddy Jan 13, 2025

Update webpack config to load script module dynamically

53ef105

nani-samireddy requested a review from thelovekesh January 13, 2025 13:20

divyarajmasani reviewed Jan 13, 2025

View reviewed changes

package.json Outdated Show resolved Hide resolved

divyarajmasani reviewed Jan 13, 2025

View reviewed changes

webpack.config.js Outdated Show resolved Hide resolved

Chore: Add readAllFileEntries function in webpack to reduce the code …

5c9272e

…duplication

nani-samireddy requested a review from divyarajmasani January 13, 2025 13:35

thelovekesh reviewed Jan 13, 2025

View reviewed changes

nani-samireddy added 3 commits January 14, 2025 00:03

Update documentation for script module prefix

23ef23d

Update webpack-remove-empty-scripts plugin

87d61c8

Add docs for assets building process

d546e79

nani-samireddy added 2 commits January 15, 2025 09:02

Update the media-text module handle

89c7e24

Add condition to avoid files with _ prefix from bundling

345aa07

nani-samireddy requested a review from thelovekesh January 15, 2025 03:44

divyarajmasani previously approved these changes Jan 15, 2025

View reviewed changes

Merge branch 'main' of github.com:rtCamp/theme-elementary into featur…

0fb4e6e

…e/add-support-for-js-modules

nani-samireddy dismissed divyarajmasani’s stale review via 0fb4e6e January 15, 2025 03:56

nani-samireddy requested a review from divyarajmasani January 15, 2025 05:17

divyarajmasani approved these changes Jan 15, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Interactivity API support #451

Add Interactivity API support #451

parthnvaswani commented Apr 9, 2024 •

edited

Loading

SH4LIN commented Jul 16, 2024

SH4LIN commented Jul 21, 2024

thelovekesh commented Jul 21, 2024

divyarajmasani commented Dec 23, 2024

divyarajmasani commented Dec 26, 2024

parthnvaswani commented Jan 10, 2025

divyarajmasani commented Jan 13, 2025 •

edited

Loading

divyarajmasani left a comment

divyarajmasani commented Jan 15, 2025 •

edited

Loading

Add Interactivity API support #451

Are you sure you want to change the base?

Add Interactivity API support #451

Conversation

parthnvaswani commented Apr 9, 2024 • edited Loading

Description

Technical Details

Checklist

Screenshots/Recordings

Fixes/Covers issue

SH4LIN commented Jul 16, 2024

SH4LIN commented Jul 21, 2024

thelovekesh commented Jul 21, 2024

divyarajmasani commented Dec 23, 2024

divyarajmasani commented Dec 26, 2024

parthnvaswani commented Jan 10, 2025

divyarajmasani commented Jan 13, 2025 • edited Loading

divyarajmasani left a comment

Choose a reason for hiding this comment

divyarajmasani commented Jan 15, 2025 • edited Loading

parthnvaswani commented Apr 9, 2024 •

edited

Loading

divyarajmasani commented Jan 13, 2025 •

edited

Loading

divyarajmasani commented Jan 15, 2025 •

edited

Loading