feat: support rspress

.changeset/config.json

@@ -27,7 +27,8 @@
       "@module-federation/inject-external-runtime-core-plugin",
       "@module-federation/runtime-core",
       "create-module-federation",
-      "@module-federation/cli"
+      "@module-federation/cli",
+      "@module-federation/rspress-plugin"
     ]
   ],
   "ignorePatterns": ["^alpha|^beta"],

.changeset/shaggy-pans-teach.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/rspress-plugin': patch
+---
+
+feat(rspress-plugin): support rspress

.gitignore

@@ -83,3 +83,7 @@ vitest.config.*.timestamp*
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
 .temp-commit-msg
+
+# website-new
+.rsbuild
+ssg

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

@@ -111,34 +111,22 @@ At this point, you can add the corresponding dependencies to the `shared` config
 
 ### How to use shared dependencies
 
-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.
+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.
 
 **Array Format (General Scenario)**
 
-Simply add the corresponding dependencies to the `shared` configuration in the `Module Federation` build configuration, for example:
+Simply add the corresponding dependencies to the `shared` configuration in the {props.name || 'Module Federation'} build configuration, for example:
 
-```ts
-new ModuleFederationPlugin({
-  name: '@demo/button',
-  shared: ['react', 'react-dom'],
-  //...
-});
-```
+import ArrayShared from '@components/common/configure/array-shared';
+import React from 'react';
+
+{props.arrayShared || React.createElement(ArrayShared)}
 
 **Object Format (Customized Configuration)**
 
-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.
+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.
+
+import ObjectShared from '@components/common/configure/object-shared'
+
+{props.objectShared || React.createElement(ObjectShared)}
 
-```ts
-new ModuleFederationPlugin({
-  name: '@demo/button',
-  shared: {
-    react: {
-      singleton: true,
-      requiredVersion: '~18.2.0',
-      fixedDependencies: true,
-    },
-  },
-  //...
-});
-```

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

@@ -1 +1,8 @@
-["runtime", "rsbuild", "rspack", "webpack", "vite",  "type-prompt","cli"]
+[
+  {
+  "type": "dir",
+  "name": "runtime",
+  "label": "Runtime"
+  },
+"rsbuild", "rspack", "webpack", "rspress","vite","type-prompt","cli", "css-isolate"
+]

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

@@ -1,64 +1,41 @@
-# CLI
+# Command Line Tool
 
-`@module-federation/enhanced` and `@module-federation/modern-js` provides a lightweight CLI.
+<p>
+{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 '}</>))} .
+</p>
 
-## All commands
+## View All Commands
 
-To view all available CLI commands, run the following command in the project directory:
+import React from 'react';
+import ViewAllCmdsMdx from '@components/common/cli/view-all-cmds';
 
-```bash
-npx mf -h
-```
+{/* rspress flattenMdxContent issue  */}
+{props.show || React.createElement(ViewAllCmdsMdx)}
 
-The output is shown below:
+## Common Options
 
-```text
-Usage: mf <command> [options]
+{props.name || 'Module Federation'} CLI provides some common options that can be used for all commands:
 
-Options:
-  -V, --version   output the version number
-  -h, --help      display help for command
+| Option                       | Description                                                                                                              |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `-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' }      |
+| `-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.   |
+| `-h, --help`               | Show command help                                                                                                      |
 
-Commands:
-  dts [options]   generate or fetch the mf types
-  help [command]  display help for command
-```
+## {props.cmd || 'mf'} dts
 
-## Common flags
+<p>
+  The <code>{props.cmd || 'mf'} dts</code> command is used to pull or generate TypeScript type declaration files.
+</p>
 
-Module Federation CLI provides several common flags that can be used with all commands:
+import CommandInfo from '@components/common/cli/cmd-info';
 
-| Flag                       | Description                                                                                                                                       |
-| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `-c, --config <config>`    | Specify the configuration file, can be a relative or absolute path, default value is `module-federation.ts` |
-| `-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. |
-| `-h, --help`               | Display help for command                                                                                                                          |
+{props.commandInfo || <CommandInfo />}
 
-## mf dts
+:::info 注意
 
-The `mf dts` command is used to generate or fetch remote types.
+<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>
 
-```bash
-Usage: mf dts [options]
+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.
 
-generate or fetch the mf types
-
-Options:
-  --root <root>         specify the project root directory
-  --output <output>     specify the generated dts output directory
-  --fetch <boolean>     fetch types from remote, default is true (default: true)
-  --generate <boolean>  generate types, default is true (default: true)
-  -c --config <config>  specify the configuration file, can be a relative or absolute path
-  -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. (default: "dev")
-  -h, --help            display help for command
-```
-
-:::info Note
-
-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.
-
-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.
-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.
-
-:::
+:::

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

@@ -0,0 +1,175 @@
+# Style Isolation
+
+To achieve CSS style isolation, the following methods can be used. Here are the detailed usage instructions for each method:
+
+## 1. BEM (Block Element Modifier)
+
+BEM is a naming convention that achieves style isolation by adding prefixes and suffixes to class names. The structure of BEM is as follows:
+
+- **Block**: Represents an independent functional block, e.g., `.button`
+- **Element**: Represents a part of the block, e.g., `.button__text`
+- **Modifier**: Represents different states or versions of the block or element, e.g., `.button--primary`
+
+### Usage Example
+```html
+<div class="button">
+  <span class="button__text">Button</span>
+</div>
+```
+
+```css
+.button {
+  background-color: blue;
+  color: white;
+}
+
+.button__text {
+  font-size: 16px;
+}
+
+.button--primary {
+  background-color: green;
+}
+```
+
+## 2. CSS Modules
+
+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.
+
+### Usage Example
+
+1. Create a CSS file named `styles.module.css`:
+
+```css
+/* styles.module.css */
+.button {
+  background-color: blue;
+  color: white;
+}
+```
+
+2. Import and use it in a React component:
+
+```javascript
+import React from 'react';
+import styles from './styles.module.css';
+
+function App() {
+  return <button className={styles.button}>Button</button>;
+}
+
+export default App;
+```
+
+## 3. CSS-in-JS
+
+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).
+
+### Usage Example
+
+1. Install styled-components:
+
+```bash
+npm install styled-components
+```
+
+2. Use it in a React component:
+
+```javascript
+import React from 'react';
+import styled from 'styled-components';
+
+const Button = styled.button`
+  background: blue;
+  color: white;
+`;
+
+function App() {
+  return <Button>Button</Button>;
+}
+
+export default App;
+```
+
+## 4. Shadow DOM
+
+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).
+
+### Usage Example
+
+1. Create an HTML template:
+
+```html
+<template id="my-component">
+  <style>
+    .button {
+      background: blue;
+      color: white;
+    }
+  </style>
+  <button class="button">Button</button>
+</template>
+```
+
+2. Define a custom element and attach Shadow DOM:
+
+```javascript
+class MyComponent extends HTMLElement {
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: 'open' });
+    const template = document.getElementById('my-component').content;
+    shadow.appendChild(template.cloneNode(true));
+  }
+}
+
+customElements.define('my-component', MyComponent);
+```
+
+3. Use the custom element in HTML:
+
+```html
+<my-component></my-component>
+```
+
+## 5. Vue Scoped Styles
+
+In Vue, the `scoped` attribute can be used to achieve component-level style isolation.
+
+### Usage Example
+
+1. Define styles in a Vue component:
+
+```vue
+<template>
+  <button class="button">Button</button>
+</template>
+
+<style scoped>
+.button {
+  background: blue;
+  color: white;
+}
+</style>
+```
+
+Each method has its own applicable scenarios and limitations. Developers can choose the appropriate style isolation solution based on project requirements.
+
+## FAQ
+
+### Why doesn't Module Federation directly handle CSS style isolation?
+
+The main reasons for not directly incorporating CSS isolation into Module Federation are:
+
+* 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.
+
+* 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:
+  * 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.
+  * Collecting and clearing CSS: Due to the isolation and shared reuse issues mentioned above, CSS might be unintentionally cleared.
+  * Upgrading the sandbox in the consumer: The impact on business is uncontrollable.
+
+> Suggested handling methods:
+
+* Process CSS at the module or sub-application producer level to ensure that the module or application runs as expected in any environment.
+* Use CSS modules, component library prefixes, and unified component library versions to solve the problem.
+* Directly export Shadow DOM components for use by other businesses.

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

@@ -82,7 +82,7 @@ export default defineConfig({
 ```
 
 ### Note
-If you need to use the Module Federation runtime capabilities, please install [@module-federation/enhanced](/en/guide/basic/runtime.html)
+If you need to use the Module Federation runtime capabilities, please install [@module-federation/enhanced](/en/guide/basic/runtime/runtime.html)
 
 ## Configuration