refactor(examples): move topology changes below runtime registration

Author: ScriptedAlchemy

examples/rsbuild-rsc-federation-remote/rsbuild.config.ts

@@ -4,7 +4,7 @@ import { pluginReact } from '@rsbuild/plugin-react';
 import { rspack } from '@rspack/core';
 import { Layers, pluginRSC } from 'rsbuild-plugin-rsc';
 
-const containerName = 'rsbuild_container';
+const containerName = 'rsbuild_remote';
 type EnvironmentName = 'server' | 'client';
 
 const unifiedExposes = {
@@ -108,10 +108,6 @@ export default defineConfig({
     rspack: (config, { target }) => {
       const isServerBuild = target === 'node';
       const environment: EnvironmentName = isServerBuild ? 'server' : 'client';
-      const remotes = {
-        remote: 'remote',
-      };
-
       if (isServerBuild) {
         config.target = 'async-node';
       }
@@ -126,10 +122,6 @@ export default defineConfig({
             : { type: 'var', name: containerName },
           manifest: isServerBuild ? true : { fileName: 'mf-manifest.client' },
           exposes: resolveExposes(environment),
-          remotes,
-          runtimePlugins: isServerBuild
-            ? ['@module-federation/node/runtimePlugin']
-            : [],
           experiments: {
             asyncStartup: true,
           },

examples/rsbuild-rsc-federation-remote/scripts/verify-manifest.mjs

@@ -80,9 +80,21 @@ invariant(
 
 const clientStats = readJSON(clientStatsPath);
 const clientManifest = readJSON(clientManifestPath);
+const containerName = 'rsbuild_remote';
+const sharedPackageName = 'rsbuild-rsc-federation-shared';
+const sharedActionsPackageName = 'rsbuild-rsc-federation-shared/server-actions';
 
-const sharedStats = stats.shared.find((item) => item.name === 'rsc-shared-key');
-invariant(sharedStats, 'Expected shared entry for "rsc-shared-key" in stats');
+const sharedStats = stats.shared.find(
+  (item) => item.name === sharedPackageName,
+);
+invariant(
+  sharedStats,
+  `Expected shared entry for "${sharedPackageName}" in stats`,
+);
+invariant(
+  sharedStats.shareKey === 'rsc-shared-key',
+  `Expected shared shareKey "rsc-shared-key", got "${sharedStats.shareKey}"`,
+);
 invariant(sharedStats.rsc, 'Expected rsc metadata on shared stats entry');
 invariant(
   sharedStats.rsc.lookup === 'rsc-shared-key',
@@ -110,11 +122,15 @@ invariant(
 );
 
 const sharedActionsStats = stats.shared.find(
-  (item) => item.name === 'rsc-shared-actions-key',
+  (item) => item.name === sharedActionsPackageName,
 );
 invariant(
   sharedActionsStats,
-  'Expected shared entry for "rsc-shared-actions-key" in stats',
+  `Expected shared entry for "${sharedActionsPackageName}" in stats`,
+);
+invariant(
+  sharedActionsStats.shareKey === 'rsc-shared-actions-key',
+  `Expected shared actions shareKey "rsc-shared-actions-key", got "${sharedActionsStats.shareKey}"`,
 );
 invariant(
   sharedActionsStats.rsc,
@@ -134,8 +150,8 @@ const exposeStats = stats.exposes.find((item) => item.path === './button');
 invariant(exposeStats, 'Expected expose entry "./button" in stats');
 invariant(exposeStats.rsc, 'Expected rsc metadata on expose stats entry');
 invariant(
-  exposeStats.rsc.lookup === 'rsbuild_container/button',
-  `Expected expose lookup "rsbuild_container/button", got "${exposeStats.rsc.lookup}"`,
+  exposeStats.rsc.lookup === `${containerName}/button`,
+  `Expected expose lookup "${containerName}/button", got "${exposeStats.rsc.lookup}"`,
 );
 invariant(
   exposeStats.rsc.clientReferences.includes('default'),
@@ -155,8 +171,8 @@ invariant(
   'Expected rsc metadata on expose "./consumer"',
 );
 invariant(
-  consumerExposeStats.rsc.lookup === 'rsbuild_container/consumer',
-  `Expected expose lookup "rsbuild_container/consumer", got "${consumerExposeStats.rsc.lookup}"`,
+  consumerExposeStats.rsc.lookup === `${containerName}/consumer`,
+  `Expected expose lookup "${containerName}/consumer", got "${consumerExposeStats.rsc.lookup}"`,
 );
 invariant(
   Array.isArray(consumerExposeStats.rsc.serverActions) &&
@@ -173,8 +189,8 @@ invariant(
   'Expected rsc metadata on expose "./composed"',
 );
 invariant(
-  composedExposeStats.rsc.lookup === 'rsbuild_container/composed',
-  `Expected expose lookup "rsbuild_container/composed", got "${composedExposeStats.rsc.lookup}"`,
+  composedExposeStats.rsc.lookup === `${containerName}/composed`,
+  `Expected expose lookup "${containerName}/composed", got "${composedExposeStats.rsc.lookup}"`,
 );
 invariant(
   composedExposeStats.rsc.clientReferences.includes('default'),
@@ -193,41 +209,44 @@ invariant(
   'Expected rsc metadata on expose "./server-mixed"',
 );
 invariant(
-  serverMixedExposeStats.rsc.lookup === 'rsbuild_container/server-mixed',
-  `Expected expose lookup "rsbuild_container/server-mixed", got "${serverMixedExposeStats.rsc.lookup}"`,
+  serverMixedExposeStats.rsc.lookup === `${containerName}/server-mixed`,
+  `Expected expose lookup "${containerName}/server-mixed", got "${serverMixedExposeStats.rsc.lookup}"`,
 );
 invariant(
   Array.isArray(serverMixedExposeStats.rsc.serverActions) &&
     serverMixedExposeStats.rsc.serverActions.length > 0,
   'Expected expose "./server-mixed" serverActions to be non-empty',
 );
 
-const remoteStats = stats.remotes.find(
-  (item) => item.alias === 'remote' && item.moduleName === 'Button',
-);
-invariant(remoteStats, 'Expected remote/Button consumption entry in stats');
-invariant(remoteStats.rsc, 'Expected rsc metadata on remote stats entry');
 invariant(
-  remoteStats.rsc.lookup === 'remote/Button',
-  `Expected remote lookup "remote/Button", got "${remoteStats.rsc.lookup}"`,
+  Array.isArray(stats.remotes) && stats.remotes.length === 0,
+  `Expected provider stats remotes to be empty, got ${stats.remotes.length}`,
 );
 
 const manifestShared = manifest.shared.find(
-  (item) => item.name === 'rsc-shared-key',
+  (item) => item.name === sharedPackageName,
 );
 invariant(manifestShared?.rsc, 'Expected shared rsc metadata in manifest');
+invariant(
+  manifestShared.shareKey === 'rsc-shared-key',
+  'Manifest shared shareKey mismatch',
+);
 invariant(
   manifestShared.rsc.lookup === 'rsc-shared-key',
   'Manifest shared lookup mismatch',
 );
 
 const manifestSharedActions = manifest.shared.find(
-  (item) => item.name === 'rsc-shared-actions-key',
+  (item) => item.name === sharedActionsPackageName,
 );
 invariant(
   manifestSharedActions?.rsc,
   'Expected shared actions rsc metadata in manifest',
 );
+invariant(
+  manifestSharedActions.shareKey === 'rsc-shared-actions-key',
+  'Manifest shared actions shareKey mismatch',
+);
 invariant(
   manifestSharedActions.rsc.lookup === 'rsc-shared-actions-key',
   'Manifest shared actions lookup mismatch',
@@ -238,7 +257,7 @@ const manifestExpose = manifest.exposes.find(
 );
 invariant(manifestExpose?.rsc, 'Expected expose rsc metadata in manifest');
 invariant(
-  manifestExpose.rsc.lookup === 'rsbuild_container/button',
+  manifestExpose.rsc.lookup === `${containerName}/button`,
   'Manifest expose lookup mismatch',
 );
 
@@ -250,7 +269,7 @@ invariant(
   'Expected expose "./consumer" rsc metadata in manifest',
 );
 invariant(
-  manifestConsumerExpose.rsc.lookup === 'rsbuild_container/consumer',
+  manifestConsumerExpose.rsc.lookup === `${containerName}/consumer`,
   'Manifest expose "./consumer" lookup mismatch',
 );
 
@@ -262,7 +281,7 @@ invariant(
   'Expected expose "./composed" rsc metadata in manifest',
 );
 invariant(
-  manifestComposedExpose.rsc.lookup === 'rsbuild_container/composed',
+  manifestComposedExpose.rsc.lookup === `${containerName}/composed`,
   'Manifest expose "./composed" lookup mismatch',
 );
 
@@ -274,17 +293,13 @@ invariant(
   'Expected expose "./server-mixed" rsc metadata in manifest',
 );
 invariant(
-  manifestServerMixedExpose.rsc.lookup === 'rsbuild_container/server-mixed',
+  manifestServerMixedExpose.rsc.lookup === `${containerName}/server-mixed`,
   'Manifest expose "./server-mixed" lookup mismatch',
 );
 
-const manifestRemote = manifest.remotes.find(
-  (item) => item.alias === 'remote' && item.moduleName === 'Button',
-);
-invariant(manifestRemote?.rsc, 'Expected remote rsc metadata in manifest');
 invariant(
-  manifestRemote.rsc.lookup === 'remote/Button',
-  'Manifest remote lookup mismatch',
+  Array.isArray(manifest.remotes) && manifest.remotes.length === 0,
+  `Expected provider manifest remotes to be empty, got ${manifest.remotes.length}`,
 );
 
 const expectedSingletonShares = [
@@ -304,12 +319,12 @@ for (const shareName of expectedSingletonShares) {
 }
 
 invariant(
-  clientStats.name === 'rsbuild_container',
-  `Expected client stats container name "rsbuild_container", got "${clientStats.name}"`,
+  clientStats.name === containerName,
+  `Expected client stats container name "${containerName}", got "${clientStats.name}"`,
 );
 invariant(
-  clientManifest.name === 'rsbuild_container',
-  `Expected client manifest container name "rsbuild_container", got "${clientManifest.name}"`,
+  clientManifest.name === containerName,
+  `Expected client manifest container name "${containerName}", got "${clientManifest.name}"`,
 );
 invariant(
   clientStats.exposes.some((item) => item.path === './button'),

examples/rsbuild-rsc-federation-remote/src/exposed-client.tsx

@@ -1,18 +1,12 @@
 'use client';
 
-import remoteButton from 'remote/Button';
 import { MixedClientBadge, mixedValue } from 'rsbuild-rsc-federation-shared';
-import {
-  composeExposeMessage,
-  describeModuleType,
-  localPatternTag,
-} from './local-patterns';
+import { composeExposeMessage, localPatternTag } from './local-patterns';
 
 export default function ExposedButton() {
   return composeExposeMessage([
     'ExposedButton',
-    describeModuleType(remoteButton),
-    describeModuleType(MixedClientBadge),
+    typeof MixedClientBadge,
     mixedValue.kind,
     localPatternTag,
   ]);

examples/rsbuild-rsc-federation-remote/src/exposed-composed.tsx

@@ -1,24 +1,18 @@
 'use client';
 
-import remoteButton from 'remote/Button';
 import {
   MixedClientBadge,
   mixedValue,
   sharedValue,
 } from 'rsbuild-rsc-federation-shared';
-import {
-  composeExposeMessage,
-  describeModuleType,
-  localPatternTag,
-} from './local-patterns';
+import { composeExposeMessage, localPatternTag } from './local-patterns';
 
 export function describeComposedExpose() {
   return composeExposeMessage([
     'ComposedExpose',
     sharedValue,
     mixedValue.scope,
-    describeModuleType(MixedClientBadge),
-    describeModuleType(remoteButton),
+    typeof MixedClientBadge,
     localPatternTag,
   ]);
 }

examples/rsbuild-rsc-federation-remote/src/rsc-consumer.ts

@@ -1,20 +1,14 @@
 'use server';
 
-import remoteButton from 'remote/Button';
 import { mixedValue, sharedValue } from 'rsbuild-rsc-federation-shared';
 import {
   mixedServerAction,
   sharedAction,
 } from 'rsbuild-rsc-federation-shared/server-actions';
-import { composeExposeMessage, describeModuleType } from './local-patterns';
+import { composeExposeMessage } from './local-patterns';
 
 export async function consumeRemoteAndShared() {
   await sharedAction();
   const mixedResponse = await mixedServerAction('consumer');
-  return composeExposeMessage([
-    sharedValue,
-    mixedResponse,
-    mixedValue.kind,
-    describeModuleType(remoteButton),
-  ]);
+  return composeExposeMessage([sharedValue, mixedResponse, mixedValue.kind]);
 }

examples/rsbuild-rsc-federation-remote/src/server-mixed-consumer.ts

@@ -1,15 +1,10 @@
 'use server';
 
-import remoteButton from 'remote/Button';
 import { mixedValue } from 'rsbuild-rsc-federation-shared';
 import { mixedServerAction } from 'rsbuild-rsc-federation-shared/server-actions';
-import { composeExposeMessage, describeModuleType } from './local-patterns';
+import { composeExposeMessage } from './local-patterns';
 
 export async function consumeMixedPatterns() {
   const mixedResponse = await mixedServerAction('server-mixed');
-  return composeExposeMessage([
-    mixedResponse,
-    mixedValue.kind,
-    describeModuleType(remoteButton),
-  ]);
+  return composeExposeMessage([mixedResponse, mixedValue.kind]);
 }

examples/rsbuild-rsc-federation/e2e/app.spec.ts

@@ -98,25 +98,42 @@ for (const app of appUrls) {
     const sharedNames = stats.shared.map(
       (shared: { name: string }) => shared.name,
     );
-    expect(sharedNames).toContain('rsc-shared-key');
-    expect(sharedNames).toContain('rsc-shared-actions-key');
+    expect(sharedNames).toContain('rsbuild-rsc-federation-shared');
+    expect(sharedNames).toContain(
+      'rsbuild-rsc-federation-shared/server-actions',
+    );
 
     const sharedActionsEntry = stats.shared.find(
       (shared: {
         name: string;
+        shareKey?: string;
         rsc?: { serverActions?: Array<{ id: string; name: string }> };
-      }) => shared.name === 'rsc-shared-actions-key',
+      }) => shared.name === 'rsbuild-rsc-federation-shared/server-actions',
     );
+    expect(sharedActionsEntry?.shareKey).toBe('rsc-shared-actions-key');
     expect(sharedActionsEntry?.rsc?.serverActions?.length).toBeGreaterThan(0);
 
-    const remoteEntry = stats.remotes.find(
-      (remote: {
-        alias: string;
-        moduleName: string;
-        rsc?: { lookup?: string };
-      }) => remote.alias === 'remote' && remote.moduleName === 'Button',
-    );
-    expect(remoteEntry?.rsc?.lookup).toBe('remote/Button');
+    if (app.name === 'host') {
+      expect(stats.name).toBe('rsbuild_host');
+      expect(manifest.name).toBe('rsbuild_host');
+      expect(clientStats.name).toBe('rsbuild_host');
+      expect(clientManifest.name).toBe('rsbuild_host');
+      const remoteEntry = stats.remotes.find(
+        (remote: {
+          alias: string;
+          moduleName: string;
+          rsc?: { lookup?: string };
+        }) => remote.alias === 'remote' && remote.moduleName === 'button',
+      );
+      expect(remoteEntry?.rsc?.lookup).toBe('remote/button');
+    } else {
+      expect(stats.name).toBe('rsbuild_remote');
+      expect(manifest.name).toBe('rsbuild_remote');
+      expect(clientStats.name).toBe('rsbuild_remote');
+      expect(clientManifest.name).toBe('rsbuild_remote');
+      expect(stats.remotes).toEqual([]);
+      expect(manifest.remotes).toEqual([]);
+    }
 
     expect(remoteEntryText).toContain('server-mixed');
     expect(remoteEntryText).toContain('composed');

examples/rsbuild-rsc-federation/rsbuild.config.ts

@@ -4,7 +4,7 @@ import { pluginReact } from '@rsbuild/plugin-react';
 import { rspack } from '@rspack/core';
 import { Layers, pluginRSC } from 'rsbuild-plugin-rsc';
 
-const containerName = 'rsbuild_container';
+const containerName = 'rsbuild_host';
 type EnvironmentName = 'server' | 'client';
 
 const unifiedExposes = {
@@ -109,7 +109,9 @@ export default defineConfig({
       const isServerBuild = target === 'node';
       const environment: EnvironmentName = isServerBuild ? 'server' : 'client';
       const remotes = {
-        remote: 'remote',
+        remote: isServerBuild
+          ? 'remote@http://localhost:3331/mf-manifest.json'
+          : 'remote@http://localhost:3331/mf-manifest.client.json',
       };
 
       if (isServerBuild) {
@@ -124,6 +126,7 @@ export default defineConfig({
           library: isServerBuild
             ? { type: 'commonjs-module' }
             : { type: 'var', name: containerName },
+          remoteType: 'script',
           manifest: isServerBuild ? true : { fileName: 'mf-manifest.client' },
           exposes: resolveExposes(environment),
           remotes,