diff --git a/packages/cli-plugin-metro/src/commands/start/runServer.ts b/packages/cli-plugin-metro/src/commands/start/runServer.ts index efaf684b1..642da78f0 100644 --- a/packages/cli-plugin-metro/src/commands/start/runServer.ts +++ b/packages/cli-plugin-metro/src/commands/start/runServer.ts @@ -6,6 +6,7 @@ */ import Metro from 'metro'; +import type {Reporter, ReportableEvent} from 'metro'; import type Server from 'metro/src/Server'; import type {Middleware} from 'metro-config'; import {Terminal} from 'metro-core'; @@ -40,19 +41,6 @@ export type Args = { }; async function runServer(_argv: Array, ctx: Config, args: Args) { - let reportEvent: ((event: any) => void) | undefined; - const terminal = new Terminal(process.stdout); - const ReporterImpl = getReporterImpl(args.customLogReporterPath); - const terminalReporter = new ReporterImpl(terminal); - const reporter = { - update(event: any) { - terminalReporter.update(event); - if (reportEvent) { - reportEvent(event); - } - }, - }; - const metroConfig = await loadMetroConfig(ctx, { config: args.config, maxWorkers: args.maxWorkers, @@ -61,8 +49,14 @@ async function runServer(_argv: Array, ctx: Config, args: Args) { watchFolders: args.watchFolders, projectRoot: args.projectRoot, sourceExts: args.sourceExts, - reporter, }); + // if customLogReporterPath is provided, use the custom reporter, otherwise use the default one + let reporter: Reporter = metroConfig.reporter; + if (args.customLogReporterPath) { + const terminal = new Terminal(process.stdout); + const ReporterImpl = getReporterImpl(args.customLogReporterPath); + reporter = new ReporterImpl(terminal); + } if (args.assetPlugins) { // @ts-ignore - assigning to readonly property @@ -95,16 +89,26 @@ async function runServer(_argv: Array, ctx: Config, args: Args) { return middleware.use(metroMiddleware); }; - const serverInstance = await Metro.runServer(metroConfig, { - host: args.host, - secure: args.https, - secureCert: args.cert, - secureKey: args.key, - // @ts-ignore - ws.Server types are incompatible - websocketEndpoints, - }); - - reportEvent = eventsSocketEndpoint.reportEvent; + const serverInstance = await Metro.runServer( + { + ...metroConfig, + reporter: { + update(event: ReportableEvent) { + reporter.update(event); + // Add reportEvent to the reporter update method. + eventsSocketEndpoint.reportEvent(event); + }, + }, + }, + { + host: args.host, + secure: args.https, + secureCert: args.cert, + secureKey: args.key, + // @ts-ignore - ws.Server types are incompatible + websocketEndpoints, + }, + ); if (args.interactive) { enableWatchMode(messageSocketEndpoint, ctx); @@ -125,10 +129,7 @@ async function runServer(_argv: Array, ctx: Config, args: Args) { await version.logIfUpdateAvailable(ctx.root); } -function getReporterImpl(customLogReporterPath: string | undefined) { - if (customLogReporterPath === undefined) { - return require('metro/src/lib/TerminalReporter'); - } +function getReporterImpl(customLogReporterPath: string) { try { // First we let require resolve it, so we can require packages in node_modules // as expected. eg: require('my-package/reporter'); diff --git a/packages/cli-plugin-metro/src/tools/loadMetroConfig.ts b/packages/cli-plugin-metro/src/tools/loadMetroConfig.ts index 8c9e51e44..5799134aa 100644 --- a/packages/cli-plugin-metro/src/tools/loadMetroConfig.ts +++ b/packages/cli-plugin-metro/src/tools/loadMetroConfig.ts @@ -6,6 +6,7 @@ import { mergeConfig, resolveConfig, ResolverConfigT, + YargArguments, } from 'metro-config'; import {CLIError, logger} from '@react-native-community/cli-tools'; import type {Config} from '@react-native-community/cli-types'; @@ -66,17 +67,6 @@ function getOverrideConfig(ctx: ConfigLoadingContext): InputConfigT { }; } -export interface ConfigOptionsT { - maxWorkers?: number; - port?: number; - projectRoot?: string; - resetCache?: boolean; - watchFolders?: string[]; - sourceExts?: string[]; - reporter?: any; - config?: string; -} - /** * Load Metro config. * @@ -85,12 +75,9 @@ export interface ConfigOptionsT { */ export default async function loadMetroConfig( ctx: ConfigLoadingContext, - options: ConfigOptionsT = {}, + options: YargArguments = {}, ): Promise { const overrideConfig = getOverrideConfig(ctx); - if (options.reporter) { - overrideConfig.reporter = options.reporter; - } const projectConfig = await resolveConfig(undefined, ctx.root);