refactor: drop @react-native-community/cli-server-api dep

.changeset/weak-candles-dream.md

@@ -0,0 +1,6 @@
+---
+"@callstack/repack-dev-server": patch
+"@callstack/repack": patch
+---
+
+Drop dependency on `@react-native-community/cli-server-api` in the DevServer

packages/dev-server/package.json

@@ -35,26 +35,19 @@
     "fastify": "^4.24.3",
     "fastify-favicon": "^4.3.0",
     "fastify-plugin": "^4.5.1",
+    "launch-editor": "^2.10.0",
+    "open": "^10.1.0",
     "pretty-format": "^28.1.0",
     "source-map": "^0.7.4",
     "ws": "^8.7.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.9",
     "@babel/core": "^7.23.9",
-    "@react-native-community/cli-server-api": "15.0.1",
     "@types/babel__code-frame": "^7.0.3",
     "@types/node": "catalog:",
     "@types/ws": "^8.5.3",
     "babel-plugin-add-import-extension": "^1.6.0",
     "typescript": "catalog:"
-  },
-  "peerDependencies": {
-    "@react-native-community/cli-server-api": ">=13.6.4"
-  },
-  "peerDependenciesMeta": {
-    "@react-native-community/cli-server-api": {
-      "optional": true
-    }
   }
 }

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

@@ -1,22 +1,50 @@
-import {
-  openStackFrameInEditorMiddleware,
-  openURLMiddleware,
-} from '@react-native-community/cli-server-api';
 import type { FastifyInstance } from 'fastify';
 import fastifyPlugin from 'fastify-plugin';
+import launchEditor from 'launch-editor';
+import open from 'open';
 
-async function devtoolsPlugin(
-  instance: FastifyInstance,
-  { rootDir }: { rootDir: string }
-) {
-  instance.use('/open-url', openURLMiddleware);
+interface OpenURLRequestBody {
+  url: string;
+}
+
+interface OpenStackFrameRequestBody {
+  file: string;
+  lineNumber: number;
+}
+
+function parseRequestBody<T>(body: unknown): T {
+  if (typeof body === 'object') return body as T;
+  if (typeof body === 'string') return JSON.parse(body) as T;
+  throw new Error(`Unsupported body type: ${typeof body}`);
+}
+
+async function devtoolsPlugin(instance: FastifyInstance) {
+  // 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({
+    method: ['POST'],
+    url: '/open-url',
+    handler: async (request, reply) => {
+      const { url } = parseRequestBody<OpenURLRequestBody>(request.body);
+      await open(url);
+      reply.send('OK');
+    },
+  });
 
-  instance.use(
-    '/open-stack-frame',
-    openStackFrameInEditorMiddleware({
-      watchFolders: [rootDir],
-    })
-  );
+  // reference implementation in `@react-native-community/cli-server-api`:
+  // https://github.com/react-native-community/cli/blob/46436a12478464752999d34ed86adf3212348007/packages/cli-server-api/src/openStackFrameMiddleware.ts
+  instance.route({
+    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);
+      reply.send('OK');
+    },
+  });
 
   instance.route({
     method: ['GET', 'POST', 'PUT'],