@modern-js/main-doc 3.9.2 → 3.10.0

package/docs/zh/guides/basic-features/debug/using-storybook.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 15
 ---
 
-import { PackageManagerTabs } from '@theme'
+import { PackageManagerTabs } from '@theme';
 
 # 使用 Storybook
 
@@ -33,14 +33,14 @@ Modern.js 基于此工具实现了 `storybook-addon-modernjs`，该插件会加
 ## 配置 `.storybook/main.ts`
 
 ```ts
-import type { StorybookConfig } from 'storybook-react-rsbuild'
+import type { StorybookConfig } from 'storybook-react-rsbuild';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['storybook-addon-modernjs'],
   framework: 'storybook-react-rsbuild',
-}
-export default config
+};
+export default config;
 ```
 
 ## Storybook 中进行 BFF 一体化调用
@@ -55,7 +55,7 @@ export default config
 {
   "scripts": {
     "dev:api": "modern dev --api-only",
-    "storybook": "BFF_PROXY=1 storybook dev -p 6006 --no-open",
+    "storybook": "BFF_PROXY=1 storybook dev -p 6006 --no-open"
   }
 }
 ```

package/docs/zh/guides/basic-features/env-vars.mdx

@@ -72,7 +72,6 @@ function App() {
 
 :::
 
-
 ## 自定义环境变量
 
 环境变量支持通过 `shell` 和 `.env` 文件两种方式指定。

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

@@ -20,9 +20,8 @@ Modern.js 约定，在 `src/` 或入口目录下，可以创建 `Document.tsx`
     ├── entry-a
     │   ├── Document.tsx
     │   └── routes
-    ├── entry-b
-    │    └── routes
-    └── modern-app-env.d.ts
+    └── entry-b
+         └── routes
 ```
 
 `entry-a` 会优先使用当前入口下的 `Document.tsx` 文件。如果当前入口没有 `Document.tsx` 文件，例如 `entry-b`，则会查找根目录下的 `Document.tsx` 文件。

package/docs/zh/guides/basic-features/render/overview.mdx

@@ -8,21 +8,21 @@ Modern.js 支持多种渲染模式，不同的渲染模式适用于不同的场
 
 ## 渲染模式速览
 
-| 渲染模式 | 特点 | 适用场景 |
-|---------|------|---------|
-| **CSR** | 在浏览器端执行 JavaScript 渲染页面 | 交互性强、对 SEO 要求不高的应用 |
-| **SSR** | 在服务端预先渲染完整 HTML 页面 | 对首屏性能和 SEO 要求高的网站 |
-| **Streaming SSR** | 边渲染边返回，更快显示初始 UI | 需要更快首屏感知速度的应用（**SSR 默认模式**） |
-| **RSC** | 组件在服务端渲染，减少客户端 JS 体积；数据与组件逻辑高内聚，减少状态传递 | 追求极致性能、需要减少客户端代码的项目 |
-| **SSG** | 构建时生成静态页面，可被 CDN 缓存 | 内容相对静态的网站，如博客、文档站点 |
+| 渲染模式          | 特点                                                                     | 适用场景                                       |
+| ----------------- | ------------------------------------------------------------------------ | ---------------------------------------------- |
+| **CSR**           | 在浏览器端执行 JavaScript 渲染页面                                       | 交互性强、对 SEO 要求不高的应用                |
+| **SSR**           | 在服务端预先渲染完整 HTML 页面                                           | 对首屏性能和 SEO 要求高的网站                  |
+| **Streaming SSR** | 边渲染边返回，更快显示初始 UI                                            | 需要更快首屏感知速度的应用（**SSR 默认模式**） |
+| **RSC**           | 组件在服务端渲染，减少客户端 JS 体积；数据与组件逻辑高内聚，减少状态传递 | 追求极致性能、需要减少客户端代码的项目         |
+| **SSG**           | 构建时生成静态页面，可被 CDN 缓存                                        | 内容相对静态的网站，如博客、文档站点           |
 
 ## 性能对比
 
-| 渲染技术 | 核心优势 | 主要瓶颈 |
-|---------|---------|---------|
-| **SSR** | 服务端预渲染，有利于 SEO | 需等待所有数据加载完成才能响应 |
-| **Streaming SSR** | 边渲染边返回，更快首屏 | JS 体积仍然较大 |
-| **Streaming SSR + RSC** | 减少客户端 JS 体积 | - |
+| 渲染技术                | 核心优势                 | 主要瓶颈                       |
+| ----------------------- | ------------------------ | ------------------------------ |
+| **SSR**                 | 服务端预渲染，有利于 SEO | 需等待所有数据加载完成才能响应 |
+| **Streaming SSR**       | 边渲染边返回，更快首屏   | JS 体积仍然较大                |
+| **Streaming SSR + RSC** | 减少客户端 JS 体积       | -                              |
 
 ## 如何选择
 
@@ -42,7 +42,6 @@ Modern.js 支持多种渲染模式组合使用：
 - **SSG + SSR**：部分页面静态，部分页面动态
 - **CSR + RSC**：客户端渲染 + 部分 Server Component
 
-
 ## 相关文档
 
 - [服务端渲染（SSR）](/guides/basic-features/render/ssr)

package/docs/zh/guides/basic-features/render/rsc.mdx

@@ -239,12 +239,12 @@ export default function DashboardPage() {
 
 ### 两种数据获取方式对比
 
-| 特性 | Server Component 中获取 | Data Loader 中获取 |
-| --- | --- | --- |
-| 避免请求瀑布 | 需要手动优化 | ✅ 自动并行执行 |
-| 组件内聚性 | ✅ 数据和 UI 在同一处 | 数据逻辑分离到单独文件 |
-| 维护性 | ✅ 更易理解和维护 | 需要维护额外文件 |
-| 类型安全 | ✅ 天然类型推断 | 需要手动管理类型 |
+| 特性         | Server Component 中获取 | Data Loader 中获取     |
+| ------------ | ----------------------- | ---------------------- |
+| 避免请求瀑布 | 需要手动优化            | ✅ 自动并行执行        |
+| 组件内聚性   | ✅ 数据和 UI 在同一处   | 数据逻辑分离到单独文件 |
+| 维护性       | ✅ 更易理解和维护       | 需要维护额外文件       |
+| 类型安全     | ✅ 天然类型推断         | 需要手动管理类型       |
 
 **一般情况下，我们推荐在 Server Component 中获取数据**，因为在服务端瀑布请求对性能的影响较小，这种方式使组件更加内聚，数据获取逻辑和 UI 渲染在同一处，更易于理解和维护。但如果你的页面有多个独立的数据源，且希望完全避免请求瀑布问题，Data Loader 的并行执行特性会更有优势。
 
@@ -268,7 +268,11 @@ export default function DashboardPage() {
 
 ```tsx title="routes/user/page.tsx"
 // Server Component 通过 props 接收 loaderData
-export default function UserPage({ loaderData }: { loaderData: { name: string } }) {
+export default function UserPage({
+  loaderData,
+}: {
+  loaderData: { name: string };
+}) {
   return <div>Welcome, {loaderData.name}</div>;
 }
 ```
@@ -276,7 +280,11 @@ export default function UserPage({ loaderData }: { loaderData: { name: string }
 ```tsx title="routes/user/page.tsx"
 'use client';
 // Client Component 同样可以通过 props 接收 loaderData
-export default function UserPage({ loaderData }: { loaderData: { name: string } }) {
+export default function UserPage({
+  loaderData,
+}: {
+  loaderData: { name: string };
+}) {
   return <div>Welcome, {loaderData.name}</div>;
 }
 ```
@@ -600,7 +608,6 @@ export default function ProfilePage() {
 
 import DeployTip from '@site-docs/components/rsc-deploy-tip';
 
-
 <DeployTip />
 
 ## 常见问题

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

@@ -74,10 +74,8 @@ export default () => {
 };
 ```
 
-
 ### 使用 Client Loader
 
-
 默认情况下，在 SSR 应用中，`loader` 函数只会在服务端执行。但有些场景下，开发者可能期望在浏览器端发送的请求不经过 SSR 服务，直接请求数据源，例如：
 
 1. 在浏览器端希望减少网络消耗，直接请求数据源。
@@ -96,12 +94,10 @@ export async function loader({ params }) {
   const data = await res.json();
   return {
     message: data.message,
-  }
+  };
 }
 ```
 
-
-
 ## SSR 降级
 
 在 Modern.js 中，如果应用在 SSR 过程中出现异常，Modern.js 会自动降级到 CSR 模式，并在 CSR 重新发起数据请求，保证页面能够正常展示。SSR 降级的原因主要分为两种：
@@ -133,11 +129,7 @@ const Page = () => {
   const undefinedVars = data.unDefined;
   const definedVars = data.defined;
 
-  return (
-    <div>
-      {isNode ? undefinedVars.msg : definedVars.msg}
-    </div>
-  );
+  return <div>{isNode ? undefinedVars.msg : definedVars.msg}</div>;
 };
 
 export default Page;
@@ -222,7 +214,7 @@ document.addEventListener('load', () => {
   console.log('document load');
 });
 
-export const doSomething = () => {}
+export const doSomething = () => {};
 ```
 
 如果直接引用到组件中，会造成 SSR 加载报错，即使你已经使用环境变量进行判断，但仍然无法移除依赖中副作用的执行。
@@ -234,8 +226,8 @@ export const Page = () => {
   if (process.env.MODERN_TARGET === 'browser') {
     doSomething();
   }
-  return <div>Hello World</div>
-}
+  return <div>Hello World</div>;
+};
 ```
 
 Modern.js 也支持通过 `.server.` 后缀的文件来区分 SSR Bundle 和 CSR Bundle 产物的打包文件。可以创建同名的 `.ts` 和 `.server.ts` 文件做一层代理：
@@ -251,12 +243,12 @@ export const doSomething: any = () => {};
 在文件中直接引入 `./a`，此时 SSR 打包下会优先使用 `.server.ts` 后缀的文件，CSR 打包下会使用 `.ts` 后缀的文件。
 
 ```tsx title="routes/page.tsx"
-import { doSomething } from './a'
+import { doSomething } from './a';
 
 export const Page = () => {
   doSomething();
-  return <div>Hello World</div>
-}
+  return <div>Hello World</div>;
+};
 ```
 
 ## 常见问题
@@ -331,4 +323,3 @@ export default function Test() {
 在浏览器端，这段代码不会造成任何问题，但是在 SSR 时，Middleware 实例会一直无法被销毁。每次渲染组件，调用 `epicMiddleware.run(rootEpic)` 时，都会在内部添加新的事件绑定，导致整个对象不断变大，最终对应用性能造成影响。
 
 CSR 中这类问题不易被发觉，因此从 CSR 切换到 SSR 时，如果不确定应用是否存在这类隐患，可以对应用进行压测。
-

package/docs/zh/guides/basic-features/routes/config-routes.mdx

@@ -6,7 +6,6 @@ sidebar_position: 3
 
 默认情况下，Modern.js 推荐使用 [约定式路由](./routes.mdx) 作为路由定义的方式。同时，Modern.js 也提供了一个配置式路由的能力，其可以和约定式路由一起使用，或两者分别单独使用。
 
-
 ## 何时使用配置式路由
 
 配置式路由在以下场景中特别有用：
@@ -22,27 +21,26 @@ sidebar_position: 3
 在 `src` 或每个入口目录下，你可以定义一个 `modern.routes.ts` 文件，通过该文件，你可以对路由进行配置：
 
 ```ts
-import { defineRoutes } from '@modern-js/runtime/config-routes'
+import { defineRoutes } from '@modern-js/runtime/config-routes';
 
 export default defineRoutes(({ route, layout, page, $ }, fileRoutes) => {
-  return [
-    route("home.tsx", "/"),
-  ]
-})
+  return [route('home.tsx', '/')];
+});
 ```
 
 ### 函数签名说明
 
 `defineRoutes` 接受一个回调函数，该回调函数有两个参数：
+
 1. `routeFunctions`：包含 `route`、`layout`、`page`、`$` 函数的对象
 2. `fileRoutes`：约定式路由生成的路由配置数组
 
 路由函数的基本签名：
+
 - 第一个参数：相对于 `modern.routes.ts` 的文件路径
 - 第二个参数：路由路径（可选，必须是字符串）
 - 第三个参数：子路由数组（可选）
 
-
 ## 路由函数
 
 Modern.js 提供了四个主要的路由配置函数：
@@ -50,6 +48,7 @@ Modern.js 提供了四个主要的路由配置函数：
 :::tip 路径说明
 
 所有路由函数的第一个参数（路径）都是**相对路径**，会与父级路径拼接生成最终的路由路径：
+
 - **根路径**：`"/"` 或 "" 表示当前层级的根路径
 - **相对路径**：子路由的路径会相对于父级路径进行拼接
 - **动态路径**：使用 `:param` 语法表示动态参数
@@ -57,7 +56,6 @@ Modern.js 提供了四个主要的路由配置函数：
 
 :::
 
-
 :::info
 
 - `route`、`layout`、`page`、`$` 等函数的第一个参数（组件文件路径）必须指向当前项目中的真实文件，暂不支持 `node_modules` 及 Monorepo 下其他仓库中的文件
@@ -73,27 +71,28 @@ Modern.js 提供了四个主要的路由配置函数：
 export default defineRoutes(({ route }, fileRoutes) => {
   return [
     // 无子路由时，自动生成页面路由
-    route("home.tsx", "/"),
-    route("about.tsx", "about"),
+    route('home.tsx', '/'),
+    route('about.tsx', 'about'),
 
     // 有子路由时，自动生成布局路由
     // dashboard/layout.tsx 需要包含 <Outlet> 来渲染子路由
-    route("dashboard/layout.tsx", "dashboard", [
-      route("dashboard/overview.tsx", "overview"),  // 生成路径：/dashboard/overview
-      route("dashboard/settings.tsx", "settings"),  // 生成路径：/dashboard/settings
+    route('dashboard/layout.tsx', 'dashboard', [
+      route('dashboard/overview.tsx', 'overview'), // 生成路径：/dashboard/overview
+      route('dashboard/settings.tsx', 'settings'), // 生成路径：/dashboard/settings
     ]),
 
     // 动态路由
-    route("products/detail.tsx", "products/:id"),
+    route('products/detail.tsx', 'products/:id'),
 
     // 多路径指向同一组件
-    route("user/profile.tsx", "user"),
-    route("user/profile.tsx", "profile"),
-  ]
-})
+    route('user/profile.tsx', 'user'),
+    route('user/profile.tsx', 'profile'),
+  ];
+});
 ```
 
 **使用场景**：
+
 - 快速配置路由，无需明确指定是页面还是布局
 - 简化路由配置的复杂度
 
@@ -105,15 +104,16 @@ export default defineRoutes(({ route }, fileRoutes) => {
 export default defineRoutes(({ layout, page }, fileRoutes) => {
   return [
     // 生成布局路由，路径为 "/auth"，必须包含子路由
-    layout("auth/layout.tsx", "auth", [
-      page("auth/login/page.tsx", "login"),      // 生成路径：/auth/login
-      page("auth/register/page.tsx", "register"), // 生成路径：/auth/register
+    layout('auth/layout.tsx', 'auth', [
+      page('auth/login/page.tsx', 'login'), // 生成路径：/auth/login
+      page('auth/register/page.tsx', 'register'), // 生成路径：/auth/register
     ]),
-  ]
-})
+  ];
+});
 ```
 
 **使用场景**：
+
 - 需要明确指定某个组件为布局组件
 - 为多个页面提供共同的布局结构
 - 需要在多个路由间共享导航、侧边栏等UI组件
@@ -125,15 +125,16 @@ export default defineRoutes(({ layout, page }, fileRoutes) => {
 ```ts
 export default defineRoutes(({ layout, page }, fileRoutes) => {
   return [
-    layout("dashboard/layout.tsx", "dashboard", [
-      page("dashboard/overview.tsx", "overview"),  // 生成路径：/dashboard/overview
-      page("dashboard/settings.tsx", "settings"),  // 生成路径：/dashboard/settings
+    layout('dashboard/layout.tsx', 'dashboard', [
+      page('dashboard/overview.tsx', 'overview'), // 生成路径：/dashboard/overview
+      page('dashboard/settings.tsx', 'settings'), // 生成路径：/dashboard/settings
     ]),
-  ]
-})
+  ];
+});
 ```
 
 **使用场景**：
+
 - 需要明确指定某个组件为页面组件
 - 确保组件不包含 `<Outlet>` 子组件渲染
 - 提供更清晰的语义表达
@@ -145,16 +146,17 @@ export default defineRoutes(({ layout, page }, fileRoutes) => {
 ```ts
 export default defineRoutes(({ layout, page, $ }, fileRoutes) => {
   return [
-    layout("blog/layout.tsx", "blog", [
-      page("blog/page.tsx", ""),                    // 生成路径：/blog
-      page("blog/[id]/page.tsx", ":id"),            // 生成路径：/blog/:id
-      $("blog/$.tsx", "*"),                         // 通配路由，匹配 /blog 下的所有未匹配路径
+    layout('blog/layout.tsx', 'blog', [
+      page('blog/page.tsx', ''), // 生成路径：/blog
+      page('blog/[id]/page.tsx', ':id'), // 生成路径：/blog/:id
+      $('blog/$.tsx', '*'), // 通配路由，匹配 /blog 下的所有未匹配路径
     ]),
-  ]
-})
+  ];
+});
 ```
 
 **使用场景**：
+
 - 自定义 404 页面
 - 处理特定路径下的所有未匹配请求
 
@@ -170,11 +172,11 @@ export default defineRoutes(({ layout, page, $ }, fileRoutes) => {
 export default defineRoutes(({ page }, fileRoutes) => {
   return [
     // 使用 page 函数明确指定页面路由
-    page("home.tsx", "/"),
-    page("about.tsx", "about"),
-    page("contact.tsx", "contact"),
-  ]
-})
+    page('home.tsx', '/'),
+    page('about.tsx', 'about'),
+    page('contact.tsx', 'contact'),
+  ];
+});
 ```
 
 ### 无路径路由
@@ -186,15 +188,16 @@ export default defineRoutes(({ layout, page }, fileRoutes) => {
   return [
     // 使用 layout 函数明确指定布局路由
     // auth/layout.tsx 需要包含 <Outlet> 来渲染子路由
-    layout("auth/layout.tsx", [
-      page("login/page.tsx", "login"),
-      page("register/page.tsx", "register"),
+    layout('auth/layout.tsx', [
+      page('login/page.tsx', 'login'),
+      page('register/page.tsx', 'register'),
     ]),
-  ]
-})
+  ];
+});
 ```
 
 上述配置会生成：
+
 - `/login` → `auth/layout.tsx` + `login/page.tsx`
 - `/register` → `auth/layout.tsx` + `register/page.tsx`
 
@@ -203,11 +206,11 @@ export default defineRoutes(({ layout, page }, fileRoutes) => {
 ```ts
 export default defineRoutes(({ page }, fileRoutes) => {
   return [
-    page("user.tsx", "user"),
-    page("user.tsx", "profile"),
-    page("user.tsx", "account"),
-  ]
-})
+    page('user.tsx', 'user'),
+    page('user.tsx', 'profile'),
+    page('user.tsx', 'account'),
+  ];
+});
 ```
 
 ### 动态路由
@@ -218,12 +221,12 @@ export default defineRoutes(({ page }, fileRoutes) => {
 export default defineRoutes(({ page }, fileRoutes) => {
   return [
     // 必需参数
-    page("blog/detail.tsx", "blog/:id"),
+    page('blog/detail.tsx', 'blog/:id'),
 
     // 可选参数
-    page("blog/index.tsx", "blog/:slug?"),
-  ]
-})
+    page('blog/index.tsx', 'blog/:slug?'),
+  ];
+});
 ```
 
 ## 路由相关文件自动查找
@@ -234,10 +237,10 @@ export default defineRoutes(({ page }, fileRoutes) => {
 // modern.routes.ts
 export default defineRoutes(({ route }, fileRoutes) => {
   return [
-    route("pages/profile.tsx", "profile"),
-    route("pages/user/detail.tsx", "user/:id"),
-  ]
-})
+    route('pages/profile.tsx', 'profile'),
+    route('pages/user/detail.tsx', 'user/:id'),
+  ];
+});
 ```
 
 Modern.js 会自动查找并加载：
@@ -259,7 +262,6 @@ Modern.js 会自动查找并加载：
 
 :::
 
-
 ## 路由合并
 
 配置式路由可以与约定式路由一起使用，你可以通过修改 `fileRoutes` 参数来实现路由的合并：
@@ -274,7 +276,6 @@ Modern.js 会自动查找并加载：
 
 :::
 
-
 ### 合并示例
 
 以下示例展示了配置式路由与约定式路由的合并方式：
@@ -312,6 +313,7 @@ export default defineRoutes(({ page }, fileRoutes) => {
   return fileRoutes;
 });
 ```
+
 ## 调试路由
 
 由于路由合并后的最终结构可能不够直观，Modern.js 提供了调试命令来帮助你查看完整路由信息：

package/docs/zh/guides/basic-features/static-assets/svg-assets.mdx

@@ -42,16 +42,22 @@ export default () => <Logo />;
 
 ## 修改默认导出
 
-你可以通过 [output.svgDefaultExport](/configure/app/output/svg-default-export) 配置项来修改 SVG 文件默认导出的内容，比如把默认导出的内容设置为 React 组件：
+你可以通过 [tools.svgr](/configure/app/tools/svgr) 的 `svgrOptions.exportType` 来修改 SVG 文件默认导出的内容，比如把默认导出的内容设置为 React 组件：
 
 ```ts
 export default {
-  output: {
-    svgDefaultExport: 'component',
+  tools: {
+    svgr: {
+      svgrOptions: {
+        exportType: 'default',
+      },
+    },
   },
 };
 ```
 
+旧的 [output.svgDefaultExport](/configure/app/output/svg-default-export) 配置项仍然生效，但已废弃。
+
 此时再使用默认导入，你会得到一个 React 组件，而不是 URL：
 
 ```tsx title="src/component/Logo.tsx"
@@ -80,12 +86,12 @@ export default () => <Logo />;
 
 默认情况下，在 JS 文件中引用 SVG 资源时，Modern.js 会调用 SVGR，将 SVG 图片转换为一个 React 组件。
 
-如果你确定项目内的所有 SVG 资源都没有当成 React 组件使用时，可以通过将 [disableSvgr](/configure/app/output/disable-svgr) 设置为 true 来关闭此项转换，以提升构建性能。
+如果你确定项目内的所有 SVG 资源都没有当成 React 组件使用时，可以通过将 [tools.svgr](/configure/app/tools/svgr) 设置为 `false` 来关闭此项转换，以提升构建性能。
 
 ```js
 export default {
-  output: {
-    disableSvgr: true,
+  tools: {
+    svgr: false,
   },
 };
 ```
@@ -153,21 +159,27 @@ declare module '*.svg' {
 }
 ```
 
-如果需要修改 SVGR 配置，可通过如下方式：
+如果需要修改 SVGR 配置，可通过 [tools.svgr](/configure/app/tools/svgr) 的 `svgrOptions` 设置。传入的 `svgoConfig.plugins` 会按插件名与默认配置深度合并，因此只需写出要改动的部分：
 
 ```js
 export default {
   tools: {
-    bundlerChain: (chain, { CHAIN_ID }) => {
-      chain.module
-        .rule(CHAIN_ID.RULE.SVG)
-        .oneOf(CHAIN_ID.ONE_OF.SVG)
-        .use(CHAIN_ID.USE.SVGR)
-        .tap(options => {
-          // modify svgoConfig
-          options.svgoConfig.plugins[0].params.overrides.removeUselessDefs = false;
-          return options;
-        });
+    svgr: {
+      svgrOptions: {
+        svgoConfig: {
+          plugins: [
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  // 在默认的 preset-default 之上追加一项 override
+                  removeUselessDefs: false,
+                },
+              },
+            },
+          ],
+        },
+      },
     },
   },
 };

package/docs/zh/guides/basic-features/testing/playwright.mdx

@@ -6,8 +6,13 @@ Playwright 是一个测试框架，它允许你使用单一的 API，自动的
 
 import { PackageManagerTabs } from '@theme';
 
-<PackageManagerTabs command={{ npm: "npm init playwright", yarn: "yarn create playwright", pnpm: "pnpm create playwright" }} />
-
+<PackageManagerTabs
+  command={{
+    npm: 'npm init playwright',
+    yarn: 'yarn create playwright',
+    pnpm: 'pnpm create playwright',
+  }}
+/>
 
 上述命令会自动安装 Playwright 依赖，并通过一系列提示帮助你在项目中安装和配置，包括添加一个 `playwright.config.ts` 文件。
 
@@ -75,18 +80,18 @@ export default Index;
 接下来，添加测试用例，来保证你页面的链接能够正常工作。
 
 ```ts title="tests/example.spec.ts"
-import { test, expect } from '@playwright/test'
- 
+import { test, expect } from '@playwright/test';
+
 test('should navigate to the about page', async ({ page }) => {
   // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
-  await page.goto('http://localhost:8080/')
+  await page.goto('http://localhost:8080/');
   // Find an element with the text 'About' and click on it
-  await page.click('text=About')
+  await page.click('text=About');
   // The new URL should be "/about" (baseURL is used there)
-  await expect(page).toHaveURL('http://localhost:8080/about')
+  await expect(page).toHaveURL('http://localhost:8080/about');
   // The new page should contain an h1 with "About"
-  await expect(page.locator('h1')).toContainText('About')
-})
+  await expect(page.locator('h1')).toContainText('About');
+});
 ```
 
 ## 运行测试用例
@@ -109,4 +114,4 @@ Running 3 tests using 3 workers
 To open last HTML report run:
 
   npx playwright show-report
-```
+```

package/docs/zh/guides/basic-features/testing/rstest.mdx

@@ -84,9 +84,9 @@ test('Page', async () => {
     </Router>,
   );
 
-  await expect.element(
-    page.getByRole('heading', { level: 1, name: 'Home' }),
-  ).toBeVisible();
+  await expect
+    .element(page.getByRole('heading', { level: 1, name: 'Home' }))
+    .toBeVisible();
 });
 ```
 
@@ -181,12 +181,14 @@ First install and use the migrate-to-rstest skill. If it is not installed, insta
 npx skills add rstackjs/agent-skills --skill migrate-to-rstest
 
 Follow the migrate-to-rstest skill instructions and the official Rstest migration guides:
+
 - Jest: https://rstest.rs/guide/migration/jest
 - Vitest: https://rstest.rs/guide/migration/vitest
 
 Modern.js-specific requirement:
+
 - Install and use @modern-js/adapter-rstest together with @rstest/core.
 - Create or update rstest.config.ts to import withModernConfig from @modern-js/adapter-rstest.
 - Reuse the Modern.js app configuration with extends: withModernConfig().
 - Do not replace this with a plain Rstest config unless the project explicitly does not need Modern.js config integration.`}
-/>
+  />