From ce1043b978a56a0ac8dae94162e58b5aa5e61cf3 Mon Sep 17 00:00:00 2001 From: PeachScript Date: Tue, 20 Dec 2022 15:51:58 +0800 Subject: [PATCH 1/5] refactor: react jsx runtime respect tsconfig.json --- src/builder/bundle/index.ts | 5 ++- .../bundless/loaders/javascript/babel.ts | 6 ++- .../bundless/loaders/javascript/swc.ts | 5 ++- src/builder/utils.ts | 42 +++++++++++-------- .../fixtures/build/automatic-jsx/package.json | 2 +- .../build/automatic-jsx/tsconfig.json | 5 +++ 6 files changed, 42 insertions(+), 23 deletions(-) create mode 100644 tests/fixtures/build/automatic-jsx/tsconfig.json diff --git a/src/builder/bundle/index.ts b/src/builder/bundle/index.ts index cc611f41..e607373d 100644 --- a/src/builder/bundle/index.ts +++ b/src/builder/bundle/index.ts @@ -69,7 +69,10 @@ export default async (opts: { presetEnv: { targets: getBundleTargets(config), }, - presetReact: getBabelPresetReactOpts(opts.configProvider.pkg), + presetReact: getBabelPresetReactOpts( + opts.configProvider.pkg, + opts.cwd, + ), presetTypeScript: {}, pluginTransformRuntime: {}, pluginLockCoreJS: {}, diff --git a/src/builder/bundless/loaders/javascript/babel.ts b/src/builder/bundless/loaders/javascript/babel.ts index 88c1532b..abba4fa1 100644 --- a/src/builder/bundless/loaders/javascript/babel.ts +++ b/src/builder/bundless/loaders/javascript/babel.ts @@ -39,7 +39,10 @@ const babelTransformer: IJSTransformer = function (content) { targets: getBundlessTargets(this.config), modules: this.config.format === IFatherBundlessTypes.ESM ? false : 'auto', }, - presetReact: getBabelPresetReactOpts(this.pkg), + presetReact: getBabelPresetReactOpts( + this.pkg, + path.dirname(this.paths.fileAbsPath), + ), presetTypeScript: {}, }; @@ -68,7 +71,6 @@ const babelTransformer: IJSTransformer = function (content) { version: this.pkg.dependencies?.['@babel/runtime'], }; } - // TODO: recommend install @babel/runtime in doctor const { code, map } = transform(content, { filename: this.paths.fileAbsPath, cwd: this.paths.cwd, diff --git a/src/builder/bundless/loaders/javascript/swc.ts b/src/builder/bundless/loaders/javascript/swc.ts index 79d31622..c2acb6a1 100644 --- a/src/builder/bundless/loaders/javascript/swc.ts +++ b/src/builder/bundless/loaders/javascript/swc.ts @@ -143,7 +143,10 @@ const swcTransformer: IJSTransformer = async function (content) { ...(!isTSFile && isJSXFile ? { jsx: true } : {}), }, transform: { - react: getSWCTransformReactOpts(this.pkg), + react: getSWCTransformReactOpts( + this.pkg, + path.dirname(this.paths.fileAbsPath), + ), }, }, module: { diff --git a/src/builder/utils.ts b/src/builder/utils.ts index 797292f0..44723a5b 100644 --- a/src/builder/utils.ts +++ b/src/builder/utils.ts @@ -6,6 +6,7 @@ import { IFatherJSTransformerTypes, IFatherPlatformTypes, } from '../types'; +import { getTsconfig } from './bundless/dts'; import type { IBundlessConfig } from './config'; export function addSourceMappingUrl(code: string, loc: string) { @@ -16,16 +17,7 @@ export function addSourceMappingUrl(code: string, loc: string) { ); } -export function getIsLTRReact17(pkg: IApi['pkg']) { - const reactVer = Object.assign( - {}, - pkg.dependencies, - pkg.peerDependencies, - ).react; - return semver.subset(reactVer, '>=17.0.0-0'); -} - -export function getBaseTransformReactOpts(pkg: IApi['pkg']) { +export function getBaseTransformReactOpts(pkg: IApi['pkg'], cwd: string) { const reactVer = Object.assign( {}, pkg.dependencies, @@ -34,30 +26,44 @@ export function getBaseTransformReactOpts(pkg: IApi['pkg']) { let opts: Record = {}; if (reactVer) { - const isLTRReact17 = getIsLTRReact17(pkg); + let isNewJSX: boolean; + const tsconfig = getTsconfig(cwd); + + // istanbul-ignore-else + if (tsconfig) { + // respect tsconfig first, `4` means `react-jsx` + isNewJSX = tsconfig.options?.jsx === 4; + } else { + // fallback to match react versions which support new JSX transform + // ref: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#how-to-upgrade-to-the-new-jsx-transform + isNewJSX = semver.subset( + reactVer, + '>=17.0.0-0||^16.14.0||^15.7.0||^0.14.10', + ); + } opts = { // force use production mode, to make sure dist of dev/build are consistent // ref: https://github.com/umijs/umi/blob/6f63435d42f8ef7110f73dcf33809e6cda750332/packages/babel-preset-umi/src/index.ts#L45 development: false, - // use legacy jsx runtime for react@<17 - runtime: isLTRReact17 ? 'automatic' : 'classic', - ...(isLTRReact17 ? {} : { importSource: undefined }), + // set jsx runtime automatically + runtime: isNewJSX ? 'automatic' : 'classic', + ...(isNewJSX ? {} : { importSource: undefined }), }; } return opts; } -export function getBabelPresetReactOpts(pkg: IApi['pkg']) { +export function getBabelPresetReactOpts(pkg: IApi['pkg'], cwd: string) { return { - ...getBaseTransformReactOpts(pkg), + ...getBaseTransformReactOpts(pkg, cwd), }; } -export function getSWCTransformReactOpts(pkg: IApi['pkg']) { +export function getSWCTransformReactOpts(pkg: IApi['pkg'], cwd: string) { return { - ...getBaseTransformReactOpts(pkg), + ...getBaseTransformReactOpts(pkg, cwd), }; } diff --git a/tests/fixtures/build/automatic-jsx/package.json b/tests/fixtures/build/automatic-jsx/package.json index 82a49442..6cfa74c3 100644 --- a/tests/fixtures/build/automatic-jsx/package.json +++ b/tests/fixtures/build/automatic-jsx/package.json @@ -1,5 +1,5 @@ { "dependencies": { - "react": "^17.0.0" + "react": "^16.14.0" } } diff --git a/tests/fixtures/build/automatic-jsx/tsconfig.json b/tests/fixtures/build/automatic-jsx/tsconfig.json new file mode 100644 index 00000000..a224293f --- /dev/null +++ b/tests/fixtures/build/automatic-jsx/tsconfig.json @@ -0,0 +1,5 @@ +{ + "compilerOptions": { + "jsx": "react-jsx" + } +} From 8a93e7c6033c432cdffc7b94c1885bcf1e8e70f7 Mon Sep 17 00:00:00 2001 From: PeachScript Date: Tue, 20 Dec 2022 15:56:48 +0800 Subject: [PATCH 2/5] chore: update pnpm-lock.yaml --- pnpm-lock.yaml | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 68dcfa6e..44d76509 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -115,9 +115,9 @@ importers: tests/fixtures/build/automatic-jsx: specifiers: - react: ^17.0.0 + react: ^16.14.0 dependencies: - react: 17.0.2 + react: 16.14.0 tests/fixtures/build/classic-jsx: specifiers: @@ -2859,8 +2859,8 @@ packages: engines: {node: '>=10'} hasBin: true dependencies: - JSONStream: 1.3.5 is-text-path: 1.0.1 + JSONStream: 1.3.5 lodash: 4.17.21 meow: 8.1.2 split2: 3.2.2 @@ -6461,7 +6461,6 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 react-is: 16.13.1 - dev: true /ps-tree/1.2.0: resolution: {integrity: sha512-0VnamPPYHl4uaU/nSFeZZpR21QAWRz+sRv4iW9+v/GS/J5U5iZB5BNN6J0RMoOvdx2gWM2+ZFMIm58q24e4UYA==} @@ -6558,7 +6557,6 @@ packages: /react-is/16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - dev: true /react-is/17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} @@ -6576,15 +6574,6 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 prop-types: 15.8.1 - dev: true - - /react/17.0.2: - resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==} - engines: {node: '>=0.10.0'} - dependencies: - loose-envify: 1.4.0 - object-assign: 4.1.1 - dev: false /react/18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} From f984b96b4a513e57715ffba35382ed1264afa407 Mon Sep 17 00:00:00 2001 From: PeachScript Date: Tue, 20 Dec 2022 16:04:11 +0800 Subject: [PATCH 3/5] style: update istanbul comment --- src/builder/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/builder/utils.ts b/src/builder/utils.ts index 44723a5b..342cc6ad 100644 --- a/src/builder/utils.ts +++ b/src/builder/utils.ts @@ -29,7 +29,7 @@ export function getBaseTransformReactOpts(pkg: IApi['pkg'], cwd: string) { let isNewJSX: boolean; const tsconfig = getTsconfig(cwd); - // istanbul-ignore-else + /* istanbul ignore else */ if (tsconfig) { // respect tsconfig first, `4` means `react-jsx` isNewJSX = tsconfig.options?.jsx === 4; From 2e87a9efbdd915c3680ac968a5079947a21c4233 Mon Sep 17 00:00:00 2001 From: PeachScript Date: Tue, 20 Dec 2022 16:40:01 +0800 Subject: [PATCH 4/5] test: workaround use istanbul ignore with esbuild ref: https://github.com/vitest-dev/vitest/issues/2021#issuecomment-1242909898 --- src/builder/bundless/dts/index.ts | 4 ++-- src/builder/utils.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/builder/bundless/dts/index.ts b/src/builder/bundless/dts/index.ts index 4b872fc0..a0a4be99 100644 --- a/src/builder/bundless/dts/index.ts +++ b/src/builder/bundless/dts/index.ts @@ -40,7 +40,7 @@ export default async function getDeclarations( if (tsconfig) { // check tsconfig error - // istanbul-ignore-if + /* istanbul ignore if -- @preserve */ if (tsconfig.errors.length) { throw new Error( `Error parsing tsconfig.json content: ${chalk.redBright( @@ -131,7 +131,7 @@ export default async function getDeclarations( }); // check compile error - // istanbul-ignore-if + /* istanbul ignore if -- @preserve */ if (result.diagnostics.length) { result.diagnostics.forEach((d) => { const loc = ts.getLineAndCharacterOfPosition(d.file!, d.start!); diff --git a/src/builder/utils.ts b/src/builder/utils.ts index 342cc6ad..036b25ce 100644 --- a/src/builder/utils.ts +++ b/src/builder/utils.ts @@ -29,7 +29,7 @@ export function getBaseTransformReactOpts(pkg: IApi['pkg'], cwd: string) { let isNewJSX: boolean; const tsconfig = getTsconfig(cwd); - /* istanbul ignore else */ + /* istanbul ignore else -- @preserve */ if (tsconfig) { // respect tsconfig first, `4` means `react-jsx` isNewJSX = tsconfig.options?.jsx === 4; From 546492d2f44b8e2672a9283629d0e8d08e286d25 Mon Sep 17 00:00:00 2001 From: PeachScript Date: Tue, 20 Dec 2022 16:48:46 +0800 Subject: [PATCH 5/5] chore: update --- src/builder/bundless/dts/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/builder/bundless/dts/index.ts b/src/builder/bundless/dts/index.ts index a0a4be99..4b872fc0 100644 --- a/src/builder/bundless/dts/index.ts +++ b/src/builder/bundless/dts/index.ts @@ -40,7 +40,7 @@ export default async function getDeclarations( if (tsconfig) { // check tsconfig error - /* istanbul ignore if -- @preserve */ + // istanbul-ignore-if if (tsconfig.errors.length) { throw new Error( `Error parsing tsconfig.json content: ${chalk.redBright( @@ -131,7 +131,7 @@ export default async function getDeclarations( }); // check compile error - /* istanbul ignore if -- @preserve */ + // istanbul-ignore-if if (result.diagnostics.length) { result.diagnostics.forEach((d) => { const loc = ts.getLineAndCharacterOfPosition(d.file!, d.start!);