feat: run Metro internally (#27)

Currently, Harness runs Metro through the React Native CLI. This means the tool has no direct control over the configuration and relies on CLI parameters, as well as the user, to wrap the config with the withRnHarness function. By internalizing Metro and leveraging its JS API, Harness can dynamically augment the configuration on the fly. As a result, users no longer need to manually update the config file, and this approach also enables further optimizations.

Author: V3RON

apps/playground/metro.config.js

@@ -1,7 +1,6 @@
 const { withNxMetro } = require('@nx/react-native');
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const path = require('path');
-const { withRnHarness } = require('react-native-harness/metro');
 
 const defaultConfig = getDefaultConfig(__dirname);
 
@@ -21,12 +20,10 @@ const customConfig = {
   },
 };
 
-module.exports = withRnHarness(
-  withNxMetro(mergeConfig(defaultConfig, customConfig), {
-    watchFolders: [monorepoRoot],
-    nodeModulesPaths: [
-      path.resolve(projectRoot, 'node_modules'),
-      path.resolve(monorepoRoot, 'node_modules'),
-    ],
-  })
-);
+module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
+  watchFolders: [monorepoRoot],
+  nodeModulesPaths: [
+    path.resolve(projectRoot, 'node_modules'),
+    path.resolve(monorepoRoot, 'node_modules'),
+  ],
+});

packages/bundler-metro/package.json

@@ -16,10 +16,17 @@
     }
   },
   "dependencies": {
+    "@react-native-harness/metro": "workspace:*",
     "@react-native-harness/tools": "workspace:*",
+    "connect": "^3.7.0",
+    "nocache": "^4.0.0",
     "tslib": "^2.3.0"
   },
+  "peerDependencies": {
+    "metro": "*"
+  },
   "devDependencies": {
+    "@types/connect": "^3.4.38",
     "@types/node": "18.16.9"
   },
   "license": "MIT"

packages/bundler-metro/src/errors.ts

@@ -7,9 +7,11 @@ export class MetroPortUnavailableError extends HarnessError {
   }
 }
 
-export class MetroBundlerNotReadyError extends HarnessError {
-  constructor(public readonly maxRetries: number) {
-    super(`Metro bundler is not ready after ${maxRetries} attempts`);
-    this.name = 'MetroBundlerNotReadyError';
+export class MetroNotInstalledError extends HarnessError {
+  constructor() {
+    super(
+      'Metro was not found in your project. This is unexpected. Please report this issue to the React Native Harness team.'
+    );
+    this.name = 'MetroNotInstalledError';
   }
 }

packages/bundler-metro/src/factory.ts

@@ -1,135 +1,91 @@
-import {
-  getReactNativeCliPath,
-  getExpoCliPath,
-  spawn,
-  logger,
-  SubprocessError,
-} from '@react-native-harness/tools';
-import type { ChildProcess } from 'child_process';
-import { isPortAvailable } from './utils.js';
-import {
-  MetroPortUnavailableError,
-  MetroBundlerNotReadyError,
-} from './errors.js';
+import { withRnHarness } from '@react-native-harness/metro';
+import { logger } from '@react-native-harness/tools';
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import connect from 'connect';
+import nocache from 'nocache';
+import { isPortAvailable, getMetroPackage } from './utils.js';
+import { MetroPortUnavailableError } from './errors.js';
 import { METRO_PORT } from './constants.js';
-import type { MetroInstance } from './types.js';
-import assert from 'node:assert';
-import { createRequire } from 'node:module';
-
-const INITIALIZATION_DONE_EVENT_TYPE = 'initialize_done';
-
-const require = createRequire(import.meta.url);
-
-const waitForReady = (
-  metroProcess: ChildProcess,
-  timeoutMs = 60000
+import type { MetroInstance, MetroOptions } from './types.js';
+import {
+  type Reporter,
+  withReporter,
+  type ReportableEvent,
+} from './reporter.js';
+
+const waitForBundler = async (
+  reporter: Reporter,
+  abortSignal: AbortSignal
 ): Promise<void> => {
-  return new Promise<void>((resolve, reject) => {
-    const customPipe = metroProcess.stdio[3];
-    assert(customPipe, 'customPipe is required');
-
-    // eslint-disable-next-line prefer-const
-    let pipeListener: (data: Buffer) => void;
-    // eslint-disable-next-line prefer-const
-    let timer: NodeJS.Timeout;
-
-    const cleanup = () => {
-      clearTimeout(timer);
-      customPipe.off('data', pipeListener);
-    };
-
-    pipeListener = (data) => {
-      const text = data.toString().split('\n');
-
-      for (const line of text) {
-        if (line.trim() === '') {
-          continue;
-        }
-
-        try {
-          const event = JSON.parse(line);
-
-          if (event.type === INITIALIZATION_DONE_EVENT_TYPE) {
-            cleanup();
-            resolve();
-          }
-        } catch (error) {
-          logger.error('Failed to parse event', error);
-        }
+  return new Promise((resolve, reject) => {
+    const onEvent = (event: ReportableEvent) => {
+      if (event.type === 'initialize_done') {
+        reporter.removeListener(onEvent);
+        resolve();
       }
     };
+    reporter.addListener(onEvent);
 
-    customPipe.on('data', pipeListener);
-
-    timer = setTimeout(() => {
-      cleanup();
-      reject(new MetroBundlerNotReadyError(timeoutMs));
-    }, timeoutMs);
+    abortSignal.addEventListener('abort', () => {
+      reporter.removeListener(onEvent);
+      reject(new DOMException('The operation was aborted', 'AbortError'));
+    });
   });
 };
 
 export const getMetroInstance = async (
-  isExpo = false
+  options: MetroOptions,
+  abortSignal: AbortSignal
 ): Promise<MetroInstance> => {
-  const metro = spawn(
-    'node',
-    [
-      isExpo ? getExpoCliPath() : getReactNativeCliPath(),
-      'start',
-      '--port',
-      METRO_PORT.toString(),
-      '--customLogReporterPath',
-      require.resolve('../assets/reporter.cjs'),
-    ],
-    {
-      stdio: ['ignore', 'pipe', 'pipe', 'pipe'],
-      env: {
-        ...process.env,
-        RN_HARNESS: 'true',
-        ...(isExpo && { EXPO_NO_METRO_WORKSPACE_ROOT: 'true' }),
-      },
-    }
-  );
-
+  const { projectRoot } = options;
   const isDefaultPortAvailable = await isPortAvailable(METRO_PORT);
 
   if (!isDefaultPortAvailable) {
     throw new MetroPortUnavailableError(METRO_PORT);
   }
 
-  const childProcess = await metro.nodeChildProcess;
+  const Metro = getMetroPackage(projectRoot);
 
-  // Forward metro output to logger
-  if (childProcess.stdout) {
-    childProcess.stdout.on('data', (data) => {
-      logger.debug(data.toString().trim());
-    });
-  }
-  if (childProcess.stderr) {
-    childProcess.stderr.on('data', (data) => {
-      logger.debug(data.toString().trim());
-    });
-  }
+  process.env.RN_HARNESS = 'true';
 
-  metro.catch((error) => {
-    // This process is going to be killed by us, so we don't need to throw an error
-    if (error instanceof SubprocessError && error.signalName === 'SIGTERM') {
-      return;
-    }
+  const projectMetroConfig = await Metro.loadConfig({
+    port: METRO_PORT,
+    projectRoot,
+  });
+  const config = await withRnHarness(projectMetroConfig)();
+  const reporter = withReporter(config);
 
-    logger.error('Metro crashed unexpectedly', error);
+  abortSignal.throwIfAborted();
+
+  const statusPageMiddleware = (_: IncomingMessage, res: ServerResponse) => {
+    res.setHeader(
+      'X-React-Native-Project-Root',
+      new URL(`file:///${projectRoot}`).pathname.slice(1)
+    );
+    res.end('packager-status:running');
+  };
+  const middleware = connect()
+    .use(nocache())
+    .use('/status', statusPageMiddleware);
+
+  const ready = waitForBundler(reporter, abortSignal);
+  const server = await Metro.runServer(config, {
+    waitForBundler: true,
+    unstable_extraMiddleware: [middleware],
   });
+  server.keepAliveTimeout = 30000;
 
-  // Wait for Metro to be ready by monitoring stdout for "Dev server ready."
-  await waitForReady(childProcess);
+  abortSignal.throwIfAborted();
 
-  return {
-    dispose: async () => {
-      const isKilled = childProcess.kill('SIGTERM');
+  await ready;
 
-      if (!isKilled) {
-        childProcess.kill('SIGKILL');
-      }
-    },
+  logger.debug('Metro server is running');
+
+  return {
+    events: reporter,
+    dispose: () =>
+      new Promise<void>((resolve) => {
+        server.close(() => resolve());
+      }),
   };
 };

packages/bundler-metro/src/index.ts

@@ -1,2 +1,2 @@
 export { getMetroInstance } from './factory.js';
-export type { MetroInstance, MetroFactory } from './types.js';
+export type { MetroInstance, MetroFactory, MetroOptions } from './types.js';

packages/bundler-metro/src/reporter.ts

@@ -0,0 +1,25 @@
+import { getEmitter, type EventEmitter } from '@react-native-harness/tools';
+import type {
+  MetroConfig,
+  ReportableEvent as MetroReportableEvent,
+} from 'metro';
+
+export type ReportableEvent =
+  | MetroReportableEvent
+  | {
+      type: 'initialize_done';
+    };
+
+export type Reporter = EventEmitter<ReportableEvent>;
+
+export const withReporter = (metroConfig: MetroConfig): Reporter => {
+  const emitter = getEmitter<ReportableEvent>();
+
+  metroConfig.reporter = {
+    update: (event: ReportableEvent) => {
+      emitter.emit(event);
+    },
+  };
+
+  return emitter;
+};

packages/bundler-metro/src/types.ts

@@ -1,5 +1,12 @@
+import type { Reporter } from './reporter.js';
+
+export type MetroOptions = {
+  projectRoot: string;
+};
+
 export type MetroInstance = {
+  events: Reporter;
   dispose: () => Promise<void>;
 };
 
-export type MetroFactory = (isExpo: boolean) => Promise<MetroInstance>;
+export type MetroFactory = () => Promise<MetroInstance>;

packages/bundler-metro/src/utils.ts

@@ -1,4 +1,8 @@
 import net from 'node:net';
+import { createRequire } from 'node:module';
+import { MetroNotInstalledError } from './errors.js';
+
+const require = createRequire(import.meta.url);
 
 export const isPortAvailable = (port: number): Promise<boolean> => {
   return new Promise((resolve) => {
@@ -14,3 +18,14 @@ export const isPortAvailable = (port: number): Promise<boolean> => {
     server.listen(port);
   });
 };
+
+export const getMetroPackage = (
+  projectRoot: string
+): typeof import('metro') => {
+  try {
+    const metroPath = require.resolve('metro', { paths: [projectRoot] });
+    return require(metroPath);
+  } catch {
+    throw new MetroNotInstalledError();
+  }
+};

packages/bundler-metro/tsconfig.json

@@ -3,6 +3,9 @@
   "files": [],
   "include": [],
   "references": [
+    {
+      "path": "../metro"
+    },
     {
       "path": "../tools"
     },

packages/bundler-metro/tsconfig.lib.json

@@ -12,6 +12,9 @@
   },
   "include": ["src/**/*.ts"],
   "references": [
+    {
+      "path": "../metro/tsconfig.lib.json"
+    },
     {
       "path": "../tools/tsconfig.lib.json"
     }