<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[57269] trunk: JavaScript: Add new Modules API.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/57269">57269</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/57269","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>Bernhard Reiter</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2024-01-11 14:45:10 +0000 (Thu, 11 Jan 2024)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>JavaScript: Add new Modules API.
This changeset adds a new API for WordPress, designed to work with native ES Modules and Import Maps. It introduces functions such as `wp_register_module`, and `wp_enqueue_module`.
The API aims to provide a familiar experience to the existing `WP_Scripts` class, offering similar functionality. However, **it's not intended to duplicate the exact functionality of `WP_Scripts`**; rather, it is carefully tailored to address the specific needs and capabilities of ES modules.
For this initial version, **the current proposal is intentionally simplistic**, covering only the essential features needed to work with ES modules. Other enhancements and optimizations can be added later as the community identifies additional requirements and use cases.
== Differences Between WP_Script_Modules and WP_Scripts
=== Dependency Specification
With `WP_Script_Modules`, the array of dependencies supports not only strings but also arrays that include the dependency import type (`static` or `dynamic`). This design choice allows for future extensions of dependency properties, such as adding a `version` property to support "scopes" within import maps.
=== Module Identifier
Instead of a handle, `WP_Script_Modules` utilizes the module identifier, aligning with the module identifiers used in JavaScript files and import maps.
=== Deregistration
There is no equivalent of `wp_deregister_script` at this stage.
== API
=== `wp_register_module( $module_identifier, $src, $deps, $version )`
Registers a module.
{{{
// Registers a module with dependencies and versioning.
wp_register_module(
'my-module',
'/path/to/my-module.js',
array( 'static-dependency-1', 'static-dependency-2' ),
'1.2.3'
);
}}}
{{{
// my-module.js
import { ... } from 'static-dependency-1';
import { ... } from 'static-dependency-2';
// ...
}}}
{{{
// Registers a module with a dynamic dependency.
wp_register_module(
'my-module',
'/path/to/my-module.js',
array(
'static-dependency',
array(
'id' => 'dynamic-dependency',
'import' => 'dynamic'
),
)
);
}}}
{{{
// my-module.js
import { ... } from 'static-dependency';
// ...
const dynamicModule = await import('dynamic-dependency');
}}}
=== `wp_enqueue_module( $module_identifier, $src, $deps, $version )`
Enqueues a module. If a source is provided, it will also register the module.
{{{
wp_enqueue_module( 'my-module' );
}}}
=== `wp_dequeue_module( $module_identifier )`
Dequeues a module.
{{{
wp_dequeue_module( 'my-module' );
}}}
== Output
- When modules are enqueued, they are printed within script tags containing `type="module"` attributes.
- Additionally, static dependencies of enqueued modules utilize `link` tags with `rel="modulepreload"` attributes.
- Lastly, an import map is generated and inserted using a `<script type="importmap">` tag.
{{{
<script type="module" src="/path/to/my-module.js" id="my-module"></script>
<link rel="modulepreload" href="/path/to/static-dependency.js" id="static-dependency" />
<script type="importmap">
{
"imports": {
"static-dependency": "/path/to/static-dependency.js",
"dynamic-dependency": "/path/to/dynamic-dependency.js"
}
}
</script>
}}}
== Import Map Polyfill Requirement
Even though all major browsers already support import maps, an import map polyfill is required until the percentage of users using old browser versions without import map support drops significantly.
This work is ongoing and will be added once it's ready. Progress is tracked in <a href="https://core.trac.wordpress.org/ticket/60232">#60232</a>.
Props luisherranz, idad5, costdev, neffff, joemcgill, jorbin, swissspidy, jonsurrell, flixos90, gziolo, westonruter.
Fixes <a href="https://core.trac.wordpress.org/ticket/56313">#56313</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpsettingsphp">trunk/src/wp-settings.php</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesclasswpscriptmodulesphp">trunk/src/wp-includes/class-wp-script-modules.php</a></li>
<li><a href="#trunksrcwpincludesscriptmodulesphp">trunk/src/wp-includes/script-modules.php</a></li>
<li>trunk/tests/phpunit/tests/script-modules/</li>
<li><a href="#trunktestsphpunittestsscriptmoduleswpScriptModulesphp">trunk/tests/phpunit/tests/script-modules/wpScriptModules.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesclasswpscriptmodulesphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-includes/class-wp-script-modules.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-script-modules.php (rev 0)
+++ trunk/src/wp-includes/class-wp-script-modules.php 2024-01-11 14:45:10 UTC (rev 57269)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,352 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Modules API: WP_Script_Modules class.
+ *
+ * Native support for ES Modules and Import Maps.
+ *
+ * @package WordPress
+ * @subpackage Script Modules
+ */
+
+/**
+ * Core class used to register modules.
+ *
+ * @since 6.5.0
+ */
+class WP_Script_Modules {
+ /**
+ * Holds the registered modules, keyed by module identifier.
+ *
+ * @since 6.5.0
+ * @var array
+ */
+ private $registered = array();
+
+ /**
+ * Holds the module identifiers that were enqueued before registered.
+ *
+ * @since 6.5.0
+ * @var array
+ */
+ private $enqueued_before_registered = array();
+
+ /**
+ * Registers the module if no module with that module identifier has already
+ * been registered.
+ *
+ * @since 6.5.0
+ *
+ * @param string $module_id The identifier of the module.
+ * Should be unique. It will be used
+ * in the final import map.
+ * @param string $src Full URL of the module, or path of
+ * the module relative to the
+ * WordPress root directory.
+ * @param array<string|array{id: string, import?: 'static'|'dynamic' }> $deps Optional. An array of module
+ * identifiers of the dependencies of
+ * this module. The dependencies can
+ * be strings or arrays. If they are
+ * arrays, they need an `id` key with
+ * the module identifier, and can
+ * contain an `import` key with either
+ * `static` or `dynamic`. By default,
+ * dependencies that don't contain an
+ * `import` key are considered static.
+ * @param string|false|null $version Optional. String specifying the
+ * module version number. Defaults to
+ * false. It is added to the URL as a
+ * query string for cache busting
+ * purposes. If $version is set to
+ * false, the version number is the
+ * currently installed WordPress
+ * version. If $version is set to
+ * null, no version is added.
+ */
+ public function register( $module_id, $src, $deps = array(), $version = false ) {
+ if ( ! isset( $this->registered[ $module_id ] ) ) {
+ $dependencies = array();
+ foreach ( $deps as $dependency ) {
+ if ( is_array( $dependency ) ) {
+ if ( ! isset( $dependency['id'] ) ) {
+ _doing_it_wrong( __METHOD__, __( 'Missing required id key in entry among dependencies array.' ), '6.5.0' );
+ continue;
+ }
+ $dependencies[] = array(
+ 'id' => $dependency['id'],
+ 'import' => isset( $dependency['import'] ) && 'dynamic' === $dependency['import'] ? 'dynamic' : 'static',
+ );
+ } elseif ( is_string( $dependency ) ) {
+ $dependencies[] = array(
+ 'id' => $dependency,
+ 'import' => 'static',
+ );
+ } else {
+ _doing_it_wrong( __METHOD__, __( 'Entries in dependencies array must be either strings or arrays with an id key.' ), '6.5.0' );
+ }
+ }
+
+ $this->registered[ $module_id ] = array(
+ 'src' => $src,
+ 'version' => $version,
+ 'enqueue' => isset( $this->enqueued_before_registered[ $module_id ] ),
+ 'dependencies' => $dependencies,
+ 'enqueued' => false,
+ 'preloaded' => false,
+ );
+ }
+ }
+
+ /**
+ * Marks the module to be enqueued in the page the next time
+ * `prints_enqueued_modules` is called.
+ *
+ * If a src is provided and the module has not been registered yet, it will be
+ * registered.
+ *
+ * @since 6.5.0
+ *
+ * @param string $module_id The identifier of the module.
+ * Should be unique. It will be used
+ * in the final import map.
+ * @param string $src Optional. Full URL of the module,
+ * or path of the module relative to
+ * the WordPress root directory. If
+ * it is provided and the module has
+ * not been registered yet, it will be
+ * registered.
+ * @param array<string|array{id: string, import?: 'static'|'dynamic' }> $deps Optional. An array of module
+ * identifiers of the dependencies of
+ * this module. The dependencies can
+ * be strings or arrays. If they are
+ * arrays, they need an `id` key with
+ * the module identifier, and can
+ * contain an `import` key with either
+ * `static` or `dynamic`. By default,
+ * dependencies that don't contain an
+ * `import` key are considered static.
+ * @param string|false|null $version Optional. String specifying the
+ * module version number. Defaults to
+ * false. It is added to the URL as a
+ * query string for cache busting
+ * purposes. If $version is set to
+ * false, the version number is the
+ * currently installed WordPress
+ * version. If $version is set to
+ * null, no version is added.
+ */
+ public function enqueue( $module_id, $src = '', $deps = array(), $version = false ) {
+ if ( isset( $this->registered[ $module_id ] ) ) {
+ $this->registered[ $module_id ]['enqueue'] = true;
+ } elseif ( $src ) {
+ $this->register( $module_id, $src, $deps, $version );
+ $this->registered[ $module_id ]['enqueue'] = true;
+ } else {
+ $this->enqueued_before_registered[ $module_id ] = true;
+ }
+ }
+
+ /**
+ * Unmarks the module so it will no longer be enqueued in the page.
+ *
+ * @since 6.5.0
+ *
+ * @param string $module_id The identifier of the module.
+ */
+ public function dequeue( $module_id ) {
+ if ( isset( $this->registered[ $module_id ] ) ) {
+ $this->registered[ $module_id ]['enqueue'] = false;
+ }
+ unset( $this->enqueued_before_registered[ $module_id ] );
+ }
+
+ /**
+ * Adds the hooks to print the import map, enqueued modules and module
+ * preloads.
+ *
+ * It adds the actions to print the enqueued modules and module preloads to
+ * both `wp_head` and `wp_footer` because in classic themes, the modules
+ * used by the theme and plugins will likely be able to be printed in the
+ * `head`, but the ones used by the blocks will need to be enqueued in the
+ * `footer`.
+ *
+ * As all modules are deferred and dependencies are handled by the browser,
+ * the order of the modules is not important, but it's still better to print
+ * the ones that are available when the `wp_head` is rendered, so the browser
+ * starts downloading those as soon as possible.
+ *
+ * The import map is also printed in the footer to be able to include the
+ * dependencies of all the modules, including the ones printed in the footer.
+ *
+ * @since 6.5.0
+ */
+ public function add_hooks() {
+ add_action( 'wp_head', array( $this, 'print_enqueued_modules' ) );
+ add_action( 'wp_head', array( $this, 'print_module_preloads' ) );
+ add_action( 'wp_footer', array( $this, 'print_enqueued_modules' ) );
+ add_action( 'wp_footer', array( $this, 'print_module_preloads' ) );
+ add_action( 'wp_footer', array( $this, 'print_import_map' ) );
+ }
+
+ /**
+ * Prints the enqueued modules using script tags with type="module"
+ * attributes.
+ *
+ * If a enqueued module has already been printed, it will not be printed again
+ * on subsequent calls to this function.
+ *
+ * @since 6.5.0
+ */
+ public function print_enqueued_modules() {
+ foreach ( $this->get_marked_for_enqueue() as $module_id => $module ) {
+ if ( false === $module['enqueued'] ) {
+ // Mark it as enqueued so it doesn't get enqueued again.
+ $this->registered[ $module_id ]['enqueued'] = true;
+
+ wp_print_script_tag(
+ array(
+ 'type' => 'module',
+ 'src' => $this->get_versioned_src( $module ),
+ 'id' => $module_id . '-js-module',
+ )
+ );
+ }
+ }
+ }
+
+ /**
+ * Prints the the static dependencies of the enqueued modules using link tags
+ * with rel="modulepreload" attributes.
+ *
+ * If a module is marked for enqueue, it will not be preloaded. If a preloaded
+ * module has already been printed, it will not be printed again on subsequent
+ * calls to this function.
+ *
+ * @since 6.5.0
+ */
+ public function print_module_preloads() {
+ foreach ( $this->get_dependencies( array_keys( $this->get_marked_for_enqueue() ), array( 'static' ) ) as $module_id => $module ) {
+ // Don't preload if it's marked for enqueue or has already been preloaded.
+ if ( true !== $module['enqueue'] && false === $module['preloaded'] ) {
+ // Mark it as preloaded so it doesn't get preloaded again.
+ $this->registered[ $module_id ]['preloaded'] = true;
+
+ echo sprintf(
+ '<link rel="modulepreload" href="%s" id="%s">',
+ esc_url( $this->get_versioned_src( $module ) ),
+ esc_attr( $module_id . '-js-modulepreload' )
+ );
+ }
+ }
+ }
+
+ /**
+ * Prints the import map using a script tag with a type="importmap" attribute.
+ *
+ * @since 6.5.0
+ */
+ public function print_import_map() {
+ $import_map = $this->get_import_map();
+ if ( ! empty( $import_map['imports'] ) ) {
+ wp_print_inline_script_tag(
+ wp_json_encode( $import_map, JSON_HEX_TAG | JSON_HEX_AMP ),
+ array(
+ 'type' => 'importmap',
+ 'id' => 'wp-importmap',
+ )
+ );
+ }
+ }
+
+ /**
+ * Returns the import map array.
+ *
+ * @since 6.5.0
+ *
+ * @return array Array with an `imports` key mapping to an array of module identifiers and their respective URLs,
+ * including the version query.
+ */
+ private function get_import_map() {
+ $imports = array();
+ foreach ( $this->get_dependencies( array_keys( $this->get_marked_for_enqueue() ) ) as $module_id => $module ) {
+ $imports[ $module_id ] = $this->get_versioned_src( $module );
+ }
+ return array( 'imports' => $imports );
+ }
+
+ /**
+ * Retrieves the list of modules marked for enqueue.
+ *
+ * @since 6.5.0
+ *
+ * @return array Modules marked for enqueue, keyed by module identifier.
+ */
+ private function get_marked_for_enqueue() {
+ $enqueued = array();
+ foreach ( $this->registered as $module_id => $module ) {
+ if ( true === $module['enqueue'] ) {
+ $enqueued[ $module_id ] = $module;
+ }
+ }
+ return $enqueued;
+ }
+
+ /**
+ * Retrieves all the dependencies for the given module identifiers, filtered
+ * by import types.
+ *
+ * It will consolidate an array containing a set of unique dependencies based
+ * on the requested import types: 'static', 'dynamic', or both. This method is
+ * recursive and also retrieves dependencies of the dependencies.
+ *
+ * @since 6.5.0
+ *
+ * @param array $module_ids The identifiers of the modules for which to gather dependencies.
+ * @param array $import_types Optional. Import types of dependencies to retrieve: 'static', 'dynamic', or both.
+ * Default is both.
+ * @return array List of dependencies, keyed by module identifier.
+ */
+ private function get_dependencies( $module_ids, $import_types = array( 'static', 'dynamic' ) ) {
+ return array_reduce(
+ $module_ids,
+ function ( $dependency_modules, $module_id ) use ( $import_types ) {
+ $dependencies = array();
+ foreach ( $this->registered[ $module_id ]['dependencies'] as $dependency ) {
+ if (
+ in_array( $dependency['import'], $import_types, true ) &&
+ isset( $this->registered[ $dependency['id'] ] ) &&
+ ! isset( $dependency_modules[ $dependency['id'] ] )
+ ) {
+ $dependencies[ $dependency['id'] ] = $this->registered[ $dependency['id'] ];
+ }
+ }
+ return array_merge( $dependency_modules, $dependencies, $this->get_dependencies( array_keys( $dependencies ), $import_types ) );
+ },
+ array()
+ );
+ }
+
+ /**
+ * Gets the versioned URL for a module src.
+ *
+ * If $version is set to false, the version number is the currently installed
+ * WordPress version. If $version is set to null, no version is added.
+ * Otherwise, the string passed in $version is used.
+ *
+ * @since 6.5.0
+ *
+ * @param array $module The module.
+ * @return string The module src with a version if relevant.
+ */
+ private function get_versioned_src( array $module ) {
+ $args = array();
+ if ( false === $module['version'] ) {
+ $args['ver'] = get_bloginfo( 'version' );
+ } elseif ( null !== $module['version'] ) {
+ $args['ver'] = $module['version'];
+ }
+ if ( $args ) {
+ return add_query_arg( $args, $module['src'] );
+ }
+ return $module['src'];
+ }
+}
</ins></span></pre></div>
<a id="trunksrcwpincludesscriptmodulesphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-includes/script-modules.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-modules.php (rev 0)
+++ trunk/src/wp-includes/script-modules.php 2024-01-11 14:45:10 UTC (rev 57269)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,116 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Script Modules API: Module functions
+ *
+ * @since 6.5.0
+ *
+ * @package WordPress
+ * @subpackage Script Modules
+ */
+
+/**
+ * Retrieves the main WP_Script_Modules instance.
+ *
+ * This function provides access to the WP_Script_Modules instance, creating one
+ * if it doesn't exist yet.
+ *
+ * @since 6.5.0
+ *
+ * @return WP_Script_Modules The main WP_Script_Modules instance.
+ */
+function wp_modules() {
+ static $instance = null;
+ if ( is_null( $instance ) ) {
+ $instance = new WP_Script_Modules();
+ $instance->add_hooks();
+ }
+ return $instance;
+}
+
+/**
+ * Registers the module if no module with that module identifier has already
+ * been registered.
+ *
+ * @since 6.5.0
+ *
+ * @param string $module_id The identifier of the module.
+ * Should be unique. It will be used
+ * in the final import map.
+ * @param string $src Full URL of the module, or path of
+ * the module relative to the
+ * WordPress root directory.
+ * @param array<string|array{id: string, import?: 'static'|'dynamic' }> $deps Optional. An array of module
+ * identifiers of the dependencies of
+ * this module. The dependencies can
+ * be strings or arrays. If they are
+ * arrays, they need an `id` key with
+ * the module identifier, and can
+ * contain an `import` key with either
+ * `static` or `dynamic`. By default,
+ * dependencies that don't contain an
+ * `import` key are considered static.
+ * @param string|false|null $version Optional. String specifying the
+ * module version number. Defaults to
+ * false. It is added to the URL as a
+ * query string for cache busting
+ * purposes. If $version is set to
+ * false, the version number is the
+ * currently installed WordPress
+ * version. If $version is set to
+ * null, no version is added.
+ */
+function wp_register_module( $module_id, $src, $deps = array(), $version = false ) {
+ wp_modules()->register( $module_id, $src, $deps, $version );
+}
+
+/**
+ * Marks the module to be enqueued in the page.
+ *
+ * If a src is provided and the module has not been registered yet, it will be
+ * registered.
+ *
+ * @since 6.5.0
+ *
+ * @param string $module_id The identifier of the module.
+ * Should be unique. It will be used
+ * in the final import map.
+ * @param string $src Optional. Full URL of the module,
+ * or path of the module relative to
+ * the WordPress root directory. If
+ * it is provided and the module has
+ * not been registered yet, it will be
+ * registered.
+ * @param array<string|array{id: string, import?: 'static'|'dynamic' }> $deps Optional. An array of module
+ * identifiers of the dependencies of
+ * this module. The dependencies can
+ * be strings or arrays. If they are
+ * arrays, they need an `id` key with
+ * the module identifier, and can
+ * contain an `import` key with either
+ * `static` or `dynamic`. By default,
+ * dependencies that don't contain an
+ * `import` key are considered static.
+ * @param string|false|null $version Optional. String specifying the
+ * module version number. Defaults to
+ * false. It is added to the URL as a
+ * query string for cache busting
+ * purposes. If $version is set to
+ * false, the version number is the
+ * currently installed WordPress
+ * version. If $version is set to
+ * null, no version is added.
+ */
+function wp_enqueue_module( $module_id, $src = '', $deps = array(), $version = false ) {
+ wp_modules()->enqueue( $module_id, $src, $deps, $version );
+}
+
+/**
+ * Unmarks the module so it is no longer enqueued in the page.
+ *
+ * @since 6.5.0
+ *
+ * @param string $module_id The identifier of the module.
+ */
+function wp_dequeue_module( $module_id ) {
+ wp_modules()->dequeue( $module_id );
+}
</ins></span></pre></div>
<a id="trunksrcwpsettingsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-settings.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-settings.php 2024-01-11 13:16:26 UTC (rev 57268)
+++ trunk/src/wp-settings.php 2024-01-11 14:45:10 UTC (rev 57269)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -365,6 +365,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> require ABSPATH . WPINC . '/fonts/class-wp-font-face-resolver.php';
</span><span class="cx" style="display: block; padding: 0 10px"> require ABSPATH . WPINC . '/fonts/class-wp-font-face.php';
</span><span class="cx" style="display: block; padding: 0 10px"> require ABSPATH . WPINC . '/fonts.php';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+require ABSPATH . WPINC . '/class-wp-script-modules.php';
+require ABSPATH . WPINC . '/script-modules.php';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $GLOBALS['wp_embed'] = new WP_Embed();
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunktestsphpunittestsscriptmoduleswpScriptModulesphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/phpunit/tests/script-modules/wpScriptModules.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/script-modules/wpScriptModules.php (rev 0)
+++ trunk/tests/phpunit/tests/script-modules/wpScriptModules.php 2024-01-11 14:45:10 UTC (rev 57269)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,669 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Unit tests covering WP_Script_Modules functionality.
+ *
+ * @package WordPress
+ * @subpackage Script Modules
+ *
+ * @since 6.5.0
+ *
+ * @group script-modules
+ *
+ * @coversDefaultClass WP_Script_Modules
+ */
+class Tests_WP_Script_Modules extends WP_UnitTestCase {
+ /**
+ * Instance of WP_Script_Modules.
+ *
+ * @var WP_Script_Modules
+ */
+ protected $modules;
+
+ /**
+ * Set up.
+ */
+ public function set_up() {
+ parent::set_up();
+ $this->modules = new WP_Script_Modules();
+ }
+
+ /**
+ * Gets a list of the enqueued modules.
+ *
+ * @return array Enqueued module URLs, keyed by module identifier.
+ */
+ public function get_enqueued_modules() {
+ $modules_markup = get_echo( array( $this->modules, 'print_enqueued_modules' ) );
+ $p = new WP_HTML_Tag_Processor( $modules_markup );
+ $enqueued_modules = array();
+
+ while ( $p->next_tag(
+ array(
+ 'tag' => 'SCRIPT',
+ 'import' => 'module',
+ )
+ ) ) {
+ $id = preg_replace( '/-js-module$/', '', $p->get_attribute( 'id' ) );
+ $enqueued_modules[ $id ] = $p->get_attribute( 'src' );
+ }
+
+ return $enqueued_modules;
+ }
+
+ /**
+ * Gets the modules listed in the import map.
+ *
+ * @return array Import map entry URLs, keyed by module identifier.
+ */
+ public function get_import_map() {
+ $import_map_markup = get_echo( array( $this->modules, 'print_import_map' ) );
+ preg_match( '/<script type="importmap" id="wp-importmap">.*?(\{.*\}).*?<\/script>/s', $import_map_markup, $import_map_string );
+ return json_decode( $import_map_string[1], true )['imports'];
+ }
+
+ /**
+ * Gets a list of preloaded modules.
+ *
+ * @return array Preloaded module URLs, keyed by module identifier.
+ */
+ public function get_preloaded_modules() {
+ $preloaded_markup = get_echo( array( $this->modules, 'print_module_preloads' ) );
+ $p = new WP_HTML_Tag_Processor( $preloaded_markup );
+ $preloaded_modules = array();
+
+ while ( $p->next_tag(
+ array(
+ 'tag' => 'LINK',
+ 'rel' => 'modulepreload',
+ )
+ ) ) {
+ $id = preg_replace( '/-js-modulepreload$/', '', $p->get_attribute( 'id' ) );
+ $preloaded_modules[ $id ] = $p->get_attribute( 'href' );
+ }
+
+ return $preloaded_modules;
+ }
+
+ /**
+ * Tests that a module gets enqueued correctly after being registered.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_enqueued_modules()
+ */
+ public function test_wp_enqueue_module() {
+ $this->modules->register( 'foo', '/foo.js' );
+ $this->modules->register( 'bar', '/bar.js' );
+ $this->modules->enqueue( 'foo' );
+ $this->modules->enqueue( 'bar' );
+
+ $enqueued_modules = $this->get_enqueued_modules();
+
+ $this->assertCount( 2, $enqueued_modules );
+ $this->assertStringStartsWith( '/foo.js', $enqueued_modules['foo'] );
+ $this->assertStringStartsWith( '/bar.js', $enqueued_modules['bar'] );
+ }
+
+ /**
+ * Tests that a module can be dequeued after being enqueued.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::dequeue()
+ * @covers ::print_enqueued_modules()
+ */
+ public function test_wp_dequeue_module() {
+ $this->modules->register( 'foo', '/foo.js' );
+ $this->modules->register( 'bar', '/bar.js' );
+ $this->modules->enqueue( 'foo' );
+ $this->modules->enqueue( 'bar' );
+ $this->modules->dequeue( 'foo' ); // Dequeued.
+
+ $enqueued_modules = $this->get_enqueued_modules();
+
+ $this->assertCount( 1, $enqueued_modules );
+ $this->assertFalse( isset( $enqueued_modules['foo'] ) );
+ $this->assertTrue( isset( $enqueued_modules['bar'] ) );
+ }
+
+ /**
+ * Tests that a module can be enqueued before it is registered, and will be
+ * handled correctly once registered.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_enqueued_modules()
+ */
+ public function test_wp_enqueue_module_works_before_register() {
+ $this->modules->enqueue( 'foo' );
+ $this->modules->register( 'foo', '/foo.js' );
+ $this->modules->enqueue( 'bar' ); // Not registered.
+
+ $enqueued_modules = $this->get_enqueued_modules();
+
+ $this->assertCount( 1, $enqueued_modules );
+ $this->assertStringStartsWith( '/foo.js', $enqueued_modules['foo'] );
+ $this->assertFalse( isset( $enqueued_modules['bar'] ) );
+ }
+
+ /**
+ * Tests that a module can be dequeued before it is registered and ensures
+ * that it is not enqueued after registration.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::dequeue()
+ * @covers ::print_enqueued_modules()
+ */
+ public function test_wp_dequeue_module_works_before_register() {
+ $this->modules->enqueue( 'foo' );
+ $this->modules->enqueue( 'bar' );
+ $this->modules->dequeue( 'foo' );
+ $this->modules->register( 'foo', '/foo.js' );
+ $this->modules->register( 'bar', '/bar.js' );
+
+ $enqueued_modules = $this->get_enqueued_modules();
+
+ $this->assertCount( 1, $enqueued_modules );
+ $this->assertFalse( isset( $enqueued_modules['foo'] ) );
+ $this->assertTrue( isset( $enqueued_modules['bar'] ) );
+ }
+
+ /**
+ * Tests that dependencies for a registered module are added to the import map
+ * when the module is enqueued.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_import_map()
+ */
+ public function test_wp_import_map_dependencies() {
+ $this->modules->register( 'foo', '/foo.js', array( 'dep' ) );
+ $this->modules->register( 'dep', '/dep.js' );
+ $this->modules->register( 'no-dep', '/no-dep.js' );
+ $this->modules->enqueue( 'foo' );
+
+ $import_map = $this->get_import_map();
+
+ $this->assertCount( 1, $import_map );
+ $this->assertStringStartsWith( '/dep.js', $import_map['dep'] );
+ $this->assertFalse( isset( $import_map['no-dep'] ) );
+ }
+
+ /**
+ * Tests that dependencies are not duplicated in the import map when multiple
+ * modules require the same dependency.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_import_map()
+ */
+ public function test_wp_import_map_no_duplicate_dependencies() {
+ $this->modules->register( 'foo', '/foo.js', array( 'dep' ) );
+ $this->modules->register( 'bar', '/bar.js', array( 'dep' ) );
+ $this->modules->register( 'dep', '/dep.js' );
+ $this->modules->enqueue( 'foo' );
+ $this->modules->enqueue( 'bar' );
+
+ $import_map = $this->get_import_map();
+
+ $this->assertCount( 1, $import_map );
+ $this->assertStringStartsWith( '/dep.js', $import_map['dep'] );
+ }
+
+ /**
+ * Tests that all recursive dependencies (both static and dynamic) are
+ * included in the import map.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_import_map()
+ */
+ public function test_wp_import_map_recursive_dependencies() {
+ $this->modules->register(
+ 'foo',
+ '/foo.js',
+ array(
+ 'static-dep',
+ array(
+ 'id' => 'dynamic-dep',
+ 'import' => 'dynamic',
+ ),
+ )
+ );
+ $this->modules->register(
+ 'static-dep',
+ '/static-dep.js',
+ array(
+ array(
+ 'id' => 'nested-static-dep',
+ 'import' => 'static',
+ ),
+ array(
+ 'id' => 'nested-dynamic-dep',
+ 'import' => 'dynamic',
+ ),
+ )
+ );
+ $this->modules->register( 'dynamic-dep', '/dynamic-dep.js' );
+ $this->modules->register( 'nested-static-dep', '/nested-static-dep.js' );
+ $this->modules->register( 'nested-dynamic-dep', '/nested-dynamic-dep.js' );
+ $this->modules->register( 'no-dep', '/no-dep.js' );
+ $this->modules->enqueue( 'foo' );
+
+ $import_map = $this->get_import_map();
+
+ $this->assertStringStartsWith( '/static-dep.js', $import_map['static-dep'] );
+ $this->assertStringStartsWith( '/dynamic-dep.js', $import_map['dynamic-dep'] );
+ $this->assertStringStartsWith( '/nested-static-dep.js', $import_map['nested-static-dep'] );
+ $this->assertStringStartsWith( '/nested-dynamic-dep.js', $import_map['nested-dynamic-dep'] );
+ $this->assertFalse( isset( $import_map['no-dep'] ) );
+ }
+
+ /**
+ * Tests that the import map is not printed at all if there are no
+ * dependencies.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_import_map()
+ */
+ public function test_wp_import_map_doesnt_print_if_no_dependencies() {
+ $this->modules->register( 'foo', '/foo.js' ); // No deps.
+ $this->modules->enqueue( 'foo' );
+
+ $import_map_markup = get_echo( array( $this->modules, 'print_import_map' ) );
+
+ $this->assertEmpty( $import_map_markup );
+ }
+
+ /**
+ * Tests that only static dependencies are preloaded and dynamic ones are
+ * excluded.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_module_preloads()
+ */
+ public function test_wp_enqueue_preloaded_static_dependencies() {
+ $this->modules->register(
+ 'foo',
+ '/foo.js',
+ array(
+ 'static-dep',
+ array(
+ 'id' => 'dynamic-dep',
+ 'import' => 'dynamic',
+ ),
+ )
+ );
+ $this->modules->register(
+ 'static-dep',
+ '/static-dep.js',
+ array(
+ array(
+ 'id' => 'nested-static-dep',
+ 'import' => 'static',
+ ),
+ array(
+ 'id' => 'nested-dynamic-dep',
+ 'import' => 'dynamic',
+ ),
+ )
+ );
+ $this->modules->register( 'dynamic-dep', '/dynamic-dep.js' );
+ $this->modules->register( 'nested-static-dep', '/nested-static-dep.js' );
+ $this->modules->register( 'nested-dynamic-dep', '/nested-dynamic-dep.js' );
+ $this->modules->register( 'no-dep', '/no-dep.js' );
+ $this->modules->enqueue( 'foo' );
+
+ $preloaded_modules = $this->get_preloaded_modules();
+
+ $this->assertCount( 2, $preloaded_modules );
+ $this->assertStringStartsWith( '/static-dep.js', $preloaded_modules['static-dep'] );
+ $this->assertStringStartsWith( '/nested-static-dep.js', $preloaded_modules['nested-static-dep'] );
+ $this->assertFalse( isset( $preloaded_modules['no-dep'] ) );
+ $this->assertFalse( isset( $preloaded_modules['dynamic-dep'] ) );
+ $this->assertFalse( isset( $preloaded_modules['nested-dynamic-dep'] ) );
+ }
+
+ /**
+ * Tests that static dependencies of dynamic depenendencies are not preloaded.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_module_preloads()
+ */
+ public function test_wp_dont_preload_static_dependencies_of_dynamic_dependencies() {
+ $this->modules->register(
+ 'foo',
+ '/foo.js',
+ array(
+ 'static-dep',
+ array(
+ 'id' => 'dynamic-dep',
+ 'import' => 'dynamic',
+ ),
+ )
+ );
+ $this->modules->register( 'static-dep', '/static-dep.js' );
+ $this->modules->register( 'dynamic-dep', '/dynamic-dep.js', array( 'nested-static-dep' ) );
+ $this->modules->register( 'nested-static-dep', '/nested-static-dep.js' );
+ $this->modules->register( 'no-dep', '/no-dep.js' );
+ $this->modules->enqueue( 'foo' );
+
+ $preloaded_modules = $this->get_preloaded_modules();
+
+ $this->assertCount( 1, $preloaded_modules );
+ $this->assertStringStartsWith( '/static-dep.js', $preloaded_modules['static-dep'] );
+ $this->assertFalse( isset( $preloaded_modules['dynamic-dep'] ) );
+ $this->assertFalse( isset( $preloaded_modules['nested-static-dep'] ) );
+ $this->assertFalse( isset( $preloaded_modules['no-dep'] ) );
+ }
+
+ /**
+ * Tests that preloaded dependencies don't include enqueued modules.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_module_preloads()
+ */
+ public function test_wp_preloaded_dependencies_filter_enqueued_modules() {
+ $this->modules->register(
+ 'foo',
+ '/foo.js',
+ array(
+ 'dep',
+ 'enqueued-dep',
+ )
+ );
+ $this->modules->register( 'dep', '/dep.js' );
+ $this->modules->register( 'enqueued-dep', '/enqueued-dep.js' );
+ $this->modules->enqueue( 'foo' );
+ $this->modules->enqueue( 'enqueued-dep' ); // Not preloaded.
+
+ $preloaded_modules = $this->get_preloaded_modules();
+
+ $this->assertCount( 1, $preloaded_modules );
+ $this->assertTrue( isset( $preloaded_modules['dep'] ) );
+ $this->assertFalse( isset( $preloaded_modules['enqueued-dep'] ) );
+ }
+
+ /**
+ * Tests that enqueued modules with dependants correctly add both the module
+ * and its dependencies to the import map.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_import_map()
+ */
+ public function test_wp_enqueued_modules_with_dependants_add_import_map() {
+ $this->modules->register(
+ 'foo',
+ '/foo.js',
+ array(
+ 'dep',
+ 'enqueued-dep',
+ )
+ );
+ $this->modules->register( 'dep', '/dep.js' );
+ $this->modules->register( 'enqueued-dep', '/enqueued-dep.js' );
+ $this->modules->enqueue( 'foo' );
+ $this->modules->enqueue( 'enqueued-dep' ); // Also in the import map.
+
+ $import_map = $this->get_import_map();
+
+ $this->assertCount( 2, $import_map );
+ $this->assertTrue( isset( $import_map['dep'] ) );
+ $this->assertTrue( isset( $import_map['enqueued-dep'] ) );
+ }
+
+ /**
+ * Tests the functionality of the `get_versioned_src` method to ensure
+ * proper URLs with version strings are returned.
+ *
+ * @ticket 56313
+ *
+ * @covers ::get_versioned_src()
+ */
+ public function test_get_versioned_src() {
+ $get_versioned_src = new ReflectionMethod( $this->modules, 'get_versioned_src' );
+ $get_versioned_src->setAccessible( true );
+
+ $module_with_version = array(
+ 'src' => 'http://example.com/module.js',
+ 'version' => '1.0',
+ );
+
+ $result = $get_versioned_src->invoke( $this->modules, $module_with_version );
+ $this->assertEquals( 'http://example.com/module.js?ver=1.0', $result );
+
+ $module_without_version = array(
+ 'src' => 'http://example.com/module.js',
+ 'version' => null,
+ );
+
+ $result = $get_versioned_src->invoke( $this->modules, $module_without_version );
+ $this->assertEquals( 'http://example.com/module.js', $result );
+
+ $module_with_wp_version = array(
+ 'src' => 'http://example.com/module.js',
+ 'version' => false,
+ );
+
+ $result = $get_versioned_src->invoke( $this->modules, $module_with_wp_version );
+ $this->assertEquals( 'http://example.com/module.js?ver=' . get_bloginfo( 'version' ), $result );
+
+ $module_with_existing_query_string = array(
+ 'src' => 'http://example.com/module.js?foo=bar',
+ 'version' => '1.0',
+ );
+
+ $result = $get_versioned_src->invoke( $this->modules, $module_with_existing_query_string );
+ $this->assertEquals( 'http://example.com/module.js?foo=bar&ver=1.0', $result );
+ }
+
+ /**
+ * Tests that the correct version is propagated to the import map, enqueued
+ * modules and preloaded modules.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_enqueued_modules()
+ * @covers ::print_import_map()
+ * @covers ::print_module_preloads()
+ * @covers ::get_version_query_string()
+ */
+ public function test_version_is_propagated_correctly() {
+ $this->modules->register(
+ 'foo',
+ '/foo.js',
+ array(
+ 'dep',
+ ),
+ '1.0'
+ );
+ $this->modules->register( 'dep', '/dep.js', array(), '2.0' );
+ $this->modules->enqueue( 'foo' );
+
+ $enqueued_modules = $this->get_enqueued_modules();
+ $this->assertEquals( '/foo.js?ver=1.0', $enqueued_modules['foo'] );
+
+ $import_map = $this->get_import_map();
+ $this->assertEquals( '/dep.js?ver=2.0', $import_map['dep'] );
+
+ $preloaded_modules = $this->get_preloaded_modules();
+ $this->assertEquals( '/dep.js?ver=2.0', $preloaded_modules['dep'] );
+ }
+
+ /**
+ * Tests that it can print the enqueued modules multiple times, and it will
+ * only print the modules that have not been printed before.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_enqueued_modules()
+ */
+ public function test_print_enqueued_modules_can_be_called_multiple_times() {
+ $this->modules->register( 'foo', '/foo.js' );
+ $this->modules->register( 'bar', '/bar.js' );
+ $this->modules->enqueue( 'foo' );
+
+ $enqueued_modules = $this->get_enqueued_modules();
+ $this->assertCount( 1, $enqueued_modules );
+ $this->assertTrue( isset( $enqueued_modules['foo'] ) );
+
+ $this->modules->enqueue( 'bar' );
+
+ $enqueued_modules = $this->get_enqueued_modules();
+ $this->assertCount( 1, $enqueued_modules );
+ $this->assertTrue( isset( $enqueued_modules['bar'] ) );
+
+ $enqueued_modules = $this->get_enqueued_modules();
+ $this->assertCount( 0, $enqueued_modules );
+ }
+
+ /**
+ * Tests that it can print the preloaded modules multiple times, and it will
+ * only print the modules that have not been printed before.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_module_preloads()
+ */
+ public function test_print_preloaded_modules_can_be_called_multiple_times() {
+ $this->modules->register( 'foo', '/foo.js', array( 'static-dep-1', 'static-dep-2' ) );
+ $this->modules->register( 'bar', '/bar.js', array( 'static-dep-3' ) );
+ $this->modules->register( 'static-dep-1', '/static-dep-1.js' );
+ $this->modules->register( 'static-dep-3', '/static-dep-3.js' );
+ $this->modules->enqueue( 'foo' );
+
+ $preloaded_modules = $this->get_preloaded_modules();
+ $this->assertCount( 1, $preloaded_modules );
+ $this->assertTrue( isset( $preloaded_modules['static-dep-1'] ) );
+
+ $this->modules->register( 'static-dep-2', '/static-dep-2.js' );
+ $this->modules->enqueue( 'bar' );
+
+ $preloaded_modules = $this->get_preloaded_modules();
+ $this->assertCount( 2, $preloaded_modules );
+ $this->assertTrue( isset( $preloaded_modules['static-dep-2'] ) );
+ $this->assertTrue( isset( $preloaded_modules['static-dep-3'] ) );
+
+ $preloaded_modules = $this->get_preloaded_modules();
+ $this->assertCount( 0, $preloaded_modules );
+ }
+
+ /**
+ * Tests that a module is not registered when calling enqueue without a valid
+ * src.
+ *
+ * @ticket 56313
+ *
+ * @covers ::enqueue()
+ * @covers ::print_enqueued_modules()
+ */
+ public function test_wp_enqueue_module_doesnt_register_without_a_valid_src() {
+ $this->modules->enqueue( 'foo' );
+
+ $enqueued_modules = $this->get_enqueued_modules();
+
+ $this->assertCount( 0, $enqueued_modules );
+ $this->assertFalse( isset( $enqueued_modules['foo'] ) );
+ }
+
+ /**
+ * Tests that a module is registered when calling enqueue with a valid src.
+ *
+ * @ticket 56313
+ *
+ * @covers ::enqueue()
+ * @covers ::print_enqueued_modules()
+ */
+ public function test_wp_enqueue_module_registers_with_valid_src() {
+ $this->modules->enqueue( 'foo', '/foo.js' );
+
+ $enqueued_modules = $this->get_enqueued_modules();
+
+ $this->assertCount( 1, $enqueued_modules );
+ $this->assertStringStartsWith( '/foo.js', $enqueued_modules['foo'] );
+ }
+
+ /**
+ * Tests that a module is registered when calling enqueue with a valid src the
+ * second time.
+ *
+ * @ticket 56313
+ *
+ * @covers ::enqueue()
+ * @covers ::print_enqueued_modules()
+ */
+ public function test_wp_enqueue_module_registers_with_valid_src_the_second_time() {
+ $this->modules->enqueue( 'foo' ); // Not valid src.
+
+ $enqueued_modules = $this->get_enqueued_modules();
+
+ $this->assertCount( 0, $enqueued_modules );
+ $this->assertFalse( isset( $enqueued_modules['foo'] ) );
+
+ $this->modules->enqueue( 'foo', '/foo.js' ); // Valid src.
+
+ $enqueued_modules = $this->get_enqueued_modules();
+
+ $this->assertCount( 1, $enqueued_modules );
+ $this->assertStringStartsWith( '/foo.js', $enqueued_modules['foo'] );
+ }
+
+ /**
+ * Tests that a module is registered with all the params when calling enqueue.
+ *
+ * @ticket 56313
+ *
+ * @covers ::register()
+ * @covers ::enqueue()
+ * @covers ::print_enqueued_modules()
+ * @covers ::print_import_map()
+ */
+ public function test_wp_enqueue_module_registers_all_params() {
+ $this->modules->enqueue( 'foo', '/foo.js', array( 'dep' ), '1.0' );
+ $this->modules->register( 'dep', '/dep.js' );
+
+ $enqueued_modules = $this->get_enqueued_modules();
+ $import_map = $this->get_import_map();
+
+ $this->assertCount( 1, $enqueued_modules );
+ $this->assertEquals( '/foo.js?ver=1.0', $enqueued_modules['foo'] );
+ $this->assertCount( 1, $import_map );
+ $this->assertStringStartsWith( '/dep.js', $import_map['dep'] );
+ }
+}
</ins></span></pre>
</div>
</div>
</body>
</html>