[BREAKING] feat: enable React Native DevTools by default (#786)

* chore: upgrade dev-middleware to 0.76.1 * feat: enable new debugger by default * chore: remove launch-js-devtools endpoint * chore: remove debugger-ui package from rnc cli * chore: bump cli-server-api to 15.0.1 * chore: remove deprecated remote debugger from tester-app * refactor: move CLI middleware endpoints to devtoolsPlugin * chore: remove ws integration for old debugger * refactor: remove check for debuggerWorker * chore: add changeset * chore: bump minimum version of server-api to 13.6.4
callstack · Nov 8, 2024 · cf42d14 · cf42d14
1 parent 19d3262
commit cf42d14
Show file tree

Hide file tree

Showing 16 changed files with 27 additions and 318 deletions.
diff --git a/.changeset/two-ghosts-refuse.md b/.changeset/two-ghosts-refuse.md
@@ -0,0 +1,5 @@
+---
+"@callstack/repack": major
+---
+
+Enable new debugger (React Native DevTools) by default, remove support for legacy remote debugging
diff --git a/apps/tester-app/src/App.tsx b/apps/tester-app/src/App.tsx
@@ -6,7 +6,6 @@ import { SectionContainer } from './ui/SectionContainer';
 
 import { AssetsTestContainer } from './assetsTest/AssetsTestContainer';
 import { AsyncContainer } from './asyncChunks/AsyncContainer';
-import DeprecatedRemoteDebuggerContainer from './deprecatedRemoteDebugger/DeprecatedRemoteDebuggerContainer';
 import { MiniAppsContainer } from './miniapp/MiniAppsContainer';
 import { RemoteContainer } from './remoteChunks/RemoteContainer';
 
@@ -28,9 +27,6 @@ const App = () => {
         <Section title="Assets test">
           <AssetsTestContainer />
         </Section>
-        <Section title="Deprecated remote debugger">
-          <DeprecatedRemoteDebuggerContainer />
-        </Section>
       </SectionContainer>
     </AppContainer>
   );

diff --git a/apps/tester-app/src/deprecatedRemoteDebugger/DeprecatedRemoteDebuggerContainer.tsx b/apps/tester-app/src/deprecatedRemoteDebugger/DeprecatedRemoteDebuggerContainer.tsx
diff --git a/apps/tester-app/src/deprecatedRemoteDebugger/NativeDevSettings.d.ts b/apps/tester-app/src/deprecatedRemoteDebugger/NativeDevSettings.d.ts
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
@@ -33,34 +33,28 @@
     "@babel/code-frame": "^7.16.7",
     "@fastify/middie": "^8.3.0",
     "@fastify/sensible": "^5.5.0",
-    "@react-native/dev-middleware": "^0.73.8",
+    "@react-native/dev-middleware": "^0.76.1",
     "fastify": "^4.24.3",
     "fastify-favicon": "^4.3.0",
     "fastify-plugin": "^4.5.1",
-    "open": "^8.4.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-debugger-ui": ">=11.3.1",
-    "@react-native-community/cli-server-api": ">=11.3.1",
+    "@react-native-community/cli-server-api": "15.0.1",
     "@types/babel__code-frame": "^7.0.3",
     "@types/node": "18",
     "@types/ws": "^8.5.3",
     "babel-plugin-add-import-extension": "^1.6.0",
     "typescript": "^5.5.3"
   },
   "peerDependencies": {
-    "@react-native-community/cli-debugger-ui": ">=11.3.1",
-    "@react-native-community/cli-server-api": ">=11.3.1"
+    "@react-native-community/cli-server-api": ">=13.6.4"
   },
   "peerDependenciesMeta": {
-    "@react-native-community/cli-debugger-ui": {
-      "optional": true
-    },
     "@react-native-community/cli-server-api": {
       "optional": true
     }

diff --git a/packages/dev-server/src/createServer.ts b/packages/dev-server/src/createServer.ts
@@ -1,11 +1,6 @@
 import { Writable } from 'node:stream';
 import middie from '@fastify/middie';
 import fastifySensible from '@fastify/sensible';
-import { debuggerUIMiddleware } from '@react-native-community/cli-debugger-ui';
-import {
-  openStackFrameInEditorMiddleware,
-  openURLMiddleware,
-} from '@react-native-community/cli-server-api';
 import { createDevMiddleware } from '@react-native/dev-middleware';
 import Fastify from 'fastify';
 import apiPlugin from './plugins/api';
@@ -71,7 +66,8 @@ export async function createServer(config: Server.Config) {
     serverBaseUrl: `http://${config.options.host}:${config.options.port}`,
     logger: instance.log,
     unstable_experiments: {
-      enableNewDebugger: config.experiments?.experimentalDebugger,
+      // @ts-expect-error removed in 0.76, keep this for backkwards compatibility
+      enableNewDebugger: true,
     },
   });
 
@@ -93,23 +89,9 @@ export async function createServer(config: Server.Config) {
   await instance.register(compilerPlugin, {
     delegate,
   });
-
-  // TODO: devtoolsPlugin and the following deprecated remote debugger middlewares should be removed after
-  //  the new (experimental) debugger is stable AND the remote debugger is finally removed from the React Native core.
-  //  When that happens remember to remove @react-native-community/cli-server-api & @react-native-community/cli-debugger-ui
-  //  from the dependencies.
   await instance.register(devtoolsPlugin, {
     options: config.options,
   });
-  instance.use('/debugger-ui', debuggerUIMiddleware());
-  instance.use('/open-url', openURLMiddleware);
-  instance.use(
-    '/open-stack-frame',
-    openStackFrameInEditorMiddleware({
-      watchFolders: [config.options.rootDir],
-    })
-  );
-
   await instance.register(symbolicatePlugin, {
     delegate,
   });

diff --git a/packages/dev-server/src/plugins/devtools/devtoolsPlugin.ts b/packages/dev-server/src/plugins/devtools/devtoolsPlugin.ts
@@ -1,12 +1,24 @@
+import {
+  openStackFrameInEditorMiddleware,
+  openURLMiddleware,
+} from '@react-native-community/cli-server-api';
 import type { FastifyInstance } from 'fastify';
 import fastifyPlugin from 'fastify-plugin';
-import open from 'open';
 import type { Server } from '../../types';
 
 async function devtoolsPlugin(
   instance: FastifyInstance,
   { options }: { options: Server.Options }
 ) {
+  instance.use('/open-url', openURLMiddleware);
+
+  instance.use(
+    '/open-stack-frame',
+    openStackFrameInEditorMiddleware({
+      watchFolders: [options.rootDir],
+    })
+  );
+
   instance.route({
     method: ['GET', 'POST', 'PUT'],
     url: '/reload',
@@ -15,34 +27,6 @@ async function devtoolsPlugin(
       reply.send('OK');
     },
   });
-
-  instance.route({
-    method: ['GET', 'POST', 'PUT'],
-    url: '/launch-js-devtools',
-    handler: async (request, reply) => {
-      const customDebugger = process.env.REACT_DEBUGGER;
-      if (customDebugger) {
-        // NOOP for now
-      } else if (!instance.wss.debuggerServer.isDebuggerConnected()) {
-        const url = `${options.https ? 'https' : 'http'}://${
-          options.host || 'localhost'
-        }:${options.port}/debugger-ui`;
-        try {
-          request.log.info({ msg: 'Opening debugger UI', url });
-          await open(url);
-        } catch (error) {
-          if (error) {
-            request.log.error({
-              msg: 'Cannot open debugger UI',
-              url,
-              error,
-            });
-          }
-        }
-      }
-      reply.send('OK');
-    },
-  });
 }
 
 export default fastifyPlugin(devtoolsPlugin, {

diff --git a/packages/dev-server/src/plugins/symbolicate/Symbolicator.ts b/packages/dev-server/src/plugins/symbolicate/Symbolicator.ts
@@ -78,7 +78,7 @@ export class Symbolicator {
     const frames: InputStackFrame[] = [];
     for (const frame of stack) {
       const { file } = frame;
-      if (file?.startsWith('http') && !file.includes('debuggerWorker')) {
+      if (file?.startsWith('http')) {
         frames.push(frame as InputStackFrame);
       }
     }

diff --git a/packages/dev-server/src/plugins/wss/servers/WebSocketDebuggerServer.ts b/packages/dev-server/src/plugins/wss/servers/WebSocketDebuggerServer.ts
diff --git a/packages/dev-server/src/plugins/wss/wssPlugin.ts b/packages/dev-server/src/plugins/wss/wssPlugin.ts
@@ -4,7 +4,6 @@ import type { Server } from '../../types';
 import { WebSocketRouter } from './WebSocketRouter';
 import { WebSocketServerAdapter } from './WebSocketServerAdapter';
 import { WebSocketApiServer } from './servers/WebSocketApiServer';
-import { WebSocketDebuggerServer } from './servers/WebSocketDebuggerServer';
 import { WebSocketDevClientServer } from './servers/WebSocketDevClientServer';
 import { WebSocketEventsServer } from './servers/WebSocketEventsServer';
 import { WebSocketHMRServer } from './servers/WebSocketHMRServer';
@@ -13,7 +12,6 @@ import { WebSocketMessageServer } from './servers/WebSocketMessageServer';
 declare module 'fastify' {
   interface FastifyInstance {
     wss: {
-      debuggerServer: WebSocketDebuggerServer;
       devClientServer: WebSocketDevClientServer;
       messageServer: WebSocketMessageServer;
       eventsServer: WebSocketEventsServer;
@@ -45,7 +43,6 @@ async function wssPlugin(
 ) {
   const router = new WebSocketRouter(instance);
 
-  const debuggerServer = new WebSocketDebuggerServer(instance);
   const devClientServer = new WebSocketDevClientServer(instance);
   const messageServer = new WebSocketMessageServer(instance);
   const eventsServer = new WebSocketEventsServer(instance, {
@@ -67,7 +64,6 @@ async function wssPlugin(
     options.endpoints?.[WS_DEBUGGER_URL]
   );
 
-  router.registerServer(debuggerServer);
   router.registerServer(devClientServer);
   router.registerServer(messageServer);
   router.registerServer(eventsServer);
@@ -77,7 +73,6 @@ async function wssPlugin(
   router.registerServer(debuggerConnectionServer);
 
   instance.decorate('wss', {
-    debuggerServer,
     devClientServer,
     messageServer,
     eventsServer,