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

.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/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),

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

@@ -284,10 +284,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

@@ -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.dba70.css.map': 2069,
  'ssr-build/ssr-bundle.js': 26049,
- 'ssr-build/ssr-bundle.js.map': 59971,
+ 'ssr-build/ssr-bundle.js.map': 63276,
  '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,
 };

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

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

packages/cli/tests/subjects/location-patch/index.js

@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 export default () => {
  if (
  location.protocol === undefined ||

packages/cli/tests/subjects/minimal/index.js

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import './style.css';
 
 export default () => <h1>Minimal App</h1>;

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

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

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 {

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

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

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 = {

packages/cli/tests/subjects/preload-chunks/routes/home.js

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import Base from './base';
 import './home.css';
 

packages/cli/tests/subjects/preload-chunks/routes/route66.js

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import Base from './base';
 import './route66.css';
 

packages/cli/tests/subjects/preload-chunks/routes/route89.js

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import Base from './base';
 import './route89.css';
 

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

packages/cli/tests/subjects/proxy/index.js

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 
 export default () => {

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

packages/cli/tests/subjects/static-root/index.js

@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 export default () => {
  return <h1>Static test</h1>;
 };