feat(mf): add support for eager and pinned

Author: manfredsteyer

libs/mf/src/utils/modify-entry-plugin.ts

@@ -0,0 +1,32 @@
+export class ModifyEntryPlugin {
+  config: unknown;
+  constructor(config) {
+    this.config = config;
+  }
+
+  apply(compiler) {
+    const mergeEntry = (keyFn, key) => [
+      ...(keyFn(this.config[key]) || []),
+      ...(keyFn(compiler.options.entry[key]) || []),
+    ];
+    const cfgOrRemove = (objFn, valueFn, key) => {
+      const values = mergeEntry(valueFn, key);
+      return values.length > 0 ? objFn(values) : {};
+    };
+    Object.keys(this.config).forEach((key) => {
+      compiler.options.entry[key] = {
+        ...cfgOrRemove(
+          (v) => ({ import: v }),
+          (c) => c.import,
+          key
+        ),
+        ...cfgOrRemove(
+          (v) => ({ dependOn: v }),
+          (c) => c.dependOn,
+          key
+        ),
+      };
+    });
+  }
+}
+

libs/mf/src/utils/with-mf-plugin.ts

@@ -1,5 +1,6 @@
 import { findRootTsConfigJson, shareAll } from './share-utils';
 import { SharedMappings } from './shared-mappings';
+import { ModifyEntryPlugin } from './modify-entry-plugin';
 
 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 
@@ -11,37 +12,13 @@ export function withModuleFederationPlugin(config: unknown) {
     const mappings = new SharedMappings();
     mappings.register(findRootTsConfigJson(), sharedMappings);
 
-    if (!config['library']) {
-        config['library'] = {
-            type: 'module'
-        }
-    }
-
-    if (!config['filename']) {
-        config['filename'] = 'remoteEntry.js';
-    }
-
-    if (!config['shared']) {
-        config['shared'] = shareAll(
-            { singleton: true, strictVersion: true, requiredVersion: 'auto'});
-    }
-
-    if (typeof config['shared'] === 'object') {
-        config['shared'] = {
-            ...config['shared'],
-            ...mappings.getDescriptors()
-        }
-    }
-
-    if (Array.isArray(config['shared'])) {
-        config['shared'] = [
-            ...config['shared'],
-            mappings.getDescriptors()
-        ]
-    }
+    setDefaults(config, mappings);
+    const modifyEntryPlugin = createModifyEntryPlugin(config);
 
     const isModule = config['library']?.['type'] === 'module';
 
+    // console.log('sharedConfig.modFed', sharedConfig.modFed);
+
     return {
         output: {
           publicPath: "auto"
@@ -61,7 +38,80 @@ export function withModuleFederationPlugin(config: unknown) {
         } : {},
         plugins: [
           new ModuleFederationPlugin(config),
-          mappings.getPlugin()
+          mappings.getPlugin(),
+          ...(modifyEntryPlugin) ? [modifyEntryPlugin] : []
         ],
       };
-}  
+}  
+
+function setDefaults(config: unknown, mappings: SharedMappings) {
+  if (!config['library']) {
+    config['library'] = {
+      type: 'module'
+    };
+  }
+
+  if (!config['filename']) {
+    config['filename'] = 'remoteEntry.js';
+  }
+
+  if (!config['shared']) {
+    config['shared'] = shareAll(
+      { singleton: true, strictVersion: true, requiredVersion: 'auto' });
+  }
+
+  if (typeof config['shared'] === 'object') {
+    config['shared'] = {
+      ...config['shared'],
+      ...mappings.getDescriptors()
+    };
+  }
+
+  if (Array.isArray(config['shared'])) {
+    config['shared'] = [
+      ...config['shared'],
+      mappings.getDescriptors()
+    ];
+  }
+}
+
+function createModifyEntryPlugin(config: unknown) {
+  const pinned = [];
+  const eager = [];
+  for (const key in config['shared']) {
+    const entry = config['shared'][key];
+    if (entry.pinned) {
+      pinned.push(key);
+      delete entry.pinned;
+    }
+    if (entry.eager) {
+      eager.push(key);
+    }
+  }
+  const hasPinned = pinned.length > 0;
+  const hasEager = eager.length > 0;
+
+  if (hasPinned && config['remotes']) {
+    throw new Error([
+      'Pinned dependencies in combination with build-time remotes are not allowed. ',
+      'Either remove "pinned: true" from all shared dependencies or delete all ',
+      'remotes in your webpack config and use runtime remote loading instead.'
+    ].join(''));
+  }
+
+  let modifyEntryConfig = {};
+  let modifyEntryPlugin = null;
+  if (hasPinned) {
+    modifyEntryConfig['main'] = { import: pinned };
+  }
+
+  if (hasEager) {
+    modifyEntryConfig['styles'] = { dependOn: ['main'] };
+    modifyEntryConfig['polyfills'] = { dependOn: ['main'] };
+  }
+
+  if (hasPinned || hasEager) {
+    modifyEntryPlugin = new ModifyEntryPlugin(modifyEntryConfig);
+  }
+  return modifyEntryPlugin;
+}