feat: support hermes sourcemap compose (#404)

* feat: hermes compose sourcemap

* chore: changeset

* fix: filename

* feat: ensure compose source map path

* feat: cleanup

* fix

* feat: throw in getComposeSourceMapsPath

* fix: unused

* fix: unused code

* chore: changeset

* Update .changeset/violet-readers-yell.md

---------

Co-authored-by: Michał Pierzchała <[email protected]>

Author: gronxb

.changeset/violet-readers-yell.md

@@ -0,0 +1,9 @@
+---
+'@rnef/platform-apple-helpers': patch
+'@rnef/platform-android': patch
+'@rnef/plugin-repack': patch
+'@rnef/plugin-metro': patch
+'@rnef/tools': patch
+---
+
+feat: support hermes sourcemap compose

packages/platform-android/src/lib/commands/signAndroid/bundle.ts

@@ -64,5 +64,8 @@ export async function buildJsBundle(options: BuildJsBundleOptions) {
     return;
   }
 
-  await runHermes({ bundleOutputPath: options.bundleOutputPath });
+  await runHermes({
+    bundleOutputPath: options.bundleOutputPath,
+    sourcemapOutputPath: options.sourcemapOutputPath,
+  });
 }

packages/platform-apple-helpers/src/lib/commands/sign/bundle.ts

@@ -12,6 +12,7 @@ type BuildJsBundleOptions = {
   bundleOutputPath: string;
   assetsDestPath: string;
   useHermes?: boolean;
+  sourcemapOutputPath?: string;
 };
 
 /**
@@ -41,6 +42,7 @@ export async function buildJsBundle(options: BuildJsBundleOptions) {
     options.bundleOutputPath,
     '--assets-dest',
     options.assetsDestPath,
+    ...(options.sourcemapOutputPath ? ['--sourcemap-output', options.sourcemapOutputPath] : []),
   ];
   try {
     await spawn('rnef', rnefBundleArgs, { preferLocal: true });
@@ -54,5 +56,8 @@ export async function buildJsBundle(options: BuildJsBundleOptions) {
     return;
   }
 
-  await runHermes({ bundleOutputPath: options.bundleOutputPath });
+  await runHermes({
+    bundleOutputPath: options.bundleOutputPath,
+    sourcemapOutputPath: options.sourcemapOutputPath,
+  });
 }

packages/plugin-metro/src/lib/bundle/command.ts

@@ -62,7 +62,10 @@ export function registerBundleCommand(api: PluginApi) {
       if (args.hermes) {
         const loader = spinner();
         loader.start('Running Hermes compiler...');
-        await runHermes({ bundleOutputPath: args.bundleOutput });
+        await runHermes({
+          bundleOutputPath: args.bundleOutput,
+          sourcemapOutputPath: args.sourcemapOutput,
+        });
         loader.stop(
           `Hermes bytecode bundle created at: ${color.cyan(args.bundleOutput)}`
         );

packages/plugin-repack/src/lib/pluginRepack.ts

@@ -90,7 +90,10 @@ export const pluginRepack =
 
           const loader = spinner();
           loader.start('Running Hermes compiler...');
-          await runHermes({ bundleOutputPath: args.bundleOutput });
+          await runHermes({
+            bundleOutputPath: args.bundleOutput,
+            sourcemapOutputPath: args.sourcemapOutput,
+          });
           loader.stop(
             `Hermes bytecode bundle created at: ${color.cyan(
               args.bundleOutput

packages/tools/src/lib/hermes.ts

@@ -14,10 +14,30 @@ function getReactNativePackagePath() {
   return path.dirname(input);
 }
 
+/**
+ * Returns the path to the react-native compose-source-maps.js script.
+ */
+function getComposeSourceMapsPath(): string {
+  const rnPackagePath = getReactNativePackagePath();
+  const composeSourceMapsPath = path.join(
+    rnPackagePath,
+    'scripts',
+    'compose-source-maps.js',
+  );
+  if (!fs.existsSync(composeSourceMapsPath)) {
+    throw new RnefError(
+      "Could not find react-native's compose-source-maps.js script."
+    );
+  }
+  return composeSourceMapsPath;
+}
+
 export async function runHermes({
   bundleOutputPath,
+  sourcemapOutputPath,
 }: {
   bundleOutputPath: string;
+  sourcemapOutputPath?: string;
 }) {
   const hermescPath = getHermescPath();
   if (!hermescPath) {
@@ -26,15 +46,24 @@ export async function runHermes({
     );
   }
 
+  // Output will be .hbc file
+  const hbcOutputPath = `${bundleOutputPath}.hbc`;
+
   const hermescArgs = [
     '-emit-binary',
     '-max-diagnostic-width=80',
     '-O',
     '-w',
     '-out',
-    bundleOutputPath, // Needs `-out` path, or otherwise outputs to stdout
+    hbcOutputPath,
     bundleOutputPath,
   ];
+
+  // Add sourcemap flag if enabled
+  if (sourcemapOutputPath) {
+    hermescArgs.push('-output-source-map');
+  }
+
   try {
     await spawn(hermescPath, hermescArgs);
   } catch (error) {
@@ -43,6 +72,39 @@ export async function runHermes({
       { cause: (error as SubprocessError).stderr }
     );
   }
+
+  // Handle sourcemap composition if enabled
+  if (sourcemapOutputPath) {
+    const hermesSourceMapFile = `${hbcOutputPath}.map`;
+    const composeSourceMapsPath = getComposeSourceMapsPath();
+
+    try {
+      await spawn('node', [
+        composeSourceMapsPath,
+        sourcemapOutputPath,
+        hermesSourceMapFile,
+        '-o',
+        sourcemapOutputPath,
+      ]);
+    } catch (error) {
+      throw new RnefError(
+        'Failed to run compose-source-maps script',
+        { cause: (error as SubprocessError).stderr }
+      );
+    }
+  }
+
+  // Move .hbc file to overwrite the original bundle file
+  try {
+    if (fs.existsSync(bundleOutputPath)) {
+      fs.unlinkSync(bundleOutputPath);
+    }
+    fs.renameSync(hbcOutputPath, bundleOutputPath);
+  } catch (error) {
+    throw new RnefError(
+      `Failed to move compiled Hermes bytecode to bundle output path: ${error}`
+    );
+  }
 }
 
 /**