@modern-js/main-doc 2.67.5 → 2.67.7

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

@@ -166,7 +166,7 @@ const getComplexStatistics = cache(
   }
 );
 
-revalidateTag('dashboard-stats'); // Invalidates the cache for both getDashboardStats and getComplexStatistics functions
+revalidateTag('dashboard'); // Invalidates the cache for both getDashboardStats and getComplexStatistics functions
 ```
 
 

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

@@ -285,6 +285,7 @@ Add the following script to `packages/app/package.json` to run `build` command o
 ```
 
 Add the following content to the `packages/app/vercel.json` file:
+
 ```json title="vercel.json"
 {
   "buildCommand": "npm run deploy",
@@ -298,7 +299,7 @@ Just submit your code and deploy it using the Vercel platform.
 
 If you're creating a GitHub Pages for a repository without a custom domain, the page URL will follow this format: `http://<username>.github.io/<repository-name>`. Therefore, you need to add the following configuration in `modern.config.ts`:
 
-```
+```ts
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
@@ -331,7 +332,6 @@ For branch deployment, follow these steps:
 :::info
 1. Running `MODERNJS_DEPLOY=ghPages modern deploy` will build the production output for GitHub in the .output directory.
 2. You can refer to the [project](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)
-
 :::
 
 For GitHub Actions deployment, select Settings > Pages > Source > GitHub Actions, and add a workflow file to the project. You can refer to the [example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr).
@@ -407,7 +407,7 @@ Nginx is a high-performance HTTP and reverse proxy server that can handle static
 
 If your project is a purely front-end project, you can also deploy the application through Nginx. Here is an example of an Nginx configuration to demonstrate how to host the output of a purely front-end project.
 
-```conf title="nginx.conf"
+```nginx title="nginx.conf"
 # user [user] [group];
 worker_processes 1;
 

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

@@ -96,34 +96,6 @@ dist
     └── qux.[hash].mp4
 ```
 
-## Node.js Output Directory
-
-When you enable SSR or SSG features in Modern.js, Modern.js will generate a Node.js bundle after the build and output it to the `bundles` directory.
-
-```bash
-dist
-├── bundles
-│   └── [name].js
-├── static
-└── html
-```
-
-Node.js files usually only contain JS files, no HTML or CSS. Also, JS file names will not contain hash.
-
-You can modify the output path of Node.js files through the [output.distPath.server](/configure/app/output/dist-path) config.
-
-For example, output Node.js files to the `server` directory:
-
-```ts
-export default {
-  output: {
-    distPath: {
-      server: 'server',
-    },
-  },
-};
-```
-
 ## Flatten the Directory
 
 Sometimes you don't want the dist directory to have too many levels, you can set the directory to an empty string to flatten the generated directory.

package/docs/en/guides/basic-features/render/ssr.mdx

@@ -217,7 +217,7 @@ document.addEventListener('load', () => {
 export const doSomething = () => {}
 ```
 
-Directly referencing this in a component will cause CSR to throw errors, even if you use environment variables to conditionally load the code. The side effects in the dependency will still execute.
+Directly referencing this in a component will cause SSR to throw errors, even if you use environment variables to conditionally load the code. The side effects in the dependency will still execute.
 
 ```tsx title="routes/page.tsx"
 import { doSomething } from 'packageA';

package/docs/en/guides/basic-features/render/streaming-ssr.mdx

@@ -68,7 +68,7 @@ Here, `user` is a Promise object representing asynchronously fetched data, proce
 Additionally, `defer` can receive both asynchronous and synchronous data. In the example below, short-duration requests are returned using object data, while longer-duration requests are returned using a Promise:
 
 ```ts title="user/[id]/page.data.ts"
-export const loader = ({ params }: LoaderFunctionArgs) => {
+export const loader = async ({ params }: LoaderFunctionArgs) => {
   const userId = params.id;
 
   const user = new Promise<User>(resolve => {
@@ -227,4 +227,4 @@ import StreamSSRPerformance from '@site-docs-en/components/stream-ssr-performanc
 ## Related Documentation
 
 1. [Deferred Data](https://reactrouter.com/en/main/guides/deferred)
-2. [New Suspense SSR Architecture in React 18](https://github.com/reactwg/react-18/discussions/37)
+2. [New Suspense SSR Architecture in React 18](https://github.com/reactwg/react-18/discussions/37)

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

@@ -490,6 +490,76 @@ import Motivation from '@site-docs-en/components/convention-routing-motivation';
 
 <Motivation />
 
+## Upgrading to React Router v7
+
+React Router v7 reduces bundle size (approximately 15% smaller) compared to React Router v6, provides a more efficient route matching algorithm, and offers better support for React 19 and TypeScript. There are very few breaking changes compared to React Router v6, and Modern.js has made both versions compatible, allowing for a seamless upgrade by simply installing and registering the appropriate plugin.
+
+:::info
+
+For more changes from React Router v6 to React Router v7, check the [documentation](https://reactrouter.com/upgrading/v6#upgrade-to-v7)
+
+:::
+
+### Requirements
+
+React Router v7 has certain environment requirements:
+
+- Node.js 20+
+- React 18+
+- React DOM 18+
+
+### Install the Plugin
+
+First, install the Modern.js React Router v7 plugin:
+
+```bash
+pnpm add @modern-js/plugin-router-v7
+```
+
+### Configure the Plugin
+
+Register the plugin in `modern.config.ts`:
+
+```ts title="modern.config.ts"
+import { routerPlugin } from '@modern-js/plugin-router-v7';
+
+export default {
+  runtime: {
+    router: true,
+  },
+  plugins: [routerPlugin()],
+};
+```
+
+### Code Changes
+
+In React Router v7, you no longer need to use the `defer` API; you can directly return data in the data loader:
+
+```ts title="routes/page.data.ts"
+import { defer } from '@modern-js/runtime/router';
+
+export const loader = async ({ params }) => {
+  // Recommended v7 style
+  const user = fetchUser(params.id)
+  return { user };
+
+  // v6 style, still compatible with Modern.js
+  return defer({ data: 'hello' });
+};
+```
+
+React Router v7 has also deprecated the `json` API:
+
+```ts title="routes/page.data.ts"
+export const loader = async ({ params }) => {
+  // Recommended v7 style
+  return { data: 'hello' };
+
+  // v6 style, still compatible with Modern.js
+  return json({ data: 'hello' });
+};
+```
+
 ## FAQ
 
 1. Why there is `@modern-js/runtime/router` to re-export React Router API
@@ -535,3 +605,5 @@ export const init = () => {
   // initialization logic
 };
 ```
+
+

package/docs/en/guides/basic-features/static-assets/wasm-assets.mdx

@@ -12,7 +12,7 @@ WebAssembly (Wasm) is a portable, high-performance binary format designed to exe
 
 ## Import
 
-You can import a WebAssembly module directly in a JavaScript file:
+You can import a WebAssembly module via named import in a JavaScript file:
 
 ```js title="index.js"
 import { add } from './add.wasm';

package/docs/en/guides/topic-detail/module-federation/deploy.mdx

@@ -1,8 +1,17 @@
 # Deployment
 
-Typically, deploying a Module Federation application requires adjusting the remote module address on the consumer side to its online address.
+In general, when deploying a Module Federation application, there are two key points to consider:
 
-For example, if the producer is deployed to the domain `https://my-remote-module`, you can modify the consumer's `module-federation.config.ts` file as follows:
+1. Ensure that the remote module addresses in the consumer's configuration file are correct, and that the consumer can correctly access the producer's `manifest` file.
+2. Ensure that all resources in the producer's `manifest` file can be accessed correctly.
+
+We recommend using Modern.js's [Node Server](/guides/basic-features/deploy.html#using-modernjs-built-in-nodejs-server) to deploy Module Federation applications for an out-of-the-box experience.
+
+## Consumer
+
+For the consumer of Module Federation, its connection with the producer is the remote module address in the configuration file.
+
+For example, if the producer is deployed under the domain `https://my-remote-module`, the developer needs to modify the consumer's configuration file:
 
 ```ts title="module-federation.config.ts"
 import { createModuleFederationConfig } from '@module-federation/modern-js';
@@ -10,7 +19,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 export default createModuleFederationConfig({
   name: 'host',
   remotes: {
-    remote: 'remote@http://my-remote-module/mf-manifest.json',
+    remote: 'remote@https://my-remote-module/static/mf-manifest.json',
   },
   shared: {
     react: { singleton: true },
@@ -19,10 +28,77 @@ export default createModuleFederationConfig({
 });
 ```
 
-At this point, the consumer will load the `manifest` configuration file of the `remote` module in the production environment.
+At this point, the consumer will load the `manifest` configuration file of the remote module production environment.
+
+:::note
+In the above code, the address of the remote module is `/static/mf-manifest.json`, which is just an example using the default output path of Modern.js. In actual projects, developers need to configure according to the actual access path.
+:::
+
+## Producer
+
+For the producer of Module Federation, developers need to correctly configure the [`output.assetPrefix`](/configure/app/output/asset-prefix) configuration, which affects:
+
+1. The `publicPath` defined in `mf-manifest.json`, which determines the access path of other resources of the remote module.
+2. The access path of the `mf-manifest.json` file when hosted directly by the Modern.js server.
+
+In the production environment, developers need to configure `output.assetPrefix` as the access path of the production environment. For example, if we deploy the producer under the domain `https://my-remote-module`, we need to configure `output.assetPrefix` as `https://my-remote-module`.
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  output: {
+    assetPrefix: 'https://my-remote-module',
+  },
+});
+```
+
+At this point, the `publicPath` defined in the producer's build output `mf-manifest.json` is `https://my-remote-module`, for example:
+
+```json
+{
+  "id": "remote",
+  "name": "remote",
+  "metaData": {
+    "name": "remote",
+    "publicPath": "https://my-remote-module/"
+  },
+  "shared": [ /* xxx */ ],
+  "remotes": [],
+  "exposes": [ /* xxx */ ]
+}
+```
+
+When the consumer accesses the remote module, it will automatically prepend the `publicPath` to the resource path of the remote module.
+
+This configuration will also affect the access path of the producer's `mf-manifest.json`. For example, if this value is set to `MyDomain/module-a`, the hosting path of `mf-manifest.json` becomes `MyDomain/module-a/static/mf-manifest.json`.
+
+At this point, the consumer needs to configure the following address when configuring the remote module:
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'host',
+  remotes: {
+    remote: 'remote@MyDomain/module-a/static/mf-manifest.json',
+  },
+});
+```
+
+## Local Deployment Verification
 
-## Deployment via Platform
+Modern.js provides the `modern deploy` command, which can easily generate products that can run in a Node.js environment.
 
-The above deployment method is merely the simplest practice. In real-world scenarios, there are many constraints, such as version management, release sequencing, and more. Within ByteDance, we have set up a deployment process for Module Federation applications on our deployment platform, which helps developers address these issues.
+```bash
+modern deploy
+```
+
+After executing the command, you can see the following output in the console:
+
+```bash
+Static directory: .output/static
+You can preview this build by node .output/index
+```
 
-We will continue to keep an eye on platforms with similar functionalities in the community and, in the future, enhance the documentation for deploying Modern.js + Module Federation on these types of platforms.
+At this point, the developer only needs to run `node .output/index` to preview the effect locally. Whether it is a CSR or an SSR application, all Module Federation files can be accessed correctly.

package/docs/en/guides/topic-detail/module-federation/usage.mdx

@@ -190,8 +190,6 @@ If we want to simulate the production environment in local, but not configure `o
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { moduleFederationPlugin } from '@module-federation/modern-js';
 
-const isLocal = process.env.IS_LOCAL === 'true';
-
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
   server: {
@@ -204,7 +202,7 @@ export default defineConfig({
     // Now this configuration is only used in the local when you run modern serve command.
     // If you want to deploy the application to the platform, use your own domain name.
     // Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
-    assetPrefix: isLocal ? 'http://127.0.0.1:3051' : '/',
+    assetPrefix: 'http://127.0.0.1:3051',
   },
   plugins: [
     appTools({
@@ -215,7 +213,7 @@ export default defineConfig({
 });
 ```
 
-Now, in the producer, run `IS_LOCAL=true modern build && modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
+Now, in the producer, run `modern build && modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
 
 You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base).
 

package/docs/en/plugin/cli-plugins/api.mdx

@@ -324,7 +324,7 @@ Modify the server routing configuration.
 ```typescript
 api.modifyServerRoutes(routes => {
   // Add a new API route
-  routes.concat({
+  routes.push({
     urlPath: '/api',
     isApi: true,
     entryPath: '',

package/docs/en/tutorials/first-app/c04-routes.mdx

@@ -118,10 +118,11 @@ import { Radio } from 'antd';
 
 Then modify the top of the UI to add a set of radio group:
 
-```tsx {4-9}
+```tsx
 export default function Layout() {
   return (
     <div>
+      // [!code highlight:6]
       <div className="h-16 p-2 flex items-center justify-center">
         <Radio.Group onChange={handleSetList} value={currentList}>
           <Radio value="/">All</Radio>
@@ -146,8 +147,9 @@ import { Outlet, useLocation, useNavigate } from '@modern-js/runtime/router';
 
 Finally, add local state and related logic to the Layout component:
 
-```tsx {2-9}
+```tsx
 export default function Layout() {
+  // [!code highlight:8]
   const navigate = useNavigate();
   const location = useLocation();
   const [currentList, setList] = useState(location.pathname || '/');

package/docs/en/tutorials/first-app/c05-loader.mdx

@@ -56,11 +56,13 @@ Data Loader doesn't just work for SSR. In CSR projects, Data Loader can also avo
 
 Modern.js also provides a hooks API called `useLoaderData`, we modify the exported component of `src/routes/page.tsx`:
 
-```tsx {1,2,5,13}
+```tsx
+// [!code highlight:2]
 import { useLoaderData } from '@modern-js/runtime/router';
 import type { LoaderData } from './page.data';
 
 function Index() {
+  // [!code highlight:1]
   const { data } = useLoaderData() as LoaderData;
 
   return (
@@ -68,6 +70,7 @@ function Index() {
       <Helmet>
         <title>All</title>
       </Helmet>
+      // [!code highlight:1]
       <List
         dataSource={data}
         renderItem={info => <Item key={info.name} info={info} />}

package/docs/zh/apis/app/hooks/server/server.mdx

@@ -0,0 +1,10 @@
+---
+title: modern.server.[tj]s
+sidebar_position: 1
+---
+
+# modern.server.[tj]s
+
+扩展 Modern.js Server 的文件，在此文件中可以给 Modern.js 工程启动的 Server 配置 [Middleware](/guides/advanced-features/web-server.html#middleware) 、 [RenderMiddleware](/guides/advanced-features/web-server.html#rendermiddleware) 或 [Plugin](/guides/advanced-features/web-server.html#plugin)。
+
+可以对请求和响应进行拦截处理，鉴权与角色、请求预处理、异常兜底等。也可在内置处理逻辑（包括路由匹配、资源寻址、头部注入、页面渲染，静态 Web 托管）插入特定的业务逻辑。

package/docs/zh/apis/app/hooks/src/routes.mdx

@@ -10,11 +10,11 @@ sidebar_position: 2
 
 任何在 `src/routes` 下的 `layout.[tj]sx` 和 `page.[tj]sx` 都会作为应用的路由：
 
-```bash {3,4}
+```bash
 .
 └── routes
-    ├── layout.tsx
-    ├── page.tsx
+    ├── layout.tsx  # [!code highlight]
+    ├── page.tsx # [!code highlight]
     └── user
         ├── layout.tsx
         └── page.tsx

package/docs/zh/apis/app/runtime/bff/use-hono-context.mdx

@@ -0,0 +1,31 @@
+---
+title: useHonoContext
+---
+# useHonoContext
+
+用于在一体化 BFF 函数中获取 Hono 上下文。
+
+
+## 使用姿势
+
+```ts
+import { useHonoContext } from '@modern-js/plugin-bff/hono';
+```
+
+## 函数签名
+
+`function useHonoContext(): Context`
+
+## 示例
+
+开发者可以通过 `context` 获取更多的请求信息，例如设置响应头：
+
+```ts
+import { useHonoContext } from '@modern-js/plugin-bff/hono';
+
+export async function get() {
+  const c = useHonoContext();
+  c.res.headers.set('x-bff-api', 'true');
+  // ...
+}
+```

package/docs/zh/components/enable-bff.mdx

@@ -9,40 +9,15 @@ import { PackageManagerTabs } from '@theme';
 ```bash
 ? 请选择你想要的操作 启用可选功能
 ? 请选择功能名称 启用「BFF」功能
-? 请选择 BFF 类型 框架模式
 ```
 
-:::note
-目前推荐使用框架模式创建 BFF，后续我们将会移除 BFF 类型的概念。
-:::
+3. 将下面的代码添加到 `modern.config.[tj]s` 中：
 
-3. 根据选择的运行时框架，将下面的代码添加到 `modern.config.[tj]s` 中：
-
-import { Tabs, Tab as TabItem } from "@theme";
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
 
 ```ts title="modern.config.ts"
-import { expressPlugin } from '@modern-js/plugin-express';
 import { bffPlugin } from '@modern-js/plugin-bff';
 
 export default defineConfig({
-  plugins: [expressPlugin(), bffPlugin()],
+  plugins: [bffPlugin()],
 });
 ```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
-```ts title="modern.config.ts"
-import { koaPlugin } from '@modern-js/plugin-koa';
-import { bffPlugin } from '@modern-js/plugin-bff';
-
-export default defineConfig({
-  plugins: [koaPlugin(), bffPlugin()],
-});
-```
-
-  </TabItem>
-</Tabs>

package/docs/zh/components/rsbuild-config-tooltip.mdx

@@ -1,5 +1,5 @@
-import RsbuildLInk from '@site/src/components/RsbuildLink';
+import RsbuildLink from '@site/src/components/RsbuildLink';
 
 :::info
-该配置项的使用方式与 Rsbuild 完全一致。详细信息请参考 <RsbuildLInk configName={frontmatter.configName}/>。
+该配置项的使用方式与 Rsbuild 完全一致。详细信息请参考 <RsbuildLink configName={props.configName}/>。
 :::

package/docs/zh/components/tech-stack-node-framework.mdx

@@ -1 +1 @@
-Modern.js 支持 [Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/) 作为可选的 BFF 运行时框架，请参考[「BFF - 运行时框架」](/guides/advanced-features/bff/frameworks.html)。
+Modern.js Server 和 BFF 是以 [Hono.js](https://hono.dev/) 作为运行时框架，可以基于 Hono.js 生态扩展 Server，请参考 [自定义 Web Server](/guides/advanced-features/web-server.html)。

package/docs/zh/configure/app/dev/asset-prefix.mdx

@@ -1,6 +1,5 @@
 ---
 title: assetPrefix
-configName: dev.assetPrefix
 ---
 
 # dev.assetPrefix
@@ -10,9 +9,9 @@ configName: dev.assetPrefix
 
 此配置项用于设置 **开发模式** 下的静态资源 URL 前缀。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.assetPrefix" />
 
 :::warning
 请注意，该配置项仅适用于开发模式。在生产模式下，请使用 [output.assetPrefix](/configure/app/output/asset-prefix) 配置项进行设置。

package/docs/zh/configure/app/dev/client.mdx

@@ -1,6 +1,5 @@
 ---
 title: client
-configName: dev.client
 ---
 
 # dev.client
@@ -41,6 +40,6 @@ const defaultConfig = {
 
 配置 Modern.js 在开发过程中注入的 client 代码，可以用于设置热更新对应的 WebSocket URL。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.client" />

package/docs/zh/configure/app/dev/hmr.mdx

@@ -1,6 +1,5 @@
 ---
 title: hmr
-configName: dev.hmr
 ---
 
 # dev.hmr
@@ -10,6 +9,6 @@ configName: dev.hmr
 
 是否开启 Hot Module Replacement 热更新能力。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.hmr" />

package/docs/zh/configure/app/dev/live-reload.mdx

@@ -1,6 +1,5 @@
 ---
 title: liveReload
-configName: dev.liveReload
 ---
 
 # dev.liveReload
@@ -10,6 +9,6 @@ configName: dev.liveReload
 
 是否在源文件变更时自动刷新页面。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.liveReload" />

package/docs/zh/configure/app/dev/progress-bar.mdx

@@ -1,6 +1,5 @@
 ---
 title: progressBar
-configName: dev.progressBar
 ---
 
 # dev.progressBar
@@ -19,6 +18,6 @@ type ProgressBar =
 
 是否在编译过程中展示进度条。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.progressBar" />

package/docs/zh/configure/app/dev/setup-middlewares.mdx

@@ -1,6 +1,5 @@
 ---
 title: setupMiddlewares
-configName: dev.setupMiddlewares
 ---
 
 # dev.setupMiddlewares
@@ -51,6 +50,6 @@ type SetupMiddlewares = Array<
 
 提供执行自定义函数和应用自定义中间件的能力。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.setupMiddlewares" />

package/docs/zh/configure/app/dev/watch-files.mdx

@@ -1,6 +1,5 @@
 ---
 title: watchFiles
-configName: dev.watchFiles
 ---
 
 # dev.watchFiles
@@ -27,6 +26,6 @@ type WatchFilesConfig = WatchFiles | WatchFiles[];
 
 监听指定文件和目录的变化。当文件发生变化时，可以触发页面的重新加载，或者触发 dev server 重新启动。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.watchFiles" />

package/docs/zh/configure/app/dev/write-to-disk.mdx

@@ -1,6 +1,5 @@
 ---
 title: writeToDisk
-configName: dev.writeToDisk
 ---
 
 # dev.writeToDisk
@@ -10,6 +9,6 @@ configName: dev.writeToDisk
 
 用于控制是否将开发环境的构建产物写入到磁盘上。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="dev.writeToDisk" />