From 9733b6f342667a8b33dd327e22e15951bb5e9e5b Mon Sep 17 00:00:00 2001 From: Alex Hunt Date: Thu, 21 Sep 2023 13:29:26 +0100 Subject: [PATCH] Update remote debugging page title (#2083) --- packages/cli-debugger-ui/src/ui/index.html | 2 +- .../cli-server-api/src/devToolsMiddleware.ts | 75 +++++++++++++++++++ packages/cli-server-api/src/index.ts | 7 ++ packages/cli-tools/src/index.ts | 1 + packages/cli-tools/src/launchDebugger.ts | 16 ++++ 5 files changed, 100 insertions(+), 1 deletion(-) create mode 100644 packages/cli-server-api/src/devToolsMiddleware.ts create mode 100644 packages/cli-tools/src/launchDebugger.ts diff --git a/packages/cli-debugger-ui/src/ui/index.html b/packages/cli-debugger-ui/src/ui/index.html index 991c12b4e..e06c5d505 100644 --- a/packages/cli-debugger-ui/src/ui/index.html +++ b/packages/cli-debugger-ui/src/ui/index.html @@ -9,7 +9,7 @@ - React Native Debugger + React Native Remote Debugging (Deprecated) diff --git a/packages/cli-server-api/src/devToolsMiddleware.ts b/packages/cli-server-api/src/devToolsMiddleware.ts new file mode 100644 index 000000000..2c0bf4f2b --- /dev/null +++ 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; +}; + +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; + 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 index 5d7837501..a284ea432 100644 --- 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 index f25fcdb86..d0e1b92ba 100644 --- 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 new file mode 100644 index 000000000..3d23edaee --- /dev/null +++ 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;