From 5331caf55d9d39601203f73d3301e574f95b8c02 Mon Sep 17 00:00:00 2001
From: Alex Hunt <huntie@meta.com>
Date: Sun, 3 Sep 2023 08:04:30 -0700
Subject: [PATCH] Add 'j' to debug key handler (#39256)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39256

## Context

RFC: Decoupling Flipper from React Native core: https://github.com/react-native-community/discussions-and-proposals/pull/641

## Changes

- Adds `j` key handler to open JS debugger (mirroring Expo CLI).
- Updates `isDevServerRunning` to consider server scheme and host.
- Reorders key prompts.

Changelog:
[General][Changed] Add 'j' to debug key trigger from CLI

Reviewed By: motiz88

Differential Revision: D48873335

fbshipit-source-id: 32b85b89ffc66aaa2be3219a464e308e5ca50ff6
---
 packages/community-cli-plugin/package.json     |  1 +
 .../src/commands/start/attachKeyHandlers.js    | 18 ++++++++++++++----
 .../src/commands/start/runServer.js            | 15 +++++++++++++--
 .../src/utils/isDevServerRunning.js            |  3 ++-
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/packages/community-cli-plugin/package.json b/packages/community-cli-plugin/package.json
index ed13c21b34ac6e..93d81be89c5454 100644
--- a/packages/community-cli-plugin/package.json
+++ b/packages/community-cli-plugin/package.json
@@ -31,6 +31,7 @@
     "metro": "0.78.0",
     "metro-config": "0.78.0",
     "metro-core": "0.78.0",
+    "node-fetch": "^2.2.0",
     "readline": "^1.3.0"
   },
   "devDependencies": {
diff --git a/packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js b/packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js
index a2c4dcb2828727..590e95aab3b629 100644
--- a/packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js
+++ b/packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js
@@ -17,19 +17,25 @@ import {
 } from '@react-native-community/cli-tools';
 import chalk from 'chalk';
 import execa from 'execa';
+import fetch from 'node-fetch';
 import readline from 'readline';
 import {KeyPressHandler} from '../../utils/KeyPressHandler';
 
 const CTRL_C = '\u0003';
 const CTRL_Z = '\u0026';
 
-export default function attachKeyHandlers(
+export default function attachKeyHandlers({
+  cliConfig,
+  devServerUrl,
+  messageSocket,
+}: {
   cliConfig: Config,
+  devServerUrl: string,
   messageSocket: $ReadOnly<{
     broadcast: (type: string, params?: Record<string, mixed> | null) => void,
     ...
   }>,
-) {
+}) {
   if (process.stdin.isTTY !== true) {
     logger.debug('Interactive mode is not supported in this environment');
     return;
@@ -77,6 +83,9 @@ export default function attachKeyHandlers(
           execaOptions,
         ).stdout?.pipe(process.stdout);
         break;
+      case 'j':
+        await fetch(devServerUrl + '/open-debugger', {method: 'POST'});
+        break;
       case CTRL_Z:
         process.emit('SIGTSTP', 'SIGTSTP');
         break;
@@ -93,10 +102,11 @@ export default function attachKeyHandlers(
   logger.log(
     '\n' +
       [
-        `${chalk.bold('r')} - reload app`,
-        `${chalk.bold('d')} - open Dev Menu`,
         `${chalk.bold('i')} - run on iOS`,
         `${chalk.bold('a')} - run on Android`,
+        `${chalk.bold('d')} - open Dev Menu`,
+        `${chalk.bold('j')} - open debugger`,
+        `${chalk.bold('r')} - reload app`,
       ].join('\n'),
   );
 }
diff --git a/packages/community-cli-plugin/src/commands/start/runServer.js b/packages/community-cli-plugin/src/commands/start/runServer.js
index 563e41962f5014..4072cec613d785 100644
--- a/packages/community-cli-plugin/src/commands/start/runServer.js
+++ b/packages/community-cli-plugin/src/commands/start/runServer.js
@@ -68,10 +68,17 @@ async function runServer(
     server: {port},
     watchFolders,
   } = metroConfig;
+  const scheme = args.https === true ? 'https' : 'http';
+  const devServerUrl = `${scheme}://${host}:${port}`;
 
   logger.info(`Welcome to React Native v${ctx.reactNativeVersion}`);
 
-  const serverStatus = await isDevServerRunning(host, port, projectRoot);
+  const serverStatus = await isDevServerRunning(
+    scheme,
+    host,
+    port,
+    projectRoot,
+  );
 
   if (serverStatus === 'matched_server_running') {
     logger.info(
@@ -124,7 +131,11 @@ async function runServer(
       }
       if (args.interactive && event.type === 'dep_graph_loaded') {
         logger.info('Dev server ready');
-        attachKeyHandlers(ctx, messageSocketEndpoint);
+        attachKeyHandlers({
+          cliConfig: ctx,
+          devServerUrl,
+          messageSocket: messageSocketEndpoint,
+        });
       }
     },
   };
diff --git a/packages/community-cli-plugin/src/utils/isDevServerRunning.js b/packages/community-cli-plugin/src/utils/isDevServerRunning.js
index 42239bb18194e0..7478857ba08188 100644
--- a/packages/community-cli-plugin/src/utils/isDevServerRunning.js
+++ b/packages/community-cli-plugin/src/utils/isDevServerRunning.js
@@ -23,6 +23,7 @@ import fetch from 'node-fetch';
  * - `unknown`: An error was encountered; attempt server creation anyway.
  */
 export default async function isDevServerRunning(
+  scheme: string,
   host: string,
   port: number,
   projectRoot: string,
@@ -34,7 +35,7 @@ export default async function isDevServerRunning(
       return 'not_running';
     }
 
-    const statusResponse = await fetch(`http://localhost:${port}/status`);
+    const statusResponse = await fetch(`${scheme}://${host}:${port}/status`);
     const body = await statusResponse.text();
 
     return body === 'packager-status:running' &&