feat(module-federation): add nx-runtime-library-control-plugin

nrwl · Jul 17, 2024 · de407f8 · de407f8
1 parent 3a40d37
commit de407f8
Show file tree

Hide file tree

Showing 18 changed files with 441 additions and 1,302 deletions.
diff --git a/packages/angular/ng-package.json b/packages/angular/ng-package.json
@@ -25,7 +25,8 @@
     "magic-string",
     "enquirer",
     "find-cache-dir",
-    "piscina"
+    "piscina",
+    "webpack"
   ],
   "keepLifecycleScripts": true
 }
diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -57,6 +57,7 @@
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
+    "webpack": "^5.88.0",
     "@module-federation/enhanced": "~0.2.3",
     "@nx/devkit": "file:../devkit",
     "@nx/js": "file:../js",

diff --git a/packages/angular/src/builders/module-federation-dev-ssr/module-federation-dev-ssr.impl.ts b/packages/angular/src/builders/module-federation-dev-ssr/module-federation-dev-ssr.impl.ts
@@ -60,6 +60,9 @@ export function executeModuleFederationDevSSRBuilder(
     ? options.devRemotes
     : [options.devRemotes];
 
+  // Set NX_MF_DEV_REMOTES for the Nx Runtime Library Control Plugin
+  process.env.NX_MF_DEV_REMOTES = JSON.stringify(devServeRemotes);
+
   validateDevRemotes({ devRemotes: devServeRemotes }, workspaceProjects);
 
   const remotesToSkip = new Set(options.skipRemotes ?? []);

diff --git a/...s/angular/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts b/...s/angular/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts
@@ -123,6 +123,11 @@ export async function* moduleFederationDevServerExecutor(
     pathToManifestFile
   );
 
+  // Set NX_MF_DEV_REMOTES for the Nx Runtime Library Control Plugin
+  process.env.NX_MF_DEV_REMOTES = JSON.stringify(
+    remotes.devRemotes.map((r) => (typeof r === 'string' ? r : r.remoteName))
+  );
+
   if (remotes.devRemotes.length > 0 && !schema.staticRemotesPort) {
     options.staticRemotesPort = options.devRemotes.reduce((portToUse, r) => {
       const remoteName = typeof r === 'string' ? r : r.remoteName;

diff --git a/packages/angular/src/generators/utils/add-mf-env-to-inputs.ts b/packages/angular/src/generators/utils/add-mf-env-to-inputs.ts
@@ -3,7 +3,7 @@ import { type Tree, readNxJson, updateNxJson } from '@nx/devkit';
 export function addMfEnvToTargetDefaultInputs(tree: Tree) {
   const nxJson = readNxJson(tree);
   const webpackExecutor = '@nx/angular:webpack-browser';
-  const mfEnvVar = 'NX_MF_DEV_SERVER_STATIC_REMOTES';
+  const mfEnvVar = 'NX_MF_DEV_REMOTES';
 
   nxJson.targetDefaults ??= {};
   nxJson.targetDefaults[webpackExecutor] ??= {};

diff --git a/packages/angular/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.spec.ts b/packages/angular/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.spec.ts
@@ -29,7 +29,7 @@ describe('addMfEnvVarToTargetDefaults', () => {
             "production",
             "^production",
             {
-              "env": "NX_MF_DEV_SERVER_STATIC_REMOTES",
+              "env": "NX_MF_DEV_REMOTES",
             },
           ],
         },
@@ -109,7 +109,7 @@ describe('addMfEnvVarToTargetDefaults', () => {
           "inputs": [
             "^build",
             {
-              "env": "NX_MF_DEV_SERVER_STATIC_REMOTES",
+              "env": "NX_MF_DEV_REMOTES",
             },
           ],
         },

diff --git a/packages/angular/src/utils/mf/with-module-federation-ssr.ts b/packages/angular/src/utils/mf/with-module-federation-ssr.ts
@@ -11,52 +11,79 @@ export async function withModuleFederationForSSR(
   if (global.NX_GRAPH_CREATION) {
     return (config) => config;
   }
+
+  options.useNxLibraryControlPlugin ??= true;
+
   const { sharedLibraries, sharedDependencies, mappedRemotes } =
     await getModuleFederationConfig(options, {
       isServer: true,
     });
 
-  return (config) => ({
-    ...(config ?? {}),
-    target: false,
-    output: {
-      ...(config.output ?? {}),
-      uniqueName: options.name,
-    },
-    optimization: {
-      ...(config.optimization ?? {}),
-      runtimeChunk: false,
-    },
-    resolve: {
-      ...(config.resolve ?? {}),
-      alias: {
-        ...(config.resolve?.alias ?? {}),
-        ...sharedLibraries.getAliases(),
+  return (config) => {
+    const updatedConfig = {
+      ...(config ?? {}),
+      target: false,
+      output: {
+        ...(config.output ?? {}),
+        uniqueName: options.name,
       },
-    },
-    plugins: [
-      ...(config.plugins ?? []),
-      new (require('@module-federation/node').UniversalFederationPlugin)(
-        {
-          name: options.name,
-          filename: 'remoteEntry.js',
-          exposes: options.exposes,
-          remotes: mappedRemotes,
-          shared: {
-            ...sharedDependencies,
-          },
-          library: {
-            type: 'commonjs-module',
-          },
-          isServer: true,
-          /**
-           * Apply user-defined config override
-           */
-          ...(configOverride ? configOverride : {}),
+      optimization: {
+        ...(config.optimization ?? {}),
+        runtimeChunk: false,
+      },
+      resolve: {
+        ...(config.resolve ?? {}),
+        alias: {
+          ...(config.resolve?.alias ?? {}),
+          ...sharedLibraries.getAliases(),
         },
-        {}
-      ),
-      sharedLibraries.getReplacementPlugin(),
-    ],
-  });
+      },
+      plugins: [
+        ...(config.plugins ?? []),
+        new (require('@module-federation/node').UniversalFederationPlugin)(
+          {
+            name: options.name,
+            filename: 'remoteEntry.js',
+            exposes: options.exposes,
+            remotes: mappedRemotes,
+            shared: {
+              ...sharedDependencies,
+            },
+            library: {
+              type: 'commonjs-module',
+            },
+            isServer: true,
+            /**
+             * Apply user-defined config override
+             */
+            ...(configOverride ? configOverride : {}),
+            runtimePlugins:
+              process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin
+                ? [
+                    ...(configOverride?.runtimePlugins ?? []),
+                    require.resolve(
+                      '@nx/webpack/src/utils/module-federation/plugins/runtime-library-control.plugin.js'
+                    ),
+                  ]
+                : configOverride?.runtimePlugins,
+          },
+          {}
+        ),
+        sharedLibraries.getReplacementPlugin(),
+      ],
+    };
+
+    if (process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin) {
+      // The env var is only set from the module-federation-dev-server
+      // Attach the runtime plugin
+
+      updatedConfig.plugins.push(
+        new (require('webpack').DefinePlugin)({
+          'process.env.NX_MF_DEV_REMOTES': process.env.NX_MF_DEV_REMOTES,
+        })
+      );
+    }
+
+    return updatedConfig;
+  };
 }
diff --git a/packages/angular/src/utils/mf/with-module-federation.ts b/packages/angular/src/utils/mf/with-module-federation.ts
@@ -12,50 +12,77 @@ export async function withModuleFederation(
   if (global.NX_GRAPH_CREATION) {
     return (config) => config;
   }
+
+  options.useNxLibraryControlPlugin ??= true;
+
   const { sharedLibraries, sharedDependencies, mappedRemotes } =
     await getModuleFederationConfig(options);
 
-  return (config) => ({
-    ...(config ?? {}),
-    output: {
-      ...(config.output ?? {}),
-      uniqueName: options.name,
-      publicPath: 'auto',
-    },
-    optimization: {
-      ...(config.optimization ?? {}),
-      runtimeChunk: false,
-    },
-    resolve: {
-      ...(config.resolve ?? {}),
-      alias: {
-        ...(config.resolve?.alias ?? {}),
-        ...sharedLibraries.getAliases(),
+  return (config) => {
+    const updatedConfig = {
+      ...(config ?? {}),
+      output: {
+        ...(config.output ?? {}),
+        uniqueName: options.name,
+        publicPath: 'auto',
       },
-    },
-    experiments: {
-      ...(config.experiments ?? {}),
-      outputModule: true,
-    },
-    plugins: [
-      ...(config.plugins ?? []),
-      new ModuleFederationPlugin({
-        name: options.name,
-        filename: 'remoteEntry.mjs',
-        exposes: options.exposes,
-        remotes: mappedRemotes,
-        shared: {
-          ...sharedDependencies,
-        },
-        library: {
-          type: 'module',
+      optimization: {
+        ...(config.optimization ?? {}),
+        runtimeChunk: false,
+      },
+      resolve: {
+        ...(config.resolve ?? {}),
+        alias: {
+          ...(config.resolve?.alias ?? {}),
+          ...sharedLibraries.getAliases(),
         },
-        /**
-         * Apply user-defined config override
-         */
-        ...(configOverride ? configOverride : {}),
-      }),
-      sharedLibraries.getReplacementPlugin(),
-    ],
-  });
+      },
+      experiments: {
+        ...(config.experiments ?? {}),
+        outputModule: true,
+      },
+      plugins: [
+        ...(config.plugins ?? []),
+        new ModuleFederationPlugin({
+          name: options.name,
+          filename: 'remoteEntry.mjs',
+          exposes: options.exposes,
+          remotes: mappedRemotes,
+          shared: {
+            ...sharedDependencies,
+          },
+          library: {
+            type: 'module',
+          },
+          /**
+           * Apply user-defined config override
+           */
+          ...(configOverride ? configOverride : {}),
+          runtimePlugins:
+            process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin
+              ? [
+                  ...(configOverride?.runtimePlugins ?? []),
+                  require.resolve(
+                    '@nx/webpack/src/utils/module-federation/plugins/runtime-library-control.plugin.js'
+                  ),
+                ]
+              : configOverride?.runtimePlugins,
+        }),
+        sharedLibraries.getReplacementPlugin(),
+      ],
+    };
+
+    if (process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin) {
+      // The env var is only set from the module-federation-dev-server
+      // Attach the runtime plugin
+
+      updatedConfig.plugins.push(
+        new (require('webpack').DefinePlugin)({
+          'process.env.NX_MF_DEV_REMOTES': process.env.NX_MF_DEV_REMOTES,
+        })
+      );
+    }
+
+    return updatedConfig;
+  };
 }
diff --git a/...ges/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts b/...ges/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts
@@ -345,6 +345,11 @@ export default async function* moduleFederationDevServer(
     pathToManifestFile
   );
 
+  // Set NX_MF_DEV_REMOTES for the Nx Runtime Library Control Plugin
+  process.env.NX_MF_DEV_REMOTES = JSON.stringify(
+    remotes.devRemotes.map((r) => (typeof r === 'string' ? r : r.remoteName))
+  );
+
   if (remotes.devRemotes.length > 0 && !initialStaticRemotesPorts) {
     options.staticRemotesPort = options.devRemotes.reduce((portToUse, r) => {
       const remoteName = typeof r === 'string' ? r : r.remoteName;

diff --git a/...t/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts b/...t/src/executors/module-federation-ssr-dev-server/module-federation-ssr-dev-server.impl.ts
@@ -120,6 +120,9 @@ export default async function* moduleFederationSsrDevServer(
     ? options.devRemotes
     : [options.devRemotes];
 
+  // Set NX_MF_DEV_REMOTES for the Nx Runtime Library Control Plugin
+  process.env.NX_MF_DEV_REMOTES = JSON.stringify(devServeApps);
+
   for (const app of knownRemotes) {
     const [appName] = Array.isArray(app) ? app : [app];
     const isDev = devServeApps.includes(appName);

diff --git a/packages/react/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.spec.ts b/packages/react/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.spec.ts
@@ -28,7 +28,7 @@ describe('addMfEnvVarToTargetDefaults', () => {
             "production",
             "^production",
             {
-              "env": "NX_MF_DEV_SERVER_STATIC_REMOTES",
+              "env": "NX_MF_DEV_REMOTES",
             },
           ],
         },
@@ -109,7 +109,7 @@ describe('addMfEnvVarToTargetDefaults', () => {
           "inputs": [
             "^build",
             {
-              "env": "NX_MF_DEV_SERVER_STATIC_REMOTES",
+              "env": "NX_MF_DEV_REMOTES",
             },
           ],
         },

diff --git a/packages/react/src/module-federation/with-module-federation-ssr.ts b/packages/react/src/module-federation/with-module-federation-ssr.ts
@@ -12,6 +12,8 @@ export async function withModuleFederationForSSR(
     return (config) => config;
   }
 
+  options.useNxLibraryControlPlugin ??= true;
+
   const { sharedLibraries, sharedDependencies, mappedRemotes } =
     await getModuleFederationConfig(options, {
       isServer: true,
@@ -42,12 +44,32 @@ export async function withModuleFederationForSSR(
            * Apply user-defined config overrides
            */
           ...(configOverride ? configOverride : {}),
+          runtimePlugins:
+            process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin
+              ? [
+                  ...(configOverride?.runtimePlugins ?? []),
+                  require.resolve(
+                    '@nx/webpack/src/utils/module-federation/plugins/runtime-library-control.plugin.js'
+                  ),
+                ]
+              : configOverride?.runtimePlugins,
         },
         {}
       ),
       sharedLibraries.getReplacementPlugin()
     );
 
+    if (process.env.NX_MF_DEV_REMOTES && options.useNxLibraryControlPlugin) {
+      // The env var is only set from the module-federation-dev-server
+      // Attach the runtime plugin
+
+      config.plugins.push(
+        new (require('webpack').DefinePlugin)({
+          'process.env.NX_MF_DEV_REMOTES': process.env.NX_MF_DEV_REMOTES,
+        })
+      );
+    }
+
     return config;
   };
 }