fix: add transform react jsx automatic to node module rules (#808)

* fix: add transform react jsx automatic to node module rules * fix: add transform react jsx automatic to react native rules * refactor: reorder props in rules * refactor: reuse most of the config in node module rules * chore: update Podfile.lock * chore: add changeset
callstack · Dec 4, 2024 · f600e07 · f600e07
1 parent daffbf7
commit f600e07
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 52 deletions.
diff --git a/.changeset/slimy-dragons-swim.md b/.changeset/slimy-dragons-swim.md
@@ -0,0 +1,5 @@
+---
+"@callstack/repack": patch
+---
+
+Fix type JSX runtime transform when transpiling node modules
diff --git a/apps/tester-app/ios/Podfile.lock b/apps/tester-app/ios/Podfile.lock
@@ -1,6 +1,6 @@
 PODS:
   - boost (1.84.0)
-  - callstack-repack (5.0.0-rc.0):
+  - callstack-repack (5.0.0-rc.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1852,7 +1852,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: 1dca942403ed9342f98334bf4c3621f011aa7946
-  callstack-repack: 75464b0e26467fc4a7236373399bc0fc2281f495
+  callstack-repack: 3106db24c24f7a76a380230ff7794d225cecb760
   DoubleConversion: f16ae600a246532c4020132d54af21d0ddb2a385
   FBLazyVector: 7075bb12898bc3998fd60f4b7ca422496cc2cdf7
   fmt: 10c6e61f4be25dc963c36bd73fc7b1705fe975be

diff --git a/packages/repack/src/rules/nodeModulesLoadingRules.ts b/packages/repack/src/rules/nodeModulesLoadingRules.ts
@@ -1,6 +1,33 @@
 import type { RuleSetRule } from '@rspack/core';
 import { getModulePaths } from '../utils';
 
+const makeSwcLoaderConfig = (syntax: 'js' | 'ts', jsx: boolean) => ({
+  loader: 'builtin:swc-loader',
+  options: {
+    env: {
+      targets: { 'react-native': '0.74' },
+    },
+    jsc: {
+      externalHelpers: true,
+      loose: true,
+      parser:
+        syntax === 'js'
+          ? { syntax: 'ecmascript', jsx: jsx }
+          : { syntax: 'typescript', tsx: jsx },
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+    module: {
+      type: 'commonjs',
+      strict: false,
+      strictMode: false,
+    },
+  },
+});
+
 /**
  * @constant NODE_MODULES_LOADING_RULES
  * @type {RuleSetRule}
@@ -19,58 +46,18 @@ export const NODE_MODULES_LOADING_RULES: RuleSetRule = {
     'react-native-tvos',
     '@callstack/react-native-visionos',
   ]),
-  rules: [
+  oneOf: [
     {
       test: /jsx?$/,
-      use: [
-        {
-          loader: 'builtin:swc-loader',
-          options: {
-            env: {
-              targets: { 'react-native': '0.74' },
-            },
-            jsc: {
-              loose: true,
-              parser: {
-                syntax: 'ecmascript',
-                jsx: true,
-              },
-              externalHelpers: true,
-            },
-            module: {
-              type: 'commonjs',
-              strict: false,
-              strictMode: false,
-            },
-          },
-        },
-      ],
+      use: [makeSwcLoaderConfig('js', true)],
     },
     {
-      test: /tsx?$/,
-      use: [
-        {
-          loader: 'builtin:swc-loader',
-          options: {
-            env: {
-              targets: { 'react-native': '0.74' },
-            },
-            jsc: {
-              parser: {
-                syntax: 'typescript',
-                tsx: true,
-              },
-              loose: true,
-              externalHelpers: true,
-            },
-            module: {
-              type: 'commonjs',
-              strict: false,
-              strictMode: false,
-            },
-          },
-        },
-      ],
+      test: /ts$/,
+      use: [makeSwcLoaderConfig('ts', false)],
+    },
+    {
+      test: /tsx$/,
+      use: [makeSwcLoaderConfig('ts', true)],
     },
   ],
 };
diff --git a/packages/repack/src/rules/reactNativeLoadingRules.ts b/packages/repack/src/rules/reactNativeLoadingRules.ts
@@ -26,13 +26,18 @@ export const REACT_NATIVE_LOADING_RULES: RuleSetRule = {
           targets: { 'react-native': '0.74' },
         },
         jsc: {
+          externalHelpers: true,
+          loose: true,
           parser: {
             syntax: 'ecmascript',
             jsx: true,
             exportDefaultFrom: true,
           },
-          loose: true,
-          externalHelpers: true,
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
         },
         module: {
           type: 'commonjs',