@modern-js/main-doc 2.19.1 → 2.20.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @modern-js/main-doc
 
+## 2.20.0
+
+### Patch Changes
+
+- 3c4e0a5: chore(utils): move generateMetaTags method to builder-shared
+
+  chore(utils): 移动 generateMetaTags 方法到 builder-shared
+
+- 0ce52ad: docs(main): optimize mobile adaptation
+
+  docs(main): 优化移动端适配
+
+  - @modern-js/builder-doc@2.20.0
+
 ## 2.19.1
 
 ### Patch Changes

package/docs/en/community/blog/overview.md

@@ -4,7 +4,72 @@ sidebar_position: 1
 
 # Overview
 
-Welcome to the Modern.js blog!
+Welcome to Modern.js blog!
 
-You can find the latest news about Modern.js here.
+You can find the latest update of Modern.js and our thought processes here. Occasionally we explain the infrastructure behind it.
 
+---
+
+## Announcing Modern.js v2: support Rspack
+
+> Published on 16.03.2023
+
+We are excited to announce the release of Modern.js v2!
+
+Modern.js is a suite of infrastructure tools we built for web development inside Bytedance (we call ourself Web Infra). Since we open sourced this project a little more than a year ago, there were dozens of contributors helped us on development; we aggregated more than 2,000 pull requests and Modern.js started to support build tool like Rspack, features like nested routes, Streaming SSR and there are more to come!
+
+We are extremely proud of what we have achieved so far, you can also refer to [this article(English version under construction)](/community/blog/v2-release-note)👈🏻 to see what has changed over the last year in Modern.js.
+
+---
+
+## What is Streaming SSR in React 18
+
+> Published on 16.12.2022
+
+Since React 18, React supports a new type of SSR (streaming SSR) and it brought two advantages over the React tool chain:
+
+- Streaming HTML: Server will be able to transmit HTML to browser parts by parts, rather than waiting until the whole page being rendered. Client side will render the page faster thus dramatically increase performance benchmark scores like TTFB(Time to First Byte), FCP(First Contentful Paint) and more.
+
+- Selective Hydration: On the client side, browser can hydrate only the HTML elements that has already been rendered, without needing to wait until the whole page finish rendering and all the javascript bundle being loaded.
+
+To understand its design further, check out this [Github Discussion](https://github.com/reactwg/react-18/discussions/37) by Dan Abramov or watch this [talk](https://www.youtube.com/watch?v=pj5N-Khihgc).
+
+Or read more from us at [here(Further content in English under construction)](https://mp.weixin.qq.com/s/w4FS5sBcHqRl-Saqi19Y6g).
+
+---
+
+## Introducing React Server Component in Modern.js
+
+> Published on 01.12.2022
+
+To explain the experimental React Server Component, the one-liner given by the React Team was: **zero-bundle-size React Server Components**.
+
+We agreed with the React team that this is where the whole direction will move forward in React. Open source maintainers and contributors inside the React community are also actively building an eco-system around it.
+
+Read more from React team at [here](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) or more from us at [here](https://mp.weixin.qq.com/s/B-XLvW00vl5RE1Ur3EW4ow)
+
+## Updates during Sept - Oct in 2022
+
+> Published on 01.11.2022
+
+We updated Modern.js to v1.21.0 during Sept - Oct. Major upgrade includes:
+
+- **support pnpm v7**
+- **added typescript compiler option on server side**
+
+[Read more (English version under construction)](/community/blog/2022-0910-updates)
+
+---
+
+## Updates during July - August in 2022
+
+> Published on 2022.09.05
+
+Modern.js upgraded to v1.17.0 during July to August in 2022. Major updates include:
+
+- **Support React 18**
+- **Unifying packages**: All the Modern.js package version numbers are unified, and added version update command line in CLI.
+- **Support npm module bundle building**: We support bundling npm module output.
+- **Reduck v1.1**: We released [Reduck v1.1](https://github.com/web-infra-dev/reduck) and updated all our documentations.
+
+[Read more (English version under construction)](/community/blog/2022-0708-updates)

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

@@ -1,5 +1,5 @@
 ```bash
-$ npx @modern-js/create myapp
+$ npx @modern-js/create@latest myapp
 ? Please select the solution you want to create: Web App
 ? Development Language: TS
 ? Package Manager: pnpm

package/docs/en/components/ua-polyfill.mdx

@@ -0,0 +1,40 @@
+
+### Polyfill At Runtime
+
+Modern.js also provides a runtime Polyfill solution based on browser [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) information, which has the following advantages over Babel:
+
+- It will not be inserted into the code, reducing the code .
+- The same browser will share a Polyfill code. Therefore, with more and more projects, the UA-based Polyfill code will be delivered faster and faster.
+
+exec `pnpm run new` to enable this features:
+
+```bash
+? Action Enable features
+? Enable features Enable UA-based Polyfill Feature
+```
+
+After executing the command, register the Polyfill plugin in `modern.config.ts`:
+
+```ts title="modern.config.ts"
+import polyfillPlugin from '@modern-js/plugin-polyfill';
+
+export default defineConfig({
+  plugins: [..., polyfillPlugin()],
+});
+```
+
+After configuring `output.polyfill` as `ua` and executing `pnpm run build & & pnpm run serve` to start the server, visiting the page can see that the HTML product contains the following script:
+
+```js
+<script src="/__polyfill__" crossorigin></script>
+```
+
+Visit the page `http://localhost:8080/__polyfill__` on Chrome 51 to see:
+
+![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
+
+:::caution
+This feature only works when using Modern.js built-in Web Server.
+
+If you need to customize the HTML template, please refer to [HTML Template](/guides/basic-features/html.html). Manually modifying the template through html.template / tools.html will cause this feature not work.
+:::

package/docs/en/configure/app/output/temp-dir.mdx

@@ -0,0 +1,24 @@
+---
+sidebar_label: tempDir
+---
+
+# output.tempDir
+
+- **Type:** `string`
+- **Default:** `''`
+
+When developing or building a project, Modern.js generates real Webpack entries and HTML templates, placing them in a temporary directory.
+
+If you want to start a project with multiple configurations at the same time, you can use this configuration to generate files in different temporary directories to avoid interference with each other.
+
+The configuration can be a relative or absolute path, but paths outside the project should be avoided.
+
+Example:
+
+```ts
+export default {
+  output: {
+    tempDir: path.join('node_modules', '.temp-dir'),
+  }
+}
+```

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

@@ -130,7 +130,7 @@ export const post = async () => {
 };
 ```
 
-- Modern.js supports 9 definitions for HTTP Method: `GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`, can be exported using these methods as functions.
+- Modern.js supports 9 definitions for HTTP Method: `GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTIONS`、`HEAD`, can be exported using these methods as functions.
 
 - The name is size insensitive, if `GET`, can write `get`、`Get`、`GEt`、`GET`, can be accurately identified. But default export as `export default xxx` will be map to `Get`.
 

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

@@ -1,8 +1,26 @@
 ---
-title: Compatibility
 sidebar_position: 5
 ---
-# Compatibility
+
+# Browser Compatibility
+
+## Browserslist Configuration
+
+Modern.js supports setting the browserslist for your web applications. You can set the [Browserslist](https://browsersl.ist/) in the `.browserslistrc` file.
+
+When you create a new Modern.js project, it includes a `.browserslistrc` configuration by default, which means that JavaScript code will be compiled to ES6.
+
+```yaml title=".browserslistrc"
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10
+```
+
+:::tip
+Please refer to [Modern.js Builder - Browserslist](https://modernjs.dev/builder/en/guide/advanced/browserslist) for more information.
+:::
 
 ## Browserslist
 
@@ -38,42 +56,6 @@ For case where Polyfill is not required for third-party dependencies, you can se
 
 :::
 
-### Polyfill At Runtime
-
-Modern.js also provides a runtime Polyfill solution based on browser [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) information, which has the following advantages over Babel:
-
-- It will not be inserted into the code, reducing the code .
-- The same browser will share a Polyfill code. Therefore, with more and more projects, the UA-based Polyfill code will be delivered faster and faster.
-
-exec `pnpm run new` to enable this features:
-
-```bash
-? Action Enable features
-? Enable features Enable UA-based Polyfill Feature
-```
+import UAPolyfill from '@site-docs-en/components/ua-polyfill';
 
-After executing the command, register the Polyfill plugin in `modern.config.ts`:
-
-```ts title="modern.config.ts"
-import polyfillPlugin from '@modern-js/plugin-polyfill';
-
-export default defineConfig({
-  plugins: [..., polyfillPlugin()],
-});
-```
-
-After configuring `output.polyfill` as `ua` and executing `pnpm run build & & pnpm run serve` to start the server, visiting the page can see that the HTML product contains the following script:
-
-```js
-<script src="/__polyfill__" crossorigin></script>
-```
-
-Visit the page `http://localhost:8080/__polyfill__` on Chrome 51 to see:
-
-![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
-
-:::caution
-This feature only works when using Modern.js built-in Web Server.
-
-If you need to customize the HTML template, please refer to [HTML Template](/guides/basic-features/html.html). Manually modifying the template through html.template / tools.html will cause this feature not work.
-:::
+<UAPolyfill />

package/docs/en/guides/basic-features/data-fetch.mdx

@@ -343,9 +343,9 @@ export default async (): Promise<ProfileData> => {
 
 ### FAQ
 
-1. Relationship between loader and bff functions
+1. Relationship between loader and BFF functions
 
-In a CSR project, the loader is executed on the client side and the bff function can be called directly from the loader to make a request.
+In a CSR project, the loader is executed on the client side and the bff function can be called directly in the loader to make a request.
 
 In an SSR project, each loader is also a server-side API, and we recommend using loader instead of the BFF function which http method is `get` to avoid one more layer of forwarding and execution.
 

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

@@ -375,7 +375,7 @@ To further improve the user experience and reduce time of loading, Modern.js sup
 - With `render`, static resources are loaded only when they are idle and do not hog the network with first-screen static resources.
 - When using server side rendering, data is also prefetched.
 
-import Motivation from '@site-docs-en/components/convention-routing-movitation'
+import Motivation from '@site-docs-en/components/convention-routing-motivation'
 
 <Motivation/>
 

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

@@ -16,7 +16,7 @@ From the perspective of building, Modern.js is divided into three layers, from t
 - Universal build engine: Modern.js Builder.
 - Low-level bundlers: webpack and rspack.
 
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ maxWidth: '540px' }} />
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
 
 ## Builder Documentation
 

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

@@ -19,13 +19,13 @@ You can create the project in an existing empty directory:
 
 ```bash
 mkdir myapp && cd myapp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 You can also directly create the project as a new folder:
 
 ```bash
-npx @modern-js/create myapp
+npx @modern-js/create@latest myapp
 ```
 
 ## Initialize

package/docs/en/guides/topic-detail/framework-plugin/extend.mdx

@@ -13,7 +13,7 @@ Here is a simple example to demonstrate how to extend plugin Hooks by adding Hoo
 First, we initialize an empty project file and add basic dependencies:
 
 ```bash
-$ npx @modern-js/create modern-js-demo
+$ npx @modern-js/create@latest modern-js-demo
 ```
 
 ### Creating Hooks

package/docs/en/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -9,6 +9,28 @@ Modern.js exposes three types of plugins: CLI, Runtime, and Server.
 
 ## CLI
 
+### `beforeConfig`
+
+- Functionality: Running tasks before the config process
+- Execution phase: Before the config process
+- Hook model: AsyncWorkflow
+- Type: `AsyncWorkflow<void, void>`
+- Example usage:
+
+```ts
+import type { CliPlugin } from '@modern-js/core';
+
+export default (): CliPlugin => ({
+  setup(api) {
+    return {
+      beforeConfig: () => {
+        // do something
+      },
+    };
+  },
+});
+```
+
 ### `config`
 
 - Functionality: Collect configuration

package/docs/en/guides/topic-detail/generator/codesmith/develop.mdx

@@ -48,6 +48,6 @@ npx @modern-js/codesmith-cli <generatorName>
 Where generatorName is the generator package name.
 
 :::info
-`@modern-js/create` also supports running micro-generators, you can use `npx @modern-js/create --generator <generatorName>` to run customized micro-generators.
+`@modern-js/create` also supports running micro-generators, you can use `npx @modern-js/create@latest --generator <generatorName>` to run customized micro-generators.
 
 :::

package/docs/en/guides/topic-detail/generator/plugin/abstract.mdx

@@ -10,7 +10,7 @@ Modern.js provides an initialization template that is versatile and can meet som
 
 When you use Modern.js in depth, you will inevitably find that every time you create a project, you will make some similar changes specific to your own project, such as modifying the sample code, adding some configuration, enabling some functions, etc.
 
-The generator plugin can help you precipitate these individual or team-specific changes. Simply bring the `--plugin` parameter when executing `npx @modern-js/create` to avoid the need to repeatedly modify the project every time the project is created..
+The generator plugin can help you precipitate these individual or team-specific changes. Simply bring the `--plugin` parameter when executing `npx @modern-js/create@latest` to avoid the need to repeatedly modify the project every time the project is created..
 
 The generator plugin is based on the initialization template project provided by the Modern.js, providing methods to add, delete and modify templates, and modifying `package.json`, `modernConfig` configuration and opening functions in a fast way.
 

package/docs/en/guides/topic-detail/generator/plugin/develop.mdx

@@ -9,7 +9,7 @@ sidebar_position: 3
 Modern.js provides a generator plugin to create a generator plugin project, you can directly execute the following command to create:
 
 ```bash
-npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
+npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
 ```
 
 Different plugin types will ask different questions. You can choose the plugin type according to your needs.

package/docs/en/guides/topic-detail/generator/plugin/use.mdx

@@ -9,7 +9,7 @@ sidebar_position: 2
 You can use the generator plugin directly by executing the following command:
 
 ```bash
-npx @modern-js/create --plugin <pluginName>
+npx @modern-js/create@latest --plugin <pluginName>
 ```
 
 The plugin parameter supports multiple declarations, which means that multiple generator plugins are used at the same time.

package/docs/en/guides/topic-detail/generator/project.mdx

@@ -11,7 +11,7 @@ Modern.js provides `@modern-js/create` as a project generator for Modern.js proj
 There is no need to install `@modern-js/create` globally, just execute the tool directly with npx:
 
 ```bash
-npx @modern-js/create [projectDir]
+npx @modern-js/create@latest [projectDir]
 ```
 
 :::info
@@ -32,7 +32,7 @@ When executing the above command, the `projectDir` folder will be created in the
 Get the `@modern-js/create` tool version.
 
 ```bash
-$ npx @modern-js/create --version
+$ npx @modern-js/create@latest --version
 
 [INFO] @modern-js/create v2.0.0
 ```
@@ -52,7 +52,7 @@ By default, `@modern-js/create` will have interaction problems such as language
 This field is a JSON character string, for example when running a package manager:
 
 ```bash
-npx @modern-js/create --config '{"packageManager": "pnpm"}'
+npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
 ```
 
 Specific configuration information viewable [Project Configuration](/guides/topic-detail/generator/config/common).
@@ -105,7 +105,7 @@ For custom generator plugins, please refer to [Development Generator Plugin](/gu
 
 Specifies the microgenerator.
 
-By default, `@modern-js/create` will execute the microgenerator Modern.js framework build-in. If you need to execute a customized microgenerator, and you need to use the posture of `npx @modern-js/create`, you can use this parameter directly.
+By default, `@modern-js/create` will execute the microgenerator Modern.js framework build-in. If you need to execute a customized microgenerator, and you need to use the posture of `npx @modern-js/create@latest`, you can use this parameter directly.
 
 For custom microgenerators, please refer to [Develop Microgenerator](/guides/topic-detail/generator/codesmith/introduce).
 

package/docs/en/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -27,7 +27,7 @@ Initialize the project with a command line:
 
 ```bash
 mkdir masterApp && cd masterApp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 After the project is created, we can enable the `micro frontend` through `pnpm run new`:
@@ -109,7 +109,7 @@ Initialize the project with a command line:
 
 ```bash
 mkdir masterApp && cd masterApp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 After the project is created, we can enable the `micro frontend` function through `pnpm run new`:
@@ -137,7 +137,7 @@ Initialize the project with a command line:
 
 ```bash
 mkdir table && cd table
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:
@@ -186,7 +186,7 @@ Initialize the project with a command line:
 
 ```bash
 mkdir table && cd table
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:

package/docs/en/tutorials/first-app/c01-start.mdx

@@ -17,7 +17,7 @@ We create a new directory and initialize the project via the command line tool:
 
 ```bash
 mkdir myapp && cd myapp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 import InitApp from "@site-docs-en/components/init-app"

package/docs/zh/community/blog/overview.md

@@ -71,6 +71,6 @@ Modern.js 7 ~ 8 月的最新版本为 v1.17.0，本双月的主要更新有：
 - **支持 React 18**：完成框架和插件对 React 18 的适配。
 - **包版本统一**：Modern.js 所有组成包的版本号进行统一，提供升级命令。
 - **模块工程支持 bundle 构建**：模块工程类型的项目，支持对产物做 bundle 构建。
-- **Reduck v1.1**：发布 Reduck v1.1，使用文档全面更新。
+- **Reduck v1.1**：发布 [Reduck v1.1](https://github.com/web-infra-dev/reduck)，使用文档全面更新。
 
 [了解更多 →](/community/blog/2022-0708-updates)

package/docs/zh/community/blog/v2-release-note.mdx

@@ -234,11 +234,10 @@ Modern.js 中的部分代码实现参考了社区中的开源项目，我们对
 
 - `@modern-js/bundle-require`: 修改自 [bundle-require](https://github.com/egoist/bundle-require)。
 - `@modern-js/plugin`: hook API 的实现参考了 [farrow-pipeline](https://github.com/farrow-js/farrow/tree/master/packages/farrow-pipeline)。
-- `@modern-js/builder`: moduleScope 和 fileSize 插件参考了 [create-react-app](https://github.com/facebook/create-react-app)，TsConfigPathsPlugin 参考了 [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin)。
+- `@modern-js/builder`: moduleScope 和 fileSize 插件参考了 [create-react-app](https://github.com/facebook/create-react-app)，TsConfigPathsPlugin 参考了 [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin)，generateMetaTags 函数参考了 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)。
 - `@modern-js/plugin-testing`: jest runner 参考了 [jest-cli](https://github.com/facebook/jest/blob/fdc74af37235354e077edeeee8aa2d1a4a863032/packages/jest-cli/src/cli/index.ts#L21)。
 - `@modern-js/doc-tools`: 部分样式参考了 [vitepress](https://github.com/vuejs/vitepress)。
 - `@modern-js/plugin-data-loader`: 部分实现参考了 [remix](https://github.com/remix-run/remix)。
-- `@modern-js/utils`: generateMetaTags 函数参考了 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)。
 
 ## 最后
 

package/docs/zh/components/init-rspack-app.mdx

@@ -1,5 +1,5 @@
 ```bash
-$ npx @modern-js/create myapp
+$ npx @modern-js/create@latest myapp
 ? 请选择你想创建的工程类型：Web 应用
 ? 请选择开发语言：TS
 ? 请选择包管理工具：pnpm

package/docs/zh/components/ua-polyfill.mdx

@@ -0,0 +1,39 @@
+### 运行时按需 Polyfill
+
+Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) 信息的运行时按需 Polyfill 方案，相比于 Babel 优势如下：
+
+- 不会插入到代码中，只根据访问页面的设备，按需下发 Polyfill 代码 ，减少整体代码体积。
+- 相同浏览器会公用一份 Polyfill 代码。因此，随着项目越来越多，基于 UA 的 Polyfill 代码下发速度会越来越快，综合速度超过常规方案。
+
+可以通过微生成器开启该功能：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「基于 UA 的 Polyfill」功能
+```
+
+执行命令后，在 `modern.config.ts` 中注册 Polyfill 插件:
+
+```ts title="modern.config.ts"
+import polyfillPlugin from '@modern-js/plugin-polyfill';
+
+export default defineConfig({
+  plugins: [..., polyfillPlugin()],
+});
+```
+
+配置 `output.polyfill` 为 `ua` 并且执行 `pnpm run build && pnpm run serve` 启动服务器后，访问页面可以看到 HTML 产物中包含如下脚本:
+
+```js
+<script src="/__polyfill__" crossorigin></script>
+```
+
+在 Chrome 51 下访问页面可以看到 `http://localhost:8080/__polyfill__` 返回内容如下:
+
+![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
+
+:::caution 注意
+该功能只有在使用 Modern.js 内置的 Web Server 时才会生效。
+
+如果有自定义模版的需求，请参考 [HTML 模板](/guides/basic-features/html.html)。通过 `html.template` 或 `tools.html` 手动修改模版时，可能会导致该功能无法正确生效。
+:::

package/docs/zh/configure/app/output/temp-dir.mdx

@@ -0,0 +1,22 @@
+---
+sidebar_label: tempDir
+---
+
+# output.tempDir
+
+- **类型：** `string`
+- **默认值：** `''`
+
+项目开发或构建时，Modern.js 会生成真实的 Webpack 入口和 HTML 模板，并放在临时目录下。
+
+如果希望由多个配置同时启动某项目，可以通过该配置，将文件生成到不同的临时目录下，避免相互干扰。配置可以是相对路径或绝对路径，但应避免项目外的路径。
+
+示例
+
+```ts
+export default {
+  output: {
+    tempDir: path.join('node_modules', '.temp-dir'),
+  }
+}
+```

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

@@ -135,7 +135,7 @@ export const post = async () => {
 };
 ```
 
-- 对应 HTTP Method，Modern.js 也支持了 9 种定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
+- 对应 HTTP Method，Modern.js 也支持了 9 种定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTIONS`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
 
 - 名字是大小不敏感的，如果是 `GET`，写成 `get`、`Get`、`GEt`、`GET`，都可以准确识别。而默认导出，即 `export default xxx` 则会被映射为 `Get`。
 

package/docs/zh/guides/advanced-features/compatibility.mdx

@@ -1,26 +1,25 @@
 ---
-title: 客户端兼容性
 sidebar_position: 5
 ---
-# 客户端兼容性
+
+# 浏览器兼容性
 
 ## Browserslist 配置
 
-Modern.js 支持在项目根目录 `package.json` 文件中的 `browserslist` 字段（或单独的 `.browserslistrc` 文件）指定项目覆盖的目标浏览器范围。该值会被 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 和 [`autoprefixer`](https://github.com/postcss/autoprefixer) 用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。
+Modern.js 支持设置 Web 应用需要兼容的浏览器范围，你可以在 `.browserslistrc` 文件里设置 [Browserslist](https://browsersl.ist/) 的值。
 
-Modern.js 中默认值如下:
+当你创建一个新的 Modern.js 项目时，默认会包含一份 `.browserslistrc` 配置，这表示 JavaScript 代码会被编译至 ES6 格式。
 
-```js
-['> 0.01%', 'not dead', 'not op_mini all'];
+```yaml title=".browserslistrc"
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10
 ```
 
-可以在[这里](https://github.com/browserslist/browserslist)了解如何自定义浏览器范围。
-
-查看 Modern.js Builder 文档了解更多 [Browserslist](https://modernjs.dev/builder/guide/advanced/browserslist.html) 相关内容。
-
-:::note
-Modern.js 支持配置 [output.overrideBrowserslist](/configure/app/output/override-browserslist) 覆盖默认 browserslist 值。
-
+:::tip
+请查看 [Modern.js Builder - 设置浏览器范围](https://modernjs.dev/builder/guide/advanced/browserslist) 来了解更多内容。
 :::
 
 ## Polyfill
@@ -36,42 +35,6 @@ Modern.js 在编译时默认通过 [core-js](https://github.com/zloirock/core-js
 
 :::
 
-### 运行时按需 Polyfill
-
-Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/User-Agent) 信息的运行时按需 Polyfill 方案，相比于 Babel 优势如下：
-
-- 不会插入到代码中，只根据访问页面的设备，按需下发 Polyfill 代码 ，减少整体代码体积。
-- 相同浏览器会公用一份 Polyfill 代码。因此，随着项目越来越多，基于 UA 的 Polyfill 代码下发速度会越来越快，综合速度超过常规方案。
-
-可以通过微生成器开启该功能：
-
-```bash
-? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「基于 UA 的 Polyfill」功能
-```
-
-执行命令后，在 `modern.config.ts` 中注册 Polyfill 插件:
+import UAPolyfill from '@site-docs/components/ua-polyfill';
 
-```ts title="modern.config.ts"
-import polyfillPlugin from '@modern-js/plugin-polyfill';
-
-export default defineConfig({
-  plugins: [..., polyfillPlugin()],
-});
-```
-
-配置 `output.polyfill` 为 `ua` 并且执行 `pnpm run build && pnpm run serve` 启动服务器后，访问页面可以看到 HTML 产物中包含如下脚本:
-
-```js
-<script src="/__polyfill__" crossorigin></script>
-```
-
-在 Chrome 51 下访问页面可以看到 `http://localhost:8080/__polyfill__` 返回内容如下:
-
-![ua-polyfill](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/ua-polyfill.png)
-
-:::caution 注意
-该功能只有在使用 Modern.js 内置的 Web Server 时才会生效。
-
-如果有自定义模版的需求，请参考 [HTML 模板](/guides/basic-features/html.html)。通过 `html.template` 或 `tools.html` 手动修改模版时，可能会导致该功能无法正确生效。
-:::
+<UAPolyfill />

package/docs/zh/guides/basic-features/data-fetch.mdx

@@ -341,9 +341,9 @@ export default async (): Promise<ProfileData> => {
 
 ### 常见问题
 
-1. loader 和 bff 函数的关系
+1. loader 和 BFF 函数的关系
 
-在 CSR 项目中，loader 在客户端执行，在 loader 可以直接调用 bff 函数进行接口请求。
+在 CSR 项目中，loader 在客户端执行，在 loader 可以直接调用 BFF 函数进行接口请求。
 
 在 SSR 项目中，每个 loader 也是一个服务端接口，我们推荐使用 loader 替代 http method 为 `get` 的 BFF 函数，作为接口层，避免多一层转发和执行。
 

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

@@ -473,7 +473,7 @@ export const init = (context: RuntimeContext) => {
 - 使用 `render`，仅在空闲时对静态资源进行加载，不会与首屏静态资源抢占网络。
 - 在 SSR 场景下，也会对数据进行预取。
 
-import Motivation from '@site-docs/components/convention-routing-movitation'
+import Motivation from '@site-docs/components/convention-routing-motivation'
 
 <Motivation/>
 

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

@@ -16,7 +16,7 @@ Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向
 - 通用构建引擎：Modern.js Builder。
 - 底层打包工具：webpack 和 rspack。
 
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ maxWidth: '540px' }} />
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
 
 ## 构建文档
 

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

@@ -18,13 +18,13 @@ Modern.js 提供了 `@modern-js/create` 生成器来创建项目，不要全局
 
 ```bash
 mkdir myapp && cd myapp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 也可以直接用新目录创建项目：
 
 ```bash
-npx @modern-js/create myapp
+npx @modern-js/create@latest myapp
 ```
 
 ## 初始化项目

package/docs/zh/guides/topic-detail/changesets/changelog.mdx

@@ -164,7 +164,7 @@ module.exports = {
 
 自定义 Changelog 还可以使用模块工程方案进行管理，提供通用方案。
 
-#### 使用 `npx @modern-js/create` 创建模块工程方案。
+#### 使用 `npx @modern-js/create@latest` 创建模块工程方案。
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块

package/docs/zh/guides/topic-detail/changesets/commit.mdx

@@ -197,7 +197,7 @@ commit 配置为 ./my-commit-config.js 即可:
 
 自定义 Changelog 还可以使用模块工程方案进行管理，提供通用方案。
 
-#### 使用 `npx @modern-js/create` 创建模块工程方案。
+#### 使用 `npx @modern-js/create@latest` 创建模块工程方案。
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块

package/docs/zh/guides/topic-detail/changesets/release-note.mdx

@@ -194,7 +194,7 @@ pnpm run gen-release-note -- --custom ./scripts/my-release-note-config.js
 
 custom 参数值还可以使用模块工程方案进行管理，提供通用方案。
 
-1. 使用 npx @modern-js/create 创建模块工程方案。
+1. 使用 npx @modern-js/create@latest 创建模块工程方案。
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块

package/docs/zh/guides/topic-detail/framework-plugin/extend.mdx

@@ -13,7 +13,7 @@ sidebar_position: 5
 首先我们初始化一个空的项目文件，并添加基础依赖：
 
 ```bash
-$ npx @modern-js/create modern-js-demo
+$ npx @modern-js/create@latest modern-js-demo
 ```
 
 ### 创建 Hook

package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -8,6 +8,28 @@ sidebar_position: 8
 
 ## CLI
 
+### `beforeConfig`
+
+- 功能：运行收集配置前的任务
+- 执行阶段：收集配置前
+- Hook 模型：AsyncWorkflow
+- 类型：`AsyncWorkflow<void, void>`
+- 使用示例：
+
+```ts
+import type { CliPlugin } from '@modern-js/core';
+
+export default (): CliPlugin => ({
+  setup(api) {
+    return {
+      beforeConfig: () => {
+        // do something
+      },
+    };
+  },
+});
+```
+
 ### `config`
 
 - 功能：收集配置

package/docs/zh/guides/topic-detail/generator/codesmith/develop.mdx

@@ -48,6 +48,6 @@ npx @modern-js/codesmith-cli <generatorName>
 其中 generatorName 为生成器包名。
 
 :::info
-`@modern-js/create` 也支持运行微生成器，可以使用 `npx @modern-js/create --generator <generatorName>` 运行自定义的微生成器。
+`@modern-js/create` 也支持运行微生成器，可以使用 `npx @modern-js/create@latest --generator <generatorName>` 运行自定义的微生成器。
 
 :::

package/docs/zh/guides/topic-detail/generator/plugin/abstract.mdx

@@ -10,7 +10,7 @@ Modern.js 提供的初始化模板具有通用性，能满足一些通用的项
 
 当你深度使用 Modern.js 时，必然会发现每次创建的项目都会进行一些针对自身项目的特定的相似改动，比如修改示例代码、增加一些配置、开启某些功能等。
 
-生成器插件可以帮你将这些针对个人或团队特定的改动沉淀下来，在执行 `npx @modern-js/create` 只需简单的带上 `--plugin` 参数即可避免每次创建完项目都需重复性修改项目的工作。
+生成器插件可以帮你将这些针对个人或团队特定的改动沉淀下来，在执行 `npx @modern-js/create@latest` 只需简单的带上 `--plugin` 参数即可避免每次创建完项目都需重复性修改项目的工作。
 
 生成器插件是在 Modern.js 提供的初始化模板项目的基础上，提供对模板进行增加、删除、修改的方法，并通过快捷的方式修改 `package.json`、`modernConfig` 配置和开启功能等操作。
 

package/docs/zh/guides/topic-detail/generator/plugin/develop.mdx

@@ -9,7 +9,7 @@ sidebar_position: 3
 Modern.js 提供了生成器插件用于创建开发项目，可直接执行以下命令创建:
 
 ```bash
-npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
+npx @modern-js/create@latest plugin --plugin @modern-js/generator-plugin-plugin
 ```
 
 插件类型不同，会提问不同的问题，可根据需求选择插件类型

package/docs/zh/guides/topic-detail/generator/plugin/use.mdx

@@ -9,7 +9,7 @@ sidebar_position: 2
 你可直接执行下面命令使用生成器插件：
 
 ```bash
-npx @modern-js/create --plugin <pluginName>
+npx @modern-js/create@latest --plugin <pluginName>
 ```
 
 plugin 参数支持声明多次，代表同时使用多个生成器插件。

package/docs/zh/guides/topic-detail/generator/project.mdx

@@ -11,7 +11,7 @@ Modern.js 提供了 `@modern-js/create` 作为项目生成器用于进行 Modern
 不需要全局安装 `@modern-js/create`，直接使用 npx 执行该工具即可：
 
 ```bash
-npx @modern-js/create [projectDir]
+npx @modern-js/create@latest [projectDir]
 ```
 
 :::info
@@ -32,7 +32,7 @@ npx @modern-js/create [projectDir]
 获取 `@modern-js/create` 工具版本。
 
 ```bash
-$ npx @modern-js/create --version
+$ npx @modern-js/create@latest --version
 
 [INFO] @modern-js/create v2.0.0
 ```
@@ -52,7 +52,7 @@ $ npx @modern-js/create --version
 该字段为 JSON 字符串，例如需执行包管理工具时：
 
 ```bash
-npx @modern-js/create --config '{"packageManager": "pnpm"}'
+npx @modern-js/create@latest --config '{"packageManager": "pnpm"}'
 ```
 
 具体配置信息可查看[工程方案配置](/guides/topic-detail/generator/config/common)。
@@ -105,7 +105,7 @@ Modern.js 支持使用生成器插件定制 Modern.js 默认的工程方案类
 
 指定微生成器。
 
-默认情况下 `@modern-js/create` 会执行 Modern.js 框架内置的微生成器，如果你需要执行定制的微生成器，又需要使用 `npx @modern-js/create` 的姿势，可直接使用该参数。
+默认情况下 `@modern-js/create` 会执行 Modern.js 框架内置的微生成器，如果你需要执行定制的微生成器，又需要使用 `npx @modern-js/create@latest` 的姿势，可直接使用该参数。
 
 关于定制微生成器可以参考[开发微生成器](/guides/topic-detail/generator/codesmith/introduce)。
 

package/docs/zh/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -24,7 +24,7 @@ title: 体验微前端
 
 ```bash
 mkdir masterApp && cd masterApp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 import DefaultMWAGenerate from "@site-docs/components/default-mwa-generate";
@@ -106,7 +106,7 @@ export default Layout;
 
 ```bash
 mkdir masterApp && cd masterApp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 <DefaultMWAGenerate />
@@ -134,7 +134,7 @@ import CustomRouterMicroFrontend from "@site-docs/components/custom-router-micro
 
 ```bash
 mkdir table && cd table
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 按照如下选择，生成项目：
@@ -186,7 +186,7 @@ export default Index;
 
 ```bash
 mkdir dashboard && cd dashboard
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 按照如下选择，生成项目：

package/docs/zh/tutorials/first-app/c01-start.mdx

@@ -17,7 +17,7 @@ import Prerequisites from "@site-docs/components/prerequisites"
 
 ```bash
 mkdir myapp && cd myapp
-npx @modern-js/create
+npx @modern-js/create@latest
 ```
 
 import InitApp from "@site-docs/components/init-app"

package/package.json

@@ -15,13 +15,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.19.1",
+  "version": "2.20.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.19.1"
+    "@modern-js/builder-doc": "^2.20.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -33,9 +33,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.19.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.19.1",
-    "@modern-js/doc-tools": "2.19.1"
+    "@modern-js/builder-doc": "2.20.0",
+    "@modern-js/doc-tools": "2.20.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.20.0"
   },
   "scripts": {
     "dev": "modern dev",

package/src/components/ShowcaseList/index.tsx

@@ -4,10 +4,10 @@ import styles from './index.module.scss';
 const getDomain = (url: string) => new URL(url).hostname;
 
 const TYPE_MAP = {
-  doc: 'Modern.js Doc',
-  module: 'Modern.js Module',
-  builder: 'Modern.js Builder',
-  framework: 'Modern.js Framework',
+  doc: 'Doc',
+  module: 'Module',
+  builder: 'Builder',
+  framework: 'Framework',
 };
 
 export const ShowcaseList = () => {

package/src/components/SolutionCards/index.module.scss

@@ -42,6 +42,13 @@
   }
 }
 
+@media (max-width: 480px) {
+  .card {
+    flex: 0 1 100%;
+    margin-bottom: 16px;
+  }
+}
+
 .title {
   font-size: 16px;
   font-weight: 600;

package/src/pages/index.module.scss

@@ -153,7 +153,7 @@
 
 @media screen and (max-width: 540px) {
   .title {
-    font-size: 9vw;
+    font-size: 8vw;
   }
 }