Fix: transpiling React.createElement into Preact h behavior

packages/core/integration-tests/test/integration/jsx-automatic-preact-with-alias/index.js

@@ -0,0 +1 @@
+module.exports = <div />;

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"
+  }
+}

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'),

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(