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

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

@@ -30,7 +30,6 @@ After running `modern dev`, Modern.js will watch source file changes and apply h
 $ modern dev
 
 info    Starting dev server...
-info    App running at:
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/
@@ -88,12 +87,14 @@ execute `npx modern build --analyze` command, can produce an HTML file that anal
 
 ```text
 Bundle Analyzer saved report to /example/dist/report.html
-File sizes after production build:
 
-  122.35 KB  dist/static/js/885.1d4fbe5a.js
-  2.3 KB     dist/static/js/main.4b8e8d64.js
-  761 B      dist/static/js/runtime-main.edb7cf35.js
-  645 B      dist/static/css/main.0dd3ecc1.css
+info    Production file sizes:
+
+  File                                      Size         Gzipped
+  dist/static/js/lib-react.09721b5c.js      152.6 kB     49.0 kB
+  dist/html/main/index.html                 5.8 kB       2.5 kB
+  dist/static/js/main.3568a38e.js           3.5 kB       1.4 kB
+  dist/static/css/main.03221f72.css         1.4 kB       741 B
 ```
 
 Open the above HTML file in the browser, you can see the tile diagram of the bundled files, and perform package volume analysis and optimization:

package/docs/en/components/debug-app.mdx

@@ -6,12 +6,10 @@ $ pnpm run dev
 > modern dev
 
 info    Starting dev server...
-info    App running at:
+ready   Client compiled in 50ms
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/
-
- Client ✔ done in 76.10ms
 ```
 
 Open `http://localhost:8000/` in your browser to see the page content.

package/docs/en/components/global-proxy-config.mdx

@@ -7,16 +7,9 @@ This option is used to configure a global proxy based on [whistle](https://wprox
 
 Before using this option, you need to install and register the `@modern-js/plugin-proxy` plugin:
 
-```bash
-# npm
-npm add @modern-js/plugin-proxy -D
-
-# yarn
-yarn add @modern-js/plugin-proxy -D
+import { PackageManagerTabs } from '@theme';
 
-# pnpm
-pnpm add @modern-js/plugin-proxy -D
-```
+<PackageManagerTabs command="add @modern-js/plugin-proxy -D" />
 
 After the installation, please register the plugin in the `modern.config.ts` file:
 
@@ -75,13 +68,11 @@ module.exports = {
 Execute `dev`, when the prompt is as follows, the proxy server starts successfully:
 
 ```bash
-  App running at:
-
   Local:    http://localhost:8080/
   Network:  http://192.168.0.1:8080/
 
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
+info      Starting proxy server.....
+success   Proxy server start on localhost:8899
 ```
 
 Access the `localhost:8899` to view the Network and configure proxy rules on the UI interface:

package/docs/en/components/global-proxy.mdx

@@ -11,13 +11,11 @@ Specific proxy rules can be set via the [`dev.proxy`](/configure/app/dev/proxy)
 After installing the proxy plugin and configuring the proxy rules, run the `pnpm run dev` command:
 
 ```bash
-  App running at:
-
   Local:    http://localhost:8080/
   Network:  http://192.168.0.1:8080/
 
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
+info      Starting proxy server.....
+success   Proxy server start on localhost:8899
 ```
 
 You can see that the proxy server has started successfully in the console.

package/docs/en/components/init-app.mdx

@@ -14,7 +14,7 @@ After create the project, Modern.js will automatically install dependencies and
 [INFO] git repository has been automatically created
 [INFO] Success！
 You can run the following command in the directory of the new project:
-pnpm run dev          # Starting the dev server
+pnpm run dev          # Starting dev server
 pnpm run build        # Build the app for production
 pnpm run serve        # Preview the production build locally
 pnpm run lint         # Run ESLint and automatically fix problems

package/docs/en/configure/app/server/base-url.mdx

@@ -25,8 +25,6 @@ export default defineConfig({
 After running `dev`, you will see that the route access will have the corresponding prefix added:
 
 ```bash
-App running at:
-
   > Local:    http://localhost:8080/base/
   > Network:  http://192.168.0.1:8080/base/
 ```

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # Path Alias

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 1
 ---
 
 # Styling

package/docs/en/guides/basic-features/data-fetch.mdx

@@ -1,10 +1,11 @@
 ---
-sidebar_position: 4
+title: Data Fetching
+sidebar_position: 3
 ---
 
 # Data Fetching
 
-Modern.js provides out-of-the-box data fetching capabilities, allowing developers to develop in an isomorphic way in both client-side and server-side code.
+Modern.js provides out-of-the-box data fetching capabilities,developers can fetch data in the project through these APIs.
 
 It should be noted that these APIs do not help applications initiate requests, but rather help developers better manage data and improve project performance.
 
@@ -13,7 +14,7 @@ It should be noted that these APIs do not help applications initiate requests, b
 Modern.js recommends using [conventional routing](/guides/basic-features/routes) for routing management. Through Modern.js's [conventional (nested) routing](/guides/basic-features/routes#conventional-routing), each routing component (`layout.ts` or `page.ts`) can have a same-named `loader` file. The `loader` file needs to export a function that will be executed before the component is rendered to provide data for the routing component.
 
 :::info
-Modern.js v1 supports fetching data via [useLoader](/guides/basic-features/data-fetch.html#useloader-(old-version)), which is no longer the recommended usage. We do not recommend mixing the two except during the migration process.
+Modern.js v1 supports fetching data via [useLoader](</guides/basic-features/data-fetch.html#useloader-(old-version)>), which is no longer the recommended usage. We do not recommend mixing the two except during the migration process.
 
 :::
 
@@ -216,25 +217,24 @@ If you want to get the data returned by the `loader` in `entry1/routes/layout.ts
 
 :::info
 This feature is currently experimental and the API may change in the future.
-Currently only supports CSR, please look forward to Streaming SSR.
 :::
 
 Create `user/layout.loader.ts` and add the following code:
 
 ```ts title="routes/user/layout.loader.ts"
-import { defer } from "@modern-js/runtime/router"
+import { defer } from '@modern-js/runtime/router';
 
 const loader = () =>
-defer({
-  userInfo: new Promise((resolve) => {
+  defer({
+    userInfo: new Promise(resolve => {
       setTimeout(() => {
         resolve({
           age: 1,
-          name: 'user layout'
-        })
-      }, 1000)
-    })
-  })
+          name: 'user layout',
+        });
+      }, 1000);
+    }),
+  });
 
 export default loader;
 ```

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 # Routing
@@ -140,6 +140,7 @@ To simplify the introduction of the relationship between `<Layout>` and `<Outlet
   </UserLayout>
 </Layout>
 ```
+
 In summary, if there is a `layout.tsx` file under the sub-route's file directory, the `<Outlet>` in the parent `layout.tsx` will represent the `layout.tsx` in the sub-route file directory. Otherwise, it will represent the `page.tsx` in the sub-route file directory.
 
 #### Page
@@ -148,12 +149,12 @@ All routes should end with the `<Page>` component. If the developer introduces t
 
 #### Config
 
-Each `Layout` or `Page` file can define its own `config` file, such as `page.config.ts`. In this file, we have an conventinal on a named export called `handle`, which you can define any properties:
+Each `Layout`,`$` or `Page` file can define its own `config` file, such as `page.config.ts`. In this file, we have an conventinal on a named export called `handle`, which you can define any properties:
 
 ```ts title="routes/blog/page.config.ts"
 export const handle = {
-  breadcrumbName: 'profile'
-}
+  breadcrumbName: 'profile',
+};
 ```
 
 These properties as defined are available via the [`useMatches`](https://reactrouter.com/en/main/hooks/use-matches) hook:
@@ -161,12 +162,11 @@ These properties as defined are available via the [`useMatches`](https://reactro
 ```ts title="routes/layout.ts"
 export default () => {
   const matches = useMatches;
-  const breadcrumbs = matches.map(matchedRoute => matchedRoute?.handle?.breadcrumbName);
-  return (
-    <Breadcrumb names={breadcrumbs}>
-    </Breadcrumb>
-  )
-}
+  const breadcrumbs = matches.map(
+    matchedRoute => matchedRoute?.handle?.breadcrumbName,
+  );
+  return <Breadcrumb names={breadcrumbs}></Breadcrumb>;
+};
 ```
 
 ### Dynamic Routing
@@ -227,6 +227,7 @@ For example, the following directory structure:
 ```
 
 When accessing any path that does not match(For example `/blog/a`), the `routes/$.tsx` component will be rendered, because there is `layout.tsx` here, the rendered UI is as follows.
+
 ```tsx
 <RootLayout>
   <BlogLayout>
@@ -364,6 +365,17 @@ export default () => {
 };
 ```
 
+If you want to redirect in a component,you can navigate by `useNavigate` hook, for example:
+
+```ts title="routes/user/page.ts"
+import { useNavigate } from '@modern-js/runtime/router';
+
+export default () => {
+  const navigate = useNavigate();
+  navigate('/login');
+};
+```
+
 ### ErrorBoundary
 
 In each directory under `routes/`, developers can also define an `error.tsx` file that exports an `<ErrorBoundary>` component by default.
@@ -391,7 +403,6 @@ export const ErrorBoundary = () => {
 
 In each root `Layout` component (`routes/layout.ts`), you can dynamically define runtime configuration:
 
-
 ```tsx title="src/routes/layout.tsx"
 // Define runtime config
 import type { AppConfig } from '@modern-js/runtime';
@@ -489,6 +500,7 @@ To further improve the user experience and reduce loading time, Modern.js suppor
 ```
 
 :::info
+
 - This feature is currently only supported in Webpack projects and not yet supported in Rspack projects.
 - Preloading data currently only preloads the data returned by the [Data Loader](/guides/basic-features/data-fetch) in SSR projects.
 
@@ -508,13 +520,13 @@ The `prefetch` attribute has three optional values:
 - By using `render`, static assets will only be loaded when the system is idle, and will not compete with the static assets of the initial screen for network assets.
 - In the SSR scenario, data will also be pre-fetched.
 
-import Motivation from '@site-docs-en/components/convention-routing-motivation'
+import Motivation from '@site-docs-en/components/convention-routing-motivation';
 
-<Motivation/>
+<Motivation />
 
-import Practice from '@site-docs-en/components/routes-practice'
+import Practice from '@site-docs-en/components/routes-practice';
 
-<Practice/>
+<Practice />
 
 ## Self-controlled Routing
 

package/docs/en/guides/get-started/quick-start.mdx

@@ -91,23 +91,15 @@ $ pnpm run build
 
 > modern build
 
-info    Create a production build...
-
-info    File sizes after production build:
+info    Staring production build...
+ready   Client compiled in 50ms
+info    Production file sizes:
 
   File                                      Size         Gzipped
-  dist/static/js/lib-corejs.ffeb7fb8.js     214.96 kB    67.23 kB
-  dist/static/js/lib-react.09721b5c.js      152.61 kB    49.02 kB
-  dist/static/js/218.102e2f39.js            85.45 kB     28.5 kB
-  dist/static/js/lib-babel.a7bba875.js      11.93 kB     3.95 kB
-  dist/html/main/index.html                 5.84 kB      2.57 kB
-  dist/static/js/main.3568a38e.js           3.57 kB      1.44 kB
-  dist/static/css/async/304.c3c481a5.css    2.62 kB      874 B
-  dist/asset-manifest.json                  1.48 kB      349 B
-  dist/static/js/async/304.c45706bc.js      1.4 kB       575 B
-  dist/static/js/async/509.fcb06e14.js      283 B        230 B
-
- Client ✔ done in 3.57s
+  dist/static/js/lib-react.09721b5c.js      152.6 kB     49.0 kB
+  dist/html/main/index.html                 5.8 kB       2.5 kB
+  dist/static/js/main.3568a38e.js           3.5 kB       1.4 kB
+  dist/static/css/main.03221f72.css         1.4 kB       741 B
 ```
 
 By default, the build artifacts are generated in `dist/`, with the following directory structure:
@@ -135,8 +127,7 @@ $ pnpm run serve
 
 > modern serve
 
-Starting the modern server...
-info    App running at:
+info    Starting production server...
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/

package/docs/en/guides/get-started/upgrade.mdx

@@ -8,11 +8,13 @@ sidebar_position: 3
 
 Modern.js provides the `upgrade` command to support upgrading the project to the latest version of Modern.js.
 
-Run `pnpm run upgrade` in the project:
+Run the `upgrade` script in the project:
 
-```bash
-$ pnpm run upgrade
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="run upgrade" />
 
+```bash
 > modern upgrade
 
 [INFO] [Project Type]: Web App
@@ -22,11 +24,15 @@ $ pnpm run upgrade
 
 You can see that the dependencies in the project's `package.json` have been updated to the latest version.
 
+:::tip
+If the `upgrade` command is not declared in the project's `package.json`, you can execute `npx modern upgrade` as an equivalent alternative.
+:::
+
 ## Upgrade to a specified version
 
 All packages of Modern.js are currently released with a **uniform version number**.
 
-import ReleaseNote from "@site-docs-en/components/release-note"
+import ReleaseNote from '@site-docs-en/components/release-note';
 
 <ReleaseNote />
 

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

@@ -170,6 +170,8 @@ export const myPlugin = (): CliPlugin => ({
 });
 ```
 
+Note that the setup function of the next plugin is not executed until the async setup function of the current plugin has finished. Therefore, you should avoid performing time-consuming asynchronous operations in the setup function to avoid slowing down the startup performance of the CLI.
+
 ## Adding Plugins
 
 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.

package/docs/en/tutorials/first-app/c02-component.mdx

@@ -1,6 +1,7 @@
 ---
 title: Add UI Components
 ---
+
 # Add UI Components
 
 In the previous chapter, we learned how to initialize a project and use configuration to modify the default behavior of Modern.js.
@@ -9,9 +10,9 @@ In this chapter, we continue to use the project code of the previous chapter and
 
 In order to do better UI display and interaction, we introduce the component library [Antd](https://ant.design/index-cn) to develop, and use the `<List>` component instead of the primitive list. Add dependency first:
 
-```bash
-pnpm add antd
-```
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add antd" />
 
 Modify `src/routes/page.tsx` to import components at the top:
 

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

@@ -30,7 +30,6 @@ Options:
 $ modern dev
 
 info    Starting dev server...
-info    App running at:
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/
@@ -88,12 +87,14 @@ Options:
 
 ```
 Bundle Analyzer saved report to /example/dist/report.html
-File sizes after production build:
 
-  122.35 KB  dist/static/js/885.1d4fbe5a.js
-  2.3 KB     dist/static/js/main.4b8e8d64.js
-  761 B      dist/static/js/runtime-main.edb7cf35.js
-  645 B      dist/static/css/main.0dd3ecc1.css
+info    Production file sizes:
+
+  File                                      Size         Gzipped
+  dist/static/js/lib-react.09721b5c.js      152.6 kB     49.0 kB
+  dist/html/main/index.html                 5.8 kB       2.5 kB
+  dist/static/js/main.3568a38e.js           3.5 kB       1.4 kB
+  dist/static/css/main.03221f72.css         1.4 kB       741 B
 ```
 
 手动在浏览器中打开上述 HTML 文件，可以看到打包产物的瓦片图，并进行包体积分析和优化：

package/docs/zh/components/debug-app.mdx

@@ -6,12 +6,10 @@ $ pnpm run dev
 > modern dev
 
 info    Starting dev server...
-info    App running at:
+ready   Client compiled in 50ms
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/
-
- Client ✔ done in 76.10ms
 ```
 
 在浏览器中打开 `http://localhost:8000/`，可以看到页面内容。

package/docs/zh/components/global-proxy-config.mdx

@@ -7,16 +7,9 @@
 
 使用该选项前，你需要提前安装和注册 `@modern-js/plugin-proxy` 插件：
 
-```bash
-# npm
-npm add @modern-js/plugin-proxy -D
-
-# yarn
-yarn add @modern-js/plugin-proxy -D
+import { PackageManagerTabs } from '@theme';
 
-# pnpm
-pnpm add @modern-js/plugin-proxy -D
-```
+<PackageManagerTabs command="add @modern-js/plugin-proxy -D" />
 
 安装完成后，在 `modern.config.ts` 文件中注册插件：
 
@@ -75,13 +68,11 @@ module.exports = {
 执行 `dev`, 提示如下时，即代理服务器启动成功：
 
 ```bash
-  App running at:
-
   Local:    http://localhost:8080/
   Network:  http://192.168.0.1:8080/
 
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
+info      Starting proxy server.....
+success   Proxy server start on localhost:8899
 ```
 
 访问 `localhost:8899`, 可以在 UI 界面上查看 Network 以及配置代理规则：

package/docs/zh/components/global-proxy.mdx

@@ -11,13 +11,11 @@ Modern.js 提供了开箱即用的全局代理插件 `@modern-js/plugin-proxy`
 安装代理插件并配置代理规则后， 执行 `pnpm run dev` 命令：
 
 ```bash
-  App running at:
-
   Local:    http://localhost:8080/
   Network:  http://192.168.0.1:8080/
 
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
+info      Starting proxy server.....
+success   Proxy server start on localhost:8899
 ```
 
 在控制台中可以看到代理服务器成功启动。

package/docs/zh/configure/app/server/base-url.mdx

@@ -25,8 +25,6 @@ export default defineConfig({
 `dev` 之后可以看到路由访问会加上对应前缀:
 
 ```bash
-App running at:
-
   > Local:    http://localhost:8080/base/
   > Network:  http://192.168.0.1:8080/base/
 ```

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # 路径别名

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 1
 ---
 
 # 样式开发

package/docs/zh/guides/basic-features/data-fetch.mdx

@@ -1,10 +1,11 @@
 ---
-sidebar_position: 4
+title: 数据获取
+sidebar_position: 3
 ---
 
 # 数据获取
 
-Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过这些 API，在 CSR 和 SSR 环境同构的进行开发。
+Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过这些 API，在项目中获取数据。
 
 需要注意的是，这些 API 并不帮助应用发起请求，而是帮助开发者更好地管理数据，提升项目的性能。
 
@@ -216,26 +217,25 @@ export default function UserLayout() {
 
 :::info
 此功能目前是实验性质，后续 API 可能有调整。
-目前仅支持 CSR，敬请期待 Streaming SSR。
 
 :::
 
 创建 `user/layout.loader.ts`，并添加以下代码：
 
 ```ts title="routes/user/layout.loader.ts"
-import { defer } from "@modern-js/runtime/router"
+import { defer } from '@modern-js/runtime/router';
 
 const loader = () =>
-defer({
-  userInfo: new Promise((resolve) => {
+  defer({
+    userInfo: new Promise(resolve => {
       setTimeout(() => {
         resolve({
           age: 1,
-          name: 'user layout'
-        })
-      }, 1000)
-    })
-  })
+          name: 'user layout',
+        });
+      }, 1000);
+    }),
+  });
 
 export default loader;
 ```
@@ -346,7 +346,6 @@ export default async (): Promise<ProfileData> => {
 
 在 SSR 项目中，每个 `loader` 也是一个服务端接口，我们推荐使用 `loader` 替代 http method 为 `get` 的 BFF 函数，作为接口层，避免多一层转发和执行。
 
-
 ## useLoader（旧版）
 
 **`useLoader`** 是 Modern.js 老版本中的 API。该 API 是一个 React Hook，专门提供给 SSR 应用使用，让开发者能同构的在组件中获取数据。

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 # 路由方案
@@ -151,13 +151,13 @@ export default () => {
 
 #### Config
 
-每个 `Layout` 或 `Page` 文件都可以定义一个自己的 `config` 文件，如 `page.config.ts`，该文件中我们约定了一个具名导出 `handle`，
+每个 `Layout`, `$` 或 `Page` 文件都可以定义一个自己的 `config` 文件，如 `page.config.ts`，该文件中我们约定了一个具名导出 `handle`，
 这个字段中你可以定义任意属性：
 
 ```ts title="routes/page.config.ts"
 export const handle = {
-  breadcrumbName: 'profile'
-}
+  breadcrumbName: 'profile',
+};
 ```
 
 定义的这些属性可以通过 [`useMatches`](https://reactrouter.com/en/main/hooks/use-matches) hook 获取：
@@ -165,15 +165,13 @@ export const handle = {
 ```ts title="routes/layout.ts"
 export default () => {
   const matches = useMatches;
-  const breadcrumbs = matches.map(matchedRoute => matchedRoute?.handle?.breadcrumbName);
-  return (
-    <Breadcrumb names={breadcrumbs}>
-    </Breadcrumb>
-  )
-}
+  const breadcrumbs = matches.map(
+    matchedRoute => matchedRoute?.handle?.breadcrumbName,
+  );
+  return <Breadcrumb names={breadcrumbs}></Breadcrumb>;
+};
 ```
 
-
 ### 动态路由
 
 通过 `[]` 命名的文件目录，生成的路由会作为动态路由。例如以下文件目录：
@@ -233,6 +231,7 @@ export default () => {
 ```
 
 当访问任何匹配不到的路径时(如 `/blog/a`)，都会渲染 `routes/$.tsx` 组件，因为这里有 `layout.tsx`，渲染的 UI 如下：
+
 ```tsx
 <RootLayout>
   <BlogLayout>
@@ -254,7 +253,6 @@ params['*']; // => 'aaa/bbb'
 
 `$.tsx` 可以加入到 `routes` 目录下的任意目录中，一个常见的使用示例是添加 `routes/$.tsx` 文件去定制任意层级的 404 内容。
 
-
 ### 无路径布局
 
 当目录名以 \_\_ 开头时，对应的目录名不会转换为实际的路由路径，例如以下文件目录：
@@ -368,6 +366,17 @@ export default () => {
 };
 ```
 
+在组件内做重定向，则可以通过 `useNavigate` hook，示例如下：
+
+```ts title="routes/user/page.ts"
+import { useNavigate } from '@modern-js/runtime/router';
+
+export default () => {
+  const navigate = useNavigate();
+  navigate('/login');
+};
+```
+
 ### 错误处理
 
 `routes/` 下每一层目录中，开发者同样可以定义一个 `error.tsx` 文件，默认导出一个 `<ErrorBoundary>` 组件。
@@ -493,6 +502,7 @@ export const init = (context: RuntimeContext) => {
 ```
 
 :::info
+
 - 该功能目前仅在 Webpack 项目中支持，Rspack 项目暂不支持。
 - 对数据的预加载目前只会预加载 SSR 项目中 [Data Loader](/guides/basic-features/data-fetch) 中返回的数据。
 
@@ -512,14 +522,13 @@ export const init = (context: RuntimeContext) => {
 - 使用 `render`，仅在空闲时对静态资源进行加载，不会与首屏静态资源抢占网络。
 - 在 SSR 场景下，也会对数据进行预取。
 
-import Motivation from '@site-docs/components/convention-routing-motivation'
-
-<Motivation/>
+import Motivation from '@site-docs/components/convention-routing-motivation';
 
-import Practice from '@site-docs/components/routes-practice'
+<Motivation />
 
-<Practice/>
+import Practice from '@site-docs/components/routes-practice';
 
+<Practice />
 
 ## 自控式路由
 
@@ -569,5 +578,3 @@ export default defineConfig({
 ```
 
 如上述配置， 如果关闭了 [`runtime.router`](/configure/app/runtime/router) 配置，并直接使用 `react-router-dom` 进行项目路由管理时，还需要根据 React Router 文档自行包裹 `Provider`。
-
-

package/docs/zh/guides/get-started/quick-start.mdx

@@ -91,23 +91,15 @@ $ pnpm run build
 
 > modern build
 
-info    Create a production build...
-
-info    File sizes after production build:
+info    Staring production build...
+ready   Client compiled in 50ms
+info    Production file sizes:
 
   File                                      Size         Gzipped
-  dist/static/js/lib-corejs.ffeb7fb8.js     214.96 kB    67.23 kB
-  dist/static/js/lib-react.09721b5c.js      152.61 kB    49.02 kB
-  dist/static/js/218.102e2f39.js            85.45 kB     28.5 kB
-  dist/static/js/lib-babel.a7bba875.js      11.93 kB     3.95 kB
-  dist/html/main/index.html                 5.84 kB      2.57 kB
-  dist/static/js/main.3568a38e.js           3.57 kB      1.44 kB
-  dist/static/css/async/304.c3c481a5.css    2.62 kB      874 B
-  dist/asset-manifest.json                  1.48 kB      349 B
-  dist/static/js/async/304.c45706bc.js      1.4 kB       575 B
-  dist/static/js/async/509.fcb06e14.js      283 B        230 B
-
- Client ✔ done in 3.57s
+  dist/static/js/lib-react.09721b5c.js      152.6 kB     49.0 kB
+  dist/html/main/index.html                 5.8 kB       2.5 kB
+  dist/static/js/main.3568a38e.js           3.5 kB       1.4 kB
+  dist/static/css/main.03221f72.css         1.4 kB       741 B
 ```
 
 构建产物默认生成到 `dist/`，目录结构如下：
@@ -135,8 +127,7 @@ $ pnpm run serve
 
 > modern serve
 
-Starting the modern server...
-info    App running at:
+Starting production server...
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/

package/docs/zh/guides/get-started/upgrade.mdx

@@ -8,11 +8,13 @@ sidebar_position: 3
 
 Modern.js 提供了 `upgrade` 命令支持项目升级到最新的 Modern.js 版本。
 
-在项目中执行 `pnpm run upgrade`：
+在项目中执行 `upgrade` 命令：
 
-```bash
-$ pnpm run upgrade
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="run upgrade" />
 
+```bash
 > modern upgrade
 
 [INFO] [项目类型]: Web 应用
@@ -22,11 +24,15 @@ $ pnpm run upgrade
 
 可以看到项目 `package.json` 中的依赖已经更改到最新。
 
+:::tip
+如果项目的 package.json 中没有声明 upgrade 命令，你可以执行 `npx modern upgrade`，效果是等价的。
+:::
+
 ## 指定版本升级
 
 Modern.js 所有的官方包目前都使用**统一版本号**进行发布。
 
-import ReleaseNote from "@site-docs/components/release-note"
+import ReleaseNote from '@site-docs/components/release-note';
 
 <ReleaseNote />
 

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

@@ -177,6 +177,8 @@ export const myPlugin = (): CliPlugin => ({
 });
 ```
 
+注意，只有当前插件的 setup 异步函数执行完毕，才会继续执行下一个插件的 setup 函数。因此，你需要避免在 setup 函数中进行耗时过长的异步操作，防止影响 CLI 启动性能。
+
 ## 添加插件
 
 自定义插件的使用方式可以查看：[plugins (框架插件)](/configure/app/plugins)。下面会介绍 Modern.js 中推荐的插件实现方法。

package/docs/zh/tutorials/first-app/c02-component.mdx

@@ -1,6 +1,7 @@
 ---
 title: 编写 UI 组件
 ---
+
 # 编写 UI 组件
 
 上一章节中，我们学习了如何初始化项目，并使用配置修改 Modern.js 的默认行为。
@@ -9,9 +10,9 @@ title: 编写 UI 组件
 
 为了做更好的 UI 展示和交互，我们引入组件库 [Antd](https://ant.design/index-cn) 来开发，使用 `<List>` 组件来代替原始的列表。先添加依赖：
 
-```bash
-pnpm add antd
-```
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add antd" />
 
 修改 `src/routes/page.tsx`，在顶部导入组件：
 

package/package.json

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