Sync latest cli-plugin-metro changes

Summary:
Update `cli-commands` package to reflect latest source `react-native-community/cli-plugin-metro` changes.

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.

- react-native-community/cli#2021
- react-native-community/cli#2024
- react-native-community/cli#2043
- react-native-community/cli#2047

### To do

- [ ] Bump CLI dependencies when next alpha published.
- [ ] 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: 964902e7b1bdd9a5ca16768d6b85ef6d9018b44c

flow-typed/npm/@react-native-community/cli-tools_v12.x.x.js

@@ -10,12 +10,42 @@
  */
 
 declare module '@react-native-community/cli-tools' {
+  declare export function addInteractionListener(
+    callback: (options: {pause: boolean, canEscape?: boolean}) => void,
+  ): void;
+
+  declare export function askForPortChange(
+    port: number,
+    nextPort: number,
+  ): Promise<{change: boolean}>;
+
   declare export class CLIError extends Error {
     constructor(msg: string, originalError?: Error | mixed | string): this;
   }
 
+  declare export function getNextPort(
+    port: number,
+    root: string,
+  ): Promise<{
+    start: boolean,
+    nextPort: number,
+  }>;
+
+  declare export function getPidFromPort(port: number): number | null;
+
   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 +59,9 @@ declare module '@react-native-community/cli-tools' {
     enable: () => void,
   }>;
 
+  declare export function logAlreadyRunningBundler(port: number): void;
+  declare export function logChangePortInstructions(port: number): void;
+
   declare export function resolveNodeModuleDir(
     root: string,
     packageName: string,

packages/community-cli-plugin/package.json

@@ -19,22 +19,22 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist",
-    "launchPackager.bat",
-    "launchPackager.command"
+    "dist"
   ],
   "dependencies": {
     "@react-native-community/cli-server-api": "12.0.0-alpha.7",
     "@react-native-community/cli-tools": "12.0.0-alpha.7",
     "@react-native/metro-babel-transformer": "^0.73.11",
     "chalk": "^4.0.0",
     "execa": "^5.1.1",
-    "metro": "0.77.0",
-    "metro-config": "0.77.0",
-    "metro-core": "0.77.0",
-    "metro-resolver": "0.77.0",
+    "metro": "0.78.0",
+    "metro-config": "0.78.0",
+    "metro-core": "0.78.0",
     "readline": "^1.3.0"
   },
+  "devDependencies": {
+    "metro-resolver": "0.78.0"
+  },
   "engines": {
     "node": ">=18"
   }

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

@@ -93,5 +93,3 @@ export default {
     },
   ],
 };
-
-export {startServerInNewWindow} from './startServerInNewWindow';

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

@@ -16,16 +16,25 @@ 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,
+  getNextPort,
+  askForPortChange,
+  logAlreadyRunningBundler,
+  logChangePortInstructions,
+} 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,6 +57,39 @@ export type Args = {
 };
 
 async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
+  let port = args.port ?? 8081;
+  const packagerStatus = await isPackagerRunning(port);
+
+  const handlePortUnavailable = async () => {
+    const {nextPort, start} = await getNextPort(port, ctx.root);
+    if (!start) {
+      logAlreadyRunningBundler(nextPort);
+      process.exit();
+    } else {
+      const {change} = await askForPortChange(port, nextPort);
+      if (change) {
+        port = nextPort;
+      } else {
+        logChangePortInstructions(port);
+        process.exit();
+      }
+    }
+  };
+
+  if (
+    typeof packagerStatus === 'object' &&
+    packagerStatus.status === 'running'
+  ) {
+    if (packagerStatus.root === ctx.root) {
+      logAlreadyRunningBundler(port);
+      process.exit();
+    } else {
+      await handlePortUnavailable();
+    }
+  } else if (packagerStatus === 'unrecognized') {
+    await handlePortUnavailable();
+  }
+
   let reportEvent: (event: any) => void;
   const terminal = new Terminal(process.stdout);
   const ReporterImpl = getReporterImpl(args.customLogReporterPath);
@@ -64,7 +106,7 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
   const metroConfig = await loadMetroConfig(ctx, {
     config: args.config,
     maxWorkers: args.maxWorkers,
-    port: args.port,
+    port: port,
     resetCache: args.resetCache,
     watchFolders: args.watchFolders,
     projectRoot: args.projectRoot,
@@ -131,6 +173,7 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
   serverInstance.keepAliveTimeout = 30000;
 
   await version.logIfUpdateAvailable(ctx.root);
+  logger.info(`Started dev server at ${chalk.bold(String(port))}`);
 }
 
 function getReporterImpl(customLogReporterPath?: string): TerminalReporter {