feat(enhanced): support layers in consume share plugin

package.json

@@ -23,6 +23,7 @@
     "commit": "cz",
     "docs": "typedoc",
     "f": "nx format:write",
+    "enhanced:jest": "pnpm build && cd packages/enhanced && NODE_OPTIONS=--experimental-vm-modules npx jest test/ConfigTestCases.basictest.js",
     "lint": "nx run-many --target=lint",
     "test": "nx run-many --target=test",
     "build": "nx run-many --target=build --parallel=5  --projects=tag:type:pkg",
@@ -228,6 +229,7 @@
     "vue-tsc": "^2.0.26",
     "wait-on": "^7.2.0",
     "webpack": "5.93.0",
+    "webpack-cli": "^5.1.4",
     "webpack-virtual-modules": "0.6.2",
     "whatwg-fetch": "^3.6.20",
     "yargs": "^17.7.2"

packages/enhanced/src/declarations/plugins/sharing/ConsumeSharedPlugin.d.ts

@@ -71,4 +71,12 @@ export interface ConsumesConfig {
    * Do not accept shared module if version is not valid (defaults to yes, if local fallback module is available and shared module is not a singleton, otherwise no, has no effect if there is no required version specified).
    */
   strictVersion?: boolean;
+  /**
+   * Issuer layer in which the module should be resolved.
+   */
+  issuerLayer?: string;
+  /**
+   * Layer for the shared module.
+   */
+  layer?: string;
 }

packages/enhanced/src/declarations/plugins/sharing/SharePlugin.d.ts

@@ -75,4 +75,12 @@ export interface SharedConfig {
    * Version of the provided module. Will replace lower matching versions, but not higher.
    */
   version?: false | string;
+  /**
+   * Issuer layer in which the module should be resolved.
+   */
+  issuerLayer?: string;
+  /**
+   * Layer for the shared module.
+   */
+  layer?: string;
 }

packages/enhanced/src/lib/sharing/ConsumeSharedModule.ts

@@ -78,6 +78,14 @@ export type ConsumeOptions = {
    * include the fallback module in a sync way
    */
   eager: boolean;
+  /**
+   * Share a specific layer of the module, if the module supports layers
+   */
+  layer?: string | null;
+  /**
+   * Issuer layer in which the module should be resolved
+   */
+  issuerLayer?: string | null;
 };
 
 /**
@@ -91,6 +99,8 @@ export type ConsumeOptions = {
  * @property {boolean} strictVersion don't use shared version even if version isn't valid
  * @property {boolean} singleton use single global version
  * @property {boolean} eager include the fallback module in a sync way
+ * @property {string | null=} layer Share a specific layer of the module, if the module supports layers
+ * @property {string | null=} issuerLayer Issuer layer in which the module should be resolved
  */
 
 const TYPES = new Set(['consume-shared']);
@@ -103,7 +113,11 @@ class ConsumeSharedModule extends Module {
    * @param {ConsumeOptions} options consume options
    */
   constructor(context: string, options: ConsumeOptions) {
-    super(WEBPACK_MODULE_TYPE_CONSUME_SHARED_MODULE, context);
+    super(
+      WEBPACK_MODULE_TYPE_CONSUME_SHARED_MODULE,
+      context,
+      options.layer ?? undefined,
+    );
     this.options = options;
   }
 
@@ -119,10 +133,11 @@ class ConsumeSharedModule extends Module {
       strictVersion,
       singleton,
       eager,
+      layer,
     } = this.options;
     return `${WEBPACK_MODULE_TYPE_CONSUME_SHARED_MODULE}|${shareScope}|${shareKey}|${
       requiredVersion && rangeToString(requiredVersion)
-    }|${strictVersion}|${importResolved}|${singleton}|${eager}`;
+    }|${strictVersion}|${importResolved}|${singleton}|${eager}|${layer}`;
   }
 
   /**
@@ -138,14 +153,15 @@ class ConsumeSharedModule extends Module {
       strictVersion,
       singleton,
       eager,
+      layer,
     } = this.options;
     return `consume shared module (${shareScope}) ${shareKey}@${
       requiredVersion ? rangeToString(requiredVersion) : '*'
     }${strictVersion ? ' (strict)' : ''}${singleton ? ' (singleton)' : ''}${
       importResolved
         ? ` (fallback: ${requestShortener.shorten(importResolved)})`
         : ''
-    }${eager ? ' (eager)' : ''}`;
+    }${eager ? ' (eager)' : ''}${layer ? ` (${layer})` : ''}`;
   }
 
   /**

packages/enhanced/src/lib/sharing/ConsumeSharedPlugin.ts

@@ -9,7 +9,7 @@ import {
   normalizeWebpackPath,
 } from '@module-federation/sdk/normalize-webpack-path';
 import { isRequiredVersion } from '@module-federation/sdk';
-import type { Compiler, Compilation } from 'webpack';
+import type { Compiler, Compilation, Module } from 'webpack';
 import { parseOptions } from '../container/options';
 import { ConsumeOptions } from './ConsumeSharedModule';
 import { ConsumeSharedPluginOptions } from '../../declarations/plugins/sharing/ConsumeSharedPlugin';
@@ -29,6 +29,7 @@ import ProvideForSharedDependency from './ProvideForSharedDependency';
 import FederationRuntimePlugin from '../container/runtime/FederationRuntimePlugin';
 import ShareRuntimeModule from './ShareRuntimeModule';
 import type { SemVerRange } from 'webpack/lib/util/semver';
+import type { ResolveData } from 'webpack/lib/NormalModuleFactory';
 
 const ModuleNotFoundError = require(
   normalizeWebpackPath('webpack/lib/ModuleNotFoundError'),
@@ -48,17 +49,8 @@ const createSchemaValidation = require(
 
 const validate = createSchemaValidation(
   //eslint-disable-next-line
-  require(
-    normalizeWebpackPath(
-      'webpack/schemas/plugins/sharing/ConsumeSharedPlugin.check.js',
-    ),
-  ),
-  () =>
-    require(
-      normalizeWebpackPath(
-        'webpack/schemas/plugins/sharing/ConsumeSharedPlugin.json',
-      ),
-    ),
+  require('../../schemas/sharing/ConsumeSharedPlugin.check.js'),
+  () => require('../../schemas/sharing/ConsumeSharedPlugin'),
   {
     name: 'Consume Shared Plugin',
     baseDataPath: 'options',
@@ -94,6 +86,8 @@ class ConsumeSharedPlugin {
                 strictVersion: false,
                 singleton: false,
                 eager: false,
+                issuerLayer: undefined,
+                layer: undefined,
               }
             : // key is a request/key
               // item is a version
@@ -107,6 +101,8 @@ class ConsumeSharedPlugin {
                 packageName: undefined,
                 singleton: false,
                 eager: false,
+                issuerLayer: undefined,
+                layer: undefined,
               };
         return result;
       },
@@ -124,6 +120,8 @@ class ConsumeSharedPlugin {
         packageName: item.packageName,
         singleton: !!item.singleton,
         eager: !!item.eager,
+        issuerLayer: item.issuerLayer ? item.issuerLayer : undefined,
+        layer: item.layer ? item.layer : undefined,
       }),
     );
   }
@@ -296,33 +294,69 @@ class ConsumeSharedPlugin {
 
         normalModuleFactory.hooks.factorize.tapPromise(
           PLUGIN_NAME,
-          ({ context, request, dependencies }) =>
+          async (resolveData: ResolveData): Promise<Module | undefined> => {
+            const { context, request, dependencies, contextInfo } = resolveData;
             // wait for resolving to be complete
             //@ts-ignore
-            promise.then(() => {
+            return promise.then(() => {
               if (
                 dependencies[0] instanceof ConsumeSharedFallbackDependency ||
                 dependencies[0] instanceof ProvideForSharedDependency
               ) {
                 return;
               }
+
+              // First try to match with layer-specific request
+              if (contextInfo.issuerLayer) {
+                // Try to find a layer-specific match
+                for (const [key, options] of unresolvedConsumes) {
+                  if (
+                    options.issuerLayer === contextInfo.issuerLayer &&
+                    (key === request ||
+                      (options.import && options.import === request))
+                  ) {
+                    return createConsumeSharedModule(context, request, {
+                      ...options,
+                      layer: options.layer || contextInfo.issuerLayer,
+                    });
+                  }
+                }
+              }
+
+              // If no layer-specific match found, try regular matching
               const match = unresolvedConsumes.get(request);
               if (match !== undefined) {
-                return createConsumeSharedModule(context, request, match);
+                // Only use non-layer-specific match if it doesn't have issuerLayer
+                if (!match.issuerLayer) {
+                  return createConsumeSharedModule(context, request, {
+                    ...match,
+                    layer: match.layer || contextInfo.issuerLayer,
+                  });
+                }
               }
+
+              // Check prefixed consumes
               for (const [prefix, options] of prefixedConsumes) {
                 if (request.startsWith(prefix)) {
-                  const remainder = request.slice(prefix.length);
-                  return createConsumeSharedModule(context, request, {
-                    ...options,
-                    import: options.import
-                      ? options.import + remainder
-                      : undefined,
-                    shareKey: options.shareKey + remainder,
-                  });
+                  // Only use prefixed consume if layer matches or no layer specified
+                  if (
+                    !options.issuerLayer ||
+                    options.issuerLayer === contextInfo.issuerLayer
+                  ) {
+                    const remainder = request.slice(prefix.length);
+                    return createConsumeSharedModule(context, request, {
+                      ...options,
+                      import: options.import
+                        ? options.import + remainder
+                        : undefined,
+                      shareKey: options.shareKey + remainder,
+                      layer: options.layer || contextInfo.issuerLayer,
+                    });
+                  }
                 }
               }
-            }),
+            });
+          },
         );
         normalModuleFactory.hooks.createModule.tapPromise(
           PLUGIN_NAME,

packages/enhanced/src/lib/sharing/SharePlugin.ts

@@ -52,6 +52,8 @@ class SharePlugin {
           singleton: options.singleton,
           packageName: options.packageName,
           eager: options.eager,
+          issuerLayer: options.issuerLayer,
+          layer: options.layer,
         },
       }),
     );