feat: run Metro internally

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,90 @@
-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', () =>
+      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';
+
+  const projectMetroConfig = await Metro.loadConfig({
+    port: METRO_PORT,
+    projectRoot,
+  });
+  const config = await withRnHarness(projectMetroConfig)();
+  const reporter = withReporter(config);
 
-  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;
-    }
+  abortSignal.throwIfAborted();
 
-    logger.error('Metro crashed unexpectedly', error);
+  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"
     }