@modern-js/main-doc 2.22.1 → 2.23.0

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

@@ -7,9 +7,9 @@ title: enableHandleWeb
 - **类型：** `boolean`
 - **默认值：** `false`
 
-:::caution 注意
-请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
-:::
+import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
+
+<EnableBFFCaution />
 
 默认情况下，BFF 服务只能处理 BFF API 的请求。
 

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

@@ -7,10 +7,9 @@ sidebar_label: prefix
 - **类型：** `string`
 - **默认值：** `/api`
 
-:::caution 注意
-请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
+import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
 
-:::
+<EnableBFFCaution />
 
 默认情况下，BFF API 目录下的路由访问前缀是 `/api`, 如下目录结构：
 

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

@@ -7,13 +7,11 @@ sidebar_label: proxy
 - **类型：** `Record<string, string>`
 - **默认值：** `{}`
 
-:::info 补充信息
-请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
+import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
 
-:::
+<EnableBFFCaution />
 
-通过简单配置，无需编写代码，Modern.js 会自动转发请求。发送给 Modern.js BFF server 的请求，会代理到指定的服务上。
-BFF Proxy 使用了强大的 [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)，如果需要更多高级的用法， 可以查看它的[文档](https://github.com/chimurai/http-proxy-middleware#options)。
+通过简单配置，Modern.js 可以将发送给 BFF server 的请求，自动代理到指定的服务上。
 
 在 `modern.server-runtime.config.js` 中加入以下配置；即可开启代理：
 
@@ -28,27 +26,18 @@ export default defineConfig({
 });
 ```
 
-假设启动的 Modern.js BFF server 的服务地址是 `localhost:8080`，所有 path 以 `api` 开头的请求都会被拦截，如发送到 `localhost:8080/api/v1/topics` 的请求会被代理到 `https://cnodejs.org/api/v1/topics`。
+假设 Modern.js BFF server 的地址是 `localhost:8080`，所有以 `api` 开头的请求都会被代理到 `https://cnodejs.org`，如 `localhost:8080/api/v1/topics` 的请求会被代理到 `https://cnodejs.org/api/v1/topics`。
 
-你可以做路径的重写，如将发送到 `localhost:8080/api/topics` 的请求代理到 `https://cnodejs.org/api/v1/topics`。
+import BFFProxyPathRewrite from "@site-docs/components/bff-proxy-path-rewrite";
 
-```ts title="modern.server-runtime.config.ts"
-import { defineConfig } from '@modern-js/app-tools/server';
-export default defineConfig({
-  bff: {
-    proxy: {
-      '/api': {
-        target: 'https://cnodejs.org',
-        pathRewrite: { '/api/topics': '/api/v1/topics' },
-        changeOrigin: true,
-      },
-    },
-  },
-});
-```
+<BFFProxyPathRewrite />
 
 与 [dev.proxy](/configure/app/dev/proxy) 不同，本节所介绍的代理只作用于进入 BFF/API 服务的请求；同时，这一配置不但可以在开发环境中使用，在生产环境中也会代理相应的请求。
 
+import BFFProxyPrinciple from "@site-docs/components/bff-proxy-principle";
+
+<BFFProxyPrinciple />
+
 ## 常见用法
 
 ### 解决接口跨域问题
@@ -72,3 +61,4 @@ export default defineServerConfig({
   },
 };
 ```
+

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

@@ -87,7 +87,7 @@ Runtime 插件运行时配置和直接在 `modern.config.ts` 中的配置默认
 :::
 
 :::warning
-defineConfig 中只能定义 Runtime 插件的具体配置内容，确认是否开启插件还需要通过 `package.json` 中的 `modernConfig` 或者 `modern.config.ts` 中的配置决定。
+defineConfig 中只能定义 Runtime 插件的具体配置内容，确认是否开启插件还需要通过 `modern.config.ts` 中的配置决定。
 
 :::
 

package/docs/zh/configure/app/server/base-url.mdx

@@ -7,7 +7,7 @@ sidebar_label: baseUrl
 - **类型：** `string | string[]`
 - **默认值：** `undefined`
 
-统一设置服务端路由前缀（常用于共享域名的情况，区分流量)。
+统一设置服务端路由前缀（常用于多个应用共享同一域名的情况，区分流量)。
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/docs/zh/configure/app/server/public-routes.mdx

@@ -5,11 +5,11 @@ sidebar_label: publicRoutes
 # server.publicRoutes
 
 - **类型：** `Object`
-- **默认值：** 根据文件约定自动生成的服务端路由规则：应用的每个文件生成一条路由规则。
+- **默认值：** 根据文件约定自动生成的服务端路由规则，每个文件生成一条路由规则。
 
 该配置选项只作用于服务端路由，可以自定义 `config/public/` 下资源的访问路由。
 
-对象的 `key` 为当前应用的相对文件路径（不使用 `./`）, 值可以是 `string`。
+对象的 `key` 为 `config/public/` 的相对文件路径（不使用 `./`）, 值可以是 `string`。
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/docs/zh/configure/app/server/routes.mdx

@@ -5,9 +5,9 @@ sidebar_label: routes
 # server.routes
 
 - **类型：** `Object`
-- **默认值：** 根据文件约定自动生成的服务端路由规则：应用的每个入口生成一条路由规则，入口名称等于路由名称。
+- **默认值：** 根据文件约定自动生成的服务端路由规则，每个入口生成一条路由规则，入口名称等于路由路径。
 
-该配置选项只作用于服务端路由，可以自定义应用入口的服务访问配置。
+该配置选项只作用于服务端路由，可以自定义应用入口的访问路由。
 
 ## 自定义访问路由
 

package/docs/zh/configure/app/server/ssr-by-entries.mdx

@@ -7,7 +7,7 @@ sidebar_label: ssrByEntries
 - **类型：** `Object`
 - **默认值：** `undefined`
 
-按入口设置 ssr 选项，选项内的属性同 [ssr](./ssr.mdx)，指定值会和 ssr 属性内容做替换合并操作，例如：
+按入口设置 SSR 选项，选项内的属性同 [ssr](./ssr.mdx)，指定值会和 SSR 属性内容做替换合并操作，例如：
 
 :::info
 「 入口名 」默认为目录名，少数情况下通过 `source.entries` 自定义入口时，入口名为 `source.entries` 对象的 `key`。
@@ -19,11 +19,11 @@ export default defineConfig({
   server: {
     ssr: true,
     ssrByEntries: {
-      // page-a 不启用 ssr
+      // page-a 不启用 SSR
       'page-a': false,
     },
   },
 });
 ```
 
-如上配置，项目整体启用了 ssr, 但是针对入口 `page-a` 关闭了 ssr 渲染能力。
+如上配置，项目整体启用了 SSR, 但是针对入口 `page-a` 关闭了 SSR 渲染能力。

package/docs/zh/configure/app/server/ssr.mdx

@@ -25,7 +25,7 @@ export default defineConfig({
 
 当值类型为 `Object` 时，可以配置如下属性：
 
-- `mode`：`string = 'string'`，默认为使用 `renderToString` 渲染。配置为 'stream' 开启流式渲染。
+- `mode`：`string = 'string'`，默认为使用 `renderToString` 渲染。配置为 `stream` 开启流式渲染。
 - `forceCSR`：`boolean = false`，默认关闭强制 CSR 渲染。配置为 `true` 后，在页面访问时添加 `?csr=true` 即可强制 CSR。
 - `inlineScript`：`boolean = true`，默认情况下，SSR 的数据会以内联脚本的方式注入到 HTML 中，并且直接赋值给全局变量。配置为 `false` 后，会下发 JSON，而不是赋值给全局变量。
 

package/docs/zh/configure/app/usage.mdx

@@ -4,7 +4,7 @@ sidebar_position: 0
 
 # 配置使用
 
-Modern.js 中有两种配置，一个是编译时配置，一个是服务端运行时配置。
+Modern.js 中有两种配置，分别是编译时配置和服务端运行时配置。
 
 编译时配置可以在两个位置进行配置：
 
@@ -12,10 +12,10 @@ Modern.js 中有两种配置，一个是编译时配置，一个是服务端运
 - `package.json` 文件
 
 :::info
-Modern.js 不支持同时在 package.json 中和 modern.config.ts 中配置同一个配置项，推荐优先在 modern.config.ts 中进行配置。如果 Modern.js 检测到重复配置导致的冲突，将会抛出警告。
+Modern.js 不支持同时在 `package.json` 中和 `modern.config.ts` 中配置同一个配置项，推荐在 `modern.config.ts` 中进行配置。如果 Modern.js 检测到重复配置导致的冲突，将会抛出警告。
 :::
 
-服务端运行时配置可以在根路径下的 `modern.server-runtime.config.(ts|js|mjs)` 中自定义配置选项。
+服务端运行时配置可以在根路径下的 `modern.server-runtime.config.(ts|js|mjs)` 中进行配置。
 
 ## 在配置文件中配置
 
@@ -27,7 +27,7 @@ Modern.js 的配置文件定义在项目的根目录下，支持 `.ts`, `.js`
 
 ### modern.config.ts（推荐）
 
-我们推荐使用 .ts 格式的配置文件，它提供了友好的 TypeScript 类型提示，从而帮助你避免配置中的错误。
+我们推荐使用 `.ts` 格式的配置文件，它提供了友好的 TypeScript 类型提示，从而帮助你避免配置中的错误。
 
 从 `@modern-js/app-tools` 中导入 `defineConfig` 工具函数, 它会帮助你进行配置的类型推导和类型补全：
 
@@ -54,7 +54,7 @@ export default defineConfig({
 
 ### modern.config.js
 
-如果你在开发一个非 TypeScript 项目，可以使用 .js 格式的配置文件：
+如果你在开发一个非 TypeScript 项目，可以使用 `.js` 格式的配置文件：
 
 ```js title="modern.config.js"
 export default {
@@ -66,7 +66,7 @@ export default {
 };
 ```
 
-你也可以通过 `process.env.NODE_ENV` 进行动态设置：
+你也可以通过 `process.env.NODE_ENV`，根据环境做不同配置：
 
 ```js title="modern.config.js"
 export default {
@@ -98,7 +98,7 @@ export default defineConfig(({ env, command }) => ({
   - 当运行 `modern dev` 或 `modern start` 时，`env` 的值为 `development`。
   - 当运行 `modern build` 或 `modern serve` 时，`env` 的值为 `production`。
   - 当运行 `modern test` 时，`env` 的值为 `test`。
-- `command`: 对应当前运行的命令，如 `dev`、`start`、`build`、`serve`。
+- `command`：对应当前运行的命令，如 `dev`、`start`、`build`、`serve`。
 
 ### 导出异步函数
 
@@ -122,7 +122,7 @@ export default defineConfig(async ({ env, command }) => {
 
 Modern.js 命令行支持通过 `--config` 选项来指定配置文件的名称。
 
-例如，你需要在执行 build 命令时使用 `modern.prod.config.ts` 文件，可以在 `package.json` 中添加如下配置：
+例如，你需要在执行 `build` 命令时使用 `modern.prod.config.ts` 文件，可以在 `package.json` 中添加如下配置：
 
 ```json title="package.json"
 {
@@ -159,7 +159,7 @@ $ modern build -c modern.prod.config.js
 
 ### 注意事项
 
-- 不建议同时使用 `package.json` 和 `modern.config.js` 进行配置。如果同时使用了两者并出现配置冲突，Modern.js 会在命令行进行提示。
+- 不建议同时使用 `package.json` 和 `modern.config.js` 进行配置。如果同时使用了两者并出现配置冲突，Modern.js 会在命令行进行提示错误。
 - `@modern-js/runtime` 导出了同名的 [defineConfig](/apis/app/runtime/app/define-config) API，请注意区分。
 
 ## 本地调试配置

package/docs/zh/guides/advanced-features/code-split.mdx

@@ -7,8 +7,7 @@ sidebar_position: 6
 代码分割是优化前端资源加载的一种常用手段，本文将介绍 Modern.js 支持的三种代码分割方式：
 
 :::info
-使用 Modern.js [约定式路由](/guides/basic-features/routes#约定式路由)时，默认会根据路由组件做代码分割，包裹 `Suspense` 组件，无需自行进行代码分割。
-
+使用 Modern.js [约定式路由](/guides/basic-features/routes#约定式路由)时，默认会根据路由组件做代码分割，无需自行进行代码分割。
 :::
 
 - `import`
@@ -17,7 +16,7 @@ sidebar_position: 6
 
 ## import
 
-使用动态 `import()` 语法，`import` 接收的 JS 模块将作为一个新的打包入口被打包到单独的 JS 文件中。例如：
+使用动态 `import()` 语法，传入的 JS 模块将会被被打包到单独的 JS 文件中。例如：
 
 ```ts
 import('./math').then(math => {
@@ -25,15 +24,14 @@ import('./math').then(math => {
 });
 ```
 
-`./math` 路径对应的 JS 模块会被打包到单独的 JS 文件中。
-
 ## React.lazy
 
 React 官方提供的组件代码分割的方式。
 
 :::caution
-React 17 及以下版本不支持 SSR，建议 React17 的 SSR 应用使用 loadable。
+`React.lazy` 通常配合 `<Suspense>` 使用，因此仅在 CSR 或 React 18 Streaming SSR 中可用。
 
+对于使用传统 SSR（字符串渲染）的项目，不支持 `React.lazy`，请使用 Loadable API。
 :::
 
 ```ts
@@ -56,11 +54,11 @@ function MyComponent() {
 }
 ```
 
-`React.lazy` 更多用法请见 [React lazy](https://zh-hans.reactjs.org/docs/code-splitting.html#reactlazy)。
+`React.lazy` 更多用法请见 [React 官网文档](https://zh-hans.react.dev/reference/react/lazy)。
 
-## loadable
+## Loadable
 
-使用 `loadable` API，示例如下：
+在 Modern.js 中，可以从 `@modern-js/runtime/loadable` 中导出使用 Loadable API，示例如下：
 
 ```ts
 import loadable from '@modern-js/runtime/loadable';
@@ -72,9 +70,12 @@ function MyComponent() {
 }
 ```
 
-`loadable` 更多用法请见 [loadable API](/apis/app/runtime/utility/loadable)。
+Modern.js 开箱即用的支持在 SSR 中使用 `loadable`，无需再添加 Babel 插件，或是在 SSR 时向 HTML 中注入脚本。
 
-:::info
-`loadable` 开箱即用的支持 SSR，但不支持和 Suspense 一起使用，如果是 CSR 项目可以使用 [loadable.lazy](https://loadable-components.com/docs/suspense/)
+但需要注意的是，任何 Loadable API 在 SSR 中都不支持配合 `<Suspense>` 使用。
 
+:::info
+如果希望在 React 17 及以下的 CSR 项目中使用 `<Suspense>`，可以用 [loadable.lazy](https://loadable-components.com/docs/suspense/) 代替 `React.lazy`。
 :::
+
+更多用法请见 [Loadable API](/apis/app/runtime/utility/loadable)。

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

@@ -81,7 +81,6 @@ import appTools, { defineConfig } from '@modern-js/app-tools';
     "overrides": {
       "@rspack/core": "nightly",
       "@rspack/dev-client": "nightly",
-      "@rspack/dev-middleware": "nightly",
       "@rspack/plugin-html": "nightly"
     }
   }

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

@@ -74,7 +74,7 @@ Warning: Expected server HTML to contain a matching <div> in <div>.
 这是 React 在客户端执行 hydrate 逻辑时，发现渲染结果与 SSR 渲染结果不一致造成的。虽然页面表现正常，但在复杂应用中，很有可能因此出现 DOM 层级混乱、样式混乱等问题。
 
 :::info
-关于 hydrate (注水)逻辑请参考[这里](https://reactjs.org/docs/react-dom.html#hydrate)。
+关于 hydrate (注水)逻辑请参考[这里](https://zh-hans.react.dev/reference/react-dom/hydrate)。
 
 :::
 
@@ -447,7 +447,7 @@ export default Page;
 ```
 
 `Await` 需要包裹在 `Suspense` 组件内部，`Await` 的 `resolve` 传入的是 Data Loader 异步获取的数据，当数据获取完成后，
-通过 [Render Props](https://reactjs.org/docs/render-props.html) 模式，渲染获取到的数据。在数据的获取阶段，将展示
+通过 [Render Props](https://zh-hans.react.dev/reference/react/cloneElement#passing-data-with-a-render-prop) 模式，渲染获取到的数据。在数据的获取阶段，将展示
 `Suspense` 组件 `fallback` 属性设置的内容。
 
 :::warning 注意

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

@@ -8,14 +8,14 @@ Modern.js 默认集成了 [Jest](https://jestjs.io/) 的测试能力。
 
 我们首先需要执行 `pnpm run new` 启用「单元测试 / 集成测试」功能：
 
-```
+```bash
 ? 请选择你想要的操作 启用可选功能
 ? 请选择功能名称 启用「单元测试 / 集成测试」功能
 ```
 
-执行上述命令后，`package.json` 中将会自动生成 `"test": "modern test"` 命令。
+执行上述命令后，`package.json` 中将会自动添加 `"test": "modern test"` 命令。
 
-在 `modern.config.ts` 中注册 Test 插件：
+在 `modern.config.ts` 中注册 `@modern-js/plugin-testing` 插件后即可使用测试功能：
 
 ```ts title="modern.config.ts"
 import testPlugin from '@modern-js/plugin-testing';
@@ -36,7 +36,7 @@ Modern.js 默认识别的测试文件路径为：`<rootDir>/src/**/*.test.[jt]s?
 
 Modern.js test 支持使用 [testing-library](https://testing-library.com/docs/) 相关包 API，可直接通过 `@modern-js/runtime/testing` 进行导入:
 
-```
+```ts
 import { render, screen } from '@modern-js/runtime/testing';
 ```
 

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

@@ -14,7 +14,7 @@ Modern.js 允许在 JS 和 CSS 中使用别名导入自定义目录下的模块
 ```
 
 :::info
-在开启可选功能时，生成器也会动态的添加内置别名，例如启用 BFF 时默认会添加 `@api` 别名。
+在开启可选功能时，new 命令也会动态的添加内置别名，例如启用 BFF 时默认会添加 `@api` 别名。
 
 :::
 
@@ -27,7 +27,7 @@ Modern.js 允许在 JS 和 CSS 中使用别名导入自定义目录下的模块
 │   │   └── base.css
 │   └── utils
 │       └── index.ts
-├── App.tsx
+└── App.tsx
 ```
 
 `src/App.tsx` 中写法如下：
@@ -37,7 +37,9 @@ import utils from '@/src/common/utils';
 import '@/src/common/styles/base.css';
 ```
 
-Modern.js 也提供了自定义别名的方式，以添加 `@common` 别名为例，对于 TypeScript 项目，只需要在项目根目录 `tsconfig.json` 下配置 `compilerOptions.paths` 如下：
+Modern.js 也提供了自定义别名的方式，以添加 `@common` 别名为例：
+
+对于 TypeScript 项目，只需要在项目根目录 `tsconfig.json` 下配置 `compilerOptions.paths`：
 
 ```json
 {

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

@@ -9,7 +9,7 @@ Modern.js 提供了 **JSX 语法**和 **HTML(EJS) 语法**两种方式用于自
 
 ## JSX 语法
 
-Modern.js 约定，在 `src/` 目录下，或在入口目录下，可以创建 `Document.[jt]sx` 并默认导出组件。该组件的渲染结果可以作为入口的 HTML 模板。
+Modern.js 约定，在 `src/` 或入口目录下，可以创建 `Document.[jt]sx` 文件并默认导出组件，该组件的渲染结果可以作为入口的 HTML 模板。
 
 例如以下目录结构：
 
@@ -27,17 +27,17 @@ Modern.js 约定，在 `src/` 目录下，或在入口目录下，可以创建 `
 
 `entry-a` 会优先使用当前入口下的 `Docoument.[jt]sx` 文件。如果当前入口没有 `Document.[jt]sx` 文件，例如 `entry-b`，则会查找根目录下的 `Document.[jt]sx` 文件。
 
-如果还没有，则会兜底到传统模板的逻辑。
+如果未找到，将会使用 Modern.js 的默认模板。
 
 ### HTML 组件
 
-Modern.js 提供了一些列渲染页面的组件，用来帮助开发者生成模板，可以从 `@modern-js/runtime/document` 中导出这些组件：
+Modern.js 提供了一些列渲染页面的组件，用来帮助开发者生成模板，可以从 `@modern-js/runtime/document` 中使用这些组件：
 
 ```tsx
 import { Html, Body, Root, Head, Scripts } from '@modern-js/runtime/document';
 ```
 
-这些组件分别渲染：
+这些组件分别用于渲染：
 
 - `Html`：提供原生 HTML Element 的能力，并能默认渲染开发者未添加的必须的组件。`<Head>` 和 `<Body>` 是必须要存在的，其它组件可以按需选择合适的组件进行组装。
 
@@ -57,10 +57,10 @@ import { Html, Body, Root, Head, Scripts } from '@modern-js/runtime/document';
 
 Modern.js 也提供了 `DocumentContext` 来提供一些配置、环境参数，方便直接获取。主要以下参数：
 
-- `processEnv`：提供构建时的 `process.env`
-- `config`：Modern.js 项目的配置。目前只暴露出 output 相关的配置
-- `entryName`：当前的入口名
-- `templateParams`：HTML 模板的参数（为了兼容传统模板，不推荐使用）
+- `processEnv`：提供构建时的 `process.env`。
+- `config`：Modern.js 项目的配置。目前只暴露出 output 相关的配置。
+- `entryName`：当前的入口名。
+- `templateParams`：HTML 模板的参数（为了兼容传统模板，不推荐使用）。
 
 ### 示例
 
@@ -151,7 +151,7 @@ export default function Document(): React.ReactElement {
 
 Modern.js 也支持 HTML 语法。默认情况下，Modern.js 的应用工程中会内置一份 HTML 模板，用于生成 HTML 代码。
 
-基于 HTML 语法的模板，Modern.js 提供了 **自定义 HTML 片段**和**完全自定义 HTML 模板**两种方式来自定义模板。
+基于 HTML 语法的模板，Modern.js 提供了**自定义 HTML 片段**和**完全自定义 HTML 模板**两种方式来自定义模板。
 
 ### 自定义 HTML 片段
 

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

@@ -6,7 +6,7 @@ sidebar_position: 6
 
 Modern.js 提供了快速生成 Mock 数据的功能，能够让前端独立自主开发，不被后端接口阻塞。
 
-## Mock 文件
+## 启用 Mock
 
 约定当 `config/mock` 目录下存在 `index.[jt]s` 时，会自动开启 Mock 功能，如下：
 
@@ -63,7 +63,7 @@ module.exports = {
 
 :::
 
-## 延迟返回
+## 延迟响应
 
 - 可以使用浏览器「 弱网模拟 」的功能实现。
 - 可以通过 `setTimeout` 为单个接口设置延迟，例如：

package/docs/zh/guides/topic-detail/_category_.json

@@ -1,5 +1,5 @@
 {
   "label": "专题详解",
-  "position": 6,
+  "position": 8,
   "collapsed": false
 }

package/docs/zh/guides/troubleshooting/cli.mdx

@@ -58,6 +58,6 @@ pnpm v6:
 
 总结来说：
 
-**在使用 pnpm v7 时，如果传递参数给 pnpm，需要将参数放置到命令前**
+**在使用 pnpm v7 时，如果传递参数给 pnpm，需要将参数放置到命令前**。
 
 **在使用 pnpm v6 时，如果传递的参数给 pnpm，不需要加 `--`；如果传递的参数是给脚本使用，需要增加 `--` 字符串**。

package/docs/zh/guides/troubleshooting/dependencies.mdx

@@ -105,6 +105,6 @@ Type '{}' is not assignable to type 'ReactNode'.
 **Modern.js 框架推荐使用的 React 版本为 >= 18.0.0**，并且不同功能对 React 版本的要求有所不同。
 
 - 如果你在使用 React 17，那么部分框架功能将无法使用，比如 Steaming SSR，因为它依赖 React 18 提供的新特性。
-- 如果你仍然在使用 React 16，那么将无法使用 Modern.js 的运行时或服务端能力。你可以考虑使用 Modern.js 的构建模式，即只使用 Modern.js 的构建能力，这种情况是可以继续使用 React 16 的。
+- 如果你仍然在使用 React 16，那么将无法使用 Modern.js 的运行时或服务端能力。你可以考虑使用 Modern.js 的构建模式，即只使用 Modern.js 的构建能力，这种情况可以继续使用 React 16。
 
 在 Modern.js 未来的 major 版本中，我们会逐步移除对 React 16 和 React 17 的支持。因此，请尽快升级到 React 18 以上版本。

package/package.json

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