Sync latest cli-plugin-metro changes (facebook#38944)

Summary: Pull Request resolved: facebook#38944 - Update `cli-commands` package to reflect latest source `react-native-community/cli-plugin-metro` changes. - react-native-community/cli#2021 - react-native-community/cli#2024 - react-native-community/cli#2043 - react-native-community/cli#2047 ### To do WARNING: ~~This PR is non-functional until the next CLI alpha is published and bumped in `package.json` — since it depends on corresponding new APIs in `react-native-community/cli-tools` (react-native-community/cli#2021). This package (and the upcoming work which integrates it) has been tested against locally linked copies of latest CLI.~~ - [x] Bump CLI dependencies when next alpha published. - [x] Ensure Metro bump from `0.77.0` to `0.78.0` is consistently applied with this. Changelog: [Internal] Reviewed By: motiz88 Differential Revision: D48066179 fbshipit-source-id: c47d14af132089796724f0375f3795488a90f88d
huntie · Aug 14, 2023 · e312065 · e312065
1 parent 23bc1d2
commit e312065
Show file tree

Hide file tree

Showing 10 changed files with 215 additions and 211 deletions.
diff --git a/flow-typed/npm/@react-native-community/cli-tools_v12.x.x.js b/flow-typed/npm/@react-native-community/cli-tools_v12.x.x.js
@@ -10,12 +10,38 @@
  */
 
 declare module '@react-native-community/cli-tools' {
+  declare export function addInteractionListener(
+    callback: (options: {pause: boolean, canEscape?: boolean}) => void,
+  ): void;
+
   declare export class CLIError extends Error {
     constructor(msg: string, originalError?: Error | mixed | string): this;
   }
 
+  declare export function getPidFromPort(port: number): number | null;
+
+  declare export function handlePortUnavailable(
+    initialPort: number,
+    projectRoot: string,
+    initialPackager?: boolean,
+  ): Promise<{
+    port: number,
+    packager: boolean,
+  }>;
+
   declare export function hookStdout(callback: Function): () => void;
 
+  declare export function isPackagerRunning(
+    packagerPort: string | number | void,
+  ): Promise<
+    | {
+        status: 'running',
+        root: string,
+      }
+    | 'not_running'
+    | 'unrecognized',
+  >;
+
   declare export const logger: $ReadOnly<{
     success: (...message: Array<string>) => void,
     info: (...message: Array<string>) => void,
@@ -29,6 +55,8 @@ declare module '@react-native-community/cli-tools' {
     enable: () => void,
   }>;
 
+  declare export function logAlreadyRunningBundler(port: number): void;
+
   declare export function resolveNodeModuleDir(
     root: string,
     packageName: string,

diff --git a/packages/community-cli-plugin/launchPackager.bat b/packages/community-cli-plugin/launchPackager.bat
diff --git a/packages/community-cli-plugin/launchPackager.command b/packages/community-cli-plugin/launchPackager.command
diff --git a/packages/community-cli-plugin/package.json b/packages/community-cli-plugin/package.json
@@ -19,9 +19,7 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist",
-    "launchPackager.bat",
-    "launchPackager.command"
+    "dist"
   ],
   "dependencies": {
     "@react-native-community/cli-server-api": "12.0.0-alpha.9",

diff --git a/packages/community-cli-plugin/src/commands/start/index.js b/packages/community-cli-plugin/src/commands/start/index.js
@@ -93,5 +93,3 @@ export default {
     },
   ],
 };
-
-export {startServerInNewWindow} from './startServerInNewWindow';
diff --git a/packages/community-cli-plugin/src/commands/start/runServer.js b/packages/community-cli-plugin/src/commands/start/runServer.js
@@ -16,16 +16,23 @@ import typeof TerminalReporter from 'metro/src/lib/TerminalReporter';
 import type Server from 'metro/src/Server';
 import type {Middleware} from 'metro-config';
 
+import chalk from 'chalk';
 import Metro from 'metro';
 import {Terminal} from 'metro-core';
 import path from 'path';
 import {
   createDevServerMiddleware,
   indexPageMiddleware,
 } from '@react-native-community/cli-server-api';
+import {
+  isPackagerRunning,
+  logger,
+  version,
+  logAlreadyRunningBundler,
+  handlePortUnavailable,
+} from '@react-native-community/cli-tools';
 
 import loadMetroConfig from '../../utils/loadMetroConfig';
-import {version} from '@react-native-community/cli-tools';
 import enableWatchMode from './watchMode';
 
 export type Args = {
@@ -48,7 +55,43 @@ export type Args = {
 };
 
 async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
-  let reportEvent: (event: any) => void;
+  let port = args.port ?? 8081;
+  let packager = true;
+  const packagerStatus = await isPackagerRunning(port);
+
+  if (
+    typeof packagerStatus === 'object' &&
+    packagerStatus.status === 'running'
+  ) {
+    if (packagerStatus.root === ctx.root) {
+      packager = false;
+      logAlreadyRunningBundler(port);
+    } else {
+      const result = await handlePortUnavailable(port, ctx.root, packager);
+      [port, packager] = [result.port, result.packager];
+    }
+  } else if (packagerStatus === 'unrecognized') {
+    const result = await handlePortUnavailable(port, ctx.root, packager);
+    [port, packager] = [result.port, result.packager];
+  }
+
+  if (packager === false) {
+    process.exit();
+  }
+
+  logger.info(`Starting dev server on port ${chalk.bold(String(port))}`);
+
+  const metroConfig = await loadMetroConfig(ctx, {
+    config: args.config,
+    maxWorkers: args.maxWorkers,
+    port: port,
+    resetCache: args.resetCache,
+    watchFolders: args.watchFolders,
+    projectRoot: args.projectRoot,
+    sourceExts: args.sourceExts,
+  });
+
+  let reportEvent: (event: TerminalReportableEvent) => void;
   const terminal = new Terminal(process.stdout);
   const ReporterImpl = getReporterImpl(args.customLogReporterPath);
   const terminalReporter = new ReporterImpl(terminal);
@@ -60,17 +103,8 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
       }
     },
   };
-
-  const metroConfig = await loadMetroConfig(ctx, {
-    config: args.config,
-    maxWorkers: args.maxWorkers,
-    port: args.port,
-    resetCache: args.resetCache,
-    watchFolders: args.watchFolders,
-    projectRoot: args.projectRoot,
-    sourceExts: args.sourceExts,
-    reporter,
-  });
+  // $FlowIgnore[cannot-write] Assigning to readonly property
+  metroConfig.reporter = reporter;
 
   if (args.assetPlugins) {
     // $FlowIgnore[cannot-write] Assigning to readonly property

diff --git a/packages/community-cli-plugin/src/commands/start/startServerInNewWindow.js b/packages/community-cli-plugin/src/commands/start/startServerInNewWindow.js
diff --git a/packages/community-cli-plugin/src/commands/start/watchMode.js b/packages/community-cli-plugin/src/commands/start/watchMode.js
@@ -12,9 +12,17 @@
 import type {Config} from '@react-native-community/cli-types';
 
 import readline from 'readline';
-import {logger, hookStdout} from '@react-native-community/cli-tools';
+import {
+  addInteractionListener,
+  logger,
+  hookStdout,
+} from '@react-native-community/cli-tools';
 import execa from 'execa';
 import chalk from 'chalk';
+import {KeyPressHandler} from '../../utils/KeyPressHandler';
+
+const CTRL_C = '\u0003';
+const CTRL_Z = '\u0026';
 
 function printWatchModeInstructions() {
   logger.log(
@@ -59,43 +67,44 @@ function enableWatchMode(
     }
   });
 
-  process.stdin.on(
-    'keypress',
-    (_key: string, data: {ctrl: boolean, name: string}) => {
-      const {ctrl, name} = data;
-      if (ctrl === true) {
-        switch (name) {
-          case 'c':
-            process.exit();
-            break;
-          case 'z':
-            process.emit('SIGTSTP', 'SIGTSTP');
-            break;
-        }
-      } else if (name === 'r') {
+  const onPressAsync = async (key: string) => {
+    switch (key) {
+      case 'r':
         messageSocket.broadcast('reload', null);
         logger.info('Reloading app...');
-      } else if (name === 'd') {
+        break;
+      case 'd':
         messageSocket.broadcast('devMenu', null);
-        logger.info('Opening developer menu...');
-      } else if (name === 'i' || name === 'a') {
-        logger.info(
-          `Opening the app on ${name === 'i' ? 'iOS' : 'Android'}...`,
-        );
-        const params =
-          name === 'i'
-            ? ctx.project.ios?.watchModeCommandParams
-            : ctx.project.android?.watchModeCommandParams;
+        logger.info('Opening Dev Menu...');
+        break;
+      case 'i':
+        logger.info('Opening app on iOS...');
         execa('npx', [
           'react-native',
-          name === 'i' ? 'run-ios' : 'run-android',
-          ...(params ?? []),
+          'run-ios',
+          ...(ctx.project.ios?.watchModeCommandParams ?? []),
         ]).stdout?.pipe(process.stdout);
-      } else {
-        console.log(_key);
-      }
-    },
-  );
+        break;
+      case 'a':
+        logger.info('Opening app on Android...');
+        execa('npx', [
+          'react-native',
+          'run-android',
+          ...(ctx.project.android?.watchModeCommandParams ?? []),
+        ]).stdout?.pipe(process.stdout);
+        break;
+      case CTRL_Z:
+        process.emit('SIGTSTP', 'SIGTSTP');
+        break;
+      case CTRL_C:
+        process.exit();
+    }
+  };
+
+  const keyPressHandler = new KeyPressHandler(onPressAsync);
+  const listener = keyPressHandler.createInteractionListener();
+  addInteractionListener(listener);
+  keyPressHandler.startInterceptingKeyStrokes();
 }
 
 export default enableWatchMode;