@modern-js/main-doc 2.6.0 → 2.8.0

package/en/guides/topic-detail/model/quick-start.mdx

@@ -1,48 +1,48 @@
 ---
 sidebar_position: 1
-title: 快速上手
+title: Quick Start
 ---
-# 快速上手
+# Quick Start
 
 import ReduckMigration from "@site-docs/components/reduck-migration"
 
 <ReduckMigration />
 
-[Reduck](https://github.com/modern-js-dev/reduck) 是 Modern.js 团队开发的遵循 MVC 模式的状态管理库，底层状态存储基于 [Redux](https://redux.js.org/) 实现，同时提供更高层级的抽象，并完全兼容 Redux 生态。
+[Reduck](https://github.com/web-infra-dev/reduck) is a state management library developed by the Modern.js team that follows the MVC pattern. Its underlying state storage is based on [Redux](https://redux.js.org/) implementation, while providing a higher level of abstraction and full compatibility with the Redux ecosystem.
 
-Reduck 的目标是以 MVC 模式组织 React 应用开发结构，将业务逻辑维护在 Model 层，业务逻辑与 UI 解耦，让开发业务逻辑更集中、更简单，同时通过更高层级的抽象，减少重复工作（样板代码）。
+The goal of Reduck is to organize the development structure of React applications in the MVC pattern, maintain business logic in the Model layer, decoupling business logic from UI, making it easier for developers to focus on business logic, and reducing duplicated work (boilerplate code) through higher level of abstraction.
 
-Reduck 在 MVC 模式中，扮演 M(Model) 的角色，React UI Component 对应 V(View)，从 Reduck 中获取 Model 并修改 Model 的 React Container Component 对应 C(View Controller/Container)。
+In the MVC pattern, Reduck plays the role of M(Model), React UI Component corresponds to V(View), and gets the Model from Reduck and modifies the Model's React Container Component, which corresponds to C(View Controller/Container).
 
-Modern.js 的状态管理解决方案，是通过内置 Reduck 实现的。在 Modern.js 中使用 Reduck，不仅免去了手动集成的环节，而且所有 Reduck API 都可以从 Modern.js 的 Runtime 包中直接导入使用，具有更好的一致性体验。
+The state management solution of Modern.js is implemented through built-in Reduck. Using Reduck in Modern.js not only eliminates the manual integration process, but also allows all Reduck APIs to be imported and used directly from the Modern.js Runtime package, providing a better consistency experience.
 
 :::info
-1. Modern.js 中使用 Reduck API，需要先设置 [runtime.state](/configure/app/runtime/state) 以启用状态管理插件。
-2. Reduck 也可以脱离 Modern.js 作为状态管理库[单独使用](/guides/topic-detail/model/use-out-of-modernjs)。
+1. To use Reduck APIs in Modern.js, you need to set [runtime.state](/configure/app/runtime/state) to enable the state management plugin.
+2. Reduck can also be used separately as a state management library [outside of Modern.js](/guides/topic-detail/model/use-out-of-modernjs).
 
 :::
 
-## 核心概念
+## Core Concepts
 
-Reduck 中的核心概念只有 4 个： Model、State、Actions、Effects。
+There are only four core concepts in Reduck: Model, State, Actions, and Effects.
 
-Model: 对独立模块的逻辑和所需状态的封装，由 State、Actions、Effects 组成。
+Model: Encapsulates the logic and required state of an independent module, consisting of State, Actions, and Effects.
 
-State: Model 中保存的状态。
+State: The state stored in the Model.
 
-Actions: 用于修改 State 的纯函数，函数必须是**同步**的。
+Actions: Pure functions used to modify State, functions must be **Synchronous**.
 
-Effects: 用于修改 State 的带有副作用的函数，函数可以是**异步**的。Effects 中可以调用自身或其他 Model 的 Actions 和 Effects。
+Effects: Functions with side effects used to modify State, functions can be **Asynchronous**. Effects can call their own Actions and Effects or those of other Models.
 
-Reduck 数据流如下图所示：
+The Reduck data flow is shown in the following figure:
 
-![Reduck 数据流](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/reduck-concept.svg)
+![Reduck Data Flow](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/reduck-concept.svg)
 
-## 基本用法
+## Basic Usage
 
-下来我们以一个简单的 **计数器** 应用为例，演示 Reduck 的基本用法。
+Next, let's take a simple **Counter** application as an example to demonstrate the basic usage of Reduck.
 
-首先，我们定义一个名为 `count` 的 Model：
+First, we define a Model named `count`:
 
 ```js
 import { model } from '@modern-js/runtime/model';
@@ -56,9 +56,9 @@ const countModel = model('count').define({
 export default countModel;
 ```
 
-我们使用 API `model` 创建 `countModel`，`countModel` 当前只包含存储计数器值的状态，即代码中的 `value`。
+We use the API `model` to create `countModel`, which currently only contains the state that stores the counter `value`, that is, value in the code.
 
-我们定义一个 action，用于计算器自增加 1：
+We define an action to increase the counter by 1:
 
 ```js
 import { model } from '@modern-js/runtime/model';
@@ -77,11 +77,11 @@ const countModel = model('count').define({
 export default countModel;
 ```
 
-在 `add` action 中，我们可以直接修改 state 的值，进行加 1 操作，而不需要把 state 作为不可变对象进行操作，这是因为 Reduck 集成了 [immer](https://github.com/immerjs/immer)，可以直接修改原 state 对象。
+In the `add` action, we can directly modify the value of the state and perform the increment operation without treating the state as an immutable object. This is because Reduck integrates [immer](https://github.com/immerjs/immer), which can directly modify the original state object.
 
-接下来，我们演示如何在组件中使用 Model。
+Next, we will demonstrate how to use the Model in a component.
 
-新建一个组件 Counter，在组件内通过 `useModel` API 使用 `countModel`：
+Create a new component called `Counter`, and use the `countModel` via the `useModel` API inside the component:
 
 ```js
 import { useModel } from '@modern-js/runtime/model';
@@ -99,15 +99,16 @@ function Counter() {
 }
 ```
 
-`useModel` 获取 `countModel` 的 `state` 和 `actions`，组件展示当前计算器的值，点击 `add` 按钮，计数器自增 1。
+`useModel` gets the `state` and `actions` of `countModel`. The component displays the current value of the counter, and clicking the `add` button increments the counter by 1.
 
 :::info
-由于使用的案例比较简单，这里并没有严格按照 MVC 模式进行分层，组件 `Counter` 同时起到了 V 和 C 两层的作用。
+Due to the simplicity of the example used here, the layering of the MVC pattern is not strictly followed. The `Counter` component acts as both the V and C layers.
 
 :::
 
-最终演示效果如下：
+The final demonstration effect is as follows:
 
 ![countModel](https://lf3-static.bytednsdoc.com/obj/eden-cn/eueh7vhojuh/modern/simple-count-model.gif)
 
-这样，我们就完了一个简单的计数器应用。本节完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model)查看。
+That completes a simple counter application. You can view the complete example code for this section [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model).
+

package/en/guides/topic-detail/model/redux-integration.mdx

@@ -1,17 +1,18 @@
 ---
 sidebar_position: 11
-title: Redux 生态集成
+title: Ecosystem Integration
 ---
-# Redux 生态集成
+# Redux Ecosystem Integration
 
-Reduck 基于 Redux 实现，因此可以使用 Redux [生态的库](https://redux.js.org/introduction/ecosystem)，实现功能增强。通过 [`Provider`](/apis/app/runtime/model/Provider) 、[`createApp`](/apis/app/runtime/model/create-app) 和 [`createStore`](/apis/app/runtime/model/create-store) 等 API ，可以设置使用 Redux 的 [中间件](https://redux.js.org/understanding/thinking-in-redux/glossary#middleware) 和 [Store Enhancer](https://redux.js.org/understanding/thinking-in-redux/glossary#store-enhancer)；使用 [`createStore`](/apis/app/runtime/model/create-store) 还可以完全掌控 Store 的创建过程。
+Reduck is based on Redux, so you can use libraries from the [Redux ecosystem](https://redux.js.org/introduction/ecosystem) to enhance its functionality. APIs like [`Provider`](/apis/app/runtime/model/Provider), [`createApp`](/apis/app/runtime/model/create-app), and [`createStore`](/apis/app/runtime/model/create-store) allow you to configure the use of [middlewares](https://redux.js.org/understanding/thinking-in-redux/glossary#middleware) and [store enhancers](https://redux.js.org/understanding/thinking-in-redux/glossary#store-enhancer); and using [`createStore`](/apis/app/runtime/model/create-store), you can take complete control over the process of creating the store.
+
+For example, if we want to use the middleware [`redux-logger`](https://github.com/LogRocket/redux-logger), the example code is as follows:
 
-例如，我们希望使用中间件 [`redux-logger`](https://github.com/LogRocket/redux-logger)，示例代码如下：
 
 ```ts
 ReactDOM.render(
   <Provider config={{ middlewares: [logger] }}>
-    // 通过 Provider 的 config 参数设置 中间件
+    // Set middleware through the config parameter of Provider
     <App />
   </Provider>,
   document.getElementById('root'),
@@ -19,6 +20,5 @@ ReactDOM.render(
 ```
 
 :::caution
-Reduck 基于 Redux 底层 API 做了上层封装，屏蔽了 Redux 的一些底层概念，如 Reducer 等。Reduck 对于 Model 是动态挂载的，而 Redux 是在 Store 创建时就会挂载应用所需的全部状态。基于这些实现上的差异，有些 Redux 生态的库是无法直接在 Reduck 中使用的。
-
+Reduck is built on top of the lower-level Redux API, and abstracts away some of the underlying concepts of Redux, such as Reducers. Reduck allows models to be dynamically mounted, whereas Redux mounts all the necessary state at Store creation time. Due to these implementation differences, some libraries from the Redux ecosystem cannot be used directly in Reduck.
 :::

package/en/guides/topic-detail/model/test-model.mdx

@@ -1,21 +1,21 @@
 ---
 sidebar_position: 9
-title: 测试 Model
+title: Test Model
 ---
-# 测试 Model
+# Test Model
 
-好的测试对代码的稳健性至关重要。下面以 [快速上手](/guides/topic-detail/model/quick-start) 的 `countModel` 为例，演示在 Modern.js 中，如何对 Model 进行单元测试。
+Testing is crucial for the stability of code. Here's an example using the `countModel` from [Quick Start](/guides/topic-detail/model/quick-start) to demonstrate how to perform unit testing on a Model in Modern.js.
 
-使用测试功能，需要先开启该功能。在项目根目录下，执行 `pnpm run new`，进行如下选择：
+To use the testing feature, you need to first enable it. In the project root directory, execute `pnpm run new` and make the following selection:
 
 ```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「单元测试 / 集成测试」功能
+? Please select the operation you want to perform: Enable optional features
+? Enable optional features Enable "Unit Testing / Integration Testing" feature
 ```
 
-即可开启测试功能支持。
+This will enable testing feature support.
 
-新增 `count.test.ts` 文件，代码如下：
+Create a new file called `count.test.ts` with the following code:
 
 ```ts
 import { createStore } from '@modern-js/runtime/testing';
@@ -36,10 +36,10 @@ describe('test model', () => {
 ```
 
 :::info
-这里使用的 [`createStore`](/apis/app/runtime/model/create-store) 是从 `@modern-js/runtime/testing` 导入的，内部会使用 [`runtime.state`](/configure/app/runtime/state) 的配置去创建 `store`。
+The [`createStore`](/apis/app/runtime/model/create-store) used here is imported from `@modern-js/runtime/testing`, which internally uses the configuration of [`runtime.state`](/configure/app/runtime/state) to create a `store`.
 
 :::
 
-在测试用例里，我们新建一个 `store` 来挂载 `countModel`，通过 `store.use` 获取 `countModel` 的 State 和 Actions。然后调用 `add` Action 更新状态，并断言更新后的状态值。
+In the test case, we create a new `store` to mount `countModel`, use `store.use` to get the State and Actions of `countModel`. Then, we call the `add` Action to update the state and assert the updated state value.
 
-执行 `pnpm run test` 命令，触发测试用例的执行。
+Execute the `pnpm run test` command to trigger the execution of the test case.

package/en/guides/topic-detail/model/typescript-best-practice.mdx

@@ -1,16 +1,16 @@
 ---
 sidebar_position: 10
-title: TS 最佳实践
+title: TS Best Practices
 ---
-# TS 最佳实践
+# TS Best Practices
 
-Reduck 对 TS 提供了良好的支持，大部分使用场景下，无需任何额外工作，就可以直接获得 API 的 TS 类型提示。本节，将对其他的一些使用场景，做补充介绍。
+Reduck provides excellent support for TypeScript, and in most cases, you can get API type prompts directly without any extra work. In this section, we will provide additional information on other usage scenarios.
 
-## 定义 Model 的 State 类型
+## Defining the State Type of the Model
 
-为 Model 的 State 声明类型信息，是在 TS 中使用 Reduck 的最佳实践。
+Declaring type information for the State of a Model is a best practice when using Reduck in TypeScript.
 
-```ts title="示例"
+```ts
 interface State {
   data: string;
 }
@@ -30,13 +30,14 @@ export const foo = model<State>('foo').define({
 });
 ```
 
-当为 Model 的 State 声明类型信息后，Model 的 `computed`、`actions` 都能获取正确的类型信息。事实上，上面的示例代码中，即使我们不定义 State 类型信息，也会根据 `state` 的初始值信息自动推导出 State 的类型信息。不过，仍然建议你在定义 Model 时，声明 State 的类型信息，因为根据 `state` 的初始值信息推导出的 State 类型信息可能不完整(缺少字段或字段的类型信息缺少)，而且当使用[函数类型](/apis/app/runtime/model/model_#函数类型)定义 Model 时，State 的类型信息也是无法根据 `state` 的初始值信息自动推导的。
+When you declare type information for the State of a Model, the `computed` and `actions` of the Model can get the correct type information. In fact, even if we don't define State type information in the example code above, the type information of State can be automatically inferred based on the initial value information of `state`. However, we still recommend that you declare the type information of State when defining a Model because the type information of State inferred based on the initial value information of `state` may be incomplete (missing fields or field type information), and the type information of State cannot be automatically inferred based on the initial value information of `state` when using [Function Type](/apis/app/runtime/model/model_#函数类型) to define the Model.
 
-## 衍生状态的依赖类型
+## Dependent types of Derived State
 
-当 Model 的衍生状态依赖其他 Model 时，需要手动指定其他 Model 的 State。
+When the derived state of a Model depends on other Models, you need to manually specify the State of the other Models.
 
-```ts title="示例"
+
+```ts
 interface State {
   data: string;
 }
@@ -52,14 +53,14 @@ export const bar = model<State>('bar').define({
 });
 ```
 
-## 获取 Model 类型信息的 Hooks
+## Hooks for Getting Model Type Information
 
-Reduck 提供了一组用于获取 Model 类型信息的工具类型：
+Reduck provides a set of utility types for getting Model type information:
 
-- `GetModelState`： 获取 Model 的 State（包含衍生状态）类型信息。
-- `GetModelActions`：获取 Model 的 Actions（包含 Effects 函数）类型信息。
+- `GetModelState`: Get the type information of the State (including derived state) of the Model.
+- `GetModelActions`: Get the type information of the Actions (including Effects functions) of the Model.
 
-```ts title="示例"
+```ts
 export const foo = model<State2>('foo').define({
   // 省略
 });

package/en/guides/topic-detail/model/use-model.mdx

@@ -1,18 +1,18 @@
 ---
 sidebar_position: 3
-title: 使用 Model
+title: Use Models
 ---
-# 使用 Model
+# Use Models
 
-## 在组件内使用
+## Using Models in Components
 
-### 作为全局状态使用
+### Using as Global State
 
-通过 `useModel` 可以获取 Model 的 State、Actions 等。当 Model 的 State 通过 Actions 进行修改后，任何其他使用了该 Model 的组件，都会自动重新渲染。
+`useModel` can be used to obtain the State, Actions, and other information of the Model. When the State of the Model is modified by Actions, any other components that use the Model will automatically re-render.
 
-在 [快速上手](/guides/topic-detail/model/quick-start) 的计数器案例中，我们已经演示了 `useModel` 的使用，不再重复。
+In the counter example in [Quick Start](/guides/topic-detail/model/quick-start), we have demonstrated the use of `useModel` and will not repeat it here.
 
-`useModel` 支持传入多个 Model，多个 Model 的 State 和 Actions 会进行合并后作为返回结果。例如：
+`useModel` supports passing multiple Models, and the State and Actions of multiple Models will be merged and returned as the result. For example:
 
 ```ts
 const fooModel = model('foo').define({
@@ -42,7 +42,7 @@ const [state, actions] = useModel([fooModel, barModel]);
 const [state, actions] = useModel(fooModel, barModel);
 ```
 
-`state` 和 `actions` 的值分别为：
+`state` and `actions` value are:
 
 ```ts
 state = {
@@ -60,7 +60,7 @@ actions = {
 };
 ```
 
-`useModel` 还支持对 State 和 Actions 做 selector 操作，实现对 State 和 Actions 的筛选或重命名，例如：
+`useModel` also supports selector operations on State and Actions to filter or rename State and Actions. For example:
 
 ```ts
 const fooModel = model('foo').define({
@@ -95,9 +95,9 @@ const [state, actions] = useModel(
 );
 ```
 
-我们通过 `stateSelector` ，把 `fooModel` 和 `barModel` 中重名的状态做了命名修改，通过 `actionsSelector` ，过滤掉了 `barModel` 的 Actions。
+We use `stateSelector` to rename the states with the same name in `fooModel` and `barModel`. We use `actionsSelector` to filter out the Actions of `barModel`.
 
-如果只需要设置 `actionsSelector`，可以把 `stateSelector` 设置为 `undefined`，作为参数占位。例如：
+If only `actionsSelector` needs to be set, you can set `stateSelector` to `undefined` as a placeholder. For example:
 
 ```ts
 const [state, actions] = useModel(
@@ -107,22 +107,21 @@ const [state, actions] = useModel(
 );
 ```
 
-### 作为静态状态使用
+### Using as Static State
 
-通过 `useStaticModel` 获取 Model ，将 Model 中的状态作为静态状态使用。可以保证组件每次访问到的 Model 的 State 都是最新值，但是 Model 的 State 的变化，并不会引起当前组件的重新渲染。
+`useStaticModel` can be used to obtain the Model and use the state of the Model as a static state. This ensures that the State accessed by the component is always the latest value, but the change of the Model's State does not cause the current component to re-render.
 
 :::info
-`useStaticModel` 的使用方式和 `useModel` 完全一致。
-
+The usage of `useStaticModel` is exactly the same as `useModel`.
 :::
 
-考虑下面一种场景，有一个组件 Input 负责用户输入，另外一个组件 Search 负责根据用户的输入信息，在点击查询按钮后执行查询操作，我们不希望用户输入过程中的状态变化引起 Search 重新渲染，这时候就可以使用 `useStaticModel`：
+Consider the following scenario: there is an Input component responsible for user input, and another Search component responsible for executing a search operation after the user input information is entered and the search button is clicked. We do not want the state changes during the user input process to cause Search to re-render. In this case, `useStaticModel` can be used:
 
 ```ts
 import { useStaticModel } from '@modern-js/runtime/model';
 
 function Search() {
-  // 这里注意不要解构 state
+  // should not be destructured
   const [state] = useStaticModel(searchModel);
 
   return (
@@ -140,41 +139,40 @@ function Search() {
 }
 ```
 
-:::warning 注意
-不要解构 `useStaticModel` 返回的 `state`，例如改成如下写法：
+:::warning Caution
+Do not destructure the `state` returned by `useStaticModel`. For example, changing it to the following code:
 `const [{input}] = useStaticModel(searchModel);`
-将始终获取到 Input 的初始值。
+will always get the initial value of Input.
 
 :::
 
-`useStaticModel` 还适合和 [react-three-fiber](https://github.com/pmndrs/react-three-fiber) 等动画库一起使用，因为在动画组件 UI 里绑定会快速变化的状态，容易引起[性能问题](https:/docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never-bind-fast-state-reactive)。这种情况就可以选择使用 `useStaticModel`，它只会订阅状态，但不会引起视图组件的重新渲染。下面是一个简化示例：
+`useStaticModel` is also suitable for use with animation libraries such as [react-three-fiber](https://github.com/pmndrs/react-three-fiber), because binding fast-changing states in animation component UI can easily cause [performance issues](https:/docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never-bind-fast-state-reactive). In this case, you can choose to use `useStaticModel`, which only subscribes to the State but does not cause the view component to re-render. Here is a simplified example:
 
 ```ts
 function ThreeComponent() {
   const [state, actions] = useStaticModel(modelA);
 
   useFrame(() => {
-    state.value; // 假设初始化为 0
+    state.value;
     actions.setValue(1);
-    state.value; // 这里会得到1
+    state.value;
   });
 }
 ```
 
-使用 React 的 refs 也可以实现类似效果，其实 `useStaticModel` 内部也使用到了 refs。不过直接 `useStaticModel` 有助于将状态的管理逻辑从组件中解耦，统一收敛到 Model 层。
+Using React's refs can also achieve similar effects. In fact, `useStaticModel` also uses refs internally. However, using `useStaticModel` directly helps decouple the state management logic from the component and converge it into the Model layer.
 
-完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/static-model)查看。
+The complete sample code can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/static-model).
 
-### 作为局部状态使用
+### Using as Local State
 
-通过 `useLocalModel` 获取 Model ，将 Model 中的状态作为局部状态使用。此时 Model State 的变化，只会引起当前组件的重新渲染，但是不会引起其他使用了该 Model 的组件重新渲染。效果和通过 React 的 `useState` 管理状态类似，但是可以将状态的管理逻辑从组件中解耦，统一收敛到 Model 层。
+`useLocalModel` can be used to obtain the Model and use the state of the Model as local state. At this time, the change of the Model State only causes the current component to re-render, but does not cause other components that use the Model to re-render. The effect is similar to managing state through `useState` in React, but it can decouple the state management logic from the component and converge it into the Model layer.
 
 :::info
-`useLocalModel` 的使用方式和 `useModel` 完全一致。
-
+The usage of `useLocalModel` is exactly the same as `useModel`.
 :::
 
-例如，我们修改计数器应用的代码，添加一个有局部状态的计数器组件 `LocalCounter`：
+For example, we modify the code of the counter application and add a counter component `LocalCounter` with local state:
 
 ```ts
 import { useLocalModel } from '@modern-js/runtime/model';
@@ -191,20 +189,20 @@ function LocalCounter() {
 }
 ```
 
-分别点击 `Counter` 和 `LocalCounter` 的 `add` 按钮，两者的状态互不影响：
+Click the `add` button of `Counter` and `LocalCounter` respectively, and the states of the two do not affect each other:
 
 ![local-model](https://lf3-static.bytednsdoc.com/obj/eden-cn/eueh7vhojuh/modern/local-model.gif)
 
-完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/local-model)查看。
+The complete sample code can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/local-model).
 
-## 在组件外使用
+## Using outside of components
 
-在实际业务场景中，有时候我们需要在 React 组件外使用 Model，例如在工具函数中访问 State、执行 Actions 等。这个时候，我们就需要使用 Store。 Store 是一个底层概念，一般情况下用户接触不到，它负责存储和管理整个应用的状态。Reduck 的 Store 基于 [Redux 的 Store](https://redux.js.org/api/store) 实现，增加了 Reduck 特有的 API，如 `use` 。
+In actual business scenarios, sometimes we need to use Model outside of React components, such as accessing State and executing Actions in utility functions. At this time, we need to use the Store. The Store is a low-level concept that users generally cannot touch. It is responsible for storing and managing the entire application's state. Reduck's Store is based on Redux's Store implementation and adds Reduck-specific APIs, such as `use`.
 
-首先，在组件内调用 `useStore` 获取当前应用使用的 `store` 对象，并挂载到组件外的变量上：
+First, call `useStore` in the component to obtain the `store` object used by the current application and mount it to a variable outside the component:
 
 ```ts
-let store; // 组件外部 `store` 对象的引用
+let store; // Reference to `store` object outside of the component
 function setStore(s) {
   store = s;
 }
@@ -215,7 +213,7 @@ function getStore() {
 function Counter() {
   const [state] = useModel(countModel);
   const store = useStore();
-  // 通过 useMemo 避免不必要的重复设置
+  // Avoid unnecessary duplicate settings through `useMemo`
   useMemo(() => {
     setStore(store);
   }, [store]);
@@ -228,8 +226,7 @@ function Counter() {
 }
 ```
 
-通过 `store.use` 可以获取 Model 对象，`store.use` 的用法同 `useModel` 相同。以计数器应用为例，我们在组件树外，每 1s 对计数器值
-执行自增操作：
+You can obtain the Model object through `store.use`, and the usage of `store.use` is the same as `useModel`. Taking the counter application as an example, we perform an increment operation on the counter value every 1 second outside the component tree:
 
 ```ts
 setInterval(() => {
@@ -239,14 +236,12 @@ setInterval(() => {
 }, 1000);
 ```
 
-完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model-outof-react)查看。
+The complete sample code can be found [here](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model-outof-react).
 
 :::info
-如果是通过 [`createStore`](/apis/app/runtime/model/create-store) 手动创建的 Store 对象，无需通过 `useStore` 在组件内获取，即可直接使用。
-
+If the Store object is manually created through [`createStore`](/apis/app/runtime/model/create-store), there is no need to obtain it through `useStore` in the component, and it can be used directly.
 :::
 
-:::info 补充信息
-本节涉及的 API 的详细定义，请参考[这里](/apis/app/runtime/model/model_)。
-
+:::info Additional Information
+For detailed API definitions related to this section, please refer to [here](/apis/app/runtime/model/model_).
 :::

package/en/guides/topic-detail/model/use-out-of-modernjs.mdx

@@ -1,47 +1,47 @@
 ---
 sidebar_position: 12
-title: 单独使用 Reduck
+title: Using Reduck Separately
 ---
-# 单独使用 Reduck
+# Using Reduck Separately
 
-在 Modern.js 以外，单独集成 Reduck 使用时，主要需要做以下修改：
+When integrating Reduck separately from Modern.js, the following modifications need to be made:
 
-1. 安装 Reduck 相关包
+1. Install the Reduck related packages
 
-在项目中安装 Reduck 包：`@modern-js-reduck/react`。
+Install the Reduck package in the project: `@modern-js-reduck/react`.
 
-2. API 导入包名
+2. Import package names for API
 
-在 Modern.js 中使用时，Reduck 导出 API 的包名为：`@modern-js/runtime/model`。单独使用 Reduck 时，导出包名为：`@modern-js-reduck/react`。
+When used in Modern.js, the package name for exporting Reduck API is: `@modern-js/runtime/model`. When using Reduck separately, the package name for exporting is: `@modern-js-reduck/react`.
 
-3. 包裹 `Provider` 组件
+3. Wrap the `Provider` component
 
-Modern.js 自动在应用的入口组件上，包裹了用于注入 Reduck 全局 Store 的 [`Provider`](/apis/app/runtime/model/Provider) 组件。单独使用 Reduck 时，需要手动完成。
+Modern.js automatically wraps the [`Provider`](/apis/app/runtime/model/Provider) component used to inject the Reduck global Store on the entry component of the application. When using Reduck separately, this needs to be done manually.
 
-示例：
+Example:
 
 ```tsx
-// 根组件
+// Root Component
 const Root = () => {
   return (
     <Provider>
-      {/* 应用入口组件 */}
+      {/* Entry App */}
       <App />
     </Provider>
   );
 };
 ```
 
-4. 功能配置
+4. Feature configuration
 
-在 Modern.js 中使用时，可以通过 [`runtime.state`](/configure/app/runtime/state) 对 Reduck 功能进行配置。单独使用时，需要通过 [`Provider`](/apis/app/runtime/model/Provider) 的 `config` 或 `store` 参数配置。
+When used in Modern.js, Reduck features can be configured through [`runtime.state`](/configure/app/runtime/state). When used separately, configuration needs to be done through the `config` or `store` parameter of [`Provider`](/apis/app/runtime/model/Provider).
 
-示例：
+Example:
 
 ```tsx
 const Root = () => {
   return (
-    {/* 关闭 Redux DevTools */}
+    {/* Close Redux DevTools */}
     <Provider config={{ devTools: false }}>
       <App />
     </Provider>

package/en/guides/troubleshooting/cli.mdx

@@ -58,6 +58,6 @@ In the above example the parameter `--option` is passed to `modern command`. If
 
 Summary:
 
-** When using pnpm v7, if you pass arguments to pnpm, you need to put the arguments before the command **
+**When using pnpm v7, if you pass arguments to pnpm, you need to put the arguments before the command**
 
-** When using pnpm v6, if the parameter passed to pnpm, you do not need to add `--`; if the parameter passed is for script use, you need to add `--` character string **.
+**When using pnpm v6, if the parameter passed to pnpm, you do not need to add `--`; if the parameter passed is for script use, you need to add `--` character string**.

package/en/tutorials/first-app/c03-css.mdx

@@ -293,7 +293,7 @@ A Utility Class named `custom-text-gray` is implemented in `src/routes/styles/ut
 ```
 
 :::info note
-Modern.js integrates with [PostCSS](/guides/css/postcss) and supports modern CSS syntax features such as [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
+Modern.js integrates with [PostCSS](/guides/basic-features/css) and supports modern CSS syntax features such as [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
 
 :::
 

package/package.json

@@ -2,8 +2,8 @@
   "name": "@modern-js/main-doc",
   "description": "Shared documentation of modern.js framework",
   "homepage": "https://modernjs.dev",
-  "bugs": "https://github.com/modern-js-dev/modern.js/issues",
-  "repository": "modern-js-dev/modern.js",
+  "bugs": "https://github.com/web-infra-dev/modern.js/issues",
+  "repository": "web-infra-dev/modern.js",
   "license": "MIT",
   "keywords": [
     "react",
@@ -11,13 +11,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.6.0",
+  "version": "2.8.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.6.0"
+    "@modern-js/builder-doc": "^2.8.0"
   },
   "devDependencies": {
     "ts-node": "^10",
@@ -25,7 +25,7 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.6.0"
+    "@modern-js/builder-doc": "2.8.0"
   },
   "scripts": {
     "build": "npx ts-node ./scripts/sync.ts"

package/zh/apis/app/commands.mdx

@@ -20,6 +20,7 @@ Options:
   -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
   -h, --help            显示命令帮助
   --analyze             分析构建产物体积，查看各个模块打包后的大小
+  --web-only            仅启动 Web 服务
   --api-only            仅启动 API 接口服务
 ```
 
@@ -161,6 +162,7 @@ Usage: modern serve [options]
 Options:
   -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
   -h, --help            显示命令帮助
+  --web-only            仅启动 Web 服务
   --api-only            仅启动 API 接口服务
 ```