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.

thelovekesh · 2024-07-21T10:02:30Z

webpack.config.js

+const { getAsBooleanFromENV } = require( '@wordpress/scripts/utils' );
+
+const hasExperimentalModulesFlag = getAsBooleanFromENV( 'WP_EXPERIMENTAL_MODULES' );
+let scriptConfig, moduleConfig;
+
+if ( hasExperimentalModulesFlag ) {
+	[ scriptConfig, moduleConfig ] = require( '@wordpress/scripts/config/webpack.config' );
+} else {
+	scriptConfig = require( '@wordpress/scripts/config/webpack.config' );
+}


Suggested change

const { getAsBooleanFromENV } = require( '@wordpress/scripts/utils' );

const hasExperimentalModulesFlag = getAsBooleanFromENV( 'WP_EXPERIMENTAL_MODULES' );

let scriptConfig, moduleConfig;

if ( hasExperimentalModulesFlag ) {

[ scriptConfig, moduleConfig ] = require( '@wordpress/scripts/config/webpack.config' );

} else {

scriptConfig = require( '@wordpress/scripts/config/webpack.config' );

}

const [ scriptConfig, moduleConfig ] = require( '@wordpress/scripts/config/webpack.config' );

Since you have already enabled the experimental modules in the build script, there is no need to re-determine the logic in the webpack configuration. The getAsBooleanFromENV('WP_EXPERIMENTAL_MODULES') function will always return true in this context.

thelovekesh · 2024-07-21T10:03:34Z

webpack.config.js

+let moduleScripts = {};
+if ( hasExperimentalModulesFlag ) {
+	moduleScripts = {
+		...moduleConfig,
+		entry: {
+			'media-text-interactive': path.resolve( process.cwd(), 'assets', 'src', 'js', 'modules', 'media-text-interactive.js' ),
+		},
+		output: {
+			...moduleConfig.output,
+			path: path.resolve( process.cwd(), 'assets', 'build', 'js', 'modules' ),
+			filename: '[name].js',
+			chunkFilename: '[name].js',
+		},
+	};
+}
+
+const customExports = [ scripts, styles ];
+
+if ( hasExperimentalModulesFlag ) {
+	customExports.push( moduleScripts );
+}
+
+module.exports = customExports;


Suggested change

let moduleScripts = {};

if ( hasExperimentalModulesFlag ) {

moduleScripts = {

...moduleConfig,

entry: {

'media-text-interactive': path.resolve( process.cwd(), 'assets', 'src', 'js', 'modules', 'media-text-interactive.js' ),

},

output: {

...moduleConfig.output,

path: path.resolve( process.cwd(), 'assets', 'build', 'js', 'modules' ),

filename: '[name].js',

chunkFilename: '[name].js',

},

};

}

const customExports = [ scripts, styles ];

if ( hasExperimentalModulesFlag ) {

customExports.push( moduleScripts );

}

module.exports = customExports;

const mediaTextInteractiveModule = {

...moduleConfig,

entry: {

'media-text-interactive': path.resolve( process.cwd(), 'assets', 'src', 'js', 'modules', 'media-text-interactive.js' ),

},

output: {

...moduleConfig.output,

path: path.resolve( process.cwd(), 'assets', 'build', 'js', 'modules' ),

filename: '[name].js',

chunkFilename: '[name].js',

},

};

module.exports = [ scripts, styles, mediaTextInteractiveModule ];

thelovekesh · 2024-07-21T10:05:38Z

inc/classes/class-elementary-theme.php

+	public function block_extensions() {
+
+		Media_Text_Interactive::get_instance();
+
+	}


Suggested change

public function block_extensions() {

Media_Text_Interactive::get_instance();

}

public function block_extensions() {

Media_Text_Interactive::get_instance();

}

Are these empty lines required here? I guess, it's due to the styling in this code?

thelovekesh · 2024-07-21T10:06:12Z

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

+	protected function __construct() {
+
+		$this->setup_hooks();
+
+	}


Suggested change

protected function __construct() {

$this->setup_hooks();

}

protected function __construct() {

$this->setup_hooks();

}

thelovekesh · 2024-07-21T10:10:16Z

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

I think the file name can remain media-text. Multiple core blocks use the interactivity API but do not suffix the block name to indicate the implementation details, such as using the interactivity API.

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 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

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

thelovekesh Jul 21, 2024

thelovekesh Jul 21, 2024

thelovekesh Jul 21, 2024

thelovekesh Jul 21, 2024

thelovekesh Jul 21, 2024

divyarajmasani commented Dec 23, 2024

divyarajmasani commented Dec 26, 2024

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

thelovekesh Jul 21, 2024

Choose a reason for hiding this comment

thelovekesh Jul 21, 2024

Choose a reason for hiding this comment

thelovekesh Jul 21, 2024

Choose a reason for hiding this comment

thelovekesh Jul 21, 2024

Choose a reason for hiding this comment

thelovekesh Jul 21, 2024

Choose a reason for hiding this comment

divyarajmasani commented Dec 23, 2024

divyarajmasani commented Dec 26, 2024

parthnvaswani commented Apr 9, 2024 •

edited

Loading