@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.0

package/docs/zh/plugin/introduction.mdx

@@ -0,0 +1,153 @@
+# 插件介绍
+
+Modern.js 提供了一套强大的插件体系，允许开发者通过编写插件来扩展框架功能、定制构建流程，以及满足各种个性化的开发需求。无论你是想添加一个自定义命令、优化构建产物，还是实现一套独特的部署方案，Modern.js 的插件系统都能为你提供强大的支持。
+
+## 为什么需要插件？
+
+在 Web 应用开发中，我们经常会遇到一些框架本身无法直接满足的需求，例如：
+
+- **我想添加一个自定义的命令行工具，来帮助我自动化一些任务。**
+- **我希望能够处理一种新的文件格式，比如 `.xyz`。**
+- **我需要在应用启动前执行一些初始化的操作。**
+- **我想对构建生成的 CSS 文件进行特殊的处理。**
+- **我需要定制应用的路由逻辑，或者添加一些服务端中间件。**
+
+在没有插件系统的情况下，这些需求可能需要修改框架源码，或者采用一些繁琐的 hack 手段。而 Modern.js 的插件系统提供了一种优雅、灵活且可维护的解决方案。
+
+## 何时使用哪种插件？
+
+Modern.js 提供了两种主要的插件类型：Modern.js 框架插件和 Rsbuild 构建插件。选择哪种插件取决于你的具体需求：
+
+- **Rsbuild 构建插件：** 如果你的需求与构建过程密切相关，特别是涉及到 Rspack 配置的修改，那么你应该选择 Rsbuild 插件。例如：
+
+  - 修改 Rspack 的 `loader` 或 `plugin` 配置。
+  - 处理新的文件类型。
+  - 修改或编译文件内容。
+  - 对构建产物进行优化或处理。
+
+- **Modern.js 框架插件：** 如果你的需求与 Modern.js 框架本身的功能扩展、运行时行为或服务端逻辑相关，那么你应该选择 Modern.js 插件。例如：
+  - 添加自定义的命令行命令。
+  - 修改运行时信息。
+  - 定制化应用的渲染过程（如 SSR）。
+  - 添加服务端中间件或处理函数。
+
+简单来说，需要修改 Rspack 配置时，使用 Rsbuild 插件；其他与框架相关的功能扩展，使用 Modern.js 插件。
+
+## Modern.js 框架插件
+
+### 插件类型
+
+Modern.js 框架插件可以细分为三类，分别是：
+
+#### CLI 插件
+
+CLI 插件用于在应用执行 `modern` 命令时提供额外功能，例如添加命令、修改配置、监听文件等。大部分构建相关能力均可通过 CLI 插件实现。
+
+CLI 插件可通过 `modern.config.ts` 中的 `plugins` 字段进行配置。
+
+```ts title="modern.config.ts"
+// bff 的示例
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { bffPlugin } from '@modern-js/plugin-bff';
+
+export default defineConfig({
+  plugins: [appTools(), bffPlugin()],
+});
+```
+
+#### Runtime 插件
+
+Runtime 插件用于在应用运行 React 代码时提供额外功能，例如执行初始化行为、实现 React 高阶组件（HOC）封装。
+
+Runtime 插件通过 `src/modern.runtime.ts` 中的 `plugins` 字段配置。
+
+```ts title="src/modern.runtime.ts"
+import { defineRuntimeConfig } from '@modern-js/runtime';
+import { routerPlugin } from '@modern-js/runtime/router';
+
+export default defineRuntimeConfig({
+  plugins: [routerPlugin()],
+});
+```
+
+#### Server 插件
+
+Server 插件用于在应用接受请求时提供额外功能，例如添加中间件、修改请求响应等。
+
+Server 插件通过 `server/modern.server.ts` 中的 `plugins` 字段进行配置。
+
+```ts title="server/modern.server.ts"
+import { defineServerConfig } from '@modern-js/server-runtime';
+
+export default defineServerConfig({
+  plugins: [
+    {
+      name: 'custom-plugin-in-config',
+      setup: api => {
+        api.onPrepare(() => {
+          const { middlewares } = api.getServerContext();
+
+          middlewares?.push({
+            name: 'server-plugin-middleware',
+            handler: async (c, next) => {
+              c.res.headers.set('x-render-middleware-plugin', 'ok');
+              await next();
+            },
+          });
+        });
+      },
+    },
+  ],
+});
+```
+
+### 开发插件
+
+如果你需要开发 Modern.js 框架插件，请阅读 [Modern.js 插件系统](/plugin/plugin-system) 获取更多信息。
+
+## Rsbuild 构建插件
+
+Rsbuild 是 Modern.js 底层的构建工具，通过添加 Rsbuild 插件可修改默认的构建行为，添加各类额外功能，包括但不限于：
+
+- 修改 Rsbuild 配置
+- 处理新的文件类型
+- 修改或编译文件
+- 部署产物
+
+你可以在 `modern.config.ts` 中通过 `builderPlugins` 选项注册 Rsbuild 插件，详见 [builderPlugins 构建插件](/configure/app/builder-plugins.html)。
+
+:::info
+可以阅读 [Rsbuild 官网 - 插件](https://v2.rsbuild.rs/plugins/list/index) 了解更多 Rsbuild 插件体系内容。
+:::
+
+### 官方插件
+
+#### 内置插件
+
+以下为已在 Modern.js 中内置的 Rsbuild 官方插件，无需安装，即可启用：
+
+| 插件                                                                                 | 介绍                                                                                   | Modern.js 链接                                                                                                                        |
+| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [React 插件](https://v2.rsbuild.rs/zh/plugins/list/plugin-react)                        | 提供对 React 的支持                                                                    | -                                                                                                                                     |
+| [SVGR 插件](https://v2.rsbuild.rs/zh/plugins/list/plugin-svgr)                          | 支持将 SVG 图片转换为一个 React 组件                                                   | [output.disableSvgr](/configure/app/output/disable-svgr)<br />[output.svgDefaultExport](/configure/app/output/svg-default-export)     |
+| [Assets Retry 插件](https://github.com/rstackjs/rsbuild-plugin-assets-retry)          | 用于在静态资源加载失败时自动发起重试请求                                               | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
+| [Type Check 插件](https://github.com/rspack-contrib/rsbuild-plugin-type-check)       | 用于在单独的进程中运行 TypeScript 类型检查                                             | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
+| [Source Build 插件](https://github.com/rspack-contrib/rsbuild-plugin-source-build)   | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新                     | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
+| [Check Syntax 插件](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax)   | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法                         | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
+| [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer) | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩 | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
+| [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem)                     | 用于实现移动端页面的 rem 自适应布局                                                    | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
+
+#### 未内置的插件
+
+以下是未在 Modern.js 中内置的 Rsbuild 官方插件：
+
+- [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)：将项目中用到的图片资源进行压缩处理。
+- [Stylus 插件](https://v2.rsbuild.rs/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
+- [UMD 插件](https://github.com/rspack-contrib/rsbuild-plugin-umd)：用于构建 UMD 格式的产物。
+- [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)：用于引用 YAML 文件，并将其转换为 JavaScript 对象。
+- [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)：用于引用 TOML 文件，并将其转换为 JavaScript 对象。
+
+import OtherPlugins from '@site-docs/components/other-plugins.mdx';
+
+<OtherPlugins />
+````

package/docs/zh/plugin/official/_meta.json

@@ -0,0 +1,7 @@
+[
+  {
+    "type": "dir",
+    "name": "cli-plugins",
+    "label": "cli-plugins"
+  }
+]

package/docs/zh/plugin/official/cli-plugins/_meta.json

@@ -0,0 +1 @@
+["plugin-bff", "plugin-ssg", "plugin-styled-components"]

package/docs/zh/plugin/official/cli-plugins/plugin-bff.mdx

@@ -0,0 +1,5 @@
+# BFF 插件
+
+在 Modern.js 应用中，通过 BFF 插件，开发者可以在 `api/lambda` 目录下定义接口文件，并导出接口函数。在前端代码中，可以用文件引用的方式，直接调用这些接口函数，发起接口请求。
+
+详细内容可以参考 [BFF - 基础用法](/guides/advanced-features/bff/function)。

package/docs/zh/plugin/official/cli-plugins/plugin-ssg.mdx

@@ -0,0 +1,5 @@
+# SSG 插件
+
+SSG（Static Site Generation）是一种基于数据与模板，在构建时渲染完整静态网页的技术解决方案。这意味着在生产环境中，页面默认就是有内容的，并且可以被 CDN 缓存。对于无需数据的页面，SSG 可以提供更好的性能和更高的安全性。
+
+详细内容可以参考 [静态站点生成（SSG）](/guides/basic-features/render/ssg)。

package/docs/zh/plugin/official/cli-plugins/plugin-styled-components.mdx

@@ -0,0 +1,5 @@
+# Styled Components 插件
+
+在 Modern.js 应用中，通过 Styled Components 插件，开发者可以在应用中使用 styled-components 库，实现 CSS-in-JS 的功能。
+
+详细内容可以参考 [使用 CSS-in-JS](/guides/basic-features/css/css-in-js)。

package/docs/zh/plugin/official/cli-plugins.mdx

@@ -0,0 +1,4 @@
+# 概览
+
+- [@modern-js/plugin-bff](/plugin/official/cli-plugins/plugin-bff)：提供 BFF 服务，一体化调用的能力。
+- [@modern-js/plugin-ssg](/plugin/official/cli-plugins/plugin-bff)：提供静态站点生成的能力。

package/docs/zh/plugin/plugin-system.mdx

@@ -0,0 +1,231 @@
+# 插件系统
+
+Modern.js 采用高度可扩展的插件化架构，其核心功能和扩展能力均通过插件实现。插件系统不仅保证了框架的灵活性，也为开发者提供了强大的定制化手段。本文将重点介绍如何编写 Modern.js 插件，帮助您快速上手插件开发。
+
+## 核心理念：一切皆插件
+
+Modern.js 秉承“一切皆插件”的设计哲学，将框架的各项功能模块化，通过插件的形式进行组装和扩展。这种设计带来了诸多优势，包括：
+
+- **高内聚，低耦合**：各功能模块独立开发、测试和维护，降低系统复杂度。
+- **灵活可扩展**：用户可通过编写或组合插件，轻松定制框架行为，无需修改核心代码。
+- **易于复用**：插件可跨项目共享，提高开发效率。
+- **渐进式增强**：按需引入插件，无需一开始就承载所有功能的复杂性。
+
+## 插件类型与适用场景
+
+**CLI 插件**：
+    -   **作用阶段**：构建时（执行 `modern` 命令时）。
+    -   **典型场景**：
+        -   扩展命令行工具。
+        -   修改构建配置。
+        -   监听文件变化。
+        -   控制构建流程。
+    -   **配置方式**：`modern.config.ts` 中的 `plugins` 字段。
+
+**Runtime 插件**：
+    -   **作用阶段**：应用运行时（浏览器/Node.js 环境）。
+    -   **典型场景**：
+        -   初始化全局状态或服务。
+        -   封装 React 高阶组件（HOC）。
+        -   拦截或修改路由行为。
+        -   控制渲染流程。
+    -   **配置方式**：`src/modern.runtime.ts` 中的 `plugins` 字段。
+
+{/* **Server 插件**：
+    -   **作用阶段**：服务端请求处理阶段。
+    -   **典型场景**：
+        -   添加自定义中间件。
+        -   扩展服务端 API。
+        -   定制化 SSR 逻辑。
+        -   与后端框架集成。
+    -   **配置方式**：`server/modern.server.ts` 中的 `plugins` 字段。 */}
+
+## 插件结构
+
+一个典型的 Modern.js 插件包含以下几个关键部分：
+
+```ts
+import type { Plugin } from '@modern-js/plugin';
+
+const myPlugin: Plugin = {
+  name: 'my-awesome-plugin', // 插件的唯一标识符（必需）
+
+  // 插件依赖和执行顺序（可选）
+  pre: [], // 在此插件之前执行的插件名列表，默认为空数组
+  post: [], // 在此插件之后执行的插件名列表，默认为空数组
+  required: [], // 必需的插件列表，若依赖的插件未注册，则会报错，默认为空数组
+  usePlugins: [], // 内部使用的插件实例列表，默认为空数组
+
+  // 注册新的 Hook (可选)
+  registryHooks: {},
+
+  // 插件的入口函数（必需）
+  setup(api) {
+    // 插件的核心逻辑，通过 api 对象调用插件 API
+    api.modifyRspackConfig(config => {
+      /* ... */
+    });
+    api.onPrepare(() => {
+      /* ... */
+    });
+    // ... 其他 API 调用
+  },
+};
+
+export default myPlugin;
+```
+
+**字段说明：**
+
+##### `name`
+
+- 类型： `string`
+- 说明：标识插件的名称。在插件体系中，该名称必须唯一，否则将导致插件加载失败。
+
+:::info
+后续 `pre`, `post`, `required` 中声明的插件名称都是这里的 name 字段.
+:::
+
+##### `setup`
+
+- 类型： `(api: PluginAPI) => MaybePromise<void>`
+- 说明：插件逻辑的主要入口。
+
+###### `api`
+
+- 类型： `PluginAPI`
+- 说明：插件的 API，包含插件支持的 Hooks 和工具函数。
+
+##### `pre`
+
+- 类型： `string[]`
+- 说明：用于插入插件执行顺序。在 `pre` 中声明的插件会在此插件之前执行。
+
+##### `post`
+
+- 类型： `string[]`
+- 说明：用于确定插件执行顺序。在 `post` 中声明的插件会在此插件之后执行。
+
+##### `required`
+
+- 类型： `string[]`
+- 说明：该插件依赖的其它插件。在运行前，会校验依赖的插件是否已注册。
+
+:::info
+如果在 `pre` 或 `post` 中配置了未注册的插件名，这些插件名将被**自动忽略**，不会影响其他插件的执行。
+
+如果需要明确声明当前插件依赖的插件必须存在，需要使用 `required` 字段。
+:::
+
+##### `usePlugins`
+
+- 类型： `Plugin`
+- 说明：主动在插件中注册其他相同类型的插件。
+
+:::info
+`usePlugins` 中声明的插件默认在当前插件之前执行。需要在其后执行，请使用 `post` 声明。
+:::
+
+##### `registryHooks`
+
+- 类型： `Record<string, PluginHook<(...args: any[]) => any>>`
+- 说明：扩展当前支持的 Hook 函数，以实现自定义功能。
+
+## 插件 Hook 模型
+
+Modern.js 插件系统的核心是其 Hook 模型，它定义了插件之间的通信机制。Modern.js 主要提供两种 Hook 类型：
+
+### Async Hook（异步 Hook）
+
+- **特点**：
+  - Hook 函数异步执行，支持 `async/await`。
+  - 前一个 Hook 函数的返回值会作为下一个 Hook 函数的第一个参数。
+  - 最终返回最后一个 Hook 函数的返回值。
+- **适用场景**：涉及异步操作的场景（如网络请求、文件读写等）。
+- **创建方式**：使用 `createAsyncHook` 创建。
+
+示例：
+
+```ts
+// 定义 Hooks
+import { createAsyncHook } from '@modern-js/plugin';
+
+export type AfterPrepareFn = () => Promise<void> | void;
+export const onAfterPrepare = createAsyncHook<AfterPrepareFn>();
+
+// 插件中注册 Hooks
+const myPlugin = () => ({
+  name: 'my-plugin',
+  registryHooks: {
+    onAfterPrepare,
+  },
+  setup: api => {
+    api.onPrepare(async () => {
+      // 插件中使用注册的 Hooks
+      const hooks = api.getHooks();
+      await hooks.onAfterPrepare.call();
+    });
+  },
+});
+
+// 在其他插件中使用 Hook
+const myPlugin2 = () => ({
+  name: 'my-plugin-2',
+  setup: api => {
+    api.onAfterPrepare(async () => {
+      // TODO
+    });
+  },
+});
+```
+
+### Sync Hook（同步 Hook）
+
+- **特点**：
+  - Hook 函数同步执行。
+  - 前一个 Hook 函数的返回值会作为下一个 Hook 函数的第一个参数。
+  - 最终返回最后一个 Hook 函数的返回值。
+- **适用场景**：需要同步修改数据的场景（如修改配置、路由等）。
+- **创建方式**：使用 `createSyncHook` 创建。
+
+示例：
+
+```ts
+// 定义 Hooks
+import { createSyncHook } from '@modern-js/plugin';
+
+type RouteObject = {
+  /** TODO **/
+};
+const modifyRoutes = createSyncHook<(routes: RouteObject[]) => RouteObject[]>();
+
+// 插件中注册 Hooks
+const myPlugin = () => ({
+  name: 'my-plugin',
+  registryHooks: {
+    modifyRoutes,
+  },
+  setup: api => {
+    api.onPrepare(async () => {
+      const routes = {};
+      // 在插件中使用注册的 Hooks
+      const hooks = api.getHooks();
+      const routesResult = hooks.modifyRoutes.call(routes);
+    });
+  },
+});
+```
+
+## 插件开发最佳实践
+
+- **单一职责**: 每个插件应该专注于实现一个特定的、内聚的功能。避免创建功能庞杂、职责不清的插件。
+- **命名规范**: 插件名称应清晰、简洁, 并遵循一定的命名约定 (如 `plugin-xxx` 或 `@scope/plugin-xxx`).
+- **类型安全**: 充分利用 TypeScript 的类型系统, 确保插件 API 的类型安全, 减少运行时错误。
+- **文档完善**: 为插件编写清晰的文档, 包括 API 说明、使用示例、配置项解释以及变更日志。
+- **测试充分**: 对插件进行单元测试和集成测试, 确保其稳定性、可靠性以及在各种场景下的兼容性。
+- **减少副作用**: 插件应该尽可能地减少对外部环境的修改 (如全局变量、文件系统等), 保持插件的独立性和可移植性。
+- **错误处理**: 插件内部应该妥善处理可能出现的错误, 避免因为插件的异常导致整个应用崩溃。
+- **性能优化**: 注意插件的性能影响, 避免不必要的计算和资源消耗, 特别是在循环或频繁调用的 Hook 中。
+- **版本控制**: 遵循语义化版本控制 (Semantic Versioning), 确保插件的向后兼容性, 方便用户升级。
+
+遵循这些最佳实践, 可以帮助您开发出高质量、易维护、易使用的 Modern.js 插件。

package/docs/zh/plugin/runtime-plugins/_meta.json

@@ -0,0 +1 @@
+["api", "life-cycle"]

package/docs/zh/plugin/runtime-plugins/api.mdx

@@ -0,0 +1,193 @@
+# 插件 API
+
+Modern.js 的 Runtime 插件允许您在应用程序的 React 代码运行时扩展和修改其行为。通过 Runtime 插件，您可以轻松地执行初始化任务、实现 React 高阶组件（HOC）封装等功能。
+
+:::info
+
+Runtime 插件需要通过 `src/modern.runtime.ts` 中的 [`plugins`](/configure/app/runtime/plugins) 字段配置。
+
+:::
+
+## 插件结构
+
+一个典型的 Runtime 插件如下所示：
+
+```ts
+import type { RuntimePlugin } from '@modern-js/runtime';
+
+const myRuntimePlugin = (): RuntimePlugin => ({
+  name: 'my-runtime-plugin',
+  setup: api => {
+    // 使用 api 注册钩子
+    api.onBeforeRender(context => {
+      console.log('Before rendering:', context);
+    });
+
+    api.wrapRoot(App => {
+      return props => (
+        <MyContextProvider>
+          <App {...props} />
+        </MyContextProvider>
+      );
+    });
+  },
+});
+
+export default myRuntimePlugin;
+```
+
+- `name`： 插件的唯一标识符。
+- `setup`： 函数接收一个 `api` 对象，该对象提供了所有可用的 Runtime 插件 API。
+
+## API 概览
+
+Runtime 插件 API 主要分为以下几类：
+
+- **信息获取**：获取运行时配置和钩子函数。
+- **生命周期钩子**：在应用渲染的不同阶段执行自定义逻辑。
+
+### 信息获取
+
+#### `api.getRuntimeConfig`
+
+获取用户在 `modern.runtime.ts` 文件中定义的运行时配置。
+
+- **用法**:
+
+```ts
+const config = api.getRuntimeConfig();
+console.log(config.myCustomSetting);
+```
+
+:::warning
+
+此方法返回的是用户配置的副本，修改返回值不会影响原始配置。
+:::
+
+#### `api.getHooks`
+
+获取可用于手动触发的钩子函数。
+
+- **类型：**
+
+```ts
+() => {
+  onBeforeRender: {
+    call: (context: any) => Promise<void>;
+  }
+  // 其他钩子...
+};
+```
+
+- **用法：**
+
+```ts
+const hooks = api.getHooks();
+await hooks.onBeforeRender.call(myContext);
+```
+
+### 生命周期钩子
+
+#### `api.onBeforeRender`
+
+在应用渲染（包括服务器端渲染和客户端渲染）之前执行。您可以在此钩子中执行数据预取、修改渲染上下文等操作。
+
+- **类型：**
+
+  ```ts
+  type OnBeforeRenderFn<RuntimeContext> = (
+    context: RuntimeContext,
+  ) => Promise<void> | void;
+  ```
+
+  `RuntimeContext` 包含当前请求的上下文信息，如请求对象、响应对象等。
+
+- **用法：**
+
+  ```ts
+  api.onBeforeRender(async context => {
+    const data = await fetchData(context.req);
+    context.data = data; // 将数据添加到上下文中
+  });
+  ```
+
+:::warning
+
+- 此钩子在每次渲染前都会执行，因此应避免执行耗时过长的操作。
+- 您可以在此钩子中修改 `context` 对象，并将修改后的 `context` 传递给后续的渲染过程。
+
+:::
+
+#### `api.wrapRoot`
+
+允许您使用自定义的 React 组件包裹应用的根组件。常用于添加全局的 Provider、布局组件等。
+
+- **类型：**
+
+  ```ts
+  type WrapRootFn = (App: React.ComponentType<any>) => React.ComponentType<any>;
+  ```
+
+- **用法：**
+
+  ```ts
+  api.wrapRoot(App => {
+    const AppWrapper = props => {
+      return (
+        <MyGlobalProvider>
+          <Layout>
+            <App {...props} /> {/* 确保传递 props */}
+          </Layout>
+        </MyGlobalProvider>
+      );
+    };
+    return AppWrapper;
+  });
+  ```
+
+:::warning
+
+- **务必将 `props` 传递给原始的 `App` 组件**，否则可能导致应用无法正常工作。
+- `wrapRoot` 返回的组件会在每次渲染时重新创建，因此应避免在其中定义复杂的逻辑或状态。
+
+:::
+
+## 进阶用法
+
+### 组合使用钩子
+
+您可以组合使用多个钩子来实现更复杂的功能。例如，您可以使用 `onBeforeRender` 获取数据，然后使用 `wrapRoot` 将数据通过 Context 传递给整个应用：
+
+```ts
+import { RuntimePlugin, RuntimeContext } from '@modern-js/runtime';
+import { useContext, createContext } from 'react';
+
+export const ThemeContext = createContext<{ theme: string } | null>(null);
+
+export const themePlugin = (): RuntimePlugin => {
+  return {
+    name: 'theme-plugin',
+    setup: api => {
+      api.onBeforeRender(async context => {
+        const userPreference = await fetch('/api/user/theme-settings').then(
+          res => res.json(),
+        );
+        context.data = {
+          theme: userPreference.theme,
+        };
+      });
+
+      api.wrapRoot(App => {
+        return props => {
+          const context = useContext(RuntimeContext);
+          return (
+            <ThemeContext.Provider value={context.data}>
+              <App {...props} />
+            </ThemeContext.Provider>
+          );
+        };
+      });
+    },
+  };
+};
+```

package/docs/zh/plugin/runtime-plugins/life-cycle.mdx

@@ -0,0 +1,29 @@
+# 生命周期
+
+import Mermaid from '@site/src/components/Mermaid';
+
+<Mermaid>
+{`
+flowchart TD
+    init{{"Runtime 初始化"}}
+    load_config(加载用户配置文件)
+    runtime_plugin(加载 Runtime 插件<br><sub>配置文件中注册的插件<br>CLI 插件注册的 Runtime 插件<br>插件中使用的插件</sub>)
+    registry_hooks(注册 Hooks 函数<br><sub>执行插件 setup 函数，注册插件中定义的 Hook, 插件 setup 中逻辑也会在这里执行</sub>)
+
+    wrapRoot(wrapRoot<br><sub>wrapRoot 中返回组件中的逻辑会在组件渲染时执行</sub>)
+    onBeforeRender(onBeforeRender)
+
+    init --> load_config
+    load_config --> runtime_plugin
+    runtime_plugin --> registry_hooks
+    registry_hooks --> wrapRoot
+    wrapRoot --> onBeforeRender
+
+    style init fill:#FDE68A,font-size:10px;
+    style load_config stroke-dasharray:5 5,fill:#86EFAC,font-size:10px;
+    style runtime_plugin stroke-dasharray:5 5,fill:#86EFAC,font-size:10px;
+    style registry_hooks stroke-dasharray:5 5,fill:#9CA3AF,font-size:10px;
+    style wrapRoot font-size:10px;
+    style onBeforeRender font-size:10px;
+`}
+</Mermaid>

package/docs/zh/plugin/server-plugins/_meta.json

@@ -0,0 +1 @@
+["api", "life-cycle"]