Interactivity API: Create @wordpress/interactivity-router module (#…

…57924) * Copy the wp-each implementation * Scaffold files for wp-each e2e tests * Process template nodes inside `toVdom()` * Add tests for several list manipulations * Add a new test to implement * Add SSRed elements in PHP * Add SSRed elements to letters test * Add more test cases * Test support for siblings in template * Implement tests for wp-each on navigation * Update changelog * Add `wp-each` documentation * Separate the router from the rest of the runtime * Import deps from interactivity module * Add an entry point for the router * Register interactivity router module * Add the router module to query block dependencies * Cache regions on DOMContentLoaded * Update query block view * Update e2e tests * Make router module a dynamic dependency in tests * Update tests using navigate * Expose `state` & `actions` from router module * Fix module dependency definition for tests * Fix php lint * Refactor dynamic imports in tests * Attempt to fix webpack config * Update caniuse-lite package * Update snapshots "ReadableJsAssetsWebpackPlugin" snapshots webpack output which changes with the updated caniuse-lite data. function() {} becomes ()=>{} in some places where webpack uses functions internally. * Cleanup DEWP name, ensure no dupe plugin * fixup! Cleanup DEWP name, ensure no dupe plugin * fixup! fixup! Cleanup DEWP name, ensure no dupe plugin * Convert `navigate` and `prefetch` into actions * Do not use generator for `prefetch` * Add changelog entry * Create @wordpress/interactivity-router package * Update package-lock * Add the new package to the DEWP * Use module as the externals default in the experimental module support of wp-scripts * Revert "Update package-lock" This reverts commit d09960e. * Revert "Create @wordpress/interactivity-router package" This reverts commit 7b9e112. * Remove unnecessary DEWP * Refactor for new Script Modules API * Fix router module name inside DEWP * Add DEWP to plugins * Revert "Revert "Create @wordpress/interactivity-router package"" This reverts commit e551609. * Revert "Revert "Update package-lock"" This reverts commit 3e50a84. * Update interactivity-router after reverts * Fix module dependencies in Query block * Add changelog entry * Fix typo * Revert adding externalsType in wp-scripts --------- Co-authored-by: Jon Surrell <[email protected]> Co-authored-by: Luis Herranz <[email protected]>
WordPress · Jan 24, 2024 · 5b4c751 · 5b4c751
1 parent fd46752
commit 5b4c751
Show file tree

Hide file tree

Showing 28 changed files with 461 additions and 221 deletions.
diff --git a/docs/manifest.json b/docs/manifest.json
@@ -1673,6 +1673,12 @@
 		"markdown_source": "../packages/icons/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/interactivity-router",
+		"slug": "packages-interactivity-router",
+		"markdown_source": "../packages/interactivity-router/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/interactivity",
 		"slug": "packages-interactivity",

diff --git a/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php b/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php
@@ -150,6 +150,13 @@ public function register_script_modules() {
 				array(),
 				defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
 			);
+
+			wp_register_script_module(
+				'@wordpress/interactivity-router',
+				gutenberg_url( '/build/interactivity/router.min.js' ),
+				array( '@wordpress/interactivity' ),
+				defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+			);
 		}
 
 		/**

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
@@ -51,6 +51,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/interactivity": "file:../interactivity",
+		"@wordpress/interactivity-router": "file:../interactivity-router",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/patterns": "file:../patterns",

diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
@@ -100,8 +100,17 @@ function register_block_core_query() {
 
 	wp_register_script_module(
 		'@wordpress/block-library/query',
-		'/wp-content/plugins/gutenberg/build/interactivity/query.min.js',
-		array( '@wordpress/interactivity' ),
+		gutenberg_url( '/build/interactivity/query.min.js' ),
+		array(
+			array(
+				'id'     => '@wordpress/interactivity',
+				'import' => 'static',
+			),
+			array(
+				'id'     => '@wordpress/interactivity-router',
+				'import' => 'dynamic',
+			),
+		),
 		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
 	);
 }

diff --git a/packages/block-library/src/query/view.js b/packages/block-library/src/query/view.js
@@ -1,13 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	store,
-	getContext,
-	getElement,
-	navigate,
-	prefetch,
-} from '@wordpress/interactivity';
+import { store, getContext, getElement } from '@wordpress/interactivity';
 
 const isValidLink = ( ref ) =>
 	ref &&
@@ -52,7 +46,10 @@ store( 'core/query', {
 					ctx.animation = 'start';
 				}, 400 );
 
-				yield navigate( ref.href );
+				const { actions } = yield import(
+					'@wordpress/interactivity-router'
+				);
+				yield actions.navigate( ref.href );
 
 				// Dismiss loading message if it hasn't been added yet.
 				clearTimeout( timeout );
@@ -77,7 +74,10 @@ store( 'core/query', {
 			const isDisabled = ref.closest( '[data-wp-navigation-id]' )?.dataset
 				.wpNavigationDisabled;
 			if ( isValidLink( ref ) && ! isDisabled ) {
-				yield prefetch( ref.href );
+				const { actions } = yield import(
+					'@wordpress/interactivity-router'
+				);
+				yield actions.prefetch( ref.href );
 			}
 		},
 	},
@@ -86,7 +86,10 @@ store( 'core/query', {
 			const { url } = getContext();
 			const { ref } = getElement();
 			if ( url && isValidLink( ref ) ) {
-				yield prefetch( ref.href );
+				const { actions } = yield import(
+					'@wordpress/interactivity-router'
+				);
+				yield actions.prefetch( ref.href );
 			}
 		},
 	},

diff --git a/packages/block-library/tsconfig.json b/packages/block-library/tsconfig.json
@@ -27,6 +27,7 @@
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
 		{ "path": "../interactivity" },
+		{ "path": "../interactivity-router" },
 		{ "path": "../notices" },
 		{ "path": "../keycodes" },
 		{ "path": "../primitives" },

diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -59,9 +59,11 @@ function defaultRequestToExternal( request ) {
 /**
  * Default request to external module transformation
  *
- * Currently only @wordpress/interactivity
+ * Currently only @wordpress/interactivity and `@wordpress/interactivity-router`
+ * are supported.
  *
- * Do not use the boolean shorthand here, it's only handled for the `requestToExternalModule` option.
+ * Do not use the boolean shorthand here, it's only handled for the
+ * `requestToExternalModule` option.
  *
  * @param {string} request Module request (the module name in `import from`) to be transformed
  * @return {string|Error|undefined} The resulting external definition.
@@ -71,13 +73,19 @@ function defaultRequestToExternal( request ) {
  */
 function defaultRequestToExternalModule( request ) {
 	if ( request === '@wordpress/interactivity' ) {
-		// This is a special case. Interactivity does not support dynamic imports at this
-		// time. We add the external "module" type to indicate that webpack should
-		// externalize this as a module (instead of our default `import()` external type)
-		// which forces @wordpress/interactivity imports to be hoisted to static imports.
+		// This is a special case. Interactivity does not support dynamic imports at
+		// this time. We add the external "module" type to indicate that webpack
+		// should externalize this as a module (instead of our default `import()`
+		// external type) which forces @wordpress/interactivity imports to be
+		// hoisted to static imports.
 		return `module ${ request }`;
 	}
 
+	if ( request === '@wordpress/interactivity-router' ) {
+		// Assumes this is usually going to be used as a dynamic import.
+		return `import ${ request }`;
+	}
+
 	const isWordPressScript = Boolean( defaultRequestToExternal( request ) );
 
 	if ( isWordPressScript ) {

diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
@@ -25,6 +25,7 @@
 	"dependencies": {
 		"@wordpress/e2e-test-utils": "file:../e2e-test-utils",
 		"@wordpress/interactivity": "file:../interactivity",
+		"@wordpress/interactivity-router": "file:../interactivity-router",
 		"@wordpress/jest-console": "file:../jest-console",
 		"@wordpress/jest-puppeteer-axe": "file:../jest-puppeteer-axe",
 		"@wordpress/scripts": "file:../scripts",

diff --git a/packages/e2e-tests/plugins/interactive-blocks.php b/packages/e2e-tests/plugins/interactive-blocks.php
@@ -24,7 +24,13 @@ function () {
 				wp_register_script_module(
 					$name . '-view',
 					$view_file,
-					array( '@wordpress/interactivity' ),
+					array(
+						'@wordpress/interactivity',
+						array(
+							'id'     => '@wordpress/interactivity-router',
+							'import' => 'dynamic',
+						),
+					),
 					filemtime( $view_file )
 				);
 

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate, getContext } from '@wordpress/interactivity';
+import { store, getContext } from '@wordpress/interactivity';
 
 store( 'directive-context', {
 	state: {
@@ -50,10 +50,14 @@ const { actions } = store( 'directive-context-navigate', {
 			ctx.newText = 'some new text';
 		},
 		navigate() {
-			return navigate( window.location, {
-				force: true,
-				html,
-			} );
+			return import( '@wordpress/interactivity-router' ).then(
+				( { actions: routerActions } ) =>
+					routerActions.navigate(
+						window.location,
+						{ force: true, html },
+					)
+			);
+
 		},
 		*asyncNavigate() {
 			yield actions.navigate();

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, navigate } from '@wordpress/interactivity';
+import { store, getContext } from '@wordpress/interactivity';
 
 const { state } = store( 'directive-each' );
 
@@ -178,8 +178,11 @@ const html = `
 
 store( 'directive-each', {
 	actions: {
-		navigate() {
-			return navigate( window.location, {
+		*navigate() {
+			const { actions } = yield import(
+				"@wordpress/interactivity-router"
+			);
+			return actions.navigate( window.location, {
 				force: true,
 				html,
 			} );

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate } from '@wordpress/interactivity';
+import { store } from '@wordpress/interactivity';
 
 const html = `
 		<div
@@ -17,8 +17,11 @@ const html = `
 
 store( 'directive-key', {
 	actions: {
-		navigate() {
-			navigate( window.location, {
+		*navigate() {
+			const { actions } = yield import(
+				"@wordpress/interactivity-router"
+			);
+			return actions.navigate( window.location, {
 				force: true,
 				html,
 			} );

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js
@@ -4,7 +4,6 @@
 import {
 	store,
 	directive,
-	navigate,
 	useInit,
 	useWatch,
 	cloneElement,
@@ -58,8 +57,11 @@ const { state } = store( 'directive-run', {
 		increment() {
 			state.clickCount = state.clickCount + 1;
 		},
-		navigate() {
-			navigate( window.location, {
+		*navigate() {
+			const { actions } = yield import(
+				"@wordpress/interactivity-router"
+			);
+			return actions.navigate( window.location, {
 				force: true,
 				html,
 			} );

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate } from '@wordpress/interactivity';
+import { store } from '@wordpress/interactivity';
 
 const { state } = store( 'router', {
 	state: {
@@ -19,7 +19,10 @@ const { state } = store( 'router', {
 			const force = e.target.dataset.forceNavigation === 'true';
 			const { timeout } = state;
 
-			yield navigate( e.target.href, { force, timeout } );
+			const { actions } = yield import(
+				"@wordpress/interactivity-router"
+			);
+			yield actions.navigate( e.target.href, { force, timeout } );
 
 			state.navigations -= 1;
 

diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate, getContext } from '@wordpress/interactivity';
+import { store, getContext } from '@wordpress/interactivity';
 
 const { state } = store( 'router-regions', {
 	state: {
@@ -19,7 +19,10 @@ const { state } = store( 'router-regions', {
 		router: {
 			*navigate( e ) {
 				e.preventDefault();
-				yield navigate( e.target.href );
+				const { actions } = yield import(
+					"@wordpress/interactivity-router"
+				);
+				yield actions.navigate( e.target.href );
 			},
 			back() {
 				history.back();

diff --git a/packages/interactivity-router/.npmrc b/packages/interactivity-router/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/packages/interactivity-router/CHANGELOG.md b/packages/interactivity-router/CHANGELOG.md
@@ -0,0 +1,7 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+### Breaking changes
+
+-   Initial version. ([57924](https://github.com/WordPress/gutenberg/pull/57924))