Merge branch 'main' into release-v2.67.5

Author: caohuilin

packages/document/main-doc/docs/en/configure/app/plugins.mdx

@@ -1,47 +1,27 @@
----
-sidebar_position: 9
----
-
 # plugins
 
 - **Type:** `CliPlugin[]`
 - **Default:** `[]`
 
-Used to configure custom Modern.js framework plugins.
-
-Refer to [How to Develop Plugins](/plugin/plugin-system) for how to write custom plugins.
+Used to configure custom Modern.js framework CLI plugins. For information on how to create custom CLI plugins, please refer to [How to Write CLI Plugins](/plugin/introduction.html#cli-plugins).
 
 ## Note
 
-This option is used to configure framework plugins. If you need to configure other types of plugins, please choose the corresponding configuration method:
-
-- Use [builderPlugins](/configure/app/builder-plugins) to configure Rsbuild plugins.
-- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) to configure Rspack or webpack plugins.
-- Use [tools.babel](/configure/app/tools/babel) to configure Babel plugins.
-
-## Plugin types
-
-Modern.js has three types of plugins:
-
-- `CLI plugins`, applicable to local development, compilation and construction stages, can extend various capabilities in the command line and compilation stages.
-- `Server plugins`, applicable to the server.
-- `Runtime plugins`, applicable to the front-end runtime.
-
-Currently, Modern.js has opened up the ability to customize CLI plugins, and Server plugins and Runtime plugins will be opened up later.
-
-## Plugin execution order
+This option is **specifically for configuring framework CLI plugins**. If you need to configure other types of plugins, use the appropriate configuration method:
 
-By default, custom plugins are executed in the order of the `plugins` array, and the execution time of built-in Modern.js plugins is earlier than that of custom plugins.
+- Use [builderPlugins](/configure/app/builder-plugins) for Rsbuild plugins.
+- Use [tools.bundlerChain](/configure/app/tools/bundler-chain) for Rspack or webpack plugins.
+- Use [tools.babel](/configure/app/tools/babel) for Babel plugins.
+- Use the [plugins field in runtime config](/configure/app/runtime/plugins) for framework Runtime plugins.
 
-When the plugin sets options that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields. Refer to [Plugins Structure](/plugin/plugin-system) for more information.
 
-## Example
+## Examples
 
-The following is an example of using CLI plugins.
+Below are examples of using CLI plugins:
 
-### Use plugins on npm
+### Using plugins from npm
 
-To use plugins from npm registry, you need to first install the plugins , and import them in `modern.config.ts`.
+To use plugins from the npm registry, first install the plugins and then import them in your configuration:
 
 ```ts title="modern.config.ts"
 import { myPlugin } from 'my-plugin';
@@ -51,9 +31,9 @@ export default defineConfig({
 });
 ```
 
-### Use local plugins
+### Using local plugins
 
-To use local plugins, import them directly using a relative path.
+To use plugins from your local repository, import them directly using a relative path:
 
 ```ts title="modern.config.ts"
 import { myPlugin } from './config/plugin/myPlugin';
@@ -65,7 +45,7 @@ export default defineConfig({
 
 ### Plugin configuration
 
-If the plugin provides some custom configuration options, they can be passed in as parameters to the plugin function.
+If a plugin provides custom configuration options, pass them as parameters to the plugin function:
 
 ```ts title="modern.config.ts"
 import { myPlugin } from 'my-plugin';

packages/document/main-doc/docs/en/configure/app/runtime/master-app.mdx

@@ -1,8 +1,4 @@
----
-title: masterApp
----
-
-# runtime.masterApp
+# masterApp
 
 - **Type:** `Object`
 

packages/document/main-doc/docs/en/configure/app/runtime/plugins.mdx

@@ -0,0 +1,58 @@
+# plugins
+
+- **Type:** `RuntimePlugin[]`
+- **Default:** `[]`
+
+Used to configure custom Modern.js Runtime plugins. For details on how to create custom Runtime plugins, please refer to [How to Write Runtime Plugins](/plugin/introduction#runtime-plugins).
+
+:::info
+
+Runtime plugins must be configured in the `plugins` array within the `src/modern.runtime.ts` file.
+
+:::
+
+## Examples
+
+Here are examples demonstrating how to use Runtime plugins:
+
+### Using plugins from npm packages
+
+To use plugins published on npm, first install them via your package manager, then import them into your configuration.
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { myPlugin } from 'my-plugin';
+
+export default defineRuntimeConfig({
+  plugins: [myPlugin()],
+});
+```
+
+### Using local plugins
+
+To use plugins from your local codebase, import them directly using relative paths.
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { myPlugin } from './config/plugin/myPlugin';
+
+export default defineRuntimeConfig({
+  plugins: [myPlugin()],
+});
+```
+
+### Plugin configuration
+
+If a plugin supports custom configuration options, you can provide them as arguments to the plugin function.
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { myPlugin } from './config/plugin/myPlugin';
+
+export default defineRuntimeConfig({
+  plugins: [myPlugin({
+    foo: 1,
+    bar: 2,
+  })],
+});
+```

packages/document/main-doc/docs/en/plugin/cli-plugins/api.mdx

@@ -2,6 +2,12 @@
 
 This document details the API for Modern.js CLI plugins. CLI plugins allow you to extend and customize the functionality of Modern.js projects during the build and development process.
 
+:::info
+
+CLI plugins need to be configured via the [`plugins`](/configure/app/plugins) field in `modern.config.ts`.
+
+:::
+
 ## Plugin Basic Structure
 
 A typical CLI plugin structure is as follows:

packages/document/main-doc/docs/en/plugin/runtime-plugins/api.mdx

@@ -2,6 +2,12 @@
 
 Modern.js's Runtime Plugins allow you to extend and modify the behavior of your application during its React code execution.  With Runtime Plugins, you can easily perform initialization tasks, implement React Higher-Order Component (HOC) wrapping, and more.
 
+:::info
+
+Runtime plugins need to be configured via the [`plugins`](/configure/app/runtime/plugins) field in `src/modern.runtime.ts`.
+
+:::
+
 ## Plugin Structure
 
 A typical Runtime Plugin looks like this:

packages/document/main-doc/docs/zh/configure/app/plugins.mdx

@@ -1,39 +1,18 @@
----
-sidebar_position: 9
----
-
 # plugins
 
 - **类型：** `CliPlugin[]`
 - **默认值：** `[]`
 
-用于配置自定义的 Modern.js 框架插件。
-
-自定义插件的编写方式请参考 [如何编写插件](/plugin/plugin-system)。
+用于配置自定义的 Modern.js 框架 CLI 插件。自定义 CLI 插件的编写方式请参考 [如何编写 CLI 插件](/plugin/introduction.html#cli-插件)。
 
 ## 注意事项
 
-该选项**用于配置框架插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
+该选项**用于配置框架 CLI 插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
 
 - 配置 Rsbuild 插件，请使用 [builderPlugins](/configure/app/builder-plugins) 配置项。
 - 配置 Rspack 或 webpack 插件，请使用 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置项。
 - 配置 Babel 插件，请使用 [tools.babel](/configure/app/tools/babel) 配置项。
-
-## 插件类型
-
-Modern.js 中内置了三种不同的框架插件：
-
-- `CLI 插件`，适用于本地开发、编译构建阶段，可以在命令行和编译阶段扩展各种能力。
-- `Server 插件`，适用于服务端。
-- `Runtime 插件`，适用于前端运行时。
-
-目前 Modern.js 开放了自定义 CLI 插件的能力，Server 插件和 Runtime 插件会在后续开放。
-
-## 插件执行顺序
-
-默认情况下，自定义插件会按照 `plugins` 数组的顺序依次执行，Modern.js 内置插件的执行时机早于自定义插件。
-
-当插件内部使用了控制顺序的相关字段，比如 `pre`、`post` 时，会基于声明的字段对执行顺序进行调整，详见 [插件结构](/plugin/plugin-system)。
+- 配置框架 Runtime 插件，请使用 [runtime 配置文件 plugins](/configure/app/runtime/plugins) 配置项。
 
 ## 示例
 

packages/document/main-doc/docs/zh/configure/app/runtime/master-app.mdx

@@ -1,8 +1,4 @@
----
-title: masterApp
----
-
-# runtime.masterApp
+# masterApp
 
 - **类型：** `Object`
 

packages/document/main-doc/docs/zh/configure/app/runtime/plugins.mdx

@@ -0,0 +1,58 @@
+# plugins
+
+- **类型：** `RuntimePlugin[]`
+- **默认值：** `[]`
+
+用于配置自定义的 Modern.js Runtime 插件。自定义 Runtime 插件的编写方式请参考 [如何编写 Runtime 插件](/plugin/introduction.html#runtime-插件)。
+
+:::info
+
+Runtime 插件需要在 `src/modern.runtime.ts` 文件中的 plugins 中进行配置。
+
+:::
+
+## 示例
+
+下面是 Runtime 插件的使用示例。
+
+### 使用 npm 上的插件
+
+使用 npm 上的插件，需要通过包管理器安装插件，并通过 import 引入。
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { myPlugin } from 'my-plugin';
+
+export default defineRuntimeConfig({
+  plugins: [myPlugin()],
+});
+```
+
+### 使用本地插件
+
+使用本地代码仓库中的插件，直接通过相对路径 import 引入即可。
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { myPlugin } from './config/plugin/myPlugin';
+
+export default defineRuntimeConfig({
+  plugins: [myPlugin()],
+});
+```
+
+### 插件配置项
+
+如果插件提供了一些自定义的配置项，可以通过插件函数的参数传入配置。
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { myPlugin } from './config/plugin/myPlugin';
+
+export default defineRuntimeConfig({
+  plugins: [myPlugin({
+    foo: 1,
+    bar: 2,
+  })],
+});
+```

packages/document/main-doc/docs/zh/plugin/cli-plugins/api.mdx

@@ -2,6 +2,12 @@
 
 本文档详细介绍了 Modern.js CLI 插件的 API。CLI 插件允许您在 Modern.js 项目的构建和开发过程中扩展和定制功能。
 
+:::info
+
+CLI 插件需要通过 `modern.config.ts` 中的 [`plugins`](/configure/app/plugins) 字段配置。
+
+:::
+
 ## 插件基础结构
 
 一个典型的 CLI 插件结构如下：

packages/document/main-doc/docs/zh/plugin/runtime-plugins/api.mdx

@@ -2,6 +2,12 @@
 
 Modern.js 的 Runtime 插件允许您在应用程序的 React 代码运行时扩展和修改其行为。通过 Runtime 插件，您可以轻松地执行初始化任务、实现 React 高阶组件（HOC）封装等功能。
 
+:::info
+
+Runtime 插件需要通过 `src/modern.runtime.ts` 中的 [`plugins`](/configure/app/runtime/plugins) 字段配置。
+
+:::
+
 ## 插件结构
 
 一个典型的 Runtime 插件如下所示：