@modern-js/main-doc 2.6.0 → 2.8.0

package/en/guides/topic-detail/framework-plugin/hook.mdx

@@ -1,24 +1,25 @@
 ---
-title: Hook 模型
+title: Hook Model
 sidebar_position: 2
 ---
-# Hook 模型
+# Hook Model
 
-首先介绍一下 Modern.js 的基础的插件系统中的一些内容，包括 Hook 模型的工作方式、各个 Hook 模型的运行模式、Manager 的工作模式。
+First, let's introduce some content about the basic plugin system in Modern.js, including the working mode of the Hook model, the operating mode of each Hook model, and the working mode of the Manager.
 
-每种 Hook 模型都是独立的，可以独立管理运行函数。
+Each Hook model is independent and can manage running functions independently.
 
-## 基础工作方式
+## Basic Working Mode
+
+Taking the Pipeline as an example, let's briefly introduce the working mode of the Hook model. Let's take a look at a simple example:
 
-先以 Pipeline 为例，简单介绍一下 Hook 模型的工作方式。先看一个简单的例子：
 
 ```ts
 import { createPipeline } from '@modern-js/plugin';
 
-// 1. 创建
+// 1. create
 const pipeline = createPipeline<number, number>();
 
-// 2. 添加函数
+// 2. add function
 pipeline.use((count, next) => {
   return next(count + 1);
 });
@@ -26,32 +27,38 @@ pipeline.use((count, next) => {
   return count * 2;
 });
 
-// 3. 执行
+// 3. exec
 pipeline.run(1); // 4
 pipeline.run(5); // 12
 ```
 
-在这个例子中，创建了一个 `Pipeline<number, number>` 类型的 Pipeline（L3），这意味着运行它的时候，你需要传入一个 `number`，然后你会得到一个 `number`，而这个模型管理的函数的类型是：
+In this example, a `Pipeline<number, number>` is created on line 3. This means that when you run it, you need to pass in a `number`, and you will get a `number` as a result，the type is：
 
 ```ts
 (count: number, next: (nextCount: number) => number) => number;
 ```
 
-这里全是 `number`，是因为我们创建的是 `Pipeline<number, number>` ，如果创建的是 `Pipeline<number, string>` 则运行它入参是 `number`，返回值是 `string`，对应管理的函数的类型会是：
+The reason why there are only `number`s here is because we created a `Pipeline<number, number>`. If we had created a `Pipeline<number, string>`, then when we run it, we would pass in a `number` and get back a `string`. the type is：
 
 ```ts
 (count: number, next: (nextCount: number) => string) => string;
 ```
 
-创建好 Pipeline 之后，可以通过 `use` 添加函数（L5、L8），需要注意的是，添加的顺序就是他们默认的运行顺序，在这些函数中，你可以对 `count` 进行处理、返回一个值，如果你调用了 `next` 函数，则会运行后面的函数，即如果你添加了三个函数： `A`、`B`、`C`，如果你在 `A` 中调用 `next` 那么就会运行 `B`，同样的，如果你在 `B` 中调用 `next` 那么就会运行 `C`，而在上面的例子中，添加的第一个函数（L5）就运行了 `next`，所以这里就会运行第二个函数（L8），并且运行的返回值就是 第二个函数的返回值，如果在第一个函数中没有调用 `next`，直接返回，例如：
+After creating a Pipeline, you can add functions using the `use` method (lines 5 and 8). It is important to note that the order in which you add the functions is the order in which they will run by default.
+
+Within these functions, you can manipulate the `count` value and return a value. If you call the `next` function, the next function in the pipeline will run. For example, if you add three functions: `A`, `B`, and `C`, and you call `next` in function `A`, then function `B` will run. Similarly, if you call `next` in function `B`, then function `C` will run.
+
+In the example above, the first function added on line 5 calls `next`, which causes the second function added on line 8 to run. The return value of this function is the return value of the entire pipeline. If the first function does not call `next` and simply returns a value, then the pipeline will return that value without running any other functions.
+
+For example:
 
 ```ts
 import { createPipeline } from '@modern-js/plugin';
 
-// 1. 创建
+// 1. create
 const pipeline = createPipeline<number, number>();
 
-// 2. 添加函数
+// 2. add function
 pipeline.use((count, next) => {
   return count + 1;
 });
@@ -64,20 +71,23 @@ pipeline.run(1); // 2
 pipeline.run(5); // 6
 ```
 
-则在运行 Pipeline 的时候就不会运行第二个函数，那么 Pipeline 的运行结果则就是第一个函数的返回值。
+If the first function does not call `next`, the second function will not run and the return value of the pipeline will be the return value of the first function.
+
+Finally, the way to run the Pipeline is simply to call `pipeline.run()`.
 
-最后，运行 Pipeline 的方式也显而易见就是调用 `pipeline.run` 。
 
-## 不同 Hook 模型的区别
+## Differences between different Hook models
 
-上面这部分就是 Pipeline 整体的一个工作模式的描述，其他的 Hook 模型的工作模式基本也是这样，主要的区别点，是函数类型、执行顺序，参数。
+The above section describes the general working mode of the Pipeline, and the working modes of other Hook models are similar. The main differences lie in the function type, execution order, and parameters.
 
 ### Pipeline
 
-上面的例子就是以 Pipeline 为例描述的，这里就不赘述了，在 Pipeline 这个大类中，提供了两个小类：Sync 和 Async，顾名思义，它们的区别就是管理的函数的类型是 Sync 的还是 Async 的。
+The example above describes the Pipeline, so we won't go into details here. In the Pipeline category, there are two subcategories: Sync and Async, which manage functions of either Sync or Async type, respectively.
 
 :::info
-当 Pipeline 中没有函数或者所有函数都调用了 `next` 函数，则就需要在运行的时候提供：
+If there are no functions in the Pipeline or all functions have called the `next` function, then you need to provide a value when running the Pipeline.
+:::
+
 
 ```ts
 pipeline(
@@ -94,15 +104,15 @@ pipeline(
 
 ### Waterfall
 
-这种模型顾名思义，他的特点就是参数的顺序递交，即前面一个函数的返回值，将会成为下一个函数的入参，我们也用一个例子来看一下：
+This model, as the name suggests, is characterized by the sequential passing of parameters, where the return value of the previous function becomes the input parameter of the next function. Let's look at an example:：
 
 ```ts
 import { createWaterfall } from '@modern-js/plugin';
 
-// 1. 创建
+// 1. create
 const waterfall = createWaterfall<number>();
 
-// 2. 添加函数
+// 2. add function
 waterfall.use(count => {
   return count + 1;
 });
@@ -110,32 +120,34 @@ waterfall.use(count => {
   return count * 2;
 });
 
-// 3. 执行
+// 3. exec
 waterfall.run(1); // 4
 waterfall.run(5); // 12
 ```
 
-这个例子中，创建了一个类型为 `Waterfall<number> `，即这个模型执行的入参和返回值是一样的，这个例子中都是 `number`，而它管理的函数的类型是：
+In this example, a `Waterfall<number>` type is created, which means that the input and output types of this model are the same. In this case, both the input and output types are `number`, the type is：
 
 ```ts
 (count: number) => number;
 ```
 
-可能简单看这个例子感觉和上面的 Pipeline 功能一样，那需要注意的是，首先这里 Waterfall 管理的函数没有 next 函数作为第二个参数，所以它无法在函数内部通过调用 next 来先运行之后添加的函数，从而修改运行的顺序，其次这里的运行的入参的类型和返回值的类型必须是一样的（而 Pipeline 可以不一样）。
+At first glance, this example may seem to have the same functionality as the Pipeline above, but there are some important differences to note. Firstly, the functions managed by Waterfall do not have a `next` function as the second argument, so they cannot modify the execution order by calling `next` within the function. Secondly, the input and output types of the functions must be the same (unlike in the Pipeline where they can be different).
 
-同样的，在 Waterfall 这个大类中，也提供了 Sync 和 Async 的小类，分别对应 Sync 和 Async 的函数。
+Similarly to Pipeline, Waterfall has Sync and Async subcategories that respectively manage Sync and Async functions.
 
 ### Workflow
 
-这种 Hook 模型与上面两种 Hook 模型的区别是，没有那么强的前后参数返回值递交的概念，在这个模型中，每个函数都是基于同样的入参，相对独立运行的，通过一个例子简单看一下：
+This Hook model is different from the two Hook models above in that there is no strong concept of passing parameters and return values in a sequential order. In this model, each function runs independently based on the same input parameter.
+
+for example:
 
 ```ts
 import { createWorkflow } from '@modern-js/plugin';
 
-// 1. 创建
+// 1. create
 const workflow = createWorkflow<number, number>();
 
-// 2. 添加函数
+// 2. add plugin
 workflow.use(count => {
   return count + 1;
 });
@@ -148,26 +160,29 @@ workflow.run(1); // [2, 2]
 workflow.run(5); // [6, 10]
 ```
 
-在这个例子中，添加了两个函数，所以运行的结果就是这两个函数运行的结果形成的一个数组。
+In this example, two functions are added to the Workflow, so the result of running the Workflow is an array of the results of these two functions.
+
+Although there is no strong concept of passing parameters and return values in a sequential order in this model, there are still differences in the execution order. In the Workflow category, there are three subcategories: Sync, Async, and Parallel.
+
+The difference between them lies in the execution order of the functions. By default, they are all executed in the order they are added, but in Sync and Async mode, the execution order is strictly based on the order in which they are added, while in Parallel mode, a variant of Async mode, `Promise.all` is used to execute all the functions, while in Async mode, `await` is used to wait for the previous function to finish running.
 
-虽然这种模型中没有那么强的前后参数返回值递交的概念，但依旧有执行顺序的区别，在 Workflow 这个大类中，提供了三个小类：Sync、Async、Parallel。他们之间的区别就是函数的执行顺序，当然默认的都是按照添加顺序执行，而在 Sync、Async 则是强制按照添加顺序执行，而 Parallel 则是 Async 模式的一个变体，即它使用的是 `Promise.all` 来执行所有函数，而 Async 则会 `await` 前面的函数运行结束。
+## Comparison of Hook models
 
-## Hook 模型对比
 
 <div style={{ width: "100%", overflowX: "scroll" }}>
 <div style={{ width: "150%" }}>
 
-|                  | 函数类型   | 执行顺序                                                   | 函数参数来源                                                                               | 执行返回值来源           | 倾向处理的任务类型                                                  | 函数 TS 类型                                           |
-| ---------------- | ---------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------ | ------------------------------------------------------------------- | ------------------------------------------------------ |
-| Pipeline         | Sync       | 默认执行第一个添加的函数，可以通过 next 调用之后添加的函数 | 第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数向 next 函数传递的参数 | 第一个函数的返回值       | <ul><li>需要修改初始参数</li><li>需要修改函数执行顺序</li></ul>     | `(input: I, next: Next<I, O>) => O`                    |
-| AsyncPipeline    | Sync/Async | 默认执行第一个添加的函数，可以通过 next 调用之后添加的函数 | 第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数向 next 函数传递的参数 | 第一个函数的返回值       | <ul><li>需要修改初始参数</li><li>需要修改函数执行顺序</li></ul>     | `(input: I, next: AsyncNext<I, O>) => O ｜ Promise<O>` |
-| WaterFall        | Sync       | 一直顺序执行                                               | 第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数的返回值               | 最后一个函数的返回值     | <ul><li>需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>   | `(I: I) => I`                                          |
-| AsyncWaterFall   | Sync/Async | 一直顺序执行                                               | 第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数的返回值               | 最后一个函数的返回值     | <ul><li>需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>   | `(I: I) => I ｜ Promise<I>`                            |
-| Workflow         | Sync       | 一直顺序执行                                               | 所有函数的入参都是运行的参数                                                               | 所有函数返回值形成的数组 | <ul><li>不需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul> | `(I: I) => O`                                          |
-| AsyncWorkflow    | Sync/Async | 一直顺序执行                                               | 所有函数的入参都是运行的参数                                                               | 所有函数返回值形成的数组 | <ul><li>不需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul> | `(I: I) => O ｜ Promise<O>`                            |
-| ParallelWorkFlow | Sync/Async | 异步执行                                                   | 所有函数的入参都是运行的参数                                                               | 所有函数返回值形成的数组 | <ul><li>不需要修改初始参数</li><li>不关心执行顺序</li></ul>         | `(I: I) => O ｜ Promise<O>`                            |
+|                  | Function Type | Execution Order                                             | Source of Function Parameters                                                               | Source of Execution Returns | Preferred Task Type                                               | Function TS Type                                             |
+| ---------------- | ------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------- | --------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------ |
+| Pipeline         | Sync          | Executes the first added function by default, can execute subsequent functions through `next` | The parameters of the first function come from the input, while the parameters of subsequent functions come from the parameters passed to `next` | Returns from the first function | <ul><li>Needs to modify initial parameters</li><li>Needs to modify function execution order</li></ul> | `(input: I, next: Next<I, O>) => O`                          |
+| AsyncPipeline    | Sync/Async    | Executes the first added function by default, can execute subsequent functions through `next` | The parameters of the first function come from the input, while the parameters of subsequent functions come from the parameters passed to `next` | Returns from the first function | <ul><li>Needs to modify initial parameters</li><li>Needs to modify function execution order</li></ul> | `(input: I, next: AsyncNext<I, O>) => O ｜ Promise<O>`      |
+| Waterfall        | Sync          | Executes functions in order                                  | The parameters of the first function come from the input, while the parameters of subsequent functions come from the return value of the previous function | Returns from the last function | <ul><li>Needs to modify initial parameters</li><li>Does not need to modify function execution order</li></ul> | `(I: I) => I`                                               |
+| AsyncWaterfall   | Sync/Async    | Executes functions in order                                  | The parameters of the first function come from the input, while the parameters of subsequent functions come from the return value of the previous function | Returns from the last function | <ul><li>Needs to modify initial parameters</li><li>Does not need to modify function execution order</li></ul> | `(I: I) => I ｜ Promise<I>`                                 |
+| Workflow         | Sync          | Executes functions in order                                  | All function parameters come from the input                                                  | An array of all function returns | <ul><li>Does not need to modify initial parameters</li><li>Does not need to modify function execution order</li></ul> | `(I: I) => O`                                               |
+| AsyncWorkflow    | Sync/Async    | Executes functions in order                                  | All function parameters come from the input                                                  | An array of all function returns | <ul><li>Does not need to modify initial parameters</li><li>Does not need to modify function execution order</li></ul> | `(I: I) => O ｜ Promise<O>`                                 |
+| ParallelWorkFlow | Sync/Async    | Executes functions asynchronously                            | All function parameters come from the input                                                  | An array of all function returns | <ul><li>Does not need to modify initial parameters</li><li>Does not care about function execution order</li></ul>           | `(I: I) => O ｜ Promise<O>`                                 |
 
 </div>
 </div>
 
-Workflow、Waterfall 其实都是 Pipeline 的变体，Pipeline 可以通过特定的写法来实现 Workflow、Waterfall，但都较为麻烦，有许多隐形的约定。为了方便使用，提供了这两种变体来满足这种特殊场景。
+"Workflow" and "Waterfall" are actually variants of the "Pipeline" model. While it's possible to implement "Workflow" and "Waterfall" using a specific writing style with "Pipeline", it can be more complicated with many implicit conventions. To make it easier to use, these two variants are provided to satisfy specific use cases.

package/en/guides/topic-detail/framework-plugin/implement.mdx

@@ -1,53 +1,51 @@
 ---
-title: 如何编写插件
+title: Write Plugins
 sidebar_position: 3
 ---
-# 如何编写插件
+# How to Write Plugins
 
-上一小节介绍了 Modern.js 插件的 Hook 模型，这一小节介绍如何编写插件。
+The previous section introduced the Hook models used by Modern.js plugins, while this section describes how to write plugins.
 
-## 实现插件
+## Implementing a Plugin
 
-Modern.js 插件是一个对象，对象包含以下属性：
+A Modern.js plugin is an object that includes the following properties:
 
-- `name`: 插件的名称，唯一标识符。
-- `setup`: 插件初始化函数，只会执行一次。setup 函数可以返回一个 Hooks 对象，Modern.js 会在特定的时机执行这些 Hooks。
+- `name`: The name of the plugin, a unique identifier.
+- `setup`: The initialization function for the plugin, which only runs once. The `setup` function can return a Hooks object, which Modern.js executes at specific times.
 
 ```ts
 const myPlugin = {
   name: 'my-plugin',
 
   setup() {
-    // 执行一些初始化逻辑
     const foo = '1';
 
-    // 返回一个 Hooks 对象
+    // return hook object
     return {
       afterBuild: () => {
-        // 在构建完成后执行逻辑
       },
     };
   },
 };
 ```
 
-另外，在插件中，允许配置与其他插件的执行顺序。详情可以参考[插件关系](/guides/topic-detail/framework-plugin/relationship)。
+In addition, plugins allow configuration of the execution order with other plugins. For more information, please refer to [Plugin Relationship](/guides/topic-detail/framework-plugin/relationship).
 
-### 插件类型
+### Plugin Types
 
-Modern-js 支持多种工程开发，如应用工程(app-tools), 模块工程(module-tools)等。
+Modern.js supports various types of project development, such as application development (`app-tools`), module development (`module-tools`), etc.
 
-为了兼顾不同工程开发的差异和通性，Modern-js 将插件如下图进行组织:
+To balance the differences and commonalities between various types of project development, Modern.js organizes plugins as shown in the following figure:
 
 ![plugin-relationship](https://lf3-static.bytednsdoc.com/obj/eden-cn/eeeh7uhbepxlpe/modern-website/plugin-relationship.jpg)
 
-从图可以看出，Modern-js 将插件大致分为两类:
+As shown in the figure, Modern.js roughly divides plugins into two categories:
 
-1. 通用插件: 插件只会包含一些基础的 Hooks
+1. Common plugins: Plugins that only include some basic Hooks.
 
-2. 工程插件: 不同的工程开发会在通用插件的基础上扩展出自己的 Hooks, Config 等类型。
+2. Project plugins: Different project developments will extend their own Hooks, Config, etc. on the basis of common plugins.
 
-使用 TypeScript 时，可以引入内置的 `CliPlugin` 等类型，为插件提供正确的类型推导。
+When using TypeScript, you can import built-in types such as `CliPlugin` to provide correct type inference for plugins.
 
 ```ts
 import type { CliPlugin } from '@modern-js/core';
@@ -60,14 +58,13 @@ const myPlugin: CliPlugin = {
 
     return {
       afterBuild: () => {
-        // 在构建完成后执行逻辑
       },
     };
   },
 };
 ```
 
-上述代码为通用插件，只包含一些基础的 Hooks。 Modern.js 支持通过泛型对插件的定义进行扩展：
+The above code is a general-purpose plugin, containing only some basic Hooks. Modern.js supports extending the definition of plugins through generics:
 
 ```ts
 import type { CliPlugin, AppTools } from '@modern-js/app-tools';
@@ -80,14 +77,13 @@ const myPlugin: CliPlugin<AppTools> = {
 
     return {
       afterBuild: () => {
-        // 在构建完成后执行逻辑
       },
     };
   },
 };
 ```
 
-如果仔细观察 `AppTools` 这个类型，可以发现 `AppTools` 由 3 种类型构成.
+If you look closely at the type `AppTools`, you can see that `AppTools` consists of 3 types.
 
 ```ts
 type AppTools = {
@@ -97,10 +93,10 @@ type AppTools = {
 };
 ```
 
-当编写插件时，插件通过泛型扩展在不同的基础上扩展自己的 Hooks 等类型:
+When writing plugins, plugins extend their own types like Hooks on different bases through generic extensions:
 
 ```ts
-// 通用插件上扩展
+// common plugin
 import type { CliPlugin } from '@modern-js/core';
 import type { MyPluginHook } from 'xxx';
 
@@ -108,18 +104,18 @@ const myPlugin: CliPlugin<{ hooks: MyPluginHook }> = {};
 ```
 
 ```ts
-// 在 @modern-js/app-tools 基础上扩展
+// extend from app-tools hook
 import type { CliPlugin, AppTools } from '@modern-js/app-tools';
 import type { MyPluginHook } from 'xxx';
 
 const myPlugin: CliPlugin<AppTools & { hooks: MyPluginHook }> = {};
 ```
 
-详细说明，请参考 [扩展 Hook](/guides/topic-detail/framework-plugin/extend)。
+Please refer to [Extending Hooks](/guides/topic-detail/framework-plugin/extend) for detailed explanations.
 
-### 插件配置项
+### Plugin Configuration
 
-**建议将插件写成函数的形式**，使插件能通过函数入参来接收配置项：
+**It is recommended to write plugins in the form of functions**, so that plugins can receive configuration options through function parameters:
 
 ```ts
 import type { CliPlugin } from '@modern-js/core';
@@ -137,9 +133,10 @@ const myPlugin = (options: MyPluginOptions): CliPlugin => ({
 });
 ```
 
-### 插件 API
+### Plugin API
+
+The `setup` function of a plugin receives an `api` parameter, and you can call some methods provided on the `api` to get configuration, application context, and other information.
 
-插件的 `setup` 函数会接收一个 api 入参，你可以调用 api 上提供的一些方法来获取到配置、应用上下文等信息。
 
 ```ts
 import type { CliPlugin } from '@modern-js/core';
@@ -148,21 +145,22 @@ export default (): CliPlugin => ({
   name: 'my-plugin',
 
   setup(api) {
-    // 获取应用原始配置
+    // get user set config
     const config = api.useConfigContext();
-    // 获取应用运行上下文
+    // get context
     const appContext = api.useAppContext();
-    // 获取解析之后的最终配置
+    // get final config
     const resolvedConfig = api.useResolvedConfigContext();
   },
 });
 ```
 
-插件 API 的详细说明，请参考 [Plugin API](/guides/topic-detail/framework-plugin/plugin-api)。
+For more detail [Plugin API](/guides/topic-detail/framework-plugin/plugin-api)。
+
+### Async setup
 
-### 异步 setup
+The `setup` function of a CLI plugin can be an asynchronous function, which can execute asynchronous logic during the initialization process.
 
-CLI 插件的 setup 可以是一个异步函数，在初始化过程中执行异步逻辑。
 
 ```ts
 import type { CliPlugin } from '@modern-js/core';
@@ -176,13 +174,13 @@ export default (): CliPlugin => ({
 });
 ```
 
-## 添加插件
+## Adding Plugins
 
-自定义插件的使用方式可以查看：[plugins (框架插件)](/configure/app/plugins)。下面会介绍 Modern.js 中推荐的插件实现方法。
+Custom plugins can be used by following the instructions in the [plugins](/configure/app/plugins) section of the documentation. Below is the recommended way to implement plugins in Modern.js.
 
-### 开发本地插件
+### Developing Local Plugins
 
-本地插件推荐写在 `config/plugin` 目录下，并通过 `export default` 导出：
+It is recommended to write local plugins in the `config/plugin` directory and export them using `export default`:
 
 ```ts title=config/plugin/myPlugin.ts
 import type { CliPlugin } from '@modern-js/core';
@@ -191,12 +189,12 @@ export default (): CliPlugin => ({
   name: 'my-plugin',
 
   setup() {
-    // 插件初始化
+    // init plugin
   },
 });
 ```
 
-然后在 `modern.config.ts` 中注册对应的插件：
+register plugin in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
@@ -207,11 +205,11 @@ export default defineConfig({
 });
 ```
 
-### 在 npm 上发布插件
+### Publishing a Plugin on npm
 
-如果需要将 Modern.js 插件发布到 npm，推荐使用 Modern.js 中的模块工程方案来管理和构建。
+If you want to publish your Modern.js plugin on npm, it's recommended to use the module project solution provided by Modern.js to manage and build the plugin.
 
-首先创建一个空的模块工程方案项目，调整 npm 包名称：
+First, create an empty module project solution and adjust the package name:
 
 ```json
 {
@@ -220,7 +218,7 @@ export default defineConfig({
 }
 ```
 
-然后新建对应的插件文件：
+create plugin main file：
 
 ```ts title=src/index.ts
 import type { CliPlugin } from '@modern-js/core';
@@ -229,12 +227,12 @@ export default (): CliPlugin => ({
   name: 'my-plugin',
 
   setup() {
-    // 插件初始化
+    // plugin init
   },
 });
 ```
 
-发布之后，安装到需要使用的项目 `pnpm add my-plugin`，这里以一个应用项目为例，然后在 `modern.config.ts` 中添加：
+After publishing, install it to the project you need to use `pnpm add my-plugin`, take an application project as an example, and then add it in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
@@ -245,4 +243,4 @@ export default defineConfig({
 });
 ```
 
-如果你发现目前 Modern.js 存在无法满足的场景，欢迎通过**编写自定义插件的方式**来一起建设 Modern.js 生态。
+If you find that there are currently unsatisfactory scenarios in Modern.js, welcome to build the Modern.js ecosystem together by **writing custom plugins**.

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

@@ -1,16 +1,16 @@
 ---
-title: 介绍
+title: Introduction
 sidebar_position: 1
 ---
-# 介绍
+# Introduction
 
-## Modern.js 插件系统
+## Modern.js Plugin System
 
-Modern.js 用于扩展项目运行、请求、渲染等不同阶段功能的系统，主要分为三个部分：Hook 模型、管理器，上下文共享机制。
+Modern.js is a system used for extending the functionality of a project at different stages such as running, requesting, and rendering. It mainly consists of three parts: the Hook model, the Manager, and the Context Sharing mechanism.
 
-Hook 模型用于确定当前 Hook 的执行方式，不同 Hook 模型的函数拥有不同的执行逻辑。管理器用于控制 Hook 的执行与调度。上下文共享机制用于在不同 Hook 间传递信息。
+The Hook model is used to determine the execution method of the current Hook, and functions with different Hook models have different execution logics. The Manager is used to control the execution and scheduling of Hooks. The Context Sharing mechanism is used to pass information between different Hooks.
 
-目前 Modern.js 提供几种不同的 Hook 模型：
+Currently, Modern.js provides several different Hook models:
 
 - Pipeline
   - Sync
@@ -24,28 +24,27 @@ Hook 模型用于确定当前 Hook 的执行方式，不同 Hook 模型的函数
   - Parallel(Async)
 
 :::note
-后续章节详细介绍各个模型的执行方式。
-
+Subsequent chapters will introduce the execution methods of each model in detail.
 :::
 
-基于 Hook 模型和管理器，Modern.js 暴露了三套插件：CLI、Runtime、Server。
+Based on the Hook model and Manager, Modern.js exposes three sets of plugins: CLI, Runtime, and Server.
 
-其中 CLI 插件是 Modern.js 中主要的运行流程控制模型，Modern.js 中绝大部分功能都是主要通过这一套模型运行的。Runtime 插件主要负责处理 React 组件渲染逻辑。Server 插件主要用于对服务端的生命周期以及用户请求的控制。
+Among them, the CLI plugin is the main running flow control model in Modern.js, and most of the features in Modern.js are mainly run through this set of models. The Runtime plugin is mainly responsible for processing the rendering logic of React components. The Server plugin is mainly used for controlling the server lifecycle and user requests.
 
-## 插件可以做什么
+## What Plugins Can Do
 
-Modern.js 的所有功能都是通过这套插件实现的，这意味着 Modern.js 中的所有能力是都对开发者开放的。开发者可以通过编写插件来扩展更多功能，适配复杂场景，包括但不限于：
+All of Modern.js's features are implemented through this set of plugins, which means that all of Modern.js's capabilities are open to developers. Developers can write plugins to extend more functionality and adapt to complex scenarios, including but not limited to:
 
-- 注册命令
-- 修改 Modern.js 配置、配置校验 Schema
-- 修改编译时的 Webpack/Babel/Less/Sass/Tailwind CSS/... 配置
-- 修改运行时需要渲染的 React 组件、Element
-- 修改页面路由
-- 修改服务器路由
-- 自定义控制台输出
-- 自定义动态 HTML 模版
-- 自定义 Node.js 服务器框架
-- 自定义 React 组件客户端/服务器端渲染
+- Registering commands
+- Modifying Modern.js configuration and validation schema
+- Modifying compilation configurations for Webpack/Babel/Less/Sass/Tailwind CSS/...
+- Modifying the React components/elements to be rendered at runtime
+- Modifying page routing
+- Modifying server routing
+- Customizing console output
+- Customizing dynamic HTML templates
+- Customizing Node.js server frameworks
+- Customizing React component client/server rendering
 - ...
 
-当 Modern.js 暂时没有覆盖到你所需要的功能或场景时，可以开发一个自定义插件，来实现适配特殊场景的相关功能。
+When Modern.js does not currently cover the functionality or scenario that you need, you can develop a custom plugin to implement the related functionality for adapting to special scenarios.

package/en/guides/topic-detail/framework-plugin/plugin-api.mdx

@@ -1,10 +1,10 @@
 ---
-title: 插件 API
+title: Plugin API
 sidebar_position: 6
 ---
-# 插件 API
+# Plugin API
 
-插件的 `setup` 函数会接收一个 `api` 入参，你可以调用 api 上提供的一些方法来获取到配置、应用上下文等信息。
+The `setup` function of the plugin will receive an `api` imported parameter, and you can call some methods provided on the api to obtain information such as configuration and application context.
 
 ```ts
 import type { CliPlugin } from '@modern-js/core';
@@ -13,11 +13,11 @@ export default (): CliPlugin => ({
   name: 'my-plugin',
 
   setup(api) {
-    // 获取应用原始配置
+    // get user config
     const config = api.useConfigContext();
-    // 获取应用运行上下文
+    // get plugin context
     const appContext = api.useAppContext();
-    // 获取解析之后的最终配置
+    // get resolved config
     const resolvedConfig = api.useResolvedConfigContext();
   },
 });
@@ -27,7 +27,7 @@ export default (): CliPlugin => ({
 
 ### useConfigContext
 
-用于获取应用原始配置。
+Used to retrieve the original configuration of the application.
 
 ```ts
 const useConfigContext: () => UserConfig;
@@ -45,11 +45,11 @@ interface UserConfig {
 }
 ```
 
-具体配置字段的意义请参考【[配置](/configure/app/source/alias)】。
+Please refer to [Configuration](/configure/app/usage) for the specific meanings of configuration fields.
 
 ### useAppContext
 
-用于获取应用运行上下文。
+Used to retrieve the runtime context of the application.
 
 ```ts
 const useAppContext: () => IAppContext;
@@ -77,7 +77,7 @@ interface IAppContext {
 
 ### useResolvedConfigContext
 
-用于获取解析之后的最终配置。
+Used to retrieve the final configuration after parsing.
 
 ```ts
 const useResolvedConfigContext: () => NormalizedConfig;
@@ -96,11 +96,11 @@ interface NormalizedConfig {
 }
 ```
 
-具体配置字段的意义请参考【[配置](/configure/app/source/alias)】。
+Please refer to [Configuration](/configure/app/usage) for the specific meanings of configuration fields.
 
 ### useHookRunners
 
-用于获取 Hooks 的执行器，并触发特定的 Hook 执行。
+Used to retrieve the executor of Hooks and trigger the execution of specific Hooks.
 
 ```ts
 import type { CliPlugin } from '@modern-js/core';
@@ -110,7 +110,7 @@ export default (): CliPlugin => ({
 
   async setup(api) {
     const hookRunners = api.useHookRunners();
-    // 触发 afterBuild Hook
+    // invoke afterBuild Hook
     await hookRunners.afterBuild();
   },
 });