refactor: inline Metro integration into bundler (#77)

Author: V3RON

packages/bundler-metro/babel-transformer.cjs

@@ -0,0 +1,24 @@
+const { rnHarnessPlugins } = require('@react-native-harness/babel-preset');
+
+const transform = (args) => {
+  const { plugins } = args;
+  const upstreamTransformerPath =
+    process.env.RN_HARNESS_UPSTREAM_TRANSFORMER_PATH;
+
+  if (!upstreamTransformerPath || typeof upstreamTransformerPath !== 'string') {
+    throw new Error('Upstream transformer path is not a string');
+  }
+
+  const upstreamTransformer = require(upstreamTransformerPath);
+  const pluginsWithHarness = [
+    ...((plugins ?? [])),
+    ...rnHarnessPlugins,
+  ];
+
+  return upstreamTransformer.transform({
+    ...args,
+    plugins: pluginsWithHarness,
+  });
+};
+
+module.exports = { transform };

packages/bundler-metro/eslint.config.mjs

@@ -9,6 +9,7 @@ export default [
         'error',
         {
           ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}'],
+          ignoredDependencies: ['@react-native-harness/babel-preset', 'vitest'],
         },
       ],
     },

packages/bundler-metro/package.json

@@ -16,21 +16,27 @@
     }
   },
   "dependencies": {
-    "@react-native-harness/metro": "workspace:*",
+    "@react-native/metro-config": "*",
+    "@react-native-harness/babel-preset": "workspace:*",
     "@react-native-harness/tools": "workspace:*",
     "@react-native-harness/config": "workspace:*",
+    "@react-native-harness/runtime": "workspace:*",
     "connect": "^3.7.0",
     "nocache": "^4.0.0",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
     "metro": "*",
-    "metro-config": "*"
+    "metro-cache": "*",
+    "metro-config": "*",
+    "metro-resolver": "*"
   },
   "devDependencies": {
     "@types/connect": "^3.4.38",
     "metro": "*",
-    "metro-config": "*"
+    "metro-cache": "*",
+    "metro-config": "*",
+    "metro-resolver": "*"
   },
   "license": "MIT"
 }

…ckages/metro/src/__tests__/paths.test.ts …undler-metro/src/__tests__/paths.test.tspackages/metro/src/__tests__/paths.test.ts renamed to packages/bundler-metro/src/__tests__/paths.test.ts packages/metro/src/__tests__/paths.test.ts renamed to packages/bundler-metro/src/__tests__/paths.test.ts

@@ -12,7 +12,9 @@ import {
 const tempDirs: string[] = [];
 
 const createTempProjectRoot = (): string => {
-  const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'rn-harness-metro-'));
+  const tempDir = fs.mkdtempSync(
+    path.join(os.tmpdir(), 'rn-harness-bundler-metro-')
+  );
   tempDirs.push(tempDir);
   return tempDir;
 };
@@ -23,7 +25,7 @@ afterEach(() => {
   }
 });
 
-describe('metro paths', () => {
+describe('bundler metro paths', () => {
   it('resolves the harness root under the project root', () => {
     const projectRoot = createTempProjectRoot();
 

packages/bundler-metro/src/babel-transformer.ts

@@ -0,0 +1,16 @@
+import { fileURLToPath } from 'node:url';
+import { MetroConfig } from '@react-native/metro-config';
+
+export const getHarnessBabelTransformerPath = (
+  metroConfig: MetroConfig
+): string => {
+  const upstreamTransformerPath = metroConfig.transformer?.babelTransformerPath;
+
+  if (!upstreamTransformerPath || typeof upstreamTransformerPath !== 'string') {
+    throw new Error('Upstream transformer path is not a string');
+  }
+
+  process.env.RN_HARNESS_UPSTREAM_TRANSFORMER_PATH = upstreamTransformerPath;
+
+  return fileURLToPath(new URL('../babel-transformer.cjs', import.meta.url));
+};

packages/bundler-metro/src/factory.ts

@@ -1,4 +1,3 @@
-import { withRnHarness } from '@react-native-harness/metro';
 import { logger } from '@react-native-harness/tools';
 import type { Server as HttpServer } from 'node:http';
 import type { Server as HttpsServer } from 'node:https';
@@ -14,6 +13,7 @@ import {
 } from './reporter.js';
 import { getExpoMiddleware } from './middlewares/expo-middleware.js';
 import { getStatusMiddleware } from './middlewares/status-middleware.js';
+import { withRnHarness } from './withRnHarness.js';
 
 const waitForBundler = async (
   reporter: Reporter,

…ckages/metro/src/getHarnessSerializer.ts …undler-metro/src/getHarnessSerializer.tspackages/metro/src/getHarnessSerializer.ts renamed to packages/bundler-metro/src/getHarnessSerializer.ts packages/metro/src/getHarnessSerializer.ts renamed to packages/bundler-metro/src/getHarnessSerializer.ts

@@ -1,11 +1,16 @@
+import { createRequire } from 'node:module';
 import type { MetroConfig } from 'metro-config';
 
+const require = createRequire(import.meta.url);
+
 export type Serializer = NonNullable<
   NonNullable<MetroConfig['serializer']>['customSerializer']
 >;
 
 const getBaseSerializer = (): Serializer => {
-  const baseJSBundle = require('metro/private/DeltaBundler/Serializers/baseJSBundle');
+  const baseJSBundle = require(
+    'metro/private/DeltaBundler/Serializers/baseJSBundle'
+  );
   const bundleToString = require('metro/private/lib/bundleToString');
 
   return (entryPoint, prepend, graph, bundleOptions) =>
@@ -20,19 +25,16 @@ export const getHarnessSerializer = (): Serializer => {
 
   return async (entryPoint, preModules, graph, options) => {
     if (options.modulesOnly) {
-      // This is most likely a test file
       return baseSerializer(entryPoint, preModules, graph, {
         ...options,
         processModuleFilter: (mod) => {
           if (
             options.processModuleFilter &&
             !options.processModuleFilter(mod)
           ) {
-            // If the module is not allowed by the processModuleFilter, skip it
             return false;
           }
 
-          // If the module is in the main entry point, skip it
           return !mainEntryPointModules.has(mod.path);
         },
       });

packages/bundler-metro/src/index.ts

@@ -2,3 +2,4 @@ export { getMetroInstance } from './factory.js';
 export type { MetroInstance, MetroFactory, MetroOptions } from './types.js';
 export { prewarmMetroBundle } from './prewarm.js';
 export type { Reporter, ReportableEvent } from './reporter.js';
+export { isMetroCacheReusable } from './paths.js';

packages/metro/src/jest-globals-mock.ts …s/bundler-metro/src/jest-globals-mock.tspackages/metro/src/jest-globals-mock.ts renamed to packages/bundler-metro/src/jest-globals-mock.ts packages/metro/src/jest-globals-mock.ts renamed to packages/bundler-metro/src/jest-globals-mock.ts

@@ -1,5 +1,5 @@
 // Mock module for @jest/globals imports
-// This module throws immediately when imported to warn users about using Jest APIs
+// This module throws immediately to explain the supported import path.
 
 throw new Error(
   "Importing '@jest/globals' is not supported in Harness tests. Import from 'react-native-harness' instead."

packages/metro/src/manifest.ts packages/bundler-metro/src/manifest.tspackages/metro/src/manifest.ts renamed to packages/bundler-metro/src/manifest.ts

@@ -1,7 +1,7 @@
-import path from 'node:path';
 import fs from 'node:fs';
+import path from 'node:path';
 import { Config as HarnessConfig } from '@react-native-harness/config';
-import { getHarnessManifestPath } from './paths';
+import { getHarnessManifestPath } from './paths.js';
 
 const getManifestContent = (harnessConfig: HarnessConfig): string => {
   return `global.RN_HARNESS = {