@modern-js/main-doc 2.21.1 → 2.22.1

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

@@ -19,23 +19,9 @@ When using Rspack as the bundler, SWC will be used for transpiling and compressi
 
 ## Install
 
-First, you need to execute `pnpm run new` to enable the SWC compile:
+import EnableSWC from '@modern-js/builder-doc/docs/en/shared/enable-swc.md';
 
-```bash
-? 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.
-
-```ts title="modern.config.ts"
-import appTools, { defineConfig } from '@modern-js/app-tools';
-import swcPlugin from '@modern-js/plugin-swc';
-
-export default defineConfig({
-  plugins: [appTools(), swcPlugin()],
-});
-```
+<EnableSWC />
 
 ## Config
 

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

@@ -6,7 +6,7 @@ title: Frameworks
 
 Modern.js's BFF supports different runtime frameworks, currently Modern.js's BFF supports two runtime frameworks[Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/).
 
-## Function Writing
+## Function Mode
 
 Under the function writing, only the middleware writing method of various runtime frameworks is different, and other implementations are basically the same. Take Express as an example to introduce how to write a middleware by hand in the `api/_ app.ts` and add permission verification:
 
@@ -96,7 +96,7 @@ Refresh the page and you can see that `/api/hello` was accessed successfully:
 
 The above code simulates the way to add middleware to the `/api/_app.ts` to achieve an easy login function. Also, other functions can be implemented in this hook file to extend BFF Server.
 
-## Framework Writing
+## Framework Mode
 
 Under the framework writing, Modern.js does not collect middleware in the `api/_app.ts`, and the running process is controlled by the plugin itself.
 

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

@@ -51,10 +51,10 @@ Execute `pnpm run dev`, then open `http://localhost:8080/` to see that the page
 
 In Modern.js, the BFF function routing system is implemented based on the file system, and it is also a conventional routing system.
 
-In **Function Writing**, All files under `api/` will map to an interface. In **Framework Writing**, All files under `api/lambda` will map to an interface
+In **Function Mode**, All files under `api/` will map to an interface. In **Framework Mode**, All files under `api/lambda` will map to an interface
 
 :::note
-Function Writing & Framework Writing will introduce soon.
+Function Mode & Framework Mode will introduce soon.
 
 :::
 
@@ -69,14 +69,14 @@ Files named `index.[jt]s` are mapped to the previous directory.
 - `api/index.ts` -> `{prefix}/`
 - `api/user/index.ts` -> `{prefix}/user`
 
-### Multi-layer Route
+### Multi-layer Routing
 
 Supports parsing nested files, if you create a nested folder structure, the files will still automatically parse routes in the same way.
 
 - `api/hello.ts` -> `{prefix}/hello`
 - `api/user/list.ts` -> `{prefix}/user/list`
 
-### Dynamic Route
+### Dynamic Routing
 
 Create folders or files named with `[xxx]` to support dynamic named routing parameters.
 

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

@@ -1,19 +1,19 @@
 ---
 sidebar_position: 2
-title: Writing Type
+title: BFF Type
 ---
-# Writing Type
+# BFF Type
 
 Runtime framework support is also an important part of **BFF**. Modern.js supports extending BFF's runtime framework through plugins, and provides a series of built-in plugins, developers can directly use the conventions and ecology of the framework.
 
-The plugin is compatible with most of the specifications of these frameworks, and each framework needs to provide two types of ways to extend the writing of BFF functions, namely **Function Writing** and **Framework Writing**.
+The plugin is compatible with most of the specifications of these frameworks, and each framework needs to provide two types of ways to extend the writing of BFF functions, namely **Function Mode** and **Framework Mode**.
 
 :::note
 Whether the current `api/` directory structure is written as a framework is determined by the corresponding plugin, Modern.js don't care.
 
 :::
 
-## Function Writing
+## Function Mode
 
 When the plugin considers that it is currently written as a function, it must support writing middleware in the `api/_ app.ts` to extend the BFF function.
 
@@ -32,7 +32,7 @@ The writing of middleware for different plugins is not the same, see [Runtime Fr
 
 :::
 
-## Framework Writing
+## Framework Mode
 
 Framework writing is a way of using frame structure to extend BFF functions. Compared with function writing, although frame writing can use more frame structure and make the entire BFF Server clearer in complex scenarios, it is also more complex and requires more attention to the content at the framework level.
 

package/docs/en/guides/advanced-features/rspack-start.mdx

@@ -30,14 +30,14 @@ When using Rspack as the bundler, the following Features are temporarily unavail
 
 :::
 
-## Migrating from webpack to Rspack
+## Enable Rspack build
 
 You can enable Rspack build by running `pnpm run new`:
 
 ```bash
 $ pnpm run new
-? Action: Enable features
-? Enable features: Enable Rspack Build
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Rspack Build
 ```
 
 After executing the command, enable the Rspack build in `modern.config.ts`:
@@ -54,9 +54,9 @@ import appTools, { defineConfig } from '@modern-js/app-tools';
 });
 ```
 
-:::tip
-When migrating from webpack to Rspack, there may have some differences in build and configuration capabilities. For more details, please refer to [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack).
-:::
+## Migrating configuration
+
+After enabling Rspack building capability, further configuration migration is needed by referring to the [Configuration Differences](https://modernjs.dev/builder/en/guide/advanced/rspack-start.html#migrating-from-webpack-to-rspack).
 
 ## The relationship between Rspack and Modern.js versions
 
@@ -81,8 +81,7 @@ For example, if you are using pnpm, you can update the Rspack version with `over
       "@rspack/core": "nightly",
       "@rspack/dev-client": "nightly",
       "@rspack/dev-middleware": "nightly",
-      "@rspack/plugin-html": "nightly",
-      "@rspack/postcss-loader": "nightly"
+      "@rspack/plugin-html": "nightly"
     }
   }
 }

package/docs/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
-? Action Enable features
-? Enable features Enable SSG
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable SSG
 ```
 
 After execute script, register SSG plugin in `modern.config.ts`:

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

@@ -9,8 +9,8 @@ Modern.js integrates the testing capabilities of [Jest](https://jestjs.io/) by d
 First need to execute `pnpm run new` enable [unit test/integration test] features:
 
 ```
-? Action: Enable features
-? Enable features: Enable Unit Test / Integration Test
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Unit Test / Integration Test
 ```
 
 After executing the above command, the `"test": "modern test"` command will be automatically generated in package.json.

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

@@ -27,8 +27,8 @@ Because the full web server cannot be controlled this way, and the extension log
 You can execute the'pnpm run new 'command in the project root directory to enable the "Custom Web Serve" function:
 
 ```bash
-? Action Create project element
-? New "Custom Web Server" source code directory
+? Please select the operation you want: Create Element
+? Please select the type of element to create: New "Custom Web Server" source code directory
 ```
 
 After executing the command, register the `@modern-js/plugin-server` plugin in `modern.config.ts`:

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

@@ -66,8 +66,8 @@ If you need to use other CSS-in-JS libraries such as [styled-jsx](https://www.np
 Follow the steps below to make a selection:
 
 ```bash
-? Action: Enable features
-? Enable features: Enable Tailwind CSS
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Tailwind CSS
 ```
 
 Register the Tailwind plugin in `modern.config.ts`:

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

@@ -32,7 +32,7 @@ export default {
   /* the default method is GET */
   '/api/getExample': { id: 1 },
 
-  /* You can use custom functions to dynamically return data */
+  /* You can use custom functions to dynamically return data, req and res are both Node.js HTTP objects. */
   'POST /api/addInfo': (req, res, next) => {
     res.setHeader('Access-Control-Allow-Origin', '*');
     res.end('200');

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

@@ -182,7 +182,7 @@ Routes generated from file directories named with `[$]` will be treated as dynam
 
 The `routes/user/[id$]/page.tsx` file will be converted to the `/user/:id?` route. All routes under `/user` will match this route, and the `id` parameter is optional. This route is usually used to distinguish between **creation** and **editing**.
 
-In the component, you can use [useParams](/apis/app/runtime/router/router#useparams) to obtain the corresponding named parameter.
+In the component, you can use [useParams](/apis/app/runtime/router/router#useparams) to get the corresponding named parameter.
 
 In the loader, params will be passed as the input parameter of the [loader function](/guides/basic-features/data-fetch#loader-function), and you can get the parameter value through `params.xxx`.
 
@@ -191,7 +191,7 @@ In the loader, params will be passed as the input parameter of the [loader funct
 If you create a `$.tsx` file under the routes directory, it will be treated as the catch-all routing component. When there is no matching route, this component will be rendered.
 
 :::note
-`$.tsx` can be considered as a special `page` route component. When there is a `layout` component in the current directory, `$.tsx` will be rendered as a child component of `layout`.
+`$.tsx` can be considered as a special `page` route component. When there is a `layout.tsx` file in the current directory, `$.tsx` will be rendered as a child component of `layout`.
 :::
 
 For example, the following directory structure:
@@ -215,7 +215,7 @@ params['*']; // => 'aaa/bbb'
 
 ### No-path Layout
 
-When the directory name starts with `__`, the corresponding directory name will not be converted to an actual route path. For example, the following file directory:
+When the directory name starts with `__`, the directory name will not be converted to an actual route path. For example, the following file directory:
 
 ```bash
 .
@@ -449,7 +449,7 @@ However, this also brings a problem: if the chunk corresponding to the route has
 
 In this case, you can define a `Loading` component to display a custom `Loading` component before the static resources are loaded.
 
-To further improve the user experience and reduce loading time, Modern.js supports defining the `prefetch` attribute on the Link component to preload static resources and data. The `prefetch` attribute has three optional values:
+To further improve the user experience and reduce loading time, Modern.js supports defining the `prefetch` attribute on the Link component to preload static resources and data.
 
 ```tsx
 <Link prefetch="intent" to="page">
@@ -461,6 +461,8 @@ To further improve the user experience and reduce loading time, Modern.js suppor
 
 :::
 
+The `prefetch` attribute has three optional values:
+
 - `none`: default value, no prefetching, no additional behavior.
 - `intent`: This is the value we recommend for most scenarios. When you hover over the Link, the corresponding chunk and data defined in the data loader will be loaded automatically. When you move the mouse away, the loading will be cancelled automatically. In our tests, even fast clicks can reduce loading time by about 200ms.
 - `render`: The corresponding chunk and data defined in the Data Loader will be loaded when the Link component is rendered.
@@ -504,8 +506,6 @@ export default () => {
 Modern.js provides a series of optimizations for resource loading and rendering for conventional routing by default, and provides out-of-the-box SSR capabilities. When using self-controlled routing, developers need to encapsulate these capabilities themselves. It is recommended to use conventional routing.
 :::
 
-When using self-controlled routing, if the developer turns off the [`runtime.router`](/configure/app/runtime/router) configuration and uses `react-router-dom` directly, they also need to wrap it according to the React Router documentation.
-
 ## Other
 
 By default, Modern.js will enable the built-in routing scheme, which is React Router.
@@ -518,7 +518,9 @@ export default defineConfig({
 });
 ```
 
-Modern.js exposes the API of React Router from the `@modern-js/runtime/router` namespace for developers to use, ensuring that developers and Modern.js use the same code. In addition, in this case, the React Router code will be bundled into the JS output. If the project already has its own routing scheme or does not need to use client-side routing, this feature can be turned off.
+As mentioned above, when the [`runtime.router`](/configure/app/runtime/router) configuration is enabled, Modern.js will export the API of React Router from the `@modern-js/runtime/router` namespace for developers to use, ensuring that developers and Modern.js are using the same code, and automatically wrapping the `Provider` component according to the router configuration. In addition, in this case, the code of React Router will be packed into the JS output.
+
+If the project already has its own routing plan or does not need to use client-side routing, this feature can be disabled.
 
 ```js
 export default defineConfig({
@@ -527,3 +529,5 @@ export default defineConfig({
   },
 });
 ```
+
+As mentioned above, if the [`runtime.router`](/configure/app/runtime/router) configuration is disabled and `react-router-dom` is used directly for project routing management, the `Provider` needs to be wrapped according to the React Router documentation.

package/docs/en/guides/concept/builder.mdx

@@ -4,31 +4,31 @@ sidebar_position: 2
 
 # Builder
 
-**Modern.js uses [Modern.js Builder](https://modernjs.dev/builder) to build your Web App.**
+**Modern.js uses [Modern.js Builder](https://modernjs.dev/builder/en) to build your Web App.**
 
-Modern.js Builder is one of the core components of Modern.js. It is A build engine for web development. and can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and Rspack, and it uses webpack by default.
+Modern.js Builder is one of the core components of the Modern.js system. It is a build engine for web development scenarios that can be used independently of Modern.js. Modern.js Builder supports multiple bundlers such as webpack and Rspack, and by default uses the most mature webpack for bundling.
 
 ## Build Architecture
 
-From the perspective of building, Modern.js is divided into three layers, from top to bottom:
+From a building perspective, Modern.js is divided into three layers, from top to bottom:
 
-- Upper-layer framework: Modern.js.
-- Universal build engine: Modern.js Builder.
-- Low-level bundlers: webpack and rspack.
+- Upper-level development framework: Modern.js.
+- Common build engine: Modern.js Builder.
+- Low-level bundler: webpack and Rspack.
 
 <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
 
 ## Builder Documentation
 
-Since Modern.js Builder is a module that can be used independently, we provide a separate document for it, the site address is: [modernjs.dev/builder](https://modernjs.dev/builder).
+Since Modern.js Builder is a module that can be used independently, we have provided separate documentation for it, which can be found at [modernjs.dev/builder](https://modernjs.dev/builder/en).
 
-In this document, you can learn about the detailed introduction of Modern.js Builder, and you can also find a complete usage guide for each building features. When you encounter building issues, it is recommended that you first read the Modern.js Builder documentation to solve them.
+In this documentation, you can learn about the detailed introduction of Modern.js Builder, and you can also find complete usage guides for various building capabilities. If you have any building needs or problems, it is recommended that you read the Modern.js Builder documentation first to solve them.
 
-## Builder Config
+## Builder Configuration
 
-The config of Modern.js is inherited from Modern.js Builder, so you can use all build configs provided by Modern.js Builder in Modern.js.
+Modern.js's configuration inherits from Modern.js Builder, so you can use all the build configurations provided by Modern.js Builder in Modern.js.
 
-Take the `html.title` config of Modern.js Builder as an example, you can directly use this config in the `modern.config.ts` file, and it will be automatically passed to Modern.js Builder.
+Taking the `html.title` config option of Modern.js Builder as an example, you can directly use this option in the `modern.config.ts` file, and it will be automatically passed to Modern.js Builder.
 
 ```ts title="modern.config.js"
 export default defineConfig({
@@ -38,10 +38,10 @@ export default defineConfig({
 });
 ```
 
-For details of building configs, please refer to [「Modern.js Builder - Builder Config」](https://modernjs.dev/builder/en/guide/basic/builder-config.html).
+For detailed information about build configuration, please refer to [「Modern.js Builder - Builder Config」](https://modernjs.dev/builder/en/guide/basic/builder-config.html).
 
-## Building Features
+## Builder Capabilities
 
-Modern.js Builder provides a wealth of building features, including dozens of features such as JavaScript compilation, CSS compilation, static resource processing, hot module replacement, code compression, and TS type checking.
+Modern.js Builder provides rich build capabilities, including JavaScript compilation, CSS compilation, static resource processing, code hot update, code compression, TS type checking, and dozens of other capabilities.
 
-We recommend you to read [「Modern.js Builder - All Features」](https://modernjs.dev/builder/en/guide/features.html) to learn all the building features provided by Modern.js Builder.
+We recommend that you read [「Modern.js Builder - All Features」](https://modernjs.dev/builder/en/guide/features.html) to learn about all the features provided by Modern.js Builder.

package/docs/en/guides/concept/entries.mdx

@@ -2,21 +2,21 @@
 sidebar_position: 1
 ---
 
-# Entries
+# Entry
 
-Through this chapter, you can learn about the entry convention in Modern.js and how to customize the entry.
+In this chapter, you will learn about the entry convention in Modern.js and how to customize it.
 
-## What is an Entry
+## What is Entry?
 
-**Entry is the starting module of a page.**
+**Entry refers to the starting module of a page.**
 
-In the Modern.js project, each entry corresponds to an independent page, and also corresponds to a server route. By default, Modern.js will automatically determine the entry of the page based on the directory convention, and also supports customizing the entry through configuration items.
+In a Modern.js project, each entry corresponds to an independent page and a server-side route. By default, Modern.js automatically determines the entry of a page based on directory conventions, but also supports customizing the entry through configuration options.
 
-Many configuration items provided by Modern.js are divided by entry, such as page title, HTML template, page Meta information, whether to enable SSR/SSG, server-side routing rules, etc.
+Many configuration options provided by Modern.js are divided by entry, such as page title, HTML template, page meta information, whether to enable SSR/SSG, server-side routing rules, etc.
 
 ## Single Entry and Multiple Entries
 
-The project initialized by Modern.js is single-entry (SPA), and the project structure is as follows:
+The project initialized by Modern.js is a single entry (SPA) project, with the following structure:
 
 ```
 .
@@ -30,15 +30,15 @@ The project initialized by Modern.js is single-entry (SPA), and the project stru
 └── tsconfig.json
 ```
 
-Modern.js can easily switch from single entry to multiple entry. You can execute `pnpm run new` under the project to create entry through generator:
+In a Modern.js project, you can easily switch from single entry to multiple entries by running `pnpm run new` in the project directory and creating an entry:
 
 ```bash
-? Action: Create project element
-? Create project element: New "entry"
-? Entry name: new-entry
+? Please select the operation you want: Create Element
+? Please select the type of element to create: New "entry"
+? Please fill in the entry name: new-entry
 ```
 
-After execution, Modern.js will automatically generate a new entry directory, and you can see that the `src/` directory has the following structure:
+After running the command, Modern.js will automatically generate a new entry directory. At this point, you can see that the `src/` directory has the following structure:
 
 ```bash
 .
@@ -54,51 +54,55 @@ After execution, Modern.js will automatically generate a new entry directory, an
         └── page.tsx
 ```
 
-The original code was moved to the directory with the same name as the `name` in the `package.json`, and a new directory was created.
+The original entry code has been moved to a directory with the same name as the `name` field in `package.json`, and a `new-entry` entry directory has been created.
 
-After executing `pnpm run dev`, you can see that a `/new-entry` route has been added, and the migrated code route has not changed.
+After running `pnpm run dev`, you can see a new route named `/new-entry` has been added, and the migrated code route has not changed.
 
 :::tip
-Modern.js will use the entry with the same name as the `name` field in the package.json file as the main entry, the route of the main entry is `/`, and the route of other entries is `/{entryName}`.
+Modern.js will use the entry with the same name as the `name` field in `package.json` as the main entry. The route of the main entry is `/`, and the route of other entries is `/{entryName}`.
 
-For example, when `name` in package.json is `myapp`, `src/myapp` will be used as the main entry of the project.
+For example, when the `name` field in `package.json` is `myapp`, `src/myapp` will be the main entry of the project.
 
 :::
 
-## Entry Type
+## Entry Types
 
-Different entry types have different compile and run-time behaviors. When creating a project in Modern.js, developers can manually choose to create a project in **framework mode** or **build mode**. After the creation is complete, you can see that the project template files for different modes are different.
+Different entry types have different compilation and runtime behaviors.
 
-By default, Modern.js will scan the files under `src/` before starting the project, identify the entry, and generate the corresponding server-side route.
+import EntryMode from '@site-docs-en/components/entry-mode.mdx';
+
+<EntryMode />
+
+By default, Modern.js scans the files under `src/` before starting the project, identifies the entry, and generates the corresponding server-side route.
 
 :::tip
-You can change the entry directory to another directory through [source.entriesDir](/configure/app/source/entries-dir).
+You can modify the directory for entry identification by using the [source.entriesDir](/configure/app/source/entries-dir) config.
 
 :::
 
-Not all first-level directories under `src/` will become project entries, and the directory where the entry is located must meet one of the following four conditions:
+Not all top-level directories under `src/` become project entries. The directory where the entry is located must meet one of the following four conditions:
 
-1. Have a `routes/` directory
-2. Has `App.[jt]sx?` file
-3. Has `index.[jt]sx?` file
-4. Has a `pages/` directory (Modern.js 1.0 compatible)
+1. Has a `routes/` directory.
+2. Has an `App.[jt]sx?` file.
+3. Has an `index.[jt]sx?` file.
+4. Has a `pages/` directory (compatible with Modern.js 1.0).
 
-When the `src/` directory meets the entry characteristics, Modern.js will consider the current project as a single-entry application.
+When the `src/` directory meets the entry requirements, Modern.js considers the current project as a single entry application.
 
 :::tip
-In single-entry applications, the default entry is named `main`.
+In a single entry application, the default entry name is `main`.
 
 :::
 
-When the project is not a single-entry application, Modern.js will further check the first-level directory under `src/`.
+When the project is not a single entry application, Modern.js will further look at the top-level directories under `src/`.
 
 ### Framework Mode Entry
 
-Framework mode refers to the need to use the capabilities of the Modern.js framework, such as Router, SSR, integrated calls, etc. Under this kind of entry agreement, the entry defined by the developer is not the real Webpack compilation entry. Modern.js will generate an encapsulated entry when it starts, and the real entry can be found in `node_modules/.modern/{entryName}/index.js`.
+Framework mode refers to the need to use Modern.js framework capabilities, such as Router, SSR, integrated calls, etc. Under this type of entry convention, the entry defined by the developer is not a real webpack compilation entry. Modern.js will generate a wrapped entry during startup, and you can find the real entry in `node_modules/.modern/{entryName}/index.js`.
 
 #### Conventional Routing
 
-If there is a `routes/` directory in the entry, Modern.js will scan the files under `routes/` at startup, and automatically generate client-side routes (react-router) based on file conventions. For example:
+If there is a `routes/` directory in the entry, Modern.js will scan the files under `routes/` during startup, and automatically generate client-side routes (react-router) based on file conventions. For example:
 
 ```bash
 .
@@ -108,11 +112,13 @@ If there is a `routes/` directory in the entry, Modern.js will scan the files un
 │       └── page.tsx
 ```
 
-For details, please refer to [routing](/guides/basic-features/routes#conventional-routing).
+In the above directory, the component exported in `layout.tsx` will be the outermost component, and the component exported in `page.tsx` will be the component of the `/` route.
+
+For more information, please refer to [Conventional Routing](/guides/basic-features/routes.html#conventional-routing).
 
 #### Self-controlled Routing
 
-If there is an `App.[jt]sx?` file in the entry, the developer can freely set the client route in this file, or not set the client route.
+If there is an `App.[jt]sx?` file in the entry, developers can set the client-side route in this file through code, or not set the client-side route.
 
 ```tsx
 import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
@@ -129,11 +135,11 @@ export default () => {
 };
 ```
 
-For details, please refer to [routing](/guides/basic-features/routes#self-controlled-routing).
+For more information, please refer to [Self-controlled Routing](/guides/basic-features/routes.html#self-controlled-routing).
 
 #### Custom Bootstrap
 
-If there is an `index.[jt]sx` file in the entry, and when the file defaults to exporting functions, Modern.js will pass the default bootstrap function as an imported parameter, and replace the default bootstrap with the exported function, so that developers can customize Mounting components to DOM nodes, or adding custom behavior before mounting. E.g:
+If there is an `index.[jt]sx` file in the entry, and the file exports a function by default, Modern.js will pass the default `bootstrap` function as a parameter and use the exported function to replace the default `bootstrap`. This way, developers can customize how components are mounted to DOM nodes or add custom behavior before mounting. For example:
 
 ```tsx
 export default (App: React.ComponentType, bootstrap: () => void) => {
@@ -144,12 +150,7 @@ export default (App: React.ComponentType, bootstrap: () => void) => {
 };
 ```
 
-:::warning
-Since the bootstrap function needs to be compatible with React17 and React18, you need to manually pass in ReactDOM parameters when calling the bootstrap function.
-
-:::
-
-The content of the file generated by Modern.js is as follows:
+At this point, the generated file content of Modern.js is as follows:
 
 ```js
 import React from 'react';
@@ -180,9 +181,9 @@ export default AppWrapper;
 
 ### Build Mode Entry
 
-Build mode refers to the ability not to use any Modern.js runtime, and the developer defines the entry of the project Webpack completely by himself.
+Build mode refers to not using any Modern.js runtime capabilities and completely defining the project's webpack entry by the developer.
 
-If `index.[jt]sx` exists in the entry and there is no default export function, then this file is the real Webpack entry file. This is similar to [Create React App](https://github.com/facebook/create-react-app), you need to mount components to DOM nodes, add hot update code, etc. For example:
+If there is an `index.[jt]sx` file in the entry and it does not export a default function, then this file is the real webpack entry file. Similar to [Create React App](https://github.com/facebook/create-react-app), you need to mount the component to the DOM node by yourself, add hot update code, etc. For example:
 
 ```js title=src/index.jsx
 import React from 'react';
@@ -192,13 +193,13 @@ import App from './App';
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-Modern.js **not recommended** new project to use this method, this method loses some capabilities of the framework, such as the `runtime` configuration in the **`modern.config.js` file will no longer take effect**. But this method will be very useful when the project is migrated from other frameworks to Modern.js, such as CRA, or webpack that is manually built by yourself.
+Modern.js **does not recommend** using this method for new projects, as it loses some of the framework's capabilities, such as the `runtime` configuration in the `modern.config.js` file will no longer take effect. However, this method can be very useful when migrating projects from other frameworks to Modern.js, such as CRA, or manually building webpack.
 
-## Specify Entry Using Configuration
+## Specifying Entry Using Configuration
 
-Most existing projects are not built according to the directory convention of Modern.js. If you want to change to the directory structure agreed by Modern.js, there will be a certain migration cost.
+Most existing projects are not built according to the directory structure of Modern.js. If you want to change to the directory structure of Modern.js, there will be certain migration costs.
 
-In this case, instead of generating the entry using file conventions, you can manually configure the entry in `modern.config.[jt]s`.
+In this case, in addition to using file conventions to generate entries, you can manually configure the entry in `modern.config.[jt]s`.
 
 ```ts title="modern.config.ts"
 export default defineConfig({
@@ -213,11 +214,11 @@ export default defineConfig({
 });
 ```
 
-### Disable Default Entries
+### Disable Default Entry Scanning
 
-When using a custom entry, part of the project structure may happen to hit the directory convention of Modern.js, but in fact this part of the directory is not the real entry.
+When using custom entries, part of the project structure may coincidentally hit the directory conventions of Modern.js, but in fact, this part of the directory is not the real entry.
 
-Modern.js provides `disableDefaultEntries` config to disable default entry scanning rules. When you need to customize the entry, you generally need to use `disableDefaultEntries` with `entries`. In this way, some existing projects can be quickly migrated without modifying the directory structure.
+Modern.js provides the `disableDefaultEntries` configuration to disable the default entry scanning rules. When you need to customize the entry, you generally need to use `disableDefaultEntries` in combination with `entries`. This way, some existing projects can be quickly migrated without modifying the directory structure.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

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

@@ -6,9 +6,9 @@ sidebar_position: 4
 
 ## BFF
 
-BFF stands for "Backend For Frontend". It is an architectural pattern where a dedicated backend service is created for frontend applications.
+BFF is short for "Backend For Frontend". It is an architecture pattern that involves creating a backend service for frontend applications.
 
-The BFF service acts as an intermediary between the frontend application and the backend APIs, providing a tailored API for the frontend to consume. This allows the frontend developers to have more control over the data and functionality that they need, without having to rely on a monolithic backend API to provide coresponding capabilities.
+The BFF service acts as an intermediary between the frontend application and the server API, and can provide customized APIs for the frontend to use. This allows frontend developers to have more control over the data and functionality they need, without relying on the backend service to provide the corresponding capabilities.
 
 ## Bundler
 
@@ -24,15 +24,15 @@ import Builder from '@modern-js/builder-doc/docs/en/shared/builder.md';
 
 ## CSR
 
-CSR stands for "Client-Side Rendering". It means that pages are rendered directly in the browser using JavaScript. All the logic, data fetching, templating and routing is done on the client rather than the server.
+CSR stands for "Client-Side Rendering". It means that the page is rendered in the browser using JavaScript, and logic such as data fetching, templates, and routing is completed on the client side rather than the server.
 
-In CSR, the server sends an empty HTML shell to the client along with some JavaScript bundles, which then fetches data from the server's APIs and populates the page with dynamic content.
+In CSR, the server sends an empty HTML shell and some JavaScript scripts to the browser, and the browser fetching data from the server's API and renders dynamic content to the page.
 
 ## Garfish
 
-[Garfish](https://garfish.bytedance.net/) is a set of micro front-end solutions mainly used to solve problems such as cross-team collaboration and technical system diversification of web applications.
+[Garfish](https://garfish.bytedance.net/) is a micro-frontend solution mainly used to solve problems such as cross-team collaboration and diversified technology systems in web applications.
 
-Starting from the architectural level, it integrates several independently delivered front-end applications. These front-end applications can be developed, tested and deployed independently, but from the user's point of view they are still a cohesive single product.
+Starting from the architecture level, it combines multiple independently delivered frontend applications into a whole. These frontend applications can be developed, tested, and deployed independently, but in the user's perspective, they are still cohesive single products.
 
 ## Rspack
 
@@ -42,19 +42,19 @@ import Rspack from '@modern-js/builder-doc/docs/en/shared/rspack.md';
 
 ## SSR
 
-SSR stands for "Server-Side Rendering". It is a technique where the server generates the HTML of a web page and sends it to the client, instead of sending just an empty HTML shell and relying on JavaScript to populate the page.
+SSR stands for "Server-Side Rendering". It means that the HTML of the web page is generated by the server and sent to the client, rather than sending only an empty HTML shell and relying on JavaScript to generate the page content.
 
-In traditional client-side rendering, the server sends an empty HTML shell to the client along with some JavaScript bundles, which then fetches data from the server's APIs and populates the page with dynamic content. This can result in a slower initial load time, which can be detrimental to user experience and SEO.
+In traditional client-side rendering, the server sends an empty HTML shell and some JavaScript scripts to the client, and then fetching data from the server's API and fills the page with dynamic content. This leads to slow initial page loading times and is not conducive to user experience and SEO.
 
-With SSR, the server generates the HTML with the dynamic content already populated, and sends it to the client. This can result in a faster initial load time and better SEO, as search engines can crawl the fully rendered page.
+With SSR, the server generates HTML that already contains dynamic content and sends it to the client. This makes the initial page loading faster and more SEO-friendly, as search engines can crawl the rendered page.
 
 ## SSG
 
-SSG stands for "Static Site Generation". It is a technique where a web page is pre-rendered into static HTML, and then served directly to the client without the need for a server to generate the HTML on the fly.
+SSG stands for "Static Site Generation". It means that web pages are pre-rendered as static HTML and served directly to the client, without the need for the server to generate HTML in real-time.
 
-In traditional SSR, the server generates the HTML on the fly each time a user requests a page. With SSG, the HTML is generated ahead of time during the build process and can be served directly from a CDN or other static hosting service.
+In traditional SSR, the server generates HTML in real-time every time a user requests a page. With SSG, HTML can be generated in advance during the build process and hosted on a CDN or other static resource service.
 
-SSG can provide faster load times and less server overhead to traditional SSR, as there is no need to maintain a server to generate the HTML on the fly. However, it is not suitable for websites that require dynamic content, as the HTML is generated during the build process and cannot be updated in real-time.
+Compared to traditional SSR, SSG can provide faster loading speeds and less server-side overhead, as there is no need to maintain a server to generate HTML in real-time. However, SSG is not suitable for websites that require dynamic content, as the HTML is generated during the build process and does not support real-time updates.
 
 ## SWC