Skip to content

Commit e4c2f96

Browse files
feat: merge increment B - documentation and changesets
- Add changesets for enhanced layer support features - Update advanced sharing documentation with nodeModulesReconstructedLookup - Update experiments documentation with filter options - Update Vite guide with latest federation features - Document new sharing capabilities and configuration options 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent c25d76f commit e4c2f96

File tree

10 files changed

+104
-73
lines changed

10 files changed

+104
-73
lines changed

.changeset/ai-eager-wolf.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
"@module-federation/runtime-core": minor
3+
---
4+
5+
Added support for OR ranges in semantic version satisfaction logic with comprehensive unit tests.
6+
7+
- Implemented parsing for OR (||) conditions in version ranges.
8+
- Split input ranges by || to evaluate alternatives individually.
9+
- Ensured logical handling of wildcards '*' and 'x' within ranges.
10+
- Refactored internal parsing to support more complex range constructs.
11+
- Added comprehensive test cases to cover diverse scenarios for OR range support.
12+
- Introduced error handling during range processing, with console logging for tracking issues.

.changeset/ai-happy-fox.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
"@module-federation/nextjs-mf": minor
3+
---
4+
5+
Refactor and enhance module federation support for Next.js.
6+
7+
- Introduced `getShareScope` function to dynamically generate the default share scope based on the client or server environment, replacing static DEFAULT_SHARE_SCOPE declarations.
8+
- Implemented `RscManifestInterceptPlugin` to intercept and modify client reference manifests, ensuring proper prefix handling.
9+
- Refined server-side externals handling to ensure shared federation modules are bundled.
10+
- Simplified and modularized sharing logic by creating distinct functions for React, React DOM, React JSX Runtime, and React JSX Dev Runtime package configurations.
11+
- Captured the original webpack public path for potential use in plugins and adjustments.
12+
- Enhanced logging for debug tracing of shared module resolution processes in runtimePlugin.

.changeset/ai-hungry-bear.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@module-federation/enhanced": minor
3+
---
4+
5+
Enhancements to layer handling in module federation tests and configuration.
6+
7+
- Improved handling of `shareKey` for layers within `ConsumeSharedPlugin` and `ProvideSharedPlugin`.
8+
- Conditionally prepend the `shareKey` with the `layer` if applicable.
9+
- Introduced new layer configurations to support more nuanced federation scenarios that consider multiple layers of dependency.
10+

.changeset/ai-sleepy-fox.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@module-federation/enhanced": patch
3+
---
4+
5+
Refactored module sharing configuration handling.
6+
7+
- Simplified plugin schema for better maintainability
8+
- Improved layer-based module sharing test coverage
9+
- Removed redundant plugin exports

.changeset/ai-sleepy-tiger.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@module-federation/runtime": minor
3+
---
4+
5+
- Added a new property 'layer' of type string or null to SharedConfig.

.changeset/brown-badgers-fetch.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@module-federation/enhanced': minor
3+
---
4+
5+
support request option on ConsumeSharePlugin. Allows matching requests like the object key of shared does

.changeset/shy-snails-battle.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@module-federation/enhanced': minor
3+
---
4+
5+
Layer support for Provide Share Plugin

apps/website-new/docs/en/configure/advanced-sharing.mdx

Lines changed: 30 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ interface SharedConfig {
2626
issuerLayer?: string; // Restrict config to apply only when the consuming module (issuer) is in this layer.
2727
include?: IncludeExcludeOptions; // Rules to include specific modules/versions
2828
exclude?: IncludeExcludeOptions; // Rules to exclude specific modules/versions
29+
nodeModulesReconstructedLookup?: boolean; // Enable enhanced matching for relative imports for this shared item
2930
}
3031

3132
interface IncludeExcludeOptions {
@@ -83,6 +84,24 @@ new ModuleFederationPlugin({
8384
});
8485
```
8586

87+
## How Share Matching Works
88+
89+
:::note
90+
Module Federation matches shared modules in a specific order. This applies to both providing and consuming shared modules, and is essential for advanced sharing scenarios.
91+
:::
92+
93+
**Matching order:**
94+
95+
1. **Direct match:** Exact match for the requested module name (e.g., `'react'`).
96+
2. **Prefix match:** If no direct match, check for prefix-based shares (e.g., `'next/'` for `'next/router'`).
97+
3. **Reconstructed path match:** If enabled, try matching the path after `node_modules` (for relative/absolute imports inside node_modules), first direct, then prefix.
98+
4. **No match:** Falls back to normal module resolution.
99+
100+
- Matching stops at the first match found.
101+
- `include`/`exclude`, `layer`, and `issuerLayer` filters apply at each step.
102+
103+
See `ProvideSharedPlugin.ts` and `ConsumeSharedPlugin.ts` for implementation details.
104+
86105
## Layers
87106

88107
### `layer`
@@ -348,53 +367,9 @@ In this Next.js-style example:
348367

349368
## nodeModulesReconstructedLookup
350369

351-
This section covers the nodeModulesReconstructedLookup experiment, which helps with sharing modules that use relative imports internally.
352-
353-
Module Federation offers an experimental feature `nodeModulesReconstructedLookup` to solve a common issue with sharing modules that use relative imports internally.
354-
355-
### The Problem
370+
`nodeModulesReconstructedLookup` is now a per-shared-item option in the `shared` configuration. It enables enhanced matching for relative imports inside node_modules for the specific shared item where it is set.
356371

357-
When you share a module like `'shared'` and its subpaths like `'shared/directory/'`, Module Federation matches the **import request** against these patterns. However, if your module uses **relative imports** internally, Module Federation can't match them properly:
358-
359-
```js
360-
// shared/index.js
361-
export * from './package.json';
362-
export { default as thing } from './directory/thing'; // This relative import won't match 'shared/directory/'
363-
```
364-
365-
The problem occurs because:
366-
1. You configure Module Federation to share `'shared'` and `'shared/directory/'`
367-
2. When code imports `'shared'`, it works fine
368-
3. But inside `shared/index.js`, there's a relative import `import './directory/thing'`
369-
4. Module Federation doesn't recognize this as matching `'shared/directory/'` because the import request is `'./directory/thing'` (relative)
370-
371-
### The Solution
372-
373-
The `nodeModulesReconstructedLookup` experiment solves this by:
374-
1. Detecting relative imports inside shared modules
375-
2. Reconstructing the full path (e.g., `'node_modules/shared/directory/thing'`)
376-
3. Extracting the module name after node_modules (e.g., `'shared/directory/thing'`)
377-
4. Matching it against your shared configuration
378-
379-
### Example Project Structure
380-
381-
```
382-
your-project/
383-
├── node_modules/
384-
│ ├── shared/
385-
│ │ ├── directory/
386-
│ │ │ └── thing.js // Exports a component or functionality
387-
│ │ ├── index.js // imports './directory/thing' with relative path
388-
│ │ └── package.json // version: 1.0.0
389-
│ └── my-module/
390-
│ ├── index.js // Might also import from shared
391-
│ └── package.json // version: 2.0.0
392-
├── src/
393-
│ └── index.js // imports 'shared'
394-
└── webpack.config.js
395-
```
396-
397-
### Configuration Example
372+
**How to use:**
398373

399374
```js
400375
// webpack.config.js
@@ -405,21 +380,23 @@ module.exports = {
405380
plugins: [
406381
new ModuleFederationPlugin({
407382
name: 'host',
408-
experiments: {
409-
nodeModulesReconstructedLookup: true // Enable the feature
410-
},
411383
shared: {
412-
'shared': {}, // Share the root module
413-
'shared/directory/': {} // Share all modules under this path
384+
'shared': { nodeModulesReconstructedLookup: true }, // Share the root module with enhanced lookup
385+
'shared/directory/': { nodeModulesReconstructedLookup: true } // Share all modules under this path with enhanced lookup
414386
}
415387
})
416388
]
417389
};
418390
```
419391

420-
### Code Example
392+
**When to use:**
393+
1. Your shared modules use relative imports internally (e.g., `./directory/thing`)
394+
2. You're sharing a package that has internal subdirectory imports
395+
3. Module Federation isn't correctly sharing submodules because the request doesn't match the shared configuration
421396

422-
This is the key difference - you don't directly import the deep path, but it gets shared automatically when used internally:
397+
This option is only effective for the specific shared item where it is set.
398+
399+
**Example Project Structure and Code**
423400

424401
```js
425402
// shared/index.js (inside node_modules)
@@ -432,15 +409,6 @@ console.log(version); // "1.0.0"
432409
console.log(thing); // The correctly shared submodule
433410
```
434411

435-
Without this experiment, the relative import in `shared/index.js` wouldn't be properly shared, potentially leading to duplicate instances of the same module.
436-
437-
### When to Use This Feature
438-
439-
This feature is particularly useful in scenarios where:
440-
1. Your shared modules use relative imports internally (e.g., `./directory/thing`)
441-
2. You're sharing a package that has internal subdirectory imports
442-
3. Module Federation isn't correctly sharing submodules because the request doesn't match the shared configuration
443-
444412
## Advanced Filtering Examples (`include`/`exclude`)
445413

446414
Here are focused examples for using `include` and `exclude`:

apps/website-new/docs/en/configure/experiments.mdx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -47,24 +47,24 @@ When using this mode, all entrypoints will initialize asynchronously. If you're
4747

4848
## nodeModulesReconstructedLookup
4949

50-
- Type: `boolean`
51-
- Required: No
52-
- Default: `false`
50+
- **Type:** `boolean`
51+
- **Required:** No
52+
- **Default:** `false`
5353

5454
Enables enhanced module resolution for packages located in `node_modules`, particularly for modules that use relative imports internally.
5555

56-
**What it solves**: When a shared module uses relative imports (e.g., `import './directory/thing'`), Module Federation might not correctly recognize these as matching your shared configuration. This experiment reconstructs the full path and extracts the proper module name to enable correct sharing.
56+
**What it solves**: When a shared module uses relative imports (e.g., `import './directory/thing'`), Module Federation might not correctly recognize these as matching your shared configuration. This option reconstructs the full path and extracts the proper module name to enable correct sharing.
57+
58+
**How to use:**
59+
60+
Set `nodeModulesReconstructedLookup: true` on individual shared items that need this behavior:
5761

5862
```ts
59-
// Simple example
6063
new ModuleFederationPlugin({
6164
name: 'host',
62-
experiments: {
63-
nodeModulesReconstructedLookup: true
64-
},
6565
shared: {
66-
'shared': {},
67-
'shared/directory/': {}
66+
'shared': { nodeModulesReconstructedLookup: true },
67+
'shared/directory/': { nodeModulesReconstructedLookup: true }
6868
}
6969
});
7070
```

apps/website-new/docs/en/guide/basic/vite.mdx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
# Vite Plugin
22

3+
:::tip
4+
This is a community plugin.
5+
:::
6+
37
- Can build modules that meet the `Module Federation` loading specifications.
48
- Can consume modules that adhere to the `Module Federation` specifications using aliases.
59
- Can configure shared dependencies for modules, so that when the host environment of the loaded module already has the corresponding dependency, it will not be loaded again.
610

11+
712
:::warning Unsupported Options
813
Except for the [dev、dts](../../configure/dev.html) options, all options are supported
914
:::
1015
- roadmap 🗓️
1116
- When a module has remote types, it will automatically download and consume the types of the remote modules.
1217
- Consuming remote modules will have hot update capabilities.
13-
- nuxt ssr
18+
- nuxt ssr
1419

1520
## Quick Start
1621

0 commit comments

Comments
 (0)