Build the React JSX runtime into a new WordPress script

src/wp-includes/script-loader.php

@@ -91,6 +91,7 @@ function wp_default_packages_vendor( $scripts ) {
 	$vendor_scripts = array(
 		'react',
 		'react-dom' => array( 'react' ),
+		'react-jsx-runtime' => array( 'react' ),
 		'regenerator-runtime',
 		'moment',
 		'lodash',
@@ -109,6 +110,7 @@ function wp_default_packages_vendor( $scripts ) {
 	$vendor_scripts_versions = array(
 		'react'                       => '18.3.1',
 		'react-dom'                   => '18.3.1',
+		'react-jsx-runtime'           => '18.3.1',
 		'regenerator-runtime'         => '0.14.0',
 		'moment'                      => '2.29.4',
 		'lodash'                      => '4.17.21',

tools/webpack/packages.js

@@ -95,8 +95,6 @@ module.exports = function (
 		'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',
 		'regenerator-runtime.js': 'regenerator-runtime/runtime.js',
 	};
 
@@ -111,8 +109,6 @@ module.exports = function (
 			'objectFitPolyfill/dist/objectFitPolyfill.min.js',
 		'wp-polyfill-inert.min.js': 'wicg-inert/dist/inert.min.js',
 		'moment.min.js': 'moment/min/moment.min.js',
-		'react.min.js': 'react/umd/react.production.min.js',
-		'react-dom.min.js': 'react-dom/umd/react-dom.production.min.js',
 	};
 
 	const minifyVendors = {

tools/webpack/vendors.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+
+const importedVendors = {
+	react: { import: 'react', global: 'React' },
+	'react-dom': { import: 'react-dom', global: 'ReactDOM' },
+	'react-jsx-runtime': {
+		import: 'react/jsx-runtime',
+		global: 'ReactJSXRuntime',
+	},
+};
+
+module.exports = function (
+	env = { environment: 'production', watch: false, buildTarget: false }
+) {
+	const mode = env.environment;
+	let buildTarget = env.buildTarget
+		? env.buildTarget
+		: mode === 'production'
+		? 'build'
+		: 'src';
+    buildTarget = buildTarget + '/wp-includes/js/dist/vendor/';
+	return [
+		...Object.entries( importedVendors ).flatMap( ( [ name, config ] ) => {
+			return [ 'production', 'development' ].map( ( currentMode ) => {
+				return {
+					mode: currentMode,
+					target: 'browserslist',
+					output: {
+						filename:
+							currentMode === 'development'
+								? `[name].js`
+								: `[name].min.js`,
+						path: join( __dirname, '..', '..', buildTarget ),
+					},
+					entry: {
+						[ name ]: {
+							import: config.import,
+							library: {
+								name: config.global,
+								type: 'window',
+							},
+						},
+					},
+
+					externals:
+						name === 'react'
+							? {}
+							: {
+									react: 'React',
+							  },
+				};
+			} );
+		} ),
+	];
+};

webpack.config.js

@@ -3,6 +3,7 @@ const developmentConfig = require( './tools/webpack/development' );
 const mediaConfig = require( './tools/webpack/media' );
 const packagesConfig = require( './tools/webpack/packages' );
 const modulesConfig = require( './tools/webpack/modules' );
+const vendorsConfig = require( './tools/webpack/vendors' );
 
 module.exports = function( env = { environment: "production", watch: false, buildTarget: false } ) {
 	if ( ! env.watch ) {
@@ -19,6 +20,7 @@ module.exports = function( env = { environment: "production", watch: false, buil
 		mediaConfig( env ),
 		packagesConfig( env ),
 		modulesConfig( env ),
+		...vendorsConfig( env ),
 	];
 
 	return config;