Script Modules API: Add import map polyfill for older browsers

Syncs the changes from https://github.com/WordPress/gutenberg/pull/58263. Adds a polyfill to make import maps compatible with unsported browsers (https://caniuse.com/import-maps).

Fixes #60348.
Props cbravobernal, jorbin, luisherranz, jonsurrell.



git-svn-id: https://develop.svn.wordpress.org/trunk@57492 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Greg Ziółkowski
2024-01-31 08:29:18 +00:00
parent 5d3f66ac5b
commit dc15d66ee6
8 changed files with 105 additions and 6 deletions

View File

@@ -3104,6 +3104,36 @@ HTML
$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
*
* @global WP_Scripts $wp_scripts WP_Scripts instance.
*/
public function test_wp_get_script_polyfill() {
global $wp_scripts;
$script_name = 'wp-polyfill-importmap';
$test_script = 'HTMLScriptElement.supports && HTMLScriptElement.supports("importmap")';
$script_url = 'https://example.com/wp-polyfill-importmap.js';
wp_register_script( $script_name, $script_url );
$polyfill = wp_get_script_polyfill(
$wp_scripts,
array(
$test_script => $script_name,
)
);
wp_deregister_script( $script_name );
$expected = '( ' . $test_script . ' ) || document.write( \'<script src="' . $script_url . '"></scr\' + \'ipt>\' );';
$this->assertEquals( $expected, $polyfill );
}
/**
* Data provider for test_wp_scripts_move_to_footer.
*

View File

@@ -11,7 +11,8 @@
*
* @coversDefaultClass WP_Script_Modules
*/
class Tests_WP_Script_Modules extends WP_UnitTestCase {
class Tests_Script_Modules_WpScriptModules extends WP_UnitTestCase {
/**
* Instance of WP_Script_Modules.
*
@@ -24,6 +25,7 @@ class Tests_WP_Script_Modules extends WP_UnitTestCase {
*/
public function set_up() {
parent::set_up();
// Set up the WP_Script_Modules instance.
$this->script_modules = new WP_Script_Modules();
}
@@ -600,4 +602,37 @@ class Tests_WP_Script_Modules extends WP_UnitTestCase {
$this->assertCount( 1, $import_map );
$this->assertStringStartsWith( '/dep.js', $import_map['dep'] );
}
/**
* @ticket 60348
*
* @covers ::print_import_map_polyfill()
*/
public function test_wp_print_import_map_has_no_polyfill_when_no_modules_registered() {
$import_map_polyfill = get_echo( array( $this->script_modules, 'print_import_map' ) );
$this->assertEquals( '', $import_map_polyfill );
}
/**
* @ticket 60348
*
* @covers ::print_import_map_polyfill()
*/
public function test_wp_print_import_map_has_polyfill_when_modules_registered() {
$script_name = 'wp-polyfill-importmap';
wp_register_script( $script_name, '/wp-polyfill-importmap.js' );
$this->script_modules->enqueue( 'foo', '/foo.js', array( 'dep' ), '1.0' );
$this->script_modules->register( 'dep', '/dep.js' );
$import_map_polyfill = get_echo( array( $this->script_modules, 'print_import_map' ) );
wp_deregister_script( $script_name );
$p = new WP_HTML_Tag_Processor( $import_map_polyfill );
$p->next_tag( array( 'tag' => 'SCRIPT' ) );
$id = $p->get_attribute( 'id' );
$this->assertEquals( 'wp-load-polyfill-importmap', $id );
}
}