feat(enhanced): add issuerLayer support to consume shared

module-federation · Nov 22, 2024 · aed08e9 · aed08e9
1 parent 536b110
commit aed08e9
Show file tree

Hide file tree

Showing 10 changed files with 333 additions and 207 deletions.
diff --git a/packages/enhanced/src/declarations/plugins/sharing/ConsumeSharedPlugin.d.ts b/packages/enhanced/src/declarations/plugins/sharing/ConsumeSharedPlugin.d.ts
@@ -75,4 +75,8 @@ export interface ConsumesConfig {
    * Share a specific layer of the module, if the module supports layers.
    */
   layer?: string;
+  /**
+   * Issuer layer for the shared module.
+   */
+  issuerLayer?: string;
 }
diff --git a/packages/enhanced/src/lib/sharing/ConsumeSharedModule.ts b/packages/enhanced/src/lib/sharing/ConsumeSharedModule.ts
@@ -82,6 +82,10 @@ export type ConsumeOptions = {
    * 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;
 };
 
 /**
@@ -95,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']);
@@ -128,10 +134,11 @@ class ConsumeSharedModule extends Module {
       singleton,
       eager,
       layer,
+      issuerLayer,
     } = this.options;
     return `${WEBPACK_MODULE_TYPE_CONSUME_SHARED_MODULE}|${shareScope}|${shareKey}|${
       requiredVersion && rangeToString(requiredVersion)
-    }|${strictVersion}|${importResolved}|${singleton}|${eager}|${layer}`;
+    }|${strictVersion}|${importResolved}|${singleton}|${eager}|${layer}|${issuerLayer}`;
   }
 
   /**
@@ -148,14 +155,17 @@ class ConsumeSharedModule extends Module {
       singleton,
       eager,
       layer,
+      issuerLayer,
     } = this.options;
     return `consume shared module (${shareScope}) ${shareKey}@${
       requiredVersion ? rangeToString(requiredVersion) : '*'
     }${strictVersion ? ' (strict)' : ''}${singleton ? ' (singleton)' : ''}${
       importResolved
         ? ` (fallback: ${requestShortener.shorten(importResolved)})`
         : ''
-    }${eager ? ' (eager)' : ''}${layer ? ` (${layer})` : ''}`;
+    }${eager ? ' (eager)' : ''}${layer ? ` (${layer})` : ''}${
+      issuerLayer ? ` (issuer: ${issuerLayer})` : ''
+    }`;
   }
 
   /**

diff --git a/packages/enhanced/src/lib/sharing/ConsumeSharedPlugin.ts b/packages/enhanced/src/lib/sharing/ConsumeSharedPlugin.ts
@@ -87,6 +87,7 @@ class ConsumeSharedPlugin {
                 singleton: false,
                 eager: false,
                 layer: undefined,
+                issuerLayer: undefined,
               }
             : // key is a request/key
               // item is a version
@@ -101,6 +102,7 @@ class ConsumeSharedPlugin {
                 singleton: false,
                 eager: false,
                 layer: undefined,
+                issuerLayer: undefined,
               };
         return result;
       },
@@ -118,7 +120,7 @@ class ConsumeSharedPlugin {
         packageName: item.packageName,
         singleton: !!item.singleton,
         eager: !!item.eager,
-        layer: item.layer ? item.layer : undefined,
+        issuerLayer: item.issuerLayer ? item.issuerLayer : undefined,
       }),
     );
   }
@@ -292,7 +294,7 @@ class ConsumeSharedPlugin {
         normalModuleFactory.hooks.factorize.tapPromise(
           PLUGIN_NAME,
           async (resolveData: ResolveData): Promise<Module | undefined> => {
-            const { context, request, dependencies } = resolveData;
+            const { context, request, dependencies, contextInfo } = resolveData;
             // wait for resolving to be complete
             //@ts-ignore
             return promise.then(() => {
@@ -302,8 +304,15 @@ class ConsumeSharedPlugin {
               ) {
                 return;
               }
-              const match = unresolvedConsumes.get(request);
+
+              const match = unresolvedConsumes.get(
+                contextInfo.issuerLayer
+                  ? contextInfo.issuerLayer + request
+                  : request,
+              );
+
               if (match !== undefined) {
+                debugger;
                 return createConsumeSharedModule(context, request, match);
               }
               for (const [prefix, options] of prefixedConsumes) {

diff --git a/packages/enhanced/src/lib/sharing/ProvideSharedPlugin.ts b/packages/enhanced/src/lib/sharing/ProvideSharedPlugin.ts
@@ -185,9 +185,6 @@ class ProvideSharedPlugin {
         normalModuleFactory.hooks.module.tap(
           'ProvideSharedPlugin',
           (module, { resource, resourceResolveData }, resolveData) => {
-            if (resource && resource.includes('/react')) {
-              debugger;
-            }
             if (resource && resolvedProvideMap.has(resource)) {
               return module;
             }

diff --git a/packages/enhanced/src/lib/sharing/resolveMatchedConfigs.ts b/packages/enhanced/src/lib/sharing/resolveMatchedConfigs.ts
@@ -72,8 +72,18 @@ export async function resolveMatchedConfigs<T>(
         // module request prefix
         prefixed.set(request, config);
       } else {
+        let req = request;
+        //@ts-ignore
+        if ('import' in config && config.import && request !== config.import) {
+          req = config.import as string;
+        }
+        //@ts-ignore
+        if ('issuerLayer' in config && config.issuerLayer) {
+          //@ts-ignore
+          req = config.issuerLayer + req;
+        }
         // module request
-        unresolved.set(request, config);
+        unresolved.set(req, config);
       }
     }),
   );

diff --git a/packages/enhanced/src/schemas/sharing/ConsumeSharedPlugin.check.ts b/packages/enhanced/src/schemas/sharing/ConsumeSharedPlugin.check.ts
@@ -48,6 +48,7 @@ const validateConsume: ValidationFunction = function validate(
           key !== 'shareScope' &&
           key !== 'singleton' &&
           key !== 'strictVersion' &&
+          key !== 'issuerLayer' &&
           key !== 'layer'
         ) {
           validate.errors = [{ params: { additionalProperty: key } }];

diff --git a/packages/enhanced/src/schemas/sharing/ConsumeSharedPlugin.json b/packages/enhanced/src/schemas/sharing/ConsumeSharedPlugin.json
@@ -43,6 +43,11 @@
             }
           ]
         },
+        "issuerLayer": {
+          "description": "Layer in which the issuer should be.",
+          "type": "string",
+          "minLength": 1
+        },
         "packageName": {
           "description": "Package name to determine required version from description file. This is only needed when package name can't be automatically determined from request.",
           "type": "string",
@@ -114,6 +119,14 @@
       "description": "Share scope name used for all consumed modules (defaults to 'default').",
       "type": "string",
       "minLength": 1
+    },
+    "layer": {
+      "description": "Layer in which modules should be placed in.",
+      "type": "string"
+    },
+    "issuerLayer": {
+      "description": "Layer in which the issuer should be.",
+      "type": "string"
     }
   },
   "required": ["consumes"]

diff --git a/packages/enhanced/test/configCases/sharing/layers/otherApp.js b/packages/enhanced/test/configCases/sharing/layers/otherApp.js
@@ -1,3 +1,5 @@
-import * as React from 'react';
+// import * as React from 'react';
+//
+// export default React;
 
-export default React;
+export default { version: 123 };
diff --git a/packages/enhanced/test/configCases/sharing/layers/webpack.config.js b/packages/enhanced/test/configCases/sharing/layers/webpack.config.js
@@ -1,4 +1,5 @@
 const { ConsumeSharedPlugin } = require('../../../../dist/src');
+const WConsumeSharedPlugin = require('webpack/lib/sharing/ConsumeSharedPlugin');
 
 module.exports = {
   mode: 'development',
@@ -27,7 +28,7 @@ module.exports = {
       },
       {
         test: /\.js$/,
-        issuerLayer: 'consume-share-layer',
+        issuerLayer: 'react-layer',
         layer: 'other-layer',
         use: './uppercase-loader.js',
       },
@@ -36,10 +37,10 @@ module.exports = {
   plugins: [
     new ConsumeSharedPlugin({
       consumes: {
-        // react: {
-        //   singleton: true,
-        //   layer: 'react-layer',
-        // },
+        react: {
+          singleton: true,
+          issuerLayer: 'loader-layer',
+        },
         otherReact: {
           import: 'react',
           shareKey: 'react',