@modern-js/main-doc 0.0.0-next-1686037191101 → 0.0.0-next-1686044917772

package/CHANGELOG.md

@@ -1,18 +1,23 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-1686037191101
+## 0.0.0-next-1686044917772
 
 ### Patch Changes
 
-- 411d047d98: docs: fix reset command
+- 411d047d9: docs: fix reset command
 
   docs: 修复 reset command 翻译问题
 
-- 7267a1ae6c: docs(main): update changeset doc
+- 490d3d141: docs(main): update start doc
+
+  docs(main): 更新开始文档
+
+- 7267a1ae6: docs(main): update changeset doc
 
   docs(main): 更新包版本管理文档
 
-  - @modern-js/builder-doc@0.0.0-next-1686037191101
+- Updated dependencies [490d3d141]
+  - @modern-js/builder-doc@0.0.0-next-1686044917772
 
 ## 2.22.0
 

package/docs/en/components/debug-app.mdx

@@ -1,4 +1,4 @@
-Execute `pnpm run dev` in the project to start the project:
+Run `pnpm run dev` in the project to start the project:
 
 ```bash
 $ pnpm run dev

package/docs/en/components/deploy.mdx

@@ -0,0 +1 @@
+After local verification, you can organize the artifacts in `dist/` into the structure required by the server for deployment.

package/docs/en/components/init-app.mdx

@@ -1,18 +1,19 @@
-Modern.js generator will provide an interactive Q & A interface, initialization items according to the result, according to the default selection:
+`@modern-js/create` provides an interactive Q & A interface to initialize the project based on the results, with initialization performed according to the default settings:
 
 ```bash
 ? Please select the type of project you want to create: Web App
 ? Please select the programming language: TS
 ? Please select the package manager: pnpm
+? Please select the bundler: webpack
 ```
 
-After create the project, Modern.js automatically installs dependency and creates a git repository.
+After create the project, Modern.js will automatically install dependencies and create a git repository.
 
 ```bash
 [INFO] dependencies are automatically installed
 [INFO] git repository has been automatically created
 [INFO] Success！
-You can run the following command in the directory of the new project:
+You can run the following command in the directory of the new project：
 pnpm run dev          # Starting the dev server
 pnpm run build        # Build the app for production
 pnpm run serve        # Preview the production build locally
@@ -20,11 +21,6 @@ pnpm run lint         # Run ESLint and automatically fix problems
 pnpm run new          # Enable optional features or add a new entry
 ```
 
-:::note
-In addition to working during project initialization, the Modern.js generator can also generate modules of the project in subsequent development, which is not thrown away as soon as it is used.
-
-:::
-
 Now, the project structure is as follows:
 
 ```

package/docs/en/components/release-note.mdx

@@ -0,0 +1 @@
+According to the [Release Note](https://github.com/web-infra-dev/modern.js/releases) on the official website, developers can also manually upgrade the project to the desired version.

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
 

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

@@ -7,7 +7,7 @@ sidebar_position: 1
 
 **Modern.js is an open source web engineering system from ByteDance**, which provides multiple solutions to help developers solve problems in different development scenarios.
 
-Currently, Modern.js includes three solutions, each targeting at different development scenarios: web application development, npm package development, and document site development:
+Currently, Modern.js includes three solutions, targeting web application development, npm package development, and document site development:
 
 import { SolutionCards } from '@site/src/components/SolutionCards';
 
@@ -31,40 +31,37 @@ import { SolutionCards } from '@site/src/components/SolutionCards';
   ]}
 />
 
-As a part of the Modern.js engineering system, each of these solutions can be used separately and has its own independent documentation site. Developers can choose one or more solutions as needed.
+As part of the Modern.js engineering system, each of the above solutions can be used separately and has its own independent documentation site. Developers can choose one or more solutions as needed.
 
 ## About Documentation
 
-**This documentation site corresponds to the Modern.js framework**, which is used to developing web applications.
+**The current documentation site corresponds to the Modern.js framework**, which is used to developing web applications.
 
-- If you are developing an npm package, please refer to the [Modern.js Module](https://modernjs.dev/module-tools/en) documentation.
-- If you are developing a document site, please refer to the [Modern.js Doc](https://modernjs.dev/doc-tools) documentation.
-- If you want to use the Modern.js's builder engine to implement a web framework, please refer to the [Modern.js Builder](https://modernjs.dev/builder/en) documentation.
+- If you need to develop an npm package, please refer to the [Modern.js Module](https://modernjs.dev/module-tools) documentation.
+- If you need to develop a documentation site, please refer to the [Modern.js Doc](https://modernjs.dev/doc-tools/) documentation.
+- If you need to implement a web development framework based on the Modern.js build engine, please refer to the [Modern.js Builder](https://modernjs.dev/builder) documentation.
 
 :::tip
-As the Modern.js framework is the most widely used, in this documentation site, we will omit the "framework" and simply call it as Modern.js.
+Since the Modern.js framework is the most widely used, in this documentation site, we will omit "framework" and directly refer to it as Modern.js.
 :::
 
 ## Modern.js Framework
 
-**The Modern.js framework is a progressive web framework based on React**. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.
+**The Modern.js framework is a progressive web development framework based on React**. Within ByteDance, we encapsulate Modern.js as an upper-level framework and support the development of thousands of web applications.
 
-Modern.js can provide developers with the ultimate **development experience**, making the application get better **user experience**.
+Modern.js can provide developers with an ultimate **Development Experience** and enable applications to have better **User Experience**.
 
-In the process of developing React applications, developers often need to design implementations for certain functions, or use other libraries and frameworks to solve these problems.
+In the process of developing React applications, developers usually need to design implementation plans for certain features or use other libraries and frameworks to solve these problems. Modern.js supports all configurations and tools needed by React applications, and has built-in **additional features and optimizations**. Developers can use React to build the UI of the application, and then gradually adopt the features of Modern.js to solve common application requirements, such as routing, data acquisition, and state management.
 
-Modern.js supports all the configuration and tools required by React applications, and has additional features and optimisations built in. Developers can use React to build the UI of the application, and then gradually adopt Modern.js functions to solve common application requirements, such as routing, data fetching, state management, etc.
+It mainly includes the following features:
 
-It mainly contains the following features:
-
-- 🚀 **Rust Bundler**: Easily switch to Rspack bundler with faster build speed.
-- 🪜 **Progressive**: Create projects with the most streamlined templates, gradually turn on plugin capabilities through generators, and customize solutions.
-- 🏠 **Integration**: The development is unique to the production environment Web Server, CSR and SSR are isomorphic development, and the function as the API service call.
-- 📦 **Out Of The Box**: Default TS support, built-in build core, ESLint, debugging tools, full functionality can be tested.
-- 🌏 **Ecology**: Self-developed state management, micro frontend, module packaging, Monorepo solution and other peripheral requirements.
-- 🕸 **Routing Modes**: Contains controlled routing, routing based on file conventions (nested routing), configurable routing, etc.
-- 🚀 **Independently Build Core**: Support a variety of packaging tools, deep optimization bundle.
+- 🚀 **Rust Bundler**: Provides support for dual build tools, easily switch to the Rspack build tool, and compile quickly.
+- 🪜 **Progressive**: Create projects with the most streamlined templates, gradually enable plugin features through the generator, and customize solutions.
+- 🏠 **Integration**: Development and production environment web server are unique, CSR and SSR are isomorphic development, and API service calls are functions as interfaces.
+- 📦 **Out Of The Box**: Default TS support, built-in build, ESLint, debugging tools, fully functional and testable.
+- 🌏 **Ecology**: Self-developed state management, micro-frontend, module packaging, Monorepo solutions, and other peripheral needs.
+- 🕸 **Routing Modes**: Includes self-controlled routing, file-convention-based routing (nested routing), etc.
 
 ## Next
 
-If you want to know how to use Modern.js, you can try [Create your first app](/tutorials/first-app/c01-start), or read [Quick Start](/guides/get-started/quick-start).
+If you want to learn how to use the Modern.js framework, you can try to [create your first application](/tutorials/first-app/c01-start), or read the [Quick Start](/guides/get-started/quick-start) guide.

package/docs/en/guides/get-started/quick-start.mdx

@@ -13,16 +13,16 @@ import Prerequisites from "@site-docs-en/components/prerequisites"
 
 ## Installation
 
-Modern.js provides the `@modern-js/create` tool for creating new projects. You can use `npx` to run it.
+Modern.js provides the `@modern-js/create` tool to create projects. Do not install it globally, use `npx` to run it.
 
-You can create the project in an existing empty directory:
+You can create a project in an existing empty directory:
 
 ```bash
 mkdir myapp && cd myapp
 npx @modern-js/create@latest
 ```
 
-You can also directly create the project as a new folder:
+You can also create a project directly in a new directory:
 
 ```bash
 npx @modern-js/create@latest myapp
@@ -36,31 +36,15 @@ import InitApp from "@site-docs-en/components/init-app"
 
 ## Development
 
-Execute `pnpm run dev` in the project to start the project:
+import DebugApp from "@site-docs-en/components/debug-app"
 
-```bash
-$ pnpm run dev
-
-> modern dev
-
-info    Starting dev server...
-info    App running at:
-
-  > Local:    http://localhost:8080/
-  > Network:  http://192.168.0.1:8080/
-
- Client ✔ done in 76.10ms
-```
-
-Open `http://localhost:8000/` in your browser and you will see the following:
-
-![dev](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/dev.png)
+<DebugApp />
 
 ## Configuration
 
-The `modern.config.ts` files exist in Modern.js projects created by the generator.
+In a Modern.js project created using `@modern-js/create`, a `modern.config.ts` file is generated by default.
 
-Features can be enabled through the configuration file, or the default behavior of the coverage Modern.js. For example, add the following configuration to enable SSR:
+You can modify the configuration through this file to override the default behavior of Modern.js. For example, to enable SSR, add the following configuration:
 
 ```ts
 import { defineConfig } from '@modern-js/app-tools';
@@ -76,11 +60,11 @@ export default defineConfig({
 });
 ```
 
-Re-execute `pnpm run dev`, in the browser Network menu, you can find that the project has completed page rendering at the server level.
+After running `pnpm run dev` again, you can find that the project has completed page rendering on the server in the browser's Network menu.
 
-## Build
+## Build the project
 
-Execute `pnpm run build` in the project to build the project production environment product:
+To build the production artifacts of the project, run `pnpm run build` in the project:
 
 ```bash
 $ pnpm run build
@@ -106,27 +90,25 @@ info    File sizes after production build:
  Client ✔ done in 3.57s
 ```
 
-The bundle is generated to `dist/` by default, and the directory structure is as follows:
+By default, the build artifacts are generated in `dist/`, with the following directory structure:
 
 ```
-.
-├── asset-manifest.json
+dist
 ├── html
-│   └── main
-├── loader-routes
-│   └── main
+│   └── main
 ├── modern.config.json
 ├── route.json
+├── routes-manifest.json
 └── static
     ├── css
     └── js
 ```
 
-> If you want to customize the output directory, please refer to [Output Files](https://modernjs.dev/builder/en/guide/basic/output-files.html).
+> If you need to customize the directory of the build artifacts, please refer to [Output files](https://modernjs.dev/builder/guide/basic/output-files.html).
 
 ## Verify
 
-Execute `pnpm run serve` in the project to verify locally that the bundle is running correctly:
+Run `pnpm run serve` in the project to verify whether the build artifacts run normally locally:
 
 ```bash
 $ pnpm run serve
@@ -140,8 +122,10 @@ info    App running at:
   > Network:  http://192.168.0.1:8080/
 ```
 
-Open http://localhost:8000/ in the browser and the content should be the same as when `pnpm run dev`.
+Open `http://localhost:8000/` in the browser, and the content should be consistent with that of `pnpm run dev`.
+
+## Deployment
 
-## Deploy
+import Deploy from "@site-docs-en/components/deploy"
 
-Once the local verification is complete, the outputs under `dist` folder can be organized into the structure required by the server for deployment.
+<Deploy />

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

@@ -7,42 +7,43 @@ sidebar_position: 3
 
 ## Upgrade with command
 
-Modern.js provides the `upgrade` command to support projects to upgrade to the latest version.
+Modern.js provides the `upgrade` command to support upgrading the project to the latest version of Modern.js.
 
-Execute `pnpm run upgrade` in the project:
+Run `pnpm run upgrade` in the project:
 
 ```bash
 $ pnpm run upgrade
 
 > modern upgrade
 
-[INFO] [Project Type]: Application
+[INFO] [Project Type]: Web App
 [INFO] [Modern.js Latest Version]: 2.0.0
 [INFO] Upgrade Modern.js package version success!
 ```
 
-You can see that the dependency in the project `package.json` has been changed to the latest.
+You can see that the dependencies in the project's `package.json` have been updated to the latest version.
 
-## Specify version upgrade
+## Upgrade to a specified version
 
-All packages of Modern.js are published using the **unified version number**.
+All packages of Modern.js are currently released with a **uniform version number**.
 
-According to the website release note, developers can also manually upgrade the project to the desired version.
+import ReleaseNote from "@site-docs-en/components/release-note"
+
+<ReleaseNote />
 
 :::tip
-When upgrading, you need to upgrade to all packages provided by the Modern.js, rather than upgrading a single dependency.
+When upgrading, you need to upgrade all packages provided by Modern.js, instead of upgrading a single dependency.
 
 :::
 
 ## Lock nested dependency
 
-When there is a problem with one of the nested dependencies of the project, and the Modern.js cannot be updated immediately, you can use the package manager to lock the child dependency version.
+When a nested dependency of the project has a problem and Modern.js cannot be updated immediately, you can use the package manager to lock the version of the nested dependency.
 
 ### pnpm
 
-For projects using pnpm, add the following configuration to the `package.json` in the **project root directory** and re-execute `pnpm install`:
+For projects using pnpm, add the following configuration to the `package.json` in the **root directory** of the project, and then run `pnpm install` again:
 
-```json title="package.json"
 {
   "pnpm": {
     "overrides": {
@@ -54,7 +55,7 @@ For projects using pnpm, add the following configuration to the `package.json` i
 
 ### Yarn
 
-For projects using Yarn, add the following configuration to the `package.json` in the **project root directory** and re-execute `yarn install`:
+For projects using Yarn, add the following configuration to the `package.json` in the **root directory** of the project, and then run `yarn install` again:
 
 ```json title="package.json"
 {
@@ -66,7 +67,7 @@ For projects using Yarn, add the following configuration to the `package.json` i
 
 ### Npm
 
-For projects using Npm, add the following configuration to the `package.json` in the **project root directory** and re-execute `npm install`:
+For projects using Npm, add the following configuration to the `package.json` in the **root directory** of the project, and then run `npm install` again:
 
 ```json title="package.json"
 {
@@ -77,6 +78,6 @@ For projects using Npm, add the following configuration to the `package.json` in
 ```
 
 :::info
-For Monorepo repositories, the dependency version can only be locked in the `package.json` in the project root directory, and all packages in Monorepo are affected.
+For Monorepo repositories, you can only lock dependency versions in the `package.json` in the root directory of the project, and it will affect all packages in the Monorepo.
 
 :::

package/docs/en/guides/topic-detail/changesets/add.mdx

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # Add Changesets
 
-When we finish development, we need to add a changeset to declare the current changes for future version releases.
+When we finish development, we need to add a changeset to declare the current changes for version releases.
 
 ## Information
 
@@ -12,29 +12,29 @@ A changeset includes:
 
 - Which packages are affected by this change.
 
-- The type of version number upgrade needed for this change, which complies with the [semver](https://semver.org/) specification.
+- The type of version for this change, which complies with the [semver](https://semver.org/) specification.
 
 - Changelog information for this change.
 
 ## Steps
 
 :::info
-The following example commands are all using pnpm as the package management tool. If you need to use other package management tools, please replace them as needed.
+The following example commands are all using pnpm. If you need to use other package management tools, please replace them as needed.
 :::
 
-### Module project scheme
+### NPM Module
 
-#### Run the following command in the root directory:
+#### Run the change command in the root directory:
 
 ```bash
 pnpm run change
 ```
 
-#### Select the type of version number upgrade needed for this change and press Enter:
+#### Select the type of version for this change
 
 ![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-select-version.png)
 
-#### Fill in the changelog information and press Enter twice:
+#### Fill in the changelog information
 
 ![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-input-changelog.png)
 
@@ -52,15 +52,15 @@ This file contains all the information of the changeset.
 
 ### Monorepo
 
-Assuming there are three module packages in the monorepo, `module-1`, `module-2`, and `module-3`.
+There are three NPM module packages in the monorepo, `module-1`, `module-2`, and `module-3`.
 
-#### Run the following command in the root directory:
+#### Run the change command in the root directory
 
 ```bash
 pnpm run change
 ```
 
-#### Select the list of packages to upgrade for this change:
+#### Select the list of packages to upgrade for this change
 
 Changesets will categorize the packages in the Monorepo into two categories, `changed packages` and `unchanged packages`, based on the current code changes (`git diff Head...baseBranch`), making it easy for users to choose.
 
@@ -68,11 +68,13 @@ Use the space key to select the corresponding package or category, and then pres
 
 ![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-select-packages.png)
 
-#### Select the packages corresponding to different version types. Changesets will ask about the `major` and `minor` types. If there are packages that have not selected these two types, the `patch` type will be used by default:
+#### Select the packages corresponding to different version types
+
+Changesets will ask about the `major` and `minor` types. If there are packages that have not selected these two types, the `patch` type will be used by default.
 
 ![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-auto-select-patch.png)
 
-#### Fill in the changelog information and press Enter twice:
+#### Fill in the changelog information
 
 ![](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-input-changelog-monorepo.png)
 
@@ -93,7 +95,7 @@ This file contains all the information of the changeset, and different packages
 
 The `change` command supports the following parameters:
 
-- `--empty` Adds an empty changeset.
+- `--empty`: Adds an empty changeset.
 
 ```bash
 pnpm run change --empty
@@ -106,7 +108,7 @@ After running, an empty changeset file will be created in the `.changeset` direc
 ---
 ```
 
-- `--open` When using this parameter, the system default editor will be opened for filling in the changelog.
+- `--open`: When using this parameter, the system default editor will be opened for filling in the changelog.
 
 ## Notes