Add 'j' to debug key handler (#39256)

Summary:
Pull Request resolved: #39256

## Context

RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#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: e3f208522c19857c565fa73f8b81d646a7e4ff31

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": {

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'),
   );
 }

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,
+        });
       }
     },
   };

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' &&