@modern-js/main-doc 2.22.1 → 2.23.1

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @modern-js/main-doc
 
+## 2.23.1
+
+### Patch Changes
+
+- Updated dependencies [4d4dca0]
+  - @modern-js/builder-doc@2.23.1
+
+## 2.23.0
+
+### Patch Changes
+
+- 8a93276: docs(main): update basic features alias doc
+
+  docs(main): 更新基础功能 -- 别名文档
+
+- 7e6fb5f: chore: publishConfig add provenance config
+
+  chore: publishConfig 增加 provenance 配置
+
+- 372b950: docs(main): update plugin config doc
+
+  docs(main): 更新插件配置文档
+
+- f28b485: docs(main): update faq doc
+
+  docs(main): 更新 faq 文档
+
+- f264c4a: docs(main): update html template doc
+
+  docs(main): 更新 HTML 模板文档
+
+- 5cba7c4: docs(main): update bff config doc
+
+  docs(main): 更新 BFF 配置文档
+
+- ef865f2: docs(main): update config server doc
+
+  docs(main): 更新 server 配置文档
+
+- 8bb0e14: chore: review code split docs
+  chore: 审查代码分割文档
+- Updated dependencies [7e6fb5f]
+- Updated dependencies [692cc0e]
+  - @modern-js/builder-doc@2.23.0
+
 ## 2.22.1
 
 ### Patch Changes

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

@@ -112,6 +112,7 @@ For example, add application entry, enable some optional features such as Tailwi
 Usage: modern new [options]
 
 Options:
+  --lang <lang>          set the language (zh or en) for the new command.
   -d, --debug            using debug mode to log something (default: false)
   -c, --config <config>  set default generator config(json string)
   --dist-tag <tag>       use specified tag version for its generator
@@ -136,7 +137,7 @@ In the project, execute the `new` command to enable features as follows:
 
 ```bash
 $ npx modern new
-? Please select the operation you want: Enable features
+? Please select the operation you want: Enable Features
 ? Please select the feature name: (Use arrow keys)
 ❯ Enable Tailwind CSS
   Enable BFF
@@ -162,11 +163,10 @@ Usage: modern serve [options]
 Options:
   -c --config <config>  configuration file path, which can be a relative path or an absolute path
   -h, --help            show command help
-  --web-only            only run web service
   --api-only            only run API service
 ```
 
-By default, the project will run in `localhost:8080`, you can modify the Server port number with `server.port`:
+By default, the project will run in `localhost:8080`, you can modify the server port number with `server.port`:
 
 ```js
 export default defineConfig({
@@ -180,7 +180,7 @@ export default defineConfig({
 
 Execute the command `npx modern upgrade` in the project, by default, dependencies in the `package.json` are updated to the latest version.
 
-```
+```bash
 Usage: modern upgrade [options]
 
 Options:
@@ -194,7 +194,7 @@ Options:
 
 The `modern inspect` command is used to view the [Modern.js Builder config](https://modernjs.dev/builder/en/guide/basic/builder-config.html) and webpack config of the project.
 
-```
+```bash
 Usage: modern inspect [options]
 
 Options:

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

@@ -2,6 +2,7 @@
 title: storybook/
 sidebar_position: 7
 ---
+
 # storybook/
 
 Modern.js supports debugging using Storybook. When configuring Storybook, you need to configure it in the `config/storybook` directory of the project.
@@ -12,3 +13,26 @@ Please refer to [Storybook Configuration](https://storybook.js.org/docs/react/co
 Enabling the Visual Testing (Storybook) mode function requires running the new command to enable it under the project first.
 
 :::
+
+#### Example
+
+For the webpack configuration of the Storybook Manager app section, you can configure it by adding the `./config/storybook/main.js` file to configure it.
+
+```js
+// ./config/storybook/main.js
+
+module.exports = {
+  // it controls the Storybook manager app
+  managerWebpack: async (config, options) => {
+    // update config here
+    return config;
+  },
+};
+```
+
+### Limitation
+
+There are some limitations when using the `config/storybook` directory for configuration:
+
+- The location where the Story file is stored cannot be modified, that is, the `stories` configuration cannot be modified in the `main.js` file.
+- It is not supported to modify Webpack and Babel related configurations in `main.js`, related requirements can be passed through [`tools.webpack`](/configure/app/tools/webpack.html) /[`tools.babel`](/configure/app/tools/babel.html) modify.

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

@@ -6,7 +6,7 @@ sidebar_position: 7
 
 Application project Storybook files.
 
-You can create files in the `*.stories.[tj]sx` format in the project source code directory `src/` as Storybook files.
+You can create files in the `*.stories.(js|jsx|ts|tsx|mdx)` format in the project source code directory `src/` as Storybook files.
 
 Run the `npm run dev story` command in the project to use these files to debug relevant content in Storybook.
 

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

@@ -3,7 +3,7 @@ title: bootstrap
 ---
 # bootstrap
 
-Used to start and mount App, usually without manual calls. This API is only required when using [Custom Bootstrap](/guides/concept/entries#custom-bootstrap).
+Used to start and mount App, usually not manually called. This API is only required when using [Custom Bootstrap](/guides/concept/entries#custom-bootstrap).
 
 ## Usage
 
@@ -32,10 +32,10 @@ type BootStrap<T = unknown> = (
 
 ### Input
 
-- `AppComponent`: reactElement instance created by [`createApp`](./create-app).
-- `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.
+- `AppComponent`: The ReactElement instance created by [`createApp`](./create-app).
+- `rootId`: DOM root element id to mount, such as `"root"`.
+- `root`: The return value of ReactDOM.createRoot, used for scenarios where the root needs to be destroyed outside of the bootstrap function.
+- `ReactDOM`: The ReactDOM object, used to differentiate between React 18 and React 17 APIs.
 
 ## Example
 

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

@@ -3,10 +3,10 @@ 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.
+`useLoader` is an Isomorphic API, usually used to make asynchronous requests. During Server-Side Rendering (SSR), the server uses `useLoader` to prefetch the data, which is then reused on the client side.
 
 :::tip
-When using Rspack as the bundler, the useLoader API is not currently supported.
+The `useLoader` API is currently not supported when using Rspack as the bundler.
 :::
 
 ## Usage

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

@@ -3,7 +3,7 @@ title: useModuleApps
 ---
 # useModuleApps
 
-Returns the React components of all micro-front-end sub-applications for freely controlled routing.
+Returns the React components of all micro-front-end sub-applications, allowing for flexible control over routing.
 
 ## Usage
 
@@ -107,7 +107,7 @@ After starting the application in this way, accessing the `/dashboard` route wil
 
 ## Load Animation
 
-The transition animation of the component loading process can be customized in the following ways.
+You can customize the transition animation of the component loading process as follows.
 
 ```tsx title=App.tsx
 function App() {

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

@@ -3,7 +3,7 @@ title: useRuntimeContext
 ---
 # useRuntimeContext
 
-This function is mainly used to get the runtime context and can only be used in function components.
+Used to get the runtime context and can only be used in function components.
 
 ## Usage
 

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

@@ -41,7 +41,7 @@ function render(ui: React.ReactElement<any>, options: Options): RenderResult;
 - `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'))`.
   - `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`.
+  - `hydrate`: If set to `true`, the [ReactDOM.hydrate](https://react.dev/reference/react-dom/hydrate) rendering component is used. The default value is `false`.
   - `wrapper`: a react component that can be used to customize rendering logic.
   - `queries`: customize some own `queries`.
 

package/docs/en/components/bff-proxy-path-rewrite.mdx

@@ -0,0 +1,16 @@
+Path rewriting can also be performed here, such as proxying the request sent to `localhost:8080/api/topics` to `https://cnodejs.org/api/v1/topics`.
+
+```js title="modern.server-runtime.config.js"
+import { defineConfig } from '@modern-js/app-tools/server';
+export default defineConfig({
+  bff: {
+    proxy: {
+      '/api': {
+        target: 'https://cnodejs.org',
+        pathRewrite: { '/api/topics': '/api/v1/topics' },
+        changeOrigin: true,
+      },
+    },
+  },
+});
+```

package/docs/en/components/bff-proxy-principle.mdx

@@ -0,0 +1 @@
+BFF Proxy uses the powerful [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware). For more advanced usage, please refer to its [documentation](https://github.com/chimurai/http-proxy-middleware#options).

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

@@ -0,0 +1,3 @@
+:::caution
+Please enable BFF functionality in the current application project root directory using [new](/apis/app/commands#modern-new) first.
+:::

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

@@ -1,16 +1,37 @@
 - **Type:** `string | Object`
 - **Default:** `null`
 
-When this option is configured, the development environment will start a global proxy, similar to [Fiddler](https://www.telerik.com/fiddler), [Charles](https://www.charlesproxy.com/) and other web proxy debugging tools, which can be used to view, modify HTTP/HTTPS requests, responses, and can also be used as a proxy server.
+This option is used to configure a global proxy based on [whistle](https://wproxy.org/whistle/) in the development environment, which can be used to view and modify HTTP/HTTPS requests, responses, and can also be used as a proxy server.
 
-:::tip
-Using this option requires advance installation `@modern-js/plugin-proxy`.
+### Register Plugin
 
-:::
+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
+
+# pnpm
+pnpm add @modern-js/plugin-proxy -D
+```
+
+After the installation, please register the plugin in the `modern.config.ts` file:
+
+```ts title="modern.config.ts"
+import appTools, { defineConfig } from '@modern-js/app-tools';
+import proxyPlugin from '@modern-js/plugin-proxy';
 
-### Object
+export default defineConfig({
+  plugins: [appTools(), proxyPlugin()],
+});
+```
 
-Using this option requires that the value of `Object` be installed in advance, the `key` of the object corresponds to the matching `pattern`, and the `value` of the object corresponds to the matching `target`.
+### Object Type
+
+When the value of `dev.proxy` is object type, the `key` of the object corresponds to the matching `pattern`, and the `value` of the object corresponds to the matching `target`.
 
 Example:
 
@@ -26,9 +47,11 @@ export default defineConfig({
 });
 ```
 
-### String
+Please refer to [whistle - Matching Patterns](https://wproxy.org/whistle/pattern.html) for detailed usage.
+
+### String Type
 
-When the value is `string`, it can be used to specify a separate proxy file, for example:
+When the value of `dev.proxy` is string type, it can be used to specify a separate proxy file, for example:
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -47,10 +70,7 @@ module.exports = {
 };
 ```
 
-:::info
-Modern.js global proxy implementation is based on [whistle](https://wproxy.org/whistle/), for more matching patterns, please refer to: [Matching Patterns](https://wproxy.org/whistle/pattern.html)
-
-:::
+### Start Proxy
 
 Execute `dev`, when the prompt is as follows, the proxy server starts successfully:
 
@@ -68,7 +88,7 @@ Access the `localhost:8899` to view the Network and configure proxy rules on the
 
 ![proxy UI](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/dev-proxy.png)
 
-:::caution Caution
+:::info
 The https agent automatically installs the certificate to obtain root privileges. Please enter the password as prompted. ** The password is only used when the certificate is trusted and will not be leaked or used for other links **.
 
 :::

package/docs/en/configure/app/bff/enable-handle-web.mdx

@@ -7,13 +7,13 @@ title: enableHandleWeb
 - **Type:** `boolean`
 - **Default:** `false`
 
-:::caution
-First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
-:::
+import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
 
-By default, the BFF service can only handle requests from the BFF API.
+<EnableBFFCaution />
 
-When this value is set to `true`, page request traffic also goes through the BFF, and the logic built into Modern.js for page rendering defaults to running as the last middleware for the BFF service.
+By default, the BFF service can only handle requests for BFF APIs.
+
+When this value is set to `true`, page request will also pass through BFF, and the default logic for page rendering built in Modern.js will run as the last middleware of the BFF service.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/docs/en/configure/app/bff/prefix.mdx

@@ -7,18 +7,18 @@ sidebar_label: prefix
 - **Type:** `string`
 - **Default:** `/api`
 
-:::caution
-First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
-:::
+import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
 
-By default, the route access BFF prefix's directory is `/api`, with the following directory structure:
+<EnableBFFCaution />
+
+By default, the prefix for accessing routes in the BFF API directory is `/api`, as shown in the following directory structure:
 
 ```bash
 api
 └── hello.ts
 ```
 
-The corresponding route for `api/hello.ts` access is `localhost:8080/api/hello`.
+The route corresponding to `api/hello.ts` when accessed is `localhost:8080/api/hello`.
 
 This configuration option can modify the default route prefix:
 
@@ -30,4 +30,4 @@ export default defineConfig({
 });
 ```
 
-The corresponding `api/hello.ts` access route is `localhost:8080/api-demo/hello`.
+The corresponding route for `api/hello.ts` when accessed is `localhost:8080/api-demo/hello`.

package/docs/en/configure/app/bff/proxy.mdx

@@ -7,16 +7,13 @@ sidebar_label: proxy
 - **Type:** `Record<string, string>`
 - **Default:** `{}`
 
-:::caution Caution
-First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
+import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
 
-:::
-
-With simple configuration, no code is required, Modern.js automatically forwards requests. Requests sent to Modern.js BFF server are proxied to the specified service.
+<EnableBFFCaution />
 
-BFF Proxy uses the powerful [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware), and if you need more advanced usage, you can check its [documentation](https://github.com/chimurai/http-proxy-middleware#options).
+With simple configuration, Modern.js can automatically proxy requests sent to the BFF server to the specified service.
 
-Add the following configuration to `modern.server-runtime.config.ts`, you can turn on the proxy:
+Add the following configuration to `modern.server-runtime.config.js` to enable proxy:
 
 ```ts title="modern.server-runtime.config.ts"
 import { defineConfig } from '@modern-js/app-tools/server';
@@ -29,41 +26,31 @@ export default defineConfig({
 });
 ```
 
-Assuming that the starting Modern.js BFF server's service address is `localhost:8080`, all requests whose path starts with `api` will be intercepted, such as requests sent to `localhost:8080/api/v1/topics` will be proxied to `https://cnodejs.org/api/v1/topics`.
+Assuming the address of Modern.js BFF server is `localhost:8080`, all requests starting with `api` will be proxied to `https://cnodejs.org`, for example, the request to `localhost:8080/api/v1/topics` will be proxied to `https://cnodejs.org/api/v1/topics`.
 
-You can do path rewriting, such as proxying requests sent to `localhost:8080/api/topics` to `https://cnodejs.org/api/v1/topics`.
+import BFFProxyPathRewrite from "@site-docs/components/bff-proxy-path-rewrite";
 
-```js title="modern.server-runtime.config.js"
-import { defineConfig } from '@modern-js/app-tools/server';
-export default defineConfig({
-  bff: {
-    proxy: {
-      '/api': {
-        target: 'https://cnodejs.org',
-        pathRewrite: { '/api/topics': '/api/v1/topics' },
-        changeOrigin: true,
-      },
-    },
-  },
-});
-```
+<BFFProxyPathRewrite />
 
-Unlike [dev.proxy](/configure/app/dev/proxy), the proxy described in this section only works on requests entering the BFF/API service; at the same time, this configuration can be used not only in the development environment, but also in the production environment. The corresponding request will also be proxied in the production environment.
+Unlike [dev.proxy](/configure/app/dev/proxy), the proxy here only applies to requests entering the BFF/API service; at the same time, this configuration can not only be used in the development environment, but also proxies corresponding requests in the production environment.
 
-## Common usage
+import BFFProxyPrinciple from "@site-docs/components/bff-proxy-principle";
 
-### Solve interface cross-domain problems
+<BFFProxyPrinciple />
 
-In the process of project development, because web pages and interface services are not deployed under the same domain name, cross-domain problems are often encountered.
+## Common Usage
 
-There are many ways to solve cross-domain problems, and here we use `bff.proxy` to easily solve cross-domain problems.
+### Solving Cross-Domain Issues for APIs
+
+During project development, cross-domain issues are often encountered because web pages and API services are not deployed under the same domain name.
+There are many ways to solve cross-domain issues, and here we can easily solve them using `bff.proxy`.
 
 :::info
-In BFF proxy mode, if you do not need to write the BFF interface, the API directory can be deleted; at this time, BFF proxy will still be enabled.
+Under BFF proxy mode, if you don't need to write BFF code, the API directory can be deleted; BFF proxy will still be enabled.
 
 :::
 
-As shown below, in the `modern.server-runtime.config.js`, write the following configuration; we send all web pages to the same domain that request proxies starting with `/api` to another domain's service.
+As shown below, the following configuration in `modern.server-runtime.config.ts` will proxy all web page requests starting with `/api` to a service on another domain with the same domain.
 
 ```ts title="modern.server-runtime.config.ts"
 export default defineServerConfig({
@@ -74,3 +61,5 @@ export default defineServerConfig({
   },
 };
 ```
+
+

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

@@ -17,7 +17,7 @@ This option **is used to configure the Modern.js Builder plugins**. If you need
 
 - Use [plugins](/configure/app/builder-plugins) to configure Modern.js framework plugins.
 - Use [tools.webpack](/configure/app/tools/webpack) or [tools.webpackChain](/configure/app/tools/webpack-chain) to configure webpack plugins.
-- Use [tools.babel](/configure/app/tools/babel) to configure babel plugins.
+- Use [tools.babel](/configure/app/tools/babel) to configure Babel plugins.
 
 ## When to use
 

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

@@ -9,39 +9,39 @@ sidebar_position: 9
 
 Used to configure custom Modern.js framework plugins.
 
-For the way to write custom plugins, please refer to [How to Write Plugins](/guides/topic-detail/framework-plugin/implement).
+Refer to [How to Develop Plugins](/guides/topic-detail/framework-plugin/implement) for how to write custom plugins.
 
-## Precautions
+## Note
 
-This config **is used to configure the Modern.js framework plugin**. If you need to configure other types of plugins, please select the corresponding configs:
+This option is used to configure framework plugins. If you need to configure other types of plugins, please choose the corresponding configuration method:
 
-- Use [builderPlugins](/configure/app/builder-plugins) to configure Modern.js Builder plugins.
-- Use [tools.webpack](/configure/app/tools/webpack) or [tools.webpackChain](/configure/app/tools/webpack-chain) to configure webpack plugins.
-- Use [tools.babel](/configure/app/tools/babel) to configure babel plugins.
+- To configure Modern.js Builder plugins, use the [builderPlugins](/configure/app/builder-plugins) option.
+- To configure webpack plugins, use the [tools.webpack](/configure/app/tools/webpack) or [tools.webpackChain](/configure/app/tools/webpack-chain) options.
+- To configure Babel plugins, use the [tools.babel](/configure/app/tools/babel) option.
 
-## Plugin type
+## Plugin types
 
-There are three different type of framework plugins built into the Modern.js:
+Modern.js has three types of plugins:
 
-- `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 plugins`, applicable to local development, compilation and construction stages, can extend various capabilities in the command line and compilation stages.
+- `Server plugins`, applicable to the server.
+- `Runtime plugins`, applicable to the front-end 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.
+Currently, Modern.js has opened up the ability to customize CLI plugins, and Server plugins and Runtime plugins will be opened up later.
 
 ## Plugin execution order
 
-By default, custom plugins are executed sequentially in the order of an array of `plugins`, Modern.js built-in plugins are executed earlier than custom plugins.
+By default, custom plugins are executed in the order of the `plugins` array, and the execution time of built-in Modern.js plugins is earlier than that of custom plugins.
 
-When the plugin uses related fields that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields, see [Relationship between plugins](/guides/topic-detail/framework-plugin/relationship).
+When the plugin sets options that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields. Refer to [Relationship between plugins](/guides/topic-detail/framework-plugin/relationship) for more information.
 
 ## Example
 
-Below is an example of using the CLI plugin.
+The following is an example of using CLI plugins.
 
-### Using plugins on npm
+### Use plugins on npm
 
-To use the plugin on npm, you need to install the plugin through the package manager and import it.
+To use plugins from npm registry, you need to first install the plugins , and import them in `modern.config.ts`.
 
 ```ts title="modern.config.ts"
 import myPlugin from 'my-plugin';
@@ -53,7 +53,7 @@ export default defineConfig({
 
 ### Use local plugins
 
-Using the plugin in the local code repository, you can import it directly through the relative path import.
+To use local plugins, import them directly using a relative path.
 
 ```ts title="modern.config.ts"
 import myPlugin from './config/plugin/myPlugin';
@@ -65,7 +65,7 @@ export default defineConfig({
 
 ### Plugin configuration
 
-If the plugin provides some custom configuration options, you can pass in the configuration through the parameters of the plugin function.
+If the plugin provides some custom configuration options, they can be passed in as parameters to the plugin function.
 
 ```ts title="modern.config.ts"
 import myPlugin from 'my-plugin';

package/docs/en/configure/app/runtime/intro.mdx

@@ -5,7 +5,7 @@ sidebar_position: 1
 
 # Overview
 
-This section describes the configuration of the Runtime plugin.
+This section describes configuration of the Runtime plugin.
 
 ## Configuration
 
@@ -32,13 +32,34 @@ export default defineConfig({
 
 #### DefineConfig
 
-Configure use [`defineConfig`](/apis/app/runtime/app/define-config) API:
+Configure using [`defineConfig`](/apis/app/runtime/app/define-config) API:
 
 :::info
-When there is a function in the runtime configuration, it can only be configured in this way.
+When there is a function in the runtime configuration, it can only be configured this way.
 
 :::
 
+import { Tabs, Tab as TabItem } from "@theme";
+
+<Tabs>
+  <TabItem value="layout" label="Conventional Routing" default>
+
+```tsx title="src/routes/layout.tsx"
+import type { AppConfig } from '@modern-js/runtime';
+
+export const config = (): AppConfig => {
+  return {
+    router: {
+      supportHtml5History: false
+    }
+  }
+};
+```
+
+  </TabItem>
+
+  <TabItem value="app" label="Self-controlled Routing">
+
 ```ts title="src/App.tsx"
 import { defineConfig } from '@modern-js/runtime';
 
@@ -55,6 +76,9 @@ defineConfig(App, {
 export default App;
 ```
 
+  </TabItem>
+</Tabs>
+
 :::info
 Using runtime configuration, you can solve the problem that runtime plugin configuration needs to be at runtime to get specific content.
 
@@ -63,7 +87,7 @@ Runtime plugin runtime configuration and configuration directly in `modern.confi
 :::
 
 :::warning
-defineConfig can only define the specific configuration content of the Runtime plugin. To confirm whether to enable the plugin, it needs to be determined through the configuration in `modernConfig` in `package.json` or `modern.config.ts`.
+The `defineConfig` API only accepts the specific configuration of Runtime plugins. Enabling the plugin is determined through `modern.config.ts` configuration."
 
 :::
 

package/docs/en/configure/app/runtime/master-app.mdx

@@ -35,6 +35,6 @@ interface AppInfo {
 
 ### Other Config
 
-Under the `masterApp` configuration, developers can pass through the configuration items of Garfish.
+In the `masterApp` configuration, developers can pass through options supported by Garfish
 
 All supported configuration items [see here](https://garfishjs.org/api/run/#%E5%8F%82%E6%95%B0).

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

@@ -11,14 +11,14 @@ import RouterLegacyTip from "@site-docs-en/components/router-legacy-tip"
 - **Type:** `boolean | Object`
 - **Default:** `false`
 
-When `router` is enabled, routing management of conventional routes provided by Modern.js is supported. Based on [React Router 6](https://reactrouter.com/).
+When enabled, the router option provides routing management for Modern.js conventional routes. It is based on [React Router 6](https://reactrouter.com/).
 
 ## basename
 
 - **Type:** `string`
 - **Default:** ``
 
-The basename of the app for situations where you can't deploy to the root of the domain, but a sub directory.
+The basename option specifies the subpath where the app is deployed, for situations where it cannot be deployed to the root domain.
 
 ## supportHtml5History