@modern-js/main-doc 2.67.5 → 2.67.7

package/docs/zh/configure/app/performance/remove-moment-locale.mdx

@@ -1,6 +1,5 @@
 ---
 title: removeMomentLocale
-configName: performance.removeMomentLocale
 ---
 
 # performance.removeMomentLocale
@@ -10,6 +9,6 @@ configName: performance.removeMomentLocale
 
 是否移除 [moment.js](https://momentjs.com/) 的语言包文件。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="performance.removeMomentLocale" />

package/docs/zh/configure/app/performance/transform-lodash.mdx

@@ -4,9 +4,12 @@ title: transformLodash
 
 # performance.transformLodash
 
+import { Badge } from '@theme';
+
+<Badge type="danger" ><div>仅支持 Webpack</div></Badge>
+
 - **类型：** `boolean`
 - **默认值：** `true`
-- **打包工具：** `仅支持 webpack`
 
 是否模块化 [lodash](https://www.npmjs.com/package/lodash) 的导入，删除未使用的 lodash 模块，从而减少 lodash 代码体积。
 

package/docs/zh/configure/app/security/nonce.mdx

@@ -1,6 +1,5 @@
 ---
 title: nonce
-configName: security.nonce
 ---
 
 # security.nonce
@@ -15,6 +14,6 @@ type Nonce = string;
 
 为 HTML 所引入的脚本资源添加随机属性值 nonce，使浏览器在解析到带有匹配 nonce 值的内联脚本时，能判断该脚本是否能执行。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="security.nonce" />

package/docs/zh/configure/app/security/sri.mdx

@@ -1,6 +1,5 @@
 ---
 title: sri
-configName: security.sri
 ---
 
 # security.sri

package/docs/zh/configure/app/server/port.mdx

@@ -1,6 +1,5 @@
 ---
 title: port
-configName: server.port
 ---
 
 # server.port
@@ -38,6 +37,6 @@ export default defineConfig({
 });
 ```
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="server.port" />

package/docs/zh/configure/app/source/alias-strategy.mdx

@@ -1,6 +1,5 @@
 ---
 title: aliasStrategy
-configName: source.aliasStrategy
 ---
 
 # source.aliasStrategy
@@ -10,6 +9,6 @@ configName: source.aliasStrategy
 
 `source.aliasStrategy` 用于控制 `tsconfig.json` 中的 `paths` 选项与打包工具的 `alias` 选项的优先级。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.aliasStrategy" />

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

@@ -1,6 +1,5 @@
 ---
 title: alias
-configName: source.alias
 ---
 
 # source.alias
@@ -19,6 +18,6 @@ type Alias = Record<string, string | false | (string | false)[]> | Function;
 对于 TypeScript 项目，你只需要在 `tsconfig.json` 中配置 [compilerOptions.paths](https://www.typescriptlang.org/tsconfig#paths) 即可，Rsbuild 会自动识别它，不需要额外配置 `source.alias` 字段，详见 [「路径别名」](https://modernjs.dev/guides/basic-features/alias.html)。
 :::
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.alias" />

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

@@ -1,6 +1,5 @@
 ---
 title: decorators
-configName: source.decorators
 ---
 
 # source.decorators
@@ -23,6 +22,6 @@ const defaultDecorators = {
 
 用于配置装饰器语法。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.decorators" />

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

@@ -1,6 +1,5 @@
 ---
 title: define
-configName: source.define
 ---
 
 # source.define
@@ -16,6 +15,6 @@ const defaultDefine = {
 
 构建时将代码中的变量替换成其它值或者表达式，可以用于在代码逻辑中区分开发环境与生产环境等场景。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.define" />

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

@@ -1,6 +1,5 @@
 ---
 title: exclude
-configName: source.exclude
 ---
 
 # source.exclude
@@ -10,6 +9,6 @@ configName: source.exclude
 
 指定不需要编译的 JavaScript/TypeScript 文件。用法与 Rspack 中的 [Rule.exclude](https://rspack.dev/zh/config/module#ruleexclude) 一致，支持传入字符串或正则表达式来匹配模块的路径。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.exclude" />

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

@@ -1,6 +1,5 @@
 ---
 title: include
-configName: source.include
 ---
 
 # source.include
@@ -21,6 +20,6 @@ const defaultInclude = [
 
 `source.include` 用于指定额外需要编译的 JavaScript 文件。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.include" />

package/docs/zh/configure/app/source/module-scopes.mdx

@@ -4,9 +4,12 @@ title: moduleScopes
 
 # source.moduleScopes
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Array<string | Regexp> | Function`
 - **默认值：** `undefined`
-- **打包工具：** `仅支持 webpack`
 
 限制源代码的引用路径。配置该选项后，所有源文件只能从约定的目录下引用代码，从其他目录引用代码会产生对应的报错提示。
 

package/docs/zh/configure/app/source/pre-entry.mdx

@@ -1,6 +1,5 @@
 ---
 title: preEntry
-configName: source.preEntry
 ---
 
 # source.preEntry
@@ -10,6 +9,6 @@ configName: source.preEntry
 
 在每个页面的入口文件前添加一段代码，这段代码会早于页面的代码执行，因此可以用于执行一些全局的代码逻辑，比如注入 polyfill、设置全局样式等。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.preEntry" />

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

@@ -1,6 +1,5 @@
 ---
 title: transformImport
-configName: source.transformImport
 ---
 
 # source.transformImport
@@ -59,9 +58,9 @@ const defaultArcoConfig = [
 当你添加了 `antd` 或 `@arco-design/web-react` 相关的配置时，优先级会高于上述默认配置。
 :::
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="source.transformImport" />
 
 ### 禁用默认配置
 

package/docs/zh/configure/app/tools/css-extract.mdx

@@ -1,6 +1,5 @@
 ---
 title: cssExtract
-configName: tools.cssExtract
 ---
 
 # tools.cssExtract
@@ -30,6 +29,6 @@ const defaultOptions = {
 
 通过 `tools.cssExtract` 可以更改 [CssExtractRspackPlugin](https://www.rspack.dev/zh/plugins/rspack/css-extract-rspack-plugin) 或 [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) 的配置。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.cssExtract" />

package/docs/zh/configure/app/tools/css-loader.mdx

@@ -1,6 +1,5 @@
 ---
 title: cssLoader
-configName: tools.cssLoader
 ---
 
 # tools.cssLoader
@@ -17,6 +16,6 @@ const defaultOptions = {
 
 修改 [css-loader](https://github.com/webpack-contrib/css-loader) 的配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.cssLoader" />

package/docs/zh/configure/app/tools/html-plugin.mdx

@@ -1,6 +1,5 @@
 ---
 title: htmlPlugin
-configName: tools.htmlPlugin
 ---
 
 # tools.htmlPlugin
@@ -34,8 +33,12 @@ const defaultOptions = {
 };
 ```
 
+:::warning
+SSR 应用请勿启用 `minify.removeComments` 配置项，否则会导致 SSR 渲染失败。
+:::
+
 通过 `tools.htmlPlugin` 可以修改 [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) 或 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 的配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.htmlPlugin" />

package/docs/zh/configure/app/tools/lightningcss-loader.mdx

@@ -1,6 +1,5 @@
 ---
 title: lightningcssLoader
-configName: tools.lightningcssLoader
 ---
 
 # tools.lightningcssLoader
@@ -36,6 +35,6 @@ const defaultOptions = {
 
 需要注意的是，开启 `lightningcss-loader` 时，将会默认关闭 `postcss-loader`。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.lightningcssLoader" />

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

@@ -1,6 +1,5 @@
 ---
 title: postcss
-configName: tools.postcss
 ---
 
 # tools.postcss
@@ -35,6 +34,6 @@ Modern.js 默认集成 PostCSS，你可以通过 `tools.postcss` 对 [postcss-lo
 
 需要注意的是，当你开启 `tools.lightningcss` 配置时，PostCSS 将会被默认禁用，包括 `postcss-loader` 及其默认插件。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.postcss" />

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

@@ -1,6 +1,5 @@
 ---
 title: rspack
-configName: tools.rspack
 ---
 
 # tools.rspack
@@ -10,6 +9,6 @@ configName: tools.rspack
 
 `tools.rspack` 选项用于修改 [Rspack](https://rspack.dev/) 的配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.rspack" />

package/docs/zh/configure/app/tools/style-loader.mdx

@@ -1,6 +1,5 @@
 ---
 title: styleLoader
-configName: tools.styleLoader
 ---
 
 # tools.styleLoader
@@ -10,6 +9,6 @@ configName: tools.styleLoader
 
 通过 `tools.styleLoader` 可以设置 [style-loader](https://github.com/webpack-contrib/style-loader) 的配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.styleLoader" />

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

@@ -21,7 +21,7 @@ import SWC from '@site-docs/components/swc.mdx';
 
 通过 `tools.swc` 可以设置 Rspack [builtin:swc-loader](https://rspack.dev/zh/guide/features/builtin-swc-loader) 的选项。
 
-```
+```ts
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig<'rspack'>({

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

@@ -4,6 +4,10 @@ title: terser
 
 # tools.terser
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Object | Function | undefined`
 - **默认值：**
 
@@ -17,8 +21,6 @@ const defaultTerserOptions = {
 };
 ```
 
-- **打包工具：** `仅支持 webpack`
-
 在生产环境构建时，Modern.js 会通过 [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) 对 JavaScript 代码进行压缩优化。可以通过 `tools.terser` 修改 [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin) 的配置。
 
 ### Object 类型

package/docs/zh/configure/app/tools/ts-loader.mdx

@@ -4,9 +4,12 @@ title: tsLoader
 
 # tools.tsLoader
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Object | Function | undefined`
 - **默认值：** `undefined`
-- **打包工具：** `仅支持 webpack`
 
 :::warning 废弃提示
 

package/docs/zh/configure/app/tools/webpack-chain.mdx

@@ -4,9 +4,12 @@ title: webpackChain
 
 # tools.webpackChain
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Function | undefined`
 - **默认值：** `undefined`
-- **打包工具：** `仅支持 webpack`
 
 你可以通过 `tools.webpackChain` 来修改默认的 webpack 配置，它的值为 `Function` 类型，接收两个参数：
 

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

@@ -4,9 +4,12 @@ title: webpack
 
 # tools.webpack
 
+import { Badge } from '@theme';
+
+<Badge type="danger" >仅支持 Webpack</Badge>
+
 - **类型：** `Object | Function | undefined`
 - **默认值：** `undefined`
-- **打包工具：** `仅支持 webpack`
 
 `tools.webpack` 选项用于配置原生的 [webpack](https://webpack.js.org/)。
 

package/docs/zh/guides/advanced-features/_meta.json

@@ -23,6 +23,5 @@
     "label": "server-monitor",
     "collapsed": true
   },
-  "custom-server",
   "web-server"
 ]

package/docs/zh/guides/advanced-features/bff/extend-server.mdx

@@ -2,31 +2,39 @@
 
 部分应用中，开发者可能希望对所有 BFF 函数做统一的处理，例如鉴权、日志、数据处理等。
 
-Modern.js 提供了两种方式，允许开发者根据运行时框架自由扩展 BFF Server。
+Modern.js 支持用户通过 [Middleware](/guides/advanced-features/web-server.html#middleware) 的方式来自由扩展 BFF Server。
 
-## 中间件
 
-开发者可以在编写 `api/_app.ts` 文件中编写中间件，用来扩展 BFF Server。以 Express 作为运行时框架为例，介绍如何手写一个中间件，添加权限校验：
+## 使用中间件
 
-```ts title="api/_app.ts"
-import { hook } from '@modern-js/runtime/server';
-import { Request, Response, NextFunction } from 'express';
+开发者可以在 `server/modern.server.ts` 中通过 配置 middlewares 来使用中间件。下面介绍如何手写一个 BFF 中间件，添加权限校验：
 
-export default hook(({ addMiddleware }) => {
-  addMiddleware(async (req: Request, res: Response, next: NextFunction) => {
-    if (req.url !== '/api/login') {
-      const sid = req?.cookies?.sid;
-      if (!sid) {
-        res.status(400);
-        res.json({ code: -1, message: 'need login' });
-      } else {
-        next();
-      }
-    } else {
-      next();
+
+```ts title="server/modern.server.ts"
+import {
+  type MiddlewareHandler,
+  defineServerConfig,
+} from '@modern-js/server-runtime';
+
+const requireAuthForApi: MiddlewareHandler = async (c, next) => {
+  if (c.req.path.startsWith('/api') && c.req.path !== '/api/login') {
+    const sid = c.req.cookie('sid');
+    if (!sid) {
+      return c.json({ code: -1, message: 'need login' }, 400);
     }
-  });
+  }
+  await next();
+};
+
+export default defineServerConfig({
+  middlewares: [
+    {
+      name: 'require-auth-for-api',
+      handler: requireAuthForApi,
+    },
+  ]
 });
+
 ```
 
 
@@ -97,60 +105,4 @@ export default () => {
 
 ![Network](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/network3.png)
 
-以上代码模拟了在 `/api/_app.ts` 中添加中间件的方式，实现了简易的登录功能。同样，可以在这个钩子文件中实现其他功能来扩展 BFF Server。
-
-:::info
-不同运行时框架中，中间件的写法不一定相同，详情可见[运行时框架](/guides/advanced-features/bff/frameworks)。
-
-:::
-
-## 定义 Server 实例
-
-除了中间件之外，还可以通过 `api/app.ts` 文件来定义 BFF Server 的实例。开发者需要默认导出一个能被运行时框架插件识别的实例。这里简单展示一下 Koa 和 Express 如何定义 Server 实例。
-
-import { Tabs, Tab as TabItem } from "@theme";
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="api/app.ts"
-import express from 'express';
-
-const app = express();
-app.use(async (req, res, next) => {
-  console.info(`access url: ${req.url}`);
-  next();
-});
-
-export default app;
-```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
-```ts title="api/app.ts"
-import koa from 'koa';
-
-const app = new Koa();
-app.use(async (ctx, next) => {
-  console.info(`access url: ${ctx.url}`);
-  await next();
-});
-
-export default app;
-```
-
-  </TabItem>
-</Tabs>
-
-在复杂的 BFF 逻辑中，定义 Server 实例可以更方便通过一个入口来组织代码逻辑，设计目录结构。在这个文件中，可以执行初始化逻辑，添加全局中间件，声明路由，甚至扩展原有框架。
-
-BFF 函数定义的路由会在 `app.ts` 文件定义的路由之后注册，所以在这里你也可以拦截 BFF 函数定义的路由，进行预处理或是提前响应。
-
-:::note
-此时，如果应用中同时存在 `api/_app.ts`，则定义的中间件会被放在 `api/app.ts` 导出实例的最后执行。多数情况下，中间件就能覆盖大多数 BFF 函数的定制需求。只有当应用的服务端逻辑比较复杂时，才需要自定义 Server 实例。
-:::
-
-:::caution
-当应用中没有 `api/app.ts` 的时候，Modern.js 默认会添加 [koa-body](https://www.npmjs.com/package/koa-body)。当应用中存在 `api/app.ts` 时，如果开发者希望使用带有 Body 的 BFF 函数，需要**自行添加** `koa-body`。
-:::
+以上代码模拟了在 `server/Modern.server.ts` 中定义中间件的方式，实现了简易的登录功能。同样，可以在这个配置文件中实现其他功能来扩展 BFF Server。

package/docs/zh/guides/advanced-features/bff/frameworks.mdx

@@ -5,82 +5,22 @@ title: 运行时框架
 
 # 运行时框架
 
-Modern.js 的 BFF 支持不同的运行时框架，当前 Modern.js 的 BFF 支持两种运行时框架 [Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/)。
-
-使用不同运行时框架时，有部分 API 会存在差异。
+Modern.js 以 [Hono.js](https://hono.dev/) 作为 BFF 和 Server 运行时框架，因此可以基于 Hono.js 生态[扩展 BFF Server](/guides/advanced-features/bff/extend-server.html)。
 
 ## 获取请求上下文
 
-在 BFF 函数中，有时需要获取请求上下文，来处理更多逻辑。此时，根据不同的运行时框架，你需要从通过不同的 API 来获取：
-
-import { Tabs, Tab as TabItem } from "@theme";
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="api/lambda/hello.ts"
-import { useContext } from '@modern-js/runtime/express'
-export const get = async () => {
-  const { req } = useContext();
-  console.info(`access url: ${req.url}`);
-  return 'Hello Modern.js'
-};
-```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
+在 BFF 函数中，有时需要获取请求上下文，来处理更多逻辑。此时，你可以通过 `useHonoContext` 来获取：
 
 ```ts title="api/lambda/hello.ts"
-import { useContext } from '@modern-js/runtime/koa'
+import { useHonoContext } from '@modern-js/plugin-bff/hono'
 export const get = async () => {
-  const ctx = useContext();
-  console.info(`access url: ${req.url}`);
+  const c = useHonoContext();
+  console.info(`access url: ${c.req.url}`);
   return 'Hello Modern.js'
 };
 ```
 
-  </TabItem>
-</Tabs>
-
 :::info
-详细内容可以参考 [useContext](/apis/app/runtime/bff/use-context)。
+详细内容可以参考 [useHonoContext](/apis/app/runtime/bff/use-hono-context)。
 :::
 
-## 使用中间件
-
-在 BFF 函数中，有时需要使用中间件，来处理更多逻辑。此时，根据不同的运行时框架，你需要从通过不同的 API 来获取：
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="api/_app.ts"
-import { hook } from '@modern-js/runtime/express';
-
-export default hook(({ addMiddleware }) => {
-  addMiddleware((req, res, next) => {
-    req.query.id = 'koa';
-    next();
-  });
-});
-```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
-```ts title="api/_app.ts"
-import { hook } from '@modern-js/runtime/koa';
-
-export default hook(({ addMiddleware }) => {
-  addMiddleware(async (ctx, next) => {
-    ctx.req.query.id = 'koa';
-    await next();
-  });
-});
-```
-
-  </TabItem>
-</Tabs>
-
-:::info
-详细内容可以参考 [hook](/apis/app/runtime/bff/hook)。
-:::

package/docs/zh/guides/advanced-features/page-performance/_meta.json

@@ -1 +1 @@
-["code-split", "inline-assets", "optimize-bundle"]
+["code-split", "inline-assets", "optimize-bundle", "react-compiler"]