From c77e8b7fd98ab78c07573327c7a726d5ec1ca758 Mon Sep 17 00:00:00 2001 From: Micro <1434246346@qq.com> Date: Tue, 19 Mar 2024 21:18:21 +0800 Subject: [PATCH 1/2] feat: support react/jsx-runtime --- examples/with-react-16/.gitignore | 7 +++ examples/with-react-16/.umirc.ts | 4 ++ examples/with-react-16/package.json | 16 +++++ examples/with-react-16/pages/index.tsx | 6 ++ packages/preset-umi/src/commands/build.ts | 6 +- packages/preset-umi/src/commands/dev/dev.ts | 6 +- .../src/commands/dev/getBabelOpts.ts | 6 +- pnpm-lock.yaml | 62 ++++++++++++------- 8 files changed, 82 insertions(+), 31 deletions(-) create mode 100644 examples/with-react-16/.gitignore create mode 100644 examples/with-react-16/.umirc.ts create mode 100644 examples/with-react-16/package.json create mode 100644 examples/with-react-16/pages/index.tsx diff --git a/examples/with-react-16/.gitignore b/examples/with-react-16/.gitignore new file mode 100644 index 000000000000..9e8a6f26e2ee --- /dev/null +++ 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 new file mode 100644 index 000000000000..a54025ff4b9b --- /dev/null +++ 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 new file mode 100644 index 000000000000..1e17516e232f --- /dev/null +++ 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 new file mode 100644 index 000000000000..9efbc6d1c6e2 --- /dev/null +++ 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
React: {count}
; +} diff --git a/packages/preset-umi/src/commands/build.ts b/packages/preset-umi/src/commands/build.ts index 8652197cab67..eff04bdc7027 100644 --- 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 isGTEReact16 = 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: isGTEReact16 ? '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 index c52ff42fe12a..949c17dc7d0d 100644 --- 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 isGTEReact16 = 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: isGTEReact16 ? '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 index cd382a0e9352..7b96ac678523 100644 --- 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 isGTEReact16 = 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: isGTEReact16 ? 'automatic' : 'classic', // importSource cannot be set when runtime is classic - ...(isGTEReact17 ? {} : { importSource: undefined }), + ...(isGTEReact16 ? {} : { importSource: undefined }), }, presetTypeScript: {}, pluginTransformRuntime: {}, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c40b3bfe9894..69ca0c69f4f5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1393,6 +1393,18 @@ importers: specifier: ^7.0.3 version: 7.0.3 + examples/with-react-16: + dependencies: + react: + specifier: ^16.14.0 + version: 16.14.0 + react-dom: + specifier: ^16.14.0 + version: 16.14.0(react@16.14.0) + umi: + specifier: workspace:* + version: link:../../packages/umi + examples/with-react-17: dependencies: react: @@ -5255,7 +5267,7 @@ packages: slash: 2.0.0 optionalDependencies: '@nicolo-ribaudo/chokidar-2': 2.1.8-no-fsevents.3 - chokidar: 3.6.0 + chokidar: 3.5.3 dev: false /@babel/code-frame@7.12.11: @@ -5481,7 +5493,6 @@ packages: source-map: 0.5.7 transitivePeerDependencies: - supports-color - dev: true /@babel/eslint-parser@7.17.0(@babel/core@7.17.9)(eslint@8.35.0): resolution: {integrity: sha512-PUEJ7ZBXbRkbq3qqM/jZ2nIuakUBqCYc7Qf52Lj7dlZ6zERnqisdHioL0l4wwQZnmskMeasqUNzLBFKs3nylXA==} @@ -7645,6 +7656,7 @@ packages: dependencies: '@babel/core': 7.20.12 '@babel/helper-plugin-utils': 7.22.5 + dev: true /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.22.5): resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==} @@ -7672,7 +7684,6 @@ packages: dependencies: '@babel/core': 7.4.5 '@babel/helper-plugin-utils': 7.22.5 - dev: true /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.20.12): resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==} @@ -21642,7 +21653,7 @@ packages: dependencies: '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-module-imports': 7.22.15 - '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.20.12) + '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.4.5) lodash: 4.17.21 picomatch: 2.3.1 styled-components: 6.1.1(react-dom@18.1.0)(react@18.1.0) @@ -22747,23 +22758,6 @@ packages: optionalDependencies: fsevents: 2.3.3 - /chokidar@3.6.0: - resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} - engines: {node: '>= 8.10.0'} - requiresBuild: true - dependencies: - anymatch: 3.1.3 - braces: 3.0.2 - glob-parent: 5.1.2 - is-binary-path: 2.1.0 - is-glob: 4.0.3 - normalize-path: 3.0.0 - readdirp: 3.6.0 - optionalDependencies: - fsevents: 2.3.3 - dev: false - optional: true - /chownr@1.1.4: resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==} dev: true @@ -31845,7 +31839,7 @@ packages: dependencies: universalify: 2.0.0 optionalDependencies: - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 /jsonparse@1.3.1: resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==} @@ -43161,6 +43155,21 @@ packages: es6-symbol: 3.1.3 dev: false + /react-dom@16.14.0(react@16.14.0): + resolution: {integrity: sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==} + peerDependencies: + react: ^16.14.0 + peerDependenciesMeta: + react: + optional: true + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + prop-types: 15.8.1 + react: 16.14.0 + scheduler: 0.19.1 + dev: false + /react-dom@17.0.2(react@17.0.2): resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==} peerDependencies: @@ -43787,6 +43796,15 @@ packages: tslib: 2.6.2 dev: false + /react@16.14.0: + resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==} + engines: {node: '>=0.10.0'} + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + prop-types: 15.8.1 + dev: false + /react@17.0.2: resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==} engines: {node: '>=0.10.0'} From d07c875fcb726fcd289fccc48705db42b37911cd Mon Sep 17 00:00:00 2001 From: Wu-kung <1434246346@qq.com> Date: Thu, 21 Mar 2024 23:16:44 +0800 Subject: [PATCH 2/2] chore: isGTEReact16 > shouldUseAutomaticRuntime --- packages/preset-umi/src/commands/build.ts | 4 ++-- packages/preset-umi/src/commands/dev/dev.ts | 4 ++-- packages/preset-umi/src/commands/dev/getBabelOpts.ts | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/preset-umi/src/commands/build.ts b/packages/preset-umi/src/commands/build.ts index eff04bdc7027..1a8a6c4db9ad 100644 --- 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 isGTEReact16 = + const shouldUseAutomaticRuntime = api.appData.react?.version && semver.gte(api.appData.react.version, '16.14.0'); const opts = { react: { - runtime: isGTEReact16 ? '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 index 949c17dc7d0d..744e6c5965be 100644 --- 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 isGTEReact16 = + const shouldUseAutomaticRuntime = api.appData.react?.version && semver.gte(api.appData.react.version, '16.14.0'); const opts: any = { react: { - runtime: isGTEReact16 ? '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 index 7b96ac678523..172bf69895bd 100644 --- 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 isGTEReact16 = semver.gte(opts.api.appData.react.version, '16.14.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: isGTEReact16 ? 'automatic' : 'classic', + runtime: shouldUseAutomaticRuntime ? 'automatic' : 'classic', // importSource cannot be set when runtime is classic - ...(isGTEReact16 ? {} : { importSource: undefined }), + ...(shouldUseAutomaticRuntime ? {} : { importSource: undefined }), }, presetTypeScript: {}, pluginTransformRuntime: {},