@modern-js/main-doc 2.11.0 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @modern-js/main-doc
 
+## 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
+
+- 9e5044d: doc: 修正文档中使用@edenx/runtime 的部分
+  doc: Correct the sections in the document that use @edenx/runtime.
+- 9328fb9: feat: prebundle theme
+
+  feat: 预打包主题
+
+  - @modern-js/builder-doc@2.12.0
+
 ## 2.11.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/icon.mdx

@@ -1,16 +1,56 @@
 ---
-title: icon.png
+title: icon
 sidebar_position: 2
 ---
-# icon.png
 
-When `config/icon.png` exist, it can inject app icon information into the html page at build time:
+# Icon
 
+## Set favicon
+
+When there is a `favicon.*` file in the `config` directory of the project root directory, Modern.js will automatically set the file to the [html.favicon](/configure/app/html/favicon) config to generate the favicon icon for the page:
+
+```
+./config
+└── favicon.ico
 ```
-.config
+
+After the build is complete, you can see that the following tags are automatically generated in the HTML:
+
+```html
+<link rel="icon" href="/favicon.ico" />
+```
+
+### Order
+
+When setting up the favicon, Modern.js looks for files in the following order:
+
+- favicon.png
+- favicon.jpg
+- favicon.jpeg
+- favicon.svg
+- favicon.ico
+
+## Set app icon
+
+When there is an `icon.*` file in the `config` directory of the project root directory, Modern.js will automatically set the file to the [html.appIcon](/configure/app/html/app-icon) config, it is used to generate the apple-touch-icon icon for the iOS system.
+
+```
+./config
 └── icon.png
 ```
 
-the app icon `link` meta will be injected into the html, as follows:
+After the build is complete, you can see that the following tags are automatically generated in the HTML:
+
+```html
+<link rel="apple-touch-icon" sizes="180*180" href="/static/image/icon.png" />
+```
+
+### Order
+
+When setting the app icon, Modern.js looks for files in the following order:
 
-![app-icon](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/api/app-icon.png)
+- icon.png
+- icon.jpg
+- icon.jpeg
+- icon.svg
+- icon.ico

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/bundler-chain.mdx

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

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

@@ -19,13 +19,14 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
 
 ## Install
 
-The `@modern-js/plugin-swc` plugin needs to be installed before use.
+First, you need to execute `pnpm run new` to enable the SWC compile:
 
 ```bash
-pnpm add @modern-js/plugin-swc -D
+? Action: Enable features
+? 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';