feat(mf): add schematic for rspack

Author: manfredsteyer

libs/mf-runtime/enhanced/src/lib/init-federation.ts

@@ -49,13 +49,18 @@ export async function initFederation(
   return init(runtimeConfig);
 }
 
-// TODO: Consider making internal
 export function toRuntimeConfig(
   config: Manifest<RemoteConfig>,
   options?: InitFederationOptions
 ): UserOptions {
   return {
-    name: 'shell',
+    //
+    // The runtime assumes an empty string as the name for 
+    // the host. Alternatively, we have to pass the same  
+    // name to withFederation (compile time config) and
+    // initFederation (runtime time config on app start)
+    //
+    name: '',
     ...options?.runtimeOptions,
     remotes: [
       ...(options?.runtimeOptions?.remotes ?? []),
@@ -94,7 +99,6 @@ export async function loadManifest<T extends Manifest = Manifest>(
   return config as T;
 }
 
-// TODO: Consider making internal
 export function parseConfig(config: ManifestFile): Manifest {
   const result: Manifest = {};
   for (const key in config) {

libs/mf/collection.json

@@ -4,15 +4,25 @@
   "version": "0.0.1",
   "schematics": {
     "ng-add": {
-      "factory": "./src/schematics/mf/schematic#add",
-      "schema": "./src/schematics/mf/schema.json",
-      "description": "Initialize an angular project for webpack module federation"
+      "factory": "./src/schematics/init/schematic#init",
+      "schema": "./src/schematics/init/schema.json",
+      "description": "Initialize an angular project for module federation"
     },
     "init": {
       "factory": "./src/schematics/init/schematic#init",
       "schema": "./src/schematics/init/schema.json",
       "description": "Initialize an angular project for module federation"
     },
+    "init-webpack": {
+      "factory": "./src/schematics/init-webpack/schematic#init",
+      "schema": "./src/schematics/init-webpack/schema.json",
+      "description": "Initialize an angular project for webpack module federation"
+    },
+    "init-rspack": {
+      "factory": "./src/schematics/init-rspack/schematic#init",
+      "schema": "./src/schematics/init-rspack/schema.json",
+      "description": "Initialize an angular project for rspack module federation"
+    },
     "config": {
       "factory": "./src/schematics/mf/schematic",
       "schema": "./src/schematics/mf/schema.json",
@@ -32,6 +42,11 @@
       "factory": "./src/schematics/remove/schematic",
       "schema": "./src/schematics/remove/schema.json",
       "description": "Removes Module Federation"
+    },
+    "patch": {
+      "factory": "./src/schematics/patch/schematic",
+      "description": "Patching Angular for rsbuild integration while experimental. Will be removed when stable!",
+      "private": true
     }
   }
 }

libs/mf/src/rspack/with-federation.ts

@@ -4,21 +4,25 @@ import { applySkipList, normalizeSkipList, SkipList } from '../utils/skip-list';
 import { SharedObject } from '@module-federation/enhanced/dist/src/declarations/plugins/sharing/SharePlugin';
 import { findRootTsConfigJson, SharedMappings } from '../webpack';
 
-export type FederationConfig = ModuleFederationConfig & {
+export type FederationConfig = {
+  options: FederationOptions;
   skip?: SkipList;
 };
 
+export type FederationOptions =  Omit<ModuleFederationConfig['options'], 'name'> & {
+  name?: string;
+}
+
 export function withFederation(
   rsbuildConfig: RsbuildConfig,
   federationConfig: FederationConfig
 ): RsbuildConfig {
   const { skip, ...mfConfig } = federationConfig;
   const normalizedSkip = normalizeSkipList(skip);
-  const shared = (mfConfig.options.shared ?? {}) as SharedObject;
-
   const mappings = new SharedMappings();
   mappings.register(findRootTsConfigJson());
 
+  const shared = (mfConfig.options.shared ?? {}) as SharedObject;
   const sharedWithLibs = {
     ...mappings.getDescriptors(),
     ...shared,
@@ -76,6 +80,13 @@ export function withFederation(
     moduleFederation: {
       ...mfConfig,
       options: {
+        //
+        // Shells use an empty name by default
+        // Alternative: Specifiying the *same* name
+        // in initFederation (runtime) and 
+        // withFederation (build time)
+        //
+        name: '',
         ...mfConfig.options,
         library: {
           ...mfConfig.options.library,

libs/mf/src/schematics/boot-async/schematic.ts

@@ -1,6 +1,6 @@
 import path = require('path');
 import { noop } from 'rxjs';
-import { getWorkspaceFileName } from '../mf/schematic';
+import { getWorkspaceFileName } from '../init-webpack/schematic';
 import { BootAsyncSchema } from './schema';
 import { Rule } from '@angular-devkit/schematics';
 

libs/mf/src/schematics/init-rspack/files/rsbuild.config.ts__tmpl__

@@ -0,0 +1,43 @@
+import { createConfig } from '@ng-rsbuild/plugin-angular';
+import { withFederation, shareAll } from '@angular-architects/module-federation/rspack'
+
+const rsbuildConfig = createConfig(
+  {
+    browser: './src/main.ts',
+  },
+  {
+    server: {
+      port: <%=port%>,
+    },
+  }
+);
+
+export default withFederation(rsbuildConfig, {
+  options: {
+<% if (type === 'remote') { %>
+    name: '<%=project%>',
+
+    exposes: {
+      './Component': './<%=projectSourceRoot%>/app/app.component.ts',
+    },
+<% } else if (type === 'host') { %>
+    remotes: {<% for (key in remoteMap) { %>
+      "<%=key%>": "<%=remoteMap[key]%>",<% } %>    
+    },
+<% } %>
+    shared: {
+      ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
+    },
+
+  },
+  skip: [
+    // Add the names of packages, entrypoints 
+    // and libs you don't want to share here
+    // Strings are compared with ===
+
+    // Examples:
+    // 'rxjs/ajax'
+    // p => p.startsWith('rxjs/ajax')
+    // /^rxjs\/ajax/
+  ]
+});