From 02f870c8b029a26f35b063c1ff450871acf4857a Mon Sep 17 00:00:00 2001 From: Alex Hunt Date: Mon, 21 Aug 2023 10:50:38 -0700 Subject: [PATCH] Integrate dev-middleware into start command Differential Revision: https://internalfb.com/D47226421 fbshipit-source-id: 42eb5b82e5d9b98dd038db297fca66f86691dfa7 --- .flowconfig | 1 + .flowconfig.android | 1 + packages/community-cli-plugin/package.json | 1 + .../src/commands/start/attachKeyHandlers.js | 3 +- .../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 + scripts/run-ci-e2e-tests.js | 3 +- scripts/template/initialize.js | 8 ++++ 10 files changed, 48 insertions(+), 22 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/attachKeyHandlers.js b/packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js index 970441abe710b4..71604225ef0fa6 100644 --- a/packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js +++ b/packages/community-cli-plugin/src/commands/start/attachKeyHandlers.js @@ -30,7 +30,8 @@ export default function attachKeyHandlers( ... }>, ) { - if (process.stdin.isTTY !== true) { + // $FlowIgnore[method-unbinding] + if (process.stdin.setRawMode == null) { logger.debug('Interactive mode is not supported in this environment'); } 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'), diff --git a/scripts/run-ci-e2e-tests.js b/scripts/run-ci-e2e-tests.js index fbab0b3bc71160..4ec5db85037ea1 100644 --- a/scripts/run-ci-e2e-tests.js +++ b/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) { diff --git a/scripts/template/initialize.js b/scripts/template/initialize.js index f04907fe838f73..2638cac3d4cf3e 100644 --- a/scripts/template/initialize.js +++ b/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) => {