feat: add option for using new jsx runtime for react 17

Author: swashata

packages/babel-preset-base/src/preset.ts

@@ -7,6 +7,7 @@ export interface PresetOptions {
 	noJsonStrings?: boolean;
 	noRuntime?: boolean;
 	hasReact?: boolean;
+	useReactJsxRuntime?: boolean;
 	presetEnv?: {};
 	presetReact?: {};
 	[x: string]: any;
@@ -41,6 +42,7 @@ export const preset = (opts: PresetOptions | null = {}) => {
 		presetEnv = {},
 		presetReact = {},
 		hasReact = true,
+		useReactJsxRuntime = false,
 		// Put everything else inside noPlugins, which we will use later
 		// to put or cancel out stage-3 plugins.
 		// noDynamicImport = false,
@@ -69,6 +71,7 @@ export const preset = (opts: PresetOptions | null = {}) => {
 				// Will use the native built-in instead of trying to polyfill
 				// behavior for any plugins that require one.
 				useBuiltIns: true,
+				runtime: useReactJsxRuntime ? 'automatic' : 'classic',
 				// But spread later, so that user can override it
 				...presetReact,
 			},

packages/scripts/src/config/CreateWebpackConfig.ts

@@ -171,6 +171,7 @@ export class CreateWebpackConfig {
 			jsBabelPresetOptions,
 			tsBabelOverride,
 			tsBabelPresetOptions,
+			useReactJsxRuntime,
 		} = this.projectConfig;
 		const { host, port } = this.serverConfig;
 		const helper: WebpackConfigHelper = new WebpackConfigHelper(
@@ -199,6 +200,7 @@ export class CreateWebpackConfig {
 				jsBabelPresetOptions,
 				tsBabelOverride,
 				tsBabelPresetOptions,
+				useReactJsxRuntime,
 			},
 			this.cwd,
 			this.isDev

packages/scripts/src/config/WebpackConfigHelper.ts

@@ -43,6 +43,7 @@ export interface WebpackConfigHelperConfig {
 	outputPath: ProjectConfig['outputPath'];
 	useBabelConfig: ProjectConfig['useBabelConfig'];
 	hasReact: ProjectConfig['hasReact'];
+	useReactJsxRuntime: ProjectConfig['useReactJsxRuntime'];
 	disableReactRefresh: ProjectConfig['disableReactRefresh'];
 	hasSass: ProjectConfig['hasSass'];
 	hasFlow: ProjectConfig['hasFlow'];
@@ -395,6 +396,10 @@ ${bannerConfig.copyrightText}${bannerConfig.credit ? creditNote : ''}`,
 		const { hasReact, hasSass, hasFlow, hasLess } = this.config;
 		const wpackioBabelOptions: PresetOptions = {
 			hasReact,
+			// use react jsx runtime only if enabled explicitly
+			// and not optimizing for gutenberg
+			useReactJsxRuntime:
+				this.config.useReactJsxRuntime && !this.file.optimizeForGutenberg,
 		};
 
 		// check if babel.config.js is present

packages/scripts/src/config/project.config.default.ts

@@ -79,6 +79,7 @@ export interface ProjectConfig {
 	hasReact: boolean;
 	disableReactRefresh?: boolean;
 	hasSass: boolean;
+	useReactJsxRuntime?: boolean;
 	hasLess?: boolean;
 	hasFlow: boolean;
 	// Use babel.config.js instead of built-in options
@@ -142,6 +143,10 @@ export const projectConfigDefault: ProjectConfig = {
 	useBabelConfig: false,
 	// Needs react?
 	hasReact: true,
+	// Whether or not to use the new jsx runtime introduced in React 17
+	// this is opt-in
+	// @see {https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html}
+	useReactJsxRuntime: false,
 	// Disable react refresh
 	disableReactRefresh: false,
 	// Needs sass?

packages/scripts/templates/wpackio.project.js.hbs

@@ -50,6 +50,10 @@ module.exports = {
 	// Project specific config
 	// Needs react(jsx)?
 	hasReact: {{hasReact}},
+	// Whether or not to use the new jsx runtime introduced in React 17
+	// this is opt-in
+	// @see {https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html}
+	useReactJsxRuntime: false,
 	// Disable react refresh
 	disableReactRefresh: false,
 	// Needs sass?