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 <sirreal@users.noreply.github.com>
Co-authored-by: Luis Herranz <luisherranz@gmail.com>

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

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' )
+			);
 		}
 
 		/**

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

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' )
 	);
 }

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 );
 			}
 		},
 	},

packages/block-library/tsconfig.json

@@ -27,6 +27,7 @@
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
 		{ "path": "../interactivity" },
+		{ "path": "../interactivity-router" },
 		{ "path": "../notices" },
 		{ "path": "../keycodes" },
 		{ "path": "../primitives" },

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

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

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

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();

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,
 			} );

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,
 			} );

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,
 			} );

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;
 

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();

packages/interactivity-router/.npmrc

@@ -0,0 +1 @@
+package-lock=false

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