Fix: transpiling React.createElement into Preact h behavior (parcel-b…

…undler#7435)
bhovhannes · Dec 23, 2021 · 1eaac05 · 1eaac05
1 parent 412a5a9
commit 1eaac05
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 4 deletions.
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
@@ -0,0 +1 @@
+module.exports = <div />;
diff --git a/...tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/jsx-runtime.js b/...tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/jsx-runtime.js
diff --git a/...n-tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/package.json b/...n-tests/test/integration/jsx-automatic-preact-with-alias/node_modules/preact/package.json
diff --git a/...ages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/package.json b/...ages/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
diff --git a/packages/core/integration-tests/test/transpilation.js b/packages/core/integration-tests/test/transpilation.js
@@ -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(/\Wreact\/jsx-runtime\W/.test(file));
+    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'),

diff --git a/packages/transformers/js/src/JSTransformer.js b/packages/transformers/js/src/JSTransformer.js
@@ -200,11 +200,15 @@ export default (new Transformer({
         jsxImportSource = compilerOptions?.jsxImportSource;
         automaticJSXRuntime = true;
       } else if (reactLib) {
-        let automaticVersion = JSX_PRAGMA[reactLib]?.automatic;
+        let effectiveReactLib =
+          pkg?.alias && pkg.alias['react'] === 'preact/compat'
+            ? 'preact'
+            : reactLib;
+        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()