@modern-js/main-doc 0.0.0-nightly-20230917160555 → 0.0.0-nightly-20230918160602

package/docs/en/apis/app/commands.mdx

@@ -42,7 +42,7 @@ In multi-page (MPA) projects, the `--entry` option can be added to specify one o
 
 For example, execute `modern dev --entry`, the entry selector will be displayed in the command line interface:
 
-```bash
+```text
 $ modern dev --entry
 
 ? Please select the entry that needs to be built
@@ -86,7 +86,7 @@ Options:
 
 execute `npx modern build --analyze` command, can produce an HTML file that analyzes the volume of the bundle while packaging the production code:
 
-```
+```text
 Bundle Analyzer saved report to /example/dist/report.html
 File sizes after production build:
 
@@ -125,7 +125,7 @@ Options:
 
 In the project, execute the `new` command to add entries as follows:
 
-```bash
+```text
 $ npx modern new
 ? Please select the operation you want: Create Element
 ? Please select the type of element to create: New "entry"
@@ -136,7 +136,7 @@ $ npx modern new
 
 In the project, execute the `new` command to enable features as follows:
 
-```bash
+```text
 $ npx modern new
 ? Please select the operation you want: Enable Features
 ? Please select the feature name: (Use arrow keys)
@@ -156,7 +156,7 @@ pnpm does not support the use of JSON strings as parameter values currently. Use
 
 ## modern serve
 
-Usually use the `modern serve` command to enable project run in the production environment, and you need to execute the [`build'](/apis/app/commands#modern-build) command in advance to build the outputs.
+The `modern serve` command is used to start a Modern.js project in the production environment. It can also be used to preview the artifacts built for the production environment locally. Please note that you need to execute the [`build`](/apis/app/commands#modern-build) command beforehand to generate the corresponding artifacts.
 
 ```bash
 Usage: modern serve [options]

package/docs/en/guides/basic-features/css.mdx

@@ -61,16 +61,31 @@ If you need to use other CSS-in-JS libraries such as [styled-jsx](https://www.np
 
 ## Using Tailwind CSS
 
-[Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles. To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, simply run `pnpm run new` in the project root directory and enable it.
+[Tailwind CSS](https://tailwindcss.com/) is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.
 
-Follow the steps below to make a selection:
+To use [Tailwind CSS](https://tailwindcss.com/) in Modern.js, you can follow the steps below:
+
+1. Run `pnpm run new` in the root directory of your project and make the following selections:
 
 ```text
 ? Please select the operation you want: Enable features
 ? Please select the feature name: Enable Tailwind CSS
 ```
 
-Register the Tailwind plugin in `modern.config.ts`:
+After successful initialization, you will see the following additions to the `package.json` file:
+
+```json title="./package.json"
+{
+  "dependencies": {
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "@modern-js/plugin-tailwindcss": "^2.0.0"
+  }
+}
+```
+
+2. Register the Tailwind plugin in `modern.config.ts`:
 
 ```ts title="modern.config.ts"
 import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
@@ -80,29 +95,34 @@ export default defineConfig({
 });
 ```
 
-To use, add the following code to the root component (such as `src/App.jsx`) of the entry:
+3. Create a `index.css` file and add the following code:
+
+```css title="index.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+:::info
+Depending on your needs, you can selectively import the CSS styles provided by Tailwind CSS. Please refer to the [`@tailwind` documentation](https://tailwindcss.com/docs/functions-and-directives#tailwind) for detailed usage of the `@tailwind` directive.
+:::
+
+4. Import the `index.css` file, for example, add the following code in the root component `src/App.jsx`:
 
 ```js
-import 'tailwindcss/base.css';
-import 'tailwindcss/components.css';
-import 'tailwindcss/utilities.css';
+import './index.css';
 ```
 
-Then you can use the Utility Class provided by Tailwind CSS in each component:
+5. Now you can use the Utility Classes provided by Tailwind CSS in your components:
 
 ```tsx
-const App = () => (
+const Hello = () => (
   <div className="h-12 w-48">
     <p className="text-xl font-medium text-black">hello world</p>
   </div>
 );
 ```
 
-:::info Additional Information
-Depending on your needs, you can selectively import the CSS files provided by Tailwind CSS. Since using `@tailwind` is equivalent to directly importing CSS files, you can refer to the comments in the [`@tailwind` usage](https://tailwindcss.com/docs/functions-and-directives#tailwind) documentation for the purpose of the CSS files provided by Tailwind CSS.
-
-:::
-
 ### Configuring Tailwind CSS
 
 In Modern.js, you have two ways to configure Tailwind CSS:

package/docs/en/guides/basic-features/html.mdx

@@ -165,9 +165,9 @@ export default function Document(): React.ReactElement {
 
 ## HTML Syntax
 
-Modern.js also supports HTML syntax. By default, Modern.js application projects will include a built-in HTML template for generating HTML code.
+Modern.js also supports generating HTML files using HTML (EJS) syntax.
 
-Based on the HTML syntax template, Modern.js provides two ways to customize the template: **custom HTML fragments** and **custom the whole HTML**.
+By default, Modern.js projects come with a built-in HTML template for generating HTML code. If you need to customize the HTML template, you can use two methods: **Custom HTML Fragments** and **Fully Custom HTML Templates**.
 
 ### Custom HTML Fragments
 

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

@@ -2,6 +2,7 @@
 sidebar_position: 1
 title: Introduction
 ---
+
 # Introduction
 
 import MicroFrontend from '@modern-js/builder-doc/docs/en/shared/micro-frontend.md';

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

@@ -13,6 +13,7 @@ Through this chapter you can learn:
 ## Create an app
 
 Currently supports two routing modes
+
 - Self-controlled routing
 - Conventional routing
 
@@ -20,7 +21,6 @@ First, clarify the routing mode of the main application [create a file-based rou
 
 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:
@@ -39,11 +39,12 @@ After the project is created, we can enable the `micro frontend` through `pnpm r
 
 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-en/components/enable-micro-frontend";
+import EnableMicroFrontend from '@site-docs-en/components/enable-micro-frontend';
 
 <EnableMicroFrontend />
 
 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)
 
@@ -61,8 +62,8 @@ const Index = () => {
     <div>
       <Table />
     </div>
-  )
-}
+  );
+};
 
 export default Index;
 ```
@@ -79,11 +80,12 @@ const Index = () => {
     <div>
       <Dashboard />
     </div>
-  )
-}
+  );
+};
 
 export default Index;
 ```
+
 #### 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:
@@ -93,9 +95,15 @@ import { Outlet, Link } from '@modern-js/runtime/router';
 
 const Layout = () => (
   <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>
+    <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>
 );
@@ -127,7 +135,7 @@ Since it is a self-controlled route, we delete the `routes/` folder and add the
 
 #### Load sub-app
 
-import CustomRouterMicroFrontend from "@site-docs-en/components/custom-router-micro-frontend";
+import CustomRouterMicroFrontend from '@site-docs-en/components/custom-router-micro-frontend';
 
 <CustomRouterMicroFrontend />
 
@@ -155,7 +163,7 @@ import { garfishPlugin } from '@modern-js/plugin-garfish';
 
 export default defineConfig({
   dev: {
-    port: 8081
+    port: 8081,
   },
   runtime: {
     router: true,
@@ -172,10 +180,8 @@ add `src/routes/page.tsx`:
 
 ```js title="src/routes/page.tsx"
 const Index = () => {
-  return (
-    <div className="container-box">subApp</div>
-  )
-}
+  return <div className="container-box">subApp</div>;
+};
 
 export default Index;
 ```
@@ -204,7 +210,7 @@ import { garfishPlugin } from '@modern-js/plugin-garfish';
 
 export default defineConfig({
   dev: {
-    port: 8082
+    port: 8082,
   },
   runtime: {
     router: true,
@@ -224,7 +230,7 @@ And add code in `src/App.tsx`, note that you need to parse from `props` and pass
 ```js title="src/App.tsx"
 import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
 
-export default (props: {basename: string}) => {
+export default (props: { basename: string }) => {
   const { basename } = props;
 
   return (
@@ -241,6 +247,7 @@ export default (props: {basename: string}) => {
 ## 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`

package/docs/en/guides/topic-detail/micro-frontend/c03-main-app.mdx

@@ -2,13 +2,14 @@
 sidebar_position: 3
 title: Develop Main App
 ---
+
 # Develop Main App
 
 In the previous [Experience micro frontend](/guides/topic-detail/micro-frontend/c02-development), an example was used to demonstrate how to create and configure micro frontend sub-applications. Through this chapter, you can further understand how to develop the main application, and its common configuration.
 
-After creating an application project through the `@modern-js/create` command, you can execute `pnpm run new` in the project (the `modern new` command is actually executed). After selecting the 「micro frontend」 mode, the micro frontend will be installed. Dependencies, just register the plugin manually.
+After creating an Modern.js project through the `@modern-js/create` command, you can execute `pnpm run new` in the project (the `modern new` command is actually executed). After selecting the 「micro frontend」 mode, the micro frontend will be installed. Dependencies, just register the plugin manually.
 
-import EnableMicroFrontend from "@site-docs-en/components/enable-micro-frontend";
+import EnableMicroFrontend from '@site-docs-en/components/enable-micro-frontend';
 
 <EnableMicroFrontend />
 
@@ -26,7 +27,7 @@ It can be configured at runtime via the API [defineConfig](/apis/app/runtime/app
 When the parameter is a function, it cannot be serialized to the output code, so please configure it through defineConfig when it comes to configuration such as functions
 :::
 
-import MicroRuntimeConfig from "@site-docs-en/components/micro-runtime-config";
+import MicroRuntimeConfig from '@site-docs-en/components/micro-runtime-config';
 
 <MicroRuntimeConfig />
 
@@ -40,15 +41,18 @@ defineConfig(App, {
     manifest: {
       getAppList: async () => {
         // get from remote api
-        return [{
-          name: 'Table',
-          entry: 'http://localhost:8001',
-          // activeWhen: '/table'
-        }, {
-          name: 'Dashboard',
-          entry: 'http://localhost:8002'
-          // activeWhen: '/dashboard'
-        }];
+        return [
+          {
+            name: 'Table',
+            entry: 'http://localhost:8001',
+            // activeWhen: '/table'
+          },
+          {
+            name: 'Dashboard',
+            entry: 'http://localhost:8002',
+            // activeWhen: '/dashboard'
+          },
+        ];
       },
     },
   },
@@ -77,16 +81,30 @@ Suppose our subapp list is configured as follows:
 ```js title="App.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 
-import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, BrowserRouter, Link, Outlet } from '@modern-js/runtime/router';
+import {
+  RouterProvider,
+  Route,
+  createBrowserRouter,
+  createRoutesFromElements,
+  BrowserRouter,
+  Link,
+  Outlet,
+} from '@modern-js/runtime/router';
 
 const AppLayout = () => (
   <>
-    <div><Link to={'/table'}>load file-based sub-app</Link></div>
-    <div><Link to={'/dashboard'}>load self-controlled sub-app</Link></div>
-    <div><Link to={'/'}>unmount sub-app</Link></div>
+    <div>
+      <Link to={'/table'}>load file-based sub-app</Link>
+    </div>
+    <div>
+      <Link to={'/dashboard'}>load self-controlled sub-app</Link>
+    </div>
+    <div>
+      <Link to={'/'}>unmount sub-app</Link>
+    </div>
     <Outlet />
   </>
-)
+);
 
 export default () => {
   const { apps, MApp } = useModuleApps();
@@ -103,25 +121,25 @@ export default () => {
               key={app.name}
               path={`${app.name.toLowerCase()}/*`}
               element={
-              <Component
-                loadable={{
-                  loading: ({ pastDelay, error }: any) => {
-                    if (error) {
-                      return <div>error: {error?.message}</div>;
-                    } else if (pastDelay) {
-                      return <div>loading</div>;
-                    } else {
-                      return null;
-                    }
-                  },
-                }}
-              />
+                <Component
+                  loadable={{
+                    loading: ({ pastDelay, error }: any) => {
+                      if (error) {
+                        return <div>error: {error?.message}</div>;
+                      } else if (pastDelay) {
+                        return <div>loading</div>;
+                      } else {
+                        return null;
+                      }
+                    },
+                  }}
+                />
               }
             />
-          )
+          );
         })}
-      </Route>
-    )
+      </Route>,
+    ),
   );
 
   return (
@@ -164,13 +182,10 @@ function App() {
 
 After starting the application in this way, accessing the '/table' route will render the'Table 'sub-application, and accessing the'/dashboard 'route will render the'Dashboard' sub-application.
 
-
 ### Mix Mode
 
-
 Of course, **sub-application components** and **centralized routing** can be mixed.
 
-
 - One molecular application is activated as a **sub-application component**, and the other part is activated as a **centralized routing**.
 - A molecular application can be activated either as a **centralized routing** or as a **sub-application component**.
 
@@ -178,7 +193,6 @@ Of course, **sub-application components** and **centralized routing** can be mix
 
 By configuring the `loadable` configuration, loading components can be added for 「centralized routing」 and 「sub-applicati」, and errors, timeouts, flashes, etc. can be considered, so as to provide users with a better user experience. The design and implementation of this function refer to [react-loadable](https://github.com/jamiebuilds/react-loadable), and the basic functions are similar.
 
-
 ```tsx
 function Loading() {
   return <div>Loading...</div>;

package/docs/en/guides/topic-detail/micro-frontend/c04-communicate.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 4
 title: Communicate
 ---
+
 # Communicate
 
 ## Props

package/docs/en/guides/topic-detail/micro-frontend/c05-mixed-stack.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 5
 title: Mixed Stack
 ---
+
 # Mixed Stack
 
 The Modern.js micro frontend scheme is based on the [Garfish](https://garfishjs.org/) package and provides some more out-of-the-box usage.
@@ -16,7 +17,6 @@ When your main application and sub-application are not all Modern.js application
 **Modern.js** subapps compile to generate a standard [Garfish subapp export](https://www.garfishjs.org/guide/start#2%E5%AF%BC%E5%87%BA-provider-%E5%87%BD%E6%95%B0).
 So you can directly access the standard micro frontend main application.
 
-
 :::info
 The child application is **Modern.js**, when the main application uses the native Garfish micro frontend, the **child application debugging mode** is not available.
 :::

package/docs/zh/apis/app/commands.mdx

@@ -123,7 +123,7 @@ Options:
 
 ### 添加入口
 
-在应用工程中，执行 `new` 命令添加入口如下：
+在 Modern.js 工程中，执行 `new` 命令添加入口的步骤如下：
 
 ```bash
 $ npx modern new
@@ -134,7 +134,7 @@ $ npx modern new
 
 ### 启用可选功能
 
-在应用工程中，执行 `new` 命令启用可选能力如下：
+在 Modern.js 工程中，执行 `new` 命令启用可选能力的步骤如下：
 
 ```bash
 $ npx modern new
@@ -156,7 +156,7 @@ pnpm 暂不支持使用 JSON 字符串作为参数值，可使用 `npm new` 开
 
 ## modern serve
 
-`modern serve` 命令用于在生产环境下启用应用工程, 注意需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
+`modern serve` 命令用于在生产环境下启动 Modern.js 工程, 也可以用于在本地预览生产环境构建的产物。注意你需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
 
 ```bash
 Usage: modern serve [options]

package/docs/zh/apis/app/hooks/api/api.mdx

@@ -2,6 +2,7 @@
 title: '**/*.[tj]s'
 sidebar_position: 1
 ---
+
 # **/*.[tj]s
 
 在 [BFF 函数写法](/guides/advanced-features/bff/type.html#函数写法)下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/api#白名单)外，`api` 目录下的文件会被注册为接口的路由。
@@ -66,7 +67,7 @@ export const get = async () => {
 
 这样导出函数，则会得到一个 `GET` 接口。
 
-应用工程中支持了 9 个 Method 定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
+Modern.js 工程中支持了 9 个 Method 定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
 
 名字是大小不敏感的，就是说，如果是 `GET`，写成 `get`、`Get`、`GEt`、`GET`，都可以准确识别。而默认导出，即 `export default xxx` 则会被映射为 `Get`。
 

package/docs/zh/apis/app/hooks/server/index_.mdx

@@ -2,8 +2,9 @@
 title: index.[tj]s
 sidebar_position: 1
 ---
+
 # index.[tj]s
 
-扩展 Modern.js Web Server 的文件，在此文件中可以给应用工程启动的 Web Server 添加 [Hook](/apis/app/runtime/web-server/hook) 或 [Middleware](/apis/app/runtime/web-server/middleware)。
+扩展 Modern.js Web Server 的文件，在此文件中可以给 Modern.js 工程启动的 Web Server 添加 [Hook](/apis/app/runtime/web-server/hook) 或 [Middleware](/apis/app/runtime/web-server/middleware)。
 
 可以对请求和响应进行拦截处理，鉴权与角色、请求预处理、异常兜底等。也可在内置处理逻辑（包括路由匹配、资源寻址、头部注入、页面渲染，静态 Web 托管）插入特定的业务逻辑。

package/docs/zh/guides/basic-features/css.mdx

@@ -61,16 +61,31 @@ Modern.js 内部集成了 Babel 的 [babel-plugin-styled-components](https://git
 
 ## 使用 Tailwind CSS
 
-[Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，只需要在项目根目录下执行 `pnpm run new` 并开启。
+[Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。
 
-按照如下进行选择：
+在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，你只需要按照以下步骤操作：
+
+1. 在项目根目录下执行 `pnpm run new`，按照如下进行选择：
 
 ```text
 ? 请选择你想要的操作 启用可选功能
 ? 请选择功能名称 启用 「Tailwind CSS」 支持
 ```
 
-在 `modern.config.ts` 中注册 Tailwind 插件:
+成功开启后，会看到 `package.json` 中新增了依赖：
+
+```json title="./package.json"
+{
+  "dependencies": {
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "@modern-js/plugin-tailwindcss": "^2.0.0"
+  }
+}
+```
+
+2. 在 `modern.config.ts` 中注册 Tailwind 插件:
 
 ```ts title="modern.config.ts"
 import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
@@ -80,29 +95,34 @@ export default defineConfig({
 });
 ```
 
-使用时在入口的根组件(如 `src/App.jsx`)添加如下代码：
+3. 创建 `index.css` 文件，添加以下代码：
+
+```css title="index.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+:::info
+根据需求不同，你可以选择性地导入 Tailwind CSS 提供的 CSS 样式。请参考 [`@tailwind` 文档](https://tailwindcss.com/docs/functions-and-directives#tailwind) 来了解 `@tailwind` 指令的详细用法。
+:::
+
+4. 引用 `index.css` 文件，比如在入口的根组件 `src/App.jsx` 添加如下代码：
 
 ```js
-import 'tailwindcss/base.css';
-import 'tailwindcss/components.css';
-import 'tailwindcss/utilities.css';
+import './index.css';
 ```
 
-然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了：
+5. 然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了：
 
 ```tsx
-const App = () => (
+const Hello = () => (
   <div className="h-12 w-48">
     <p className="text-xl font-medium text-black">hello world</p>
   </div>
 );
 ```
 
-:::info 补充信息
-根据需求不同，你可以选择性的导入 Tailwind CSS 提供的 CSS 文件。由于使用 `@tailwind` 与直接导入 CSS 文件的作用等价，因此关于 Tailwind CSS 提供的 CSS 文件的用途，可以参考 [`@tailwind` 的使用](https://tailwindcss.com/docs/functions-and-directives#tailwind) 文档中注释里的内容。
-
-:::
-
 ### 配置 Tailwind CSS
 
 在 Modern.js 中，你有两种方式来配置 Tailwind CSS：

package/docs/zh/guides/basic-features/html.mdx

@@ -135,7 +135,7 @@ export default function Document(): React.ReactElement {
       <!--<?- html ?>-->
       <h1 style="color:red">以下为构建时传过来的参数：</h1>
       <h2>entryName: sub</h2>
-      <h2>title: </h2>
+      <h2>title:</h2>
       <h2>rootId: root</h2>
     </div>
     <h1>bottom</h1>
@@ -166,12 +166,11 @@ export default function Document(): React.ReactElement {
 }
 ```
 
+## HTML 语法
 
-## Html 语法
+Modern.js 也支持通过 HTML(EJS) 语法来生成 HTML 文件。
 
-Modern.js 也支持 HTML 语法。默认情况下，Modern.js 的应用工程中会内置一份 HTML 模板，用于生成 HTML 代码。
-
-基于 HTML 语法的模板，Modern.js 提供了**自定义 HTML 片段**和**完全自定义 HTML 模板**两种方式来自定义模板。
+默认情况下，Modern.js 的工程中会内置一份 HTML 模板，用于生成 HTML 代码。如果你需要自定义 HTML 模板，可以使用**自定义 HTML 片段**和**完全自定义 HTML 模板**两种方式。
 
 ### 自定义 HTML 片段
 

package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -736,7 +736,7 @@ export const myPlugin = (): CliPlugin<AppTools> => ({
 
 :::
 
-应用工程中的 Server 部分也支持了插件。其中的 Hook 将会提供一些特定阶段调用和特殊功能的 Hook。
+Modern.js 工程中的 Server 部分也支持了插件。其中的 Hook 将会提供一些特定阶段调用和特殊功能的 Hook。
 
 ### `create`
 

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

@@ -2,6 +2,7 @@
 sidebar_position: 2
 title: 体验微前端
 ---
+
 # 体验微前端
 
 通过本章你可以了解到：
@@ -10,7 +11,9 @@ title: 体验微前端
 - 微前端项目开发的基本流程。
 
 ## 创建应用
+
 目前支持两种路由模式
+
 - 自控式路由
 - 约定式路由
 
@@ -27,7 +30,7 @@ mkdir masterApp && cd masterApp
 npx @modern-js/create@latest
 ```
 
-import DefaultMWAGenerate from "@site-docs/components/default-mwa-generate";
+import DefaultMWAGenerate from '@site-docs/components/default-mwa-generate';
 
 <DefaultMWAGenerate />
 
@@ -40,17 +43,19 @@ import DefaultMWAGenerate from "@site-docs/components/default-mwa-generate";
 
 接下来，让我们注册微前端插件并添加开启微前端主应用，并增加子应用列表：
 
-import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
+import EnableMicroFrontend from '@site-docs/components/enable-micro-frontend';
 
 <EnableMicroFrontend />
 
 然后我们在 routes 文件夹下新建两个目录
+
 - table (用于加载约定式路由子应用)
 - dashboard (用于加载自控式路由子应用)
 
 在这两个目录下我们需要新建一个 `$.tsx` 文件作为主应用约定式路由的入口($ 代表模糊匹配，即 `/table` 和 `/table/test` 都会匹配到这个 `$.tsx` 作为该路由的入口文件，这会保证在微前端场景下正确加载子应用路由)
 
 #### 加载约定式路由子应用
+
 ```js title="src/routes/table/$.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 
@@ -61,13 +66,14 @@ const Index = () => {
     <div>
       <Table />
     </div>
-  )
-}
+  );
+};
 
 export default Index;
 ```
 
 #### 加载自控式路由子应用
+
 ```js title="src/routes/dashboard/$.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 
@@ -78,21 +84,30 @@ const Index = () => {
     <div>
       <Dashboard />
     </div>
-  )
-}
+  );
+};
 
 export default Index;
 ```
+
 #### 路由跳转
+
 此时主应用配置已经完成，通过路由即可加载子应用，修改主应用的 `layout.tsx` 来跳转路由
+
 ```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'}>加载约定式路由子应用</Link>
+    </div>
+    <div>
+      <Link to={'/dashboard'}>加载自控式路由子应用</Link>
+    </div>
+    <div>
+      <Link to={'/'}>卸载子应用</Link>
+    </div>
     <Outlet />
   </div>
 );
@@ -123,8 +138,10 @@ npx @modern-js/create@latest
 <EnableMicroFrontend />
 
 由于是自控式路由，我们删除掉 `routes` 文件夹并在 `src` 目录下增加 `App.tsx` 文件，此处如果使用的 `非 MApp` 组件，需要通过 `React Router v6` 的 `createBrowserRouter` API 来创建路由
+
 #### 加载子应用
-import CustomRouterMicroFrontend from "@site-docs/components/custom-router-micro-frontend";
+
+import CustomRouterMicroFrontend from '@site-docs/components/custom-router-micro-frontend';
 
 <CustomRouterMicroFrontend />
 
@@ -139,7 +156,7 @@ npx @modern-js/create@latest
 
 按照如下选择，生成项目：
 
-<DefaultMWAGenerate/>
+<DefaultMWAGenerate />
 
 我们执行 `pnpm run new` 来开启 `微前端` 功能：
 
@@ -156,7 +173,7 @@ import { garfishPlugin } from '@modern-js/plugin-garfish';
 
 export default defineConfig({
   dev: {
-    port: 8081
+    port: 8081,
   },
   runtime: {
     router: true,
@@ -170,12 +187,13 @@ export default defineConfig({
 ```
 
 添加 `src/routes/page.tsx` 代码
+
 ```js title="src/routes/page.tsx"
 const Index = () => {
   return (
     <div className="container-box">subApp: 约定式路由的子应用的根路由</div>
-  )
-}
+  );
+};
 
 export default Index;
 ```
@@ -191,7 +209,7 @@ npx @modern-js/create@latest
 
 按照如下选择，生成项目：
 
-<DefaultMWAGenerate/>
+<DefaultMWAGenerate />
 
 我们执行 `pnpm run new` 来开启 `微前端`：
 
@@ -208,7 +226,7 @@ import { garfishPlugin } from '@modern-js/plugin-garfish';
 
 export default defineConfig({
   dev: {
-    port: 8082
+    port: 8082,
   },
   runtime: {
     router: true,
@@ -220,6 +238,7 @@ export default defineConfig({
   plugins: [appTools(), garfishPlugin()],
 });
 ```
+
 自控式路由需要删除掉 `routes` 文件夹并在 `src` 目录下新建 `App.tsx`
 
 并在 `src/App.tsx` 添加代码，注意需要从 `props` 中解析并传递 `basename` 给 `BrowserRouter`
@@ -227,7 +246,7 @@ export default defineConfig({
 ```js title="src/App.tsx"
 import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
 
-export default (props: {basename: string}) => {
+export default (props: { basename: string }) => {
   const { basename } = props;
 
   return (
@@ -242,7 +261,9 @@ export default (props: {basename: string}) => {
 ```
 
 ## 调试
+
 按顺序在目录执行 `pnpm run dev` 命令启动应用：
+
 - masterApp 主应用 `http://localhost:8080`
 - table 子应用(约定式路由) `http://localhost:8081`
 - dashboard 子应用(自控式路由) `http://localhost:8082`
@@ -254,6 +275,7 @@ export default (props: {basename: string}) => {
 ## Modern.js 微前端和直接使用 Garfish 的区别
 
 使用纯 `Garfish` API 开发微前端应用时
+
 - 主应用：
   - 安装 Garfish 依赖并使用 `Garfish.run` 注册子应用 [参考](https://www.garfishjs.org/api/run)
   - 提供一个常驻的 `DOM` 节点供子应用挂载 [参考](https://www.garfishjs.org/api/registerApp#domgetter)
@@ -264,6 +286,7 @@ export default (props: {basename: string}) => {
 区别于直接使用 `Garfish` 运行时 API 开发微前端项目，`Modern.js` 的微前端方案更加开箱即用。
 使用 `pnpm new` 启用微前端模式后会自动在 `Modern.js` 应用中集成 `Garfish` 插件，在 `Garfish`
 插件的加持下，你只需要
+
 - 主应用：
   - 配置 `runtime.masterApp.apps` 参数注册子应用
   - 使用 `useModuleApps` API 获取子应用实例并在组件中完成渲染
@@ -271,10 +294,11 @@ export default (props: {basename: string}) => {
   - 配置 `deploy.microFrontend`
 
 所以插件中为你做了如下事情
-  - 帮助你通过 `Garfish` 运行时 API 自动注册子应用（主应用）
-  - `useModulesApps` 函数的返回值提供了一个常驻的 `DOM` 节点供子应用挂载（主应用）
-  - 帮助你正确导出了 `provider`（子应用）
-  - 帮助你正确设置了 `basename` 给 `Modern.js` 运行时提供 `Router` 实例，如果是`自控式路由`或`手动引入的 react-router-dom` 那么需要从 `App.tsx` 的 `props` 中获取 `basename` 手动传递给引入的 `Router 实例`（子应用）
+
+- 帮助你通过 `Garfish` 运行时 API 自动注册子应用（主应用）
+- `useModulesApps` 函数的返回值提供了一个常驻的 `DOM` 节点供子应用挂载（主应用）
+- 帮助你正确导出了 `provider`（子应用）
+- 帮助你正确设置了 `basename` 给 `Modern.js` 运行时提供 `Router` 实例，如果是`自控式路由`或`手动引入的 react-router-dom` 那么需要从 `App.tsx` 的 `props` 中获取 `basename` 手动传递给引入的 `Router 实例`（子应用）
 
 ## 常见问题
 

package/docs/zh/guides/topic-detail/micro-frontend/c03-main-app.mdx

@@ -2,13 +2,14 @@
 sidebar_position: 3
 title: 开发主应用
 ---
+
 # 开发主应用
 
 在上一章 [体验微前端](/guides/topic-detail/micro-frontend/c02-development) 通过一个示例演示了如何创建和配置微前端子应用，通过本章你可以进一步了解如何开发主应用，以及它的常见配置。
 
-在通过 `@modern-js/create` 命令创建应用工程后，可以在项目中执行 `pnpm run new`（实际执行了 `modern new` 命令），在选择了「微前端」模式后，会安装微前端依赖依赖，只需手动注册插件即可。
+在通过 `@modern-js/create` 命令创建 Modern.js 工程后，可以在项目中执行 `pnpm run new`（实际执行了 `modern new` 命令），在选择了「微前端」模式后，会安装微前端依赖依赖，只需手动注册插件即可。
 
-import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
+import EnableMicroFrontend from '@site-docs/components/enable-micro-frontend';
 
 <EnableMicroFrontend />
 
@@ -26,7 +27,7 @@ import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
 
 :::
 
-import MicroRuntimeConfig from "@site-docs/components/micro-runtime-config";
+import MicroRuntimeConfig from '@site-docs/components/micro-runtime-config';
 
 <MicroRuntimeConfig />
 
@@ -40,15 +41,18 @@ defineConfig(App, {
     manifest: {
       getAppList: async () => {
         // 可以从其他远程接口获取
-        return [{
-          name: 'Table',
-          entry: 'http://localhost:8001',
-          // activeWhen: '/table'
-        }, {
-          name: 'Dashboard',
-          entry: 'http://localhost:8002'
-          // activeWhen: '/dashboard'
-        }];
+        return [
+          {
+            name: 'Table',
+            entry: 'http://localhost:8001',
+            // activeWhen: '/table'
+          },
+          {
+            name: 'Dashboard',
+            entry: 'http://localhost:8002',
+            // activeWhen: '/dashboard'
+          },
+        ];
       },
     },
   },
@@ -77,16 +81,30 @@ defineConfig(App, {
 ```js title="App.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 
-import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, BrowserRouter, Link, Outlet } from '@modern-js/runtime/router';
+import {
+  RouterProvider,
+  Route,
+  createBrowserRouter,
+  createRoutesFromElements,
+  BrowserRouter,
+  Link,
+  Outlet,
+} from '@modern-js/runtime/router';
 
 const AppLayout = () => (
   <>
-    <div><Link to={'/table'}>加载约定式路由子应用</Link></div>
-    <div><Link to={'/dashboard'}>加载自控式路由子应用</Link></div>
-    <div><Link to={'/'}>卸载子应用</Link></div>
+    <div>
+      <Link to={'/table'}>加载约定式路由子应用</Link>
+    </div>
+    <div>
+      <Link to={'/dashboard'}>加载自控式路由子应用</Link>
+    </div>
+    <div>
+      <Link to={'/'}>卸载子应用</Link>
+    </div>
     <Outlet />
   </>
-)
+);
 
 export default () => {
   const { apps, MApp } = useModuleApps();
@@ -103,25 +121,25 @@ export default () => {
               key={app.name}
               path={`${app.name.toLowerCase()}/*`}
               element={
-              <Component
-                loadable={{
-                  loading: ({ pastDelay, error }: any) => {
-                    if (error) {
-                      return <div>error: {error?.message}</div>;
-                    } else if (pastDelay) {
-                      return <div>loading</div>;
-                    } else {
-                      return null;
-                    }
-                  },
-                }}
-              />
+                <Component
+                  loadable={{
+                    loading: ({ pastDelay, error }: any) => {
+                      if (error) {
+                        return <div>error: {error?.message}</div>;
+                      } else if (pastDelay) {
+                        return <div>loading</div>;
+                      } else {
+                        return null;
+                      }
+                    },
+                  }}
+                />
               }
             />
-          )
+          );
         })}
-      </Route>
-    )
+      </Route>,
+    ),
   );
 
   return (

package/docs/zh/guides/topic-detail/micro-frontend/c04-communicate.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 4
 title: 主子应用通信
 ---
+
 # 主子应用通信
 
 ## props 通信

package/docs/zh/guides/topic-detail/micro-frontend/c05-mixed-stack.mdx

@@ -2,6 +2,7 @@
 sidebar_position: 5
 title: 混合技术栈
 ---
+
 # 混合技术栈
 
 Modern.js 微前端方案是基于 [Garfish](https://garfishjs.org/) 封装的，提供了一些更开箱即用的使用方式。

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-nightly-20230917160555",
+  "version": "0.0.0-nightly-20230918160602",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "0.0.0-nightly-20230917160555"
+    "@modern-js/sandpack-react": "0.0.0-nightly-20230918160602"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-nightly-20230917160555"
+    "@modern-js/builder-doc": "0.0.0-nightly-20230918160602"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -39,8 +39,8 @@
     "@rspress/shared": "0.0.13",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20230917160555",
-    "@modern-js/builder-doc": "0.0.0-nightly-20230917160555"
+    "@modern-js/builder-doc": "0.0.0-nightly-20230918160602",
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20230918160602"
   },
   "scripts": {
     "dev": "rspress dev",