@modern-js/main-doc 3.9.3 → 3.10.0

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

@@ -131,5 +131,7 @@ flowchart TD
     style spacer7 fill:none,stroke:none,height:0px;
     style spacer8 fill:none,stroke:none,height:0px;
     style spacer9 fill:none,stroke:none,height:0px;
+
 `}
+
 </Mermaid>

package/docs/zh/plugin/introduction.mdx

@@ -126,12 +126,12 @@ Rsbuild 是 Modern.js 底层的构建工具，通过添加 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 组件                                                   | [tools.svgr](/configure/app/tools/svgr)     |
-| [Assets Retry 插件](https://github.com/rstackjs/rsbuild-plugin-assets-retry)          | 用于在静态资源加载失败时自动发起重试请求                                               | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
-| [Type Check 插件](https://github.com/rstackjs/rsbuild-plugin-type-check)             | 用于在单独的进程中运行 TypeScript 类型检查                                             | [output.disableTsChecker](/configure/app/output/disable-ts-checker.html)<br />[tools.tsChecker](/configure/app/tools/ts-checker.html) |
+| 插件                                                                           | 介绍                                                                                   | 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 组件                                                   | [tools.svgr](/configure/app/tools/svgr)                                                                                               |
+| [Assets Retry 插件](https://github.com/rstackjs/rsbuild-plugin-assets-retry)   | 用于在静态资源加载失败时自动发起重试请求                                               | [output.assetsRetry](/configure/app/output/assets-retry.html)                                                                         |
+| [Type Check 插件](https://github.com/rstackjs/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/rstackjs/rsbuild-plugin-source-build)   | 用于 monorepo 场景，支持引用其他子目录的源代码，并完成构建和热更新                     | [experiments.sourceBuild](/configure/app/experiments/source-build.html)                                                               |
 | [Check Syntax 插件](https://github.com/rstackjs/rsbuild-plugin-check-syntax)   | 用于分析产物的语法兼容性，判断是否存在导致兼容性问题的高级语法                         | [security.checkSyntax](/configure/app/security/check-syntax.html)                                                                     |
 | [CSS Minimizer 插件](https://github.com/rstackjs/rsbuild-plugin-css-minimizer) | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩 | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |

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

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

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

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

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

@@ -14,31 +14,26 @@ Modern.js 秉承“一切皆插件”的设计哲学，将框架的各项功能
 ## 插件类型与适用场景
 
 **CLI 插件**：
-    -   **作用阶段**：构建时（执行 `modern` 命令时）。
-    -   **典型场景**：
-        -   扩展命令行工具。
-        -   修改构建配置。
-        -   监听文件变化。
-        -   控制构建流程。
-    -   **配置方式**：`modern.config.ts` 中的 `plugins` 字段。
+
+- **作用阶段**：构建时（执行 `modern` 命令时）。
+- **典型场景**：
+  - 扩展命令行工具。
+  - 修改构建配置。
+  - 监听文件变化。
+  - 控制构建流程。
+- **配置方式**：`modern.config.ts` 中的 `plugins` 字段。
 
 **Runtime 插件**：
-    -   **作用阶段**：应用运行时（浏览器/Node.js 环境）。
-    -   **典型场景**：
-        -   初始化全局状态或服务。
-        -   封装 React 高阶组件（HOC）。
-        -   拦截或修改路由行为。
-        -   控制渲染流程。
-    -   **配置方式**：`src/modern.runtime.ts` 中的 `plugins` 字段。
-
-{/* **Server 插件**：
-    -   **作用阶段**：服务端请求处理阶段。
-    -   **典型场景**：
-        -   添加自定义中间件。
-        -   扩展服务端 API。
-        -   定制化 SSR 逻辑。
-        -   与后端框架集成。
-    -   **配置方式**：`server/modern.server.ts` 中的 `plugins` 字段。 */}
+
+- **作用阶段**：应用运行时（浏览器/Node.js 环境）。
+- **典型场景**：
+  - 初始化全局状态或服务。
+  - 封装 React 高阶组件（HOC）。
+  - 拦截或修改路由行为。
+  - 控制渲染流程。
+- **配置方式**：`src/modern.runtime.ts` 中的 `plugins` 字段。
+
+{/* **Server 插件**： - **作用阶段**：服务端请求处理阶段。 - **典型场景**： - 添加自定义中间件。 - 扩展服务端 API。 - 定制化 SSR 逻辑。 - 与后端框架集成。 - **配置方式**：`server/modern.server.ts` 中的 `plugins` 字段。 */}
 
 ## 插件结构
 
@@ -194,9 +189,7 @@ const myPlugin2 = () => ({
 // 定义 Hooks
 import { createSyncHook } from '@modern-js/plugin';
 
-type RouteObject = {
-  /** TODO **/
-};
+type RouteObject = {/** TODO **/};
 const modifyRoutes = createSyncHook<(routes: RouteObject[]) => RouteObject[]>();
 
 // 插件中注册 Hooks

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

@@ -25,5 +25,7 @@ flowchart TD
     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/api.mdx

@@ -46,17 +46,17 @@ export default myServerPlugin;
 
 - **返回值：** `ServerContext` 对象，包含以下字段：
 
-| 字段名            | 类型                | 描述                           |
-| ----------------- | ------------------- | ------------------------------ |
-| `middlewares`     | `MiddlewareObj[]`   | 中间件列表                     |
-| `renderMiddlewares` | `MiddlewareObj[]` | 渲染中间件列表                 |
-| `routes`          | `ServerRoute[]`     | 服务器路由信息                 |
-| `appDirectory`    | `string`            | 项目根目录的绝对路径           |
-| `apiDirectory`    | `string`            | API 模块目录的绝对路径         |
-| `lambdaDirectory` | `string`            | Lambda 模块目录的绝对路径     |
-| `sharedDirectory` | `string`            | 公共模块目录的绝对路径         |
-| `distDirectory`   | `string`            | 项目产物输出目录的绝对路径     |
-| `plugins`         | `ServerPlugin[]`    | 当前已注册的插件列表           |
+| 字段名              | 类型              | 描述                       |
+| ------------------- | ----------------- | -------------------------- |
+| `middlewares`       | `MiddlewareObj[]` | 中间件列表                 |
+| `renderMiddlewares` | `MiddlewareObj[]` | 渲染中间件列表             |
+| `routes`            | `ServerRoute[]`   | 服务器路由信息             |
+| `appDirectory`      | `string`          | 项目根目录的绝对路径       |
+| `apiDirectory`      | `string`          | API 模块目录的绝对路径     |
+| `lambdaDirectory`   | `string`          | Lambda 模块目录的绝对路径  |
+| `sharedDirectory`   | `string`          | 公共模块目录的绝对路径     |
+| `distDirectory`     | `string`          | 项目产物输出目录的绝对路径 |
+| `plugins`           | `ServerPlugin[]`  | 当前已注册的插件列表       |
 
 - **示例：**
 
@@ -111,7 +111,6 @@ await hooks.onPrepare.call();
 
 ---
 
-
 ## 上下文修改
 
 #### `api.updateServerContext`
@@ -143,7 +142,6 @@ api.onPrepare(() => {
 
 ---
 
-
 ## 生命周期钩子
 
 #### `api.onPrepare`
@@ -205,7 +203,6 @@ api.onReset(async ({ event }) => {
 
 ---
 
-
 ## 其他说明
 
 - 可以参考 [Server 插件生命周期](./life-cycle.mdx) 了解插件钩子的执行顺序。

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

@@ -28,7 +28,9 @@ flowchart TD
     style modifyConfig font-size:10px;
     style onPrepare font-size:10px;
     style apply_middlewares font-size:10px;
+
 `}
+
 </Mermaid>
 
 :::info

package/package.json

@@ -16,19 +16,18 @@
     "modern",
     "modern.js"
   ],
-  "version": "3.9.3",
+  "version": "3.10.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "dependencies": {
-    "mermaid": "^11.15.0",
-    "@modern-js/sandpack-react": "3.9.3"
+    "mermaid": "^11.17.2",
+    "@modern-js/sandpack-react": "3.10.0"
   },
   "devDependencies": {
-    "rsbuild-plugin-open-graph": "1.1.3",
     "@rsbuild/plugin-sass": "2.0.1",
-    "@rspress/core": "2.0.13",
+    "@rspress/core": "2.0.23",
     "@rspress/plugin-llms": "2.0.2",
     "@rspress/shared": "2.0.2",
     "@shikijs/transformers": "^3.23.0",
@@ -37,8 +36,9 @@
     "classnames": "^2.5.1",
     "clsx": "^1.2.1",
     "fs-extra": "^10.1.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "rsbuild-plugin-open-graph": "1.1.3",
     "ts-node": "^10.9.2",
     "typescript": "^5"
   },
@@ -48,8 +48,7 @@
         "inputs": [
           "build",
           "^build",
-          "{projectRoot}/docs/**/*",
-          "{projectRoot}/rspress.config.ts"
+          "{projectRoot}/docs/**/*"
         ],
         "outputs": [
           "{projectRoot}/doc_build"
@@ -58,9 +57,8 @@
     }
   },
   "scripts": {
-    "dev": "rspress dev",
-    "dev:no_lazy": "LAZY=false rspress dev",
-    "build": "rspress build",
-    "preview": "rspress preview"
+    "dev": "rs doc",
+    "build": "rs doc build",
+    "preview": "rs doc preview"
   }
 }

package/{rspress.config.ts → rstack.config.mts}

@@ -1,10 +1,10 @@
 import path from 'path';
 import { pluginSass } from '@rsbuild/plugin-sass';
-import { defineConfig } from '@rspress/core';
 import { transformerNotationHighlight } from '@shikijs/transformers';
 import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';
+import { define } from 'rstack';
 
-const docPath = path.join(__dirname, 'docs');
+const docPath = path.join(import.meta.dirname, 'docs');
 const siteTitle = 'Modern.js';
 const siteDescription =
   'The Modern.js framework is a progressive web framework based on React. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.';
@@ -13,7 +13,7 @@ const socialDescription =
 const socialImage =
   'https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/banner.jpeg';
 
-export default defineConfig({
+define.doc({
   root: docPath,
   llms: true,
   title: siteTitle,
@@ -22,7 +22,7 @@ export default defineConfig({
   logo: 'https://lf-cdn-tos.bytescm.com/obj/static/webinfra/modern-js-website/assets/images/images/modernjs-logo.svg',
   icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico',
   lang: 'en',
-  themeDir: path.join(__dirname, 'src'),
+  themeDir: path.join(import.meta.dirname, 'src'),
   markdown: {
     checkDeadLinks: true,
     shiki: {
@@ -111,14 +111,11 @@ export default defineConfig({
     output: {
       dataUriLimit: 0,
     },
-    dev: {
-      lazyCompilation: process.env.LAZY !== 'false',
-    },
     resolve: {
       alias: {
-        '@site-docs': path.join(__dirname, './docs/zh'),
-        '@site-docs-en': path.join(__dirname, './docs/en'),
-        '@site': require('path').resolve(__dirname),
+        '@site-docs': path.join(import.meta.dirname, './docs/zh'),
+        '@site-docs-en': path.join(import.meta.dirname, './docs/en'),
+        '@site': import.meta.dirname,
       },
     },
     plugins: [

package/src/components/Footer/styles.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: center;
   padding: 10vh 0;
-  border-top: 1px solid rgba(0,0,0,0.1);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .logo {

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

@@ -9,7 +9,9 @@
   cursor: pointer;
   border: 1px solid var(--rp-c-bg-soft);
   background-color: var(--rp-c-bg-soft);
-  transition: color 0.5s, background-color 0.5s;
+  transition:
+    color 0.5s,
+    background-color 0.5s;
   padding: 22px;
   border-radius: 16px;
   flex: 0 1 32%;