@modern-js/main-doc 2.49.4 → 2.51.0

package/docs/en/apis/app/runtime/web-server/middleware.mdx

@@ -1,10 +1,17 @@
 ---
 title: Middleware
 ---
+
 # Middleware
 
 Used to extend the built-in Web Server of Modern.js, unlike [Hook](/apis/app/runtime/web-server/hook), Middleware can directly operate Node's origin request and response, and can be extended using the framework plugin.
 
+:::note
+In the next major release, Modern.js will use new middleware to replace this approach.
+
+It is recommended to use [UnstableMiddleware](/apis/app/runtime/web-server/unstable_middleware) to handle page requests.
+:::
+
 :::note
 For more detail, see [Extend Web Server](/guides/advanced-features/web-server).
 
@@ -125,7 +132,6 @@ export const middleware: SomeType = (ctx, next) => {
 
 By default, the framework extension capability of Web Server is turned off after installing the framework extension plugin. If you want to use the framework extension, you can turn it on through ['server.enableFrameworkExt'](/configure/app/server/enable-framework-ext.html).
 
-
 :::info
 The type name exported by the framework extension may not 'Middleware', but is named by the framework extension plugin.
 :::

package/docs/en/apis/app/runtime/web-server/unstable_middleware.mdx

@@ -0,0 +1,134 @@
+---
+title: Unstable Middleware
+---
+
+# Unstable Middleware
+
+Used to extend the built-in Web Server in Modern.js.
+UnstableMiddleware will replace [Middleware](/apis/app/runtime/web-server/middleware) in the future.
+
+## Usage
+
+```ts title="server/index.ts"
+import { UnstableMiddleware } from '@modern-js/runtime/server';
+
+export const unstableMiddlewares: UnstableMiddleware[] = [];
+```
+
+## Types
+
+**UnstableMiddleware**
+
+```ts
+type UnstableMiddleware<
+  V extends Record<string, unknown> = Record<string, unknown>,
+> = (
+  c: UnstableMiddlewareContext<V>,
+  next: UnstableNext,
+) => Promise<void | Response>;
+```
+
+**UnstableMiddlewareContext**
+
+```ts
+type Body = ReadableStream | ArrayBuffer | string | null;
+
+type UnstableMiddlewareContext<
+  V extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  request: Request;
+  response: Response;
+  get: Get<V>;
+  set: Set<V>;
+  header: (name: string, value: string, options?: { append?: boolean }) => void;
+  status: (code: number) => void;
+  redirect: (location: string, status?: number) => Response;
+  body: (data: Body, init?: ResponseInit) => Response;
+  html: (
+    data: string | Promise<string>,
+    init?: ResponseInit,
+  ) => Response | Promise<Response>;
+};
+```
+
+**UnstableNext**
+
+```ts
+type UnstableNext = () => Promise<void>;
+```
+
+## Examples
+
+### Web Server Timing
+
+```ts
+import { UnstableMiddleware } from '@modern-js/runtime/server';
+
+const time: UnstableMiddleware = async (c, next) => {
+  const start = Date.now();
+
+  await next();
+
+  const end = Date.now();
+
+  console.log(`${end - start}`);
+};
+
+export const unstableMiddlewares: UnstableMiddleware = [time];
+```
+
+### Injecting Server Data for DataLoader Consumption
+
+```ts title="shared/index.ts"
+export type Vars = {
+  message: string;
+};
+```
+
+```ts title="server/index.ts"
+import {
+  UnstableMiddleware,
+  UnstableMiddlewareContext,
+} from '@modern-js/runtime/server';
+import type { Vars } from '../shared/index';
+
+const setPayload: UnstableMiddleware = async (
+  c: UnstableMiddlewareContext<Vars>,
+  next,
+) => {
+  c.set('message', 'facker');
+
+  await next();
+};
+
+export const unstableMiddlewares: UnstableMiddleware = [setPayload];
+```
+
+```ts title="src/routes/page.data.ts"
+import type { Payload } from '../../shared/index';
+import { LoaderFunctionArgs } from '@modern-js/runtime/router';
+
+export const loader = async ({ context }: LoaderFunctionArgs<Vars>) => {
+  const message = context?.get('message');
+
+  // ...
+};
+```
+
+### Redirect
+
+```ts
+import { UnstableMiddleware } from '@modern-js/runtime/server';
+
+const auth: UnstableMiddleware = async (c, next) => {
+  const user = getUser(c.request);
+
+  if (!user) {
+    return c.redirect('/login');
+  }
+
+  await next();
+};
+
+export const unstableMiddlewares: UnstableMiddleware = [auth];
+```

package/docs/en/guides/advanced-features/web-server.mdx

@@ -50,15 +50,18 @@ The Hook provided by Modern.js is used to control the built-in logic in the Web
 Currently, two Hooks are provided: `AfterMatch` and `AfterRender`, which can be used to modify the rendering results. It can be written in `server/index.ts` as follows:
 
 ```ts
-import type { AfterMatchHook, AfterRenderHook } from '@modern-js/runtime/server';
+import type {
+  AfterMatchHook,
+  AfterRenderHook,
+} from '@modern-js/runtime/server';
 
 export const afterMatch: AfterMatchHook = (ctx, next) => {
   next();
-}
+};
 
 export const afterRender: AfterRenderHook = (ctx, next) => {
   next();
-}
+};
 ```
 
 Projects should follow these best practices when using Hook:
@@ -75,12 +78,18 @@ For more detail, see [Hook](/apis/app/runtime/web-server/hook).
 
 For some projects, there may be more requirements at the server level, Modern.js provides Middleware to add pre-middleware for Web Server. It can only run in a Node environment, so if the project is deployed to another environment, such as a Worker environment, Middleware cannot be used.
 
+:::note
+In the next major release, Modern.js will use new middleware to replace this approach.
+
+It is recommended to use [UnstableMiddleware](/guides/advanced-features/web-server.html#unstablemiddleware) to handle page requests.
+:::
+
 Modern.js provides a set of APIs by default for projects to use:
 
 ```ts
-import { Middlewre } from '@modern-js/runtime/server';
+import { Middleware } from '@modern-js/runtime/server';
 
-export const middleware: Middlewre = (context, next) => {
+export const middleware: Middleware = (context, next) => {
   const { source: { req, res } } = context;
   console.log(req.url);
   next();
@@ -99,6 +108,33 @@ Projects should follow these best practices when using Middleware:
 
 **In general, in CSR projects, using Hook can basically meet all the needs of simple scenarios. In SSR projects, Middleware can be used for more complex Node extensions.**
 
+### UnstableMiddleware
+
+Modern.js will provide new Middleware to add pre-processing middleware to the Web Server, supporting the execution of custom logic before and after handling the page.
+
+```ts title="server/index.ts"
+import {
+  UnstableMiddleware,
+  UnstableMiddlewareContext,
+} from '@modern-js/runtime/server';
+
+const time: UnstableMiddleware = async (c: UnstableMiddlewareContext, next) => {
+  const start = Date.now();
+
+  await next();
+
+  const end = Date.now();
+
+  console.log(`dur=${end - start}`);
+};
+
+export const unstableMiddleware: UnstableMiddleware[] = [time];
+```
+
+:::note
+For detailed API and more usage, please refer to [UnstableMiddleware](/apis/app/runtime/web-server/unstable_middleware)
+:::
+
 ## Managed Page Requests with BFF
 
 The second way is to use BFF to Managed page rendering. In this way, all requests will first hit the BFF service.

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

@@ -0,0 +1,176 @@
+---
+sidebar_position: 15
+---
+
+# Deploy
+
+Currently, Modern.js can run in the node.js environment, you can host it yourself. At the same time, Modern.js officially supports deployment on the Netlify platform.
+
+:::info
+Currently Modern.js only supports running in node.js environments, support for other runtime environments will be provided in a later version.
+:::
+
+
+## Commands to build products
+
+Running the `modern deploy` command will automatically build the output file for the production environment. This process includes optimizing the output file and its dependencies, and detecting the current deployment platform and automatically generating a product that will run on that platform.
+
+If you want to generate and test the output locally for a specific deployment platform, you can specify the platform by setting the environment variable: `modern deploy`:
+
+```bash
+MODERNJS_DEPLOY=netlify npx modern deploy
+```
+
+:::info
+When deploying on the deployment platforms officially supported by Modern.js, there is no need to specify environment variables.
+:::
+
+
+## Node.js
+
+### Single Repo
+
+By default, Modern.js outputs builds that can be run in a Node.js environment when no Modern.js-supported deployment platform is detected.
+
+Use the following command to build the project:
+```bash
+npx modern deploy
+```
+
+When running the `modern deploy` command, Modern.js will generate runnable products and output the following content:
+
+```bash
+Static directory: `.output/static`
+You can preview this build by `node .output/index`
+```
+
+At this point, you can run the entire server by `node .output/index`, and the static resources required for the page are in the `.output/static` directory. You can upload these static resources to a CDN yourself:
+
+:::info
+By default, when running Modern.js Server, it listens on port 8080. If you want to change the listening port, you can specify the `PORT` environment variable:
+```
+PORT=3000 node .output/index
+```
+:::
+
+
+### Monorepo
+
+For the Monorepo project, in addition to building our current project, we also need to build other repositories that the current project depends on.
+
+We assume that the name in the `package.json` of the current project is `app`. Taking pnpm as an example of a monorepo management tool, you can add the following command to the `package.json` of the current project to build products for the current project:
+
+```json title="app/package.json"
+{
+  "scripts": {
+    "deploy": "modern deploy",
+    "deploy:app": "pnpm --filter 'app^...' run build && pnpm --filter=app run deploy",
+  }
+}
+```
+
+If you use rush to manage repositories, you can add the following command in `package.json`:
+
+```json
+{
+  "scripts": {
+    "deploy": "modern deploy",
+    "deploy:app": "rush rebuild --to-except app && rushx deploy",
+  }
+}
+```
+
+After the build is completed, Modern.js will generate all dependencies in the `.output/node_modules` directory of the project. Similarly, you can run the entire server using `node .output/index`.
+
+## Netlify
+
+Netlify is a popular web development platform designed for building, deploying, and maintaining modern web projects. Deploying on Netlify mainly requires configuring the `netlify.toml` file.
+
+Depending on the complexity of your project, you can configure it incrementally by this doc.
+
+### Pure Front-end Project
+
+Add the `netlify.toml` file to the root directory of the current project:
+
+```bash
+./
+├── src/
+├── modern.config.ts
+├── netlify.toml
+├── package.json
+```
+
+Add the following content to `netlify.toml`:
+```toml
+[build]
+  publish = "dist"
+  command = "npm run deploy"
+```
+
+Add a project to the Netlify platform and deploy it!
+
+### Full Stack Project
+
+Full-stack projects refer to projects that use custom servers, SSR, and BFF. These projects need to be deployed on Netlify Functions. Based on the `netlify.toml` file mentioned above,
+add the following configuration:
+
+```toml title="netlify.toml"
+[build]
+  publish = "dist"
+  command = "npm run deploy"
+
+[functions]
+  directory = ".netlify/functions"
+  node_bundler = "none"
+  included_files = [".netlify/functions/**"]
+
+```
+
+:::info
+Currently, Modern.js does not support deployment on Netlify Edge Functions. We will support it in future versions.
+:::
+
+
+### Monorepo
+
+For Monorepo projects, in addition to building our current project, we also need to build the dependencies of the current project from other repositories.
+We take a pnpm monorepo repository as an example and deploy the Monorepo project on Netlify.
+
+Suppose we have the following Monorepo repository:
+
+```
+./
+├── packages/
+│   ├── app/
+│   └── app-dep1
+├── package.json
+├── pnpm-lock.yaml
+└── pnpm-workspace.yaml
+```
+
+We need to configure Base directory on the netlify platform as `packages/app`:
+
+<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/netlify-monorepo-basedir.png?x-resource-account=public" />
+
+Add the following script in `packages/app/package.json`, before executing the deployment command of the `app` repository, first execute the build of other repositories in the workspace:
+
+```json
+"scripts": {
+  "deploy:app": "pnpm --filter 'app^...' run build && pnpm --filter=app run deploy",
+}
+```
+
+Configure the build command in `netlify.toml`:
+
+```toml
+[build]
+  publish = "dist"
+  command = "npm run deploy:app"
+
+[functions]
+  directory = ".netlify/functions"
+  node_bundler = "none"
+  included_files = [".netlify/functions/**"]
+```
+
+Just submit your code and deploy it using the Netlify platform.

package/docs/zh/apis/app/runtime/web-server/middleware.mdx

@@ -1,10 +1,17 @@
 ---
 title: Middleware
 ---
+
 # Middleware
 
 用于拓展 Modern.js 内置的 Web Server，与 [Hook](/apis/app/runtime/web-server/hook) 不同的是，Middleware 可以直接操作 Node 原生的请求、响应对象，并且可以使用框架拓展。
 
+:::note
+在下一个大版本，Modern.js 将会使用新 Middleware 来替代该写法。
+
+推荐使用 [UnstableMiddleware](/apis/app/runtime/web-server/unstable_middleware) 处理页面请求。
+:::
+
 :::note
 更多内容可以查看[自定义 Web Server](/guides/advanced-features/web-server)。
 :::

package/docs/zh/apis/app/runtime/web-server/unstable_middleware.mdx

@@ -0,0 +1,133 @@
+---
+title: Unstable Middleware
+---
+
+# Unstable Middleware
+
+用于拓展 Modern.js 内置的 Web Server。 未来 UnstableMiddleware 将替代 [Middleware](/apis/app/runtime/web-server/middleware)
+
+## 使用
+
+```ts title="server/index.ts"
+import { UnstableMiddleware } from '@modern-js/runtime/server';
+
+export const unstableMiddlewares: UnstableMiddleware = [];
+```
+
+## 类型
+
+**UnstableMiddleware**
+
+```ts
+type UnstableMiddleware<
+  V extends Record<string, unknown> = Record<string, unknown>,
+> = (
+  c: UnstableMiddlewareContext<V>,
+  next: UnstableNext,
+) => Promise<void | Response>;
+```
+
+**UnstableMiddlewareContext**
+
+```ts
+type Body = ReadableStream | ArrayBuffer | string | null;
+
+type UnstableMiddlewareContext<
+  V extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  request: Request;
+  response: Response;
+  get: Get<V>;
+  set: Set<V>;
+  header: (name: string, value: string, options?: { append?: boolean }) => void;
+  status: (code: number) => void;
+  redirect: (location: string, status?: number) => Response;
+  body: (data: Body, init?: ResponseInit) => Response;
+  html: (
+    data: string | Promise<string>,
+    init?: ResponseInit,
+  ) => Response | Promise<Response>;
+};
+```
+
+**UnstableNext**
+
+```ts
+type UnstableNext = () => Promise<void>;
+```
+
+## 用例
+
+### web server 耗时打点
+
+```ts
+import { UnstableMiddleware } from '@modern-js/runtime/server';
+
+const time: UnstableMiddleware = async (c, next) => {
+  const start = Date.now();
+
+  await next();
+
+  const end = Date.now();
+
+  console.log(`${end - start}`);
+};
+
+export const unstableMiddlewares: UnstableMiddleware = [time];
+```
+
+### 注入服务端数据，供页面 dataLoader 消费
+
+```ts title="shared/index.ts"
+export type Vars = {
+  message: string;
+};
+```
+
+```ts title="server/index.ts"
+import {
+  UnstableMiddleware,
+  UnstableMiddlewareContext,
+} from '@modern-js/runtime/server';
+import type { Vars } from '../shared/index';
+
+const setPayload: UnstableMiddleware = async (
+  c: UnstableMiddlewareContext<Vars>,
+  next,
+) => {
+  c.set('message', 'facker');
+
+  await next();
+};
+
+export const unstableMiddlewares: UnstableMiddleware = [setPayload];
+```
+
+```ts title="src/routes/page.data.ts"
+import type { Payload } from '../../shared/index';
+import { LoaderFunctionArgs } from '@modern-js/runtime/router';
+
+export const loader = async ({ context }: LoaderFunctionArgs<Vars>) => {
+  const message = context?.get('message');
+
+  // ...
+};
+```
+
+### 重定向
+
+```ts
+import { UnstableMiddleware } from '@modern-js/runtime/server';
+
+const auth: UnstableMiddleware = async (c, next) => {
+  const user = getUser(c.request);
+
+  if (!user) {
+    return c.redirect('/login');
+  }
+
+  await next();
+};
+
+export const unstableMiddlewares: UnstableMiddleware = [auth];
+```

package/docs/zh/guides/advanced-features/web-server.mdx

@@ -76,12 +76,18 @@ export const afterRender: AfterRenderHook = (ctx, next) => {
 
 对于某些项目，可能在服务端有更多的需求，Modern.js 提供了 Middleware 为 Web Server 添加前置中间件。它只能运行在 Node 环境下，因此如果项目被部署到其他环境中，如 Worker 环境，则不可以使用 Middleware。
 
+:::note
+下一个大版本，Modern.js 将会使用新 Middleware 来替代该写法。
+
+推荐使用 [UnstableMiddleware](/guides/advanced-features/web-server.html#unstablemiddleware) 处理页面请求。
+:::
+
 Modern.js 默认提供了一套 API 供项目使用：
 
 ```ts
-import { Middlewre } from '@modern-js/runtime/server';
+import { Middleware } from '@modern-js/runtime/server';
 
-export const middleware: Middlewre = (context, next) => {
+export const middleware: Middleware = (context, next) => {
   const {
     source: { req, res },
   } = context;
@@ -102,6 +108,33 @@ export const middleware: Middlewre = (context, next) => {
 
 **总的来说，CSR 项目中，使用 Hook 基本能满足简单场景的所有需求。SSR 项目中，可以使用 Middleware 做更复杂的 Node 扩展。**
 
+### UnstableMiddleware
+
+Modern.js 将提供新 Middleware 为 Web Server 添加前置中间件，支持在处理页面的前后执行自定义逻辑。
+
+```ts title="server/index.ts"
+import {
+  UnstableMiddleware,
+  UnstableMiddlewareContext,
+} from '@modern-js/runtime/server';
+
+const time: UnstableMiddleware = async (c: UnstableMiddlewareContext, next) => {
+  const start = Date.now();
+
+  await next();
+
+  const end = Date.now();
+
+  console.log(`dur=${end - start}`);
+};
+
+export const unstableMiddleware: UnstableMiddleware[] = [time];
+```
+
+:::note
+详细 API 和更多用法查看 [UnstableMiddleware](/apis/app/runtime/web-server/unstable_middleware)
+:::
+
 ## 通过 BFF 托管页面请求
 
 第二种方式，是利用 BFF 来托管页面渲染，这种方式下，所有的请求都会先打到 BFF 的服务。

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

@@ -0,0 +1,177 @@
+---
+sidebar_position: 15
+---
+
+# 部署
+
+目前 Modern.js 支持在 node.js 环境下运行，你可以自行托管，同时，Modern.js 官方支持在 Netlify 平台上部署。
+
+:::info
+当前仅支持在 node.js 环境运行，对其他运行时环境的支持将在后续版本中提供。
+:::
+
+
+## 构建产物的命令
+
+执行 `modern deploy` 命令将自动构建适用于生产环境的输出文件。此过程包括优化输出文件及其依赖，并检测当前部署平台，自动生成可以在该平台运行的产物。
+如果你希望在本地生成并测试特定部署平台的产物，可以通过设置环境变量来指定平台:
+
+```bash
+MODERNJS_DEPLOY=netlify npx modern deploy
+```
+
+:::info
+在 Modern.js 官方支持的部署平台中部署时，无需指定环境变量。
+:::
+
+
+## Node.js
+
+### 单仓库项目
+
+默认情况下，当未检测到 Modern.js 支持的部署平台时，Modern.js 会输出可以在 Node.js 环境下运行的构建产物。
+
+使用以下命令构建项目：
+```bash
+npx modern deploy
+```
+
+当执行 `modern deploy` 命令时，Modern.js 会产出可运行的生产环境产物，并输出以下内容：
+
+```bash
+Static directory: `.output/static`
+You can preview this build by `node .output/index`
+```
+
+此时，你可以通过 `node .output/index` 运行整个 server，在 `.output/static` 目录下是页面所需的静态资源，你可以将这些静态资源自行上传至 CDN。
+
+:::info
+默认情况下，运行 Modern.js Server 时会监听 8080 端口，如果你想修改监听的端口，可以指定 `PORT` 环境变量：
+```
+PORT=3000 node .output/index
+```
+:::
+
+
+### Monorepo
+
+对于 Monorepo 项目，除了需要构建我们当前的项目外，还需要构建当前项目的依赖的其他仓库。
+
+假设当前项目的 `package.json` 中的 name 为 `app`，以 pnpm 作为 monorepo 管理工具为例，你可以在当前项目的 `package.json` 添加以下命令用于构建当前项目的产物：
+
+```json title="app/package.json"
+{
+  "scripts": {
+    "deploy": "modern deploy",
+    "deploy:app": "pnpm --filter 'app^...' run build && pnpm --filter=app run deploy",
+  }
+}
+```
+
+如果你使用 rush 管理仓库，可以在 `package.json` 中添加以下命令：
+
+```json
+{
+  "scripts": {
+    "deploy": "modern deploy",
+    "deploy:app": "rush rebuild --to-except app && rushx deploy",
+  }
+}
+```
+
+当构建完成后，Modern.js 会将项目中所有的依赖生成在 `.output/node_modules` 目录下。同样的，你可以使用 `node .output/index` 运行整个 Server。
+
+## Netlify
+
+Netlify 是一个流行的 web 开发平台，专为构建、发布和维护现代 web 项目而设计，在 Netlify 上部署，主要需要配置 `netlify.toml` 文件，
+根据你的项目复杂度，可以渐进配置。
+
+### 纯前端项目
+
+在当前项目的根目录添加 `netlify.toml` 文件：
+
+```bash
+./
+├── src/
+├── modern.config.ts
+├── netlify.toml
+├── package.json
+```
+
+在 `netlify.toml` 中添加以下内容：
+```toml
+[build]
+  publish = "dist"
+  command = "npm run deploy"
+```
+
+在 Netlify 平台上添加项目，部署即可。
+
+### 全栈项目
+
+全栈项目是指使用了 自定义 Server，SSR，BFF 的项目，这些项目需要部署在 Netlify Functions 上。基于上述的 `netlify.toml` 文件，
+添加以下配置：
+
+```toml title="netlify.toml"
+[build]
+  publish = "dist"
+  command = "npm run deploy"
+
+[functions]
+  directory = ".netlify/functions"
+  node_bundler = "none"
+  included_files = [".netlify/functions/**"]
+
+```
+
+:::info
+目前 Modern.js 还不支持在 Netlify Edge Functions 进行部署，我们将在后续的版本中支持。
+:::
+
+
+### Monorepo 项目
+
+对于 Monorepo 项目，除了需要构建我们当前的项目外，还需要构建当前项目的依赖的其他仓库。我们以一个 pnpm monorepo 仓库为例，
+在 Netlify 上对 Monorepo 项目进行部署。
+
+假设我们有以下 Monorepo 仓库：
+
+```
+./
+├── packages/
+│   ├── app/
+│   └── app-dep1
+├── package.json
+├── pnpm-lock.yaml
+└── pnpm-workspace.yaml
+```
+
+我们需要在 netlify 平台上配置 Base directory 为 `packages/app`:
+
+<img src="https://sf16-sg.tiktokcdn.com/obj/eden-sg/lmeh7nuptpfnuhd/netlify-monorepo-basedir.png?x-resource-account=public" />
+
+在 `packages/app/package.json` 中添加以下 script，在执行 `app` 仓库的部署命令之前，先执行 workspace 中其他仓库的构建：
+
+```json
+"scripts": {
+  "deploy:app": "pnpm --filter 'app^...' run build && pnpm --filter=app run deploy",
+}
+```
+
+在 `netlify.toml` 配置构建命令：
+
+```toml
+[build]
+  publish = "dist"
+  command = "npm run deploy:app"
+
+[functions]
+  directory = ".netlify/functions"
+  node_bundler = "none"
+  included_files = [".netlify/functions/**"]
+```
+
+提交你的代码，使用 Netlify 平台部署即可。
+
+
+

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.49.4",
+  "version": "2.51.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.49.4"
+    "@modern-js/sandpack-react": "2.51.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.49.4"
+    "@modern-js/builder-doc": "^2.51.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -39,8 +39,8 @@
     "@rspress/shared": "1.18.2",
     "@types/node": "^16",
     "@types/fs-extra": "9.0.13",
-    "@modern-js/doc-plugin-auto-sidebar": "2.49.4",
-    "@modern-js/builder-doc": "2.49.4"
+    "@modern-js/builder-doc": "2.51.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.51.0"
   },
   "scripts": {
     "dev": "rspress dev",