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

* refactor: Switch over to automatic runtime transform for JSX

* test: Removing `h` imports from test suite

* docs: Adding changeset

Author: rschristian

.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.

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/**/*"]
 }

packages/cli/lib/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),

packages/cli/lib/lib/webpack/webpack-base-config.js

@@ -287,10 +287,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({

packages/cli/tests/images/build.js

@@ -13,10 +13,10 @@ exports.default = {
 	'ssr-build/ssr-bundle.js.map': 30625,
 	'ssr-build/asset-manifest.json': 82,
 
-	'bundle.86ff2.js': 21323,
-	'bundle.86ff2.js.map': 85534,
-	'bundle.86ff2.legacy.js': 22514,
-	'bundle.86ff2.legacy.js.map': 106422,
+	'bundle.3c823.js': 21323,
+	'bundle.3c823.js.map': 85534,
+	'bundle.3c823.legacy.js': 22514,
+	'bundle.3c823.legacy.js.map': 106422,
 	'bundle.a2557.css': 945,
 	'bundle.a2557.css.map': 1758,
 
@@ -31,17 +31,17 @@ exports.default = {
 	'push-manifest.json': 450,
 	'asset-manifest.json': 943,
 
-	'route-home.chunk.b77d6.js': 306,
-	'route-home.chunk.b77d6.js.map': 1490,
-	'route-home.chunk.b77d6.legacy.js': 363,
-	'route-home.chunk.b77d6.legacy.js.map': 1752,
+	'route-home.chunk.a00bd.js': 339,
+	'route-home.chunk.a00bd.js.map': 1811,
+	'route-home.chunk.a00bd.legacy.js': 394,
+	'route-home.chunk.a00bd.legacy.js.map': 2102,
 	'route-home.chunk.6eaee.css': 112,
 	'route-home.chunk.6eaee.css.map': 224,
 
-	'route-profile.chunk.d8eb4.js': 2469,
-	'route-profile.chunk.d8eb4.js.map': 9736,
-	'route-profile.chunk.d8eb4.legacy.js': 2624,
-	'route-profile.chunk.d8eb4.legacy.js.map': 12373,
+	'route-profile.chunk.05dd0.js': 2545,
+	'route-profile.chunk.05dd0.js.map': 10268,
+	'route-profile.chunk.05dd0.legacy.js': 2698,
+	'route-profile.chunk.05dd0.legacy.js.map': 12894,
 	'route-profile.chunk.0af3e.css': 118,
 	'route-profile.chunk.0af3e.css.map': 231,
 };

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>;

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';
 

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';

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));
 

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>;