@modern-js/main-doc 2.46.1 → 2.47.0

package/docs/en/guides/get-started/tech-stack.mdx

@@ -89,7 +89,7 @@ Modern.js supports enabling ["Tailwind CSS"](/en/guides/basic-features/css.html#
 Modern.js supports three CSS preprocessors: [Sass](https://sass-lang.com/), [Less](https://lesscss.org/), and [Stylus](https://stylus-lang.com/):
 
 - Sass and Less are supported by default and ready to use.
-- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://modernjs.dev/builder/en/plugins/plugin-stylus.html).
+- Stylus is optional and can be used by referring to the ["Stylus Plugin"](https://rsbuild.dev/plugins/list/plugin-stylus).
 
 ---
 

package/docs/en/guides/topic-detail/framework-plugin/introduction.mdx

@@ -10,7 +10,7 @@ Modern.js offers a comprehensive plugin system with a complete lifecycle. Plugin
 
 ## Usage
 
-Plugins must be explicitly registered in the configuration file to be effective. When you need to add plugins to Modern.js, you can configure them in the `[plugin](/configure/app/plugins.html)` field:
+Plugins must be explicitly registered in the configuration file to be effective. When you need to add plugins to Modern.js, you can configure them in the `[plugins](/configure/app/plugins.html)` field:
 
 ```ts title="edenx.config.ts"
 // an example for bff

package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -12,14 +12,15 @@ Through this chapter you can learn:
 
 ## Create an app
 
-Currently supports two routing modes
+The routing modes of the current project are divided into the following three types:
 
-- Self-controlled routing
-- Conventional routing
+- File-based routing (`router: true` and file-based)
+- Self-Controlled routing (`router: true` and create `BrowserRouter`)
+- Other (`router: false` and independent installation of `react-router-dom` in the project)
 
 First, clarify the routing mode of the main application [create a file-based routing main App](#file-based-routing-main-app) or [create a self-controlled main App](#self-controlled-main-app)
 
-In this experience we will create two sub-applications Table and Dashboard for the main application (Table is reduced routing, Dashboard is self-controlled routing)
+In this tutorial we will create two sub-applications Table and Dashboard for the main application (Table is reduced routing, Dashboard is self-controlled routing)
 
 ### File-based Routing Main App
 
@@ -139,6 +140,36 @@ import CustomRouterMicroFrontend from '@site-docs-en/components/custom-router-mi
 
 <CustomRouterMicroFrontend />
 
+### Other Main App
+
+Install and use `react-router-dom` independently in the project. The only difference from self-controlled routing is that after setting `router: false`, plugin-garfish cannot obtain `useLocation`, `useHref` and other hooks to assist in calculating basename and main and child applications. Route synchronization
+
+import { Tab, Tabs } from 'rspress/theme';
+
+<Tabs>
+<Tab label="react-router-dom@6">
+```tsx
+import { useLocation, useHref } from 'react-router-dom';
+const App = () => {
+  const basename = useHref('/table');
+  const { Table } = useModuleApps();
+  return <Table useLocation={useLocation} basename={basename} />;
+};
+```
+</Tab>
+<Tab label="react-router-dom@5">
+```tsx
+import { useLocation, useHistory } from 'react-router-dom';
+const App = () => {
+  const history = useHistory();
+  const basename = history.createHref({ pathname: '/table' });
+  const { Table } = useModuleApps();
+  return <Table useLocation={useLocation} basename={basename} />;
+};
+```
+</Tab>
+</Tabs>
+
 ### File-based sub-app
 
 Initialize the project with a command line:

package/docs/zh/apis/app/commands.mdx

@@ -195,7 +195,7 @@ Options:
 
 ## modern inspect
 
-`modern inspect` 命令用于查看项目的 [Modern.js Builder 配置](https://modernjs.dev/builder/guide/basic/builder-config.html) 以及 webpack 配置。
+`modern inspect` 命令用于查看项目的 [Rsbuild 配置](https://rsbuild.dev/zh/config/index) 以及 webpack 或 Rspack 配置。
 
 ```bash
 Usage: modern inspect [options]
@@ -210,16 +210,16 @@ Options:
 
 在项目根目录下执行命令 `npx modern inspect` 后，会在项目的 `dist` 目录生成以下文件：
 
-- `builder.config.js`: 表示在构建时使用的 Modern.js Builder 配置。
-- `webpack.config.web.js`: 表示在构建时使用的 webpack 配置。
+- `rsbuild.config.mjs`: 表示在构建时使用的 Rsbuild 配置。
+- `webpack.config.web.mjs`: 表示在构建时使用的 webpack 配置。
 
 ```bash
 ➜ npx modern inspect
 
 Inspect config succeed, open following files to view the content:
 
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
+  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
+  - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
 ```
 
 ### 指定环境
@@ -240,16 +240,16 @@ modern inspect --verbose
 
 ### SSR 构建配置
 
-如果项目开启了 SSR 能力，则在 `dist` 目录会另外生成一份 `webpack.config.node.js` 文件，对应 SSR 构建时的 webpack 配置。
+如果项目开启了 SSR 能力，则在 `dist` 目录会另外生成一份 `webpack.config.node.mjs` 文件，对应 SSR 构建时的 webpack 配置。
 
 ```bash
 ➜ npx modern inspect
 
 Inspect config succeed, open following files to view the content:
 
-  - Builder Config: /root/my-project/dist/builder.config.js
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.js
-  - Webpack Config (node): /root/my-project/dist/webpack.config.node.js
+  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
+  - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
+  - Webpack Config (node): /root/my-project/dist/webpack.config.node.mjs
 ```
 
 ## modern lint

package/docs/zh/configure/app/auto-load-plugin.mdx

@@ -39,14 +39,14 @@ Modern.js 将通过以下几个步骤帮你自动注册插件
 1. Modern.js 在内部维护一份官方插件列表。
 
 ```js
-const InternalPlugins = ['@modern-js/app-tools', '@modern-js/plugin-i18n', ...];
+const InternalPlugins = ['@modern-js/app-tools', '@modern-js/plugin-tailwindcss', ...];
 ```
 
 2. Modern.js 将读取你的 `package.json` 文件，收集依赖信息。
 
 ```json title="package.json"
 "dependencies": {
-  "@modern-js/plugin-i18n": "x.x.x"
+  "@modern-js/plugin-tailwindcss": "x.x.x"
   ...
 },
 "devDependencies": {
@@ -55,7 +55,7 @@ const InternalPlugins = ['@modern-js/app-tools', '@modern-js/plugin-i18n', ...];
 }
 ```
 
-3. Modern.js 观察到你安装了 `@modern-js/plugin-i18n` 和 `@modern-js/app-tools` 等依赖后，将会引入插件自动注册。
+3. Modern.js 观察到你安装了 `@modern-js/plugin-tailwindcss` 和 `@modern-js/app-tools` 等依赖后，将会引入插件自动注册。
 
 可以注意到这种方式相对黑盒，你甚至对加载插件的过程是无感知的。我们希望更多的细节暴露给开发者，能让开发者去控制这一过程。
 

package/docs/zh/configure/app/builder-plugins.mdx

@@ -4,18 +4,18 @@ sidebar_position: 21
 
 # builderPlugins 构建插件
 
-- **类型：** `BuilderPlugin[]`
+- **类型：** `RsbuildPlugin[]`
 - **默认值：** `[]`
 
-用于配置 Modern.js Builder 构建插件。
+用于配置 Rsbuild 构建插件。
 
-Modern.js Builder 是 Modern.js 底层的构建工具，请阅读 [构建能力](/guides/concept/builder) 了解相关背景。
+Rsbuild 是 Modern.js 底层的构建工具，请阅读 [构建能力](/guides/concept/builder) 了解相关背景。
 
-如果你想了解 Builder 插件的编写方式，可以参考 [Modern.js Builder - 插件系统](https://modernjs.dev/builder/plugins/introduction.html)。
+如果你想了解 Rsbuild 插件的编写方式，可以参考 [Rsbuild - 插件系统](https://rsbuild.dev/zh/plugins/dev/index)。
 
 ## 注意事项
 
-该选项**用于配置 Modern.js Builder 构建插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
+该选项**用于配置 Rsbuild 构建插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
 
 - 配置 Modern.js 框架插件，请使用 [plugins](/configure/app/plugins) 配置项。
 - 配置 Rspack 或 webpack 插件，请使用 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置项。
@@ -23,23 +23,23 @@ Modern.js Builder 是 Modern.js 底层的构建工具，请阅读 [构建能力]
 
 ## 何时使用
 
-大部分场景下，我们推荐你使用 Modern.js 框架插件，框架插件可以通过 [plugins](/configure/app/plugins) 字段进行注册。因为框架插件提供的 API 更丰富、能力更强，而 Builder 插件提供的 API 只能用于构建场景。
+大部分场景下，我们推荐你使用 Modern.js 框架插件，框架插件可以通过 [plugins](/configure/app/plugins) 字段进行注册。因为框架插件提供的 API 更丰富、能力更强，而 Rsbuild 插件提供的 API 只能用于构建场景。
 
-当你需要引用一些现有的 Builder 插件（并且在 Modern.js 中没有相关能力），或是在不同的框架之间复用 Builder 插件时，你可以使用 `builderPlugins` 字段进行注册。
+当你需要引用一些现有的 Rsbuild 插件（并且在 Modern.js 中没有相关能力），或是在不同的框架之间复用 Rsbuild 插件时，你可以使用 `builderPlugins` 字段进行注册。
 
 ## 示例
 
-下面是 Builder 插件的使用示例。
+下面是 Rsbuild 插件的使用示例。
 
 ### 使用 npm 上的插件
 
 使用 npm 上的插件，需要通过包管理器安装插件，并通过 import 引入。
 
 ```ts title="modern.config.ts"
-import { myBuilderPlugin } from 'my-builder-plugin';
+import { myRsbuildPlugin } from 'my-rsbuild-plugin';
 
 export default defineConfig({
-  builderPlugins: [myBuilderPlugin()],
+  builderPlugins: [myRsbuildPlugin()],
 });
 ```
 
@@ -48,10 +48,10 @@ export default defineConfig({
 使用本地代码仓库中的插件，直接通过相对路径 import 引入即可。
 
 ```ts title="modern.config.ts"
-import { myBuilderPlugin } from './plugin/myBuilderPlugin';
+import { myRsbuildPlugin } from './plugin/myRsbuildPlugin';
 
 export default defineConfig({
-  builderPlugins: [myBuilderPlugin()],
+  builderPlugins: [myRsbuildPlugin()],
 });
 ```
 
@@ -60,11 +60,11 @@ export default defineConfig({
 如果插件提供了一些自定义的配置项，可以通过插件函数的参数传入配置。
 
 ```ts title="modern.config.ts"
-import { myBuilderPlugin } from 'my-builder-plugin';
+import { myRsbuildPlugin } from 'my-rsbuild-plugin';
 
 export default defineConfig({
   builderPlugins: [
-    myBuilderPlugin({
+    myRsbuildPlugin({
       foo: 1,
       bar: 2,
     }),

package/docs/zh/configure/app/output/disable-node-polyfill.mdx

@@ -19,4 +19,4 @@ export default defineConfig({
 });
 ```
 
-该配置项基于 Modern.js Builder 的 Node Polyfill 插件实现，你可以阅读 [Modern.js Builder - Node Polyfill 插件](https://modernjs.dev/builder/plugins/plugin-node-polyfill.html) 文档来了解详细信息。
+该配置项基于 Rsbuild 的 Node Polyfill 插件实现，你可以阅读 [Rsbuild - Node Polyfill 插件](https://rsbuild.dev/zh/plugins/list/plugin-node-polyfill) 文档来了解详细信息。

package/docs/zh/guides/advanced-features/compatibility.mdx

@@ -19,7 +19,7 @@ ios_saf >= 10
 ```
 
 :::tip
-请查看 [Modern.js Builder - 设置浏览器范围](https://modernjs.dev/builder/guide/advanced/browserslist) 来了解更多内容。
+请查看 [Rsbuild - 设置浏览器范围](https://rsbuild.dev/zh/guide/advanced/browserslist) 来了解更多内容。
 :::
 
 ## Polyfill

package/docs/zh/guides/advanced-features/optimize-bundle.mdx

@@ -44,9 +44,9 @@ BUNDLE_ANALYZE=true pnpm build
 
 ## 提升 Browserslist 范围
 
-Builder 会根据项目的 Browserslist 配置范围进行代码编译，并注入相应的 Polyfill。如果项目不需要兼容旧版浏览器，可以根据实际情况来提升 Browserslist 范围，从而减少在语法和 Polyfill 上的编译开销。
+Modern.js 会根据项目的 Browserslist 配置范围进行代码编译，并注入相应的 Polyfill。如果项目不需要兼容旧版浏览器，可以根据实际情况来提升 Browserslist 范围，从而减少在语法和 Polyfill 上的编译开销。
 
-Builder 默认的 Browserslist 配置为：
+Modern.js 默认的 Browserslist 配置为：
 
 ```js
 ['> 0.01%', 'not dead', 'not op_mini all'];
@@ -59,14 +59,14 @@ Builder 默认的 Browserslist 配置为：
 ```
 
 :::tip
-请阅读 [设置浏览器范围](https://modernjs.dev/builder/guide/advanced/browserslist.html) 章节来了解更多关于 Browserslist 的用法。
+请阅读 [设置浏览器范围](https://rsbuild.dev/zh/guide/advanced/browserslist) 章节来了解更多关于 Browserslist 的用法。
 :::
 
 ## 按需引入 polyfill
 
 在明确第三方依赖不需要额外 polyfill 的情况下，你可以将 [output.polyfill](/configure/app/output/polyfill.html) 设置为 `usage`。
 
-在 `usage` 模式下，Builder 会分析源代码中使用的语法，按需注入所需的 polyfill 代码，从而减少 polyfill 的代码量。
+在 `usage` 模式下，Modern.js 会分析源代码中使用的语法，按需注入所需的 polyfill 代码，从而减少 polyfill 的代码量。
 
 ```js
 export default {
@@ -85,20 +85,20 @@ export default {
 在一般的前端项目中，图片资源的体积往往是项目产物体积的大头，因此如果能尽可能精简图片的体积，那么将会对项目的打包产物体积起到明显的优化效果。你可以在 Modern.js 中注册插件来启用图片压缩功能:
 
 ```js title="modern.config.ts"
-import { builderPluginImageCompress } from '@modern-js/builder-plugin-image-compress';
+import { pluginImageCompress } from '@rsbuild/plugin-image-compress';
 
 export default {
-  builderPlugins: [builderPluginImageCompress()],
+  builderPlugins: [pluginImageCompress()],
 };
 ```
 
-详见 [Image Compress 插件](https://modernjs.dev/builder/plugins/plugin-image-compress.html)。
+详见 [Image Compress 插件](https://rsbuild.dev/zh/plugins/list/plugin-image-compress)。
 
 ## 代码拆包
 
 良好的拆包策略对于提升应用的加载性能是十分重要的，可以充分利用浏览器的缓存机制，减少请求数量，加快页面加载速度。
 
-在 Modern.js 中内置了[多种拆包策略](https://modernjs.dev/builder/guide/optimization/split-chunk)，可以满足大部分应用的需求，你也可以根据自己的业务场景，自定义拆包配置。
+在 Modern.js 中内置了[多种拆包策略](https://rsbuild.dev/zh/guide/optimization/split-chunk)，可以满足大部分应用的需求，你也可以根据自己的业务场景，自定义拆包配置。
 
 比如将 node_modules 下的 `axios` 库拆分到 `axios.js` 中：
 

package/docs/zh/guides/advanced-features/rsbuild-plugin.mdx

@@ -0,0 +1,51 @@
+---
+sidebar_position: 21
+title: 使用 Rsbuild 插件
+---
+
+# 使用 Rsbuild 插件
+
+## 插件介绍
+
+Rsbuild 是 Modern.js 底层的构建工具，可通过添加 Rsbuild 插件修改默认的构建行为并添加各类额外功能，包括但不限于：
+
+- 修改 Rsbuild 配置
+- 处理新的文件类型
+- 修改或编译文件
+- 部署产物
+
+你可以在 `modern.config.ts` 中通过 `builderPlugins` 选项来注册 Rsbuild 插件，详见 [builderPlugins 构建插件](/configure/app/builder-plugins.html)。
+
+## 官方插件
+
+:::tip
+Rsbuild 中大部分插件已内置在 Modern.js 中，如：需要注入 Node 模块的 Polyfill 时，可直接使用 [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) 配置项。
+:::
+
+### 内置插件
+
+以下是已在 Modern.js 中内置的 Rsbuild 官方插件：
+
+| 插件                                                                                   | 介绍                                                                                     | Modern.js 链接                                                                                                                        |
+| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [React 插件](https://rsbuild.dev/zh/plugins/list/plugin-react)                         | 提供对 React 的支持                                                                      | -                                                                                                                                     |
+| [SVGR 插件](https://rsbuild.dev/zh/plugins/list/plugin-svgr)                           | 支持将 SVG 图片转换为一个 React 组件使用                                                 | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
+| [Styled Components 插件](https://rsbuild.dev/zh/plugins/list/plugin-styled-components) | 提供对 styled-components 的编译时支持                                                    | [tools.styledComponents](/configure/app/tools/styled-components.html)                                                                 |
+| [Assets Retry 插件](https://rsbuild.dev/zh/plugins/list/plugin-assets-retry)           | 用于在静态资源加载失败时自动发起重试请求                                                 | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
+| [Type Check 插件](https://rsbuild.dev/zh/plugins/list/plugin-type-check)               | 用于在单独的进程中运行 TypeScript 类型检查                                               | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
+| [Node Polyfill 插件](https://rsbuild.dev/zh/plugins/list/plugin-node-polyfill)         | 用于注入 Node 核心模块在浏览器端的 polyfills                                             | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html)                                                        |
+| [Source Build 插件](https://rsbuild.dev/zh/plugins/list/plugin-source-build)           | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新                       | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
+| [Check Syntax 插件](https://rsbuild.dev/zh/plugins/list/plugin-check-syntax)           | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法                           | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
+| [CSS Minimizer 插件](https://rsbuild.dev/zh/plugins/list/plugin-css-minimizer)         | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩。 | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
+| [Pug 插件](https://rsbuild.dev/zh/plugins/list/plugin-pug)                             | 提供对 Pug 模板引擎的支持                                                                | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
+| [Rem 插件](https://rsbuild.dev/zh/plugins/list/plugin-rem)                             | 用于实现移动端页面的 rem 自适应布局                                                      | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
+| [YAML 插件](https://rsbuild.dev/zh/plugins/list/plugin-yaml)                           | 用于引用 YAML 文件，并将其转换为 JavaScript 对象                                         | [TOML 文件](/guides/basic-features/json-files.html#toml-文件)                                                                         |
+| [TOML 插件](https://rsbuild.dev/zh/plugins/list/plugin-toml)                           | 用于引用 TOML 文件，并将其转换为 JavaScript 对象                                         | [YAML 文件](/guides/basic-features/json-files.html#yaml-文件)                                                                         |
+
+### 未内置插件
+
+以下是未在 Modern.js 中内置的 Rsbuild 官方插件：
+
+- [Image Compress 插件](https://rsbuild.dev/zh/plugins/list/plugin-image-compress)：将项目中用到的图片资源进行压缩处理。
+- [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
+- [UMD 插件](https://rsbuild.dev/zh/plugins/list/plugin-umd)：用于构建 UMD 格式的产物。

package/docs/zh/guides/advanced-features/rspack-start.mdx

@@ -60,7 +60,7 @@ Modern.js 中 [tools.webpack](/configure/app/tools/webpack) 和 [tools.webpackCh
 ```diff
 export default {
   tools: {
--   webppack: (config, { env }) => {
+-   webpack: (config, { env }) => {
 +   rspack: (config, { env }) => {
       if (env === 'development') {
         config.devtool = 'cheap-module-eval-source-map';

package/docs/zh/guides/advanced-features/using-storybook.mdx

@@ -2,12 +2,7 @@
 sidebar_position: 15
 ---
 
-# 使用 StorybookV6
-
-:::warning
-该教程是用于老版本 StorybookV6 用户，并且会在以后弃用，想要从旧版本插件升级或新用户想要尝试请查看[新文档](https://modernjs.dev/builder/guide/advanced/storybook.html)
-:::
-
+# 使用 Storybook
 
 [Storybook](https://storybook.js.org/) 是一个专门用于组件调试的工具，它围绕着组件开发提供了：
 
@@ -17,33 +12,221 @@ sidebar_position: 15
 - 可分享能力
 - 工作流程自动化
 
-## 开启 Storybook 调试
+:::tip
+本教程适用于新版 Storybook V7 用户，如果你在使用老版本 Storybook V6 (有使用 @modern-js/plugin-storybook 插件)，可参考 [迁移指南](#迁移指南) 进行升级。
+:::
 
-Modern.js 默认集成了 Storybook 的调试能力。
+## 快速开始
 
-当我们想要对组件进行调试的时候，可以通过 `pnpm run new` 启用 Storybook 调试功能。
+Modern.js 默认集成了 Storybook 的调试能力，当我们想要对组件进行调试的时候，可以通过以下方式启用 Storybook 调试功能：
 
 ```bash
 $ npx modern new
 ? 请选择你想要的操作 启用可选功能
-? 请选择功能名称 启用「Visual Testing (Storybook)」模式
+? 请选择功能名称 启用「Storybook」V7
+```
+
+该命令会创建好 Storybook 常用的模版，包括：
+
+- 创建配置文件夹 `.storybook`，以及默认配置文件 `.storybook/main.ts`
+- 创建 stories 组件示例
+- 更新 package.json，新增依赖 @storybook/addon-essential 和 @modern-js/storybook，以及创建 storybook 相关脚本
+
+运行 `npm run storybook` 即可启动 Storybook 预览。
+
+## 开启 Rspack 构建
+
+Rspack 构建速度非常快，在 Modern.js 中只需要如下配置即可使用 Rspack 作为构建工具。
+
+```diff filename='.storybook/main.js'
+const config = {
+  framework: {
+    name: '@modern-js/storybook',
+    options: {
+-      bundler: 'webpack'
++      bundler: 'rspack'
+    },
+  },
+  typescript: {
+-    reactDocgen: 'react-docgen-typescript'
++    reactDocgen: 'react-docgen'
+  }
+};
+
+export default config;
+```
+
+注意上面配置中，更改了 reactDocgen 配置，因为 Rspack 目前还不支持 @storybook/react-docgen-typescript-plugin。
+
+## 配置
+
+在 `.storybook/main.js` 中包含一些配置。
+
+### configPath
+
+- **类型**: `string`
+- **默认值**: `modern.config.(j|t)s`
+
+用于指定配置文件路径。
+
+例如
+
+```javascript filename='.storybook/main.js'
+const config = {
+  framework: {
+    name: '@modern-js/storybook',
+    options: {
+      configPath: 'modern.storybook.config.ts',
+    },
+  },
+};
+
+export default config;
+```
+
+### bundler
+
+- **类型**: `'webpack' | 'rspack'`
+- **默认值**: `webpack`
+
+指定底层构建工具使用 Webpack 还是 Rspack。
+
+例如
+
+```javascript filename='.storybook/main.js'
+const config = {
+  framework: {
+    name: '@modern-js/storybook',
+    options: {
+      bundler: 'rspack',
+    },
+  },
+};
+
+export default config;
+```
+
+### builderConfig
+
+- **类型**: `BuilderConfig`
+- **默认值**: `undefined`
+
+更改构建配置，该配置比配置文件拥有更高的优先级，若不想使用配置文件，也可直接在此处指定。
+
+例如
+
+```javascript filename='.storybook/main.js'
+const config = {
+  framework: {
+    name: '@modern-js/storybook',
+    options: {
+      builderConfig: {
+        alias: {
+          react: require.resolve('react'),
+          'react-dom': require.resolve('react-dom'),
+        },
+      },
+    },
+  },
+};
+
+export default config;
 ```
 
-执行完成后，你只需在 `modern.config.ts` 文件中注册 Modern.js 的 Storybook 插件，即可启用 Storybook 调试能力。
+## 命令行
+
+@modern-js/storybook 代理了部分 storybook cli 的命令。
+
+### storybook dev
+
+启动 Storybook，详情请看 [storybook#dev](https://storybook.js.org/docs/react/api/cli-options#dev)
+
+### storybook build
+
+对 Storybook 进行生产环境构建，详情请看 [storybook#build](https://storybook.js.org/docs/react/api/cli-options#build)
+
+## Storybook addon 兼容性
+
+由于当前文档中的 Storybook 版本为 7，因此请选择 storybook V7 的 addon。
+
+当 addon 不需要额外的 Babel 或 Webpack 配置时，可以直接使用，如 @storybook/addon-essentials。
 
-```ts title="modern.config.ts"
-import { appTools, defineConfig } from '@modern-js/app-tools';
-import { storybookPlugin } from '@modern-js/plugin-storybook';
+部分 addon 需要依赖 babel 插件和 Webpack 配置时，如 @storybook/addon-coverage，只有使用 webpack 构建才会支持。
 
-export default defineConfig({
-  plugins: [appTools(), storybookPlugin()],
-});
+## 收益
+
+使用 @modern-js/storybook 可以带给你 Rspack 超快的构建，并且完全无需繁琐配置，开箱即用。并且默认包含了许多 Web 构建中的最佳实践，例如 code splitting 策略，内置 css module 和 postcss，开箱即用的 TypeScript 支持，内置常用 Babel 插件等等。
+
+Modern.js 的构建能力和配置都可以直接在 Storybook 项目中使用。
+
+## Trouble Shooting
+
+1. 使用 Modern.js 启动 storybook 时不会读取 babel.config.json 等配置文件，因此 babel 配置需要在 [tools.babel](/configure/app/tools/babel) 中进行配置。
+   同样的 webpack 配置需要写在 [tools.webpack](/configure/app/tools/webpack) 或 [tools.webpackChain](/configure/app/tools/webpack-chain) 中。
+
+2. 如果发现构建速度很慢，请检查是否开启了自动文档生成功能，如果想要最高的性能，请配置为 `react-docgen`。`react-docgen` 和 `react-docgen-typescript` 的区别是，前者基于 Babel 实现，后者基于 TypeScript 实现，前者性能会更好，但类型推断能力更弱。如果使用 Rspack 构建，则只支持 `react-docgen`。
+
+```javascript filename='.storybook/main.js'
+const config = {
+  typescript: {
+    reactDocgen: 'react-docgen',
+  },
+};
+
+export default config;
 ```
 
-## 调试代码
+## 迁移指南
+
+### 从 Modern.js Storybook V6 迁移
+
+如果你是从 V6 迁移至 V7 的用户，可以通过 [上述方式](#快速开始) 使用 V7，同时做以下调整:
+
+##### 修改配置文件
+
+若你在旧版本对 storybook 进行了一些自定义配置，需要将配置文件 `root/config/storybook/main.(j|t)s` 移动到 `root/.storybook/main.(j|t)s`。
+
+并在 `root/.storybook/main.(j|t)s` 中添加以下配置，指定 framework 为 @modern-js/storybook：
+
+```diff
+const config = {
++  framework: {
++    name: '@modern-js/storybook'
++  },
+};
+
+export default config;
+```
+
+##### 依赖升级
+
+升级 @storybook/addon-\* 系列依赖，升级到 7 版本。
+
+##### 移除 @modern-js/plugin-storybook 插件
+
+在 modern.config.(j|t)s 中删除 @modern-js/plugin-storybook 插件的注册。
+
+##### 修改 Storybook 写法
+
+按照 Storybook 官网文档，对一些 breaking change 做相应的更新，例如 stories 的写法，MDX 的写法等，参考[storybook 迁移文档](https://storybook.js.org/docs/react/migration-guide)。
+
+### 从原生 Storybook 项目迁移
+
+若当前 Storybook 版本还是 6，需要先按照 Storybook 官网文档升级到版本 7，参考 [storybook 迁移文档](https://storybook.js.org/docs/react/migration-guide)。
+
+```diff filename='.storybook/main.js'
+const config = {
+-  framework: '@storybook/react-webapck5',
++  framework: {
++    name: '@modern-js/storybook'
++  },
+};
+
+export default config;
+```
 
-Modern.js 默认识别项目源码目录 src/ 下 [\*.stories.(js|jsx|ts|tsx|mdx)](/apis/app/hooks/src/stories.html) 格式的文件作为 Storybook 的调试文件。
+Modern.js 的配置文件默认为 `modern.config.(j|t)s`，配置请查看 [modern.js 配置](/configure/app/usage)。
 
-## 配置 Storybook
+若原来项目中包含了 Babel 等配置，需要对应的写在 modern 配置中，大部分 Babel 配置已经包含进了 Modern.js。
 
-在 Modern.js 中，可以在项目的 [`config/storybook`](/apis/app/hooks/config/storybook.html) 目录下增加 Storybook 配置文件。
+安装完成后进行相应的[配置](/guides/advanced-features/using-storybook#配置)。

package/docs/zh/guides/basic-features/css.mdx

@@ -12,13 +12,13 @@ Modern.js 内置了社区流行的 CSS 预处理器，包括 Less 和 Sass。
 
 默认情况下，你不需要对 Less 和 Sass 进行任何配置。如果你有自定义 loader 配置的需求，可以通过配置 [tools.less](/configure/app/tools/less)、[tools.sass](/configure/app/tools/sass) 来进行设置。
 
-你也可以在 Modern.js 中使用 Stylus，只需要安装 Modern.js Builder 提供的 Stylus 插件即可，使用方式请参考 [Stylus 插件](https://modernjs.dev/builder/plugins/plugin-stylus.html)。
+你也可以在 Modern.js 中使用 Stylus，只需要安装 Rsbuild 提供的 Stylus 插件即可，使用方式请参考 [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus)。
 
 ## 使用 PostCSS
 
 Modern.js 内置了 [PostCSS](https://postcss.org/) 来转换 CSS 代码。
 
-请阅读 [Modern.js Builder - 使用 PostCSS](https://modernjs.dev/builder/guide/basic/css-usage.html#%E4%BD%BF%E7%94%A8-postcss) 了解更多用法。
+请阅读 [Rsbuild - 使用 PostCSS](https://rsbuild.dev/zh/guide/basic/css-usage#%E4%BD%BF%E7%94%A8-postcss) 了解更多用法。
 
 ## 使用 CSS Modules