feat(mf): support layered container exposes

crates/node_binding/napi-binding.d.ts

@@ -2302,6 +2302,7 @@ export interface RawExperiments {
 export interface RawExposeOptions {
   key: string
   name?: string
+  layer?: string
   import: Array<string>
 }
 

crates/rspack_binding_api/src/raw_options/raw_builtins/raw_mf.rs

@@ -58,6 +58,7 @@ impl From<RawContainerPluginOptions> for ContainerPluginOptions {
 pub struct RawExposeOptions {
   pub key: String,
   pub name: Option<String>,
+  pub layer: Option<String>,
   pub import: Vec<String>,
 }
 
@@ -67,6 +68,7 @@ impl From<RawExposeOptions> for (String, ExposeOptions) {
       value.key,
       ExposeOptions {
         name: value.name,
+        layer: value.layer,
         import: value.import,
       },
     )

crates/rspack_plugin_mf/src/container/container_entry_module.rs

@@ -230,6 +230,7 @@ impl Module for ContainerEntryModule {
               Box::new(ContainerExposedDependency::new(
                 name.clone(),
                 request.clone(),
+                options.layer.clone(),
               )) as Box<dyn Dependency>
             })
             .collect(),

crates/rspack_plugin_mf/src/container/container_exposed_dependency.rs

@@ -1,7 +1,7 @@
 use rspack_cacheable::{cacheable, cacheable_dyn};
 use rspack_core::{
   AsContextDependency, AsDependencyCodeGeneration, Dependency, DependencyCategory, DependencyId,
-  DependencyType, FactorizeInfo, ModuleDependency, ResourceIdentifier,
+  DependencyType, FactorizeInfo, ModuleDependency, ModuleLayer, ResourceIdentifier,
 };
 
 #[cacheable]
@@ -10,18 +10,24 @@ pub struct ContainerExposedDependency {
   id: DependencyId,
   request: String,
   pub exposed_name: String,
+  layer: Option<ModuleLayer>,
   resource_identifier: ResourceIdentifier,
   dependency_type: DependencyType,
   factorize_info: FactorizeInfo,
 }
 
 impl ContainerExposedDependency {
-  pub fn new(exposed_name: String, request: String) -> Self {
-    let resource_identifier = format!("exposed dependency {exposed_name}={request}").into();
+  pub fn new(exposed_name: String, request: String, layer: Option<ModuleLayer>) -> Self {
+    let resource_identifier = if let Some(layer) = &layer {
+      format!("exposed dependency {exposed_name}={request}|layer={layer}").into()
+    } else {
+      format!("exposed dependency {exposed_name}={request}").into()
+    };
     Self {
       id: DependencyId::new(),
       request,
       exposed_name,
+      layer,
       resource_identifier,
       dependency_type: DependencyType::ContainerExposed,
       factorize_info: Default::default(),
@@ -34,6 +40,7 @@ impl ContainerExposedDependency {
       id: DependencyId::new(),
       request,
       exposed_name: String::new(),
+      layer: None,
       resource_identifier,
       dependency_type: DependencyType::ShareContainerFallback,
       factorize_info: Default::default(),
@@ -55,6 +62,10 @@ impl Dependency for ContainerExposedDependency {
     &self.dependency_type
   }
 
+  fn get_layer(&self) -> Option<&ModuleLayer> {
+    self.layer.as_ref()
+  }
+
   fn resource_identifier(&self) -> Option<&str> {
     Some(&self.resource_identifier)
   }

crates/rspack_plugin_mf/src/container/container_plugin.rs

@@ -3,8 +3,8 @@ use std::sync::Arc;
 use rspack_core::{
   ChunkUkey, Compilation, CompilationAdditionalTreeRuntimeRequirements, CompilationParams,
   CompilationRuntimeRequirementInTree, CompilerCompilation, CompilerMake, DependencyType,
-  EntryOptions, EntryRuntime, Filename, LibraryOptions, Plugin, RuntimeGlobals, RuntimeModule,
-  SourceType,
+  EntryOptions, EntryRuntime, Filename, LibraryOptions, ModuleLayer, Plugin, RuntimeGlobals,
+  RuntimeModule, SourceType,
 };
 use rspack_error::Result;
 use rspack_hook::{plugin, plugin_hook};
@@ -32,6 +32,7 @@ pub struct ContainerPluginOptions {
 #[derive(Debug, Clone, Serialize)]
 pub struct ExposeOptions {
   pub name: Option<String>,
+  pub layer: Option<ModuleLayer>,
   pub import: Vec<String>,
 }
 

packages/rspack/src/container/ContainerPlugin.ts

@@ -13,31 +13,48 @@ import { parseOptions } from '../container/options';
 import { normalizeShareScope, type ShareScope } from '../sharing/SharePlugin';
 import { ShareRuntimePlugin } from '../sharing/ShareRuntimePlugin';
 
-export type ContainerPluginOptions = {
-  exposes: Exposes;
+type ContainerPluginBaseOptions<Enhanced extends boolean> = {
+  exposes: Exposes<Enhanced>;
   filename?: FilenameTemplate;
   library?: LibraryOptions;
   name: string;
   runtime?: EntryRuntime;
   shareScope?: ShareScope;
-  enhanced?: boolean;
 };
-export type Exposes = (ExposesItem | ExposesObject)[] | ExposesObject;
+export type ContainerPluginOptions<Enhanced extends boolean = boolean> = [
+  Enhanced,
+] extends [true]
+  ? ContainerPluginBaseOptions<true> & { enhanced: true }
+  : [Enhanced] extends [false]
+    ? ContainerPluginBaseOptions<false> & { enhanced?: false }
+    : | (ContainerPluginBaseOptions<false> & { enhanced?: false })
+      | (ContainerPluginBaseOptions<true> & { enhanced: true });
+export type Exposes<Enhanced extends boolean = boolean> =
+  (ExposesItem | ExposesObject<Enhanced>)[] | ExposesObject<Enhanced>;
 export type ExposesItem = string;
 export type ExposesItems = ExposesItem[];
-export type ExposesObject = {
-  [k: string]: ExposesConfig | ExposesItem | ExposesItems;
+export type ExposesObject<Enhanced extends boolean = boolean> = {
+  [k: string]: ExposesConfig<Enhanced> | ExposesItem | ExposesItems;
 };
-export type ExposesConfig = {
+type ExposesBaseConfig = {
   import: ExposesItem | ExposesItems;
   name?: string;
 };
+export type ExposesConfig<Enhanced extends boolean = boolean> = [
+  Enhanced,
+] extends [true]
+  ? ExposesBaseConfig & { layer?: string }
+  : [Enhanced] extends [false]
+    ? ExposesBaseConfig & { layer?: never }
+    : ExposesBaseConfig & { layer?: string };
 
-export class ContainerPlugin extends RspackBuiltinPlugin {
+export class ContainerPlugin<
+  Enhanced extends boolean = boolean,
+> extends RspackBuiltinPlugin {
   name = BuiltinPluginName.ContainerPlugin;
   _options;
 
-  constructor(options: ContainerPluginOptions) {
+  constructor(options: ContainerPluginOptions<Enhanced>) {
     super();
     const enhanced = options.enhanced ?? false;
     const shareScope = normalizeShareScope(
@@ -59,11 +76,18 @@ export class ContainerPlugin extends RspackBuiltinPlugin {
         (item) => ({
           import: Array.isArray(item) ? item : [item],
           name: undefined,
+          layer: undefined,
         }),
-        (item) => ({
-          import: Array.isArray(item.import) ? item.import : [item.import],
-          name: item.name || undefined,
-        }),
+        (item) => {
+          if (!enhanced && item.layer !== undefined) {
+            throw new Error('[ContainerPlugin] layer requires enhanced=true');
+          }
+          return {
+            import: Array.isArray(item.import) ? item.import : [item.import],
+            name: item.name || undefined,
+            layer: enhanced ? item.layer || undefined : undefined,
+          };
+        },
       ),
       enhanced,
     };

tests/rspack-test/configCases/container-1-0/enhanced-option-direct-container-validation/errors.js

@@ -0,0 +1 @@
+module.exports = [/\[ContainerPlugin\] layer requires enhanced=true/];

tests/rspack-test/configCases/container-1-0/enhanced-option-direct-container-validation/index.js

@@ -0,0 +1,3 @@
+it('should reject enhanced expose options in legacy mode', () => {
+  expect(true).toBe(true);
+});

tests/rspack-test/configCases/container-1-0/enhanced-option-direct-container-validation/rspack.config.js

@@ -0,0 +1,16 @@
+const { ContainerPlugin } = require('@rspack/core').container;
+
+module.exports = {
+  entry: './index.js',
+  plugins: [
+    new ContainerPlugin({
+      name: 'container',
+      exposes: {
+        './entry': {
+          import: './index.js',
+          layer: 'server',
+        },
+      },
+    }),
+  ],
+};

tests/rspack-test/serialCases/container-1-5/1-layers-full/App.js

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

tests/rspack-test/serialCases/container-1-5/1-layers-full/ComponentA.js

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

tests/rspack-test/serialCases/container-1-5/1-layers-full/ComponentALayers.js

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

tests/rspack-test/serialCases/container-1-5/1-layers-full/index.js

@@ -0,0 +1,8 @@
+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] No Layer (1-layers-full), ComponentALayers This is react 0.1.2 rendered with [This is layered react (1-layers-full)], ComponentA rendered with [This is react 0.1.2]No Layer (1-layers-full), [ComponentA rendered with [This is react 0.1.2]No Layer (1-layers-full)] and [ComponentALayers This is react 0.1.2 rendered with [This is layered react (1-layers-full)]]',
+    );
+  });
+});

tests/rspack-test/serialCases/container-1-5/1-layers-full/layered-react-loader.js

@@ -0,0 +1,4 @@
+// DO NOT EDIT
+module.exports = function (source) {
+  return source.replace('No Layer', 'This is layered react');
+};

tests/rspack-test/serialCases/container-1-5/1-layers-full/layered-upgrade-react.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+// This file will be processed by the layered loader
+export default function initializeLayeredReactVersion() {
+  // Set the layered React version
+  React.setVersion('1.2.3');
+}
+
+// Initialize version immediately
+initializeLayeredReactVersion();

tests/rspack-test/serialCases/container-1-5/1-layers-full/rspack.config.js

@@ -0,0 +1,106 @@
+const { ModuleFederationPlugin } = require('@rspack/core').container;
+const path = require('path');
+
+const common = {
+  name: 'layer_container',
+  exposes: {
+    './ComponentA': {
+      import: './ComponentA',
+    },
+    './ComponentALayers': {
+      import: './ComponentALayers',
+    },
+  },
+  shared: {
+    react: {
+      version: '18.0.0',
+      requiredVersion: '^18.0.0',
+      singleton: true,
+    },
+    'layered-react': {
+      request: 'react',
+      import: 'react',
+      shareKey: 'react',
+      version: '16.0.0',
+      requiredVersion: '^16.0.0',
+      singleton: true,
+      layer: 'layered-components',
+      issuerLayer: 'layered-components',
+      shareScope: 'layered-components',
+    },
+  },
+};
+
+const commonConfig = {
+  devtool: false,
+  experiments: {
+    layers: true,
+  },
+  entry: './index.js',
+  mode: 'development',
+  module: {
+    rules: [
+      {
+        test: /ComponentALayers\.js$/,
+        layer: 'layered-components',
+      },
+      {
+        test: /react\.js$/,
+        issuerLayer: 'layered-components',
+        layer: 'layered-components',
+        use: [
+          {
+            loader: path.resolve(__dirname, './layered-react-loader.js'),
+          },
+        ],
+      },
+    ],
+  },
+};
+
+module.exports = [
+  {
+    ...commonConfig,
+    output: {
+      filename: '[name].js',
+      uniqueName: '1-layers-full',
+    },
+    plugins: [
+      new ModuleFederationPlugin({
+        library: { type: 'commonjs-module' },
+        filename: 'container.js',
+        remotes: {
+          containerA: {
+            external: './container.js',
+          },
+        },
+        ...common,
+      }),
+    ],
+  },
+  {
+    ...commonConfig,
+    experiments: {
+      ...commonConfig.experiments,
+      outputModule: true,
+    },
+    output: {
+      module: true,
+      filename: 'module/[name].mjs',
+      uniqueName: '1-layers-full-mjs',
+    },
+    plugins: [
+      new ModuleFederationPlugin({
+        library: { type: 'module' },
+        filename: 'module/container.mjs',
+        remotes: {
+          containerA: {
+            external: './container.mjs',
+          },
+        },
+        ...common,
+      }),
+    ],
+    target: 'node14',
+  },
+];

tests/rspack-test/serialCases/container-1-5/1-layers-full/test.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  findBundle: function (i, options) {
+    return i === 0 ? './main.js' : './module/main.mjs';
+  },
+};

tests/rspack-test/serialCases/container-1-5/2-layers-full/App.js

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

tests/rspack-test/serialCases/container-1-5/2-layers-full/ComponentALayers.js

@@ -0,0 +1,5 @@
+import React, { layeredComponentsReact } from 'react';
+
+export default function ComponentALayers() {
+  return `LocalComponentALayers ${React()} (Layered React: ${layeredComponentsReact()})`;
+}

tests/rspack-test/serialCases/container-1-5/2-layers-full/ComponentB.js

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