Skip to content

Commit 790302a

Browse files
2heal12heal1
authored
feat: support rspress (#3852)
1 parent a40d744 commit 790302a

File tree

108 files changed

+4287
-1679
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

108 files changed

+4287
-1679
lines changed

‎.changeset/config.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"@module-federation/inject-external-runtime-core-plugin",
2828
"@module-federation/runtime-core",
2929
"create-module-federation",
30-
"@module-federation/cli"
30+
"@module-federation/cli",
31+
"@module-federation/rspress-plugin"
3132
]
3233
],
3334
"ignorePatterns": ["^alpha|^beta"],

‎.changeset/shaggy-pans-teach.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@module-federation/rspress-plugin': patch
3+
---
4+
5+
feat(rspress-plugin): support rspress

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,3 +83,7 @@ vitest.config.*.timestamp*
8383
.cursor/rules/nx-rules.mdc
8484
.github/instructions/nx.instructions.md
8585
.temp-commit-msg
86+
87+
# website-new
88+
.rsbuild
89+
ssg

‎apps/website-new/docs/en/configure/shared.mdx‎

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -111,34 +111,22 @@ At this point, you can add the corresponding dependencies to the `shared` config
111111

112112
### How to use shared dependencies
113113

114-
Depending on the use case, `Module Federation` supports two forms of shared dependency configuration: array and object. The former is suitable for most scenarios, while the latter is suitable for complex customization needs.
114+
Depending on the use case, {props.name || 'Module Federation'} supports two forms of shared dependency configuration: array and object. The former is suitable for most scenarios, while the latter is suitable for complex customization needs.
115115

116116
**Array Format (General Scenario)**
117117

118-
Simply add the corresponding dependencies to the `shared` configuration in the `Module Federation` build configuration, for example:
118+
Simply add the corresponding dependencies to the `shared` configuration in the {props.name || 'Module Federation'} build configuration, for example:
119119

120-
```ts
121-
new ModuleFederationPlugin({
122-
name: '@demo/button',
123-
shared: ['react', 'react-dom'],
124-
//...
125-
});
126-
```
120+
import ArrayShared from '@components/common/configure/array-shared';
121+
import React from 'react';
122+
123+
{props.arrayShared || React.createElement(ArrayShared)}
127124

128125
**Object Format (Customized Configuration)**
129126

130-
Add the shared dependencies in the `shared` configuration of the `Module Federation Plugin`, with the `key` being the dependency name and the `value` being the provided configuration.
127+
Add the shared dependencies in the `shared` configuration of the {props.name || 'Module Federation'}, with the `key` being the dependency name and the `value` being the provided configuration.
128+
129+
import ObjectShared from '@components/common/configure/object-shared'
130+
131+
{props.objectShared || React.createElement(ObjectShared)}
131132

132-
```ts
133-
new ModuleFederationPlugin({
134-
name: '@demo/button',
135-
shared: {
136-
react: {
137-
singleton: true,
138-
requiredVersion: '~18.2.0',
139-
fixedDependencies: true,
140-
},
141-
},
142-
//...
143-
});
144-
```

‎apps/website-new/docs/en/guide/basic/_meta.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1-
["runtime", "rsbuild", "rspack", "webpack", "vite", "type-prompt","cli"]
1+
[
2+
{
3+
"type": "dir",
4+
"name": "runtime",
5+
"label": "Runtime"
6+
},
7+
"rsbuild", "rspack", "webpack", "rspress","vite","type-prompt","cli", "css-isolate"
8+
]

‎apps/website-new/docs/en/guide/basic/cli.mdx‎

Lines changed: 26 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,41 @@
1-
# CLI
1+
# Command Line Tool
22

3-
`@module-federation/enhanced` and `@module-federation/modern-js` provides a lightweight CLI.
3+
<p>
4+
{props.name || 'Module Federation'} provides lightweight command-line tools: {(props.cmdTools || ['@module-federation/enhanced', '@module-federation/modern-js']).map((cmdTool,index,arr)=>(<><code>{cmdTool}</code>{index+1===arr.length ? '':' and '}</>))} .
5+
</p>
46

5-
## All commands
7+
## View All Commands
68

7-
To view all available CLI commands, run the following command in the project directory:
9+
import React from 'react';
10+
import ViewAllCmdsMdx from '@components/common/cli/view-all-cmds';
811

9-
```bash
10-
npx mf -h
11-
```
12+
{/* rspress flattenMdxContent issue */}
13+
{props.show || React.createElement(ViewAllCmdsMdx)}
1214

13-
The output is shown below:
15+
## Common Options
1416

15-
```text
16-
Usage: mf <command> [options]
17+
{props.name || 'Module Federation'} CLI provides some common options that can be used for all commands:
1718

18-
Options:
19-
-V, --version output the version number
20-
-h, --help display help for command
19+
| Option | Description |
20+
| -------------------------- | ----------------------------------------------------------------------------------------------------------------- |
21+
| `-c, --config <config>` | Specify the configuration file path, which can be a relative or absolute path. The default value is {props.configName ? props.configName : 'module-federation.config.ts' } |
22+
| `-m, --mode <mode>` | Specify the running environment, you can choose "dev" or "prod". The default value is "dev". After setting, "development" or "production" will be automatically injected into the `process.env.NODE_ENV` environment variable according to the value. |
23+
| `-h, --help` | Show command help |
2124

22-
Commands:
23-
dts [options] generate or fetch the mf types
24-
help [command] display help for command
25-
```
25+
## {props.cmd || 'mf'} dts
2626

27-
## Common flags
27+
<p>
28+
The <code>{props.cmd || 'mf'} dts</code> command is used to pull or generate TypeScript type declaration files.
29+
</p>
2830

29-
Module Federation CLI provides several common flags that can be used with all commands:
31+
import CommandInfo from '@components/common/cli/cmd-info';
3032

31-
| Flag | Description |
32-
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
33-
| `-c, --config <config>` | Specify the configuration file, can be a relative or absolute path, default value is `module-federation.ts` |
34-
| `-m, --mode <mode>` | Specify the runtime environment. You can choose "dev" or "prod". The default value is "dev". After setting, the `process.env.NODE_ENV` environment variable will be automatically injected with "development" or "production" according to the value. |
35-
| `-h, --help` | Display help for command |
33+
{props.commandInfo || <CommandInfo />}
3634

37-
## mf dts
35+
:::info 注意
3836

39-
The `mf dts` command is used to generate or fetch remote types.
37+
<p>The <code>{props.cmd || 'mf'} dts</code> command will automatically generate or pull type declaration files based on the configuration in <code>{props.configName || 'module-federation.config.ts'}</code>. This means you must provide a valid configuration file, otherwise the command will not run correctly.</p>
4038

41-
```bash
42-
Usage: mf dts [options]
39+
If you are only using the runtime API, you need to create a temporary <code>{props.configName || 'module-federation.config.ts'}</code> file, configure [dts.consumeTypes.remoteTypeUrls](../../configure/dts#remotetypeurls), and then run the `mf dts` command.
4340

44-
generate or fetch the mf types
45-
46-
Options:
47-
--root <root> specify the project root directory
48-
--output <output> specify the generated dts output directory
49-
--fetch <boolean> fetch types from remote, default is true (default: true)
50-
--generate <boolean> generate types, default is true (default: true)
51-
-c --config <config> specify the configuration file, can be a relative or absolute path
52-
-m --mode <mode> Specify the runtime environment. You can choose "dev" or "prod". The default value is "dev". After setting, the process.env.NODE_ENV environment variable will be
53-
automatically injected with "development" or "production" according to the value. (default: "dev")
54-
-h, --help display help for command
55-
```
56-
57-
:::info Note
58-
59-
The `mf dts` command will automatically generate or pull type declaration files based on the configuration in `module-federation.config.ts`. This means you must provide a valid configuration file, otherwise the command will not work properly.
60-
61-
If you only use the runtime API, you need to create a temporary `module-federation.config.ts` file, write the remote configuration you need to get the type, and then run the `mf dts` command.
62-
If you are only using the runtime API, you need to create a temporary `module-federation.config.ts` file, configure [dts.consumeTypes.remoteTypeUrls](../../configure/dts#remotetypeurls), and then run the `mf dts` command.
63-
64-
:::
41+
:::

‎apps/website-new/docs/en/guide/basic/css-isolate.mdx‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
# Style Isolation
2+
3+
To achieve CSS style isolation, the following methods can be used. Here are the detailed usage instructions for each method:
4+
5+
## 1. BEM (Block Element Modifier)
6+
7+
BEM is a naming convention that achieves style isolation by adding prefixes and suffixes to class names. The structure of BEM is as follows:
8+
9+
- **Block**: Represents an independent functional block, e.g., `.button`
10+
- **Element**: Represents a part of the block, e.g., `.button__text`
11+
- **Modifier**: Represents different states or versions of the block or element, e.g., `.button--primary`
12+
13+
### Usage Example
14+
```html
15+
<div class="button">
16+
<span class="button__text">Button</span>
17+
</div>
18+
```
19+
20+
```css
21+
.button {
22+
background-color: blue;
23+
color: white;
24+
}
25+
26+
.button__text {
27+
font-size: 16px;
28+
}
29+
30+
.button--primary {
31+
background-color: green;
32+
}
33+
```
34+
35+
## 2. CSS Modules
36+
37+
CSS Modules achieve style isolation by treating each CSS file as a module, where each class name is transformed into a unique identifier during compilation.
38+
39+
### Usage Example
40+
41+
1. Create a CSS file named `styles.module.css`:
42+
43+
```css
44+
/* styles.module.css */
45+
.button {
46+
background-color: blue;
47+
color: white;
48+
}
49+
```
50+
51+
2. Import and use it in a React component:
52+
53+
```javascript
54+
import React from 'react';
55+
import styles from './styles.module.css';
56+
57+
function App() {
58+
return <button className={styles.button}>Button</button>;
59+
}
60+
61+
export default App;
62+
```
63+
64+
## 3. CSS-in-JS
65+
66+
CSS-in-JS writes styles directly in JavaScript files. Common libraries include [styled-components](https://styled-components.com/) and [emotion](https://github.com/emotion-js/emotion).
67+
68+
### Usage Example
69+
70+
1. Install styled-components:
71+
72+
```bash
73+
npm install styled-components
74+
```
75+
76+
2. Use it in a React component:
77+
78+
```javascript
79+
import React from 'react';
80+
import styled from 'styled-components';
81+
82+
const Button = styled.button`
83+
background: blue;
84+
color: white;
85+
`;
86+
87+
function App() {
88+
return <Button>Button</Button>;
89+
}
90+
91+
export default App;
92+
```
93+
94+
## 4. Shadow DOM
95+
96+
Shadow DOM is part of the Web Components technology, creating an isolated DOM tree to achieve style isolation. React can use Shadow DOM via [react-shadow](https://www.npmjs.com/package/react-shadow).
97+
98+
### Usage Example
99+
100+
1. Create an HTML template:
101+
102+
```html
103+
<template id="my-component">
104+
<style>
105+
.button {
106+
background: blue;
107+
color: white;
108+
}
109+
</style>
110+
<button class="button">Button</button>
111+
</template>
112+
```
113+
114+
2. Define a custom element and attach Shadow DOM:
115+
116+
```javascript
117+
class MyComponent extends HTMLElement {
118+
constructor() {
119+
super();
120+
const shadow = this.attachShadow({ mode: 'open' });
121+
const template = document.getElementById('my-component').content;
122+
shadow.appendChild(template.cloneNode(true));
123+
}
124+
}
125+
126+
customElements.define('my-component', MyComponent);
127+
```
128+
129+
3. Use the custom element in HTML:
130+
131+
```html
132+
<my-component></my-component>
133+
```
134+
135+
## 5. Vue Scoped Styles
136+
137+
In Vue, the `scoped` attribute can be used to achieve component-level style isolation.
138+
139+
### Usage Example
140+
141+
1. Define styles in a Vue component:
142+
143+
```vue
144+
<template>
145+
<button class="button">Button</button>
146+
</template>
147+
148+
<style scoped>
149+
.button {
150+
background: blue;
151+
color: white;
152+
}
153+
</style>
154+
```
155+
156+
Each method has its own applicable scenarios and limitations. Developers can choose the appropriate style isolation solution based on project requirements.
157+
158+
## FAQ
159+
160+
### Why doesn't Module Federation directly handle CSS style isolation?
161+
162+
The main reasons for not directly incorporating CSS isolation into Module Federation are:
163+
164+
* CSS isolation can conflict significantly with shared dependencies. Shared dependencies aim to reuse common dependencies as much as possible, which can lead to some shared dependencies escaping the sandbox, making isolation uncontrollable and potentially affected by load order.
165+
166+
* Runtime handling of CSS isolation can have many edge cases and troubleshooting issues can be very difficult, leading to decreased business stability. Common issues include:
167+
* Shadow DOM: This method can cause compatibility issues with various component libraries, and troubleshooting online issues can be long and complex, with no guarantee of resolution.
168+
* Collecting and clearing CSS: Due to the isolation and shared reuse issues mentioned above, CSS might be unintentionally cleared.
169+
* Upgrading the sandbox in the consumer: The impact on business is uncontrollable.
170+
171+
> Suggested handling methods:
172+
173+
* Process CSS at the module or sub-application producer level to ensure that the module or application runs as expected in any environment.
174+
* Use CSS modules, component library prefixes, and unified component library versions to solve the problem.
175+
* Directly export Shadow DOM components for use by other businesses.

‎apps/website-new/docs/en/guide/basic/rsbuild.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export default defineConfig({
8282
```
8383

8484
### Note
85-
If you need to use the Module Federation runtime capabilities, please install [@module-federation/enhanced](/en/guide/basic/runtime.html)
85+
If you need to use the Module Federation runtime capabilities, please install [@module-federation/enhanced](/en/guide/basic/runtime/runtime.html)
8686

8787
## Configuration
8888

0 commit comments

Comments
 (0)