feat: use registerRemote hook in ResolverPlugin

.changeset/shaggy-seals-return.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": minor
+---
+
+MF2 `ResolverPlugin` now adds a resolver only once when new remote is registered through `registerRemote` federation runtime hook

packages/repack/babel.config.js

@@ -1,21 +1,3 @@
-const defaultConfig = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        targets: {
-          node: 18,
-        },
-        // Disable CJS transform and add it manually.
-        // Otherwise it will replace `import(...)` with `require(...)`, which
-        // is not what we want.
-        modules: false,
-      },
-    ],
-  ],
-  plugins: ['@babel/plugin-transform-modules-commonjs'],
-};
-
 module.exports = {
   presets: ['@babel/preset-typescript'],
   plugins: ['@babel/plugin-transform-export-namespace-from'],
@@ -26,11 +8,25 @@ module.exports = {
     },
     {
       exclude: ['./src/**/implementation', './src/modules'],
-      ...defaultConfig,
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: { node: 18 },
+            // Disable CJS transform and add it manually.
+            // Otherwise it will replace `import(...)` with `require(...)`, which
+            // is not what we want.
+            modules: false,
+          },
+        ],
+      ],
+      plugins: ['@babel/plugin-transform-modules-commonjs'],
     },
   ],
   env: {
     // Transform everything in `test` environment, so unit test can pass.
-    test: defaultConfig,
+    test: {
+      presets: [['@babel/preset-env', { targets: { node: 18 } }]],
+    },
   },
 };

packages/repack/src/modules/FederationRuntimePlugins/ResolverPlugin.ts

@@ -1,6 +1,11 @@
-import type { FederationRuntimePlugin } from '@module-federation/enhanced/runtime';
+import type {
+  FederationHost,
+  FederationRuntimePlugin,
+} from '@module-federation/enhanced/runtime';
 import type * as RepackClient from '../ScriptManager/index.js';
 
+type MFRemote = Parameters<FederationHost['registerRemotes']>[0][0];
+
 export type RepackResolverPluginConfiguration =
   | Omit<RepackClient.ScriptLocator, 'url'>
   | ((url: string) => Promise<RepackClient.ScriptLocator>);
@@ -35,35 +40,57 @@ const rebaseRemoteUrl = (from: string, to: string) => {
   return [publicPath, assetPath].join('/');
 };
 
-const RepackResolverPlugin: (
+const registerResolver = async (
+  remoteInfo: MFRemote,
   config?: RepackResolverPluginConfiguration
-) => FederationRuntimePlugin = (config) => ({
-  name: 'repack-resolver-plugin',
-  afterResolve(args) {
-    const { remoteInfo } = args;
-    const { ScriptManager } =
-      require('../ScriptManager/index.js') as typeof RepackClient;
+) => {
+  // when ScriptManager.shared.resolveScript is called, registerResolver
+  // should evaluate before it and and the resolver will be registered
+  // before any remote script is resolved
+  const { ScriptManager } = (await import(
+    '../ScriptManager/index.js'
+  )) as typeof RepackClient;
 
-    // when manifest is used, the valid entry URL comes from the version field
-    // otherwise, the entry URL comes from the entry field which has the correct publicPath for the remote set
-    const entryUrl = remoteInfo.version ?? remoteInfo.entry;
+  // when manifest is used, the valid entry URL comes from the version field
+  // otherwise, the entry URL comes from the entry field which has the correct publicPath for the remote set
+  let entryUrl: string | undefined;
+  if ('version' in remoteInfo && remoteInfo.version) {
+    entryUrl = remoteInfo.version;
+  } else if ('entry' in remoteInfo) {
+    entryUrl = remoteInfo.entry;
+  }
 
-    ScriptManager.shared.addResolver(
-      async (scriptId, caller, referenceUrl) => {
-        if (scriptId === remoteInfo.name || caller === remoteInfo.name) {
-          // referenceUrl should always be present and this should never happen
-          if (!referenceUrl) {
-            throw new Error('[RepackResolverPlugin] Reference URL is missing');
-          }
+  if (!entryUrl) {
+    throw new Error(
+      '[RepackResolverPlugin] Cannot determine entry URL for remote: ' +
+        remoteInfo.name
+    );
+  }
 
-          const url = rebaseRemoteUrl(referenceUrl, entryUrl);
-          const locator = await createScriptLocator(url, config);
-          return locator;
+  ScriptManager.shared.addResolver(
+    async (scriptId, caller, referenceUrl) => {
+      if (scriptId === remoteInfo.name || caller === remoteInfo.name) {
+        // referenceUrl should always be present and this should never happen
+        if (!referenceUrl) {
+          throw new Error('[RepackResolverPlugin] Reference URL is missing');
         }
-      },
-      { key: remoteInfo.name }
-    );
 
+        const url = rebaseRemoteUrl(referenceUrl, entryUrl);
+        const locator = await createScriptLocator(url, config);
+        return locator;
+      }
+    },
+    { key: remoteInfo.name }
+  );
+};
+
+const RepackResolverPlugin: (
+  config?: RepackResolverPluginConfiguration
+) => FederationRuntimePlugin = (config) => ({
+  name: 'repack-resolver-plugin',
+  registerRemote: (args) => {
+    // asynchronously add a resolver for the remote
+    registerResolver(args.remote, config);
     return args;
   },
 });

packages/repack/src/modules/FederationRuntimePlugins/__tests__/ResolverPlugin.test.ts

@@ -56,7 +56,7 @@ describe('RepackResolverPlugin', () => {
   it('should resolve a script through a manifest', async () => {
     const plugin = RepackResolverPlugin();
     // trigger the plugin to register the resolver
-    plugin.afterResolve!({ remoteInfo: mockRemoteInfo } as any);
+    plugin.registerRemote!({ remote: mockRemoteInfo } as any);
 
     // manually resolve the script to verify the result
     const script = await ScriptManager.shared.resolveScript(
@@ -74,8 +74,8 @@ describe('RepackResolverPlugin', () => {
   it('should resolve a script through remote entry', async () => {
     const plugin = RepackResolverPlugin();
     // trigger the plugin to register the resolver
-    plugin.afterResolve!({
-      remoteInfo: { ...mockRemoteInfo, version: undefined },
+    plugin.registerRemote!({
+      remote: { ...mockRemoteInfo, version: undefined },
     } as any);
 
     // manually resolve the script to verify the result
@@ -95,7 +95,7 @@ describe('RepackResolverPlugin', () => {
     const config = { headers: { Authorization: 'Bearer token' } };
     const plugin = RepackResolverPlugin(config);
     // trigger the plugin to register the resolver
-    plugin.afterResolve!({ remoteInfo: mockRemoteInfo } as any);
+    plugin.registerRemote!({ remote: mockRemoteInfo } as any);
 
     // manually resolve the script to verify the result
     const script = await ScriptManager.shared.resolveScript(
@@ -115,7 +115,7 @@ describe('RepackResolverPlugin', () => {
     });
     const plugin = RepackResolverPlugin(config);
     // trigger the plugin to register the resolver
-    plugin.afterResolve!({ remoteInfo: mockRemoteInfo } as any);
+    plugin.registerRemote!({ remote: mockRemoteInfo } as any);
 
     // manually resolve the script to verify the result
     const script = await ScriptManager.shared.resolveScript(
@@ -131,7 +131,7 @@ describe('RepackResolverPlugin', () => {
   it('should throw error when reference URL is missing', async () => {
     const plugin = RepackResolverPlugin();
     // trigger the plugin to register the resolver
-    plugin.afterResolve!({ remoteInfo: mockRemoteInfo } as any);
+    plugin.registerRemote!({ remote: mockRemoteInfo } as any);
 
     // manually resolve the script to verify the result (should throw)
     await expect(
@@ -147,7 +147,7 @@ describe('RepackResolverPlugin', () => {
     const config = { headers: { Authorization: 'Bearer token' } };
     const plugin = RepackResolverPlugin(config);
     // trigger the plugin to register the resolver
-    plugin.afterResolve!({ remoteInfo: mockRemoteInfo } as any);
+    plugin.registerRemote!({ remote: mockRemoteInfo } as any);
 
     // manually resolve the script to verify the result
     const script = await ScriptManager.shared.resolveScript(
@@ -174,7 +174,7 @@ describe('RepackResolverPlugin', () => {
 
     const plugin = RepackResolverPlugin();
     // trigger the plugin to register the resolver
-    plugin.afterResolve!({ remoteInfo: mockRemoteInfo } as any);
+    plugin.registerRemote!({ remote: mockRemoteInfo } as any);
 
     // manually resolve the script to verify the result
     const script = await ScriptManager.shared.resolveScript('other-remote');
@@ -186,8 +186,8 @@ describe('RepackResolverPlugin', () => {
   it('should rebase the URL from reference URL to entry URL', async () => {
     const plugin = RepackResolverPlugin();
     // trigger the plugin to register the resolver
-    plugin.afterResolve!({
-      remoteInfo: {
+    plugin.registerRemote!({
+      remote: {
         name: 'remote1',
         entry: 'https://example.com/ios/remote1/entry.container.js.bundle',
         version: 'https://example-manifest.com/remote1/mf-manifest.json',