Enable automatic jsx runtime transform

Enable automatic jsx runtime transform via @babel/preset-react. See: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html Also fix tests that had NODE_ENV override that's not compatible w/ the dev server.
fusionjs · Apr 4, 2022 · 50f3263 · 50f3263
1 parent 172262f
commit 50f3263
Show file tree

Hide file tree

Showing 19 changed files with 33 additions and 50 deletions.
diff --git a/fusion-cli-tests/test/e2e/duplicate-translations/test.js b/fusion-cli-tests/test/e2e/duplicate-translations/test.js
@@ -10,12 +10,9 @@ const {cmd, start} = require('../utils.js');
 const dir = path.resolve(__dirname, './fixture');
 
 test('promise instrumentation deduplicates translations', async () => {
-  var env = Object.create(process.env);
-  env.NODE_ENV = 'production';
+  await cmd(`build --dir=${dir}`);
 
-  await cmd(`build --dir=${dir}`, {env});
-
-  const {proc, port} = await start(`--dir=${dir}`, {env, cwd: dir});
+  const {proc, port} = await start(`--dir=${dir}`, {cwd: dir});
   const browser = await puppeteer.launch({
     args: ['--no-sandbox', '--disable-setuid-sandbox'],
   });

diff --git a/fusion-cli-tests/test/e2e/split/test.js b/fusion-cli-tests/test/e2e/split/test.js
@@ -196,12 +196,7 @@ describe('split chunk ids kept in sync on both client and server', () => {
   test('`fusion build` CHUNK_IDS stay in sync on both server and client after change', async () => {
     async function buildAndStartServer() {
       await cmd(`build --dir=${dir} --modernBuildOnly`);
-      const {proc, port} = await start(`--dir=${dir}`, {
-        env: {
-          ...process.env,
-          NODE_ENV: 'production',
-        },
-      });
+      const {proc, port} = await start(`--dir=${dir}`);
 
       return {
         stop() {

diff --git a/fusion-cli/build/get-babel-config.js b/fusion-cli/build/get-babel-config.js
@@ -70,9 +70,10 @@ module.exports = function getBabelConfig(opts /*: BabelConfigOpts */) {
     config.presets.push([
       require.resolve('@babel/preset-react'),
       {
+        development: dev,
         pragma: jsx.pragma,
         pragmaFrag: jsx.pragmaFrag,
-        development: dev,
+        runtime: jsx.pragma || jsx.pragmaFrag ? 'classic' : 'automatic',
       },
     ]);
     if (fusionTransforms) {

diff --git a/fusion-plugin-apollo/.babelrc b/fusion-plugin-apollo/.babelrc
@@ -1,11 +1,11 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": ["@babel/plugin-transform-flow-strip-types"],
   "env": {
     "test": {
       "plugins": ["@babel/plugin-transform-flow-strip-types"],
       "presets": [
-        "@babel/preset-react",
+        ["@babel/preset-react", { "runtime": "automatic" }],
         ["@babel/preset-env", { "targets": { "node": "current" } }]
       ]
     }

diff --git a/fusion-plugin-connected-react-router/.babelrc b/fusion-plugin-connected-react-router/.babelrc
@@ -1,11 +1,11 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": ["@babel/plugin-transform-flow-strip-types"],
   "env": {
     "test": {
       "plugins": ["@babel/plugin-transform-flow-strip-types"],
       "presets": [
-        "@babel/preset-react",
+        ["@babel/preset-react", { "runtime": "automatic" }],
         ["@babel/preset-env", { "targets": { "node": "current" } }]
       ]
     }

diff --git a/fusion-plugin-connected-react-router/test/utils.js b/fusion-plugin-connected-react-router/test/utils.js
@@ -44,19 +44,17 @@ module.exports.Runtime = class Runtime {
   }
   async start() {
     const cwd = this.fixturePath;
-    const env = Object.assign({}, process.env, {NODE_ENV: 'production'});
 
     const [port] = await Promise.all([
       getPort(),
-      execFile('fusion', ['build'], {cwd, env}),
+      execFile('fusion', ['build'], {cwd}),
     ]);
     this.port = port;
     this.url = `http://localhost:${this.port}`;
 
     this.server = spawn('fusion', ['start', `--port=${port}`], {
       stdio: 'inherit',
       cwd,
-      env,
     });
 
     this.browser = await puppeteer.launch({

diff --git a/fusion-plugin-csrf-protection/.babelrc b/fusion-plugin-csrf-protection/.babelrc
@@ -1,11 +1,11 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": ["@babel/plugin-transform-flow-strip-types"],
   "env": {
     "test": {
       "plugins": ["@babel/plugin-transform-flow-strip-types"],
       "presets": [
-        "@babel/preset-react",
+        ["@babel/preset-react", { "runtime": "automatic" }],
         ["@babel/preset-env", { "targets": { "node": "current" } }]
       ]
     }

diff --git a/fusion-plugin-font-loader-react/.babelrc b/fusion-plugin-font-loader-react/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": [
     "@babel/plugin-transform-flow-strip-types",
     "@babel/plugin-proposal-class-properties"
@@ -11,7 +11,7 @@
         "@babel/plugin-proposal-class-properties"
       ],
       "presets": [
-        "@babel/preset-react",
+        ["@babel/preset-react", { "runtime": "automatic" }],
         ["@babel/preset-env", { "targets": { "node": "current" } }]
       ]
     }

diff --git a/fusion-plugin-i18n-react/.babelrc b/fusion-plugin-i18n-react/.babelrc
@@ -1,11 +1,11 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": ["@babel/plugin-transform-flow-strip-types"],
   "env": {
     "test": {
       "plugins": ["@babel/plugin-transform-flow-strip-types"],
       "presets": [
-        "@babel/preset-react",
+        ["@babel/preset-react", { "runtime": "automatic" }],
         ["@babel/preset-env", { "targets": { "node": "current" } }]
       ]
     }

diff --git a/fusion-plugin-introspect/.babelrc b/fusion-plugin-introspect/.babelrc
@@ -1,11 +1,11 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": ["@babel/plugin-transform-flow-strip-types"],
   "env": {
     "test": {
       "plugins": ["@babel/plugin-transform-flow-strip-types"],
       "presets": [
-        "@babel/preset-react",
+        ["@babel/preset-react", { "runtime": "automatic" }],
         ["@babel/preset-env", { "targets": { "node": "current" } }]
       ]
     }

diff --git a/fusion-plugin-react-helmet-async/.babelrc b/fusion-plugin-react-helmet-async/.babelrc
@@ -1,11 +1,11 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": ["@babel/plugin-transform-flow-strip-types"],
   "env": {
     "test": {
       "plugins": ["@babel/plugin-transform-flow-strip-types"],
       "presets": [
-        "@babel/preset-react",
+        ["@babel/preset-react", { "runtime": "automatic" }],
         ["@babel/preset-env", { "targets": { "node": "current" } }]
       ]
     }

diff --git a/fusion-plugin-react-redux/.babelrc b/fusion-plugin-react-redux/.babelrc
@@ -1,11 +1,11 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": ["@babel/plugin-transform-flow-strip-types"],
   "env": {
     "test": {
       "plugins": ["@babel/plugin-transform-flow-strip-types"],
       "presets": [
-        "@babel/preset-react",
+        ["@babel/preset-react", { "runtime": "automatic" }],
         ["@babel/preset-env", { "targets": { "node": "current" } }]
       ]
     }

diff --git a/fusion-plugin-react-router/.babelrc b/fusion-plugin-react-router/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": [
     "@babel/plugin-transform-flow-strip-types",
     "@babel/plugin-proposal-class-properties"
@@ -11,7 +11,7 @@
         "@babel/plugin-proposal-class-properties"
       ],
       "presets": [
-        "@babel/preset-react",
+        ["@babel/preset-react", { "runtime": "automatic" }],
         ["@babel/preset-env", { "targets": { "node": "current" } }]
       ]
     }

diff --git a/fusion-plugin-rpc-redux-react/test/utils.js b/fusion-plugin-rpc-redux-react/test/utils.js
@@ -45,19 +45,17 @@ export const Runtime = class Runtime {
   }
   async start() {
     const cwd = this.fixturePath;
-    const env = Object.assign({}, process.env, {NODE_ENV: 'production'});
 
     const [port] = await Promise.all([
       getPort(),
-      execFile('fusion', ['build'], {cwd, env}),
+      execFile('fusion', ['build'], {cwd}),
     ]);
     this.port = port;
     this.url = `http://localhost:${this.port}`;
 
     this.server = spawn('fusion', ['start', `--port=${port}`], {
       stdio: 'inherit',
       cwd,
-      env,
     });
 
     this.browser = await puppeteer.launch({

diff --git a/fusion-plugin-styletron-react/.babelrc b/fusion-plugin-styletron-react/.babelrc
@@ -1,11 +1,11 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": ["@babel/plugin-transform-flow-strip-types"],
   "env": {
     "test": {
       "plugins": ["@babel/plugin-transform-flow-strip-types"],
       "presets": [
-        "@babel/preset-react",
+        ["@babel/preset-react", { "runtime": "automatic" }],
         ["@babel/preset-env", { "targets": { "node": "current" } }]
       ]
     }

diff --git a/fusion-plugin-styletron-react/test/basic/e2e.test.js b/fusion-plugin-styletron-react/test/basic/e2e.test.js
@@ -18,17 +18,14 @@ const spawn = child_process.spawn;
 const fixture = __dirname;
 
 test('basic rendering and hydration works', async () => {
-  const env = Object.assign({}, process.env, {NODE_ENV: 'production'});
-
   const [port] = await Promise.all([
     getPort(),
-    execFile('fusion', ['build'], {cwd: fixture, env}),
+    execFile('fusion', ['build'], {cwd: fixture}),
   ]);
 
   const server = spawn('fusion', ['start', `--port=${port}`], {
     stdio: 'inherit',
     cwd: fixture,
-    env,
   });
 
   const browser = await puppeteer.launch({

diff --git a/fusion-plugin-styletron-react/test/prefix-token/e2e.test.js b/fusion-plugin-styletron-react/test/prefix-token/e2e.test.js
@@ -17,17 +17,14 @@ const spawn = child_process.spawn;
 const fixture = __dirname;
 
 test('token prefix', async () => {
-  const env = Object.assign({}, process.env, {NODE_ENV: 'production'});
-
   const [port] = await Promise.all([
     getPort(),
-    execFile('fusion', ['build'], {cwd: fixture, env}),
+    execFile('fusion', ['build'], {cwd: fixture}),
   ]);
 
   const server = spawn('fusion', ['start', `--port=${port}`], {
     stdio: 'inherit',
     cwd: fixture,
-    env,
   });
 
   const browser = await puppeteer.launch({

diff --git a/fusion-plugin-web-app-manifest/.babelrc b/fusion-plugin-web-app-manifest/.babelrc
@@ -1,11 +1,11 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": ["@babel/plugin-transform-flow-strip-types"],
   "env": {
     "test": {
       "plugins": ["@babel/plugin-transform-flow-strip-types"],
       "presets": [
-        "@babel/preset-react",
+        ["@babel/preset-react", { "runtime": "automatic" }],
         ["@babel/preset-env", { "targets": { "node": "current" } }]
       ]
     }

diff --git a/fusion-react/.babelrc b/fusion-react/.babelrc
@@ -1,5 +1,5 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": [
     "@babel/plugin-transform-flow-strip-types",
     "@babel/plugin-proposal-class-properties"
@@ -11,7 +11,7 @@
         "@babel/plugin-proposal-class-properties"
       ],
       "presets": [
-        "@babel/preset-react",
+        ["@babel/preset-react", { "runtime": "automatic" }],
         ["@babel/preset-env", { "targets": { "node": "current" } }]
       ]
     }