Update remote debugging page title (#2083)

react-native-community · Sep 21, 2023 · 9733b6f · 9733b6f
1 parent 18ee170
commit 9733b6f
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 1 deletion.
diff --git a/packages/cli-debugger-ui/src/ui/index.html b/packages/cli-debugger-ui/src/ui/index.html
@@ -9,7 +9,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
-    <title>React Native Debugger</title>
+    <title>React Native Remote Debugging (Deprecated)</title>
     <script src="./index.js"></script>
   </head>
   <body>

diff --git a/packages/cli-server-api/src/devToolsMiddleware.ts b/packages/cli-server-api/src/devToolsMiddleware.ts
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import http from 'http';
+import {launchDebugger, logger} from '@react-native-community/cli-tools';
+import {exec} from 'child_process';
+
+function launchDefaultDebugger(
+  host: string | undefined,
+  port: number,
+  args = '',
+) {
+  const hostname = host || 'localhost';
+  const debuggerURL = `http://${hostname}:${port}/debugger-ui${args}`;
+  logger.info('Launching Dev Tools...');
+  launchDebugger(debuggerURL);
+}
+
+function escapePath(pathname: string) {
+  // " Can escape paths with spaces in OS X, Windows, and *nix
+  return `"${pathname}"`;
+}
+
+type LaunchDevToolsOptions = {
+  host?: string;
+  port: number;
+  watchFolders: ReadonlyArray<string>;
+};
+
+function launchDevTools(
+  {host, port, watchFolders}: LaunchDevToolsOptions,
+  isDebuggerConnected: () => boolean,
+) {
+  // Explicit config always wins
+  const customDebugger = process.env.REACT_DEBUGGER;
+  if (customDebugger) {
+    startCustomDebugger({watchFolders, customDebugger});
+  } else if (!isDebuggerConnected()) {
+    // Debugger is not yet open; we need to open a session
+    launchDefaultDebugger(host, port);
+  }
+}
+
+function startCustomDebugger({
+  watchFolders,
+  customDebugger,
+}: {
+  watchFolders: ReadonlyArray<string>;
+  customDebugger: string;
+}) {
+  const folders = watchFolders.map(escapePath).join(' ');
+  const command = `${customDebugger} ${folders}`;
+  logger.info('Starting custom debugger by executing:', command);
+  exec(command, function (error) {
+    if (error !== null) {
+      logger.error('Error while starting custom debugger:', error.stack || '');
+    }
+  });
+}
+
+export default function getDevToolsMiddleware(
+  options: LaunchDevToolsOptions,
+  isDebuggerConnected: () => boolean,
+) {
+  return function devToolsMiddleware(
+    _req: http.IncomingMessage,
+    res: http.ServerResponse,
+  ) {
+    launchDevTools(options, isDebuggerConnected);
+    res.end('OK');
+  };
+}
diff --git a/packages/cli-server-api/src/index.ts b/packages/cli-server-api/src/index.ts
@@ -7,6 +7,7 @@ import nocache from 'nocache';
 import serveStatic from 'serve-static';
 import {debuggerUIMiddleware} from '@react-native-community/cli-debugger-ui';
 
+import devToolsMiddleware from './devToolsMiddleware';
 import indexPageMiddleware from './indexPageMiddleware';
 import openStackFrameInEditorMiddleware from './openStackFrameInEditorMiddleware';
 import openURLMiddleware from './openURLMiddleware';
@@ -19,6 +20,7 @@ import createDebuggerProxyEndpoint from './websocket/createDebuggerProxyEndpoint
 import createMessageSocketEndpoint from './websocket/createMessageSocketEndpoint';
 import createEventsSocketEndpoint from './websocket/createEventsSocketEndpoint';
 
+export {devToolsMiddleware};
 export {indexPageMiddleware};
 export {openStackFrameInEditorMiddleware};
 export {openURLMiddleware};
@@ -35,6 +37,7 @@ type MiddlewareOptions = {
 
 export function createDevServerMiddleware(options: MiddlewareOptions) {
   const debuggerProxyEndpoint = createDebuggerProxyEndpoint();
+  const isDebuggerConnected = debuggerProxyEndpoint.isDebuggerConnected;
 
   const messageSocketEndpoint = createMessageSocketEndpoint();
   const broadcast = messageSocketEndpoint.broadcast;
@@ -47,6 +50,10 @@ export function createDevServerMiddleware(options: MiddlewareOptions) {
     .use(compression())
     .use(nocache())
     .use('/debugger-ui', debuggerUIMiddleware())
+    .use(
+      '/launch-js-devtools',
+      devToolsMiddleware(options, isDebuggerConnected),
+    )
     .use('/open-stack-frame', openStackFrameInEditorMiddleware(options))
     .use('/open-url', openURLMiddleware)
     .use('/status', statusPageMiddleware)

diff --git a/packages/cli-tools/src/index.ts b/packages/cli-tools/src/index.ts
@@ -3,6 +3,7 @@ export {default as isPackagerRunning} from './isPackagerRunning';
 export {default as getDefaultUserTerminal} from './getDefaultUserTerminal';
 export {fetch, fetchToTemp} from './fetch';
 export {default as launchDefaultBrowser} from './launchDefaultBrowser';
+export {default as launchDebugger} from './launchDebugger';
 export {default as launchEditor} from './launchEditor';
 export * as version from './releaseChecker';
 export {default as resolveNodeModuleDir} from './resolveNodeModuleDir';

diff --git a/packages/cli-tools/src/launchDebugger.ts b/packages/cli-tools/src/launchDebugger.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import launchDefaultBrowser from './launchDefaultBrowser';
+
+async function launchDebugger(url: string) {
+  return launchDefaultBrowser(url);
+}
+
+export default launchDebugger;