fix: launch editor with proper project filepaths

Author: jbroma

packages/dev-server/src/plugins/devtools/devtoolsPlugin.ts

@@ -2,6 +2,7 @@ import type { FastifyInstance } from 'fastify';
 import fastifyPlugin from 'fastify-plugin';
 import launchEditor from 'launch-editor';
 import open from 'open';
+import { parseSourceFilename } from '../../utils/parseSourceFilename.js';
 
 interface OpenURLRequestBody {
   url: string;
@@ -18,7 +19,10 @@ function parseRequestBody<T>(body: unknown): T {
   throw new Error(`Unsupported body type: ${typeof body}`);
 }
 
-async function devtoolsPlugin(instance: FastifyInstance) {
+async function devtoolsPlugin(
+  instance: FastifyInstance,
+  { rootDir }: { rootDir: string }
+) {
   // reference implementation in `@react-native-community/cli-server-api`:
   // https://github.com/react-native-community/cli/blob/46436a12478464752999d34ed86adf3212348007/packages/cli-server-api/src/openURLMiddleware.ts
   instance.route({
@@ -37,11 +41,9 @@ async function devtoolsPlugin(instance: FastifyInstance) {
     method: ['POST'],
     url: '/open-stack-frame',
     handler: async (request, reply) => {
-      const { file, lineNumber } = parseRequestBody<OpenStackFrameRequestBody>(
-        request.body
-      );
-      // TODO fix rewriting of `webpack://` to rootDir of the project
-      launchEditor(`${file}:${lineNumber}`, process.env.REACT_EDITOR);
+      const body = parseRequestBody<OpenStackFrameRequestBody>(request.body);
+      const filepath = parseSourceFilename(body.file, rootDir);
+      launchEditor(`${filepath}:${body.lineNumber}`, process.env.REACT_EDITOR);
       reply.send('OK');
     },
   });

packages/dev-server/src/utils/parseSourceFilename.ts

@@ -0,0 +1,22 @@
+import path from 'node:path';
+
+export function parseSourceFilename(filename: string, rootDir: string) {
+  const prefix = filename.split('/')[0];
+  let filepath = filename;
+
+  // Handle [projectRoot] and [projectRoot^N] prefixes
+  const projectRootMatch = prefix.match(/^\[projectRoot(?:\^(\d+))?\]$/);
+  if (projectRootMatch) {
+    const upLevels = projectRootMatch[1];
+    if (upLevels) {
+      // For [projectRoot^N], go up N levels from rootDir
+      const upPath = '../'.repeat(Number(upLevels));
+      filepath = filepath.replace(`${prefix}/`, rootDir + '/' + upPath);
+    } else {
+      // For plain [projectRoot], just replace with rootDir
+      filepath = filepath.replace('[projectRoot]', rootDir);
+    }
+  }
+
+  return path.resolve(filepath);
+}