From 9890400fe5ac750698ceb3eaf72e0b3a86ae4a73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Roma=C5=84czyk?= <jakub.romanczyk@callstack.com>
Date: Tue, 10 Dec 2024 21:25:04 +0100
Subject: [PATCH] fix: split ts & tsx rules in codegen & enable source maps
 (#819)

* fix: split ts & tsx rules in codegen

* fix: reorganize the rules, add missing sourcemap generation

* chore: add changset
---
 .changeset/smooth-zebras-hunt.md              |  5 ++
 .../src/rules/reactNativeCodegenRules.ts      | 58 +++++++++++--------
 2 files changed, 38 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/smooth-zebras-hunt.md

diff --git a/.changeset/smooth-zebras-hunt.md b/.changeset/smooth-zebras-hunt.md
new file mode 100644
index 000000000..ebfc978fd
--- /dev/null
+++ b/.changeset/smooth-zebras-hunt.md
@@ -0,0 +1,5 @@
+---
+"@callstack/repack": patch
+---
+
+Fix missing sourcemap generation for codegen related files and configure separate rules for ts & tsx files
diff --git a/packages/repack/src/rules/reactNativeCodegenRules.ts b/packages/repack/src/rules/reactNativeCodegenRules.ts
index bd37a5fa0..7e8042b75 100644
--- a/packages/repack/src/rules/reactNativeCodegenRules.ts
+++ b/packages/repack/src/rules/reactNativeCodegenRules.ts
@@ -7,39 +7,47 @@ import type { RuleSetRule } from '@rspack/core';
  */
 export const REACT_NATIVE_CODEGEN_RULES: RuleSetRule = {
   test: /(?:^|[\\/])(?:Native\w+|(\w+)NativeComponent)\.[jt]sx?$/,
-  rules: [
-    {
-      test: /\.tsx?$/,
-      use: [
+  use: {
+    loader: 'babel-loader',
+    options: {
+      babelrc: false,
+      configFile: false,
+      parserOpts: {
+        // hermes-parser strips all comments so the information about flow pragma is lost
+        // assume flow when dealing with JS files as a workaround
+        flow: 'all',
+      },
+      plugins: [
+        'babel-plugin-syntax-hermes-parser',
+        ['@babel/plugin-syntax-typescript', false],
+        '@react-native/babel-plugin-codegen',
+      ],
+      // config merging reference: https://babeljs.io/docs/options#pluginpreset-entries
+      overrides: [
         {
-          loader: 'babel-loader',
-          options: {
-            babelrc: false,
-            configFile: false,
-            plugins: [
+          test: /\.ts$/,
+          plugins: [
+            [
               '@babel/plugin-syntax-typescript',
-              '@react-native/babel-plugin-codegen',
+              { isTSX: false, allowNamespaces: true },
             ],
-          },
+          ],
         },
-      ],
-    },
-    {
-      test: /\.jsx?$/,
-      use: [
         {
-          loader: 'babel-loader',
-          options: {
-            babelrc: false,
-            configFile: false,
-            plugins: [
-              'babel-plugin-syntax-hermes-parser',
-              '@react-native/babel-plugin-codegen',
+          test: /\.tsx$/,
+          plugins: [
+            [
+              '@babel/plugin-syntax-typescript',
+              { isTSX: true, allowNamespaces: true },
             ],
-          },
+          ],
         },
       ],
+      // source maps are usually set based on the devtool option in config
+      // Re.Pack templates disable the devtool by default and the flag in loader is not set
+      // we need to enable sourcemaps for the loader explicitly here
+      sourceMaps: true,
     },
-  ],
+  },
   type: 'javascript/auto',
 };