feat: support react/jsx-runtime (#12219)

* feat: support react/jsx-runtime * chore: isGTEReact16 > shouldUseAutomaticRuntime
umijs · Mar 22, 2024 · 2c43662 · 2c43662
1 parent b4098c2
commit 2c43662
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 31 deletions.
diff --git a/examples/with-react-16/.gitignore b/examples/with-react-16/.gitignore
@@ -0,0 +1,7 @@
+/.env.local
+/.umirc.local.ts
+/.umirc.local.js
+/config/config.local.ts
+/config/config.local.js
+/src/.umi
+/.umi
diff --git a/examples/with-react-16/.umirc.ts b/examples/with-react-16/.umirc.ts
@@ -0,0 +1,4 @@
+export default {
+  routes: [{ path: '/', component: 'index' }],
+  npmClient: 'pnpm',
+};
diff --git a/examples/with-react-16/package.json b/examples/with-react-16/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@example/with-react-16",
+  "private": true,
+  "scripts": {
+    "build": "umi build",
+    "dev": "umi dev",
+    "preview": "umi preview",
+    "setup": "umi setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "umi": "workspace:*"
+  }
+}
diff --git a/examples/with-react-16/pages/index.tsx b/examples/with-react-16/pages/index.tsx
@@ -0,0 +1,6 @@
+import { useState } from 'react';
+
+export default function HomePage() {
+  const [count] = useState(0);
+  return <div>React: {count}</div>;
+}
diff --git a/packages/preset-umi/src/commands/build.ts b/packages/preset-umi/src/commands/build.ts
@@ -97,12 +97,12 @@ umi build --clean
           umi: join(api.paths.absTmpPath, 'umi.ts'),
         },
       });
-      const isGTEReact17 =
+      const shouldUseAutomaticRuntime =
         api.appData.react?.version &&
-        semver.gte(api.appData.react.version, '17.0.0');
+        semver.gte(api.appData.react.version, '16.14.0');
       const opts = {
         react: {
-          runtime: isGTEReact17 ? 'automatic' : 'classic',
+          runtime: shouldUseAutomaticRuntime ? 'automatic' : 'classic',
         },
         config: api.config,
         cwd: api.cwd,

diff --git a/packages/preset-umi/src/commands/dev/dev.ts b/packages/preset-umi/src/commands/dev/dev.ts
@@ -348,12 +348,12 @@ PORT=8888 umi dev
         },
       });
 
-      const isGTEReact17 =
+      const shouldUseAutomaticRuntime =
         api.appData.react?.version &&
-        semver.gte(api.appData.react.version, '17.0.0');
+        semver.gte(api.appData.react.version, '16.14.0');
       const opts: any = {
         react: {
-          runtime: isGTEReact17 ? 'automatic' : 'classic',
+          runtime: shouldUseAutomaticRuntime ? 'automatic' : 'classic',
         },
         config: api.config,
         pkg: api.pkg,

diff --git a/packages/preset-umi/src/commands/dev/getBabelOpts.ts b/packages/preset-umi/src/commands/dev/getBabelOpts.ts
@@ -3,15 +3,15 @@ import { IApi } from '../../types';
 
 export async function getBabelOpts(opts: { api: IApi }) {
   // TODO: 支持用户自定义
-  const isGTEReact17 = semver.gte(opts.api.appData.react.version, '17.0.0');
+  const shouldUseAutomaticRuntime = semver.gte(opts.api.appData.react.version, '16.14.0');
   const babelPresetOpts = await opts.api.applyPlugins({
     key: 'modifyBabelPresetOpts',
     initialValue: {
       presetEnv: {},
       presetReact: {
-        runtime: isGTEReact17 ? 'automatic' : 'classic',
+        runtime: shouldUseAutomaticRuntime ? 'automatic' : 'classic',
         // importSource cannot be set when runtime is classic
-        ...(isGTEReact17 ? {} : { importSource: undefined }),
+        ...(shouldUseAutomaticRuntime ? {} : { importSource: undefined }),
       },
       presetTypeScript: {},
       pluginTransformRuntime: {},

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml