[Mobile] - Upgrade to the new JSX transform on Mobile

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( 'react' ),
+		'18'
+	);
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
 

packages/babel-preset-default/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+
 ## 7.42.0 (2024-05-16)
 
 ## 7.41.0 (2024-05-02)

packages/babel-preset-default/index.js

@@ -75,21 +75,10 @@ module.exports = ( api ) => {
 		],
 		plugins: [
 			require.resolve( '@wordpress/warning/babel-plugin' ),
-			[
-				require.resolve( '@wordpress/babel-plugin-import-jsx-pragma' ),
-				{
-					scopeVariable: 'createElement',
-					scopeVariableFrag: 'Fragment',
-					source: 'react',
-					isDefault: false,
-				},
-			],
 			[
 				require.resolve( '@babel/plugin-transform-react-jsx' ),
 				{
-					pragma: 'createElement',
-					pragmaFrag: 'Fragment',
-					useSpread: true,
+					runtime: 'automatic',
 				},
 			],
 			maybeGetPluginTransformRuntime(),

packages/babel-preset-default/package.json

@@ -35,7 +35,6 @@
 		"@babel/preset-env": "^7.16.0",
 		"@babel/preset-typescript": "^7.16.0",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
 		"@wordpress/browserslist-config": "file:../browserslist-config",
 		"@wordpress/warning": "file:../warning",
 		"browserslist": "^4.21.10",

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   Remove usage of deprecated spreading of `key` prop in JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+
 ## 27.6.0 (2024-05-16)
 
 ### Internal

packages/components/src/custom-select-control/index.js

@@ -187,10 +187,10 @@ export default function CustomSelectControl( props ) {
 							items.map( ( item, index ) => (
 								// eslint-disable-next-line react/jsx-key
 								<li
+									key={ item.key }
 									{ ...getItemProps( {
 										item,
 										index,
-										key: item.key,
 										className: clsx(
 											item.className,
 											'components-custom-select-control__item',

packages/components/src/form-token-field/index.tsx

@@ -644,7 +644,6 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			autoCapitalize,
 			autoComplete,
 			placeholder: value.length === 0 ? placeholder : '',
-			key: 'input',
 			disabled,
 			value: incompleteTokenValue,
 			onBlur,
@@ -654,6 +653,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 		return (
 			<TokenInput
+				key="input"
 				{ ...inputProps }
 				onChange={
 					! ( maxLength && value.length >= maxLength )

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' ) ) {

packages/interactivity/src/directives.tsx

@@ -1,8 +1,6 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable react-hooks/exhaustive-deps */
 
-/* @jsx createElement */
-
 /**
  * External dependencies
  */
@@ -233,6 +231,7 @@ export default () => {
 	// data-wp-context
 	directive(
 		'context',
+		// @ts-ignore-next-line
 		( {
 			directives: { context },
 			props: { children },
@@ -262,7 +261,7 @@ export default () => {
 				return proxifyContext( currentValue.current, inheritedValue );
 			}, [ defaultEntry, inheritedValue ] );
 
-			return <Provider value={ contextStack }>{ children }</Provider>;
+			return createElement( Provider, { value: contextStack }, children );
 		},
 		{ priority: 5 }
 	);
@@ -483,12 +482,10 @@ export default () => {
 		} ) => {
 			// Preserve the initial inner HTML.
 			const cached = useMemo( () => innerHTML, [] );
-			return (
-				<Type
-					dangerouslySetInnerHTML={ { __html: cached } }
-					{ ...rest }
-				/>
-			);
+			return createElement( Type, {
+				dangerouslySetInnerHTML: { __html: cached },
+				...rest,
+			} );
 		}
 	);
 
@@ -551,10 +548,10 @@ export default () => {
 					? getEvaluate( { scope } )( eachKey[ 0 ] )
 					: item;
 
-				return (
-					<Provider value={ mergedContext } key={ key }>
-						{ element.props.content }
-					</Provider>
+				return createElement(
+					Provider,
+					{ value: mergedContext, key },
+					element.props.content
 				);
 			} );
 		},

packages/interactivity/src/hooks.tsx

@@ -1,5 +1,3 @@
-/* @jsx createElement */
-
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable react-hooks/exhaustive-deps */
 
@@ -352,17 +350,15 @@ const Directives = ( {
 
 	// Recursively render the wrapper for the next priority level.
 	const children =
-		nextPriorityLevels.length > 0 ? (
-			<Directives
-				directives={ directives }
-				priorityLevels={ nextPriorityLevels }
-				element={ element }
-				originalProps={ originalProps }
-				previousScope={ scope }
-			/>
-		) : (
-			element
-		);
+		nextPriorityLevels.length > 0
+			? createElement( Directives, {
+					directives,
+					priorityLevels: nextPriorityLevels,
+					element,
+					originalProps,
+					previousScope: scope,
+			  } )
+			: element;
 
 	const props = { ...originalProps, children };
 	const directiveArgs = {

packages/react-native-editor/babel.config.js

@@ -32,24 +32,7 @@ module.exports = function ( api ) {
 					[
 						'@babel/plugin-transform-react-jsx',
 						{
-							pragma: 'createElement',
-							pragmaFrag: 'Fragment',
-						},
-					],
-				],
-				exclude:
-					/node_modules\/(react-native|@react-native-community|@react-navigation|react-native-reanimated)/,
-			},
-			{
-				// Auto-add `import { createElement } from 'react';` when JSX is found.
-				plugins: [
-					[
-						'@wordpress/babel-plugin-import-jsx-pragma',
-						{
-							scopeVariable: 'createElement',
-							scopeVariableFrag: 'Fragment',
-							source: 'react',
-							isDefault: false,
+							runtime: 'automatic',
 						},
 					],
 				],

packages/scripts/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+
 ## 27.9.0 (2024-05-16)
 
 ### New Features

test/native/babel.config.js

@@ -22,23 +22,7 @@ module.exports = ( api ) => {
 					[
 						'@babel/plugin-transform-react-jsx',
 						{
-							pragma: 'createElement',
-							pragmaFrag: 'Fragment',
-						},
-					],
-				],
-				exclude: /node_modules\/react-native/,
-			},
-			{
-				// Auto-add `import { createElement } from '@wordpress/element';` when JSX is found.
-				plugins: [
-					[
-						'../../packages/babel-plugin-import-jsx-pragma',
-						{
-							scopeVariable: 'createElement',
-							scopeVariableFrag: 'Fragment',
-							source: '@wordpress/element',
-							isDefault: false,
+							runtime: 'automatic',
 						},
 					],
 				],

tools/webpack/development.js

@@ -46,4 +46,37 @@ module.exports = [
 			} ),
 		],
 	},
+	{
+		...sharedConfig,
+		mode:
+			process.env.NODE_ENV === 'production'
+				? 'production'
+				: 'development',
+		name: 'react-jsx-runtime',
+		entry: {
+			'react-jsx-runtime': {
+				import: 'react/jsx-runtime',
+				library: {
+					name: 'ReactJSXRuntime',
+					type: 'window',
+				},
+			},
+		},
+		plugins: [
+			new DependencyExtractionWebpackPlugin( {
+				injectPolyfill: false,
+				useDefaults: false,
+				requestToExternal: ( request ) => {
+					if ( request === 'react' ) {
+						return 'React';
+					}
+				},
+				requestToHandle: ( request ) => {
+					if ( request === 'react' ) {
+						return 'react';
+					}
+				},
+			} ),
+		],
+	},
 ];