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
- Upgrade to RN CLI `12.0.0-alpha.9`, including Metro bump to `0.78.0`.

### 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: ae6c00944fe8bcfe6524dddfed8e18fc96e29945

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,

package.json

@@ -88,8 +88,8 @@
     "jest": "^29.2.1",
     "jest-junit": "^10.0.0",
     "jscodeshift": "^0.14.0",
-    "metro-babel-register": "0.77.0",
-    "metro-memory-fs": "0.77.0",
+    "metro-babel-register": "0.78.0",
+    "metro-memory-fs": "0.78.0",
     "micromatch": "^4.0.4",
     "mkdirp": "^0.5.1",
     "mock-fs": "^5.1.4",

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-community/cli-server-api": "12.0.0-alpha.9",
+    "@react-native-community/cli-tools": "12.0.0-alpha.9",
     "@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,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