@modern-js/main-doc 0.0.0-next-1678243962105 → 0.0.0-next-1678284408052

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

@@ -1,29 +1,29 @@
 ---
-title: 插件之间的关系
+title: Relationship
 sidebar_position: 4
 ---
-# 插件之间的关系
+# Relationship between Plugins
 
-Modern.js 的插件配置对象提供了一系列的字段，用于控制插件顺序、互斥等能力，可用的字段如下：
+The plugin configuration object in Modern.js provides a series of fields to control plugin order, mutual exclusion, and other capabilities. The available fields are as follows:
 
-- `name`: `string`，设置当前插件的名称。
-- `pre`: `string[]`，这些插件最终会调整到当前插件前面。
-- `post`: `string[]`，这些插件最终会调整到当前插件后面。
-- `rivals`: `string[]`，互斥插件，遇到这些插件时会报错。
-- `required`: `string[]`，必需插件，插件列表中没有对应的插件时会报错。
-- `usePlugin`: `CliPlugin[]`，注册其他插件。
+- `name`: `string`, sets the name of the current plugin.
+- `pre`: `string[]`, these plugins will be adjusted to be executed before the current plugin.
+- `post`: `string[]`, these plugins will be adjusted to be executed after the current plugin.
+- `rivals`: `string[]`, mutually exclusive plugins, an error will be thrown when encountering these plugins.
+- `required`: `string[]`, required plugins, an error will be thrown when the corresponding plugin is not found in the plugin list.
+- `usePlugin`: `CliPlugin[]`, registers other plugins.
 
-通过以上参数可以实现插件的前置、后置、互斥、必需等逻辑。
+The above parameters can be used to achieve plugin front, back, mutual exclusion, and mandatory logic.
 
-## 插件排序
+## Plugin Sorting
 
-Modern.js 的插件通过 `pre`、`post` 参数来实现了插件排序的功能。
+Modern.js plugins achieve plugin sorting functionality through the `pre` and `post` parameters.
 
-### 前置插件
+### Pre
 
-默认情况下，插件会按照添加顺序依次执行，通过 `pre` 字段可以声明前置执行的插件。
+By default, plugins are executed in the order they are added. You can declare preceding plugins to be executed by using the `pre` field.
 
-比如有下面两个插件：
+For example, there are the following two plugins:
 
 ```ts title=foo.ts
 const foo = {
@@ -38,11 +38,11 @@ const bar = {
 };
 ```
 
-`bar` 插件在 `pre` 字段中配置了 `foo` 插件，因此 `foo` 插件一定会在 `bar` 插件之前执行。
+The `bar` plugin configures the `foo` plugin in the `pre` field, so the'foo' plugin must be executed before the `bar` plugin.
 
-### 后置插件
+### Post
 
-同样的，通过 `post` 字段可以声明后置执行的插件。
+Declare succeeding plugins to be executed by using the `post` field.
 
 ```ts title=foo.ts
 const foo = {
@@ -57,13 +57,13 @@ const bar = {
 };
 ```
 
-`bar` 插件在 `post` 字段中配置了 `foo` 插件，因此 `foo` 插件一定会在 `bar` 插件之后执行。
+If you use the `post` parameter in the `bar` plugin's configuration and set it to `['foo']`, then the `foo` plugin will be executed after the `bar` plugin.
 
-## 互斥插件
+## rivals
 
-通过 `rivals` 字段可以声明插件间的互斥关系。
+The rivals field can be used to declare a mutual exclusion relationship between plugins.
 
-有下面两个插件：
+there are two plugin：
 
 ```ts title=foo.ts
 const foo = {
@@ -78,13 +78,13 @@ const bar = {
 };
 ```
 
-`bar` 插件在 `rivals` 字段中配置了 `foo` 插件，因此同时添加了 `foo` 插件和 `bar` 插件就会报错。
+The `bar` plugin has been configured with the `foo` plugin in the `rivals` field, therefore an error will be thrown if both the `foo` and `bar` plugins are added simultaneously.
 
-## 必需插件
+## required
 
-通过 `required` 字段可以声明插件间的依赖关系。
+The `required` field can be used to declare a dependency relationship between plugins.
 
-有下面两个插件：
+there are two plugin：
 
 ```ts title=foo.ts
 const foo = {
@@ -99,11 +99,11 @@ const bar = {
 };
 ```
 
-`bar` 插件在 `required` 字段中配置了 `foo` 插件，因此使用 `bar` 插件时，如果未配置 `foo` 插件就会报错。
+The `bar` plugin has been configured with the `foo` plugin in the `required` field. Therefore, an error will be thrown when using the `bar` plugin if the `foo` plugin is not configured.
 
-## 注册插件
+## Register Plugin
 
-当插件之间存在依赖关系时，我们也可以在一个插件中通过 `usePlugin` 主动注册另一个插件：
+When there is a dependency relationship between plugins, we can also actively register another plugin in a plugin by using `usePlugin`.
 
 ```ts title=foo.ts
 const foo = () => ({
@@ -116,4 +116,4 @@ const bar = () => ({
 });
 ```
 
-当使用者配置了 `bar` 插件时，`foo` 插件也会自动注册生效，使用者就不需要去额外注册 `foo` 插件了。
+When the user configures the `bar` plugin, the foo plugin will also be automatically registered and activated. The user does not need to register the `foo` plugin separately.

package/en/guides/topic-detail/micro-frontend/c01-introduction.mdx

@@ -1,29 +1,29 @@
 ---
 sidebar_position: 1
-title: 微前端介绍
+title: Introduction
 ---
-# 微前端介绍
+# Introduction
 
-微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。
+Micro frontend is an architecture similar to microservices. It is an architectural style composed of multiple front-end applications delivered independently. It decomposes the front-end application into some smaller and simpler applications that can be independently developed, tested and deployed., while still a cohesive single product in the eyes of users.
 
-它主要解决了两个问题：
+It mainly solves two problems:
 
-- 随着项目迭代应用越来越庞大，难以维护。
-- 跨团队或跨部门协作开发项目导致效率低下的问题。
+- As the iterative application of the project becomes larger and more difficult to maintain.
+- Collaborative development of projects across teams or departments leads to inefficiencies.
 
-## 微前端关键词
+## Keyword
 
-在微前端研发模式中，应用会被分成 **主应用**、和 **子应用**。
+In the micro frontend, applications are divided into **main application**, and **sub-applications**.
 
-- 主应用：微前端项目的基座工程，所有子应用都会由它来加载。
-- 子应用：独立开发、独立部署的应用，最终会被主应用加载。
+- Main application: The base project of the micro frontend project, all sub-applications will be loaded by it.
+- Sub-application: An application developed and deployed independently will eventually be loaded by the main application.
 
-## 功能简介
+## Features
 
-- 基于 [Garfish](https://www.garfishjs.org/guide)
-- 生成器支持微前端应用
-- 支持 React 组件式引用微前端子应用
-- 支持 loading
-- 支持主应用线上、子应用线下调试模式
+- Base on [Garfish](https://www.garfishjs.org/guide)
+- Generator supports
+- Support React component-based reference micro-front-end sub-application
+- Support loading
+- Support main application online and sub-application offline debugging mode
 
-可以在 [体验微前端](/guides/topic-detail/micro-frontend/c02-development) 一节学习如何开发微前端主子应用。
+You can learn how to develop a micro frontend master app in the section [Experience micro frontend](/guides/topic-detail/micro-frontend/c02-development).

package/en/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -1,56 +1,56 @@
 ---
 sidebar_position: 2
-title: 体验微前端
+title: development
 ---
-# 体验微前端
 
-通过本章你可以了解到：
+# Experience Micro Frontend
 
-- 如何创建微前端项目的主应用、子应用。
-- 微前端项目开发的基本流程。
+Through this chapter you can learn:
 
-## 创建应用
-目前支持两种路由模式
-- 自控式路由
-- 约定式路由
+- How to create the main application and sub-application of the micro frontend project.
+- Basic process of micro frontend project development.
 
-首先明确主应用的路由模式 [创建约定式路由主应用](#创建约定式路由主应用) 或 [创建自控式路由主应用](#创建自控式路由主应用)
+## Create an app
 
-在本次体验中我们会为主应用创建两个子应用 Table 和 Dashboard (Table 为约定式路由，Dashboard 为自控式路由)
+Currently supports two routing modes
+- Self-controlled routing
+- Conventional routing
 
-### 创建约定式路由主应用
+First, clarify the routing mode of the main application [create a conventional routing main application](#创建约定式路由主应用) or [create a self-controlled routing main application](#创建自控式路由主应用)
 
-通过命令行工具初始化项目：
+In this experience we will create two sub-applications Table and Dashboard for the main application (Table is reduced routing, Dashboard is self-controlled routing)
+
+
+### File-based Routing Main App
+
+Initialize the project with a command line:
 
 ```bash
 mkdir masterApp && cd masterApp
 npx @modern-js/create
 ```
 
-import DefaultMWAGenerate from "@site-docs/components/default-mwa-generate";
-
-<DefaultMWAGenerate />
-
-完成项目创建后我们可以通过 `pnpm run new` 来开启 `微前端` 功能：
+After the project is created, we can enable the `micro frontend` through `pnpm run new`:
 
 ```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「微前端」模式
+? Action Enable features
+? Enable features Enable Micro Front-end Feature
 ```
 
-接下来，让我们注册微前端插件并添加开启微前端主应用，并增加子应用列表：
+Next, let's register the micro frontend plugin and add the main micro frontend app and add the list of sub-apps:
 
 import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
 
 <EnableMicroFrontend />
 
-然后我们在 routes 文件夹下新建两个目录
-- table (用于加载约定式路由子应用)
-- dashboard (用于加载自控式路由子应用)
+Then we create two new directories in the routes folder
+- table (for loading conventional routing sub-applications)
+- dashboard (for loading self-controlled routing sub-applications)
 
-在这两个目录下我们需要新建一个 `$.tsx` 文件作为主应用约定式路由的入口($ 代表模糊匹配，即 `/table` 和 `/table/test` 都会匹配到这个 `$.tsx` 作为该路由的入口文件，这会保证在微前端场景下正确加载子应用路由)
+In these two directories, we need to create a `$.tsx` file as the entry of the main application convention route ($represents fuzzy match, that is, `/table` and `/table/test` will match this `$.tsx` as the entry file of the route, which will ensure that the sub-application route is loaded correctly in the micro frontend scenario)
+
+#### Load file-base routing sub-app
 
-#### 加载约定式路由子应用
 ```js title="src/routes/table/$.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 
@@ -67,7 +67,8 @@ const Index = () => {
 export default Index;
 ```
 
-#### 加载自控式路由子应用
+#### Load self-controlled routing sub-app
+
 ```js title="src/routes/dashboard/$.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 
@@ -83,16 +84,18 @@ const Index = () => {
 
 export default Index;
 ```
-#### 路由跳转
-此时主应用配置已经完成，通过路由即可加载子应用，修改主应用的 `layout.tsx` 来跳转路由
+#### route link
+
+At this time, the main application configuration has been completed, and the sub-application can be loaded through the route, and the `layout.tsx` of the main application can be modified to jump to the route:
+
 ```js title="src/route/layout.tsx"
 import { Outlet, Link } from '@modern-js/runtime/router';
 
 const Layout = () => (
   <div>
-    <div><Link to={'/table'}>加载约定式路由子应用</Link></div>
-    <div><Link to={'/dashboard'}>加载自控式路由子应用</Link></div>
-    <div><Link to={'/'}>卸载子应用</Link></div>
+    <div><Link to={'/table'}>Load file-base routing sub-app</Link></div>
+    <div><Link to={'/dashboard'}>Load self-controlled routing sub-app</Link></div>
+    <div><Link to={'/'}>unmount sub-app</Link></div>
     <Outlet />
   </div>
 );
@@ -100,55 +103,51 @@ const Layout = () => (
 export default Layout;
 ```
 
-### 创建自控式路由主应用
+### Self-Controlled Main App
 
-通过命令行工具初始化项目：
+Initialize the project with a command line:
 
 ```bash
 mkdir masterApp && cd masterApp
 npx @modern-js/create
 ```
 
-<DefaultMWAGenerate />
-
-完成项目创建后我们可以通过 `pnpm run new` 来开启 `微前端` 功能：
+After the project is created, we can enable the `micro frontend` function through `pnpm run new`:
 
 ```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「微前端」模式
+? Action Enable features
+? Enable features Enable Micro Front-end Feature
 ```
 
-接下来，让我们注册微前端插件并添加开启微前端主应用，并增加子应用列表：
+Next, let's register the micro frontend plugin and add the main micro frontend app and add the list of sub-apps:
 
 <EnableMicroFrontend />
 
-由于是自控式路由，我们删除掉 `routes` 文件夹并在 `src` 目录下增加 `App.tsx` 文件，此处如果使用的 `非 MApp` 组件，需要通过 `React Router v6` 的 `createBrowserRouter` API 来创建路由
-#### 加载子应用
+Since it is a self-controlled route, we delete the `routes/` folder and add the `App.tsx` file in the `src/` directory. If you use a `non-MApp` component here, you need to use the `createBrowserRouter` API of '=React Router v6 to create routes.
+
+#### Load sub-app
+
 import CustomRouterMicroFrontend from "@site-docs/components/custom-router-micro-frontend";
 
 <CustomRouterMicroFrontend />
 
-### 创建约定式路由子应用
+### File-based sub-app
 
-通过命令行工具初始化项目：
+Initialize the project with a command line:
 
 ```bash
 mkdir table && cd table
 npx @modern-js/create
 ```
 
-按照如下选择，生成项目：
-
-<DefaultMWAGenerate/>
-
-我们执行 `pnpm run new` 来开启 `微前端` 功能：
+After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:
 
 ```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「微前端」模式
+? Action Enable features
+? Enable features Enable Micro Front-end Feature
 ```
 
-接下来，让我们注册微前端插件并修改 `modern.config.ts`，添加微前端子应用的配置 `deploy.microFrontend`：
+Next, let's register the micro frontend plugin and modify `modern.config.ts` to add the configuration of the micro frontend sub-app `deploy.microFrontend`:
 
 ```js title="modern.config.ts"
 import appTools, { defineConfig } from '@modern-js/app-tools';
@@ -169,38 +168,35 @@ export default defineConfig({
 });
 ```
 
-添加 `src/routes/page.tsx` 代码
+add `src/routes/page.tsx`:
+
 ```js title="src/routes/page.tsx"
 const Index = () => {
   return (
-    <div className="container-box">subApp: 约定式路由的子应用的根路由</div>
+    <div className="container-box">subApp</div>
   )
 }
 
 export default Index;
 ```
 
-### 创建自控式路由子应用
+### Self-controlled sub-app
 
-通过命令行工具初始化项目：
+Initialize the project with a command line:
 
 ```bash
-mkdir dashboard && cd dashboard
+mkdir table && cd table
 npx @modern-js/create
 ```
 
-按照如下选择，生成项目：
-
-<DefaultMWAGenerate/>
-
-我们执行 `pnpm run new` 来开启 `微前端`：
+After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:
 
 ```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「微前端」模式
+? Action Enable features
+? Enable features Enable Micro Front-end Feature
 ```
 
-接下来，让我们注册微前端插件并修改 `modern.config.ts`，添加微前端子应用的配置 `deploy.microFrontend`：
+Next, let's register the micro frontend plugin and modify `modern.config.ts` to add the configuration of the micro frontend sub-app `deploy.microFrontend`:
 
 ```js title="modern.config.ts"
 import appTools, { defineConfig } from '@modern-js/app-tools';
@@ -220,9 +216,10 @@ export default defineConfig({
   plugins: [appTools(), garfishPlugin()],
 });
 ```
-自控式路由需要删除掉 `routes` 文件夹并在 `src` 目录下新建 `App.tsx`
 
-并在 `src/App.tsx` 添加代码，注意需要从 `props` 中解析并传递 `basename` 给 `BrowserRouter`
+Self-controlled routing needs to delete the `routes/` folder and create a new `App.tsx` in the `src/` directory.
+
+And add code in `src/App.tsx`, note that you need to parse from `props` and pass `basename` to `BrowserRouter`.
 
 ```js title="src/App.tsx"
 import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
@@ -233,24 +230,25 @@ export default (props: {basename: string}) => {
   return (
     <BrowserRouter basename={basename}>
       <Routes>
-        <Route index element={<div>自控式路由子应用根路由</div>} />
-        <Route path={'path'} element={<div>自控式路由子应用子路由</div>} />
+        <Route index element={<div>Self-controlled route root</div>} />
+        <Route path={'path'} element={<div>Self-controlled sub route</div>} />
       </Routes>
     </BrowserRouter>
   );
 };
 ```
 
-## 调试
-按顺序在目录执行 `pnpm run dev` 命令启动应用：
-- masterApp 主应用 `http://localhost:8080`
-- table 子应用(约定式路由) `http://localhost:8081`
-- dashboard 子应用(自控式路由) `http://localhost:8082`
+## Debug
+
+Start the application by executing the `pnpm run dev` command in the directory in sequence:
+- masterApp `http://localhost:8080`
+- table subapplication (conventional routing) `http://localhost:8081`
+- dashboard subapplication (self-controlled routing) `http://localhost:8082`
 
-访问主应用地址 `http://localhost:8080`
+Access the main application address `http://localhost:8080`
 
-在完成了微前端整体开发流程的体验后，你可以进一步了解如何 [开发主应用](/guides/topic-detail/micro-frontend/c03-main-app)
+After completing the experience of the overall development process of micro frontend, you can learn more about how to [develop the main application](/guides/topic-detail/micro-frontend/c03-main-app).
 
-## 常见问题
+## FAQ
 
-自查手册: https://www.garfishjs.org/issues/
+Garfish issue: https://www.garfishjs.org/issues/