@modern-js/main-doc 2.12.0 → 2.13.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @modern-js/main-doc
 
+## 2.13.1
+
+### Patch Changes
+
+- @modern-js/builder-doc@2.13.1
+
+## 2.13.0
+
+### Patch Changes
+
+- e91ec97: feat(app-tools): export mergeConfig function
+
+  feat(app-tools): 导出 mergeConfig 函数
+
+- 42700c1: chore: improve ssr docs, add more use case for node/web code split
+  chore: 优化 ssr 文档，为 node/web 代码分割添加更多使用场景
+- Updated dependencies [1feacdc]
+- Updated dependencies [348306d]
+- Updated dependencies [42700c1]
+  - @modern-js/builder-doc@2.13.0
+
 ## 2.12.0
 
 ### Patch Changes

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

@@ -84,7 +84,7 @@ Options:
 
 ### Analyze Bundle
 
-execute `npx modern build --analyze` command，can produce an HTML file that analyzes the volume of the bundle while packaging the production code:
+execute `npx modern build --analyze` command, can produce an HTML file that analyzes the volume of the bundle while packaging the production code:
 
 ```
 Bundle Analyzer saved report to /example/dist/report.html

package/docs/en/apis/app/hooks/api/framework/lambda.mdx

@@ -4,7 +4,7 @@ sidebar_position: 1
 ---
 # lambda/*.[tj]s
 
-Declaring API routing in BFF framework mode. Except [some files](/apis/app/hooks/api/framework/lambda#allow-list)，files in `api/` are registered as routes.
+Declaring API routing in BFF framework mode. Except [some files](/apis/app/hooks/api/framework/lambda#allow-list), files in `api/` are registered as routes.
 
 :::info
 use `api/` need execute new command to enable the 「BFF」 feature.
@@ -40,7 +40,7 @@ Dynamic named routing parameters can be supported by creating folders or files w
 - `api/lambda/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
 - `api/lambda/article/[id]/info.ts` -> `$BASENAME/article/:id/info`
 
-the `$BASENAME` can be configured in `modern.config.js`，the default value is `/api`.
+the `$BASENAME` can be configured in `modern.config.js`, the default value is `/api`.
 
 ### Allow List
 

package/docs/en/apis/app/hooks/api/functions/api.mdx

@@ -4,7 +4,7 @@ sidebar_position: 1
 ---
 # **/*.[tj]s
 
-Declaring API routing in BFF function mode. Except [some files](/apis/app/hooks/api/functions/api#allow-list)，files in `api/` are registered as routes.
+Declaring API routing in BFF function mode. Except [some files](/apis/app/hooks/api/functions/api#allow-list), files in `api/` are registered as routes.
 
 :::info
 use `api/` need execute new command to enable the 「BFF」 feature.
@@ -40,7 +40,7 @@ Dynamic named routing parameters can be supported by creating folders or files w
 - `api/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
 - `api/article/[id]/info.ts` -> `$BASENAME/article/:id/info`
 
-the `$BASENAME` can be configured in `modern.config.js`，the default value is `/api`.
+the `$BASENAME` can be configured in `modern.config.js`, the default value is `/api`.
 
 ### Allow List
 
@@ -56,7 +56,7 @@ By default, all files in the `api/` will be parsed as BFF function. but we also
 
 In addition to the above routing rules, the function definition and export in the code also have conventions.
 
-function need named exports，and the name of the exported function is the HTTP Method:
+function need named exports, and the name of the exported function is the HTTP Method:
 
 ```ts
 export const get = async () => {

package/docs/en/apis/app/hooks/api/functions/app.mdx

@@ -4,7 +4,7 @@ sidebar_position: 3
 ---
 # _app.[tj]s
 
-in BFF function mode，this file can add middleware before [BFF 函数](/apis/app/hooks/api/functions/api).
+in BFF function mode, this file can add middleware before [BFF 函数](/apis/app/hooks/api/functions/api).
 
 :::note
 For detail, see [hook](/apis/app/runtime/bff/hook)

package/docs/en/apis/app/hooks/api/test.mdx

@@ -2,9 +2,10 @@
 title: test.[tj]s
 sidebar_position: 2
 ---
+
 # test.[tj]s
 
-App's BFF test file，support for writing test cases in the `api/` directory which file with suffix `.test.[tj]s`.
+App's BFF test file, support for writing test cases in the `api/` directory which file with suffix `.test.[tj]s`.
 
 :::info
 To use unit test and integration test, you need to execute the `new` command in advance to enable the `unit test/integration test`.

package/docs/en/apis/app/hooks/config/mock.mdx

@@ -4,4 +4,4 @@ sidebar_position: 5
 ---
 # mock/
 
-when `config/mock/index.js` exist，Modernjs auto start the Mock service in the development.
+when `config/mock/index.js` exist, Modernjs auto start the Mock service in the development.

package/docs/en/apis/app/hooks/config/upload.mdx

@@ -42,7 +42,7 @@ Whether in [custom HTML](/guides/basic-features/html), or in any HTML file under
 <script src="/upload/index.js"></script>
 ```
 
-if [`output.assetPrefix`](/configure/app/output/asset-prefix) is configured，add this prefix directly using template syntax:
+if [`output.assetPrefix`](/configure/app/output/asset-prefix) is configured, add this prefix directly using template syntax:
 
 ```html
 <script src="<%=assetPrefix %>/upload/index.js"></script>

package/docs/en/apis/app/hooks/server/test.mdx

@@ -4,7 +4,7 @@ sidebar_position: 2
 ---
 # test.[tj]s
 
-App's Web Server test file，support for writing test cases in the `server/` directory which file with suffix `.test.[tj]s`.
+App's Web Server test file, support for writing test cases in the `server/` directory which file with suffix `.test.[tj]s`.
 
 :::info
 To use unit test and integration test, you need to execute the `new` command in advance to enable the `unit test/integration test`.

package/docs/en/apis/app/hooks/src/app.mdx

@@ -49,6 +49,6 @@ export default AppWrapper;
 ```
 
 :::note
-In multi-entry App，each entry can have a `App.[jt]sx`, for detail, see [Entry](/guides/concept/entries).
+In multi-entry App, each entry can have a `App.[jt]sx`, for detail, see [Entry](/guides/concept/entries).
 
 :::

package/docs/en/apis/app/hooks/src/pages.mdx

@@ -84,7 +84,7 @@ When the entire App needs a global `layout`, it can be achieved through `pages/_
 import React from 'react';
 import UserLayout from 'xxxx';
 
-export default const App = ({Component, ...pageProps}:{ Component: React.ComponentType}) => {
+export const App = ({Component, ...pageProps}:{ Component: React.ComponentType}) => {
   return (
     <UserLayout>
       <Component {...pageProps} />

package/docs/en/apis/app/runtime/app/define-config.mdx

@@ -13,7 +13,7 @@ import { defineConfig } from '@modern-js/runtime';
 
 Runtime configurations can usually be configured under the `runtime` of the `modern.config.js`, such as the [router](/configure/app/runtime/router) configuration.
 
-The configuration in `modern.config.js` is determined at build time，If some configuration parameters are obtained at runtime, or if the configuration parameters are from a module (such as a component), then need use `defineConfig` API configuration on runtime.
+The configuration in `modern.config.js` is determined at build time, If some configuration parameters are obtained at runtime, or if the configuration parameters are from a module (such as a component), then need use `defineConfig` API configuration on runtime.
 
 :::info
 `@modern-js/app-tools` has the same name API, Used to provide **TS type for configuration**, please distinguish them.

package/docs/en/apis/app/runtime/core/bootstrap.mdx

@@ -33,7 +33,7 @@ type BootStrap<T = unknown> = (
 ### Input
 
 - `AppComponent`: reactElement instance created by [`createApp`](./create-app).
-- `rootId`: DOM root element id to mount，like `"root"`.
+- `rootId`: DOM root element id to mount, like `"root"`.
 - `root`: ReactDOM.create the return value, which is used in the scenario where the root needs to destroy the component outside the bootstrap function.
 - `ReactDOM`: ReactDOM object for distinguishing between React 18 and React 17 APIs.
 
@@ -56,7 +56,7 @@ bootstrap(WrappedApp, 'root', undefined, ReactDOM);
 ```
 
 :::info
-since `@modern-js/runtime/plugins` is a alias，when used in a ts project, its type needs to be declared，Just add the following type declarations to `src/modern-app-env.d.ts`:
+since `@modern-js/runtime/plugins` is a alias, when used in a ts project, its type needs to be declared, Just add the following type declarations to `src/modern-app-env.d.ts`:
 
 ```ts
 declare module '@modern-js/runtime/plugins';

package/docs/en/apis/app/runtime/core/use-loader.mdx

@@ -3,7 +3,11 @@ title: useLoader
 ---
 # useLoader
 
-Isomorphic API，usually used to make asynchronous requests. When SSR, the server level uses `useLoader` to prefetch the data, and the browser side also reuses this part of the data.
+Isomorphic API, usually used to make asynchronous requests. When SSR, the server level uses `useLoader` to prefetch the data, and the browser side also reuses this part of the data.
+
+:::tip
+When using Rspack as the bundler, the useLoader API is not currently supported.
+:::
 
 ## Usage
 
@@ -47,7 +51,7 @@ function useLoader(loaderFn: LoaderFn, options: Options): ReturnData;
   - `onError`: error callback.
   - `initialData`: the initial data before the first execution,.
   - `skip`: when the value is `true`, the function does not execute.
-  - `params`: when the result of the `params` serialization changes，the function is re-executed. `params` is also passed in as the second argument of the function.
+  - `params`: when the result of the `params` serialization changes, the function is re-executed. `params` is also passed in as the second argument of the function.
   - `static`: when the value is `true`, `useLoader` is used for [SSG](/guides/advanced-features/ssg).
 
 ### Return Value

package/docs/en/apis/app/runtime/model/auto-actions.mdx

@@ -8,7 +8,7 @@ import ReduckTip from "@site-docs-en/components/reduck-tip"
 
 <ReduckTip />
 
-Reduck can automatically generate Actions according to the type of State，for easy to modify State.
+Reduck can automatically generate Actions according to the type of State, for easy to modify State.
 
 :::tip
 can use [`runtime.state.autoActions`](/configure/app/runtime/state#autoactions) close auto actions feature.
@@ -19,7 +19,7 @@ can use [`runtime.state.autoActions`](/configure/app/runtime/state#autoactions)
 
 ### Basic Data Type
 
-State type in `string`、`number`、`boolean`、`null`，generate `setState` Action.
+State type in `string`、`number`、`boolean`、`null`, generate `setState` Action.
 
 ```tsx title="example"
 const fooModel = model('foo').define({
@@ -48,7 +48,7 @@ function App() {
 
 ### Array
 
-State type is Array，generate the following Actions:
+State type is Array, generate the following Actions:
 
 - `push`: adds one or more elements to the end of the array.
 - `pop`: removes the last element from the array.
@@ -57,9 +57,9 @@ State type is Array，generate the following Actions:
   - usage: `arr.unshift(element1, ..., elementN)`
   - `elementN`: the element or elements to add to the beginning of the array.
 - `filter`: filter element.
-{/* 语义与原生方法不同，待修改 API  */}
+{/* 语义与原生方法不同, 待修改 API  */}
 - `concat`: concat array.
-{/* 语义与原生方法不同，待修改 API  */}
+{/* 语义与原生方法不同, 待修改 API  */}
 - `splice`: modify the array by deleting or replacing existing elements or adding new elements in place, and return the modified array(Note that it is different from the native `splice` return value).
   - usage: `splice(start[, deleteCount[, item1[, item2[, ...]]]])`
   - `start`: specifies the start position of the modification(counting from 0).
@@ -93,7 +93,7 @@ function App() {
 
 ### PlainObject
 
-State type is PlainObject，base on the names contained in State，generate `set${key}`(Camel-Case) Actions.
+State type is PlainObject, base on the names contained in State, generate `set${key}`(Camel-Case) Actions.
 
 ```tsx title="example"
 const fooModel = model('foo').define({

package/docs/en/apis/app/runtime/model/connect.mdx

@@ -2,9 +2,10 @@
 sidebar_position: 5
 title: connect
 ---
+
 # connect
 
-import ReduckTip from "@site-docs-en/components/reduck-tip"
+import ReduckTip from '@site-docs-en/components/reduck-tip';
 
 <ReduckTip />
 

package/docs/en/apis/app/runtime/model/create-app.mdx

@@ -30,7 +30,7 @@ function createApp(config: AppConfig): object;
 
 - `config`
   - `StoreConfig`: the same as [`createStore`](./create-store.mdx) params.
-  - `devTools`: the default value is `true`. when it is an object type，configuring [Options](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md) of Redux DevTools.
+  - `devTools`: the default value is `true`. when it is an object type, configuring [Options](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md) of Redux DevTools.
   - `autoActions`: the default value is `true`.if [auto generate Actions](./auto-actions.mdx).
 
 ### Return Value

package/docs/en/apis/app/runtime/model/handle-effect.mdx

@@ -65,7 +65,7 @@ interface State {
 }
 ```
 
-if `result` is `false`，then returned State has no `result`:
+if `result` is `false`, then returned State has no `result`:
 
 ```ts
 interface State {
@@ -80,13 +80,13 @@ interface State {
 
 - `combineMode`: the default value is `"merge"`. Get fulfilled state results. There are two ways to deal with it (The data types that can be automatically processed here are also limited to simple object or array types):
 
-  - `"merge"`: the previous data is merged with the current data. the data is an array type, operation is similar to `[].concat(lastData, currentData)`. the data is an object，operation is similar to `{...lastData, ...curData}`.
+  - `"merge"`: the previous data is merged with the current data. the data is an array type, operation is similar to `[].concat(lastData, currentData)`. the data is an object, operation is similar to `{...lastData, ...curData}`.
   - `"replace"`: the current data directly replaces the previous data.
 
 - `omitResultNamespace`: the default value is `false`. When the result is an object type, you want to mount the result directly on the State of the Model, rather than on "result", you can set it to true. For example:
 
 ```ts
-// the result: {user: 'xx', email: 'xx'}，
+// the result: {user: 'xx', email: 'xx'},
 // config handleEffect({ omitResultNamespace: true })
 // get State like follows:
 {

package/docs/en/apis/app/runtime/model/model_.mdx

@@ -33,7 +33,7 @@ Used to define the detailed structure of the Model, supporting passing in an obj
 
 `function define(modelDesc: ModelDesc): Model;`
 
-- modelDesc: `ModelDesc`，definition of Model structure，includes `state`、`computed`、`actions`、`effects` etc. props.
+- modelDesc: `ModelDesc`, definition of Model structure, includes `state`、`computed`、`actions`、`effects` etc. props.
 
 ```tsx title="example"
 const fooModel = model('foo').define({
@@ -59,7 +59,7 @@ const fooModel = model('foo').define({
 `function define((context: Context, utils: Utils) => ModelDesc): Model;`
 
 - `context`: Reduck Context, can get underlying `store` object. `store` support all Redux Store [API](https://redux.js.org/api/store), also mounts the `use` method for consuming the Model, and the `unmount` method for unmounting the Model.
-- utils: commonly used tool like `use`、`onMount`. `use` is the same as `store.use`，`onMount` is the hook function after the Model is mounted.
+- utils: commonly used tool like `use`、`onMount`. `use` is the same as `store.use`, `onMount` is the hook function after the Model is mounted.
 
 {/* TODO: @anchao 调整类型  */}
 ```ts

package/docs/en/apis/app/runtime/model/use-model.mdx

@@ -38,8 +38,8 @@ function useModel(
 
 Returns an array with each value:
 
-- state: return value of `stateSelector`. if there is no `stateSelector`，will combine all incoming Model States(including derived states) and return them. If there is an attribute of the same name in the State of different Models, the following State will override the previous State. when `state` changes，the component call `useModel` will re-render.
-- actions: return value of `actionSelector`. if there is no `actionSelector`，will combine all incoming Model Action(including Effect) and return them. If there is an attribute of the same name in the Action of different Models, the following Action will override the previous Action.
+- state: return value of `stateSelector`. if there is no `stateSelector`, will combine all incoming Model States(including derived states) and return them. If there is an attribute of the same name in the State of different Models, the following State will override the previous State. when `state` changes, the component call `useModel` will re-render.
+- actions: return value of `actionSelector`. if there is no `actionSelector`, will combine all incoming Model Action(including Effect) and return them. If there is an attribute of the same name in the Action of different Models, the following Action will override the previous Action.
 - subscribe: A function that subscribes to State changes. This function is called when the State of any Model passed in changes.
 
 ## Example

package/docs/en/apis/app/runtime/model/use-static-model.mdx

@@ -8,7 +8,7 @@ import ReduckTip from "@site-docs-en/components/reduck-tip"
 
 <ReduckTip />
 
-If want to consume a Model in the form of React Hook in the component，and can get the current latest state at any time，but you don't want the Model state to be updated, which will cause the component to be re-rendered, we can use `useStaticModel`.
+If want to consume a Model in the form of React Hook in the component, and can get the current latest state at any time, but you don't want the Model state to be updated, which will cause the component to be re-rendered, we can use `useStaticModel`.
 
 `useStaticModel` API is same as `useModel`.For detail, see [`useModel`](./use-model.mdx).
 
@@ -16,7 +16,7 @@ To ensure that the latest state is always available, be careful not to deconstru
 
 ```tsx
 function App() {
-  // ❌ Do not deconstruct state，but can deconstruct actions.
+  // ❌ Do not deconstruct state, but can deconstruct actions.
   const [{ username }, { logout }] = useStaticModel(userModel);
 
   // ✅ True Usage.

package/docs/en/apis/app/runtime/model/use-store.mdx

@@ -18,7 +18,7 @@ function useStore(): ReduckStore;
 
 ### Return Type
 
-- ReduckStore: Reduck Store，type refer to the return type of [createStore](./create-store.mdx).
+- ReduckStore: Reduck Store, type refer to the return type of [createStore](./create-store.mdx).
 
 :::info More
 [Use Model](/guides/topic-detail/model/use-model).

package/docs/en/apis/app/runtime/router/router.mdx

@@ -2,6 +2,7 @@
 title: router
 sidebar_position: 1
 ---
+
 # router
 
 :::info

package/docs/en/apis/app/runtime/ssr/pre-render.mdx

@@ -35,8 +35,8 @@ function PreRender(props: Props): React.Component
 
 ### Input
 
-- `interval`: set the time the cache keep fresh，seconds. During this time, the cache will be used directly and not invoke asynchronous rendering.
-- `staleLimit`: sets the time when the cache is completely expired，seconds.During this time, The cache can be returned and asynchronous rendering will be invoke, otherwise must wait for the re-rendered result.
+- `interval`: set the time the cache keep fresh, seconds. During this time, the cache will be used directly and not invoke asynchronous rendering.
+- `staleLimit`: sets the time when the cache is completely expired, seconds.During this time, The cache can be returned and asynchronous rendering will be invoke, otherwise must wait for the re-rendered result.
 - `level`: sets the calculation rule level for the cache identity, usually used with `includes` and `matches`. The default value is `0`.
 
 ```bash

package/docs/en/apis/app/runtime/testing/render.mdx

@@ -39,7 +39,7 @@ function render(ui: React.ReactElement<any>, options: Options): RenderResult;
 
 - `ui`: the React component that needs to be rendered.
 - `options`: render options.
-  - `container`: the dom which component mounted. by default create a `div` element，and auto append to `document.body`. the default value is `document.body.append(document.createElement('div'))`.
+  - `container`: the dom which component mounted. by default create a `div` element, and auto append to `document.body`. the default value is `document.body.append(document.createElement('div'))`.
   - `baseElement`: Used to specify the `basename` used in `queries`. If `container` is specified, the default value is the value of `container`, otherwise it is `document.body`.
   - `hydrate`: If set to `true`, the [ReactDOM.hydrate](https://reactjs.org/docs/react-dom.html#hydrate) rendering component is used. The default value is `false`.
   - `wrapper`: a react component that can be used to customize rendering logic.

package/docs/en/components/enable-bff.mdx

@@ -6,7 +6,7 @@ import { Tabs, Tab as TabItem } from "@theme";
 <Tabs>
   <TabItem value="express" label="Express.js" default>
 
-```ts title="edenx.config.ts"
+```ts title="modern.config.ts"
 import expressPlugin from '@modern-js/plugin-express';
 import bffPlugin from '@modern-js/plugin-bff';
 
@@ -18,7 +18,7 @@ export default defineConfig({
   </TabItem>
   <TabItem value="koa" label="Koa.js">
 
-```ts title="edenx.config.ts"
+```ts title="modern.config.ts"
 import koaPlugin from '@modern-js/plugin-koa';
 import bffPlugin from '@modern-js/plugin-bff';
 

package/docs/en/configure/app/html/script-loading.mdx

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

package/docs/en/configure/app/output/ssg.mdx

@@ -143,7 +143,7 @@ The `headers` set in the route override the `headers` set in the entry.
 
 By default, **Conventional Routing** all turn on SSG. Modern.js provides another field to prevent the default SSG behavior.
 
-For example, the following directory structure ，`/`、`/user` and `/user/profle` all have SSG enabled:
+For example, the following directory structure , `/`、`/user` and `/user/profle` all have SSG enabled:
 
 ```bash
 .

package/docs/en/configure/app/plugins.mdx

@@ -23,9 +23,9 @@ This config **is used to configure the Modern.js framework plugin**. If you need
 
 There are three different type of framework plugins built into the Modern.js:
 
-- `CLI Plugin`，for local development, compilation and build phases, can extend various capabilities on the command line and compilation phases.
-- `Server Plugin`，for server-level.
-- `Runtime Plugin`，for runtime.
+- `CLI Plugin`, for local development, compilation and build phases, can extend various capabilities on the command line and compilation phases.
+- `Server Plugin`, for server-level.
+- `Runtime Plugin`, for runtime.
 
 The ability to customize CLI plugins is currently open Modern.js, and the Server plugin and Runtime plugin will be available in the future.
 

package/docs/en/configure/app/source/disable-entry-dirs.mdx

@@ -14,7 +14,7 @@ For example, when the configuration and directory structure is as follows:
 ```ts title="modern.config.ts"
 export default defineConfig({
   source: {
-    disableEntryDirs: './src/one',
+    disableEntryDirs: ['./src/one'],
   },
 });
 ```

package/docs/en/configure/app/tools/swc.mdx

@@ -26,7 +26,7 @@ First, you need to execute `pnpm run new` to enable the SWC compile:
 ? Enable features: Enable SWC Compile
 ```
 
-After the installation，please register the SWC plugin in the `modern.config.ts` file, then the SWC compilation and compression will be enabled.
+After the installation, please register the SWC plugin in the `modern.config.ts` file, then the SWC compilation and compression will be enabled.
 
 ```ts title="modern.config.ts"
 import appTools, { defineConfig } from '@modern-js/app-tools';

package/docs/en/configure/app/usage.mdx

@@ -19,17 +19,33 @@ Server runtime configuration can be configured in the `modern.server-runtime.con
 
 ## Configure in the configuration file
 
-Modern.js configuration files are defined in the root path of the project, and supports `.js`, `.ts` and `.mjs` formats:
+Modern.js configuration files are defined in the root path of the project, and supports `.ts`, `.js` and `.mjs` formats:
 
-- `modern.config.js`
 - `modern.config.ts`
+- `modern.config.js`
 - `modern.config.mjs`
 
-### modern.config.js
+### modern.config.ts (recommended)
 
-You can use JavaScript syntax in the `modern.config.js` file and it is more flexible than in the `package.json` file.
+We recommend using configuration files in `.ts` format, which provides friendly TypeScript type hints to help you avoid configuration errors.
 
-For example, you can define configuration options for function types in `modern.config.js`:
+Import the `defineConfig` tool function from `@modern-js/app-tools`, which will help you with configuration type derivation and type completion:
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  source: {
+    alias: {
+      '@common': './src/common',
+    },
+  },
+});
+```
+
+### modern.config.js
+
+If you are developing a non-TypeScript project, you can use the configuration file in .js format:
 
 ```js title="modern.config.js"
 export default {
@@ -51,24 +67,6 @@ export default {
 };
 ```
 
-### modern.config.ts (recommended)
-
-We recommend using configuration files in `.ts` format, which provides friendly TypeScript type hints to help you avoid configuration errors.
-
-Import the `defineConfig` tool function from `@modern-js/app-tools`, which will help you with configuration type derivation and type completion:
-
-```ts title="modern.config.ts"
-import { defineConfig } from '@modern-js/app-tools';
-
-export default defineConfig({
-  source: {
-    alias: {
-      '@common': './src/common',
-    },
-  },
-});
-```
-
 ### 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.
@@ -200,3 +198,47 @@ modern.config.local.ts
 modern.config.local.js
 modern.config.local.mjs
 ```
+
+## Merge Multiple Configurations
+
+In some cases, you may need to merge multiple configurations into one configuration. You can use the `mergeConfig` util to merge multiple configurations.
+
+The `mergeConfig` function accepts an array as a parameter, and each item in the array is a configuration object. `mergeConfig` will deeply merge each configuration object in the array, automatically merge multiple functions into an array, and returns a merged configuration object.
+
+### Example
+
+```ts title="modern.config.ts"
+import { mergeConfig } from '@modern-js/app-tools';
+
+const config1 = {
+   dev: {
+     port: 3000,
+   },
+   tools: {
+     postcss: () => console. log('config1');
+   },
+};
+const config2 = {
+   dev: {
+     port: 3001,
+   },
+   tools: {
+     postcss: () => console. log('config2');
+   },
+};
+
+const mergedConfig = mergeConfig([config1, config2]);
+```
+
+In the above example, the merged configuration object is:
+
+```ts
+const mergedConfig = {
+  dev: {
+    port: 3001,
+  },
+  tools: {
+    postcss: [() => console.log('config1'), () => console.log('config2')],
+  },
+};
+```

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

@@ -114,7 +114,7 @@ For example, following the example, a `GET` interface can be exported.
 export const get = async () => {
   return {
     name: 'Modern.js',
-    desc: '现代 web 工程方案',
+    desc: 'Web engineering system',
   };
 };
 ```
@@ -125,14 +125,14 @@ Following the example below, a `POST` interface can be exported.
 export const post = async () => {
   return {
     name: 'Modern.js',
-    desc: '现代 web 工程方案',
+    desc: 'Web engineering system',
   };
 };
 ```
 
 - 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/docs/en/guides/advanced-features/code-split.mdx

@@ -17,7 +17,7 @@ When you use Modern.js [Conventional routing](/guides/basic-features/routes#conv
 
 ## import
 
-use dynamic `import()`，`import` The JS modules pass to this API will be packaged into a separate JS file as a new packaging entry, for example:
+use dynamic `import()`, `import` The JS modules pass to this API will be packaged into a separate JS file as a new packaging entry, for example:
 
 ```ts
 import('./math').then(math => {
@@ -60,7 +60,7 @@ For detail, see [React lazy](https://reactjs.org/docs/code-splitting.html#reactl
 
 ## loadable
 
-use `loadable` API，for example:
+use `loadable` API, for example:
 
 ```ts
 import loadable from '@modern-js/runtime/loadable';

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

@@ -4,7 +4,7 @@ sidebar_position: 8
 ---
 # ESLint
 
-**Modern.js ESLint Rules** is the full set of **ESLint** rules，includes `@modern-js` (Lint rules for Node.js projects) and `@modern-js-app` (Lint rules for web projects).
+**Modern.js ESLint Rules** is the full set of **ESLint** rules, includes `@modern-js` (Lint rules for Node.js projects) and `@modern-js-app` (Lint rules for web projects).
 
 More ESLint usage is described below with specific questions.