feat: add unstable_patchInitializeCore (#88)

Author: jbroma

apps/example-host/metro.config.js

@@ -52,6 +52,7 @@ module.exports = withModuleFederation(
   {
     flags: {
       unstable_patchHMRClient: true,
+      unstable_patchInitializeCore: true,
       unstable_patchRuntimeRequire: true,
     },
   }

apps/example-mini/metro.config.js

@@ -51,6 +51,7 @@ module.exports = withModuleFederation(
   {
     flags: {
       unstable_patchHMRClient: true,
+      unstable_patchInitializeCore: true,
       unstable_patchRuntimeRequire: true,
     },
   }

apps/example-nested-mini/metro.config.js

@@ -55,6 +55,7 @@ module.exports = withModuleFederation(
   {
     flags: {
       unstable_patchHMRClient: true,
+      unstable_patchInitializeCore: true,
       unstable_patchRuntimeRequire: true,
     },
   }

apps/showcase-host/metro.config.js

@@ -57,6 +57,7 @@ module.exports = withModuleFederation(
   {
     flags: {
       unstable_patchHMRClient: true,
+      unstable_patchInitializeCore: true,
       unstable_patchRuntimeRequire: true,
     },
   }

apps/showcase-mini/metro.config.js

@@ -60,6 +60,7 @@ module.exports = withModuleFederation(
   {
     flags: {
       unstable_patchHMRClient: true,
+      unstable_patchInitializeCore: true,
       unstable_patchRuntimeRequire: true,
     },
   }

packages/core/babel-plugin/patch-initialize-core.js

@@ -0,0 +1,59 @@
+// reuse `@babel/types` from `metro`
+const metroPath = require.resolve('metro');
+const babelTypesPath = require.resolve('@babel/types', { paths: [metroPath] });
+const t = require(babelTypesPath);
+
+/**
+ * Inject require('mf:init-host') right after 'use strict' directive
+ * in React Native's Initialize Core
+ */
+function injectInitHostRequire(path, state) {
+  // Only process once per file
+  if (state.hasInjected) return;
+
+  let insertIndex = 0;
+
+  // Find the position after 'use strict' directive
+  for (let i = 0; i < path.node.body.length; i++) {
+    const node = path.node.body[i];
+    if (
+      t.isExpressionStatement(node) &&
+      t.isStringLiteral(node.expression) &&
+      node.expression.value === 'use strict'
+    ) {
+      insertIndex = i + 1;
+      break;
+    }
+  }
+
+  // Create the require('mf:init-host') statement
+  const requireStatement = t.expressionStatement(
+    t.callExpression(t.identifier('require'), [t.stringLiteral('mf:init-host')])
+  );
+
+  // Insert the require statement
+  path.node.body.splice(insertIndex, 0, requireStatement);
+  state.hasInjected = true;
+}
+
+function metroPatchInitializeCorePlugin() {
+  return {
+    name: 'module-federation-metro-patch-initialize-core',
+    visitor: {
+      Program: {
+        enter(_, state) {
+          state.hasInjected = false;
+          state.shouldTransform = state.file.opts.filename.includes(
+            'react-native/Libraries/Core/InitializeCore.js'
+          );
+        },
+        exit(path, state) {
+          if (!state.shouldTransform) return;
+          injectInitHostRequire(path, state);
+        },
+      },
+    },
+  };
+}
+
+module.exports = metroPatchInitializeCorePlugin;

packages/core/babel-plugin/patch-require.js

@@ -135,7 +135,7 @@ function patchRequireRefresh(path) {
 
 function metroPatchRequireBabelPlugin() {
   return {
-    name: 'metro-patch-require',
+    name: 'module-federation-metro-patch-require',
     visitor: {
       Program: {
         enter(_, state) {

packages/core/package.json

@@ -35,7 +35,7 @@
       "default": "./dist/commands/index.js"
     },
     "./babel-plugin": "./babel-plugin/index.js",
-    "./babel-plugin/patch-require": "./babel-plugin/patch-require.js",
+    "./babel-plugin/*": "./babel-plugin/*.js",
     "./bootstrap": {
       "dev": "./src/modules/asyncStartup.tsx",
       "default": "./dist/modules/asyncStartup.tsx"

packages/core/src/babel/transformer.js

@@ -1,9 +1,10 @@
 const babelTransformer = require('__BABEL_TRANSFORMER_PATH__');
+const babelPlugins = __BABEL_PLUGINS__;
 
 function transform(config) {
   return babelTransformer.transform({
     ...config,
-    plugins: [...__BABEL_PLUGINS__, ...config.plugins],
+    plugins: [...babelPlugins, ...config.plugins],
   });
 }
 

packages/core/src/plugin/babel-transformer.ts

@@ -7,6 +7,7 @@ interface CreateBabelTransformerOptions {
   federationConfig: ModuleFederationConfigNormalized;
   originalBabelTransformerPath: string;
   tmpDirPath: string;
+  enableInitializeCorePatching: boolean;
   enableRuntimeRequirePatching: boolean;
 }
 
@@ -15,6 +16,7 @@ export function createBabelTransformer({
   federationConfig,
   originalBabelTransformerPath,
   tmpDirPath,
+  enableInitializeCorePatching,
   enableRuntimeRequirePatching,
 }: CreateBabelTransformerOptions) {
   const outputPath = path.join(tmpDirPath, 'babel-transformer.js');
@@ -30,6 +32,9 @@ export function createBabelTransformer({
         shared: federationConfig.shared,
       },
     ],
+    enableInitializeCorePatching
+      ? '@module-federation/metro/babel-plugin/patch-initialize-core'
+      : undefined,
     enableRuntimeRequirePatching
       ? '@module-federation/metro/babel-plugin/patch-require'
       : undefined,