From feee589861b493b03bb62d1dfa15a79ddd6ad378 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Thu, 25 Jan 2024 18:59:02 +0100 Subject: [PATCH 01/21] Add import map polyfill --- Gruntfile.js | 4 ++- package-lock.json | 11 +++++++++ package.json | 1 + src/wp-includes/class-wp-script-modules.php | 27 +++++++++++++++++++++ tools/webpack/packages.js | 4 +++ 5 files changed, 46 insertions(+), 1 deletion(-) diff --git a/Gruntfile.js b/Gruntfile.js index 43e7bd02efd09..40ecdfdc5b3cd 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1568,7 +1568,9 @@ module.exports = function(grunt) { const ignoredFiles = [ 'build/wp-includes/js/dist/components.js', 'build/wp-includes/js/dist/block-editor.js', - 'build/wp-includes/js/dist/block-editor.min.js' + 'build/wp-includes/js/dist/block-editor.min.js', + 'build/wp-includes/js/dist/vendor/wp-polyfill-importmap.js', + 'build/wp-includes/js/dist/vendor/wp-polyfill-importmap.min.js' ]; const files = buildFiles.reduce( ( acc, path ) => { // Skip excluded paths and any path that isn't a file. diff --git a/package-lock.json b/package-lock.json index 8d53eab8e8554..91b836800731d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -81,6 +81,7 @@ "clipboard": "2.0.11", "core-js-url-browser": "3.6.4", "element-closest": "^3.0.2", + "es-module-shims": "1.8.2", "formdata-polyfill": "4.0.10", "framer-motion": "10.16.4", "hoverintent": "2.2.1", @@ -13349,6 +13350,11 @@ "integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==", "dev": true }, + "node_modules/es-module-shims": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/es-module-shims/-/es-module-shims-1.8.2.tgz", + "integrity": "sha512-7vIYVzpOhXtpc3Yn03itB+GSgVZFW7oL4kdydA+iL+IEi7HiSLBUxM05QFw4SxTl6e++pMpGqZPo2+vdNs3TbA==" + }, "node_modules/es-set-tostringtag": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz", @@ -43316,6 +43322,11 @@ "integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==", "dev": true }, + "es-module-shims": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/es-module-shims/-/es-module-shims-1.8.2.tgz", + "integrity": "sha512-7vIYVzpOhXtpc3Yn03itB+GSgVZFW7oL4kdydA+iL+IEi7HiSLBUxM05QFw4SxTl6e++pMpGqZPo2+vdNs3TbA==" + }, "es-set-tostringtag": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz", diff --git a/package.json b/package.json index 192386d8b906e..9e5e13653e8a1 100644 --- a/package.json +++ b/package.json @@ -150,6 +150,7 @@ "clipboard": "2.0.11", "core-js-url-browser": "3.6.4", "element-closest": "^3.0.2", + "es-module-shims": "1.8.2", "formdata-polyfill": "4.0.10", "framer-motion": "10.16.4", "hoverintent": "2.2.1", diff --git a/src/wp-includes/class-wp-script-modules.php b/src/wp-includes/class-wp-script-modules.php index 7eebb79da1b32..33d21a64c6141 100644 --- a/src/wp-includes/class-wp-script-modules.php +++ b/src/wp-includes/class-wp-script-modules.php @@ -166,6 +166,7 @@ public function add_hooks() { add_action( $position, array( $this, 'print_import_map' ) ); add_action( $position, array( $this, 'print_enqueued_script_modules' ) ); add_action( $position, array( $this, 'print_script_module_preloads' ) ); + add_action( 'wp_footer', array( $this, 'print_import_map_polyfill' ), 11 ); } /** @@ -225,6 +226,32 @@ public function print_import_map() { } } + /** + * Prints the necessary script to load import map polyfill for browsers that + * do not support import maps. + * + * @since 6.5.0 + */ + public function print_import_map_polyfill() { + $test = 'HTMLScriptElement.supports && HTMLScriptElement.supports("importmap")'; + $src = includes_url( 'js/dist/vendor/wp-polyfill-importmap.min.js' ); + + echo ( + // Test presence of feature... + '' + ); + } + + + /** * Returns the import map array. * diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js index 6867cbd0936d9..1c9116358fbe3 100644 --- a/tools/webpack/packages.js +++ b/tools/webpack/packages.js @@ -93,6 +93,7 @@ module.exports = function ( 'wp-polyfill-object-fit.js': 'objectFitPolyfill/src/objectFitPolyfill.js', 'wp-polyfill-inert.js': 'wicg-inert/dist/inert.js', + 'wp-polyfill-importmap.js': 'es-module-shims/dist/es-module-shims.wasm.js', 'moment.js': 'moment/moment.js', 'react.js': 'react/umd/react.development.js', 'react-dom.js': 'react-dom/umd/react-dom.development.js', @@ -121,6 +122,9 @@ module.exports = function ( 'polyfill-library/polyfills/__dist/Node.prototype.contains/raw.js', 'wp-polyfill-dom-rect.min.js': 'polyfill-library/polyfills/__dist/DOMRect/raw.js', + 'wp-polyfill-node-contains.min.js': 'polyfill-library/polyfills/__dist/Node.prototype.contains/raw.js', + 'wp-polyfill-dom-rect.min.js': 'polyfill-library/polyfills/__dist/DOMRect/raw.js', + 'wp-polyfill-importmap.min.js': 'es-module-shims/dist/es-module-shims.wasm.js', }; const phpFiles = { From 63f7021a55e63322ef6f4dd4fb00696e1a560d48 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 26 Jan 2024 11:12:13 +0100 Subject: [PATCH 02/21] Do not load polyfill if there are no modules --- src/wp-includes/.wp-env.override.json | 6 ++++ src/wp-includes/class-wp-script-modules.php | 31 +++++++++++---------- 2 files changed, 23 insertions(+), 14 deletions(-) create mode 100644 src/wp-includes/.wp-env.override.json diff --git a/src/wp-includes/.wp-env.override.json b/src/wp-includes/.wp-env.override.json new file mode 100644 index 0000000000000..8f9e9e82a8271 --- /dev/null +++ b/src/wp-includes/.wp-env.override.json @@ -0,0 +1,6 @@ +{ + "config": { + "WP_HOME": "http://bs-local.com", + "WP_SITEURL": "http://bs-local.com" + } +} diff --git a/src/wp-includes/class-wp-script-modules.php b/src/wp-includes/class-wp-script-modules.php index 33d21a64c6141..1bf70610474bf 100644 --- a/src/wp-includes/class-wp-script-modules.php +++ b/src/wp-includes/class-wp-script-modules.php @@ -233,21 +233,24 @@ public function print_import_map() { * @since 6.5.0 */ public function print_import_map_polyfill() { - $test = 'HTMLScriptElement.supports && HTMLScriptElement.supports("importmap")'; - $src = includes_url( 'js/dist/vendor/wp-polyfill-importmap.min.js' ); + $import_map = $this->get_import_map(); + if ( ! empty( $import_map['imports'] ) ) { + $test = 'HTMLScriptElement.supports && HTMLScriptElement.supports("importmap")'; + $src = includes_url( 'js/dist/vendor/wp-polyfill-importmap.min.js' ); - echo ( - // Test presence of feature... - '' - ); + echo ( + // Test presence of feature... + '' + ); + } } From 4156afcbac15f08e6b7d283404d3b4ad2d754048 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 26 Jan 2024 12:20:15 +0100 Subject: [PATCH 03/21] Add an id to the script --- src/wp-includes/class-wp-script-modules.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-includes/class-wp-script-modules.php b/src/wp-includes/class-wp-script-modules.php index 1bf70610474bf..c716769b56e79 100644 --- a/src/wp-includes/class-wp-script-modules.php +++ b/src/wp-includes/class-wp-script-modules.php @@ -246,7 +246,7 @@ public function print_import_map_polyfill() { * at the `document.write`. Its caveat of synchronous mid-stream * blocking write is exactly the behavior we need though. */ - 'document.write( \'' ); From d7bca4b5bf565c84625932c3e6a69785850ef248 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 26 Jan 2024 13:23:11 +0100 Subject: [PATCH 04/21] Remove unwanted file --- src/wp-includes/.wp-env.override.json | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 src/wp-includes/.wp-env.override.json diff --git a/src/wp-includes/.wp-env.override.json b/src/wp-includes/.wp-env.override.json deleted file mode 100644 index 8f9e9e82a8271..0000000000000 --- a/src/wp-includes/.wp-env.override.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "config": { - "WP_HOME": "http://bs-local.com", - "WP_SITEURL": "http://bs-local.com" - } -} From ff4ce0dbdc277c4938a80e543e849367d0a81758 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 26 Jan 2024 13:32:35 +0100 Subject: [PATCH 05/21] Add version --- src/wp-includes/class-wp-script-modules.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/wp-includes/class-wp-script-modules.php b/src/wp-includes/class-wp-script-modules.php index c716769b56e79..2164f99474bf4 100644 --- a/src/wp-includes/class-wp-script-modules.php +++ b/src/wp-includes/class-wp-script-modules.php @@ -236,8 +236,7 @@ public function print_import_map_polyfill() { $import_map = $this->get_import_map(); if ( ! empty( $import_map['imports'] ) ) { $test = 'HTMLScriptElement.supports && HTMLScriptElement.supports("importmap")'; - $src = includes_url( 'js/dist/vendor/wp-polyfill-importmap.min.js' ); - + $src = add_query_arg( 'ver', get_bloginfo( 'version' ), includes_url( 'js/dist/vendor/wp-polyfill-importmap.min.js' ) ); echo ( // Test presence of feature... '' + global $wp_scripts; + wp_print_inline_script_tag( + wp_get_script_polyfill( + $wp_scripts, + array( + 'HTMLScriptElement.supports && HTMLScriptElement.supports("importmap")' => 'wp-polyfill-importmap', + ) + ), + array( + 'id' => 'wp-polyfill-importmap', + ) ); } } diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 50864cfd7ba7f..2491aee09c452 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -96,6 +96,7 @@ function wp_default_packages_vendor( $scripts ) { 'lodash', 'wp-polyfill-fetch', 'wp-polyfill-formdata', + 'wp-polyfill-importmap', 'wp-polyfill-node-contains', 'wp-polyfill-url', 'wp-polyfill-dom-rect', @@ -120,6 +121,7 @@ function wp_default_packages_vendor( $scripts ) { 'wp-polyfill-object-fit' => '2.3.5', 'wp-polyfill-inert' => '3.1.2', 'wp-polyfill' => '3.15.0', + 'wp-polyfill-importmap' => get_bloginfo( 'version' ), ); foreach ( $vendor_scripts as $handle => $dependencies ) { From 90be4f9f73ed71cc955242fbca8e3df8c89ebe36 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 26 Jan 2024 16:01:27 +0100 Subject: [PATCH 07/21] Use load id --- src/wp-includes/class-wp-script-modules.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-includes/class-wp-script-modules.php b/src/wp-includes/class-wp-script-modules.php index 5663b47aed8eb..a38e672f4c0b7 100644 --- a/src/wp-includes/class-wp-script-modules.php +++ b/src/wp-includes/class-wp-script-modules.php @@ -244,7 +244,7 @@ public function print_import_map_polyfill() { ) ), array( - 'id' => 'wp-polyfill-importmap', + 'id' => 'wp-load-polyfill-importmap', ) ); } From ba6ea746976aee921c8492a4b01f26b2cca61b3f Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Fri, 26 Jan 2024 16:02:57 +0100 Subject: [PATCH 08/21] Use stable version --- src/wp-includes/script-loader.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 2491aee09c452..25977a9bd776d 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -121,7 +121,7 @@ function wp_default_packages_vendor( $scripts ) { 'wp-polyfill-object-fit' => '2.3.5', 'wp-polyfill-inert' => '3.1.2', 'wp-polyfill' => '3.15.0', - 'wp-polyfill-importmap' => get_bloginfo( 'version' ), + 'wp-polyfill-importmap' => '1.8.2', ); foreach ( $vendor_scripts as $handle => $dependencies ) { From e0466109a65bbb169f7d9c244677091d257134b2 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Mon, 29 Jan 2024 15:33:40 +0100 Subject: [PATCH 09/21] Add unit test for import map polyfill function --- tests/phpunit/tests/dependencies/scripts.php | 44 ++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/tests/phpunit/tests/dependencies/scripts.php b/tests/phpunit/tests/dependencies/scripts.php index 228077188067b..a3bfec53cfef7 100644 --- a/tests/phpunit/tests/dependencies/scripts.php +++ b/tests/phpunit/tests/dependencies/scripts.php @@ -3104,6 +3104,50 @@ public function test_wp_scripts_move_to_footer( $set_up, $expected_header, $expe $this->assertEquals( $expected_groups, wp_scripts()->groups, 'Expected groups to match.' ); } + /** + * Test that get_script_polyfill() returns the correct polyfill. + * + * @ticket 60348 + * + * @covers ::wp_get_script_polyfill + * @dataProvider data_wp_get_script_polyfill + * + * @param string $script_name Script name. + * @param string $test_script Conditional that checks browser compatibility. + * @param string $script_url Script source URL. + */ + + public function test_wp_get_script_polyfill( $script_name, $test_script, $script_url ) { + global $wp_scripts; + wp_register_script( $script_name, $script_url, array(), null, true ); + + $polyfill = wp_get_script_polyfill( + $wp_scripts, + array( + $test_script => $script_name, + ) + ); + $expected = '( ' . $test_script . ' ) || document.write( \'