diff --git a/.changeset/metal-roses-flash.md b/.changeset/metal-roses-flash.md
new file mode 100644
index 000000000..109c218b0
--- /dev/null
+++ 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
index 3d7090679..2e7c7fcdf 100644
--- 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/lib/lib/babel-config.js b/packages/cli/lib/lib/babel-config.js
index 288de4f2c..5a4859787 100644
--- a/packages/cli/lib/lib/babel-config.js
+++ b/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),
diff --git a/packages/cli/lib/lib/webpack/webpack-base-config.js b/packages/cli/lib/lib/webpack/webpack-base-config.js
index 254434613..18a134c79 100644
--- a/packages/cli/lib/lib/webpack/webpack-base-config.js
+++ b/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({
diff --git a/packages/cli/tests/images/build.js b/packages/cli/tests/images/build.js
index 852d4f18e..403a144d9 100644
--- a/packages/cli/tests/images/build.js
+++ b/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,
};
diff --git a/packages/cli/tests/subjects/css-inline/index.js b/packages/cli/tests/subjects/css-inline/index.js
index 581bd47fe..d4e555160 100644
--- 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 () => Test CSS inlining
;
diff --git a/packages/cli/tests/subjects/css-modules/index.js b/packages/cli/tests/subjects/css-modules/index.js
index 69d56069a..d08b36ea9 100644
--- 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
index 03c0944cc..cb5f079c5 100644
--- 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
index f176a7f41..5d8d926d5 100644
--- 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
index dcf3bb109..49306f0d9 100644
--- 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 () => This is an app with custom template
;
diff --git a/packages/cli/tests/subjects/custom-webpack/index.js b/packages/cli/tests/subjects/custom-webpack/index.js
index dcf3bb109..49306f0d9 100644
--- 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 () => This is an app with custom template
;
diff --git a/packages/cli/tests/subjects/location-patch/index.js b/packages/cli/tests/subjects/location-patch/index.js
index 1e68f0a4d..32f92a9b2 100644
--- 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
index 31aba19f0..bc2725b1d 100644
--- 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 () => Minimal App
;
diff --git a/packages/cli/tests/subjects/multiple-config-files/index.js b/packages/cli/tests/subjects/multiple-config-files/index.js
index 60c988215..c8ba8c15a 100644
--- 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
index 1ef9c567d..36022ac2f 100644
--- 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
index b1e284336..64398d202 100644
--- 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
index 0449f4c10..9b7d5df3a 100644
--- 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
index b9e389a05..3eac12bde 100644
--- 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
index 753323af0..fcf09eb2b 100644
--- 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
index ec5fc6ba4..47d1d9638 100644
--- 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
index fc1391484..0e5960cf8 100644
--- 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
index fe9e86aec..e81a51a0b 100644
--- 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
index 27d1628a4..37d4f54d8 100644
--- 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
index e154e7db6..678de5181 100644
--- 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
index 7152cbbe1..6c99cc9d4 100644
--- 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 () => Public path test
;
diff --git a/packages/cli/tests/subjects/static-root/index.js b/packages/cli/tests/subjects/static-root/index.js
index cbed9ced6..5107516e3 100644
--- 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 Static test
;
};