Integrate dev-middleware into start command (#39059)

Summary:
Pull Request resolved: #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: 892691568dd191ca4702460d75415a79de3673d3

Author: huntie

.flowconfig

@@ -47,6 +47,7 @@ munge_underscores=true
 
 module.name_mapper='^react-native$' -> '<PROJECT_ROOT>/packages/react-native/index.js'
 module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/packages/react-native\1'
+module.name_mapper='^@react-native/dev-middleware$' -> '<PROJECT_ROOT>/packages/dev-middleware'
 module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/packages/react-native/Libraries/Image/RelativeImageStub'
 
 suppress_type=$FlowIssue

.flowconfig.android

@@ -47,6 +47,7 @@ munge_underscores=true
 
 module.name_mapper='^react-native$' -> '<PROJECT_ROOT>/packages/react-native/index.js'
 module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/packages/react-native\1'
+module.name_mapper='^@react-native/dev-middleware$' -> '<PROJECT_ROOT>/packages/dev-middleware'
 module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/packages/react-native/Libraries/Image/RelativeImageStub'
 
 suppress_type=$FlowIssue

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'),

scripts/run-ci-e2e-tests.js

@@ -88,7 +88,8 @@ try {
   describe('Set up Verdaccio');
   VERDACCIO_PID = setupVerdaccio(ROOT, VERDACCIO_CONFIG_PATH);
 
-  describe('Publish packages');
+  describe('Build and publish packages');
+  exec('node ./scripts/build/build.js', {cwd: ROOT});
   forEachPackage(
     (packageAbsolutePath, packageRelativePathFromRoot, packageManifest) => {
       if (packageManifest.private) {

scripts/template/initialize.js

@@ -11,6 +11,7 @@
 
 const yargs = require('yargs');
 const {execSync} = require('child_process');
+const path = require('path');
 
 const forEachPackage = require('../monorepo/for-each-package');
 const setupVerdaccio = require('../setup-verdaccio');
@@ -41,6 +42,7 @@ const {argv} = yargs
 
 const {reactNativeRootPath, templateName, templateConfigPath, directory} = argv;
 
+const REPO_ROOT = path.resolve(__dirname, '../..');
 const VERDACCIO_CONFIG_PATH = `${reactNativeRootPath}/.circleci/verdaccio.yml`;
 
 async function install() {
@@ -51,6 +53,12 @@ async function install() {
   try {
     process.stdout.write('Bootstrapped Verdaccio \u2705\n');
 
+    process.stdout.write('Building packages...\n');
+    execSync('node ./scripts/build/build.js', {
+      cwd: REPO_ROOT,
+      stdio: [process.stdin, process.stdout, process.stderr],
+    });
+
     process.stdout.write('Starting to publish every package...\n');
     forEachPackage(
       (packageAbsolutePath, packageRelativePathFromRoot, packageManifest) => {