feat(mf): add partial application to withFederation for DX

Author: manfredsteyer

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

@@ -55,8 +55,8 @@ export function toRuntimeConfig(
 ): UserOptions {
   return {
     //
-    // The runtime assumes an empty string as the name for 
-    // the host. Alternatively, we have to pass the same  
+    // 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)
     //

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

@@ -9,11 +9,25 @@ export type FederationConfig = {
   skip?: SkipList;
 };
 
-export type FederationOptions =  Omit<ModuleFederationConfig['options'], 'name'> & {
+export type FederationOptions = Omit<
+  ModuleFederationConfig['options'],
+  'name'
+> & {
   name?: string;
+};
+
+export function withFederation(config: FederationConfig) {
+  // 
+  // This provides partial application for better DX,
+  // as it allows to split the config into a file with
+  // rsbuild and an other one with federation settings
+  //
+  return (rsbuildConfig: RsbuildConfig) => {
+    return applyFederation(rsbuildConfig, config);
+  };
 }
 
-export function withFederation(
+export function applyFederation(
   rsbuildConfig: RsbuildConfig,
   federationConfig: FederationConfig
 ): RsbuildConfig {
@@ -83,7 +97,7 @@ export function withFederation(
         //
         // Shells use an empty name by default
         // Alternative: Specifiying the *same* name
-        // in initFederation (runtime) and 
+        // in initFederation (runtime) and
         // withFederation (build time)
         //
         name: '',

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

@@ -0,0 +1,31 @@
+import { withFederation, shareAll } from '@angular-architects/module-federation/rspack'
+
+export default withFederation({
+  options: {
+<% if (type === 'remote') { %>
+    name: '<%=project%>',
+
+    exposes: {
+      './Component': './src/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/
+  ]
+});

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

@@ -1,5 +1,5 @@
 import { createConfig } from '@ng-rsbuild/plugin-angular';
-import { withFederation, shareAll } from '@angular-architects/module-federation/rspack'
+import applyFederation from './federation.config';
 
 const rsbuildConfig = createConfig(
   {
@@ -12,32 +12,4 @@ const rsbuildConfig = createConfig(
   }
 );
 
-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/
-  ]
-});
+export default applyFederation(rsbuildConfig);

libs/mf/src/schematics/init-rspack/schematic.ts

@@ -278,7 +278,11 @@ function updatePackageJson(
   tree.overwrite('package.json', JSON.stringify(packageJson, null, 2));
 }
 
-function printScriptInfo(projectRoot: string, startScriptName: string, buildScriptName: string) {
+function printScriptInfo(
+  projectRoot: string,
+  startScriptName: string,
+  buildScriptName: string
+) {
   console.info();
   console.info(
     `[INFO] Please remember that the rspack integration is in early stages`

libs/mf/src/schematics/init/schema.d.ts

@@ -3,5 +3,5 @@ export interface InitSchema {
   port: string | number;
   nxBuilders: boolean | undefined;
   type: 'host' | 'dynamic-host' | 'remote' | 'legacy';
-  stack: 'webpack' | 'rsbuild' | 'native'
+  stack: 'webpack' | 'rsbuild' | 'native';
 }

libs/mf/src/schematics/init/schematic.ts

@@ -1,9 +1,4 @@
-import {
-  chain,
-  Rule,
-  schematic,
-  noop,
-} from '@angular-devkit/schematics';
+import { chain, Rule, schematic, noop } from '@angular-devkit/schematics';
 
 import {
   NodePackageInstallTask,

libs/mf/src/schematics/patch/schematic.ts

@@ -1,29 +1,30 @@
-import { noop, Rule } from "@angular-devkit/schematics";
-import { execSync } from "child_process";
+import { noop, Rule } from '@angular-devkit/schematics';
+import { execSync } from 'child_process';
 
-// 
-// Schematic for patching Angular for rsbuild integration while experimental. 
+//
+// Schematic for patching Angular for rsbuild integration while experimental.
 // Will be removed when stable!
 // Called via the init-rspack schematic to execute it AFTER the task running
 // npm install
-// 
+//
 
 export default function init(options: { workspaceRoot: string }): Rule {
   return async function () {
-
-    const cmd = 'node node_modules/@ng-rsbuild/plugin-angular/patch/patch-angular-build.js';
+    const cmd =
+      'node node_modules/@ng-rsbuild/plugin-angular/patch/patch-angular-build.js';
 
     try {
-        execSync(cmd, {
-            cwd: options.workspaceRoot
-        });
-    }
-    catch(e) {
-        console.error('Error patching Angular for rspack');
-        console.error('This is only needed while the rspack integration is experimental');
-        console.error('Try to run this command by hand:')
-        console.error('\t' + cmd);
-        console.error('Error', e);
+      execSync(cmd, {
+        cwd: options.workspaceRoot,
+      });
+    } catch (e) {
+      console.error('Error patching Angular for rspack');
+      console.error(
+        'This is only needed while the rspack integration is experimental'
+      );
+      console.error('Try to run this command by hand:');
+      console.error('\t' + cmd);
+      console.error('Error', e);
     }
 
     return noop();