@modern-js/main-doc 2.67.7 → 2.67.8

package/docs/en/plugin/cli-plugins/api.mdx

@@ -17,7 +17,7 @@ import type { CliPluginFuture, AppTools } from '@modern-js/app-tools';
 
 const myCliPlugin = (): CliPluginFuture<AppTools<'shared'>> => ({
   name: '@my-org/my-plugin', // Plugin name, ensure uniqueness
-  setup: (api) => {
+  setup: api => {
     // Use the API here to register hooks, add commands, etc.
     api.onBeforeBuild(() => {
       console.log('Build is about to start...');
@@ -36,39 +36,43 @@ The `setup` function receives an `api` object, which provides all available CLI
 
 Gets the context information of the Modern.js application.
 
--   **Returns:** An `AppContext` object containing the following fields:
-
-| Field Name             | Type                 | Description                                                                   | When Available                         |
-| ---------------------- | -------------------- | ----------------------------------------------------------------------------- | -------------------------------------- |
-| `command`              | `string`             | The currently executing command (e.g., `dev`, `build`, `deploy`)              | -                                   |
-| `port`                 | `number`             | The development server port number                                             | After `onPrepare`                       |
-| `configFile`           | `string`             | The absolute path to the configuration file                                   | -                                   |
-| `isProd`               | `boolean`            | Whether it is in production mode                                              | -                                   |
-| `appDirectory`         | `string`             | The absolute path to the project root directory                               | -                                   |
-| `srcDirectory`         | `string`             | The absolute path to the project source code directory                        | -                                   |
-| `distDirectory`        | `string`             | The absolute path to the project output directory                             | After `modifyResolvedConfig`              |
-| `sharedDirectory`      | `string`             | The absolute path to the shared modules directory                             | -                                   |
-| `nodeModulesDirectory` | `string`             | The absolute path to the `node_modules` directory                              | -                                   |
-| `ip`                   | `string`             | The IPv4 address of the current machine                                       | -                                   |
-| `packageName`          | `string`             | The `name` field in the project's `package.json`                               | -                                   |
-| `plugins`              | `object[]`           | The list of currently registered plugins                                     | -                                   |
-| `entrypoints`          | `object[]`           | Information about page entry points                                           | -                                   |
-| `serverRoutes`         | `object[]`           | Server-side routing information                                               | -                                   |
-| `bundlerType`          | `webpack \| rspack` | The type of bundler currently in use (`webpack` or `rspack`)                   | After `onPrepare`                       |
-| `metaName`             | `string`             | The internal name of the framework                                            | -                                   |
-| `apiDirectory`         | `string`             | The absolute path to the API module directory (used by BFF)                   | -                                   |
-| `lambdaDirectory`      | `string`             | The absolute path to the Lambda module directory (used by BFF)                | -                                   |
-| `runtimeConfigFile`    | `string`             | The name of the runtime configuration file                                    | -                                   |
-| `serverConfigFile`     | `string`             | The name of the server configuration file                                     | -                                   |
-| `checkedEntries`       | `string[]`           | Specified entry information                                                   | -                                   |
-| `apiOnly`              | `boolean`            | Whether it is in `apiOnly` mode                                               | -                                   |
-
--   **Example:**
+- **Returns:** An `AppContext` object containing the following fields:
+
+| Field Name             | Type                | Description                                                      | When Available               |
+| ---------------------- | ------------------- | ---------------------------------------------------------------- | ---------------------------- |
+| `command`              | `string`            | The currently executing command (e.g., `dev`, `build`, `deploy`) | -                            |
+| `port`                 | `number`            | The development server port number                               | After `onPrepare`            |
+| `configFile`           | `string`            | The absolute path to the configuration file                      | -                            |
+| `isProd`               | `boolean`           | Whether it is in production mode                                 | -                            |
+| `appDirectory`         | `string`            | The absolute path to the project root directory                  | -                            |
+| `srcDirectory`         | `string`            | The absolute path to the project source code directory           | -                            |
+| `distDirectory`        | `string`            | The absolute path to the project output directory                | After `modifyResolvedConfig` |
+| `sharedDirectory`      | `string`            | The absolute path to the shared modules directory                | -                            |
+| `nodeModulesDirectory` | `string`            | The absolute path to the `node_modules` directory                | -                            |
+| `ip`                   | `string`            | The IPv4 address of the current machine                          | -                            |
+| `packageName`          | `string`            | The `name` field in the project's `package.json`                 | -                            |
+| `plugins`              | `object[]`          | The list of currently registered plugins                         | -                            |
+| `entrypoints`          | `object[]`          | Information about page entry points                              | -                            |
+| `serverRoutes`         | `object[]`          | Server-side routing information                                  | -                            |
+| `bundlerType`          | `webpack \| rspack` | The type of bundler currently in use (`webpack` or `rspack`)     | After `onPrepare`            |
+| `metaName`             | `string`            | The internal name of the framework                               | -                            |
+| `apiDirectory`         | `string`            | The absolute path to the API module directory (used by BFF)      | -                            |
+| `lambdaDirectory`      | `string`            | The absolute path to the Lambda module directory (used by BFF)   | -                            |
+| `runtimeConfigFile`    | `string`            | The name of the runtime configuration file                       | -                            |
+| `serverConfigFile`     | `string`            | The name of the server configuration file                        | -                            |
+| `checkedEntries`       | `string[]`          | Specified entry information                                      | -                            |
+| `apiOnly`              | `boolean`           | Whether it is in `apiOnly` mode                                  | -                            |
+
+- **Example:**
 
 ```typescript
 api.onPrepare(() => {
   const appContext = api.getAppContext();
-  console.log(`The current project is running in ${appContext.isProd ? 'production' : 'development'} mode`);
+  console.log(
+    `The current project is running in ${
+      appContext.isProd ? 'production' : 'development'
+    } mode`,
+  );
   console.log(`Bundler: ${appContext.bundlerType}`);
 });
 ```
@@ -83,17 +87,16 @@ The context information returned by `getAppContext` is read-only and cannot be m
 
 Gets the user-defined configuration from the `modern.config.ts` file.
 
--   **Returns:** The user-defined configuration object.
--   **Example:**
+- **Returns:** The user-defined configuration object.
+- **Example:**
 
 ```typescript
 api.onPrepare(() => {
-    const userConfig = api.getConfig();
-    if (userConfig.output) {
-        console.log('User has customized the output configuration');
-    }
+  const userConfig = api.getConfig();
+  if (userConfig.output) {
+    console.log('User has customized the output configuration');
+  }
 });
-
 ```
 
 ---
@@ -102,9 +105,9 @@ api.onPrepare(() => {
 
 Gets the final configuration after internal processing by Modern.js and modifications by plugins (normalized configuration).
 
--   **Returns:** The normalized configuration object.
--   **When Available:** Must be used after the `modifyResolvedConfig` hook.
--   **Example:**
+- **Returns:** The normalized configuration object.
+- **When Available:** Must be used after the `modifyResolvedConfig` hook.
+- **Example:**
 
 ```typescript
 api.modifyResolvedConfig(resolvedConfig => {
@@ -124,10 +127,10 @@ api.onBeforeBuild(() => {
 
 Checks if a specified plugin is registered.
 
--   **Parameters:**
-    -   `pluginName: string`: The name of the plugin to check.
--   **Returns:** A `boolean` value indicating whether the plugin exists.
--   **Example:**
+- **Parameters:**
+  - `pluginName: string`: The name of the plugin to check.
+- **Returns:** A `boolean` value indicating whether the plugin exists.
+- **Example:**
 
 ```typescript
 if (api.isPluginExists('@modern-js/plugin-tailwind')) {
@@ -141,8 +144,8 @@ if (api.isPluginExists('@modern-js/plugin-tailwind')) {
 
 Gets all registered hook functions.
 
--   **Returns:** An object containing all hook functions.
--   **Example:**
+- **Returns:** An object containing all hook functions.
+- **Example:**
 
 ```typescript
 const hooks = api.getHooks();
@@ -162,7 +165,7 @@ In custom plugins, you can only manually call the hooks registered by the corres
 
 Modify the initial configuration of Modern.js.
 
-- **Type:**  `api.config(configFn: () => UserConfig | Promise<UserConfig>)`
+- **Type:** `api.config(configFn: () => UserConfig | Promise<UserConfig>)`
 - **Parameters:**
   - `configFn`: A function that returns a configuration object or a Promise.
 - **Execution Phase:** After parsing the configuration in `modern.config.ts`.
@@ -194,7 +197,7 @@ Modify Webpack or Rspack configuration using the chain API.
 - **Parameters:**
   - `modifyFn`: A modification function that receives a `webpack-chain` or `RspackChain` instance and utility functions as parameters.
 - **Execution Phase:** When generating the final Webpack or Rspack configuration.
-- **Corresponding Rsbuild Hook:** [modifyBundlerChain](https://rsbuild.dev/en/plugins/dev/hooks#modifybundlerchain)
+- **Corresponding Rsbuild Hook:** [modifyBundlerChain](https://rsbuild.rs/en/plugins/dev/hooks#modifybundlerchain)
 - **Example:**
 
 ```typescript
@@ -210,39 +213,39 @@ api.modifyBundlerChain((chain, utils) => {
 
 Modify the Rsbuild configuration.
 
--   **Type:**  `api.modifyRsbuildConfig(modifyFn: (config: RsbuildConfig, utils: RsbuildUtils) => RsbuildConfig | Promise<RsbuildConfig> | void)`
--   **Parameters:**
-    -   `modifyFn`: A modification function that receives the Rsbuild configuration object and utility functions as parameters. It can return the modified configuration object, a Promise, or nothing (modifying the original object directly).
--   **Execution Phase:** When generating the final Rsbuild configuration.
--   **Corresponding Rsbuild Hook:** [modifyRsbuildConfig](https://rsbuild.dev/en/plugins/dev/hooks#modifyrsbuildconfig)
--   **Example:**
+- **Type:** `api.modifyRsbuildConfig(modifyFn: (config: RsbuildConfig, utils: RsbuildUtils) => RsbuildConfig | Promise<RsbuildConfig> | void)`
+- **Parameters:**
+  - `modifyFn`: A modification function that receives the Rsbuild configuration object and utility functions as parameters. It can return the modified configuration object, a Promise, or nothing (modifying the original object directly).
+- **Execution Phase:** When generating the final Rsbuild configuration.
+- **Corresponding Rsbuild Hook:** [modifyRsbuildConfig](https://rsbuild.rs/en/plugins/dev/hooks#modifyrsbuildconfig)
+- **Example:**
 
 ```typescript
 api.modifyRsbuildConfig((config, utils) => {
   // Add a custom Rsbuild plugin
   config.plugins.push(myCustomRsbuildPlugin());
 });
-
 ```
+
 ---
 
 #### `api.modifyRspackConfig`
 
 Modify the Rspack configuration (when using Rspack as the bundler).
 
--   **Type:**  `api.modifyRspackConfig(modifyFn: (config: RspackConfig, utils: RspackUtils) => RspackConfig | Promise<RspackConfig> | void)`
--   **Parameters:**
-    -   `modifyFn`: A modification function that receives the Rspack configuration object and utility functions as parameters. It can return the modified configuration object, a Promise, or nothing (modifying the original object directly).
--   **Execution Phase:** When generating the final Rspack configuration.
--   **Corresponding Rsbuild Hook:** [modifyRspackConfig](https://rsbuild.dev/en/plugins/dev/hooks#modifyrspackconfig)
--   **Example:**
+- **Type:** `api.modifyRspackConfig(modifyFn: (config: RspackConfig, utils: RspackUtils) => RspackConfig | Promise<RspackConfig> | void)`
+- **Parameters:**
+  - `modifyFn`: A modification function that receives the Rspack configuration object and utility functions as parameters. It can return the modified configuration object, a Promise, or nothing (modifying the original object directly).
+- **Execution Phase:** When generating the final Rspack configuration.
+- **Corresponding Rsbuild Hook:** [modifyRspackConfig](https://rsbuild.rs/en/plugins/dev/hooks#modifyrspackconfig)
+- **Example:**
 
 ```typescript
 api.modifyRspackConfig((config, utils) => {
   config.builtins.minify = {
     enable: true,
     implementation: utils.rspack.SwcJsMinimizerRspackPlugin,
-  }
+  };
 });
 ```
 
@@ -252,7 +255,7 @@ api.modifyRspackConfig((config, utils) => {
 
 Modify the Webpack configuration using [webpack-chain](https://github.com/neutrinojs/webpack-chain) (when using Webpack as the bundler).
 
-- **Type:**  `api.modifyWebpackChain(modifyFn: (chain: WebpackChain, utils: WebpackUtils) => void | Promise<void>)`
+- **Type:** `api.modifyWebpackChain(modifyFn: (chain: WebpackChain, utils: WebpackUtils) => void | Promise<void>)`
 - **Parameters:**
   - `modifyFn`: A modification function that receives a `webpack-chain` instance and utility functions as parameters.
 - **Execution Phase:** When generating the final Webpack configuration.
@@ -275,39 +278,38 @@ api.modifyWebpackChain((chain, utils) => {
 
 Directly modify the Webpack configuration object (when using Webpack as the bundler).
 
--   **Type:**  `api.modifyWebpackConfig(modifyFn: (config: WebpackConfig, utils: WebpackUtils) => WebpackConfig | Promise<WebpackConfig> | void)`
--   **Parameters:**
-    -   `modifyFn`: A modification function that receives the Webpack configuration object and utility functions as parameters. It can return the modified configuration object, a Promise, or nothing (modifying the original object directly).
--   **Execution Phase:** When generating the final Webpack configuration.
--   **Example:**
+- **Type:** `api.modifyWebpackConfig(modifyFn: (config: WebpackConfig, utils: WebpackUtils) => WebpackConfig | Promise<WebpackConfig> | void)`
+- **Parameters:**
+  - `modifyFn`: A modification function that receives the Webpack configuration object and utility functions as parameters. It can return the modified configuration object, a Promise, or nothing (modifying the original object directly).
+- **Execution Phase:** When generating the final Webpack configuration.
+- **Example:**
 
 ```typescript
 api.modifyWebpackConfig((config, utils) => {
   // Disable source map
   config.devtool = false;
 });
-
 ```
 
 **Build Configuration Modification Order**
 
--   **Building with Rspack:**
-    ```
-    modifyRsbuildConfig
-    modifyBundlerChain
-    tools.bundlerChain
-    modifyRspackConfig
-    tools.rspack
-    ```
--   **Building with Webpack:**
-    ```
-    modifyBundlerChain
-    tools.bundlerChain
-    modifyWebpackChain
-    tools.webpackChain
-    modifyWebpackConfig
-    tools.webpack
-    ```
+- **Building with Rspack:**
+  ```
+  modifyRsbuildConfig
+  modifyBundlerChain
+  tools.bundlerChain
+  modifyRspackConfig
+  tools.rspack
+  ```
+- **Building with Webpack:**
+  ```
+  modifyBundlerChain
+  tools.bundlerChain
+  modifyWebpackChain
+  tools.webpackChain
+  modifyWebpackConfig
+  tools.webpack
+  ```
 
 ---
 
@@ -352,7 +354,7 @@ Modify HTML template partials.
 api.modifyHtmlPartials(({ entrypoint, partials }) => {
   // Add a meta tag to the <head> section of all pages
   if (partials.head && partials.head.append) {
-      partials.head.append(`<meta name="my-custom-meta" content="value">`);
+    partials.head.append(`<meta name="my-custom-meta" content="value">`);
   }
 });
 ```
@@ -460,84 +462,88 @@ Add additional logic before the build starts.
 - **Parameters:**
   - `buildFn`: A function to be executed before the build, without parameters, can be asynchronous.
 - **Execution Phase:** Before executing the build process.
-- **Corresponding Rsbuild Hook:** [onBeforeBuild](https://rsbuild.dev/en/plugins/dev/hooks#onbeforebuild)
+- **Corresponding Rsbuild Hook:** [onBeforeBuild](https://rsbuild.rs/en/plugins/dev/hooks#onbeforebuild)
 - **Example:**
 
 ```typescript
-api.onBeforeBuild(()=>{
-    // Perform some environment checks before building
-})
+api.onBeforeBuild(() => {
+  // Perform some environment checks before building
+});
 ```
+
 ---
 
 #### `api.onAfterBuild`
 
 Add additional logic after the build is complete.
 
--   **Type:**  `api.onAfterBuild(buildFn: () => void | Promise<void>)`
--   **Parameters:**
-    -   `buildFn`: A function to be executed after the build, without parameters, can be asynchronous.
--   **Execution Phase:** After executing the build process.
--   **Corresponding Rsbuild Hook:** [onAfterBuild](https://rsbuild.dev/en/plugins/dev/hooks#onafterbuild)
--   **Example:**
+- **Type:** `api.onAfterBuild(buildFn: () => void | Promise<void>)`
+- **Parameters:**
+  - `buildFn`: A function to be executed after the build, without parameters, can be asynchronous.
+- **Execution Phase:** After executing the build process.
+- **Corresponding Rsbuild Hook:** [onAfterBuild](https://rsbuild.rs/en/plugins/dev/hooks#onafterbuild)
+- **Example:**
 
 ```typescript
-api.onAfterBuild(()=>{
-    // Upload sourceMap after building
-})
+api.onAfterBuild(() => {
+  // Upload sourceMap after building
+});
 ```
 
 ---
 
 #### `api.onDevCompileDone`
+
 Add additional logic after the development server compilation is complete.
 
--   **Type:**  `api.onDevCompileDone(compileFn: () => void | Promise<void>)`
--   **Parameters:**
-    -   `compileFn`: A function to be executed after compilation is complete.
--   **Execution Phase:** After the development server starts and the initial compilation is complete.
--   **Corresponding Rsbuild Hook:** [onDevCompileDone](https://rsbuild.dev/en/plugins/dev/hooks#ondevcompiledone)
--   **Example:**
+- **Type:** `api.onDevCompileDone(compileFn: () => void | Promise<void>)`
+- **Parameters:**
+  - `compileFn`: A function to be executed after compilation is complete.
+- **Execution Phase:** After the development server starts and the initial compilation is complete.
+- **Corresponding Rsbuild Hook:** [onDevCompileDone](https://rsbuild.rs/en/plugins/dev/hooks#ondevcompiledone)
+- **Example:**
 
 ```typescript
 api.onDevCompileDone(() => {
-    // Open the browser after the initial compilation is complete
+  // Open the browser after the initial compilation is complete
 });
 ```
+
 ---
 
 #### `api.onBeforeCreateCompiler`
 
 Add additional logic before creating the compiler instance.
 
--   **Type:**  `api.onBeforeCreateCompiler(createFn: () => void | Promise<void>)`
--   **Parameters:**
-    -   `createFn`: A function to be executed before creation, without parameters, can be asynchronous.
--   **Execution Phase:** Before creating the Webpack or Rspack compiler instance.
--   **Corresponding Rsbuild Hook:** [onBeforeCreateCompiler](https://rsbuild.dev/en/plugins/dev/hooks#onbeforecreatecompiler)
--   **Example:**
+- **Type:** `api.onBeforeCreateCompiler(createFn: () => void | Promise<void>)`
+- **Parameters:**
+  - `createFn`: A function to be executed before creation, without parameters, can be asynchronous.
+- **Execution Phase:** Before creating the Webpack or Rspack compiler instance.
+- **Corresponding Rsbuild Hook:** [onBeforeCreateCompiler](https://rsbuild.rs/en/plugins/dev/hooks#onbeforecreatecompiler)
+- **Example:**
 
 ```typescript
 api.onBeforeCreateCompiler(() => {
-    // Can get compiler related configuration
+  // Can get compiler related configuration
 });
 ```
 
 ---
 
 #### `api.onAfterCreateCompiler`
+
 Add additional logic after creating the compiler instance.
 
--   **Type:**  `api.onAfterCreateCompiler(createFn: () => void | Promise<void>)`
--   **Parameters:**
-    -   `createFn`:  A function to be executed after creation, without parameters, can be asynchronous.
--   **Execution Phase:** After creating the Webpack or Rspack compiler instance.
--   **Corresponding Rsbuild Hook:** [onAfterCreateCompiler](https://rsbuild.dev/en/plugins/dev/hooks#onaftercreatecompiler)
--   **Example:**
+- **Type:** `api.onAfterCreateCompiler(createFn: () => void | Promise<void>)`
+- **Parameters:**
+  - `createFn`: A function to be executed after creation, without parameters, can be asynchronous.
+- **Execution Phase:** After creating the Webpack or Rspack compiler instance.
+- **Corresponding Rsbuild Hook:** [onAfterCreateCompiler](https://rsbuild.rs/en/plugins/dev/hooks#onaftercreatecompiler)
+- **Example:**
 
 ```typescript
 api.onAfterCreateCompiler(() => {
-    // Can get the compiler instance
+  // Can get the compiler instance
 });
 ```
 
@@ -568,15 +574,15 @@ Add additional logic after starting the development server.
 
 - **Type:** `api.onAfterDev(devFn: () => void | Promise<void>)`
 - **Parameters:**
-    -   `devFn`: A function to be executed after the development server starts.
+  - `devFn`: A function to be executed after the development server starts.
 - **Execution Phase:** After the development server has successfully started.
-- **Corresponding Rsbuild Hook:** [onAfterStartDevServer](https://rsbuild.dev/en/plugins/dev/hooks#onafterstartdevserver)
+- **Corresponding Rsbuild Hook:** [onAfterStartDevServer](https://rsbuild.rs/en/plugins/dev/hooks#onafterstartdevserver)
 - **Example:**
 
 ```typescript
-api.onAfterDev(()=>{
-    // Report dev related information
-})
+api.onAfterDev(() => {
+  // Report dev related information
+});
 ```
 
 ---
@@ -604,20 +610,20 @@ api.onBeforeExit(async () => {
 
 Add additional logic before printing success information.
 
--   **Type:**  `api.onBeforePrintInstructions(printFn: ({instructions: string}) => {instructions: string} | Promise<{instructions: string}>)`
--   **Parameters:**
-    -   `printFn`: Function to modify the printed information, returns the modified information.
--   **Execution Phase:** Before printing success information.
--   **Example:**
+- **Type:** `api.onBeforePrintInstructions(printFn: ({instructions: string}) => {instructions: string} | Promise<{instructions: string}>)`
+- **Parameters:**
+  - `printFn`: Function to modify the printed information, returns the modified information.
+- **Execution Phase:** Before printing success information.
+- **Example:**
 
 ```typescript
 api.onBeforePrintInstructions(({ instructions }) => {
   // do something
-  return { instructions }
+  return { instructions };
 });
 ```
 
 ## Other Notes
 
--   Refer to [CLI Plugin Lifecycle](./life-cycle.mdx) to understand the execution order of plugin hooks.
--   Refer to [CLI Plugin Migration Guide](./migration.mdx) to learn how to migrate from the old version of plugins to the new version.
+- Refer to [CLI Plugin Lifecycle](./life-cycle.mdx) to understand the execution order of plugin hooks.
+- Refer to [CLI Plugin Migration Guide](./migration.mdx) to learn how to migrate from the old version of plugins to the new version.

package/docs/en/plugin/introduction.mdx

@@ -6,29 +6,30 @@ Modern.js provides a powerful plugin system that allows developers to extend the
 
 In web application development, we often encounter needs that the framework itself cannot directly satisfy, such as:
 
--   **I want to add a custom command-line tool to help me automate some tasks.**
--   **I want to be able to handle a new file format, such as `.xyz`.**
--   **I need to perform some initialization operations before the application starts.**
--   **I want to perform special processing on the generated CSS files.**
--   **I need to customize the application's routing logic or add some server-side middleware.**
+- **I want to add a custom command-line tool to help me automate some tasks.**
+- **I want to be able to handle a new file format, such as `.xyz`.**
+- **I need to perform some initialization operations before the application starts.**
+- **I want to perform special processing on the generated CSS files.**
+- **I need to customize the application's routing logic or add some server-side middleware.**
 
-Without a plugin system, these requirements might require modifying the framework's source code or resorting to cumbersome hacks.  Modern.js's plugin system offers an elegant, flexible, and maintainable solution.
+Without a plugin system, these requirements might require modifying the framework's source code or resorting to cumbersome hacks. Modern.js's plugin system offers an elegant, flexible, and maintainable solution.
 
 ## When to Use Which Plugin?
 
-Modern.js offers two main types of plugins: Modern.js framework plugins and Rsbuild build plugins.  The choice of which plugin to use depends on your specific needs:
+Modern.js offers two main types of plugins: Modern.js framework plugins and Rsbuild build plugins. The choice of which plugin to use depends on your specific needs:
 
--   **Rsbuild Build Plugins:** If your needs are closely related to the build process, especially involving modifications to Webpack or Rspack configuration, then you should choose an Rsbuild plugin.  For example:
-    -   Modifying Webpack/Rspack `loader` or `plugin` configurations.
-    -   Handling new file types.
-    -   Modifying or compiling file contents.
-    -   Optimizing or processing build artifacts.
+- **Rsbuild Build Plugins:** If your needs are closely related to the build process, especially involving modifications to Webpack or Rspack configuration, then you should choose an Rsbuild plugin. For example:
 
--   **Modern.js Framework Plugins:** If your needs relate to the extension of Modern.js framework itself, runtime behavior, or server-side logic, then you should choose a Modern.js plugin. For example:
-    -   Adding custom command-line commands.
-    -   Modifying the application's routing configuration.
-    -   Customizing the application's rendering process (e.g., SSR).
-    -   Adding server-side middleware or handler functions.
+  - Modifying Webpack/Rspack `loader` or `plugin` configurations.
+  - Handling new file types.
+  - Modifying or compiling file contents.
+  - Optimizing or processing build artifacts.
+
+- **Modern.js Framework Plugins:** If your needs relate to the extension of Modern.js framework itself, runtime behavior, or server-side logic, then you should choose a Modern.js plugin. For example:
+  - Adding custom command-line commands.
+  - Modifying the application's routing configuration.
+  - Customizing the application's rendering process (e.g., SSR).
+  - Adding server-side middleware or handler functions.
 
 In short, use Rsbuild plugins when you need to modify Webpack/Rspack configurations; use Modern.js plugins for other framework-related extensions.
 
@@ -69,13 +70,14 @@ export default defineRuntimeConfig({
 });
 ```
 
+{/* prettier-ignore */}
 {/* #### Server Plugins
 
 Server plugins are used to provide additional functionality when the application receives requests, such as adding middleware and modifying request responses.
 
 Server plugins are configured via the `plugins` field in `server/modern.server.ts`.
 
-```ts title="src/modern.server.ts"
+````ts title="src/modern.server.ts"
 import { defineConfig } from '@modern-js/app-tools/server';
 import bffPlugin from '@modern-js/plugin-bff/server';
 
@@ -106,13 +108,13 @@ Rsbuild is the underlying build tool for Modern.js. By adding Rsbuild plugins, y
 You can register Rsbuild plugins in `modern.config.ts` via the `builderPlugins` option.  See [builderPlugins](/configure/app/builder-plugins.html) for details.
 
 :::tip
-Starting from `MAJOR_VERSION.46.0`, Modern.js upgraded its underlying build tool to [Rsbuild](https://rsbuild.dev/).
+Starting from `MAJOR_VERSION.46.0`, Modern.js upgraded its underlying build tool to [Rsbuild](https://rsbuild.rs/).
 
 If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by running `npx modern upgrade`.
 :::
 
 :::info
-You can read [Rsbuild Official Website - Plugins](https://rsbuild.dev/plugins/list/index) to learn more about the Rsbuild plugin system.
+You can read [Rsbuild Official Website - Plugins](https://rsbuild.rs/plugins/list/index) to learn more about the Rsbuild plugin system.
 :::
 
 ### Official Plugins
@@ -123,10 +125,10 @@ The following are official Rsbuild plugins that are already built into Modern.js
 
 | Plugin                                                                                         | Description                                                                                     | Modern.js Link                                                                                                                        |
 | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| [React Plugin](https://rsbuild.dev/zh/plugins/list/plugin-react)                               | Provides support for React                                                                      | -                                                                                                                                     |
-| [SVGR Plugin](https://rsbuild.dev/zh/plugins/list/plugin-svgr)                                 | Supports converting SVG images into React components                                                     | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
+| [React Plugin](https://rsbuild.rs/zh/plugins/list/plugin-react)                               | Provides support for React                                                                      | -                                                                                                                                     |
+| [SVGR Plugin](https://rsbuild.rs/zh/plugins/list/plugin-svgr)                                 | Supports converting SVG images into React components                                                     | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
 | [Styled Components Plugin](https://github.com/rspack-contrib/rsbuild-plugin-styled-components) | Provides compile-time support for styled-components                                                    | [tools.styledComponents](/configure/app/tools/styled-components.html)                                                                 |
-| [Assets Retry Plugin](https://rsbuild.dev/zh/plugins/list/plugin-assets-retry)                 | Automatically retries requests when static asset loading fails                                                 | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
+| [Assets Retry Plugin](https://rsbuild.rs/zh/plugins/list/plugin-assets-retry)                 | Automatically retries requests when static asset loading fails                                                 | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
 | [Type Check Plugin](https://github.com/rspack-contrib/rsbuild-plugin-type-check)               | Runs TypeScript type checking in 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://github.com/rspack-contrib/rsbuild-plugin-node-polyfill)         | Injects polyfills for Node core modules in the browser                                             | [output.disableNodePolyfill](/configure/app/output/disable-node-polyfill.html)                                                        |
 | [Source Build Plugin](https://github.com/rspack-contrib/rsbuild-plugin-source-build)           | For monorepo scenarios, supports referencing source code from other subdirectories and completing builds and hot updates                       | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
@@ -142,9 +144,10 @@ The following are official Rsbuild plugins that are already built into Modern.js
 The following are official Rsbuild plugins that are not built into Modern.js:
 
 - [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compresses image resources used in the project.
-- [Stylus Plugin](https://rsbuild.dev/zh/plugins/list/plugin-stylus): Uses Stylus as the CSS preprocessor.
+- [Stylus Plugin](https://rsbuild.rs/zh/plugins/list/plugin-stylus): Uses Stylus as the CSS preprocessor.
 - [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd): Used to build UMD format artifacts.
 
 import OtherPlugins from '@site-docs-en/components/other-plugins.mdx';
 
 <OtherPlugins />
+````