From 2fe609d1124596aa4fdb9ec1331e93c5fd3e1aef Mon Sep 17 00:00:00 2001 From: Alex Hunt Date: Fri, 18 Aug 2023 03:28:56 -0700 Subject: [PATCH] Integrate dev-middleware into start command (#39059) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/39059 ## Context RFC: Decoupling Flipper from React Native core: https://github.com/react-native-community/discussions-and-proposals/pull/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`: https://github.com/react-native-community/cli/pull/2055. Changelog: [Internal] Reviewed By: motiz88 Differential Revision: D47226421 fbshipit-source-id: 61a1c39d4f2d1a5ea0ffbc247b7b5f58e57ee8eb --- .flowconfig | 1 + .flowconfig.android | 1 + packages/community-cli-plugin/package.json | 1 + .../src/commands/start/runServer.js | 37 +++++++++---------- packages/react-native/package.json | 1 + packages/react-native/react-native.config.js | 13 ++++++- packages/rn-tester/metro.config.js | 2 + 7 files changed, 36 insertions(+), 20 deletions(-) diff --git a/.flowconfig b/.flowconfig index 6a1494abc3368d..bbd4bbebb77d94 100644 --- a/.flowconfig +++ b/.flowconfig @@ -47,6 +47,7 @@ munge_underscores=true module.name_mapper='^react-native$' -> '/packages/react-native/index.js' module.name_mapper='^react-native/\(.*\)$' -> '/packages/react-native\1' +module.name_mapper='^@react-native/dev-middleware$' -> '/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\)$' -> '/packages/react-native/Libraries/Image/RelativeImageStub' suppress_type=$FlowIssue diff --git a/.flowconfig.android b/.flowconfig.android index a04803f3651a4c..c265667a4278dd 100644 --- a/.flowconfig.android +++ b/.flowconfig.android @@ -47,6 +47,7 @@ munge_underscores=true module.name_mapper='^react-native$' -> '/packages/react-native/index.js' module.name_mapper='^react-native/\(.*\)$' -> '/packages/react-native\1' +module.name_mapper='^@react-native/dev-middleware$' -> '/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\)$' -> '/packages/react-native/Libraries/Image/RelativeImageStub' suppress_type=$FlowIssue diff --git a/packages/community-cli-plugin/package.json b/packages/community-cli-plugin/package.json index 027fe1d12be6a8..ae4ca20d5e0522 100644 --- a/packages/community-cli-plugin/package.json +++ b/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", diff --git a/packages/community-cli-plugin/src/commands/start/runServer.js b/packages/community-cli-plugin/src/commands/start/runServer.js index 6333094c20a3d3..a6397147f441ff 100644 --- a/packages/community-cli-plugin/src/commands/start/runServer.js +++ b/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,8 +98,8 @@ async function runServer(_argv: Array, ctx: Config, args: Args) { } const { - middleware, - websocketEndpoints, + middleware: communityMiddleware, + websocketEndpoints: communityWebsocketEndpoints, messageSocketEndpoint, eventsSocketEndpoint, } = createDevServerMiddleware({ @@ -108,19 +107,12 @@ async function runServer(_argv: Array, ctx: Config, args: Args) { 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, 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; diff --git a/packages/react-native/package.json b/packages/react-native/package.json index b0020399d0866b..e1d6b5a3f24741 100644 --- a/packages/react-native/package.json +++ b/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", diff --git a/packages/react-native/react-native.config.js b/packages/react-native/react-native.config.js index b5d4c5b6e3651c..73f60e93e2a2e9 100644 --- a/packages/react-native/react-native.config.js +++ b/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, diff --git a/packages/rn-tester/metro.config.js b/packages/rn-tester/metro.config.js index afea15c559afd5..3c41387cc19b65 100644 --- a/packages/rn-tester/metro.config.js +++ b/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'),