refactor: Switch to automatic runtime JSX transform (#1725)

rschristian · rschristian · commit 8b5b8303a5cc · 2022-12-12T23:52:09.000-06:00
* refactor: Switch over to automatic runtime transform for JSX

* test: Removing `h` imports from test suite

* docs: Adding changeset
diff --git a/.changeset/metal-roses-flash.md b/.changeset/metal-roses-flash.md
@@ -0,0 +1,7 @@
+---
+'preact-cli': major
+---
+
+Changes the JSX transform from 'classic' to the newer 'automatic'
+
+Users will no longer need to add `import { h } from 'preact'` in their components; it will be done automatically for them.
diff --git a/jsconfig.json b/jsconfig.json
@@ -7,9 +7,9 @@
 		"noEmit": true,
 		"resolveJsonModule": true,
 		"allowSyntheticDefaultImports": true,
-		"jsx": "react",
-		"jsxFactory": "h",
-		"jsxFragmentFactory": "Fragment"
+		"jsx": "preserve",
+		"jsxFactory": "preact.h",
+		"jsxFragmentFactory": "preact.Fragment"
 	},
 	"include": ["packages/**/*"]
 }
diff --git a/packages/cli/src/lib/babel-config.js b/packages/cli/src/lib/babel-config.js
@@ -31,16 +31,14 @@ module.exports = function (env) {
 			require.resolve('babel-plugin-macros'),
 			[
 				require.resolve('@babel/plugin-transform-react-jsx'),
-				{ pragma: 'h', pragmaFrag: 'Fragment' },
+				{ runtime: 'automatic', importSource: 'preact' },
 			],
 		].filter(Boolean),
 		overrides: [
 			// Transforms to apply only to first-party code:
 			{
 				exclude: '**/node_modules/**',
-				presets: [
-					[require.resolve('@babel/preset-typescript'), { jsxPragma: 'h' }],
-				],
+				presets: [require.resolve('@babel/preset-typescript')],
 				plugins: [
 					!isProd && refresh && require.resolve('react-refresh/babel'),
 				].filter(Boolean),
diff --git a/packages/cli/src/lib/webpack/webpack-base-config.js b/packages/cli/src/lib/webpack/webpack-base-config.js
@@ -292,10 +292,6 @@ module.exports = function createBaseConfig(env) {
 						}
 					)
 			),
-			new webpack.ProvidePlugin({
-				h: ['preact', 'h'],
-				Fragment: ['preact', 'Fragment'],
-			}),
 			// Fix for https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151
 			new RemoveEmptyScriptsPlugin(),
 			new MiniCssExtractPlugin({
diff --git a/packages/cli/tests/images/build.js b/packages/cli/tests/images/build.js
@@ -8,15 +8,15 @@ exports.default = {
 	'assets/favicon.ico': 15086,
 
 	'ssr-build/ssr-bundle.dba70.css': 1281,
-	'ssr-build/ssr-bundle.dba70.css.map': 2081,
-	'ssr-build/ssr-bundle.js': 10453,
-	'ssr-build/ssr-bundle.js.map': 46403,
+	'ssr-build/ssr-bundle.dba70.css.map': 2069,
+	'ssr-build/ssr-bundle.js': 10863,
+	'ssr-build/ssr-bundle.js.map': 49128,
 	'ssr-build/asset-manifest.json': 82,
 
-	'bundle.12615.js': 21560,
-	'bundle.12615.js.map': 85822,
-	'bundle.12615.legacy.js': 22549,
-	'bundle.12615.legacy.js.map': 106841,
+	'bundle.79d07.js': 21560,
+	'bundle.79d07.js.map': 85822,
+	'bundle.79d07.legacy.js': 22549,
+	'bundle.79d07.legacy.js.map': 106841,
 	'bundle.354c3.css': 945,
 	'bundle.354c3.css.map': 1758,
 
@@ -31,17 +31,17 @@ exports.default = {
 	'push-manifest.json': 450,
 	'asset-manifest.json': 943,
 
-	'route-home.chunk.f910e.js': 307,
-	'route-home.chunk.f910e.js.map': 1516,
-	'route-home.chunk.f910e.legacy.js': 347,
-	'route-home.chunk.f910e.legacy.js.map': 1770,
+	'route-home.chunk.dd4a3.js': 347,
+	'route-home.chunk.dd4a3.js.map': 1848,
+	'route-home.chunk.dd4a3.legacy.js': 388,
+	'route-home.chunk.dd4a3.legacy.js.map': 2136,
 	'route-home.chunk.6eaee.css': 112,
 	'route-home.chunk.6eaee.css.map': 224,
 
-	'route-profile.chunk.ef912.js': 3106,
-	'route-profile.chunk.ef912.js.map': 12220,
-	'route-profile.chunk.ef912.legacy.js': 3243,
-	'route-profile.chunk.ef912.legacy.js.map': 15558,
+	'route-profile.chunk.0d30e.js': 3198,
+	'route-profile.chunk.0d30e.js.map': 12743,
+	'route-profile.chunk.0d30e.legacy.js': 3335,
+	'route-profile.chunk.0d30e.legacy.js.map': 16137,
 	'route-profile.chunk.0af3e.css': 118,
 	'route-profile.chunk.0af3e.css.map': 231,
 };
diff --git a/packages/cli/tests/subjects/css-inline/index.js b/packages/cli/tests/subjects/css-inline/index.js
@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 import './style.css';
 
 export default () => <h1>Test CSS inlining</h1>;
diff --git a/packages/cli/tests/subjects/css-modules/index.js b/packages/cli/tests/subjects/css-modules/index.js
@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 import './style.css';
 import styles from './style.module.css';
 
diff --git a/packages/cli/tests/subjects/css-sass/index.js b/packages/cli/tests/subjects/css-sass/index.js
@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 import './style.sass';
 import './style.scss';
 import sassStyles from './style.module.sass';
diff --git a/packages/cli/tests/subjects/custom-babelrc/index.js b/packages/cli/tests/subjects/custom-babelrc/index.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { Component } from 'preact';
 
 const delay = t => new Promise(r => setTimeout(r, t));
 
diff --git a/packages/cli/tests/subjects/custom-template/index.js b/packages/cli/tests/subjects/custom-template/index.js
@@ -1,3 +1 @@
-import { h } from 'preact';
-
 export default () => <h2>This is an app with custom template</h2>;
diff --git a/packages/cli/tests/subjects/custom-webpack/index.js b/packages/cli/tests/subjects/custom-webpack/index.js
@@ -1,3 +1 @@
-import { h } from 'preact';
-
 export default () => <h2>This is an app with custom webpack config</h2>;
diff --git a/packages/cli/tests/subjects/location-patch/index.js b/packages/cli/tests/subjects/location-patch/index.js
@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 export default () => {
 	if (
 		location.protocol === undefined ||
diff --git a/packages/cli/tests/subjects/minimal/index.js b/packages/cli/tests/subjects/minimal/index.js
@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import './style.css';
 
 export default () => <h1>Minimal App</h1>;
diff --git a/packages/cli/tests/subjects/multiple-config-files/index.js b/packages/cli/tests/subjects/multiple-config-files/index.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { Component } from 'preact';
 import { Router } from 'preact-router';
 import Home from './routes/home';
 
diff --git a/packages/cli/tests/subjects/multiple-prerendering-with-provider/index.js b/packages/cli/tests/subjects/multiple-prerendering-with-provider/index.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { Component } from 'preact';
 import { Router } from 'preact-router';
 import { Provider } from '@preact/prerender-data-provider';
 import Home from './routes/home';
diff --git a/packages/cli/tests/subjects/multiple-prerendering-with-provider/routes/custom.js b/packages/cli/tests/subjects/multiple-prerendering-with-provider/routes/custom.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { Component } from 'preact';
 import './custom.css';
 import { PreRenderDataSource } from '@preact/prerender-data-provider';
 class Custom extends Component {
diff --git a/packages/cli/tests/subjects/multiple-prerendering/index.js b/packages/cli/tests/subjects/multiple-prerendering/index.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { Component } from 'preact';
 import { Router } from 'preact-router';
 import Home from './routes/home';
 import Route66 from './routes/route66';
diff --git a/packages/cli/tests/subjects/preload-chunks/index.js b/packages/cli/tests/subjects/preload-chunks/index.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { Component } from 'preact';
 import { Router } from 'preact-router';
 import Home from './routes/home';
 import Route66 from './routes/route66';
diff --git a/packages/cli/tests/subjects/preload-chunks/routes/base.js b/packages/cli/tests/subjects/preload-chunks/routes/base.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { Component } from 'preact';
 
 export default class Base extends Component {
 	state = {
diff --git a/packages/cli/tests/subjects/preload-chunks/routes/home.js b/packages/cli/tests/subjects/preload-chunks/routes/home.js
@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import Base from './base';
 import './home.css';
 
diff --git a/packages/cli/tests/subjects/preload-chunks/routes/route66.js b/packages/cli/tests/subjects/preload-chunks/routes/route66.js
@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import Base from './base';
 import './route66.css';
 
diff --git a/packages/cli/tests/subjects/preload-chunks/routes/route89.js b/packages/cli/tests/subjects/preload-chunks/routes/route89.js
@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import Base from './base';
 import './route89.css';
 
diff --git a/packages/cli/tests/subjects/prerendering-hydration/index.js b/packages/cli/tests/subjects/prerendering-hydration/index.js
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { Component } from 'preact';
 
 export default class App extends Component {
 	render() {
diff --git a/packages/cli/tests/subjects/proxy/index.js b/packages/cli/tests/subjects/proxy/index.js
@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 
 export default () => {
diff --git a/packages/cli/tests/subjects/public-path/index.js b/packages/cli/tests/subjects/public-path/index.js
@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import './style.css';
 
 export default () => <h1>Public path test</h1>;
diff --git a/packages/cli/tests/subjects/static-root/index.js b/packages/cli/tests/subjects/static-root/index.js
@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 export default () => {
 	return <h1>Static test</h1>;
 };

Original file line number	Diff line number	Diff line change
`@@ -292,10 +292,6 @@ module.exports = function createBaseConfig(env) {`
`292`	`292`	`}`
`293`	`293`	`)`
`294`	`294`	`),`
`295`		`- new webpack.ProvidePlugin({`
`296`		`- h: ['preact', 'h'],`
`297`		`- Fragment: ['preact', 'Fragment'],`
`298`		`- }),`
`299`	`295`	`// Fix for https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151`
`300`	`296`	`new RemoveEmptyScriptsPlugin(),`
`301`	`297`	`new MiniCssExtractPlugin({`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-import { h } from 'preact';`
`2`		`-`
`3`	`1`	`import './style.css';`
`4`	`2`	`import styles from './style.module.css';`
`5`	`3`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-import { h } from 'preact';`
`2`		`-`
`3`	`1`	`import './style.sass';`
`4`	`2`	`import './style.scss';`
`5`	`3`	`import sassStyles from './style.module.sass';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { h, Component } from 'preact';`
	`1`	`+import { Component } from 'preact';`
`2`	`2`
`3`	`3`	`const delay = t => new Promise(r => setTimeout(r, t));`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1 @@`
`1`		`-import { h } from 'preact';`
`2`		`-`
`3`	`1`	`export default () => <h2>This is an app with custom template</h2>;`