Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 55 commits into from
Jan 24, 2024
Merged

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

Show file tree
Hide file tree
Changes from 47 commits
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
270aaa0
Copy the wp-each implementation
DAreRodz Jan 15, 2024
09972e6
Scaffold files for wp-each e2e tests
DAreRodz Jan 15, 2024
926da69
Process template nodes inside `toVdom()`
DAreRodz Jan 15, 2024
7f2f6c3
Add tests for several list manipulations
DAreRodz Jan 15, 2024
63fa0ef
Add a new test to implement
DAreRodz Jan 15, 2024
5019c6e
Add SSRed elements in PHP
DAreRodz Jan 15, 2024
7819728
Add SSRed elements to letters test
DAreRodz Jan 15, 2024
9308769
Add more test cases
DAreRodz Jan 15, 2024
13be90d
Test support for siblings in template
DAreRodz Jan 15, 2024
e90ddfc
Implement tests for wp-each on navigation
DAreRodz Jan 16, 2024
4643f4b
Update changelog
DAreRodz Jan 16, 2024
07a53b6
Add `wp-each` documentation
DAreRodz Jan 16, 2024
d6b0a4e
Separate the router from the rest of the runtime
DAreRodz Jan 17, 2024
fc423df
Import deps from interactivity module
DAreRodz Jan 17, 2024
77bd06a
Add an entry point for the router
DAreRodz Jan 17, 2024
b3b3ebb
Register interactivity router module
DAreRodz Jan 17, 2024
e38ff22
Add the router module to query block dependencies
DAreRodz Jan 17, 2024
227aa86
Cache regions on DOMContentLoaded
DAreRodz Jan 17, 2024
adf8203
Update query block view
DAreRodz Jan 17, 2024
144c15c
Update e2e tests
DAreRodz Jan 17, 2024
f3a01ee
Make router module a dynamic dependency in tests
DAreRodz Jan 19, 2024
6d245b3
Update tests using navigate
DAreRodz Jan 19, 2024
82a9d4a
Expose `state` & `actions` from router module
DAreRodz Jan 22, 2024
cbf4d3e
Fix module dependency definition for tests
DAreRodz Jan 22, 2024
dd7131e
Fix php lint
DAreRodz Jan 22, 2024
2e5d7e7
Refactor dynamic imports in tests
DAreRodz Jan 22, 2024
8b517b8
Attempt to fix webpack config
DAreRodz Jan 22, 2024
44d2a37
Update caniuse-lite package
sirreal Jan 22, 2024
ffdbdc9
Update snapshots
sirreal Jan 22, 2024
0bf64e3
Cleanup DEWP name, ensure no dupe plugin
sirreal Jan 22, 2024
5c1554f
fixup! Cleanup DEWP name, ensure no dupe plugin
sirreal Jan 22, 2024
93a7ea6
fixup! fixup! Cleanup DEWP name, ensure no dupe plugin
sirreal Jan 22, 2024
94dfd8c
Merge branch 'trunk' into try/interactivity-api-router-module
DAreRodz Jan 23, 2024
f752a94
Convert `navigate` and `prefetch` into actions
DAreRodz Jan 23, 2024
5d55caa
Do not use generator for `prefetch`
DAreRodz Jan 23, 2024
7999837
Add changelog entry
DAreRodz Jan 23, 2024
7b9e112
Create @wordpress/interactivity-router package
DAreRodz Jan 24, 2024
d09960e
Update package-lock
DAreRodz Jan 24, 2024
9916bea
Add the new package to the DEWP
luisherranz Jan 24, 2024
1e6b1c5
Use module as the externals default in the experimental module suppor…
luisherranz Jan 24, 2024
3e50a84
Revert "Update package-lock"
DAreRodz Jan 24, 2024
e551609
Revert "Create @wordpress/interactivity-router package"
DAreRodz Jan 24, 2024
e1bf002
Remove unnecessary DEWP
DAreRodz Jan 24, 2024
19185a3
Merge branch 'trunk' into try/interactivity-api-router-module
luisherranz Jan 24, 2024
4e9d82a
Refactor for new Script Modules API
luisherranz Jan 24, 2024
f42d597
Fix router module name inside DEWP
DAreRodz Jan 24, 2024
f7596c2
Add DEWP to plugins
DAreRodz Jan 24, 2024
337d22a
Revert "Revert "Create @wordpress/interactivity-router package""
DAreRodz Jan 24, 2024
4dcfe20
Revert "Revert "Update package-lock""
DAreRodz Jan 24, 2024
2534189
Update interactivity-router after reverts
DAreRodz Jan 24, 2024
87e162d
Fix module dependencies in Query block
DAreRodz Jan 24, 2024
1aaf239
Add changelog entry
DAreRodz Jan 24, 2024
c15686c
Fix typo
luisherranz Jan 24, 2024
d196e04
Revert adding externalsType in wp-scripts
luisherranz Jan 24, 2024
980ad9b
Merge remote-tracking branch 'origin/try/interactivity-api-router-mod…
luisherranz Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' )
);
}

/**
Expand Down
10 changes: 8 additions & 2 deletions packages/block-library/src/query/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,14 @@ 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(
'@wordpress/interactivity',
array(
'id' => '@wordpress/interactivity/router',
'import' => 'dynamic',
),
),
defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
);
}
Expand Down
23 changes: 13 additions & 10 deletions packages/block-library/src/query/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 &&
Expand Down Expand Up @@ -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 );
Expand All @@ -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 );
}
},
},
Expand All @@ -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 );
}
},
},
Expand Down
20 changes: 14 additions & 6 deletions packages/dependency-extraction-webpack-plugin/lib/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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 giong to be used as a dynamic import.
luisherranz marked this conversation as resolved.
Show resolved Hide resolved
return `import ${ request }`;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the kind of change that I'd like us to improve as part of adding these new modules, we should be adding hacks like this when we create new packages/modules. Instead we should have everything taken care of automatically. How can we do that here?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally, all the WordPress packages should be available as modules. Once that's done, we can update this to do something similar to what's done for scripts and make any module that starts with @wordpress external.


const isWordPressScript = Boolean( defaultRequestToExternal( request ) );

if ( isWordPressScript ) {
Expand Down
8 changes: 7 additions & 1 deletion packages/e2e-tests/plugins/interactive-blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 )
);

Expand Down
14 changes: 9 additions & 5 deletions packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { store, navigate, getContext } from '@wordpress/interactivity';
import { store, getContext } from '@wordpress/interactivity';

store( 'directive-context', {
state: {
Expand Down Expand Up @@ -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();
Expand Down
9 changes: 6 additions & 3 deletions packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { store, getContext, navigate } from '@wordpress/interactivity';
import { store, getContext } from '@wordpress/interactivity';

const { state } = store( 'directive-each' );

Expand Down Expand Up @@ -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,
} );
Expand Down
9 changes: 6 additions & 3 deletions packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { store, navigate } from '@wordpress/interactivity';
import { store } from '@wordpress/interactivity';

const html = `
<div
Expand All @@ -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,
} );
Expand Down
8 changes: 5 additions & 3 deletions packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import {
store,
directive,
navigate,
useInit,
useWatch,
cloneElement,
Expand Down Expand Up @@ -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,
} );
Expand Down
7 changes: 5 additions & 2 deletions packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { store, navigate } from '@wordpress/interactivity';
import { store } from '@wordpress/interactivity';

const { state } = store( 'router', {
state: {
Expand All @@ -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;

Expand Down
7 changes: 5 additions & 2 deletions packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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();
Expand Down
1 change: 1 addition & 0 deletions packages/interactivity/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
- Remove `data-wp-slot` and `data-wp-fill`. ([#57854](https://github.com/WordPress/gutenberg/pull/57854))
- Remove `wp-data-navigation-link` directive. ([#57853](https://github.com/WordPress/gutenberg/pull/57853))
- Remove unused `state` and rename `props` to `attributes` in `getElement()`. ([#57974](https://github.com/WordPress/gutenberg/pull/57974))
- Convert `navigate` and `prefetch` function to actions of the new `core/router` store, available when importing the `@wordpress/interactivity/router` module. ([#57924](https://github.com/WordPress/gutenberg/pull/57924))

### Bug Fix

Expand Down
Loading
Loading