@modern-js/main-doc 2.0.0-beta.2 → 2.0.0-beta.4

package/zh/guides/advanced-features/ssr.md

@@ -1,13 +1,13 @@
 ---
-title: 服务端渲染
+title: 服务端渲染（SSR）
 sidebar_position: 3
 ---
 
-在 Modern.js 中，和 Web Server 一样，SSR 服务与应用也是一体的，开发者无需为 SSR 编写复杂的服务端逻辑。同样，开发者也无需关心 SSR 服务的运维，Modern.js 拥有完备的 SSR 降级策略，保证页面能够安全运行。
+在 Modern.js 中，SSR 也是开箱即用的。开发者无需为 SSR 编写复杂的服务端逻辑，也无需关心 SSR 的运维，或是创建单独的服务。Modern.js 拥有完备的 SSR 降级策略，保证页面能够安全运行。
 
-Modern.js 启用 SSR 非常简单，只需要设置 [`server.ssr`](/docs/configure/app/server/ssr) 为 `true` 即可：
+启用 SSR 非常简单，只需要设置 [`server.ssr`](/docs/configure/app/server/ssr) 为 `true` 即可：
 
-```json title="package.json"
+```json
 {
   "server": {
     "ssr": true
@@ -15,14 +15,25 @@ Modern.js 启用 SSR 非常简单，只需要设置 [`server.ssr`](/docs/configu
 }
 ```
 
-## SSR 时的数据请求
+## SSR 时的数据获取
 
-Modern.js 中提供了 `useLoader` Hooks API，可以在某些场景下代替 `useEffect` 进行数据请求。这是一个同构的 API，直接使用它即可完成在服务端的数据获取：
+Modern.js 中提供了 Data Loader，方便开发者在 SSR、CSR 下同构的获取数据。每个路由模块，如 `layout.tsx` 和 `page.tsx` 都可以定义自己的 Data Loader：
 
-```ts
-const { data, loading, error } = useLoader(() => {
-  return loadData()
-});
+```ts title="src/routes/page.tsx"
+export const loader = () => {
+  return {
+    message: 'Hello World',
+  };
+};
+```
+
+在组件中可以通过 Hooks API 的方式获取 `loader` 函数返回的数据：
+
+```tsx
+export default () => {
+  const data = useLoaderData();
+  return <div>{data.message}</div>;
+}
 ```
 
 Modern.js 打破传统的 SSR 开发模式，提供了用户无感的 SSR 开发体验。并且提供了优雅的降级处理，一旦 SSR 请求失败，会自动降级在浏览器端重新发起请求。
@@ -30,16 +41,14 @@ Modern.js 打破传统的 SSR 开发模式，提供了用户无感的 SSR 开发
 不过，开发者仍然需要关注数据的兜底处理，例如 `null` 值或不符合预期的数据返回。避免在 SSR 时产生 React 渲染错误或是返回凌乱的渲染结果。
 
 :::info 补充信息
-关于 `useLoader` 的详细介绍可以参考[这里](/docs/apis/app/runtime/core/use-loader)。
+使用 Data Loader 时，数据获取发生在渲染前，Modern.js 也仍然支持在组件渲染时获取数据。更多相关内容可以查看[数据获取](/docs/guides/basic-features/data-fetch)。
 :::
 
 ## 保持渲染一致
 
-代码中区分 SSR 和 CSR 渲染，通常需要根据当前的运行容器环境特征做判断，例如 [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) 信息或是某个 Native 模块。如果处理不够仔细，此时很有可能出现不符合预期的渲染结果。
-
-这里通过一个例子，演示当 SSR 与 CSR 渲染不一致时出现的问题。
+有些业务中，通常需要根据当前的运行容器环境特征做不同的 UI 展示，例如 [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) 信息。如果处理不够仔细，此时很有可能出现不符合预期的渲染结果。
 
-在组件中添加以下代码：
+这里通过一个例子，演示当 SSR 与 CSR 渲染不一致时出现的问题，在组件中添加以下代码：
 
 ```tsx
 {
@@ -57,10 +66,10 @@ Modern.js 打破传统的 SSR 开发模式，提供了用户无感的 SSR 开发
 Warning: Expected server HTML to contain a matching <div> in <div>.
 ```
 
-这是因为 React 在客户端执行注水逻辑时，发现渲染结果与 SSR 渲染结果不一致造成的。虽然页面表现正常，但在复杂应用中，很有可能因此出现 DOM 层级混乱、样式混乱等问题。
+这是 React 在客户端执行 hydrate 逻辑时，发现渲染结果与 SSR 渲染结果不一致造成的。虽然页面表现正常，但在复杂应用中，很有可能因此出现 DOM 层级混乱、样式混乱等问题。
 
 :::info 注
-关于注水逻辑请参考[这里](https://reactjs.org/docs/react-dom.html#hydrate)。
+关于 hydrate (注水)逻辑请参考[这里](https://reactjs.org/docs/react-dom.html#hydrate)。
 :::
 
 应用需要保持 SSR 与 CSR 渲染结果的一致性，如果存在不一致的情况，说明这部分内容无需在 SSR 中进行渲染。Modern.js 为这类在 SSR 中不需要渲染的内容提供 [`<NoSSR>` 工具组件](/docs/apis/app/runtime/core/use-runtime-context)：
@@ -131,29 +140,25 @@ SPR 利用预渲染与缓存技术，为 SSR 页面提供静态 Web 的响应性
 
 在 Modern.js 中使用 SPR 非常简单，只需要在组件中新增 `PreRender` 组件，该组件所在的页面就会自动开启 SPR。
 
-这里模拟一个使用 `useLoader` API 的组件，`useLoader` 中的请求需要消耗 2s 时间。
+这里模拟一个使用 `useLoaderData` API 的组件，Data Loader 中的请求需要消耗 2s 时间。
 
 ```jsx
-import { useLoader } from '@modern-js/runtime';
+import { useLoaderData } from '@modern-js/runtime/router';
+
+export const loader = async () => {
+  await new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve(null);
+    }, 2000);
+  });
+
+  return {
+    message: 'Hello Modern.js',
+  };
+};
 
 export default () => {
-  const { data } = useLoader(
-    async () => {
-      await new Promise((resolve, reject) => {
-        setTimeout(() => {
-          resolve(null);
-        }, 2000);
-      });
-
-      return {
-        message: 'Hello Modern.js',
-      };
-    },
-    {
-      params: 'foo',
-    },
-  );
-
+  const data = useLoaderData();
   return <div>{data?.message}</div>;
 };
 ```
@@ -184,3 +189,104 @@ import { PreRender } from '@modern-js/runtime/ssr';
 :::info 补充信息
 `PreRender` 的详细使用可以参考[这里](/docs/apis/app/runtime/ssr/pre-render)。
 :::
+
+## Treeshaking
+
+开启 SSR 时，Modern.js 会用相同的入口，构建出 SSR Bundle 和 CSR Bundle 两份产物。因此，在 SSR Bundle 中存在 Web API，或是在 CSR Bundle 中存在 Node API 时，都可能导致运行出错。
+
+在组件中引入 Web API，通常情况下是要做一些全局监听，或是获取浏览器相关的数据，例如：
+
+```tsx
+document.addEventListener('load', () => {
+  console.log('document load');
+});
+const App = () => {
+  return <div>Hello World</div>
+}
+export default App;
+```
+
+在组件文件中引入 Node API，通常情况下是因为使用了 Data Loader，例如：
+
+```ts
+import fse from 'fs-extra';
+export const loader = () => {
+  const file = fse.readFileSync('./myfile');
+  return {
+    ...
+  };
+};
+```
+
+### 环境变量区分
+
+对于第一种情况，我们可以直接使用 Modern.js 内置的环境变量 `MODERN_TARGET` 进行判断，在构建时删除无用代码：
+
+```ts
+if (process.env.MODERN_TARGET === 'browser') {
+  document.addEventListener('load', () => {
+    console.log('document load');
+  });
+}
+```
+
+:::note
+更多内容可以查看[环境变量](/docs/guides/basic-features/env-vars)。
+:::
+
+### 文件后缀区分
+
+但例如第二种情况，Treeshaking 的方式并不能保证代码被完全分离。Modern.js 也支持通过 `.node.` 后缀的文件来区分 SSR Bundle 和 CSR Bundle 产物的打包文件。
+
+例如在代码中引入了 `fs-extra`，这时候直接引用到组件中，会造成 CSR 加载报错。可以创建同名的 `.ts` 和 `.node.ts` 文件做一层代理：
+
+```ts title="compat.ts"
+export { readFileSync } from 'fs-extra';
+```
+
+```ts title="compat.node.ts"
+export const readFileSync: any = () => {};
+```
+
+在文件中直接引入 `./compat`，此时 SSR 环境下会优先使用 `.node.ts` 后缀的文件，CSR 环境下会使用 `.ts` 后缀的文件。
+
+```ts title="App.tsx"
+import { readFileSync } from './compat'
+
+export const loader = () => {
+  const file = readFileSync('./myfile');
+  return {
+    ...
+  };
+};
+```
+
+### 独立文件
+
+上述两种方式，都会为开发者带来一些心智负担。Modern.js 基于[嵌套路由](/docs/guides/basic-features/routes)开发设计了[更简单的方案](/docs/guides/basic-features/data-fetch)来分离 CSR 和 SSR 的代码。
+
+## 接口请求
+
+在 SSR 中发起接口请求时，开发者有时自己封装了同构的请求工具。部分接口需要传递用户 Cookie，开发者可以通过 [`useRuntimeContext`](/docs/guides/basic-features/data-fetch#route-loader) API 获取到请求头来实现。
+
+需要注意的是，此时获取到的是 HTML 请求的请求头，不一定适用于接口请求，因此**千万不能**透传所有请求头。并且，一些后端接口，或是通用网关，会根据请求头中的信息做校验，全量透传容易出现各种难以排查的问题，推荐**按需透传**。
+
+如果实在需要透传所有请求头，请务必过滤 `host` 字段。
+
+## 流式渲染
+
+Modern.js 支持了 React 18 的流式渲染，可以通过如下配置修改默认的渲染模式：
+
+```json
+{
+  "server": {
+    "ssr": {
+      "mode": "stream"
+    }
+  }
+}
+```
+
+:::note
+目前 Modern.js 内置的数据获取方式还未支持流式渲染，如迫切需要开发者可以按照 React Stream SSR 的 Demo 自建。
+:::

package/zh/guides/advanced-features/testing.md

@@ -1,4 +1,36 @@
 ---
-title: 测试
 sidebar_position: 10
 ---
+
+# 测试
+
+Modern.js 默认继承了 [Jest](https://jestjs.io/) 的测试能力。
+
+我们首先需要执行 `pnpm run new` 启用「单元测试 / 集成测试」功能：
+
+```
+? 请选择你想要的操作： 启用可选功能
+? 启用可选功能： 启用「单元测试 / 集成测试」功能
+```
+
+执行上述命令后，`package.json` 中将会自动生成 `"test": "modern test"` 命令。
+
+## 测试文件
+
+Modern.js 默认识别的测试文件路径为： `<rootDir>/src/**/*.test.[jt]s?(x)` 和 `<rootDir>/tests/**/*.test.[jt]s?(x)`。
+
+如果你需要自定义 test 目录，可通过 [tools.jest](/docs/configure/app/tools/jest) 进行配置。
+
+## 使用姿势
+
+Modern.js test 支持使用 [testing-library](https://testing-library.com/docs/) 相关包 API，可直接通过 `@modern-js/runtime/testing` 进行导入:
+
+```
+import { render, screen } from '@modern-js/runtime/testing';
+```
+
+其他 Modern.js 支持的 testing API 可参考[这里](/docs/apis/app/runtime/testing/cleanup)。
+
+## transform
+
+Modern.js 测试默认使用 [babel-jest](https://www.npmjs.com/package/babel-jest) 进行源码编译，如果你需要使用 [ts-jest](https://github.com/kulshekhar/ts-jest)，可以通过 [testing.transform](/docs/configure/app/testing/transformer) 进行配置。

package/zh/guides/advanced-features/web-server.md

@@ -12,8 +12,8 @@ Modern.js 作为以客户端为中心的开发框架，对服务端的定制能
 在项目根目录执行 `pnpm run new` 命令，按照如下选择，开启「自定义 Web Serve」功能：
 
 ```bash
-? 请选择你想要的操作： 创建工程元素
-? 创建工程元素： 新建「自定义 Web Server」源码目录
+? 请选择你想要的操作 创建工程元素
+? 创建工程元素 新建「自定义 Web Server」源码目录
 ```
 
 执行命令后，项目目录下会新建 `server/index.ts` 文件，自定义逻辑在这个文件中编写。

package/zh/guides/basic-features/builder.md

@@ -0,0 +1,46 @@
+---
+title: 构建能力
+sidebar_position: 2
+---
+
+**Modern.js 的构建能力由 [Modern.js Builder](https://modernjs.dev/builder) 提供。**
+
+Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向现代 Web 开发场景的构建引擎，可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 rspack 等多种打包工具，默认情况下使用最成熟的 webpack 进行打包。
+
+## 构建架构
+
+从构建的角度看，Modern.js 分为三层架构，从上到下依次是：
+
+- 上层研发框架：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' }} />
+
+## 构建文档
+
+由于 Modern.js Builder 是一个可独立使用的模块，我们为它提供了单独的文档，文档地址为：[modernjs.dev/builder](https://modernjs.dev/builder)。
+
+在该文档中，你可以了解到 Modern.js Builder 的详细介绍，同时也可以找到各个构建能力的完整使用指南。当你遇到构建方面的需求或问题时，建议你优先阅读 Modern.js Builder 文档来解决。
+
+## 构建配置
+
+Modern.js 的配置继承自 Modern.js Builder，因此你可以在 Modern.js 中使用 Modern.js Builder 提供的所有构建配置。
+
+以 Modern.js Builder 的 `html.title` 配置项为例，你可以直接在 `modern.config.ts` 文件中使用该配置项，它会被自动传递给 Modern.js Builder。
+
+```ts title="modern.config.js"
+export default defineConfig({
+  html: {
+    title: 'example',
+  },
+});
+```
+
+关于构建配置的详细说明，请参考 [「Modern.js Builder - Builder 配置」](https://modernjs.dev/builder/zh/guide/basic/builder-config.html)。
+
+## 构建能力
+
+Modern.js Builder 提供了丰富的构建能力，包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。
+
+我们推荐你阅读 [「Modern.js Builder - 功能导航」](https://modernjs.dev/builder/zh/guide/features.html) 来了解 Modern.js Builder 提供的所有构建能力。

package/zh/guides/basic-features/css/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "CSS 开发方案",
-  "position": 3
+  "position": 4
 }

package/zh/guides/basic-features/css/less-sass.md

@@ -4,20 +4,7 @@ sidebar_position: 4
 
 # Less 和 Sass
 
-[Less](https://lesscss.org/) 和 [Sass](https://sass-lang.com/) 是常用的两种 CSS 预处理器，Modern.js 通过插件来提供 Less 和 Sass 编译能力的支持。
-
-## 启用 Less 或 Sass
-
-为了使用 Less 或 Sass 编译能力，我们需要先启用对应的功能。
-
-以 Less 为例，在当前项目根目录执行 new 命令, 并选择 **启用 Less 支持** 即可。
-
-```bash
-$ pnpm run new
-? 请选择你想要的操作
-? 启用可选功能 (Use arrow keys)
-❯ 启用 Less 支持
-```
+[Less](https://lesscss.org/) 和 [Sass](https://sass-lang.com/) 是常用的两种 CSS 预处理器，Modern.js 内置了 Less 和 Sass 编译能力的支持。
 
 ## 自定义配置
 

package/zh/guides/basic-features/css/tailwindcss.md

@@ -9,8 +9,8 @@ sidebar_position: 2
 按照如下进行选择：
 
 ```bash
-? 请选择你想要的操作: 启用可选功能
-? 启用可选功能: 启用 Tailwind CSS 支持
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用 Tailwind CSS 支持
 ```
 
 使用时在入口的根组件(如 `src/App.jsx`)添加如下代码：
@@ -68,11 +68,7 @@ export default defineConfig({
 在开启「Tailwind CSS 支持」的功能后，首先需要安装 [`Twin`](https://github.com/ben-rogerson/twin.macro) 依赖:
 
 ``` bash
-# package manager is `pnpm`
 pnpm add twin.macro -D
-
-# package manager is `yarn`
-yarn add twin.macro -D
 ```
 
 当项目安装 `twin.macro` 依赖后，Modern.js 会检测到该依赖并对内置的 `babel-plugin-macro` 增加 `twin.macro` 相关的配置。因此在安装完依赖后，无需手动配置。下面是一个简单使用 `twin.macro` 的示例：

package/zh/guides/basic-features/data-fetch.md

@@ -1,6 +1,6 @@
 ---
 title: 数据获取
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过这些 API，在 CSR 和 SSR 环境同构的进行开发。

package/zh/guides/basic-features/env-vars.md

@@ -23,6 +23,40 @@ Modern.js 提供了对环境变量的支持，包含内置的环境变量和自
 MODERN_ENV 的优先级高于 NODE_ENV。
 :::
 
+### MODERN_TARGET
+
+使用 `@modern-js/runtime` 时会自动注入，用于区分 SSR 与 CSR 环境。开发者可以自行在代码中判断，构建时会默认移除 dead code。
+
+```ts title="App.tsx"
+function App() {
+  if (process.env.MODERN_TARGET === 'browser') {
+    console.log(window.innerHeight);
+  };
+};
+```
+
+开发环境打包后，可以看到 SSR 产物和 CSR 产物如下：
+
+```js title="dist/bundles/main.js"
+function App() {
+  if (false) {}
+}
+```
+
+```js title="dist/static/main.js"
+function App() {
+  if (true) {
+    console.log(window.innerHeight);
+  }
+}
+```
+
+:::note
+在生产环境，会将 dead code 移除，例如上述 `if` 语句。
+:::
+
+这种方式可以针对不同客户端提供不同的产物，保证代码体积最小化。也能方便处理不同环境下，代码中的一些副作用，
+
 ## 自定义环境变量
 
 环境变量支持通过 `shell` 和 `.env` 文件两种方式指定。

package/zh/guides/basic-features/html.md

@@ -3,6 +3,188 @@ title: HTML 模板
 sidebar_position: 9
 ---
 
+Modern.js 提供了 `jsx` 和 `ejs` 两种方式用于自定义 html 模板。推荐使用 `jsx` 语法，让写模板跟写组件一样丝滑。
+
+## jsx
+
+### 使用说明
+
+#### 引入
+```tsx
+import {
+  Html,
+  Root,
+  Head,
+  DocumentContext,
+  Body,
+} from '@modern-js/runtime/document';
+```
+
+#### 导出
+```tsx
+export default Document() {}
+
+```
+
+#### 文件位置
+
+Document 文件，默认在应用根目录下:
+
+```bash
+.
+├── src
+│   ├── modern-app-env.d.ts
+│   ├── myapp
+│   │   └── routes
+│   │       ├── index.css
+│   │       ├── layout.tsx
+│   │       ├── Document.tsx
+│   │       └── page.tsx
+│   ├── new-entry
+│   │   └── routes
+│   │       ├── index.css
+│   │       ├── layout.tsx
+│   │       ├── Document.tsx
+│   │       └── page.tsx
+│   └── Document.tsx
+├── modern.config.ts
+├── package.json
+├── pnpm-lock.yaml
+├── README.md
+└── tsconfig.json
+```
+
+多 entry 场景构建时，优先 entry 的根目录下的 Docoument.tsx 文件。如果当前 entry 没有 Document.tsx 文件，则会查找根目录下的 Document.tsx 文件。
+如果还没有，则会 fallback 到 `html 模板` 的逻辑。
+
+#### 子组件
+
+Document 模板共提供了 `Html`、`Root` `Head` `Body` 渲染页面的组件，以及 `DocumentContext` 等提供
+分别渲染：
+- `Html`: 提供 html 原生 dom。并计算出 `DocumentStructrueContext` 的值，将 `Html` 的结构传递给子组件，判断其它子组件是否默认渲染。
+
+- `Body`: 渲染生成 `body` 节点。其子元素包含 `Root` 组件。支持其它元素同时作为子元素，例如页脚。
+
+- `Root`: 渲染的根节点 `<div id='root'></div>`。默认根节点的 `id = 'root'`。可以设置 props.rootId 来更改 id 属性。子元素，也会被渲染进 DOM 里，随着 react 渲染完成，会替换掉，一般用来实现全局 loading。
+
+- `Head`: 渲染生成 `head` 节点。会自动填充 meta 元素，以及 `Scripts` 组件。
+
+- `Scripts`: 将构建产生的 script 标签渲染到该位置。用于调整构建产物的位置，默认放在 `Head` 组件里，用于
+
+`Html` 组件中，`Head` 和 `Body` 是必须要存在的，其它组件可以按需选择合适的组件进行组装。
+
+#### 模板参数
+
+因为是 JSX 形式，Document.tsx 里，可以比较自由的在组件内使用各种变量去赋值给各种自定义组件。
+但同时 Document 自身也提供了 `DocumentContext` context 来提供一些配置、环境参数，方便直接获取。主要以下参数：
+
+- `processEnv`：提供构建时的 `process.env`
+- `config`: Modern.js 项目的配置。目前只暴露出 output 相关的配置
+- `entryName`: 当前的 entry 名。
+- `templateParams`: html 模板的参数，由 builder 提供。对应 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 的 `templateParameters` 配置项最终获取到的结果。不建议使用!
+
+
+### 示例
+
+```tsx
+import React, { useContext } from 'react';
+import {
+  Html,
+  Root,
+  Head,
+  DocumentContext,
+  Body,
+} from '@modern-js/runtime/document';
+import Script from '@/components/Script';
+
+// 默认导出
+export default function Document(): React.ReactElement {
+  // DocumentContext 提供一些构建时的参数
+  const {
+    config: { output: htmlConfig },
+    entryName,
+    templateParams,
+  } = useContext(DocumentContext);
+
+  return (
+    <Html>
+      <Head>
+        // Head 组件支持自定义子元素。包括 link, script
+        <link href="https://modernjs.dev">Modern.js</link>
+        <script
+          // inline script 的脚本需要如下处理
+          dangerouslySetInnerHTML={{
+            __html: `window.b = 22`,
+          }}
+        ></script>
+      </Head>
+      <Body>
+        // rootId 可以更改根元素的 id
+        <Root rootId="root">
+          // Root 支持子元素
+          <h1 style={{ color: 'red' }}>以下为构建时传过来的参数：</h1>
+          <h2> entryName：{entryName}</h2>
+          <h2> title：{htmlConfig.title}</h2>
+          <h2> rootId: {templateParams.mountId}</h2>
+        </Root>
+        // Body 组件支持 Root 以外增加不同的组件，共同组成页面
+        <h1>bottom</h1>
+      </Body>
+    </Html>
+  );
+}
+
+```
+
+以上文件，将会生成以下 html 文件：
+
+```html
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="renderer" content="webkit">
+    <meta name="layoutmode" content="standard">
+    <meta name="imagemode" content="force">
+    <meta name="wap-font-scale" content="no">
+    <meta name="format-detection" content="telephone=no">
+    <script>...</script>
+    <script defer src="/static/js/lib-react.js"></script>
+    <script defer src="/static/js/lib-polyfill.js"></script>
+    <script defer src="/static/js/lib-router.js"></script>
+    <script defer
+        src="/static/js/vendors-node_modules_pnpm_loadable_component_5_15_2_react_18_2_0_node_modules_loadable_compon-3fb0cf.js"></script>
+    <script defer
+        src="/static/js/packages_runtime_plugin-router-legacy_dist_js_treeshaking_runtime_index_js-packages_runtime_p-28f4c9.js"></script>
+    <script defer src="/static/js/sub.js"></script>
+    <link href="https://www.baidu.com" />
+    <script>window.b = 22</script>
+</head>
+
+<body>
+    <div id="root">
+        <!--<?- html ?>-->
+        <h1 style="color:red">以下为构建时传过来的参数：</h1>
+        <h2> entryName：sub</h2>
+        <h2> title：</h2>
+        <h2> rootId: root</h2>
+    </div>
+    <h1>bottom</h1>
+    <!--<?- chunksMap.js ?>-->
+    <!--<?- SSRDataScript ?>-->
+</body>
+
+</html>
+```
+
+## ejs
+
+Modern.js 同时支持了使用 `ejs` 语法编写模板，当项目中，没有编写 `Document.[j|t]sx` 文件时，将自动回退至  `ejs` HTML 模板。
+
 默认情况下，Modern.js 的应用工程中会内置一份 HTML 模板，用于生成 HTML 代码。
 
 Modern.js 提供了**「自定义 HTML 片段」**和**「完全自定义 HTML 模板」**两种方式来自定义模板。

package/zh/guides/basic-features/mock.md

@@ -44,28 +44,22 @@ module.exports = {
 
 ## 返回随机数据
 
-可以在 `./config/mock/index.js` 中自主引入 [Mock.js](https://github.com/nuysoft/Mock/wiki/Getting-Started)、[faker.js](https://github.com/marak/Faker.js/) 等库生成随机数据，例如：
+可以在 `./config/mock/index.js` 中自主引入 [Mock.js](https://github.com/nuysoft/Mock/wiki/Getting-Started) 等库生成随机数据，例如：
 
 ```js
 const Mock = require('mockjs');
-const faker = require('faker');
 
 module.exports = {
   '/api/getInfo': Mock.mock({
      'data|1-10': [{ name: '@cname' }]
-   }) /* => {data: [{name: "董霞"}, {name: "魏敏"},  {name: "石磊"}} */
-  '/a/b': {
-    name: faker.fake("{{name.lastName}}, {{name.firstName}} {{name.suffix}}")
-   }  /* => { name: 'Marks, Dean Sr.'} */
-}
+   }), /* => {data: [{name: "董霞"}, {name: "魏敏"},  {name: "石磊"}} */
+};
 ```
 
 :::info 更多随机数据生成库
 
-* [Faker.js](https://github.com/marak/Faker.js/)
 * [Chancejs](https://github.com/chancejs/chancejs)
 * [Mock](https://github.com/nuysoft/Mock/wiki/Getting-Started)
-* https://www.npmtrends.com/mockjs-vs-faker-vs-chance
 
 :::