From afcdcd876e3413273b82f72da3709a6c887ee401 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 15 May 2024 21:56:45 +0100
Subject: [PATCH] Extract the JSX Runtime into its own script

---
 lib/client-assets.php                          |  8 ++++++++
 .../lib/util.js                                |  6 ++++++
 tools/webpack/development.js                   | 18 ++++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/lib/client-assets.php b/lib/client-assets.php
index 13884f90fb3ea..db3bc8443eba5 100644
--- 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
index 2d2935c661df1..51b1799a34e22 100644
--- 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
index 88ac4fba42f20..d707a6d1afc2e 100644
--- 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,
+			} ),
+		],
+	},
 ];