feat(enhanced): support shared module layers (#3276)

Co-authored-by: Hanric <[email protected]>

Author: ScriptedAlchemy

.changeset/ai-hungry-bear.md

@@ -0,0 +1,8 @@
+---
+"@module-federation/enhanced": minor
+---
+
+Enhancements to layer handling in module federation tests and configuration.
+
+- Introduced new layer configurations to support more nuanced federation scenarios that consider multiple layers of dependency.
+

.changeset/ai-sleepy-fox.md

@@ -0,0 +1,9 @@
+---
+"@module-federation/enhanced": patch
+---
+
+Refactored module sharing configuration handling.
+
+- Simplified plugin schema for better maintainability
+- Improved layer-based module sharing test coverage
+- Removed redundant plugin exports

.changeset/ai-sleepy-tiger.md

@@ -0,0 +1,5 @@
+---
+"@module-federation/runtime": minor
+---
+
+- Added a new property 'layer' of type string or null to SharedConfig.

.changeset/brown-badgers-fetch.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/enhanced': minor
+---
+
+support request option on ConsumeSharePlugin. Allows matching requests like the object key of shared does

.changeset/rotten-bears-trade.md

@@ -0,0 +1,10 @@
+---
+'@module-federation/webpack-bundler-runtime': minor
+'@module-federation/runtime-core': minor
+'@module-federation/enhanced': minor
+'@module-federation/managers': minor
+'@module-federation/sdk': minor
+'@module-federation/nextjs-mf': patch
+---
+
+Support share layers and multiple share scopes

.changeset/shy-snails-battle.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/enhanced': minor
+---
+
+Layer support for Provide Share Plugin

.gitignore

@@ -10,6 +10,7 @@
 # dependencies
 node_modules
 ./webpack-lib
+next.js
 # IDEs and editors
 /.idea
 .project
@@ -71,4 +72,6 @@ packages/enhanced/test/js
 !apps/rslib-module/@mf-types/**
 
 **/vite.config.{js,ts,mjs,mts,cjs,cts}.timestamp*
-/webpack-lib/
+
+# Federation
+**/.federation

apps/next-app-router/next-app-router-4000/package.json

@@ -1,4 +1,5 @@
 {
+  "name": "app-router-4000",
   "private": true,
   "scripts": {
     "build": "next build",

apps/next-app-router/next-app-router-4000/prettier.config.js

@@ -5,5 +5,5 @@ module.exports = {
   singleQuote: true,
   // pnpm doesn't support plugin autoloading
   // https://github.com/tailwindlabs/prettier-plugin-tailwindcss#installation
-  // plugins: ['prettier-plugin-tailwindcss'],
+  plugins: ['prettier-plugin-tailwindcss'],
 };

apps/next-app-router/next-app-router-4001/package.json

@@ -1,5 +1,6 @@
 {
   "private": true,
+  "name": "app-router-4001",
   "scripts": {
     "build": "next build",
     "dev": "NEXT_PRIVATE_LOCAL_WEBPACK=true next dev -p 4001",

apps/next-app-router/next-app-router-4001/prettier.config.js

@@ -5,5 +5,5 @@ module.exports = {
   singleQuote: true,
   // pnpm doesn't support plugin autoloading
   // https://github.com/tailwindlabs/prettier-plugin-tailwindcss#installation
-  // plugins: ['prettier-plugin-tailwindcss'],
+  plugins: ['prettier-plugin-tailwindcss'],
 };

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 test/unit",
     "lint": "nx run-many --target=lint",
     "test": "nx run-many --target=test",
     "build": "nx run-many --target=build --parallel=5  --projects=tag:type:pkg",
@@ -31,6 +32,8 @@
     "lint-fix": "nx format:write --uncommitted",
     "trigger-release": "node -e 'import(\"open\").then(open => open.default(\"https://github.com/module-federation/core/actions/workflows/trigger-release.yml\"))'",
     "serve:next": "nx run-many --target=serve --all --parallel=3 -exclude='*,!tag:nextjs'",
+    "app:router:dev": "nx run-many --target=serve --parallel=10 --projects='router-*'",
+    "app:next-router:dev": "nx run-many --target=serve --projects=next-app-router-4000,next-app-router-4001 --parallel",
     "serve:website": "nx run website-new:serve",
     "build:website": "nx run website-new:build",
     "extract-i18n:website": "nx run website:extract-i18n",
@@ -40,7 +43,6 @@
     "app:next:prod": "nx run-many --target=serve --configuration=production -p 3000-home,3001-shop,3002-checkout",
     "app:node:dev": "nx run-many --target=serve --parallel=10 --configuration=development -p node-host,node-local-remote,node-remote,node-dynamic-remote-new-version,node-dynamic-remote",
     "app:runtime:dev": "nx run-many --target=serve -p 3005-runtime-host,3006-runtime-remote,3007-runtime-remote",
-    "app:router:dev": "nx run-many --target=serve --parallel=10 --projects='router-*'",
     "app:manifest:dev": "nx run-many --target=serve --configuration=development --parallel=100 -p modernjs,manifest-webpack-host,3009-webpack-provider,3010-rspack-provider,3011-rspack-manifest-provider,3012-rspack-js-entry-provider",
     "app:manifest:prod": "nx run-many --target=serve --configuration=production --parallel=100 -p modernjs,manifest-webpack-host,3009-webpack-provider,3010-rspack-provider,3011-rspack-manifest-provider,3012-rspack-js-entry-provider",
     "app:ts:dev": "nx run-many --target=serve -p react_ts_host,react_ts_nested_remote,react_ts_remote",
@@ -90,7 +92,6 @@
     "sharp": "^0.33.4",
     "storybook": "8.3.5",
     "tapable": "2.2.1",
-    "tsup": "7.2.0",
     "typedoc": "0.25.8",
     "undici": "5.28.5",
     "unplugin": "1.9.0"
@@ -219,7 +220,7 @@
     "terser-webpack-plugin": "^5.3.10",
     "ts-jest": "29.1.5",
     "tslib": "2.8.1",
-    "tsup": "7.2.0",
+    "tsup": "7.3.0",
     "typescript": "5.5.2",
     "url-loader": "4.1.1",
     "verdaccio": "5.29.2",
@@ -229,7 +230,8 @@
     "vitest-fetch-mock": "^0.2.2",
     "vue-tsc": "^2.0.26",
     "wait-on": "^7.2.0",
-    "webpack": "5.93.0",
+    "webpack": "5.94.0",
+    "webpack-cli": "^5.1.4",
     "webpack-virtual-modules": "0.6.2",
     "whatwg-fetch": "^3.6.20",
     "yargs": "^17.7.2"

packages/create-module-federation/project.json

@@ -7,14 +7,14 @@
   "targets": {
     "build": {
       "executor": "nx:run-commands",
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ],
       "options": {
         "parallel": false,
-        "dependsOn": [
-          {
-            "target": "build",
-            "dependencies": true
-          }
-        ],
         "commands": [
           "cd packages/create-module-federation; pnpm run build",
           "cp packages/create-module-federation/LICENSE packages/create-module-federation/dist"
@@ -33,19 +33,25 @@
     },
     "test": {
       "executor": "nx:run-commands",
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ],
       "options": {
         "parallel": false,
-        "dependsOn": [
-          {
-            "target": "build",
-            "dependencies": true
-          }
-        ],
         "commands": ["echo 'no test'"]
       }
     },
     "pre-release": {
       "executor": "nx:run-commands",
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        }
+      ],
       "options": {
         "parallel": false,
         "commands": [

packages/enhanced/jest.config.ts

@@ -33,7 +33,10 @@ export default {
   moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../coverage/packages/enhanced',
   rootDir: __dirname,
-  testMatch: ['<rootDir>/test/*.basictest.js'],
+  testMatch: [
+    '<rootDir>/test/*.basictest.js',
+    '<rootDir>/test/unit/**/*.test.ts',
+  ],
 
   testEnvironment: path.resolve(__dirname, './test/patch-node-env.js'),
   setupFilesAfterEnv: ['<rootDir>/test/setupTestFramework.js'],

packages/enhanced/package.json

@@ -102,6 +102,7 @@
     "@module-federation/sdk": "workspace:*",
     "@module-federation/cli": "workspace:*",
     "btoa": "^1.2.1",
-    "upath": "2.0.1"
+    "upath": "2.0.1",
+    "schema-utils": "^4.3.0"
   }
 }

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

@@ -0,0 +1,53 @@
+export type ConsumeOptions = {
+  /**
+   * fallback request
+   */
+  import?: string | undefined;
+  /**
+   * resolved fallback request
+   */
+  importResolved?: string | undefined;
+  /**
+   * The actual request to use for importing the module. If not specified, the property name/key will be used.
+   */
+  request?: string;
+  /**
+   * global share key
+   */
+  shareKey: string;
+  /**
+   * share scope
+   */
+  shareScope: string | string[];
+  /**
+   * version requirement
+   */
+  requiredVersion:
+    | import('webpack/lib/util/semver').SemVerRange
+    | false
+    | undefined;
+  /**
+   * package name to determine required version automatically
+   */
+  packageName: string;
+  /**
+   * don't use shared version even if version isn't valid
+   */
+  strictVersion: boolean;
+  /**
+   * use single global version
+   */
+  singleton: boolean;
+  /**
+   * 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;
+};

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

@@ -24,7 +24,7 @@ export interface ConsumeSharedPluginOptions {
   /**
    * Share scope name used for all consumed modules (defaults to 'default').
    */
-  shareScope?: string;
+  shareScope?: string | string[];
 }
 /**
  * Modules that should be consumed from share scope. Property names are used to match requested modules in this compilation. Relative requests are resolved, module requests are matched unresolved, absolute paths will match resolved requests. A trailing slash will match all requests with this prefix. In this case shareKey must also have a trailing slash.
@@ -62,7 +62,7 @@ export interface ConsumesConfig {
   /**
    * Share scope name.
    */
-  shareScope?: string;
+  shareScope?: string | string[];
   /**
    * Allow only a single version of the shared module in share scope (disabled by default).
    */
@@ -71,4 +71,16 @@ 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;
+  /**
+   * The actual request to use for importing the module. If not specified, the property name/key will be used.
+   */
+  request?: string;
 }

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

@@ -21,7 +21,7 @@ export interface ProvideSharedPluginOptions {
   /**
    * Share scope name used for all provided modules (defaults to 'default').
    */
-  shareScope?: string;
+  shareScope?: string | string[];
 }
 /**
  * Modules that should be provided as shared modules to the share scope. Property names are used as share keys.
@@ -47,7 +47,7 @@ export interface ProvidesConfig {
   /**
    * Share scope name.
    */
-  shareScope?: string;
+  shareScope?: string | string[];
   /**
    * Version of the provided module. Will replace lower matching versions, but not higher.
    */
@@ -64,4 +64,12 @@ export interface ProvidesConfig {
    * 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;
+  /**
+   * Layer for the shared module.
+   */
+  layer?: string;
+  /**
+   * The actual request to use for importing the module. If not specified, the property name/key will be used.
+   */
+  request?: string;
 }

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

@@ -20,7 +20,7 @@ export interface SharePluginOptions {
   /**
    * Share scope name used for all shared modules (defaults to 'default').
    */
-  shareScope?: string;
+  shareScope?: string | string[];
   /**
    * Modules that should be shared in the share scope. When provided, property names are used to match requested modules in this compilation.
    */
@@ -62,7 +62,7 @@ export interface SharedConfig {
   /**
    * Share scope name.
    */
-  shareScope?: string;
+  shareScope?: string | string[];
   /**
    * Allow only a single version of the shared module in share scope (disabled by default).
    */
@@ -75,4 +75,16 @@ 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;
+  /**
+   * The actual request to use for importing the module. Defaults to the property name.
+   */
+  request?: string;
 }

packages/enhanced/src/lib/container/ContainerEntryDependency.ts

@@ -18,21 +18,21 @@ const { Dependency } = require(
 class ContainerEntryDependency extends Dependency {
   public name: string;
   public exposes: [string, ExposeOptions][];
-  public shareScope: string;
+  public shareScope: string | string[];
   public injectRuntimeEntry: string;
   public dataPrefetch: containerPlugin.ContainerPluginOptions['dataPrefetch'];
 
   /**
    * @param {string} name entry name
    * @param {[string, ExposeOptions][]} exposes list of exposed modules
-   * @param {string} shareScope name of the share scope
+   * @param {string|string[]} shareScope name of the share scope
    * @param {string[]} injectRuntimeEntry the path of injectRuntime file.
    * @param {containerPlugin.ContainerPluginOptions['dataPrefetch']} dataPrefetch whether enable dataPrefetch
    */
   constructor(
     name: string,
     exposes: [string, ExposeOptions][],
-    shareScope: string,
+    shareScope: string | string[],
     injectRuntimeEntry: string,
     dataPrefetch: containerPlugin.ContainerPluginOptions['dataPrefetch'],
   ) {