Extract the JSX Runtime into its own script

WordPress · May 15, 2024 · afcdcd8 · afcdcd8
1 parent 1b8dc96
commit afcdcd8
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -590,6 +590,14 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 		array( 'react' ),
 		'18'
 	);
+
+	gutenberg_override_script(
+		$scripts,
+		'react-jsx-runtime',
+		gutenberg_url( 'build/react-jsx-runtime/index.min.js' ),
+		array(),
+		'18'
+	);
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
 

diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -42,6 +42,9 @@ function defaultRequestToExternal( request ) {
 
 		case 'react-dom':
 			return 'ReactDOM';
+
+		case 'react/jsx-runtime':
+			return 'ReactJSXRuntime';
 	}
 
 	if ( request.includes( 'react-refresh/runtime' ) ) {
@@ -117,6 +120,9 @@ function defaultRequestToHandle( request ) {
 
 		case 'lodash-es':
 			return 'lodash';
+
+		case 'react/jsx-runtime':
+			return 'react-jsx-runtime';
 	}
 
 	if ( request.includes( 'react-refresh/runtime' ) ) {

diff --git a/tools/webpack/development.js b/tools/webpack/development.js
@@ -46,4 +46,22 @@ module.exports = [
 			} ),
 		],
 	},
+	{
+		...sharedConfig,
+		name: 'react-jsx-runtime',
+		entry: {
+			'react-jsx-runtime': {
+				import: 'react/jsx-runtime',
+				library: {
+					name: 'ReactJSXRuntime',
+					type: 'window',
+				},
+			},
+		},
+		plugins: [
+			new DependencyExtractionWebpackPlugin( {
+				useDefaults: false,
+			} ),
+		],
+	},
 ];