@modern-js/main-doc 2.69.4 → 3.0.0-alpha.0

package/docs/zh/guides/basic-features/css/tailwindcss.mdx

@@ -2,88 +2,14 @@
 
 [Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。
 
-在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，你只需要按照以下步骤操作：
+## 在 Modern.js 中使用 Tailwind CSS
 
-1. 在项目根目录下执行 `pnpm run new`，按照如下进行选择：
+在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，你只需要按照 Rsbuild 操作步骤进行配置，Rsbuild 支持 Tailwind CSS v3 和 v4 版本：
 
-```text
-? 请选择你想要的操作 启用可选功能
-? 请选择功能名称 启用 「Tailwind CSS」 支持
-```
+- [Tailwind CSS v3](https://rsbuild.rs/zh/guide/styling/tailwindcss-v3#tailwind-css-v3)
+- [Tailwind CSS v4](https://rsbuild.rs/zh/guide/styling/tailwindcss)
 
-成功开启后，你会看到 `package.json` 中新增了 `tailwindcss` 和 `@modern-js/plugin-tailwindcss` 依赖。
-
-2. 在 `modern.config.ts` 中注册 Tailwind 插件:
-
-```ts title="modern.config.ts"
-import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
-
-export default defineConfig({
-  plugins: [..., tailwindcssPlugin()],
-});
-```
-
-3. 创建 `index.css` 文件，添加以下代码：
-
-```css title="index.css"
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-:::info
-根据需求不同，你可以选择性地导入 Tailwind CSS 提供的 CSS 样式。请参考 [`@tailwind` 文档](https://tailwindcss.com/docs/functions-and-directives#tailwind) 来了解 `@tailwind` 指令的详细用法。
-:::
-
-4. 引用 `index.css` 文件，比如在入口的根组件 `src/App.jsx` 添加如下代码：
-
-```js
-import './index.css';
-```
-
-5. 然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了：
-
-```tsx
-const Hello = () => (
-  <div className="h-12 w-48">
-    <p className="text-xl font-medium text-black">hello world</p>
-  </div>
-);
-```
-
-### 配置 Tailwind CSS
-
-在 Modern.js 中，你有两种方式来配置 Tailwind CSS：
-
-1. 使用 `tailwind.config.{ts,js}` 文件，该用法与 Tailwind CSS 的官方用法一致，请参考 ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) 来了解更多用法。
-
-```ts title="tailwind.config.ts"
-import type { Config } from 'tailwindcss';
-
-export default {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-} as Config;
-```
-
-:::tip
-请升级 Modern.js 到 >= MAJOR_VERSION.33.0 版本，以支持自动读取 `tailwind.config.{ts,js}` 文件。
-:::
-
-2. 使用 [tools.tailwindcss](/configure/app/tools/tailwindcss.html) 配置项，这是旧版本的用法，我们更推荐使用 `tailwind.config.{ts,js}` 文件进行配置。
-
-```ts title="modern.config.ts"
-export default {
-  tools: {
-    tailwindcss: {
-      content: ['./src/**/*.{js,jsx,ts,tsx}'],
-    },
-  },
-};
-```
-
-如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
-
-### Tailwind CSS 自动补全
+## Tailwind CSS 自动补全
 
 Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
 
@@ -92,20 +18,10 @@ Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tail
 1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
 2. 如果项目的根目录没有 `tailwind.config.{ts,js}` 文件，那么你需要创建该文件，并写入当前项目的 Tailwind CSS 配置，否则 IDE 插件将无法正确生效。
 
-## Tailwind CSS 版本
-
-Modern.js 同时支持 Tailwind CSS v2 和 v3 版本，框架会识别项目 `package.json` 中的 `tailwindcss` 依赖版本，并启用相应的配置。默认情况下，我们会为你安装 Tailwind CSS v3 版本。
-
-如果你的项目仍在使用 Tailwind CSS v2，我们推荐你升级到 v3 以支持 JIT 等能力。关于 Tailwind CSS v2 与 v3 版本之间的差异，请参考以下文章：
-
-- [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3)
-- [Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide)
-
 ## 浏览器兼容性
 
-Tailwind CSS v2 和 v3 均不支持 IE 11 浏览器，相关背景请参考：
+Tailwind CSS v3 不支持 IE 11 浏览器，相关背景请参考：
 
 - [Tailwind CSS v3 - Browser Support](https://tailwindcss.com/docs/browser-support)。
-- [Tailwind CSS v2 - Browser Support](https://v2.tailwindcss.com/docs/browser-support)
 
 如果你在 IE 11 浏览器上使用 Tailwind CSS，可能会出现部分样式不可用的现象，请谨慎使用。

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

@@ -27,7 +27,7 @@ import { fetchUserData } from './api';
 const getUser = cache(fetchUserData);
 
 const loader = async () => {
-  const user = await getUser(user); // 函数入参发生变化时，函数会重新执行
+  const user = await getUser('123'); // 函数入参发生变化时，函数会重新执行
   return {
     user,
   };
@@ -67,7 +67,7 @@ interface CacheOptions {
 ## 使用范围
 
 与 react 的 [cache](https://react.dev/reference/react/cache) 函数只能在 server component 组件中使用不同，
-EdenX 提供的 `cache` 函数可以在任意的前端或服务端的代码中使用。
+Modern.js 提供的 `cache` 函数可以在任意的前端或服务端的代码中使用。
 
 ## 详细用法
 
@@ -117,8 +117,11 @@ const getDashboardStats = cache(
 
 `revalidate` 参数用于设置缓存过期后，重新验证缓存的时间窗口，可以和 `maxAge` 参数一起使用，类似与 HTTP Cache-Control 的 stale-while-revalidate 模式。
 
+如以下示例，缓存的行为会根据时间分为三个阶段：
 
-如以下示例，在缓存未过期的 2分钟内，如果调用 `getDashboardStats` 函数，会返回缓存的数据，如果缓存过期，2分到3分钟内，收到的请求会先返回旧数据，然后后台会重新请求数据，并更新缓存。
+1. **0 到 2 分钟（`maxAge` 内）**：缓存新鲜，直接返回缓存数据，不会重新请求
+2. **2 到 3 分钟（`maxAge` 到 `maxAge + revalidate` 之间）**：缓存过期但在重新验证窗口内，会立即返回旧数据，同时在后台重新请求数据并更新缓存
+3. **超过 3 分钟（超过 `maxAge + revalidate`）**：缓存完全过期，会重新执行函数获取新数据
 
 ```ts
 import { cache, CacheTime } from '@modern-js/runtime/cache';
@@ -159,7 +162,7 @@ const getComplexStatistics = cache(
   }
 );
 
-await revalidateTag('dashboard-stats'); // 会使 getDashboardStats 函数和 getComplexStatistics 函数的缓存都失效
+await revalidateTag('dashboard'); // 会使 getDashboardStats 函数和 getComplexStatistics 函数的缓存都失效
 ```
 
 #### `getKey` 参数
@@ -451,7 +454,7 @@ class RedisContainer implements Container {
   }
 
   async get(key: string): Promise<string | null> {
-    const value = await this.redis.get(key);
+    const value = await this.client.get(key);
     return value ? JSON.parse(value) : null;
   }
 

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

@@ -13,7 +13,7 @@ Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过
 Modern.js v1 项目通过 `useLoader` 获取数据，这已经不是我们推荐的用法，建议迁移到 Data Loader。
 :::
 
-Modern.js 推荐使用[约定式路由](/guides/basic-features/routes)做路由的管理，每个路由组件（`layout.ts`，`page.ts` 或 `$.tsx`）都可以有一个同名的 `.data` 文件。这些文件可以导出一个 `loader` 函数，我们称为 Data Loader，它会在对应的路由组件渲染之前执行，为组件提供数据。如下面示例：
+Modern.js 推荐使用[约定式路由](/guides/basic-features/routes/routes)做路由的管理，每个路由组件（`layout.ts`，`page.ts` 或 `$.tsx`）都可以有一个同名的 `.data` 文件。这些文件可以导出一个 `loader` 函数，我们称为 Data Loader，它会在对应的路由组件渲染之前执行，为组件提供数据。如下面示例：
 
 ```bash
 .
@@ -76,7 +76,7 @@ export default function UserPage() {
 在以后的版本中，Modern.js 可能会支持在 CSR 环境下，`loader` 函数也在服务端运行，以提高性能和安全性，所以这里建议尽可能地保证 `loader` 的纯粹，只做数据获取的场景。
 :::
 
-当在浏览器端导航时，基于[约定式路由](/guides/basic-features/routes)，Modern.js 能够支持所有的 `loader` 函数并行执行（请求）。即当访问 `/user/profile` 时，`/user` 和 `/user/profile` 下的 `loader` 函数都会并行执行（请求），这种方式解决了部分请求、渲染瀑布流的问题，较大的提升了页面性能。
+当在浏览器端导航时，基于[约定式路由](/guides/basic-features/routes/routes)，Modern.js 能够支持所有的 `loader` 函数并行执行（请求）。即当访问 `/user/profile` 时，`/user` 和 `/user/profile` 下的 `loader` 函数都会并行执行（请求），这种方式解决了部分请求、渲染瀑布流的问题，较大的提升了页面性能。
 
 ## `loader` 函数
 
@@ -84,7 +84,7 @@ export default function UserPage() {
 
 ### params
 
-`params` 是当路由为[动态路由](/guides/basic-features/routes#动态路由)时的动态路由片段，会作为参数传入 `loader` 函数：
+`params` 是当路由为[动态路由](/guides/basic-features/routes/routes#动态路由)时的动态路由片段，会作为参数传入 `loader` 函数：
 
 ```tsx title="routes/user/[id]/page.data.ts"
 import { LoaderFunctionArgs } from '@modern-js/runtime/router';
@@ -160,8 +160,9 @@ SSR 应用的 `loader` 函数只在服务端执行可以带来以下好处：
 ```tsx
 export async function loader() {
   const res = await fetch('URL_ADDRESS');
+  const data = await res.json();
   return {
-    message: res.message
+    message: data.message
   }
 }
 ```
@@ -170,7 +171,7 @@ export async function loader() {
 
 ### 基本用法
 
-在 `loader` 函数中，可以通过 `throw error` 或者 `throw response` 的方式处理错误，当 `loader` 函数中有错误被抛出时，Modern.js 会停止执行当前 `loader` 中的代码，并将前端 UI 切换到定义的 [`ErrorBoundary`](/guides/basic-features/routes#错误处理) 组件：
+在 `loader` 函数中，可以通过 `throw error` 或者 `throw response` 的方式处理错误，当 `loader` 函数中有错误被抛出时，Modern.js 会停止执行当前 `loader` 中的代码，并将前端 UI 切换到定义的 [`ErrorBoundary`](/guides/basic-features/routes/routes#错误处理) 组件：
 
 ```tsx
 // routes/user/profile/page.data.ts

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

@@ -14,7 +14,7 @@ sidebar_position: 4
 
 ## 什么是 Data Action
 
-Modern.js 推荐使用[约定式路由](/guides/basic-features/routes)做路由的管理，每个路由组件（`layout.ts`，`page.ts` 或 `$.tsx`）都可以有一个同名的 `.data` 文件。这些文件可以导出一个 `action` 函数，我们称为 Data Action，开发者可以在合适的时机调用它：
+Modern.js 推荐使用[约定式路由](/guides/basic-features/routes/routes)做路由的管理，每个路由组件（`layout.ts`，`page.ts` 或 `$.tsx`）都可以有一个同名的 `.data` 文件。这些文件可以导出一个 `action` 函数，我们称为 Data Action，开发者可以在合适的时机调用它：
 
 ```bash
 .
@@ -29,7 +29,7 @@ Modern.js 推荐使用[约定式路由](/guides/basic-features/routes)做路由
 ```ts title="routes/user/layout.data.ts"
 import type { ActionFunction } from '@modern-js/runtime/router';
 
-export const action: ActionFunction = ({ request }) => {
+export const action: ActionFunction = async ({ request }) => {
   const newUser = await request.json();
   const name = newUser.name;
   return updateUserProfile(name);
@@ -82,7 +82,7 @@ export default () => {
 
 ### params
 
-`params` 是当路由为[动态路由](/guides/basic-features/routes#动态路由)时动态路由片段，会作为参数传入 `action` 函数：
+`params` 是当路由为[动态路由](/guides/basic-features/routes/routes#动态路由)时动态路由片段，会作为参数传入 `action` 函数：
 
 ```tsx title="routes/user/[id]/page.data.ts"
 import { ActionFunctionArgs } from '@modern-js/runtime/router';
@@ -97,7 +97,7 @@ export const action = async ({ params }: ActionFunctionArgs) => {
 
 ### request
 
-`request` 是一个 [Fetch Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) 实例。通过 `request`，可以在 action 函数中获取到浏览器端提交的数据，如 `request.json()`，`request.formData()`，`request.json()` 等。具体使用哪个 API，请参考[数据类型](#数据类型)。
+`request` 是一个 [Fetch Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) 实例。通过 `request`，可以在 action 函数中获取到浏览器端提交的数据，如 `request.json()`，`request.formData()`，`request.text()` 等。具体使用哪个 API，请参考[数据类型](#数据类型)。
 
 ```tsx title="routes/user/[id]/page.data.ts"
 import { ActionFunctionArgs } from '@modern-js/runtime/router';

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

@@ -70,7 +70,7 @@ module.exports = {
 
 ```js
 module.exports = {
-  'api/getInfo': (req, res) => {
+  '/api/getInfo': (req, res) => {
     setTimeout(() => {
       res.end('delay 2000ms');
     }, 2000);
@@ -83,6 +83,9 @@ module.exports = {
 `config/mock/index.ts` 下还可以导出 `config` 对象，更精细的控制 Mock 服务。
 
 ```ts
+import type { IncomingMessage } from 'node:http';
+import type { ServerResponse } from 'node:http';
+
 type MockConfig = {
   enable: ((req: IncomingMessage, res: ServerResponse) => boolean) | boolean;
 };

package/docs/zh/guides/basic-features/debug/proxy.mdx

@@ -4,8 +4,6 @@ sidebar_position: 6
 
 # 网络代理
 
-## 本地代理
-
 Modern.js 在 [`tools.devServer`](/configure/app/tools/dev-server) 中提供了配置开发环境代理的方式。例如，将本地开发接口，代理到线上某个地址：
 
 ```ts title="modern.config.ts"
@@ -31,9 +29,3 @@ export default defineConfig({
 配置格式可参考：[http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)。
 
 :::
-
-## 全局代理
-
-import GlobalProxy from "@site-docs/components/global-proxy"
-
-<GlobalProxy />

package/docs/zh/guides/basic-features/debug/rsdoctor.mdx

@@ -26,14 +26,14 @@ import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
 export default {
   // ...
   tools: {
-    rspack(config, { appendPlugins }) {
+    bundlerChain(chain) {
       // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
       if (process.env.RSDOCTOR) {
-        appendPlugins(
-          new RsdoctorRspackPlugin({
+        chain.plugin('rsdoctor').use(RsdoctorRspackPlugin, [
+          {
             // 插件选项
-          }),
-        );
+          },
+        ]);
       }
     },
   },
@@ -46,7 +46,7 @@ export default {
 
 ## 执行构建
 
-在你可以在项目内执行 build 命令，在完成构建后，Rsdoctor 会自动打开本次构建的分析页面。
+你可以在项目内执行 build 命令，在完成构建后，Rsdoctor 会自动打开本次构建的分析页面。
 
 ```bash
 RSDOCTOR=true npm run build

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

@@ -26,7 +26,6 @@ MODERNJS_DEPLOY=netlify npx modern deploy
 在 Modern.js 官方支持的部署平台中部署时，无需指定环境变量。
 :::
 
-
 ## ModernJS 内置 Node.js 服务器
 
 ### 单仓库项目
@@ -54,8 +53,8 @@ You can preview this build by `node .output/index`
 ```
 PORT=3000 node .output/index
 ```
-:::
 
+:::
 
 ### Monorepo
 
@@ -67,7 +66,7 @@ PORT=3000 node .output/index
 {
   "scripts": {
     "build:packages": "pnpm --filter 'app^...' run build",
-    "deploy": "pnpm run build:packages && modern deploy",
+    "deploy": "pnpm run build:packages && modern deploy"
   }
 }
 ```
@@ -78,7 +77,7 @@ PORT=3000 node .output/index
 {
   "scripts": {
     "build:packages": "rush rebuild --to-except app",
-    "deploy": "rushx build:packages && modern deploy",
+    "deploy": "rushx build:packages && modern deploy"
   }
 }
 ```
@@ -102,6 +101,7 @@ Netlify 是一个流行的 Web 开发平台，专为构建、发布和维护现
 ```
 
 在 `netlify.toml` 中添加以下内容：
+
 ```toml
 [build]
   publish = "dist"
@@ -131,14 +131,12 @@ Netlify 是一个流行的 Web 开发平台，专为构建、发布和维护现
 ```
 
 :::info
+
 1. 目前 Modern.js 还不支持在 Netlify Edge Functions 进行部署，我们将在后续的版本中支持。
 2. 你可参考部署[项目示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-ssr)。
 
 :::
 
-
-
-
 ### Monorepo 项目
 
 :::info
@@ -169,7 +167,7 @@ Netlify 是一个流行的 Web 开发平台，专为构建、发布和维护现
 {
   "scripts": {
     "build:packages": "pnpm --filter 'app^...' run build",
-    "deploy": "pnpm run build:packages && modern deploy",
+    "deploy": "pnpm run build:packages && modern deploy"
   }
 }
 ```
@@ -231,7 +229,6 @@ Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的
 1. 当前，Modern.js 还不支持在 Vercel 平台上部署 BFF 项目，我们将在后续的版本中支持。
 2. 函数运行的 node.js 版本由项目在 Vercel 平台配置决定。
 
-
 :::info
 你可参考部署[项目示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-ssr)。
 
@@ -261,10 +258,11 @@ Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的
 
 <img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/vercel-root-directory.png" />
 
-将 Node.js 运行时设置为 `18.x`：
+将 Node.js 运行时设置为 `20.x`：
+
 ```json title="package.json"
 "engines": {
-  "node": "18.x"
+  "node": "20.x"
 },
 ```
 
@@ -274,12 +272,13 @@ Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的
 {
   "scripts": {
     "build:packages": "pnpm --filter 'app^...' run build",
-    "deploy": "pnpm run build:packages && modern deploy",
+    "deploy": "pnpm run build:packages && modern deploy"
   }
 }
 ```
 
 在 `packages/app/vercel.json` 文件中添加以下内容：
+
 ```json title="vercel.json"
 {
   "buildCommand": "npm run deploy",
@@ -291,23 +290,25 @@ Vercel 是一个面向现代 Web 应用的部署平台，它提供了丰富的
 
 ## Github Pages
 
-如果你要为一个仓库常见 Github 页面，并且你没有自定义域名，则该页面的 URL 将会是以下格式：`http://<username>.github.io/<repository-name>`，所以需要在 `modern.config.ts` 中添加
+如果你要为一个仓库创建 Github 页面，并且你没有自定义域名，则该页面的 URL 将会是以下格式：`http://<username>.github.io/<repository-name>`，所以需要在 `modern.config.ts` 中添加
 以下配置：
+
 ```ts
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
   //...
-  server:{
-    baseUrl: "/<repository-name>"
+  server: {
+    baseUrl: '/<repository-name>',
   },
   output: {
-    assetPrefix: "/<repository-name>",
-  }
+    assetPrefix: '/<repository-name>',
+  },
 });
 ```
 
 Github Pages 支持两种部署方式，通过分支部署或通过 Github Actions 部署，如果通过分支部署，可以使用以下步骤：
+
 1. 在 github 仓库中，选择 `Settings > Pages > Source > Deploy from a branch`。
 2. 安装 `gh-pages` 依赖作为开发依赖。
 3. 在 package.json 的 `scripts` 中添加 `"deploy:gh-pages": "MODERNJS_DEPLOY=ghPages modern deploy && gh-pages -d .output"`。
@@ -322,7 +323,6 @@ Github Pages 支持两种部署方式，通过分支部署或通过 Github Actio
 
 如果通过 Github Actions 部署，可以选择 Settings > Pages > Source > GitHub Actions，并在项目中添加 workflow 文件，可参考[示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)。
 
-
 ## 自建 Node.js 服务器
 
 通常情况下，我们推荐使用 Modern.js 内置的 Node.js 服务器来部署应用，它支持托管纯前端项目或者全栈项目，并且保证在开发和生产环境下的表现一致。
@@ -367,10 +367,14 @@ const app = new Koa();
 app.use(async (ctx, next) => {
   if (ctx.path.startsWith('/static')) {
     ctx.type = mime.lookup(ctx.path);
-    ctx.body = fs.createReadStream(path.resolve(__dirname, `.output${ctx.path}`));
+    ctx.body = fs.createReadStream(
+      path.resolve(__dirname, `.output${ctx.path}`),
+    );
   } else if (ctx.path === '/') {
     ctx.type = 'html';
-    ctx.body = fs.createReadStream(path.resolve(__dirname, '.output/html/main/index.html'));
+    ctx.body = fs.createReadStream(
+      path.resolve(__dirname, '.output/html/main/index.html'),
+    );
   }
 });
 app.listen(3000);

package/docs/zh/guides/basic-features/env-vars.mdx

@@ -142,7 +142,7 @@ export default defineConfig({
   source: {
     globalVars: {
       'process.env.VERSION': process.env.VERSION,
-    }.
+    },
   },
 });
 ```

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

@@ -35,7 +35,7 @@ Modern.js 约定，在 `src/` 或入口目录下，可以创建 `Document.[jt]sx
 
 ### 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';
@@ -154,7 +154,7 @@ export default function Document(): React.ReactElement {
 你可以使用 `<Scripts>` 组件，将构建生成的 `<script>` 标签插入到 `<body>` 标签内：
 
 ```tsx
-import React, { useContext } from 'react';
+import React from 'react';
 import { Html, Root, Head, Body, Scripts } from '@modern-js/runtime/document';
 
 export default function Document(): React.ReactElement {

package/docs/zh/guides/basic-features/output-files.mdx

@@ -47,8 +47,8 @@ Modern.js 提供了多个配置项来修改产物目录和产物名称，你可
 - 通过 [output.filename](/configure/app/output/filename) 来修改产物的文件名。
 - 通过 [output.distPath](/configure/app/output/dist-path) 来修改产物的输出路径。
 - 通过 [output.legalComments](/configure/app/output/legal-comments) 来修改 License 文件的生成方式。
-- 通过 [output.disableSourceMap](/configure/app/output/disable-source-map) 来移除 Source Map 文件。
-- 通过 [html.disableHtmlFolder](/configure/app/html/disable-html-folder) 移除 HTML 产物对应的文件夹。
+- 通过 [output.sourceMap](/configure/app/output/source-map) 来移除 Source Map 文件。
+- 通过 [html.outputStructure](/configure/app/html/output-structure) 移除 HTML 产物对应的文件夹。
 
 ## 静态资源
 
@@ -112,7 +112,7 @@ export default {
     },
   },
   html: {
-    disableHtmlFolder: true,
+    outputStructure: 'flat',
   },
 };
 ```

package/docs/zh/guides/basic-features/render/_meta.json

@@ -1 +1 @@
-["ssr", "streaming-ssr", "ssr-cache", "ssg", "before-render"]
+["overview", "ssr", "streaming-ssr", "ssr-cache", "ssg", "rsc", "before-render"]

package/docs/zh/guides/basic-features/render/before-render.mdx

@@ -1,16 +1,16 @@
-# 渲染预处理 (Render Preprocessing)
+# 渲染预处理
 
 在某些场景下，应用需要在渲染前执行预处理操作。Modern.js 推荐使用 **[Runtime 插件 (Runtime Plugin)](/plugin/introduction.html#runtime-插件)** 来实现这类逻辑。
 
 ## 定义 Runtime 插件
 
 ```ts
-import type { RuntimePluginFuture } from '@modern-js/runtime';
+import type { RuntimePlugin } from '@modern-js/runtime';
 
-const myRuntimePlugin = (): RuntimePluginFuture => ({
+const myRuntimePlugin = (): RuntimePlugin => ({
   name: 'my-runtime-plugin',
-  setup: (api) => {
-    api.onBeforeRender((context) => {
+  setup: api => {
+    api.onBeforeRender(context => {
       // 在渲染前执行的逻辑
       console.log('Before rendering:', context);
     });
@@ -35,23 +35,24 @@ export default defineRuntimeConfig({
 
 ## 应用场景 -- 全局数据注入
 
-通过 `onBeforeRender` 钩子的 `context` 参数，可以向应用注入全局数据。应用的组件可以通过 `useRuntimeContext` Hook 访问这些数据。
+通过 `onBeforeRender` 钩子的 `context` 参数，可以向应用注入全局数据。应用的组件可以通过 `use(RuntimeContext)` Hook 访问这些数据。
 
 :::info
 
 此功能在以下场景中特别有用：
-* 需要页面级前置数据的应用
-* 自定义数据注入流程
-* 框架迁移场景（例如从 Next.js 迁移）
+
+- 需要页面级前置数据的应用
+- 自定义数据注入流程
+- 框架迁移场景（例如从 Next.js 迁移）
 
 :::
 
 **定义数据注入插件**
 
 ```ts
-import type { RuntimePluginFuture } from '@modern-js/runtime';
+import type { RuntimePlugin } from '@modern-js/runtime';
 
-const dataInjectionPlugin = (): RuntimePluginFuture => ({
+const dataInjectionPlugin = (): RuntimePlugin => ({
   name: 'data-injection-plugin',
   setup: api => {
     api.onBeforeRender(context => {
@@ -67,10 +68,11 @@ export default dataInjectionPlugin;
 **在组件中使用注入的数据**
 
 ```tsx
-import { useRuntimeContext } from '@modern-js/runtime';
+import { use } from 'react';
+import { RuntimeContext } from '@modern-js/runtime';
 
 export default function MyComponent() {
-  const context = useRuntimeContext();
+  const context = use(RuntimeContext);
   const { message } = context;
 
   return <div>{message}</div>;
@@ -82,9 +84,9 @@ export default function MyComponent() {
 在 SSR 场景下，浏览器端可以获取服务端渲染期间通过 `onBeforeRender` 注入的数据。开发者可以根据需求决定是否在浏览器端重新获取数据来覆盖服务端数据。
 
 ```ts
-import type { RuntimePluginFuture } from '@modern-js/runtime';
+import type { RuntimePlugin } from '@modern-js/runtime';
 
-const dataInjectionPlugin = (): RuntimePluginFuture => ({
+const dataInjectionPlugin = (): RuntimePlugin => ({
   name: 'data-injection-plugin',
   setup: api => {
     api.onBeforeRender(context => {
@@ -104,12 +106,3 @@ const dataInjectionPlugin = (): RuntimePluginFuture => ({
 
 export default dataInjectionPlugin;
 ```
-
-## 兼容性说明
-
-在 Modern.js 的早期版本中，支持通过 `routes/layout.tsx` 中的 `init` 钩子以及 `App.init` 方法来添加渲染预处理逻辑。这些方式目前仍然**被支持**，但我们**强烈推荐**使用 Runtime 插件实现。
-
-:::warning
-
-未来版本中，`routes/layout.tsx` 的 `init` 钩子和 `App.init` 方法将逐步**废弃**。建议尽早迁移到 Runtime 插件方案。
-:::