mirror of
https://github.com/gosticks/wordpress-develop.git
synced 2026-02-22 00:32:47 +00:00
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 #60232.
Props luisherranz, idad5, costdev, neffff, joemcgill, jorbin, swissspidy, jonsurrell, flixos90, gziolo, westonruter.
Fixes #56313.
git-svn-id: https://develop.svn.wordpress.org/trunk@57269 602fd350-edb4-49c9-b593-d223f7449a82
|
||
|---|---|---|
| .. | ||
| admin | ||
| ajax | ||
| attachment | ||
| block-supports | ||
| block-templates | ||
| blocks | ||
| bookmark | ||
| canonical | ||
| category | ||
| comment | ||
| compat | ||
| cron | ||
| customize | ||
| date | ||
| db | ||
| dependencies | ||
| diff | ||
| editor | ||
| error-protection | ||
| feed | ||
| filesystem | ||
| fonts/font-face | ||
| formatting | ||
| functions | ||
| general | ||
| hooks | ||
| html-api | ||
| http | ||
| image | ||
| import | ||
| includes | ||
| kses | ||
| l10n | ||
| link | ||
| load | ||
| media | ||
| menu | ||
| meta | ||
| multisite | ||
| oembed | ||
| option | ||
| pluggable | ||
| pomo | ||
| post | ||
| privacy | ||
| query | ||
| rest-api | ||
| rewrite | ||
| script-modules | ||
| sitemaps | ||
| style-engine | ||
| taxonomy | ||
| term | ||
| theme | ||
| url | ||
| user | ||
| widgets | ||
| wp | ||
| xmlrpc | ||
| actions.php | ||
| adminbar.php | ||
| auth.php | ||
| avatar.php | ||
| basic.php | ||
| block-template-utils.php | ||
| block-template.php | ||
| cache.php | ||
| canonical.php | ||
| comment.php | ||
| cron.php | ||
| db.php | ||
| dependencies.php | ||
| file.php | ||
| filters.php | ||
| functions.php | ||
| https-detection.php | ||
| https-migration.php | ||
| kses.php | ||
| l10n.php | ||
| link.php | ||
| locale.php | ||
| media.php | ||
| meta.php | ||
| post.php | ||
| query.php | ||
| readme.php | ||
| rest-api.php | ||
| rewrite.php | ||
| robots.php | ||
| shortcode.php | ||
| taxonomy.php | ||
| template.php | ||
| term.php | ||
| theme-previews.php | ||
| theme.php | ||
| upload.php | ||
| url.php | ||
| user.php | ||
| utils.php | ||
| vars.php | ||
| walker.php | ||
| widgets.php | ||
<?php
/**
* Validate recommended versions for dependencies referenced in `readme.html`,
* based on external site support pages.
*
* @group external-http
*/
class Tests_Readme extends WP_UnitTestCase {
/**
* @coversNothing
*/
public function test_readme_php_version() {
$this->markTestSkipped(
'Temporarily disabled. Test should be re-enabled once WordPress is fully compatible with PHP 8.0+.'
);
// This test is designed to only run on trunk.
$this->skipOnAutomatedBranches();
$readme = file_get_contents( ABSPATH . 'readme.html' );
preg_match( '#Recommendations.*PHP</a> version <strong>([0-9.]*)#s', $readme, $matches );
$response_body = $this->get_response_body( 'https://www.php.net/supported-versions.php' );
preg_match_all( '#<tr class="stable">\s*<td>\s*<a [^>]*>\s*([0-9.]*)#s', $response_body, $php_matches );
$this->assertContains( $matches[1], $php_matches[1], "readme.html's Recommended PHP version is too old. Remember to update the WordPress.org Requirements page, too." );
}
/**
* @coversNothing
*/
public function test_readme_mysql_version() {
// This test is designed to only run on trunk.
$this->skipOnAutomatedBranches();
$readme = file_get_contents( ABSPATH . 'readme.html' );
preg_match( '#Recommendations.*MySQL</a> version <strong>([0-9.]*)#s', $readme, $matches );
$response_body = $this->get_response_body( "https://dev.mysql.com/doc/relnotes/mysql/{$matches[1]}/en/" );
// Retrieve the date of the first GA release for the recommended branch.
preg_match( '#.*(\d{4}-\d{2}-\d{2}), General Availability#s', $response_body, $mysql_matches );
/*
* Per https://www.mysql.com/support/, Oracle actively supports MySQL releases for 5 years from GA release.
*
* The currently recommended MySQL 8.0 branch moved from active support to extended support on 2023-04-19.
* As WordPress core may not be fully compatible with MySQL 8.1 at this time, the "supported" period here
* is increased to 8 years to include extended support.
*
* TODO: Reduce this back to 5 years once MySQL 8.1 compatibility is achieved.
*/
$mysql_eol = gmdate( 'Y-m-d', strtotime( $mysql_matches[1] . ' +8 years' ) );
$current_date = gmdate( 'Y-m-d' );
$this->assertLessThan( $mysql_eol, $current_date, "readme.html's Recommended MySQL version is too old. Remember to update the WordPress.org Requirements page, too." );
}
/**
* @coversNothing
*/
public function test_readme_mariadb_version() {
// This test is designed to only run on trunk.
$this->skipOnAutomatedBranches();
$readme = file_get_contents( ABSPATH . 'readme.html' );
preg_match( '#Recommendations.*MariaDB</a> version <strong>([0-9.]*)#s', $readme, $matches );
$matches[1] = str_replace( '.', '', $matches[1] );
$response_body = $this->get_response_body( "https://mariadb.com/kb/en/release-notes-mariadb-{$matches[1]}-series/" );
// Retrieve the date of the first stable release for the recommended branch.
preg_match( '#.*Stable.*?(\d{2} [A-Za-z]{3} \d{4})#s', $response_body, $mariadb_matches );
// Per https://mariadb.org/about/#maintenance-policy, MariaDB releases are supported for 5 years.
$mariadb_eol = gmdate( 'Y-m-d', strtotime( $mariadb_matches[1] . ' +5 years' ) );
$current_date = gmdate( 'Y-m-d' );
$this->assertLessThan( $mariadb_eol, $current_date, "readme.html's Recommended MariaDB version is too old. Remember to update the WordPress.org Requirements page, too." );
}
/**
* Helper function to retrieve the response body or skip the test on HTTP timeout.
*
* @param string $url The URL to retrieve the response from.
* @return string The response body.
*/
public function get_response_body( $url ) {
$response = wp_remote_get( $url );
$this->skipTestOnTimeout( $response );
$response_code = wp_remote_retrieve_response_code( $response );
$response_body = wp_remote_retrieve_body( $response );
if ( 200 !== $response_code ) {
$parsed_url = parse_url( $url );
$error_message = sprintf(
'Could not contact %1$s to check versions. Response code: %2$s. Response body: %3$s',
$parsed_url['host'],
$response_code,
$response_body
);
if ( 503 === $response_code ) {
$this->markTestSkipped( $error_message );
}
$this->fail( $error_message );
}
return $response_body;
}
}