@modern-js/main-doc 2.3.0 → 2.5.0

package/en/configure/app/tools/less.mdx

@@ -5,7 +5,7 @@ sidebar_label: less
 # tools.less
 
 :::tip
-This config is provided by Modern.js Builder, more detail can see [tools.less](https://modernjs.dev/builder/en/api/config-tools.html#tools-less)。
+This config is provided by Modern.js Builder, more detail can see [tools.less](https://modernjs.dev/builder/en/api/config-tools.html#toolsless).
 :::
 
 import Main from '@modern-js/builder-doc/docs/en/config/tools/less.md'

package/en/configure/app/tools/minify-css.mdx

@@ -5,7 +5,7 @@ sidebar_label: minifyCss
 # tools.minifyCss
 
 :::tip
-This config is provided by Modern.js Builder, more detail can see [tools.minifyCss](https://modernjs.dev/builder/en/api/config-tools.html#tools-minifycss)。
+This config is provided by Modern.js Builder, more detail can see [tools.minifyCss](https://modernjs.dev/builder/en/api/config-tools.html#toolsminifycss).
 :::
 
 import Main from '@modern-js/builder-doc/docs/en/config/tools/minifyCss.md'

package/en/configure/app/tools/postcss.mdx

@@ -5,7 +5,7 @@ sidebar_label: postcss
 # tools.postcss
 
 :::tip
-This config is provided by Modern.js Builder, more detail can see [tools.postcss](https://modernjs.dev/builder/en/api/config-tools.html#tools-postcss)。
+This config is provided by Modern.js Builder, more detail can see [tools.postcss](https://modernjs.dev/builder/en/api/config-tools.html#toolspostcss).
 :::
 
 import Main from '@modern-js/builder-doc/docs/en/config/tools/postcss.md'

package/en/configure/app/tools/pug.mdx

@@ -5,7 +5,7 @@ sidebar_label: pug
 # tools.pug
 
 :::tip
-This config is provided by Modern.js Builder, more detail can see [tools.pug](https://modernjs.dev/builder/en/api/config-tools.html#tools-pug)。
+This config is provided by Modern.js Builder, more detail can see [tools.pug](https://modernjs.dev/builder/en/api/config-tools.html#toolspug).
 :::
 
 import Main from '@modern-js/builder-doc/docs/en/config/tools/pug.md'

package/en/configure/app/tools/rspack.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: rspack
+---
+
+# tools.rspack
+
+:::tip
+This config is provided by Modern.js Builder, more detail can see [tools.rspack](https://modernjs.dev/builder/en/api/config-tools.html#toolsrspack).
+:::
+
+import Main from '@modern-js/builder-doc/docs/en/config/tools/rspack.md'
+
+<Main />

package/en/configure/app/tools/sass.mdx

@@ -5,7 +5,7 @@ sidebar_label: sass
 # tools.sass
 
 :::tip
-This config is provided by Modern.js Builder, more detail can see [tools.sass](https://modernjs.dev/builder/en/api/config-tools.html#tools-sass)。
+This config is provided by Modern.js Builder, more detail can see [tools.sass](https://modernjs.dev/builder/en/api/config-tools.html#toolssass).
 :::
 
 import Main from '@modern-js/builder-doc/docs/en/config/tools/sass.md'

package/en/configure/app/tools/style-loader.mdx

@@ -5,7 +5,7 @@ sidebar_label: styleLoader
 # tools.styleLoader
 
 :::tip
-This config is provided by Modern.js Builder, more detail can see [tools.styleLoader](https://modernjs.dev/builder/en/api/config-tools.html#tools-styleloader)。
+This config is provided by Modern.js Builder, more detail can see [tools.styleLoader](https://modernjs.dev/builder/en/api/config-tools.html#toolsstyleloader).
 :::
 
 import Main from '@modern-js/builder-doc/docs/en/config/tools/styleLoader.md'

package/en/configure/app/tools/styled-components.mdx

@@ -5,7 +5,7 @@ sidebar_label: styledComponents
 # tools.styledComponents
 
 :::tip
-This config is provided by Modern.js Builder, more detail can see [tools.styledComponents](https://modernjs.dev/builder/en/api/config-tools.html#tools-styledcomponents)。
+This config is provided by Modern.js Builder, more detail can see [tools.styledComponents](https://modernjs.dev/builder/en/api/config-tools.html#toolsstyledcomponents).
 :::
 
 import Main from '@modern-js/builder-doc/docs/en/config/tools/styledComponents.md'

package/en/configure/app/tools/tailwindcss.mdx

@@ -32,4 +32,4 @@ When the value is of type `Function`, the object returned by the function is mer
 
 The `theme` attribute is not allowed, otherwise the build will fail. Modern.js use [source.designSystem](/configure/app/source/design-system) as the Tailwind CSS Theme configuration.
 
-Other uses are consistent with [Tailwind CSS](https://tailwindcss.com/docs/configuration)。
+Other uses are consistent with [Tailwind CSS](https://tailwindcss.com/docs/configuration).

package/en/configure/app/tools/terser.mdx

@@ -5,7 +5,7 @@ sidebar_label: terser
 # tools.terser
 
 :::tip
-This config is provided by Modern.js Builder, more detail can see [tools.terser](https://modernjs.dev/builder/en/api/config-tools.html#tools-terser)。
+This config is provided by Modern.js Builder, more detail can see [tools.terser](https://modernjs.dev/builder/en/api/config-tools.html#toolsterser).
 :::
 
 import Main from '@modern-js/builder-doc/docs/en/config/tools/terser.md'

package/en/configure/app/tools/ts-checker.mdx

@@ -5,7 +5,7 @@ sidebar_label: tsChecker
 # tools.tsChecker
 
 :::tip
-This config is provided by Modern.js Builder, more detail can see [tools.tsChecker](https://modernjs.dev/builder/en/api/config-tools.html#tools-tschecker)。
+This config is provided by Modern.js Builder, more detail can see [tools.tsChecker](https://modernjs.dev/builder/en/api/config-tools.html#toolstschecker).
 :::
 
 import Main from '@modern-js/builder-doc/docs/en/config/tools/tsChecker.md'

package/en/configure/app/tools/ts-loader.mdx

@@ -5,7 +5,7 @@ sidebar_label: tsLoader
 # tools.tsLoader
 
 :::tip
-This config is provided by Modern.js Builder, more detail can see [tools.tsLoader](https://modernjs.dev/builder/en/api/config-tools.html#tools-tsloader)。
+This config is provided by Modern.js Builder, more detail can see [tools.tsLoader](https://modernjs.dev/builder/en/api/config-tools.html#toolstsloader).
 :::
 
 import Main from '@modern-js/builder-doc/docs/en/config/tools/tsLoader.md'

package/en/configure/app/tools/webpack-chain.mdx

@@ -5,7 +5,7 @@ sidebar_label: webpackChain
 # tools.webpackChain
 
 :::tip
-This config is provided by Modern.js Builder, more detail can see [tools.webpackChain](https://modernjs.dev/builder/en/api/config-tools.html#tools-webpackchain)。
+This config is provided by Modern.js Builder, more detail can see [tools.webpackChain](https://modernjs.dev/builder/en/api/config-tools.html#toolswebpackchain).
 :::
 
 import Main from '@modern-js/builder-doc/docs/en/config/tools/webpackChain.md'

package/en/configure/app/tools/webpack.mdx

@@ -5,7 +5,7 @@ sidebar_label: webpack
 # tools.webpack
 
 :::tip
-This config is provided by Modern.js Builder, more detail can see [tools.webpack](https://modernjs.dev/builder/en/api/config-tools.html#tools-webpack)。
+This config is provided by Modern.js Builder, more detail can see [tools.webpack](https://modernjs.dev/builder/en/api/config-tools.html#toolswebpack).
 :::
 
 import Main from '@modern-js/builder-doc/docs/en/config/tools/webpack.md'

package/en/configure/app/usage.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 0
 ---
 
-# Configure to use
+# Configuring Modern.js
 
 There are two configurations in the Modern.js, a compile configuration and a server runtime configuration.
 
@@ -69,6 +69,69 @@ export default defineConfig({
 });
 ```
 
+### Export Configuration Function
+
+Modern.js supports exporting a function in the configuration file, and you can dynamically compute the configuration in the function and return it to Modern.js.
+
+```js title="modern.config.js"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig(({ env, command }) => ({
+  source: {
+    alias: {
+      '@foo': env === 'development' ? './src/foo.dev.ts' : './src/foo.prod.ts',
+    },
+  },
+}));
+```
+
+This function takes the following parameters:
+
+- `env`: same as the value of `process.env.NODE_ENV`.
+  - When running `modern dev` or `modern start`, the value of `env` is `development`.
+  - When running `modern build` or `modern serve`, the value of `env` is `production`.
+  - When running `modern test`, the value of `env` is `test`.
+- `command`: corresponds to the currently running command, such as `dev`, `start`, `build`, `serve`.
+
+### Export Async Function
+
+Modern.js also supports exporting an asynchronous function in the configuration file, you can perform some asynchronous operations in the function:
+
+```js title="modern.config.js"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig(async ({ env, command }) => {
+  const result = await someAsyncFunction();
+
+  return {
+    html: {
+      title: result,
+    },
+  };
+});
+```
+
+### Specify the Configuration File
+
+You can specify the name of the configuration file using the `--config` option.
+
+For example, if you need to use the `modern.prod.config.js` file when running build, you can add the following scripts to `package.json`:
+
+```json title="package.json"
+{
+  "scripts": {
+    "dev": "modern dev",
+    "build": "modern build --config modern.prod.config.js"
+  }
+}
+```
+
+You can also abbreviate the `--config` option to `-c`:
+
+```bash
+$ modern build -c modern.prod.config.js
+```
+
 ## Configure in package.json (not recommended)
 
 In addition to configuration files, configuration options can also be set the `modernConfig` field in the `package.json`, such as:

package/en/guides/advanced-features/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Advanced Features",
+  "position": 5,
+  "collapsed": false
+}

package/en/guides/advanced-features/bff/bff-proxy.mdx

@@ -25,6 +25,6 @@ export default defineConfig({
 ```
 
 :::note
-For more detail, see [bff.proxy](/configure/app/bff/proxy)。For more proxy info, see [Proxy](/guides/basic-features/proxy)。
+For more detail, see [bff.proxy](/configure/app/bff/proxy). For more proxy info, see [Proxy](/guides/basic-features/proxy).
 
 :::

package/en/guides/advanced-features/bff/frameworks.mdx

@@ -31,7 +31,7 @@ export default hook(({ addMiddleware }) => {
 });
 ```
 
-然后添加一个普通的 BFF 函数 `/api/hello.ts`:
+Then add a normal BFF function `/api/hello.ts`:
 
 ```ts
 export default async () => {

package/en/guides/advanced-features/bff/function.mdx

@@ -58,7 +58,7 @@ Function Writing & Framework Writing will introduce soon.
 
 :::
 
-All routes generated by BFF functions have a prefix, and the default value is `/api`. The prefix can be set through [bff.prefix] (/docs/configure/app/bff/prefix).
+All routes generated by BFF functions have a prefix, and the default value is `/api`. The prefix can be set through [bff.prefix](/configure/app/bff/prefix).
 
 Several routing conventions are described as follow.
 
@@ -130,9 +130,9 @@ export const post = async () => {
 };
 ```
 
-- Modern.js supports 9 definitions for HTTP Method: `GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`, can be exported using these methods as functions。
+- Modern.js supports 9 definitions for HTTP Method: `GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`, can be exported using these methods as functions.
 
-- The name is size insensitive，if `GET`，can write `get`、`Get`、`GEt`、`GET`，can be accurately identified. But default export as `export default xxx` will be map to `Get`。
+- The name is size insensitive，if `GET`，can write `get`、`Get`、`GEt`、`GET`，can be accurately identified. But default export as `export default xxx` will be map to `Get`.
 
 - Multiple functions of different Methods can be defined in one file, but if multiple functions of the same Method are defined, only the first will take effect.
 

package/en/guides/advanced-features/code-split.mdx

@@ -56,7 +56,7 @@ function MyComponent() {
 }
 ```
 
-For detail, see [React lazy](https://reactjs.org/docs/code-splitting.html#reactlazy)。
+For detail, see [React lazy](https://reactjs.org/docs/code-splitting.html#reactlazy).
 
 ## loadable
 
@@ -72,7 +72,7 @@ function MyComponent() {
 }
 ```
 
-For detail, see [loadable API](/apis/app/runtime/utility/loadable)。
+For detail, see [loadable API](/apis/app/runtime/utility/loadable).
 
 :::info
 SSR is supported out of the box by `loadable`.

package/en/guides/advanced-features/compatibility.mdx

@@ -48,8 +48,8 @@ Modern.js also provides a runtime Polyfill solution based on browser [UA](https:
 exec `pnpm run new` to enable this features：
 
 ```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「基于 UA 的 Polyfill」功能
+? Action Enable features
+? Enable features Enable UA-based Polyfill Feature
 ```
 
 After executing the command, register the Polyfill plugin in `modern.config.ts`:
@@ -57,7 +57,6 @@ After executing the command, register the Polyfill plugin in `modern.config.ts`:
 ```ts title="modern.config.ts"
 import polyfillPlugin from '@modern-js/plugin-polyfill';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   plugins: [..., polyfillPlugin()],
 });

package/en/guides/advanced-features/eslint.mdx

@@ -43,7 +43,7 @@ pnpm run lint:error
 /* eslint-enable filenames/match-exported */
 ```
 
-:::info 注
+:::info
 在 VS Code 编辑器里输入 eslint，会自动出现关于 "eslint-disable" 的提示框，选择提示选项生成对应注释对。
 
 :::
@@ -74,7 +74,7 @@ pnpm run lint:error
 
 Modern.js 的应用工程、模块工程，源代码目录里都会默认有这个配置文件，是针对 Universal JS 代码设计的。
 
-:::info 注
+:::info
 Universal JS 代码是既能浏览器端也能在服务器端运行的代码。
 
 :::
@@ -106,7 +106,7 @@ module.exports = {
 };
 ```
 
-:::tip 提示
+:::tip
 注意：没有必要使用 `extends` 字段，会自动继承父目录的配置。
 
 :::
@@ -129,7 +129,7 @@ module.exports = {
 
 做完这些操作之后，在业务项目的 `./node_modules` 目录里，这个插件应该只存在一份，并且升级到了你指定的版本。
 
-:::tip 提示
+:::tip
 - Major 版本就是主版本号。更多信息，请阅读【[Semantic Versioning](https://semver.org/#summary)】。
 - 所有被 Modern.js 封装的上游项目（比如 ESLint、[ESLint 插件](https://eslint.org/docs/user-guide/configuring/plugins#plugins)、[React Router](https://reactrouter.com/) 等），也都可以这样升级。
 - Modern.js 也会在每次发版中尽量及时的升级这些上游依赖。

package/en/guides/advanced-features/low-level.mdx

@@ -10,7 +10,7 @@ Modern.js internally integrates tools such as [Babel](https://babeljs.io/), [Typ
 
 Usually, the default configuration can meet most development needs. When there are special needs, it can be achieved through the underlying configuration.
 
-Take configuring Webpack as an example, just add ['tools.webpack'] (/docs/configure/app/tools/webpack) to the modern.config.ts:
+Take configuring Webpack as an example, just add [tools.webpack](/configure/app/tools/webpack) to the modern.config.ts:
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/en/guides/advanced-features/ssg.mdx

@@ -9,8 +9,8 @@ Static Site Generation is a solution for rendering complete static web pages at
 First need to execute `pnpm run new` to enable the SSG features:
 
 ```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「SSG」功能
+? Action Enable features
+? Enable features Enable SSG
 ```
 
 After execute script，register SSG plugin in `modern.config.ts`:
@@ -18,7 +18,6 @@ After execute script，register SSG plugin in `modern.config.ts`:
 ```ts title="modern.config.ts"
 import ssgPlugin from '@modern-js/plugin-ssg';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   output: {
     ssg: true,
@@ -107,11 +106,11 @@ export default defineConfig({
 });
 ```
 
-run `pnpm run build` and `pnpm run serve`，access `http://localhost:8080/about`. In the Preview view, you can see that the page has been rendered。
+run `pnpm run build` and `pnpm run serve`，access `http://localhost:8080/about`. In the Preview view, you can see that the page has been rendered.
 
 Looking at the bundle file, a new `main/about/index.html` file has been added in the `dist/` directory.
 
 :::info
-The above only introduces the single entry, more related content can be viewed [SSG API](/configure/app/output/ssg)。
+The above only introduces the single entry, more related content can be viewed [SSG API](/configure/app/output/ssg).
 
 :::

package/en/guides/advanced-features/ssr.mdx

@@ -44,7 +44,7 @@ And it provides elegant degradation processing. Once the SSR request fails, it w
 However, developers still need to pay attention to the fallback of data, such as `null` values or data returns that do not as expect. Avoid React rendering errors or messy rendering results when SSR.
 
 :::info
-When using Data Loader, data fetching happens before rendering, Modern.js still supports fetching data when the component is rendered. See [Data Fetch](/guides/basic-features/data-fetch)。
+When using Data Loader, data fetching happens before rendering, Modern.js still supports fetching data when the component is rendered. See [Data Fetch](/guides/basic-features/data-fetch).
 
 :::
 
@@ -198,7 +198,7 @@ This is because in the previous request, the SPR has asynchronously obtained the
 It is conceivable that when `interval` is set to 1, users can have the responsive experience of a static page.
 
 :::info
-For more detail, see [`<PreRender>`](/apis/app/runtime/ssr/pre-render)。
+For more detail, see [`<PreRender>`](/apis/app/runtime/ssr/pre-render).
 
 :::
 
@@ -254,11 +254,11 @@ In the second case, the Treeshaking method does not guarantee that the code is c
 For example, the import of `fs-extra` in the code, when it is directly referenced to the component, will cause the CSR to load an error. You can create `.ts` and `.node.ts` files of the same name as a layer of proxy:
 
 ```ts title="compat.ts"
-export { readFileSync } from 'fs-extra';
+export const readFileSync: any = () => {};
 ```
 
 ```ts title="compat.node.ts"
-export const readFileSync: any = () => {};
+export { readFileSync } from 'fs-extra';
 ```
 
 use `./compat` directly into the file. At this time, files with the `.node.ts` suffix will be used first in the SSR environment, and files with the `.ts` suffix will be used in the CSR environment.
@@ -276,7 +276,7 @@ export const loader = () => {
 
 ### Independent File
 
-Both of the above methods will bring some burden to the developer. Modern.js based on [Nested Routing](/guides/basic-features/routes) developed and designed [Data Fetch](/guides/basic-features/data-fetch) to separate CSR and SSR code。
+Both of the above methods will bring some burden to the developer. Modern.js based on [Nested Routing](/guides/basic-features/routes) developed and designed [Data Fetch](/guides/basic-features/data-fetch) to separate CSR and SSR code.
 
 ## Remote Request
 

package/en/guides/advanced-features/testing.mdx

@@ -9,8 +9,8 @@ Modern.js inherits the testing capabilities of [Jest](https://jestjs.io/) by def
 First need to execute `pnpm run new` enable [unit test/integration test] features：
 
 ```
-? 请选择你想要的操作： 启用可选功能
-? 启用可选功能： 启用「单元测试 / 集成测试」功能
+? Action： Enable features
+? Enable features： Enable Unit Test / Integration Test
 ```
 
 After executing the above command, the `"test": "modern test"` command will be automatically generated in package.json.
@@ -20,7 +20,6 @@ register plugin in `modern.config.ts`:
 ```ts title="modern.config.ts"
 import testPlugin from '@modern-js/plugin-testing';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   plugins: [..., testPlugin()],
 });
@@ -28,7 +27,7 @@ export default defineConfig({
 
 ## Test file
 
-Modern.js default recognized test file paths are: `<rootDir>/src/**/*.test.[jt]s?(x)` and `<rootDir>/tests/**/*.test.[jt]s?(x)`。
+Modern.js default recognized test file paths are: `<rootDir>/src/**/*.test.[jt]s?(x)` and `<rootDir>/tests/**/*.test.[jt]s?(x)`.
 
 If you need to customize the test directory, you can configure it with [tools.jest](/configure/app/tools/jest).
 
@@ -40,7 +39,7 @@ Modern.js test support [testing-library](https://testing-library.com/docs/). API
 import { render, screen } from '@modern-js/runtime/testing';
 ```
 
-Other Modern.js supported testing APIs can be found [here](/apis/app/runtime/testing/cleanup)。
+Other Modern.js supported testing APIs can be found [here](/apis/app/runtime/testing/cleanup).
 
 ## transform
 

package/en/guides/advanced-features/web-server.mdx

@@ -22,7 +22,6 @@ Modern.js 作为以客户端为中心的开发框架，对服务端的定制能
 ```ts title="modern.config.ts"
 import serverPlugin from '@modern-js/plugin-server';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   plugins: [..., serverPlugin()],
 });

package/en/guides/basic-features/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Basic Features",
+  "position": 3,
+  "collapsed": false
+}

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

@@ -62,4 +62,4 @@ export default defineConfig({
 });
 ```
 
-for more detail, see 【[API - source.alias](/configure/app/source/alias)】。
+For detailed usage, please refer to [source.alias documentation](/configure/app/source/alias).

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

@@ -90,7 +90,7 @@ export default async ({ params }: LoaderArgs) => {
 };
 ```
 
-当访问 `/user/123` 时，`loader` 函数的参数为 `{ params: { id: '123' } }`。
+When accessing `/user/123`, the parameters of the `loader` function are `{ params: { id: '123' } }`.
 
 #### `request`
 
@@ -220,6 +220,26 @@ Currently, only CSR is supported, so stay tuned for Streaming SSR.
 
 :::
 
+Add the following code to `user/layout.loader.ts`:
+
+```ts title="routes/user/layout.loader.ts"
+import { defer } from "@edenx/runtime/router"
+
+const loader = () =>
+defer({
+  userInfo: new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          age: 1,
+          name: 'user layout'
+        })
+      }, 1000)
+    })
+  })
+
+export default loader;
+```
+
 Add the following code to `user/layout.tsx`:
 
 ```tsx title="routes/user/layout.tsx"
@@ -230,13 +250,6 @@ import {
   Outlet
 } from '@modern-js/runtime/router';
 
-export const loader = () => {
-  return defer({
-    // fetchUserInfo 是一个异步函数，返回用户信息
-    userInfo: fetchUserInfo(),
-  })
-}
-
 export default function UserLayout() {
   const { userInfo } = useLoaderData() as {userInfo: Promise<UserInfo>};
   return (

package/en/guides/basic-features/env-vars.mdx

@@ -167,4 +167,4 @@ const foo = TWO;
 const foo = 1 + 1;
 ```
 
-In most cases, `source.globalVars` is already sufficient to replace variables. But the values passed in by `source.globalVars` will be serialized by JSON by default. So it cannot be replaced like `1 + 1` in the example above，at this time, we need use [`source.define`](/configure/app/source/define)。
+In most cases, `source.globalVars` is already sufficient to replace variables. But the values passed in by `source.globalVars` will be serialized by JSON by default. So it cannot be replaced like `1 + 1` in the example above，at this time, we need use [`source.define`](/configure/app/source/define).

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

@@ -4,7 +4,7 @@ sidebar_position: 9
 ---
 # HTML Template
 
-Modern.js provides **JSX syntax** and **HTML(Ejs) syntax** for customizing HTML template.
+Modern.js provides **JSX syntax** and **HTML(EJS) syntax** for customizing HTML template.
 
 ## JSX syntax
 
@@ -14,14 +14,14 @@ For example the following directory structure:
 
 ```bash
 .
-├── src
-│   ├── Document.tsx
-│   ├── entry-a
-│   │   ├── Document.tsx
-│   │   └── routes
-│   ├── entry-b
-│   │   └── routes
-│   └── modern-app-env.d.ts
+└── src
+    ├── Document.tsx
+    ├── entry-a
+    │   ├── Document.tsx
+    │   └── routes
+    ├── entry-b
+    │    └── routes
+    └── modern-app-env.d.ts
 ```
 
 `entry-a` will take precedence over the `Docoument.[jt]sx` file under the current entry. If the current entry does not have a `Document.[jt]sx` file, such as `entry-b`, it will look for the `Document.[jt]sx` file in the root directory.
@@ -42,7 +42,7 @@ These components are rendered:
 
 - `Body`：Provide the ability of native Body Element, which needs to contain the `<Root>` component internally, and also supports other elements as child elements at the same time, such as adding footers.
 
-- `Root`：React root element `<div id='root'></div>`。the default element id is `id = 'root'`, can set `props.rootId` to change the id。Child components can be added, and will also be rendered into HTML templates, which will be overwritten when React rendering is complete, generally used to implement global Loading.
+- `Root`：React root element `<div id='root'></div>`. the default element id is `id = 'root'`, can set `props.rootId` to change the id.Child components can be added, and will also be rendered into HTML templates, which will be overwritten when React rendering is complete, generally used to implement global Loading.
 
 - `Head`：Provides native Head Element capabilities and automatically populates `<meta>`, as well as the `<Scripts>` component.
 
@@ -193,7 +193,7 @@ In the application root directory, create the `config/html/` directory, which su
 </html>
 ```
 
-HTML Fragments support the use [Lodash template](https://lodash.com/docs/4.17.15#template)。
+HTML Fragments support the use [Lodash template](https://lodash.com/docs/4.17.15#template).
 
 For example, insert a script in `body.html`:
 

package/en/guides/basic-features/mock.mdx

@@ -40,7 +40,7 @@ export default {
 };
 ```
 
-when access `http://localhost:8080/api/getInfo`, the api will return json `{ "data": [1, 2, 3, 4] }`。
+when access `http://localhost:8080/api/getInfo`, the api will return json `{ "data": [1, 2, 3, 4] }`.
 
 ## Return Random Data
 
@@ -77,3 +77,23 @@ export default {
   },
 };
 ```
+
+## Use Mock On Demand
+
+Under the `config/mock/index.ts`, you can also export the `config` to control the Mock service.
+
+```ts
+type MockConfig = {
+  enable: ((req: IncomingMessage, res: ServerResponse) => boolean) | boolean;
+};
+
+export const config = {
+  enable: false
+}
+```
+
+Currently only the `enable` configuration is supported, through which developers can control whether to execute Mock.
+
+:::note
+After modifying `config`, there is no need to restart the service, which will take effect immediately.
+:::