@modern-js/main-doc 2.65.5 → 2.66.1-alpha.0

package/docs/en/plugin/cli-plugins/life-cycle.mdx

@@ -0,0 +1,139 @@
+# Life Cycle
+
+import Mermaid from '@site/src/components/Mermaid';
+
+<Mermaid>
+{`
+flowchart TD
+    init{{"CLI Init"}}
+    env(Initialize Environment Variables)
+    load_config(Load User Configuration File)
+    cli_plugin(Load CLI Plugin)
+    registry_hooks(Register Hooks Function<br><sub>Execute plugin setup function, register hooks defined in the plugin, and the logic in the plugin setup will also be executed here</sub>)
+
+    app_tools{{"app-tools"}}
+
+    config(config)
+    onPrepare(onPrepare)
+    addCommand(addCommand)
+    addWatchFiles(addWatchFiles)
+    onFileChanged(onFileChanged)
+    onBeforeExit(onBeforeExit<br><sub>Triggered by SIGINT, SIGTERM, unhandledRejection, uncaughtException events</sub>)
+
+    onBeforeDev(onBeforeDev)
+    onBeforeRestart(onBeforeRestart<br><sub>Triggered when modified files require a service restart</sub>)
+    onBeforeBuild(onBeforeBuild<br><sub>Triggered in standalone BFF projects</sub>)
+    onAfterBuild(onAfterBuild<br><sub>Triggered in standalone BFF projects</sub>)
+    modifyServerRoutes(modifyServerRoutes)
+    modifyHtmlPartials(modifyHtmlPartials)
+
+    onPrepare_fork(onPrepare)
+    addCommand_fork(addCommand)
+    onFileChanged_fork(onFileChanged)
+
+    registry_rsbuild_hooks(Register rsbuild Hooks<br><sub>This only registers the rsbuild hooks; the specific execution timing is determined by the rsbuild plugin mechanism</sub>)
+
+    modifyBundlerChain(modifyBundlerChain)
+    modifyRsbuildConfig(modifyRsbuildConfig)
+    modifyRspackConfig(modifyRspackConfig)
+    modifyWebpackChain(modifyWebpackChain)
+    modifyWebpackConfig(modifyWebpackConfig)
+
+    onBeforeBuild_rsbuild(onBeforeBuild)
+    onAfterBuild_rsbuild(onAfterBuild)
+    onDevCompileDone(onDevCompileDone)
+    onBeforeCreateCompiler(onBeforeCreateCompiler)
+    onAfterCreateCompiler(onAfterCreateCompiler)
+    onAfterDev(onAfterDev<br><sub>Corresponds to the onAfterStartDevServer Hook of rsbuild</sub>)
+
+    dev[/dev/]
+    build[/build/]
+    extra_command[/.../]
+
+    dev_fork[/dev/]
+    build_fork[/build/]
+    serve[/serve/]
+    deploy[/deploy/]
+    inspect[/inspect/]
+    upgrade[/upgrade/]
+
+    onPrepare_fork --> modifyServerRoutes
+    modifyServerRoutes --> modifyHtmlPartials
+    modifyHtmlPartials --> registry_rsbuild_hooks
+    registry_rsbuild_hooks --> modifyBundlerChain
+    modifyBundlerChain --> modifyRsbuildConfig
+    modifyRsbuildConfig --> modifyRspackConfig
+    modifyRspackConfig --> modifyWebpackChain
+    modifyWebpackChain --> modifyWebpackConfig
+    registry_rsbuild_hooks --> onBeforeBuild_rsbuild
+    onBeforeBuild_rsbuild --> onAfterBuild_rsbuild
+    onAfterBuild_rsbuild --> onDevCompileDone
+    onDevCompileDone --> onBeforeCreateCompiler
+    onBeforeCreateCompiler --> onAfterCreateCompiler
+    onAfterCreateCompiler --> onAfterDev
+
+    dev_fork --> onBeforeDev
+    onBeforeDev --> onFileChanged_fork
+    onFileChanged_fork --> onBeforeRestart
+
+    build_fork --> onBeforeBuild
+    onBeforeBuild --> onAfterBuild
+
+    app_tools --- spacer5[ ] --- spacer6[ ] --- spacer7[ ] --- spacer8[ ] --- spacer9[ ] --> onPrepare_fork
+    onPrepare_fork --> addCommand_fork
+    addCommand_fork --> dev_fork
+    addCommand_fork --> build_fork
+    addCommand_fork --> serve
+    addCommand_fork --> deploy
+    addCommand_fork --> inspect
+    addCommand_fork --> upgrade
+
+    init --> env
+    env --> load_config
+    load_config --> cli_plugin
+    cli_plugin --> registry_hooks
+
+    registry_hooks --> config
+    config --> onPrepare
+    onPrepare --> addCommand
+
+    addCommand --> dev
+    addCommand --> build
+    addCommand --> extra_command
+
+    dev --> addWatchFiles
+    addWatchFiles --> onFileChanged
+
+    onFileChanged --> onBeforeExit
+    build --- spacer[ ] --- spacer2[ ] --> onBeforeExit
+    extra_command --- spacer3[ ] --- spacer4[ ] --> onBeforeExit
+
+    style init fill:#FDE68A;
+    style app_tools fill:#FDE68A;
+    style env stroke-dasharray:5 5,fill:#86EFAC;
+    style registry_rsbuild_hooks stroke-dasharray:5 5,fill:#9CA3AF;
+    style load_config stroke-dasharray:5 5,fill:#86EFAC;
+    style cli_plugin stroke-dasharray:5 5,fill:#86EFAC;
+    style registry_hooks stroke-dasharray:5 5,fill:#9CA3AF;
+
+    style dev fill:#7DD3FC;
+    style build fill:#7DD3FC;
+    style extra_command fill:#7DD3FC;
+    style dev_fork fill:#7DD3FC;
+    style build_fork fill:#7DD3FC;
+    style serve fill:#7DD3FC;
+    style upgrade fill:#7DD3FC;
+    style deploy fill:#7DD3FC;
+    style inspect fill:#7DD3FC;
+
+    style spacer fill:none,stroke:none,height:0px;
+    style spacer2 fill:none,stroke:none,height:0px;
+    style spacer3 fill:none,stroke:none,height:0px;
+    style spacer4 fill:none,stroke:none,height:0px;
+    style spacer5 fill:none,stroke:none,height:0px;
+    style spacer6 fill:none,stroke:none,height:0px;
+    style spacer7 fill:none,stroke:none,height:0px;
+    style spacer8 fill:none,stroke:none,height:0px;
+    style spacer9 fill:none,stroke:none,height:0px;
+`}
+</Mermaid>

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

@@ -0,0 +1,98 @@
+# Plugin Migration
+
+### Migration Background
+
+The Modern.js plugin system is constantly evolving.  To provide a clearer API and more powerful features, we've optimized the definition and usage of CLI plugins.  While the old plugin syntax is still supported for compatibility, we strongly recommend migrating according to this guide to take full advantage of the new plugin system.
+
+### Migration Steps Overview
+
+1.  **Update Plugin Type Definition:** Replace the `CliPlugin` type with `CliPluginFuture`.
+2.  **Adjust Hook Invocation:** Migrate from the `return hooks` pattern to direct `api.xxx` calls.
+3.  **Replace Changed APIs:** Refer to the detailed API mapping table and update your code.
+
+### Detailed Migration Steps
+
+#### Update Plugin Type Definition
+
+This is the first and most crucial step of the migration. It ensures that your plugin interacts correctly with the new plugin system.
+
+```typescript
+// Old Syntax
+import type { CliPlugin, AppTools } from '@modern-js/app-tools';
+
+const plugin: CliPlugin<AppTools<'shared'>> = { ... };
+
+// New Syntax
+import type { CliPluginFuture, AppTools } from '@modern-js/app-tools';
+
+const plugin: CliPluginFuture<AppTools<'shared'>> = { ... };
+```
+
+**Explanation:** The `CliPluginFuture` type is the standard definition for new plugins, providing better type inference and a clearer API structure.
+
+#### Adjust Hook Invocation
+
+The new plugin system recommends using the `api` object to directly call Hooks. This approach is more intuitive and easier to maintain.
+
+```typescript
+// Old Syntax (return hooks)
+{
+  setup: () => ({
+    commands({ program }) { /*...*/ }
+  })
+}
+
+// New Syntax (api.xxx)
+{
+  setup: api => {
+    api.addCommand(({ program }) => { /*...*/ })
+  }
+}
+```
+
+**Explanation:** The `api` object provides all available Hooks and utility methods.
+
+#### Replace Changed APIs
+
+To maintain API consistency and clarity, we've adjusted the names of some APIs. The following table lists all changed APIs and their old and new counterparts:
+
+| Old API                 | New API                      | Description                                                                                                                                                                                                                                                                                                                                                          |
+| :----------------------- | :---------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `useAppContext`          | `getAppContext`               | Gets the application context information.                                                                                                                                                                                                                                                                                                                                       |
+| `useConfigContext`       | `getConfig`                  | Gets the configuration defined in the user's configuration file.                                                                                                                                                                                                                                                                                                                                    |
+| `useResolvedConfigContext` | `getNormalizedConfig`        | Gets the final configuration after processing by plugins.                                                                                                                                                                                                                                                                                                                                 |
+| `beforeConfig`           | (Defined directly in `setup`) | The `beforeConfig` Hook is no longer needed.  Write related logic directly in the `setup` function.                                                                                                                                                                                                                                                                                        |
+| `prepare`                | `onPrepare`                   | The preparation stage before running the main process.                                                                                                                                                                                                                                                                                                                                    |
+| `afterPrepare`           | `onAfterPrepare` (Deprecated)   | Executes after `onPrepare`, but may be deprecated in future versions.  It's recommended to merge the logic into `onPrepare`.                                                                                                                                                                                                                                                                              |
+| `beforePrintInstructions`| `onBeforePrintInstructions`   | Executes before printing log messages.                                                                                                                                                                                                                                                                                                                                    |
+| `commands`               | `addCommand`                  | Adds a new CLI command.                                                                                                                                                                                                                                                                                                                                       |
+| `watchFiles`             | `addWatchFiles`               | Adds files to be watched.                                                                                                                                                                                                                                                                                                                                       |
+| `fileChange`             | `onFileChanged`               | Listens for file change events.                                                                                                                                                                                                                                                                                                                                       |
+| `beforeCreateCompiler`   | `onBeforeCreateCompiler`      | Executes before creating the compiler.                                                                                                                                                                                                                                                                                                                                       |
+| `afterCreateCompiler`    | `onAfterCreateCompiler`       | Executes after creating the compiler.                                                                                                                                                                                                                                                                                                                                       |
+| `beforeBuild`            | `onBeforeBuild`               | Executes before building.                                                                                                                                                                                                                                                                                                                                       |
+| `afterBuild`             | `onAfterBuild`                | Executes after building.                                                                                                                                                                                                                                                                                                                                       |
+| `beforeDev`              | `onBeforeDev`                 | Executes before running the `dev` command.                                                                                                                                                                                                                                                                                                                                   |
+| `afterDev`               | `onDevCompileDone`            | Executes after the `dev` command compilation is complete.                                                                                                                                                                                                                                                                                                                                 |
+| `beforeExit`             | `onBeforeExit`                | Executes before the process exits.                                                                                                                                                                                                                                                                                                                                       |
+| `htmlPartials`           | `modifyHtmlPartials`          | Modifies HTML template partials.                                                                                                                                                                                                                                                                                                                                      |
+
+**Explanation:** Please carefully review your code and ensure that all old APIs have been replaced with the new APIs.
+
+### Frequently Asked Questions
+
+**Q: Will my plugin still work after the migration?**
+
+A: As long as you have correctly completed all the steps in this guide, your plugin should work normally.  If you encounter any problems, please refer to the official Modern.js documentation or seek community support.
+
+**Q: Do I have to migrate my plugin immediately?**
+
+A: While the old plugin syntax is still supported, we strongly recommend migrating as soon as possible. The new plugin system offers better performance and richer features, and migration is worthwhile in the long run.
+
+**Q: Where can I find more information about the new plugin system?**
+
+A: Please refer to the official Modern.js documentation, especially the section on the plugin system. You can also refer to examples of other migrated plugins to understand best practices.
+
+### Summary
+
+With this detailed migration guide, we hope to help you smoothly migrate your CLI plugins to the new Modern.js plugin system.  If you encounter any problems during the migration, please feel free to ask us for help.

package/docs/en/plugin/introduction.mdx

@@ -1,77 +1,149 @@
-# Plugin
+# Introduction
 
-In Modern.js, you can directly use two types of plugins: Modern.js framework plugins and Rsbuild plugins.
+Modern.js provides a powerful plugin system that allows developers to extend the framework's functionality, customize the build process, and meet a variety of personalized development needs. Whether you want to add a custom command, optimize build output, or implement a unique deployment solution, Modern.js's plugin system provides robust support.
 
-## Modern.js Framework Plugin
+## Why Plugins?
 
-Modern.js has its own framework plugin system. You can use Modern.js plugins by configuring the [`plugins`](/configure/app/plugins) field in `modern.config.ts`.
+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.**
+
+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:
+
+-   **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.
+
+-   **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.
+
+## Modern.js Framework Plugins
 
 ### Plugin Types
 
-Framework plugins can be categorized into three types:
+Modern.js framework plugins can be further divided into three categories:
+
+#### CLI Plugins
+
+CLI plugins are used to provide additional functionality when running `modern` commands in the application, such as adding commands, modifying configurations, and listening for file changes. Most build-related capabilities can be implemented through CLI plugins.
+
+CLI plugins can be configured via the `plugins` field in `modern.config.ts`.
+
+```ts title="modern.config.ts"
+// an example for bff
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { bffPlugin } from '@modern-js/plugin-bff';
+
+export default defineConfig({
+  plugins: [appTools(), bffPlugin()],
+});
+```
 
-1. [CLI Plugins](/plugin/cli-plugins): These are used to provide additional functionality when the Modern.js commands are executed in the application. Examples include adding commands, modifying configuration, and monitoring files. Most build-related capabilities can be achieved through CLI plugins.
-2. Server Plugins: These add extra functionality when the application receives requests. Examples include adding middleware and modifying request responses.
-3. Runtime Plugins: These provide additional functionality when the application runs React code. Examples include performing initialization actions and wrapping React higher-order components.
+#### Runtime Plugins
 
-:::note
-Server plugins and Runtime plugins are coming soon.
+Runtime plugins are used to provide additional functionality when the application is running React code, such as performing initialization behaviors and implementing React Higher-Order Component (HOC) encapsulation.
+
+Runtime plugins are configured via the `plugins` field in `src/modern.runtime.ts`.
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { routerPlugin } from '@modern-js/runtime/router';
+
+export default defineRuntimeConfig({
+  plugins: [routerPlugin()],
+});
+```
+
+{/* #### 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"
+import { defineConfig } from '@modern-js/app-tools/server';
+import bffPlugin from '@modern-js/plugin-bff/server';
+
+export default defineConfig({
+  plugins: [bffPlugin()],
+});
+``` */}
+
+:::tip
+Modern.js officially uses the new plugin mechanism starting from `MAJOR_VERSION.66.0`.
+
+If your current version is lower than MAJOR_VERSION.66.0, you can upgrade by running `npx modern upgrade`.
 :::
 
 ### Developing Plugins
 
-If you need to develop Modern.js framework plugins, you can read [Modern.js Plugin System](/plugin/plugin-system/introduction) for more information.
+If you need to develop Modern.js framework plugins, please read [Modern.js Plugin System](/plugin/plugin-system) for more information.
+
+## Rsbuild Build Plugins
 
-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:
+Rsbuild is the underlying build tool for Modern.js. By adding Rsbuild plugins, you can modify the default build behavior and add various additional functionalities, including but not limited to:
 
-- Modifying Rspack configurations
-- Processing new file types
+- Modifying Rsbuild configuration
+- Handling 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.
+You can register Rsbuild plugins in `modern.config.ts` via the `builderPlugins` option.  See [builderPlugins](/configure/app/builder-plugins.html) for details.
 
 :::tip
-Modern.js has upgraded the build tool to [Rsbuild](https://rsbuild.dev/) starting from `MAJOR_VERSION.46.0`.
+Starting from `MAJOR_VERSION.46.0`, Modern.js upgraded its underlying build tool to [Rsbuild](https://rsbuild.dev/).
 
-If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by executing `npx modern upgrade`.
+If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by running `npx modern upgrade`.
 :::
 
 :::info
-For more information about the Rsbuild plugin system, you can read [Rsbuild Official Site - Plugins](https://rsbuild.dev/plugins/list/index).
+You can read [Rsbuild Official Website - Plugins](https://rsbuild.dev/plugins/list/index) to learn more about the Rsbuild plugin system.
 :::
 
-## Rsbuild Plugin
-
 ### Official Plugins
 
-#### 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://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/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://github.com/rspack-contrib/rsbuild-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://github.com/rspack-contrib/rsbuild-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://github.com/rspack-contrib/rsbuild-plugin-source-build)           | Supports referencing source code from other subdirectories                                                   | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
-| [Check Syntax Plugin](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)           | Used to analyze the syntax compatibility of artifacts                                                        | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
-| [CSS Minimizer Plugin](https://github.com/rspack-contrib/rsbuild-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://github.com/rspack-contrib/rsbuild-plugin-pug)                             | Provides support for the Pug template engine                                                                 | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
-| [Rem Plugin](https://github.com/rspack-contrib/rsbuild-plugin-rem)                                      | Implements the rem adaptive layout for mobile pages                                                          | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
-| [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | Used to import YAML files and convert them into JavaScript objects                                           | [TOML File](/guides/basic-features/static-assets/json-files.html#toml-file)                                                                         |
-| [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | Used to import TOML files and convert them into JavaScript objects                                           | [YAML File](/guides/basic-features/static-assets/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://github.com/rspack-contrib/rsbuild-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://github.com/rspack-contrib/rsbuild-plugin-umd): Used to build outputs in UMD format.
+#### Built-in Plugins
+
+The following are official Rsbuild plugins that are already built into Modern.js.  They can be enabled without installation:
+
+| 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)     |
+| [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)                                                                         |
+| [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)                                                               |
+| [Check Syntax Plugin](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)           | Analyzes the syntax compatibility of the build artifacts to determine if there are any advanced syntax features that cause compatibility issues                           | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
+| [CSS Minimizer Plugin](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)         | Used to customize the CSS compression tool, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression   | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
+| [Pug Plugin](https://github.com/rspack-contrib/rsbuild-plugin-pug)                             | Provides support for the Pug template engine                                                                | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
+| [Rem Plugin](https://github.com/rspack-contrib/rsbuild-plugin-rem)                             | Implements rem adaptive layout for mobile pages                                                      | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
+| [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | Used to reference YAML files and convert them to JavaScript objects                                         | [YAML Files](/guides/basic-features/static-assets/json-files.html#yaml-files)                                                                         |
+| [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | Used to reference TOML files and convert them to JavaScript objects                                         | [TOML Files](/guides/basic-features/static-assets/json-files.html#toml-files)                                                                       |
+
+#### Plugins Not Built-in
+
+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.
+- [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';
 

package/docs/en/plugin/official/_meta.json

@@ -0,0 +1,12 @@
+[
+  {
+    "type": "dir",
+    "name": "cli-plugins",
+    "label": "cli-plugins"
+  },
+  {
+    "type": "dir",
+    "name": "rsbuild-plugins",
+    "label": "rsbuild-plugins"
+  }
+]

package/docs/en/plugin/official/cli-plugins/_meta.json

@@ -0,0 +1 @@
+["plugin-tailwind", "plugin-bff", "plugin-ssg", "plugin-swc"]

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

@@ -0,0 +1,6 @@
+# Overview
+
+- [@modern-js/plugin-tailwindcss](/plugin/official/cli-plugins/plugin-tailwind): Enables the use of Tailwind CSS styles.
+- [@modern-js/plugin-bff](/plugin/official/cli-plugins/plugin-bff): Provides BFF services and unified invocation capabilities.
+- [@modern-js/plugin-ssg](/plugin/official/cli-plugins/plugin-ssg): Provides static site generation capabilities.
+- [@modern-js/plugin-swc](/plugin/official/cli-plugins/plugin-swc): Provides SWC compilation support.

package/docs/en/plugin/official/rsbuild-plugins.mdx

@@ -0,0 +1,3 @@
+# Overview
+
+- [@modern-js/plugin-esbuild](/plugin/official/rsbuild-plugins/plugin-esbuild): Provides esbuild compilation support.