Simplify key handling in start command (#46768)

Summary:
Pull Request resolved: #46768

Remove the `KeyPressHandler` util in favour of using the `process.stdin` APIs inline.

This reduces complexity (where we were effectively not using the conditional interception this previously implemented — see also #46416), and more closely mirrors our internal dev server setup.

Resolves #46571.

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D63255321

fbshipit-source-id: 5cdf7a480053a2215fa50f544733f443bab07ef2

packages/community-cli-plugin/package.json

@@ -25,6 +25,7 @@
     "@react-native/dev-middleware": "0.77.0-main",
     "@react-native/metro-babel-transformer": "0.77.0-main",
     "chalk": "^4.0.0",
+    "invariant": "^2.2.4",
     "metro": "^0.81.0-alpha.2",
     "metro-config": "^0.81.0-alpha.2",
     "metro-core": "^0.81.0-alpha.2",

packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js

@@ -12,11 +12,13 @@
 import type {Config} from '@react-native-community/cli-types';
 import type TerminalReporter from 'metro/src/lib/TerminalReporter';
 
-import {KeyPressHandler} from '../../utils/KeyPressHandler';
 import {logger} from '../../utils/logger';
 import OpenDebuggerKeyboardHandler from './OpenDebuggerKeyboardHandler';
 import chalk from 'chalk';
 import {spawn} from 'child_process';
+import invariant from 'invariant';
+import readline from 'readline';
+import {ReadStream} from 'tty';
 
 const CTRL_C = '\u0003';
 const CTRL_D = '\u0004';
@@ -33,6 +35,14 @@ const throttle = (callback: () => void, timeout: number) => {
   };
 };
 
+type KeyEvent = {
+  sequence: string,
+  name: string,
+  ctrl: boolean,
+  meta: boolean,
+  shift: boolean,
+};
+
 const spawnOptions = {
   env: {...process.env, FORCE_COLOR: chalk.supportsColor ? 'true' : 'false'},
 };
@@ -56,6 +66,9 @@ export default function attachKeyHandlers({
     return;
   }
 
+  readline.emitKeypressEvents(process.stdin);
+  setRawMode(true);
+
   const reload = throttle(() => {
     logger.info('Reloading connected app(s)...');
     messageSocket.broadcast('reload', null);
@@ -66,12 +79,14 @@ export default function attachKeyHandlers({
     devServerUrl,
   });
 
-  const onPress = async (key: string) => {
-    if (openDebuggerKeyboardHandler.maybeHandleTargetSelection(key)) {
+  process.stdin.on('keypress', (str: string, key: KeyEvent) => {
+    logger.debug(`Key pressed: ${key.sequence}`);
+
+    if (openDebuggerKeyboardHandler.maybeHandleTargetSelection(key.name)) {
       return;
     }
 
-    switch (key.toLowerCase()) {
+    switch (key.sequence) {
       case 'r':
         reload();
         break;
@@ -104,21 +119,19 @@ export default function attachKeyHandlers({
         ).stdout?.pipe(process.stdout);
         break;
       case 'j':
-        await openDebuggerKeyboardHandler.handleOpenDebugger();
+        // eslint-disable-next-line no-void
+        void openDebuggerKeyboardHandler.handleOpenDebugger();
         break;
       case CTRL_C:
       case CTRL_D:
         openDebuggerKeyboardHandler.dismiss();
         logger.info('Stopping server');
-        keyPressHandler.stopInterceptingKeyStrokes();
+        setRawMode(false);
+        process.stdin.pause();
         process.emit('SIGINT');
         process.exit();
     }
-  };
-
-  const keyPressHandler = new KeyPressHandler(onPress);
-  keyPressHandler.createInteractionListener();
-  keyPressHandler.startInterceptingKeyStrokes();
+  });
 
   logger.log(
     [
@@ -132,3 +145,11 @@ export default function attachKeyHandlers({
     ].join('\n'),
   );
 }
+
+function setRawMode(enable: boolean) {
+  invariant(
+    process.stdin instanceof ReadStream,
+    'process.stdin must be a readable stream to modify raw mode',
+  );
+  process.stdin.setRawMode(enable);
+}