From 608174254b26b69e0d7a1d5782907eb548081f12 Mon Sep 17 00:00:00 2001 From: Shinyaigeek Date: Sun, 12 Dec 2021 04:42:41 +0900 Subject: [PATCH 1/8] Feature: detect reactLib with pkg.alias.react --- packages/transformers/js/src/JSTransformer.js | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/transformers/js/src/JSTransformer.js b/packages/transformers/js/src/JSTransformer.js index 08a758971c0..5d7ab52eea3 100644 --- a/packages/transformers/js/src/JSTransformer.js +++ b/packages/transformers/js/src/JSTransformer.js @@ -126,6 +126,37 @@ const SCRIPT_ERRORS = { }, }; +function convertAliasReactIntoPragma( + alias: string | {|[string]: string|}, +): 'react' | 'preact' | 'hyperapp' | 'nervjs' { + if (typeof alias === 'string') { + switch (alias) { + case 'react': { + return 'react'; + } + case 'preact/compat': + case 'preact': { + return 'preact'; + } + case 'hyperapp': { + return 'hyperapp'; + } + case 'nervjs': { + return 'nervjs'; + } + default: { + return 'react'; + } + } + } else { + for (const key in alias) { + return convertAliasReactIntoPragma(alias[key]); + } + } + + return 'react'; +} + type TSConfig = { compilerOptions?: { // https://www.typescriptlang.org/tsconfig#jsx @@ -157,7 +188,7 @@ export default (new Transformer({ let reactLib; if (pkg?.alias && pkg.alias['react']) { // e.g.: `{ alias: { "react": "preact/compat" } }` - reactLib = 'react'; + reactLib = convertAliasReactIntoPragma(pkg.alias['react']); } else { // Find a dependency that we can map to a JSX pragma reactLib = Object.keys(JSX_PRAGMA).find( From ca600b40d5b892faffd95cdfc194bb96e054179a Mon Sep 17 00:00:00 2001 From: Shinyaigeek Date: Sun, 12 Dec 2021 04:43:05 +0900 Subject: [PATCH 2/8] Chore: add test for preact aliasing --- .../jsx-automatic-preact-with-alias/index.js | 1 + .../node_modules/preact/jsx-runtime.js | 0 .../node_modules/preact/package.json | 3 +++ .../jsx-automatic-preact-with-alias/package.json | 12 ++++++++++++ .../jsx-automatic-preact-with-alias/yarn.lock | 0 .../core/integration-tests/test/transpilation.js | 15 ++++++++++++++- 6 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/index.js create mode 100644 packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/jsx-runtime.js create mode 100644 packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/package.json create mode 100644 packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/package.json create mode 100644 packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/yarn.lock diff --git a/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/index.js b/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/index.js new file mode 100644 index 00000000000..8d097d55d7f --- /dev/null +++ b/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/index.js @@ -0,0 +1 @@ +module.exports =
; diff --git a/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/jsx-runtime.js b/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/jsx-runtime.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/package.json b/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/package.json new file mode 100644 index 00000000000..201dceb61ed --- /dev/null +++ b/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/package.json @@ -0,0 +1,3 @@ +{ + "name": "preact" +} diff --git a/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/package.json b/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/package.json new file mode 100644 index 00000000000..c9bd49e7568 --- /dev/null +++ b/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/package.json @@ -0,0 +1,12 @@ +{ + "private": true, + "dependencies": { + "preact": "^10.5" + }, + "alias": { + "react": "preact/compat", + "react-dom/test-utils": "preact/test-utils", + "react-dom": "preact/compat", + "react/jsx-runtime": "preact/jsx-runtime" + } +} diff --git a/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/yarn.lock b/packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/yarn.lock new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/core/integration-tests/test/transpilation.js b/packages/core/integration-tests/test/transpilation.js index de40708e7e2..4ba0603190f 100644 --- a/packages/core/integration-tests/test/transpilation.js +++ b/packages/core/integration-tests/test/transpilation.js @@ -120,7 +120,7 @@ describe('transpilation', function () { await bundle(path.join(__dirname, '/integration/jsx-react-alias/index.js')); let file = await outputFS.readFile(path.join(distDir, 'index.js'), 'utf8'); - assert(file.includes('React.createElement("div"')); + assert(file.includes('h("div"')); }); it('should support compiling JSX in JS files with Preact dependency', async function () { @@ -183,6 +183,19 @@ describe('transpilation', function () { assert(file.includes('_jsxRuntime.jsx("div"')); }); + it('should support the automatic JSX runtime with preact with alias', async function () { + let b = await bundle( + path.join( + __dirname, + '/integration/jsx-automatic-preact-with-alias/index.js', + ), + ); + + let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8'); + assert(file.includes('preact/jsx-runtime')); + assert(file.includes('_jsxRuntime.jsx("div"')); + }); + it('should support the automatic JSX runtime with explicit tsconfig.json', async function () { let b = await bundle( path.join(__dirname, '/integration/jsx-automatic-tsconfig/index.js'), From 09b984456fe53cbc37a497c05fccdcd47dba409b Mon Sep 17 00:00:00 2001 From: Shinyaigeek Date: Wed, 15 Dec 2021 00:15:25 +0900 Subject: [PATCH 3/8] Chore: fix h -> React.createElement in Preact compat alias --- packages/core/integration-tests/test/transpilation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/integration-tests/test/transpilation.js b/packages/core/integration-tests/test/transpilation.js index 4ba0603190f..a65d95d54a2 100644 --- a/packages/core/integration-tests/test/transpilation.js +++ b/packages/core/integration-tests/test/transpilation.js @@ -120,7 +120,7 @@ describe('transpilation', function () { await bundle(path.join(__dirname, '/integration/jsx-react-alias/index.js')); let file = await outputFS.readFile(path.join(distDir, 'index.js'), 'utf8'); - assert(file.includes('h("div"')); + assert(file.includes('React.createElement("div"')); }); it('should support compiling JSX in JS files with Preact dependency', async function () { From e470610c727e17ca4148b5762b5b4fe24469a6a7 Mon Sep 17 00:00:00 2001 From: Shinyaigeek Date: Wed, 15 Dec 2021 00:22:21 +0900 Subject: [PATCH 4/8] Feature: convert alias into pragma in jsx-runtime transformation --- packages/transformers/js/src/JSTransformer.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/transformers/js/src/JSTransformer.js b/packages/transformers/js/src/JSTransformer.js index 5d7ab52eea3..fdd507bceb0 100644 --- a/packages/transformers/js/src/JSTransformer.js +++ b/packages/transformers/js/src/JSTransformer.js @@ -188,7 +188,7 @@ export default (new Transformer({ let reactLib; if (pkg?.alias && pkg.alias['react']) { // e.g.: `{ alias: { "react": "preact/compat" } }` - reactLib = convertAliasReactIntoPragma(pkg.alias['react']); + reactLib = 'react'; } else { // Find a dependency that we can map to a JSX pragma reactLib = Object.keys(JSX_PRAGMA).find( @@ -230,6 +230,10 @@ export default (new Transformer({ jsxImportSource = compilerOptions?.jsxImportSource; automaticJSXRuntime = true; } else if (reactLib) { + reactLib = + pkg.alias && pkg.alias['react'] + ? convertAliasReactIntoPragma(pkg.alias['react']) + : reactLib; let automaticVersion = JSX_PRAGMA[reactLib]?.automatic; let reactLibVersion = pkg?.dependencies?.[reactLib] || From db5d8dd243f1078e8bf5908387cbcdecb256efd9 Mon Sep 17 00:00:00 2001 From: Shinyaigeek Date: Wed, 15 Dec 2021 04:12:15 +0900 Subject: [PATCH 5/8] Fix: access pkg.alias with nullish coalescing --- packages/transformers/js/src/JSTransformer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/transformers/js/src/JSTransformer.js b/packages/transformers/js/src/JSTransformer.js index fdd507bceb0..336bee1ff79 100644 --- a/packages/transformers/js/src/JSTransformer.js +++ b/packages/transformers/js/src/JSTransformer.js @@ -231,7 +231,7 @@ export default (new Transformer({ automaticJSXRuntime = true; } else if (reactLib) { reactLib = - pkg.alias && pkg.alias['react'] + pkg?.alias && pkg.alias['react'] ? convertAliasReactIntoPragma(pkg.alias['react']) : reactLib; let automaticVersion = JSX_PRAGMA[reactLib]?.automatic; From 3aedb457a81d688c63bb74d9e17e394b1938f549 Mon Sep 17 00:00:00 2001 From: Shinyaigeek Date: Wed, 15 Dec 2021 04:13:41 +0900 Subject: [PATCH 6/8] Update: add preact-compat to alias --- packages/transformers/js/src/JSTransformer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/transformers/js/src/JSTransformer.js b/packages/transformers/js/src/JSTransformer.js index 336bee1ff79..b6a004df186 100644 --- a/packages/transformers/js/src/JSTransformer.js +++ b/packages/transformers/js/src/JSTransformer.js @@ -135,6 +135,7 @@ function convertAliasReactIntoPragma( return 'react'; } case 'preact/compat': + case 'preact-compat': case 'preact': { return 'preact'; } From e05804ac27aabd902093e29ac31ed6cd3ed9b754 Mon Sep 17 00:00:00 2001 From: Shinyaigeek Date: Fri, 17 Dec 2021 04:02:53 +0900 Subject: [PATCH 7/8] Update: prepare effectiveReactLib variable to set react pragma lib name temporary --- .../integration-tests/test/transpilation.js | 1 - packages/transformers/js/src/JSTransformer.js | 46 +++---------------- 2 files changed, 7 insertions(+), 40 deletions(-) diff --git a/packages/core/integration-tests/test/transpilation.js b/packages/core/integration-tests/test/transpilation.js index a65d95d54a2..44e182f96c5 100644 --- a/packages/core/integration-tests/test/transpilation.js +++ b/packages/core/integration-tests/test/transpilation.js @@ -192,7 +192,6 @@ describe('transpilation', function () { ); let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8'); - assert(file.includes('preact/jsx-runtime')); assert(file.includes('_jsxRuntime.jsx("div"')); }); diff --git a/packages/transformers/js/src/JSTransformer.js b/packages/transformers/js/src/JSTransformer.js index b6a004df186..7ed7cdae370 100644 --- a/packages/transformers/js/src/JSTransformer.js +++ b/packages/transformers/js/src/JSTransformer.js @@ -126,38 +126,6 @@ const SCRIPT_ERRORS = { }, }; -function convertAliasReactIntoPragma( - alias: string | {|[string]: string|}, -): 'react' | 'preact' | 'hyperapp' | 'nervjs' { - if (typeof alias === 'string') { - switch (alias) { - case 'react': { - return 'react'; - } - case 'preact/compat': - case 'preact-compat': - case 'preact': { - return 'preact'; - } - case 'hyperapp': { - return 'hyperapp'; - } - case 'nervjs': { - return 'nervjs'; - } - default: { - return 'react'; - } - } - } else { - for (const key in alias) { - return convertAliasReactIntoPragma(alias[key]); - } - } - - return 'react'; -} - type TSConfig = { compilerOptions?: { // https://www.typescriptlang.org/tsconfig#jsx @@ -231,15 +199,15 @@ export default (new Transformer({ jsxImportSource = compilerOptions?.jsxImportSource; automaticJSXRuntime = true; } else if (reactLib) { - reactLib = - pkg?.alias && pkg.alias['react'] - ? convertAliasReactIntoPragma(pkg.alias['react']) + let effectiveReactLib = + pkg?.alias && pkg.alias['react'] === 'preact/compat' + ? 'preact' : reactLib; - let automaticVersion = JSX_PRAGMA[reactLib]?.automatic; + let automaticVersion = JSX_PRAGMA[effectiveReactLib]?.automatic; let reactLibVersion = - pkg?.dependencies?.[reactLib] || - pkg?.devDependencies?.[reactLib] || - pkg?.peerDependencies?.[reactLib]; + pkg?.dependencies?.[effectiveReactLib] || + pkg?.devDependencies?.[effectiveReactLib] || + pkg?.peerDependencies?.[effectiveReactLib]; let minReactLibVersion = reactLibVersion != null && reactLibVersion !== '*' ? semver.minVersion(reactLibVersion)?.toString() From 4efec78c39c5d75dc944ace59f1238f7dd9f7dac Mon Sep 17 00:00:00 2001 From: Shinyaigeek Date: Sat, 18 Dec 2021 18:58:58 +0900 Subject: [PATCH 8/8] Chore: add jsx-transform with alias testing to check correctly import from react/jsx-runtime --- packages/core/integration-tests/test/transpilation.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/integration-tests/test/transpilation.js b/packages/core/integration-tests/test/transpilation.js index 44e182f96c5..6a5c9d0cc4b 100644 --- a/packages/core/integration-tests/test/transpilation.js +++ b/packages/core/integration-tests/test/transpilation.js @@ -192,6 +192,7 @@ describe('transpilation', function () { ); let file = await outputFS.readFile(b.getBundles()[0].filePath, 'utf8'); + assert(/\Wreact\/jsx-runtime\W/.test(file)); assert(file.includes('_jsxRuntime.jsx("div"')); });