@modern-js/main-doc 2.46.1 → 2.47.1

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

@@ -195,7 +195,7 @@ Options:
 
 ## modern inspect
 
-The `modern inspect` command is used to view the [Modern.js Builder config](https://modernjs.dev/builder/en/guide/basic/builder-config.html) and webpack config of the project.
+The `modern inspect` command is used to view the [Rsbuild config](https://rsbuild.dev/config/index) and webpack or Rspack config of the project.
 
 ```bash
 Usage: modern inspect [options]
@@ -210,16 +210,16 @@ Options:
 
 After executing the command `npx modern inspect` in the project root directory, the following files will be generated in the `dist` directory of the project:
 
-- `builder.config.js`: The Modern.js Builder config to use at build time.
-- `webpack.config.web.js`: The webpack config used by to use at build time.
+- `rsbuild.config.mjs`: The Rsbuild config to use at build time.
+- `webpack.config.web.mjs`: The webpack config used by to use at build time.
 
 ```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
 ```
 
 ### Configuration Env
@@ -240,16 +240,16 @@ modern inspect --verbose
 
 ### SSR Configuration
 
-If the project has enabled SSR, an additional `webpack.config.node.js` file will be generated in the `dist/`, corresponding to the webpack configuration at SSR build time.
+If the project has enabled SSR, an additional `webpack.config.node.mjs` file will be generated in the `dist/`, corresponding to the webpack configuration at SSR build time.
 
 ```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/en/configure/app/auto-load-plugin.mdx

@@ -39,14 +39,14 @@ Modern.js will help you automatically register the plugin by following these ste
 1. Modern.js maintains an official list of plugins internally.
 
 ```js
-const InternalPlugins = ['@modern-js/app-tools', '@modern-js/plugin-i18n', ...];
+const InternalPlugins = ['@modern-js/app-tools', '@modern-js/plugin-tailwindcss', ...];
 ```
 
 2. Modern.js will read your `package.json` and collect the dependency information.
 
 ```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 observes that when you install dependencies such as `@modern-js/plugin-i18n` and `@modern-js/app-tools`, automatic plugin registration will be imported.
+3. Modern.js observes that when you install dependencies such as `@modern-js/plugin-tailwindcss` and `@modern-js/app-tools`, automatic plugin registration will be imported.
 
 You can notice that this approach is relatively black-box and you are not even aware of the process of loading the plugin. We want to expose more details to the developer and be able to let the developer control the process.
 

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

@@ -4,16 +4,16 @@ sidebar_position: 21
 
 # builderPlugins
 
-- **Type:** `BuilderPlugin[]`
+- **Type:** `RsbuildPlugin[]`
 - **Default:** `[]`
 
-Used to configure the Modern.js Builder plugin.
+Used to configure the Rsbuild plugin.
 
-Modern.js Builder is the build tool of Modern.js, please read [Builder](/guides/concept/builder) for background. If you want to know how to write Builder plugins, you can refer to [Modern.js Builder - Introduce to Plugin](https://modernjs.dev/builder/en/plugins/introduction.html).
+Rsbuild is the build tool of Modern.js, please read [Build Engine](/guides/concept/builder) for background. If you want to know how to write Rsbuild plugins, you can refer to [Rsbuild - Plugin System](https://rsbuild.dev/plugins/dev/index).
 
 ## Precautions
 
-This option **is used to configure the Modern.js Builder plugins**. If you need to configure other types of plugins, please select the corresponding configs:
+This option **is used to configure the Rsbuild plugins**. If you need to configure other types of plugins, please select the corresponding configs:
 
 - Use [plugins](/configure/app/plugins) to configure Modern.js framework plugins.
 - Use [tools.bundlerChain](/configure/app/tools/bundler-chain) to configure Rspack or webpack plugins.
@@ -21,23 +21,23 @@ This option **is used to configure the Modern.js Builder plugins**. If you need
 
 ## When to use
 
-In most scenarios, we recommend you to use the Modern.js framework plugin, which can be registered through the [plugins](/configure/app/plugins) config. Because the API provided by the framework plugin is richer and more capable, while the API provided by the Builder plugin can only be used to build scenes.
+In most scenarios, we recommend you to use the Modern.js framework plugin, which can be registered through the [plugins](/configure/app/plugins) config. Because the API provided by the framework plugin is richer and more capable, while the API provided by the Rsbuild plugin can only be used to build scenes.
 
-When you need to reference some existing Builder plugins (and there is no related capability in Modern.js), or reuse Builder plugins between different frameworks, you can use the `builderPlugins` field to register them.
+When you need to reference some existing Rsbuild plugins (and there is no related capability in Modern.js), or reuse Rsbuild plugins between different frameworks, you can use the `builderPlugins` field to register them.
 
 ## Example
 
-Below is an example of using the Builder plugin.
+Below is an example of using the Rsbuild plugin.
 
 ### Using plugins on npm
 
 To use a plugin on npm, you need to install the plugin through the package manager and import it.
 
 ```ts title="modern.config.ts"
-import myBuilderPlugin from 'my-builder-plugin';
+import myRsbuildPlugin from 'my-rsbuild-plugin';
 
 export default defineConfig({
-  builderPlugins: [myBuilderPlugin()],
+  builderPlugins: [myRsbuildPlugin()],
 });
 ```
 
@@ -46,10 +46,10 @@ export default defineConfig({
 Use the plugin in the local code repository, you can import it directly through the relative path import.
 
 ```ts title="modern.config.ts"
-import myBuilderPlugin from './plugin/myBuilderPlugin';
+import myRsbuildPlugin from './plugin/myRsbuildPlugin';
 
 export default defineConfig({
-  builderPlugins: [myBuilderPlugin()],
+  builderPlugins: [myRsbuildPlugin()],
 });
 ```
 
@@ -58,11 +58,11 @@ export default defineConfig({
 If the plugin provides some custom configuration options, you can pass in the configuration through the parameters of the plugin function.
 
 ```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/en/configure/app/output/disable-node-polyfill.mdx

@@ -19,4 +19,4 @@ export default defineConfig({
 });
 ```
 
-This config is implemented based on the Node Polyfill plugin of Modern.js Builder, you can read [Modern.js Builder - Node Polyfill Plugin](https://modernjs.dev/builder/en/plugins/plugin-node-polyfill.html) documentation for details.
+This config is implemented based on the Node Polyfill plugin of Rsbuild, you can read [Rsbuild - Node Polyfill Plugin](https://rsbuild.dev/plugins/list/plugin-node-polyfill) documentation for details.

package/docs/en/configure/app/server/ssr.mdx

@@ -27,7 +27,7 @@ When the value type is `Object`, the following properties can be configured:
 
 - `mode`: `string = 'string'`, which defaults to using `renderToString` for rendering. Configure `stream` to enable streaming rendering.
 - `forceCSR`: `boolean = false`, which is off by default for forcing CSR rendering. Configure `true` to force CSR by adding `?csr=true` or adding `x-modern-ssr-fallback` header when accessing the page.
-- `inlineScript`: `boolean = true`, by default, SSR data is injected into HTML as inline scripts and assigned directly to global variables. Configure `false` to distribute JSON instead of assigning to global variables.
+- `inlineScript`: `boolean = true`, by default, SSR data is injected into HTML as inline scripts and assigned directly to global variables. Configure `false` to distribute JSON instead of assigning to global variables, this configuration doesn't work in Streaming SSR.
 - `disablePrerender`: `boolean = fasle`, To ensure compatibility with the old data request method (`useLoader`), by default, Modern.js performs pre-rendering of components.
   However, if developers want to reduce one rendering when there is no use of the useLoader API in your project, you can set the configuration `disablePrerender=true`.
 - `unsafeHeaders`: `string[] = []`, For safety reasons, Modern.js does not add excessive content to SSR_DATA. Developers can use this configuration to specify the headers that need to be injected.

package/docs/en/configure/app/source/enable-async-entry.mdx

@@ -13,7 +13,7 @@ When this option is enabled, Modern.js will wrap the automatically generated ent
 
 ## Background
 
-import ModuleFederation from '@modern-js/builder-doc/docs/zh/shared/module-federation.md';
+import ModuleFederation from '@modern-js/builder-doc/docs/en/shared/module-federation.md';
 
 <ModuleFederation />
 

package/docs/en/configure/app/tools/esbuild.mdx

@@ -7,18 +7,18 @@ sidebar_label: esbuild
 - **Type:** `Object`
 - **Default:** `undefined`
 
-## Introduction
+:::warning
+**The esbuild feature in the current document is no longer maintained**, we recommend using the Rspack + SWC solution, because Rspack + SWC provide better build performance, richer features, and better compatibility.
 
-import Esbuild from '@modern-js/builder-doc/docs/en/shared/esbuild.md';
+Please refer to [「Use Rspack」](/guides/advanced-features/rspack-start.html) for more information.
 
-<Esbuild />
+:::
 
-:::tip Recommend using SWC
-We recommend using SWC to transform and minify code rather than esbuild, because SWC supports more syntaxes, provides better code compression, and the compiled code has better compatibility.
+## Introduction
 
-Therefore, we recommend that you use SWC instead of esbuild, please refer to [tools.swc](/configure/app/tools/swc) for usage.
+import Esbuild from '@modern-js/builder-doc/docs/en/shared/esbuild.md';
 
-:::
+<Esbuild />
 
 ## Configuration
 

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

@@ -19,7 +19,7 @@ ios_saf >= 10
 ```
 
 :::tip
-Please refer to [Modern.js Builder - Browserslist](https://modernjs.dev/builder/en/guide/advanced/browserslist) for more information.
+Please refer to [Rsbuild - Browserslist](https://rsbuild.dev/guide/advanced/browserslist) for more information.
 :::
 
 ## Polyfill

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

@@ -4,7 +4,7 @@ sidebar_position: 13
 
 # Bundle Size Optimization
 
-Bundle size optimization is an important part in production environment because it directly affects the user experience of online users. In this document, we will introduce some common bundle size optimization methods in Builder.
+Bundle size optimization is an important part in production environment because it directly affects the user experience of online users. In this document, we will introduce some common bundle size optimization methods in Modern.js.
 
 ## Reduce duplicate dependencies
 
@@ -59,7 +59,7 @@ For example, if you only need to be compatible with browsers above Chrome 61, yo
 ```
 
 :::tip
-Please read the [Browserslist](https://modernjs.dev/builder/en/guide/advanced/browserslist.html) chapter to know more about the usage of Browserslist.
+Please read the [Browserslist](https://rsbuild.dev/guide/advanced/browserslist) chapter to know more about the usage of Browserslist.
 :::
 
 ## Usage polyfill
@@ -82,23 +82,23 @@ Please read the [Browser Compatibility](/guides/advanced-features/compatibility)
 
 ## Image Compression
 
-In general front-end projects, the size of image often accounts for a large proportion of the total bundle size of the project.So if the image size can be reduced as much as possible, it will have a significant optimization effect on the project bundle size. You can enable image compression by registering a plugin in the Builder:
+In general front-end projects, the size of image often accounts for a large proportion of the total bundle size of the project.So if the image size can be reduced as much as possible, it will have a significant optimization effect on the project bundle size. You can enable image compression by registering a plugin in Modern.js:
 
 ```ts 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()],
 };
 ```
 
-See details in [plugin-image-compress](https://modernjs.dev/builder/en/plugins/plugin-image-compress.html).
+See details in [plugin-image-compress](https://rsbuild.dev/plugins/list/plugin-image-compress).
 
 ## Split Chunk
 
 A great chunk splitting strategy is very important to improve the loading performance of the application. It can make full use of the browser's caching mechanism to reduce the number of requests and improve the loading speed of the application.
 
-A variety of [chunk splitting strategies](https://modernjs.dev/builder/en/guide/optimization/split-chunk) are built into Builder, which can meet the needs of most applications. You can also customize the chunk splitting config according to your own business scenarios.
+A variety of [chunk splitting strategies](https://rsbuild.dev/guide/optimization/split-chunk) are built into Modern.js, which can meet the needs of most applications. You can also customize the chunk splitting config according to your own business scenarios.
 
 For example, split the `axios` library under node_modules into `axios.js`:
 

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

@@ -0,0 +1,51 @@
+---
+sidebar_position: 21
+title: Using Rsbuild Plugin
+---
+
+# Using Rsbuild Plugin
+
+## Introduce Rsbuild Plugin
+
+Rsbuild is the build tool of Modern.js. You can modify the default build behavior and add various additional features by adding the Rsbuild plugin, including but not limited to:
+
+- Modifying Rspack configurations
+- Processing new file types
+- Modifying or compiling files
+- Deploying artifacts
+
+You can register the Rsbuild plugin through the `builderPlugins` option in `modern.config.ts`, see [builderPlugins](/configure/app/builder-plugins) for details.
+
+## Official Plugins
+
+:::tip
+Most plugins in Rsbuild have been built into Modern.js. For example, when you need to inject the Polyfill of the Node module, you can directly use the [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html) configuration.
+:::
+
+### Builtin Plugins
+
+Here are the official Rsbuild plugins built into Modern.js:
+
+| Plugin Name                                                                           | Introduce                                                                                                    | Modern.js Link                                                                                                                        |
+| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [React Plugin](https://rsbuild.dev/plugins/list/plugin-react)                         | Provides support for React                                                                                   | -                                                                                                                                     |
+| [SVGR Plugin](https://rsbuild.dev/plugins/list/plugin-svgr)                           | Support convert SVG to React components                                                                      | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
+| [Styled Components Plugin](https://rsbuild.dev/plugins/list/plugin-styled-components) | Provides compile-time support for styled-components                                                          | [tools.styledComponents](/configure/app/tools/styled-components.html)                                                                 |
+| [Assets Retry Plugin](https://rsbuild.dev/plugins/list/plugin-assets-retry)           | Used to automatically resend requests when static assets fail to load                                        | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
+| [Type Check Plugin](https://rsbuild.dev/plugins/list/plugin-type-check)               | Used to run TypeScript type checker on a separate process                                                    | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
+| [Node Polyfill Plugin](https://rsbuild.dev/plugins/list/plugin-node-polyfill)         | Used to inject polyfills of Node core modules in the browser side                                            | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html)                                                        |
+| [Source Build Plugin](https://rsbuild.dev/plugins/list/plugin-source-build)           | Supports referencing source code from other subdirectories                                                   | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
+| [Check Syntax Plugin](https://rsbuild.dev/plugins/list/plugin-check-syntax)           | Used to analyze the syntax compatibility of artifacts                                                        | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
+| [CSS Minimizer Plugin](https://rsbuild.dev/plugins/list/plugin-css-minimizer)         | Used to customize CSS minimizer, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
+| [Pug Plugin](https://rsbuild.dev/plugins/list/plugin-pug)                             | Provides support for the Pug template engine                                                                 | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
+| [Rem Plugin](https://rsbuild.dev/plugins/list/plugin-rem)                             | Implements the rem adaptive layout for mobile pages                                                          | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
+| [YAML Plugin](https://rsbuild.dev/plugins/list/plugin-yaml)                           | Used to import YAML files and convert them into JavaScript objects                                           | [TOML File](/guides/basic-features/json-files.html#toml-file)                                                                         |
+| [TOML Plugin](https://rsbuild.dev/plugins/list/plugin-toml)                           | Used to import TOML files and convert them into JavaScript objects                                           | [YAML File](/guides/basic-features/json-files.html#yaml-file)                                                                         |
+
+### Un-builtin Plugins
+
+Here are the official Rsbuild plugins that are not built into Modern.js:
+
+- [Image Compress Plugin](https://rsbuild.dev/plugins/list/plugin-image-compress): Compress the image resources used in the project.
+- [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus): Use Stylus as the CSS preprocessor.
+- [UMD Plugin](https://rsbuild.dev/plugins/list/plugin-umd): Used to build outputs in UMD format.

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

@@ -55,14 +55,12 @@ import RspackPrecautions from '@modern-js/builder-doc/docs/en/shared/rspackPreca
 
 ## Migrating configuration
 
-After enabling Rspack building capability, further configuration migration is needed by referring to the [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack).
-
 In Modern.js, the [tools.webpack](/configure/app/tools/webpack) and [tools.webpackChain](/configure/app/tools/webpack-chain) configurations only take effect in webpack mode, after turning on the Rspack build, you can modify it to [tools.rspack](/configure/app/tools/rspack) and [tools.bundlerChain](/configure/app/tools/bundler-chain).
 
 ```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/en/guides/advanced-features/using-storybook.mdx

@@ -2,11 +2,7 @@
 sidebar_position: 15
 ---
 
-# Using StorybookV6
-
-:::warning
-This document is for users of the old version Storybook V6 and will be deprecated in the future. If you want to upgrade from an older version or if you are a new user who wants to try new storybook, please refer to the [new documentation here](https://modernjs.dev/builder/guide/advanced/storybook.html).
-:::
+# Using Storybook
 
 [Storybook](https://storybook.js.org/) is a tool dedicated to component debugging, providing around component development.
 
@@ -16,33 +12,219 @@ This document is for users of the old version Storybook V6 and will be deprecate
 - Share how the UI actually works
 - Automate UI workflows
 
-## Enable Storybook debugging
+:::tip
+This tutorial is suitable for Storybook V7 users. If you are using an old version of Storybook V6 (using the @modern-js/plugin-storybook plugin), you can refer to the [Migration Guide](#migration-guide) to upgrade.
+:::
 
-The Modern.js framework integrates the Builder's Node Polyfill plugin by default.
+## Quick Start
 
-If you want to debug the component, you can enable Storybook debugging through `pnpm run new`.
+Modern.js integrates Storybook debugging capabilities by default. You can directly enable the Storybook feature by using the following command:
 
 ```bash
 $ npx modern new
 ? Please select the operation you want: Enable features
-? Please select the feature name: Enable Visual Testing (Storybook)
+? Please select the feature name: Enable「Storybook」V7
+```
+
+This command will create a template for Storybook, including:
+
+- Creating a configuration folder .storybook and a default configuration file .storybook/main.ts.
+- Creating example story components.
+- Updating package.json to add dependencies @storybook/addon-essentials and @modern-js/storybook, as well as creating Storybook-related scripts.
+
+To start, run `npm run storybook`.
+
+## Enable Rspack build
+
+Rspack is known for its fast build speed. To use Rspack as a build tool in Modern.js, you only need to configure it as follows:
+
+```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;
+```
+
+Note that in the above configuration, the reactDocgen configuration has been changed because Rspack currently does not support @storybook/react-docgen-typescript-plugin.
+
+## Configurations
+
+There are some configurations in `.storybook/main.js`.
+
+### configPath
+
+- **Type**: `string`
+- **Default**: `modern.config.(j|t)s`
+
+Specify the path of Modern.js configuration.
+
+Example:
+
+```javascript filename='.storybook/main.js'
+const config = {
+  framework: {
+    name: '@modern-js/storybook',
+    options: {
+      configPath: 'modern.storybook.config.ts',
+    },
+  },
+};
+
+export default config;
+```
+
+### bundler
+
+- **Type**: `'webpack' | 'rspack'`
+- **Default**: `webpack`
+
+Specify the underlying build tool to use either Webpack or Rspack.
+
+Example:
+
+```javascript filename='.storybook/main.js'
+const config = {
+  framework: {
+    name: '@modern-js/storybook',
+    options: {
+      bundler: 'rspack',
+    },
+  },
+};
+
+export default config;
+```
+
+### builderConfig
+
+- **Type**: `BuilderConfig`
+- **Default**: `undefined`
+
+To modify the configuration of build, which has a higher priority than the configuration file, you can specify the build configuration directly here if you do not want to use the configuration file.
+
+Example:
+
+```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;
+```
+
+## Command Line Interface
+
+@modern-js/storybook proxies some of the storybook cli commands.
+
+### storybook dev
+
+Start Storybook, more details at [storybook#dev](https://storybook.js.org/docs/react/api/cli-options#dev).
+
+### storybook build
+
+Build Storybook for production, more details at [storybook#build](https://storybook.js.org/docs/react/api/cli-options#build).
+
+## Storybook addon compatibility
+
+Due to the current version of Storybook in the document being version 7, please select the addon for Storybook V7.
+
+When an addon does not require additional Babel or Webpack configurations, it can be used directly, such as @storybook/addon-essentials.
+
+For some addons that require dependencies on Babel plugins and Webpack configurations, such as @storybook/addon-coverage, only @modern-js/builder-webpack-provider supports them.
+
+## Benefits
+
+Using @modern-js/storybook can bring you lightning-fast builds with Rspack, without the need for tedious configuration. It comes with many best practices for web development out-of-the-box, such as code splitting strategies, built-in support for CSS modules and postcss, TypeScript support, and commonly used Babel plugins.
+
+The powerful build capabilities of Modern.js can be directly used in Storybook projects.
+
+## Trouble Shooting
+
+1. Modern.js won't load your other configurations like `babel.config.json`, babel config needs to be set in Modern.js config, [tools.babel](/configure/app/tools/babel).
+   Webpack configuration can be written in either [tools.webpack](/configure/app/tools/webpack) or [tools.webpackChain](/configure/app/tools/webpack-chain).
+
+2. If you find that the build performance is not good, please check if the Storybook automatic documentation generation feature is enabled. For optimal performance, configure it to use `react-docgen`. The difference between `react-docgen` and `react-docgen-typescript` is that the former is implemented based on Babel, while the latter is implemented based on TypeScript. The former has better performance but weaker type inference capabilities. If you are using Rspack for the build, only `react-docgen` is supported.
+
+```javascript filename='.storybook/main.js'
+const config = {
+  typescript: {
+    reactDocgen: 'react-docgen',
+  },
+};
+
+export default config;
 ```
 
-After the execution is complete, you only need to register the Modern.js Storybook plugin in the `modern.config.ts` file to enable Storybook debugging capabilities.
+## Migration Guide
+
+### Migrate from @modern-js/plugin-storybook
+
+If you are a user migrating from V6 to V7, you can use V7 through [the above method](#quick-start) and make the following adjustments:
 
-```ts title="modern.config.ts"
-import { appTools, defineConfig } from '@modern-js/app-tools';
-import { storybookPlugin } from '@modern-js/plugin-storybook';
+##### Modify configuration file
 
-export default defineConfig({
-  plugins: [appTools(), storybookPlugin()],
-});
+If you have made some custom configurations to Storybook in the older version, you need to move the configuration file `root/config/storybook/main.(j|t)s` to `root/.storybook/main.(j|t)s`.
+
+And then add the following lines in `root/.storybook/main.(j|t)s`, specify framework as `@modern-js/storybook`.
+
+```diff
+const config = {
++  framework: {
++    name: '@modern-js/storybook'
++  }
+};
+
+export default config;
 ```
 
-## Debugging code
+##### Update Dependencies
+
+Update dependencies like @storybook/addon-\* to major version 7.
 
-Modern.js recognizes files in the format of [\*.stories.(js|jsx|ts|tsx|mdx)](/apis/app/hooks/src/stories.html) under the project source code directory (src/) by default as Storybook debugging files.
+##### Remove @modern-js/plugin-storybook
+
+在 modern.config.(j|t)s 中删除 @modern-js/plugin-storybook 插件的注册。
+
+##### Modify Storybook Syntax
+
+Follow the official Storybook documentation to make the necessary updates for some breaking changes, such as changes in story writing and MDX syntax. You can refer to the migration guide at [storybook migrate doc](https://storybook.js.org/docs/react/migration-guide).
+
+### Native Storybook users
+
+Modern.js only support Storybook 7, so you need to upgrade from Storybook version 6 to version 7, please follow the steps outlined in the official Storybook documentation at [storybook migrate doc](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;
+```
 
-## Configure Storybook
+The default config file path is `modern.config.(j|t)s`, for the detail config, see [modern.js config](/configure/app/usage).
 
-In Modern.js, Storybook configuration files can be added to the [`config/storybook`](/apis/app/hooks/config/storybook.html) directory of the project.
+If the original project includes configurations for Babel, they need to be written in the modern configuration. Most Babel configurations have already been included in Modern.js.

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

@@ -12,13 +12,13 @@ Modern.js has built-in popular community CSS preprocessors, including Less and S
 
 By default, you don't need to configure Less and Sass. If you have custom loader configuration requirements, you can set them up by configuring [tools.less](/configure/app/tools/less) and [tools.sass](/configure/app/tools/sass).
 
-You can also use Stylus in Modern.js by installing the Stylus plugin provided by Modern.js Builder. For usage, please refer to [Stylus Plugin](https://modernjs.dev/builder/plugins/plugin-stylus.html).
+You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus).
 
 ## Using PostCSS
 
 Modern.js has built-in [PostCSS](https://postcss.org/) to transform CSS code.
 
-Please refer to [Modern.js Builder - Using PostCSS](https://modernjs.dev/builder/en/guide/basic/css-usage.html#using-postcss) for detailed usage.
+Please refer to [Rsbuild - Using PostCSS](https://rsbuild.dev/guide/basic/css-usage#using-postcss) for detailed usage.
 
 ## Using CSS Modules