@modern-js/main-doc 2.10.0 → 2.11.0

package/docs/zh/configure/app/source/entries.mdx

@@ -1,19 +1,36 @@
 ---
-title: source.entries
 sidebar_label: entries
 ---
-# entries
 
-- **类型：** `Object = { [ entryName: string ]: string | Object }`
-- **默认值：** 根据当前项目目录结构动态结算出的默认入口对象。
+# source.entries
 
-对于大部分场景，Modern.js 根据目录结构自动生成的入口能满足大部分业务需求。具体可参考[入口](/guides/concept/entries)。
+- **类型：**
 
-如需自定义构建入口时，可以通过该选项指定。
+```ts
+type Entries = Record<
+  string,
+  | string
+  | {
+      entry: string;
+      disableMount?: boolean;
+    }
+>;
+```
+
+- **默认值：** 根据当前项目的目录结构计算出的入口对象。
+
+用于配置自定义的页面入口。
+
+:::tip 何时使用
+对于大部分场景，Modern.js 根据目录结构自动生成的入口已经可以满足需求，具体可参考[入口](/guides/concept/entries)。
+
+如果你需要自定义页面入口时，可以通过该选项进行设置。
+
+:::
 
 ## String 类型
 
-当值为 `string` 类型时，为入口的文件路径:
+当 `entries` 对象的 value 为 `string` 类型时，表示入口模块的文件路径:
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
@@ -22,13 +39,15 @@ export default defineConfig({
   source: {
     entries: {
       // 指定一个名称为 entry_customize 的新入口
-      entry_customize: './src/home/test/index.js',
+      entry_customize: './src/home/test/index.ts',
     },
+    // 禁用默认入口扫描
+    disableDefaultEntries: true,
   },
 });
 ```
 
-默认情况下，配置的入口等价于 `App.[jt]sx`，即指定的入口文件只需要导出应用的根组件。
+默认情况下，配置的入口等价于 `App.[jt]sx`，即指定的入口文件**只需要导出应用的根组件**。
 
 例如以下目录结构：
 
@@ -41,17 +60,19 @@ export default defineConfig({
 └── package.json
 ```
 
-结合上面默认入口机制的内容，Modern.js 在分析上述目录结构时，不会得到任何默认入口。
+上述目录不符合 Modern.js 的目录结构约定，因此，Modern.js 在分析目录结构时，不会得到任何默认入口。
 
 在不想改变目录结构的情况下（如项目迁移），可以通过 `source.entries` 自定义入口：
 
-```ts title="modern.config.js"
+```ts title="modern.config.ts"
 export default defineConfig({
   source: {
     entries: {
       home: './src/entry/home.tsx',
       chat: './src/entry/chat.tsx',
     },
+    // 禁用默认入口扫描
+    disableDefaultEntries: true,
   },
 });
 ```
@@ -61,7 +82,7 @@ export default defineConfig({
 当值为 `Object` 时，可配置如下属性：
 
 - `entry`：`string`，入口文件路径。
-- `disableMount`：`boolean = false`，关闭 Modern.js 生成入口代码的行为。
+- `disableMount`：`boolean = false`，关闭 Modern.js 自动生成入口代码的行为。
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
@@ -71,25 +92,65 @@ export default defineConfig({
     entries: {
       entry_customize: {
         // 入口文件路径
-        entry: './src/home/test/App.jsx',
+        entry: './src/home/test/index.tsx',
+      },
+    },
+    // 禁用默认入口扫描
+    disableDefaultEntries: true,
+  },
+});
+```
+
+### 禁用入口文件生成
+
+默认情况下，配置的入口等价于 `App.[jt]sx`，Modern.js 会自动生成一个入口文件来引用你配置的入口。
+
+如果你希望禁用 Modern.js 自动生成入口文件的逻辑，可以将 `disableMount` 属性设置为 `true`。
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  source: {
+    entries: {
+      entry_customize: {
+        entry: './src/home/test/index.tsx',
+        disableMount: true,
       },
+    },
+    // 禁用默认入口扫描
+    disableDefaultEntries: true,
+  },
+});
+```
+
+### 约定式路由
+
+如果你需要为某个自定义入口启用约定式路由，可以将 `entry` 设置为目录路径：
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  source: {
+    entries: {
       // 启用约定式路由
       entry_spa: {
         // 约定式路由的入口路径必须设置为目录
         entry: './src/about',
       },
     },
+    // 禁用默认入口扫描
+    disableDefaultEntries: true,
   },
 });
 ```
 
-默认情况下，配置的入口等价于 `App.[jt]sx`，如果希望该入口等价于构建模式下的入口，可以将属性 `disableMount` 设置为 `true`。
+## 入口合并规则
 
-## 自定义入口和默认入口合并
+在设置 `source.entries` 后，如果没有设置 `disableDefaultEntries: true`，Modern.js 会将自定义入口与分析目录结构得到的入口合并。
 
-在指定 `source.entries` 后，Modern.js 会将用户自定义的入口与分析目录结构得到的默认入口合并。合并规则为：
+合并规则为：
 
-比较自定义入口设置的入口路径和默认入口路径，当入口路径一致时，自定义入口会覆盖默认入口。
+- 比较自定义入口设置的入口路径和默认入口路径，当入口路径一致时，自定义入口会覆盖默认入口。
 
 例如以下目录结构:
 
@@ -97,13 +158,13 @@ export default defineConfig({
 .
 ├── src
 │   ├── chat
-│   │   └── App.jsx
+│   │   └── App.tsx
 │   └── home
-│       └── index.js
+│       └── index.ts
 └── package.json
 ```
 
-Modern.js 分析 `src/` 目录，得到默认入口 `chat` 和 `home`。当用户在 `modern.config.js` 文件中配置如下时：
+Modern.js 会分析 `src/` 目录，得到默认入口 `chat` 和 `home`。当用户在 `modern.config.ts` 文件中配置如下时：
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
@@ -111,7 +172,7 @@ import { defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   source: {
     entries: {
-      index: './src/home/index.js',
+      index: './src/home/index.ts',
     },
   },
 };
@@ -119,5 +180,5 @@ export default defineConfig({
 
 可以看到自定义入口 `index` 的路径和默认入口 `home` 的路径一致，在合并的过程中，`index` 会覆盖掉 `home`，最终入口如下：
 
-- `chat -> ./src/chat/App.jsx`
-- `index -> ./src/home/index.js`
+- `chat -> ./src/chat/App.tsx`
+- `index -> ./src/home/index.ts`

package/docs/zh/configure/app/source/plugin-import.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: pluginImport
+---
+
+# source.transformImport
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [source.transformImport](https://modernjs.dev/builder/api/config-source.html#sourcepluginimport)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/source/transformImport.md';
+
+<Main />

package/docs/zh/configure/app/source/transform-import.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: transformImport
+---
+
+# source.transformImport
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [source.transformImport](https://modernjs.dev/builder/api/config-source.html#sourcetransformimport)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/source/transformImport.md';
+
+<Main />

package/docs/zh/configure/app/tools/esbuild.mdx

@@ -1,21 +1,25 @@
 ---
-title: tools.esbuild
 sidebar_label: esbuild
 ---
-# esbuild
+
+# tools.esbuild
 
 - **类型：** `Object`
 - **默认值：** `undefined`
 
 ## 介绍
 
-:::tip esbuild 介绍
 [esbuild](https://esbuild.github.io/) 是一款基于 Golang 开发的前端构建工具，具有打包、编译和压缩 JavaScript 代码的功能，相比传统的打包编译工具，esbuild 在性能上有显著提升。在代码压缩方面，相比 webpack 内置的 terser 压缩器，esbuild 在性能上有数十倍的提升。
 
-:::
-
 Modern.js 提供了 esbuild 插件，让你能使用 esbuild 代替 babel-loader、ts-loader 和 terser 等库进行代码编译和压缩。在大型工程中开启后，**可以大幅度减少代码编译和压缩所需的时间，同时有效避免 OOM (heap out of memory) 问题**。
 
+:::tip 推荐使用 SWC
+相较于 esbuild，我们更推荐使用 SWC 来编译和压缩代码，因为 SWC 支持更多的语法特性、拥有更好的代码压缩率，并且产物具备更好的兼容性。
+
+因此，我们建议你使用 SWC 而不是 esbuild，用法请参考 [tools.swc](/configure/app/tools/swc)。
+
+:::
+
 ## 配置项
 
 你可以通过 `tools.esbuild` 配置项来设置 esbuild 编译行为。

package/docs/zh/configure/app/tools/jest.mdx

@@ -1,9 +1,8 @@
 ---
-title: tools.jest
-
 sidebar_label: jest
 ---
-# jest
+
+# tools.jest
 
 - **类型：** `Object | Function`
 - **默认值：** `{}`

package/docs/zh/configure/app/tools/swc.mdx

@@ -1,8 +1,8 @@
 ---
-title: tools.swc
 sidebar_label: swc
 ---
-# swc
+
+# tools.swc
 
 - **类型：** `Object`
 - **默认值：** `undefined`
@@ -13,6 +13,10 @@ sidebar_label: swc
 
 Modern.js 提供了开箱即用的 SWC 插件，可以为你的 Web 应用提供语法降级、Polyfill 以及压缩，并且移植了一些额外常见的 Babel 插件。
 
+:::tip
+在使用 Rspack 作为打包工具时，默认会使用 SWC 进行转译和压缩，因此你不需要再安装和配置 SWC 插件。
+:::
+
 ## 安装
 
 使用前需要安装 `@modern-js/plugin-swc` 插件。

package/docs/zh/guides/advanced-features/ssr.mdx

@@ -48,6 +48,7 @@ Modern.js 打破传统的 SSR 开发模式，提供了用户无感的 SSR 开发
 1. 当以客户端路由的方式请求页面时，Modern.js 会发送一个 HTTP 请求，服务端接收到请求后执行页面对应的 Data Loader 函数，然后将执行结果作为请求的响应返回浏览器。
 
 2. 使用 Data Loader 时，数据获取发生在渲染前，Modern.js 也仍然支持在组件渲染时获取数据。更多相关内容可以查看[数据获取](/guides/basic-features/data-fetch)。
+
 :::
 
 
@@ -147,10 +148,10 @@ SPR 利用预渲染与缓存技术，为 SSR 页面提供静态 Web 的响应性
 
 这里模拟一个使用 `useLoaderData` API 的组件，Data Loader 中的请求需要消耗 2s 时间。
 
-```jsx
+```tsx title="page.loader.ts"
 import { useLoaderData } from '@modern-js/runtime/router';
 
-export const loader = async () => {
+export default async () => {
   await new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve(null);
@@ -161,7 +162,9 @@ export const loader = async () => {
     message: 'Hello Modern.js',
   };
 };
+```
 
+```tsx title="page.tsx"
 export default () => {
   const data = useLoaderData();
   return <div>{data?.message}</div>;
@@ -413,11 +416,11 @@ export default Page;
 从 Data Loader 文件导入类型时，需要使用 import type 语法，保证只导入类型信息，这样可以避免 Data Loader 的代码打包到前端产物的 bundle 文件中。
 
 所以，这里的导入方式为：`import type { Data } from './page.loader'`;
+
 :::
 
 也可以通过 `useAsyncValue` 获取 Data Loader 返回的异步数据。例如：
 
-
 ```tsx title='page.tsx'
 import { useAsyncValue } from '@modern-js/runtime/router';
 

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

@@ -48,15 +48,18 @@ Modern.js 提供的 Hook 用于控制 Web Server 中的内置逻辑，所有的
 目前提供了两种 Hook，分别是 `AfterMatch` 和 `AfterRender`，可以用于修改渲染结果。可以在 `server/index.ts` 中这样写：
 
 ```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();
-}
+};
 ```
 
 项目在使用 Hook 时，应该有以下最佳实践：
@@ -78,8 +81,10 @@ Modern.js 默认提供了一套 API 供项目使用：
 ```ts
 import { Middlewre } from '@modern-js/runtime/server';
 
-export const middleware = (context, next) => {
-  const { source: { req, res } } = context;
+export const middleware: Middlewre = (context, next) => {
+  const {
+    source: { req, res },
+  } = context;
   console.log(req.url);
   next();
 };

package/docs/zh/guides/concept/entries.mdx

@@ -2,50 +2,52 @@
 sidebar_position: 1
 ---
 
-# 入口
+# 入口（Entry）
 
-入口是 Modern.js 默认的文件约定，项目的每一个入口是一张独立的页面，对应一条**服务端路由**。
+通过本章节，你可以了解到 Modern.js 中的入口约定，以及如何自定义入口。
 
-很多配置，如 HTML 模板、Meta 信息、是否开启 SSR、SSG、服务端路由规则都是以入口为维度划分的。
+## 什么是入口（Entry）
+
+**入口指的是一个页面的起始模块。**
+
+在 Modern.js 项目中，每一个入口对应一个独立的页面，也对应一条服务端路由。默认情况下，Modern.js 会基于目录约定来自动确定页面的入口，同时也支持通过配置项来自定义入口。
+
+Modern.js 提供的很多配置项都是以入口为维度进行划分的，比如页面标题、HTML 模板、页面 Meta 信息、是否开启 SSR/SSG、服务端路由规则等。
 
 ## 单入口与多入口
 
-Modern.js 初始化的项目是单入口的，项目结构如下：
+Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
 
 ```
 .
 ├── src
-│   ├── modern-app-env.d.ts
 │   └── routes
 │       ├── index.css
 │       ├── layout.tsx
 │       └── page.tsx
 ├── package.json
 ├── modern.config.ts
-├── pnpm-lock.yaml
-├── README.md
 └── tsconfig.json
 ```
 
-Modern.js 可以很方便的将单入口切换成多入口。可以在项目下执行 `pnpm run new`，通过生成器创建入口：
+在 Modern.js 项目中，你可以很方便的将单入口切换成多入口，直接在项目下执行 `pnpm run new`，通过生成器创建入口即可：
 
 ```bash
-? 请选择你想要的操作 创建工程元素
-? 创建工程元素 新建「应用入口」
-? 请填写入口名称 new-entry
+? 请选择你想要的操作：创建工程元素
+? 创建工程元素：新建「应用入口」
+? 请填写入口名称：new-entry
 ```
 
-执行后，`src/` 目录将会变成如下结构：
+执行后，Modern.js 会自动生成一个新的入口目录，此时可以看到 `src/` 目录变成如下结构：
 
-```
+```bash
 .
-├── modern-app-env.d.ts
-├── myapp
+├── myapp    # 原入口
 │   └── routes
 │       ├── index.css
 │       ├── layout.tsx
 │       └── page.tsx
-└── new-entry
+└── new-entry # 新入口
     └── routes
         ├── index.css
         ├── layout.tsx
@@ -54,10 +56,12 @@ Modern.js 可以很方便的将单入口切换成多入口。可以在项目下
 
 原本的代码被移动到了和 `package.json` 中 `name` 同名的目录下，并创建了新的目录。
 
-执行 `pnpm run dev` 后，可以看到新增一条 `/new-entry` 的路由，并且被迁移的代码路由并未发生变化。
+执行 `pnpm run dev` 后，可以看到新增了一条名为 `/new-entry` 的路由，并且被迁移的代码路由并未发生变化。
+
+:::tip
+Modern.js 会将与 package.json 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。
 
-:::note
-Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入口，默认路由为 `/`，其他入口默认路由为 `/{entryName}`。
+比如，package.json 中的 `name` 为 `myapp` 时，`src/myapp` 会作为项目的主入口。
 
 :::
 
@@ -82,7 +86,7 @@ Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入
 当 `src/` 目录满足入口特征时，Modern.js 会认为当前项目为单入口应用。
 
 :::tip
-单入口默认的入口名为 `main`。
+在单入口应用中，默认的入口名为 `main`。
 
 :::
 
@@ -168,35 +172,32 @@ ReactDOM.render(<App />, document.getElementById('root'));
 
 Modern.js **不推荐**使用这种方式，这种方式丧失了框架的一些能力，如 **`modern.config.js` 文件中的 `runtime` 配置将不会再生效**。但是在项目从其他框架迁移到 Modern.js，例如 CRA，或是自己手动搭建的 webpack 时，这种方式会非常有用。
 
-## 使用配置文件定义入口
+## 自定义入口
 
-有些时候，已有的项目并不是按照 Modern.js 的目录结构来搭建的。如果强行要按照这种结构来工作，会有比较大的迁移成本。
+大部分存量项目并不是按照 Modern.js 的目录结构来搭建的。如果要改成 Modern.js 约定的目录结构，会存在一定的迁移成本。
 
-在 Modern.js 中，除了使用文件约定生成入口外，还可以在 `modern.config.[jt]s` 中手动配置入口。
+在这种情况下，除了使用文件约定生成入口外，你可以在 `modern.config.[jt]s` 中手动配置入口。
 
-```ts
+```ts title="modern.config.ts"
 export default defineConfig({
   source: {
     entries: {
       // 指定一个名称为 entry_customize 的新入口
-      entry_customize: './src/home/test/index.js',
+      entry_customize: './src/home/test/index.ts',
     },
+    // 禁用默认入口扫描
+    disableDefaultEntries: true,
   },
 });
 ```
 
-:::tip
-详情可以查看 [source.entries](/configure/app/source/entries)。
-
-:::
-
-## 禁用默认入口扫描
+### 禁用默认入口扫描
 
-另外，项目的部分结构可能恰巧命中了 Modern.js 的约定，但实际上这部分并不是真实的入口。
+当使用自定义入口时，项目的部分结构可能恰巧命中了 Modern.js 的目录约定，但实际上这部分目录并不是真实的入口。
 
-Modern.js 提供了配置，来禁用默认的入口扫描。与配置的入口结合使用，大部分项目可以在不修改目录结构的情况下，快速的进行迁移。
+Modern.js 提供了 `disableDefaultEntries` 配置，来禁用默认的入口扫描规则。当你需要自定义入口时，一般需要将 `disableDefaultEntries` 与 `entries` 结合使用。这样，一些存量项目可以在不修改目录结构的情况下，快速地进行迁移。
 
-```ts
+```ts title="modern.config.ts"
 export default defineConfig({
   source: {
     disableDefaultEntries: true,
@@ -205,6 +206,6 @@ export default defineConfig({
 ```
 
 :::tip
-详情可以查看 [source.disableDefaultEntries](/configure/app/source/disable-default-entries)。
+详细用法请查看 [source.entries](/configure/app/source/entries) 和 [source.disableDefaultEntries](/configure/app/source/disable-default-entries)。
 
 :::

package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -191,8 +191,8 @@ foo
 
 - 功能：在退出进程前，重置一些文件状态
 - 执行阶段：进程退出之前
-- Hook 模型：AsyncWorkflow
-- 类型：`AsyncWorkflow<void, void>`
+- Hook 模型：Workflow
+- 类型：`Workflow<void, void>`
 - 使用示例：
 
 ```ts
@@ -209,6 +209,10 @@ export default (): CliPlugin => ({
 });
 ```
 
+:::tip
+由于 Node.js 中退出进程时的回调函数是同步的，所以 `beforeExit` Hook 的类型是 `Workflow`，不能执行异步操作。
+:::
+
 ### `beforeDev`
 
 - 功能：运行 dev 主流程的之前的任务

package/docs/zh/tutorials/first-app/c06-model.mdx

@@ -195,18 +195,10 @@ const Item = ({
 export default Item;
 ```
 
-接下来，我们修改 `src/routes/page.tsx`，为 `<Item>` 组件传递更多参数：
+接下来，我们修改 `src/routes/page.tsx` 和 `src/routes/page.loader.ts`，为 `<Item>` 组件传递更多参数：
 
-```tsx
-import { Helmet } from '@modern-js/runtime/head';
-import { useModel } from '@modern-js/runtime/model';
-import { useLoaderData } from '@modern-js/runtime/router';
-import { List } from 'antd';
-import { name, internet } from 'faker';
-import Item from '../components/Item';
-import contacts from '../models/contacts';
-
-type LoaderData = {
+```ts title="src/routes/page.loader.ts"
+export type LoaderData = {
   code: number;
   data: {
     name: string;
@@ -215,7 +207,7 @@ type LoaderData = {
   }[];
 };
 
-export const loader = async (): Promise<LoaderData> => {
+export default async (): Promise<LoaderData> => {
   const data = new Array(20).fill(0).map(() => {
     const firstName = name.firstName();
     return {
@@ -231,6 +223,16 @@ export const loader = async (): Promise<LoaderData> => {
     data,
   };
 };
+```
+
+```tsx title="src/routes/page.tsx"
+import { Helmet } from '@modern-js/runtime/head';
+import { useModel } from '@modern-js/runtime/model';
+import { useLoaderData } from '@modern-js/runtime/router';
+import { List } from 'antd';
+import { name, internet } from 'faker';
+import Item from '../components/Item';
+import contacts from '../models/contacts';
 
 function Index() {
   const { data } = useLoaderData() as LoaderData;

package/docs/zh/tutorials/first-app/c07-container.mdx

@@ -15,24 +15,8 @@ import { Tabs, Tab as TabItem } from "@theme";
 
 Modern.js 支持在 `layout.tsx` 通过 Data Loader 获取数据，我们先数据获取这部分代码移动到 `src/routes/layout.tsx` 中：
 
-```tsx
-import { name, internet } from 'faker';
-import {
-  Outlet,
-  useLoaderData,
-  useLocation,
-  useNavigate,
-} from '@modern-js/runtime/router';
-import { useState } from 'react';
-import { Radio, RadioChangeEvent } from 'antd';
-import { useModel } from '@modern-js/runtime/model';
-import contacts from '../models/contacts';
-import 'tailwindcss/base.css';
-import 'tailwindcss/components.css';
-import 'tailwindcss/utilities.css';
-import '../styles/utils.css';
-
-type LoaderData = {
+```ts title="src/routes/layout.loader.ts"
+export type LoaderData = {
   code: number;
   data: {
     name: string;
@@ -41,7 +25,7 @@ type LoaderData = {
   }[];
 };
 
-export const loader = async (): Promise<LoaderData> => {
+export default async (): Promise<LoaderData> => {
   const data = new Array(20).fill(0).map(() => {
     const firstName = name.firstName();
     return {
@@ -56,6 +40,25 @@ export const loader = async (): Promise<LoaderData> => {
     data,
   };
 };
+```
+
+```tsx title="src/routes/layout.tsx"
+import { name, internet } from 'faker';
+import {
+  Outlet,
+  useLoaderData,
+  useLocation,
+  useNavigate,
+} from '@modern-js/runtime/router';
+import { useState } from 'react';
+import { Radio, RadioChangeEvent } from 'antd';
+import { useModel } from '@modern-js/runtime/model';
+import contacts from '../models/contacts';
+import 'tailwindcss/base.css';
+import 'tailwindcss/components.css';
+import 'tailwindcss/utilities.css';
+import '../styles/utils.css';
+import type { LoaderData } from './layout.loader';
 
 export default function Layout() {
   const { data } = useLoaderData() as LoaderData;

package/modern.config.ts

@@ -152,5 +152,5 @@ export default defineConfig({
       }),
     ],
   },
-  plugins: [docTools()],
+  plugins: [docTools({})],
 });