Integrate dev-middleware into start command (facebook#39059)

Summary:
Pull Request resolved: facebook#39059

## Context

RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641

## Changes

This change:
- Links the new `react-native/dev-middleware` endpoints into the recently migrated `react-native start` command.
- Adds `react-native/community-cli-plugin` (the migrated [`cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) as a dependency of `react-native`, and hooks in these versions of the `start`, `bundle`, and `ram-bundle` commands via `react-native.config.js`.

Functionally, this means that the new `/open-debugger` endpoint is available on the dev server started by `react-native start` (not yet linked into any UI).

After this PR is merged, the new `community-cli-plugin` package is "linked" and we can remove `cli-plugin-metro` from `react-native-community/cli`: react-native-community/cli#2055.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D47226421

fbshipit-source-id: 2b96b50591cd0529e3b7f73732f1f8057034860f

Author: huntie

packages/community-cli-plugin/package.json

@@ -22,6 +22,7 @@
     "dist"
   ],
   "dependencies": {
+    "@react-native/dev-middleware": "^0.73.0",
     "@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",

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

@@ -13,13 +13,12 @@ import type {Config} from '@react-native-community/cli-types';
 import type {Reporter} from 'metro/src/lib/reporting';
 import type {TerminalReportableEvent} from 'metro/src/lib/TerminalReporter';
 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 {createDevMiddleware} from '@react-native/dev-middleware';
 import {
   createDevServerMiddleware,
   indexPageMiddleware,
@@ -99,28 +98,21 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
   }
 
   const {
-    middleware,
-    websocketEndpoints,
+    middleware: communityMiddleware,
+    websocketEndpoints: communityWebsocketEndpoints,
     messageSocketEndpoint,
     eventsSocketEndpoint,
   } = createDevServerMiddleware({
     host: args.host,
     port: metroConfig.server.port,
     watchFolders: metroConfig.watchFolders,
   });
-  middleware.use(indexPageMiddleware);
-
-  const customEnhanceMiddleware = metroConfig.server.enhanceMiddleware;
-  // $FlowIgnore[cannot-write] Assigning to readonly property
-  metroConfig.server.enhanceMiddleware = (
-    metroMiddleware: Middleware,
-    server: Server,
-  ) => {
-    if (customEnhanceMiddleware) {
-      return middleware.use(customEnhanceMiddleware(metroMiddleware, server));
-    }
-    return middleware.use(metroMiddleware);
-  };
+  const {middleware, websocketEndpoints} = createDevMiddleware({
+    host: args.host?.length ? args.host : 'localhost',
+    port: metroConfig.server.port,
+    projectRoot: metroConfig.projectRoot,
+    logger,
+  });
 
   let reportEvent: (event: TerminalReportableEvent) => void;
   const terminal = new Terminal(process.stdout);
@@ -145,8 +137,15 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
     secure: args.https,
     secureCert: args.cert,
     secureKey: args.key,
-    // $FlowFixMe[incompatible-call] Incompatibly defined WebSocketServer type
-    websocketEndpoints,
+    unstable_extraMiddleware: [
+      communityMiddleware,
+      indexPageMiddleware,
+      middleware,
+    ],
+    websocketEndpoints: {
+      ...communityWebsocketEndpoints,
+      ...websocketEndpoints,
+    },
   });
 
   reportEvent = eventsSocketEndpoint.reportEvent;

packages/react-native/package.json

@@ -96,6 +96,7 @@
     "@react-native-community/cli-platform-android": "12.0.0-alpha.9",
     "@react-native-community/cli-platform-ios": "12.0.0-alpha.9",
     "@react-native/assets-registry": "^0.73.0",
+    "@react-native/community-cli-plugin": "^0.73.0",
     "@react-native/codegen": "^0.73.0",
     "@react-native/gradle-plugin": "^0.73.0",
     "@react-native/js-polyfills": "^0.73.0",

packages/react-native/react-native.config.js

@@ -11,9 +11,20 @@
 
 const ios = require('@react-native-community/cli-platform-ios');
 const android = require('@react-native-community/cli-platform-android');
+const {
+  bundleCommand,
+  ramBundleCommand,
+  startCommand,
+} = require('@react-native/community-cli-plugin');
 
 module.exports = {
-  commands: [...ios.commands, ...android.commands],
+  commands: [
+    ...ios.commands,
+    ...android.commands,
+    bundleCommand,
+    ramBundleCommand,
+    startCommand,
+  ],
   platforms: {
     ios: {
       projectConfig: ios.projectConfig,

packages/rn-tester/metro.config.js

@@ -24,6 +24,8 @@ const config = {
   watchFolders: [
     path.resolve(__dirname, '../../node_modules'),
     path.resolve(__dirname, '../assets'),
+    path.resolve(__dirname, '../community-cli-plugin'),
+    path.resolve(__dirname, '../dev-middleware'),
     path.resolve(__dirname, '../normalize-color'),
     path.resolve(__dirname, '../polyfills'),
     path.resolve(__dirname, '../react-native'),