feat(enhanced): layers support in module code generation (#3371)

Author: ScriptedAlchemy

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

@@ -212,6 +212,7 @@ class ProvideSharedModule extends Module {
         requiredVersion: this._requiredVersion,
         strictVersion: this._strictVersion,
         singleton: this._singleton,
+        layer: this.layer
       },
     });
     return { sources, data, runtimeRequirements };

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

@@ -39,6 +39,7 @@ class ProvideSharedModuleFactory extends ModuleFactory {
         dep.requiredVersion,
         dep.strictVersion,
         dep.singleton,
+        dep.layer
       ),
     });
   }

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

@@ -265,6 +265,7 @@ class ProvideSharedPlugin {
                     config.requiredVersion!,
                     config.strictVersion!,
                     config.singleton!,
+                    config.layer
                   ),
                   {
                     name: undefined,

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

@@ -74,10 +74,14 @@ class ShareRuntimeModule extends RuntimeModule {
         if (sharedOption) {
           sharedInitOptions[sharedOption.name] =
             sharedInitOptions[sharedOption.name] || [];
-          const isSameVersion = sharedInitOptions[sharedOption.name].find(
-            (s) => s.version === sharedOption.version,
+          const isSameVersionAndLayer = sharedInitOptions[
+            sharedOption.name
+          ].find(
+            (s) =>
+              s.version === sharedOption.version &&
+              s.shareConfig?.layer === sharedOption.shareConfig?.layer,
           );
-          if (!isSameVersion) {
+          if (!isSameVersionAndLayer) {
             sharedInitOptions[sharedOption.name].push(sharedOption);
           }
         }
@@ -88,18 +92,19 @@ class ShareRuntimeModule extends RuntimeModule {
       (sum, sharedName) => {
         const sharedOptions = sharedInitOptions[sharedName];
         let str = '';
-        sharedOptions.forEach((sharedOption) => {
+
+        // Ensure all options are included without filtering
+        sharedOptions.forEach((option) => {
           str += `{${Template.indent([
-            `version: ${sharedOption.version},`,
-            `get: ${sharedOption.getter},`,
-            `scope: ${JSON.stringify(sharedOption.shareScope)},`,
-            `shareConfig: ${JSON.stringify(sharedOption.shareConfig)}`,
+            `version: ${option.version},`,
+            `get: ${option.getter},`,
+            `scope: ${JSON.stringify(option.shareScope)},`,
+            `shareConfig: ${JSON.stringify(option.shareConfig)}`,
           ])}},`;
         });
-        str = `[${str}]`;
 
+        str = `[${str}]`;
         sum += `${Template.indent([`"${sharedName}": ${str},`])}`;
-
         return sum;
       },
       '',
@@ -108,6 +113,42 @@ class ShareRuntimeModule extends RuntimeModule {
     const federationGlobal = getFederationGlobalScope(
       RuntimeGlobals || ({} as typeof RuntimeGlobals),
     );
+
+    // Group shared modules by scope and layer
+    const scopedModules = new Map<
+      string,
+      Map<string | undefined, Set<string>>
+    >();
+    for (const [scopeName, stages] of initCodePerScope) {
+      const layeredModules = new Map<string | undefined, Set<string>>();
+      scopedModules.set(scopeName, layeredModules);
+
+      for (const [, inits] of stages) {
+        for (const init of inits) {
+          const layer = init.match(/layer:\s*["']([^"']+)["']/)?.[1];
+          let moduleSet = layeredModules.get(layer);
+          if (!moduleSet) {
+            moduleSet = new Set();
+            layeredModules.set(layer, moduleSet);
+          }
+          moduleSet.add(init);
+        }
+      }
+    }
+
+    // Generate the registration code
+    const registrationCode = Array.from(scopedModules.entries())
+      .map(([scopeName, layeredModules]) => {
+        const cases = Array.from(layeredModules.entries())
+          .map(([layer, inits]) => {
+            const initCode = Array.from(inits).join('\n');
+            return `case "${scopeName}": {\n${Template.indent(initCode)}\n}`;
+          })
+          .join('\nbreak;\n');
+        return cases;
+      })
+      .join('\n');
+
     return Template.asString([
       `${getFederationGlobalScope(
         RuntimeGlobals,

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

@@ -4,7 +4,7 @@
 */
 
 import { isRequiredVersion } from '@module-federation/sdk';
-import type { ConsumeOptions } from 'webpack/lib/sharing/ConsumeSharedModule';
+import type { ConsumeOptions } from '../../declarations/plugins/sharing/ConsumeSharedModule';
 import { normalizeWebpackPath } from '@module-federation/sdk/normalize-webpack-path';
 import type { InputFileSystem } from 'webpack/lib/util/fs';
 const { join, dirname, readJson } = require(
@@ -459,6 +459,7 @@ export function normalizeConsumeShareOptions(consumeOptions: ConsumeOptions) {
     eager,
     shareKey,
     shareScope,
+    layer,
   } = consumeOptions;
   return {
     shareConfig: {
@@ -467,6 +468,7 @@ export function normalizeConsumeShareOptions(consumeOptions: ConsumeOptions) {
       strictVersion,
       singleton,
       eager,
+      layer,
     },
     shareScope,
     shareKey,

packages/enhanced/test/configCases/container/3-layers-full/App.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ComponentA from 'containerA/ComponentA';
+import ComponentALayers from 'containerA/ComponentALayers';
+
+export default () => {
+  return `App rendered with [${React()}], [${ComponentA()}] and [${ComponentALayers()}]`;
+};

packages/enhanced/test/configCases/container/3-layers-full/ComponentA.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => {
+  return `ComponentA rendered with [${React()}]`;
+};

packages/enhanced/test/configCases/container/3-layers-full/ComponentALayers.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+export default () => {
+  debugger;
+  return `ComponentALayers rendered with [${React.layeredComponentsReact()}]`;
+};

packages/enhanced/test/configCases/container/3-layers-full/index.js

@@ -0,0 +1,15 @@
+it('should load the component from container', () => {
+  return import('./App').then(({ default: App }) => {
+    const rendered = App();
+    expect(rendered).toBe(
+      'App rendered with [This is react 0.1.2], [ComponentA rendered with [This is react 0.1.2]] and [ComponentALayers rendered with [This is layered react]]',
+    );
+    return import('./upgrade-react').then(({ default: upgrade }) => {
+      upgrade();
+      const rendered = App();
+      expect(rendered).toBe(
+        'App rendered with [This is react 1.2.3], [ComponentA rendered with [This is react 1.2.3]] and [ComponentALayers rendered with [This is layered react]]',
+      );
+    });
+  });
+});

packages/enhanced/test/configCases/container/3-layers-full/layered-react-loader.js

@@ -0,0 +1,4 @@
+module.exports = function (source) {
+  console.log(source);
+  return source.replace('__PLACEHOLDER__', 'This is layered react');
+};