@modern-js/main-doc 2.67.4 → 2.67.6

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" />

package/docs/zh/configure/app/html/app-icon.mdx

@@ -1,6 +1,5 @@
 ---
 title: appIcon
-configName: html.appIcon
 ---
 
 # html.appIcon
@@ -50,6 +49,6 @@ export default {
 };
 ```
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.appIcon" />

package/docs/zh/configure/app/html/crossorigin.mdx

@@ -1,6 +1,5 @@
 ---
 title: crossorigin
-configName: html.crossorigin
 ---
 
 # html.crossorigin
@@ -11,6 +10,6 @@ configName: html.crossorigin
 用于设置 `<script>` 和 `<style>` 标签的 [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) 属性。
 
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.crossorigin" />

package/docs/zh/configure/app/html/favicon.mdx

@@ -1,6 +1,5 @@
 ---
 title: favicon
-configName: html.favicon
 ---
 
 # html.favicon
@@ -17,6 +16,6 @@ configName: html.favicon
 配置该选项后，在编译过程中会自动将图标拷贝至 dist 目录下，并在 HTML 中添加相应的 `link` 标签。
 
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.favicon" />

package/docs/zh/configure/app/html/inject.mdx

@@ -1,6 +1,5 @@
 ---
 title: inject
-configName: html.inject
 ---
 
 # html.inject
@@ -10,6 +9,6 @@ configName: html.inject
 
 修改构建产物中 `<script>` 标签在 HTML 中的插入位置。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.inject" />

package/docs/zh/configure/app/html/meta.mdx

@@ -1,6 +1,5 @@
 ---
 title: meta
-configName: html.meta
 ---
 
 # html.meta
@@ -24,6 +23,6 @@ const defaultMeta = {
 
 配置 HTML 页面的 `<meta>` 标签。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.meta" />

package/docs/zh/configure/app/html/mount-id.mdx

@@ -1,6 +1,5 @@
 ---
 title: mountId
-configName: html.mountId
 ---
 
 # html.mountId
@@ -10,6 +9,6 @@ configName: html.mountId
 
 默认情况下，HTML 模板中包含了 `root` 节点用于组件挂载，通过 `mountId` 可以修改该节点的 id。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.mountId" />

package/docs/zh/configure/app/html/output-structure.mdx

@@ -1,6 +1,5 @@
 ---
 title: outputStructure
-configName: html.outputStructure
 ---
 
 # html.outputStructure
@@ -10,6 +9,6 @@ configName: html.outputStructure
 
 用于定义 HTML 产物文件的目录结构。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.outputStructure" />

package/docs/zh/configure/app/html/script-loading.mdx

@@ -1,6 +1,5 @@
 ---
 title: scriptLoading
-configName: html.scriptLoading
 ---
 
 # html.scriptLoading
@@ -10,6 +9,6 @@ configName: html.scriptLoading
 
 用于设置 `<script>` 标签的加载方式。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.scriptLoading" />

package/docs/zh/configure/app/html/tags.mdx

@@ -1,6 +1,5 @@
 ---
 title: tags
-configName: html.tags
 ---
 
 # html.tags
@@ -15,6 +14,6 @@ type TagsConfig = HtmlTag | HtmlTagHandler | Array<HtmlTag | HtmlTagHandler>;
 
 添加和修改最终注入到 HTML 页面的标签。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.tags" />

package/docs/zh/configure/app/html/template-parameters.mdx

@@ -1,6 +1,5 @@
 ---
 title: templateParameters
-configName: html.templateParameters
 ---
 
 # html.templateParameters
@@ -33,6 +32,6 @@ type DefaultParameters = {
 
 定义 HTML 模板中的参数，对应 [html-rspack-plugin](https://github.com/rspack-contrib/html-rspack-plugin) 的 `templateParameters` 配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.templateParameters" />

package/docs/zh/configure/app/html/template.mdx

@@ -1,6 +1,5 @@
 ---
 title: template
-configName: html.template
 ---
 
 # html.template
@@ -10,6 +9,6 @@ configName: html.template
 
 定义 HTML 模板的文件路径，可以是相对路径或绝对路径。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.template" />

package/docs/zh/configure/app/html/title.mdx

@@ -1,6 +1,5 @@
 ---
 title: title
-configName: html.title
 ---
 
 # html.title
@@ -18,6 +17,6 @@ export default {
 };
 ```
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="html.title" />

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

@@ -1,6 +1,5 @@
 ---
 title: assetPrefix
-configName: output.assetPrefix
 ---
 
 # output.assetPrefix
@@ -14,6 +13,6 @@ import OutputAssetPrefixExtend from '@site-docs/components/output-asset-prefix-e
 
 <OutputAssetPrefixExtend />
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.assetPrefix" />

package/docs/zh/configure/app/output/charset.mdx

@@ -1,6 +1,5 @@
 ---
 title: charset
-configName: output.charset
 ---
 
 # output.charset
@@ -10,6 +9,6 @@ configName: output.charset
 
 `charset` 配置项允许你指定输出文件的[字符编码](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding) 字符编码，以确保它们在不同的环境中能够正确显示。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.charset" />

package/docs/zh/configure/app/output/copy.mdx

@@ -1,6 +1,5 @@
 ---
 title: copy
-configName: output.copy
 ---
 
 # output.copy
@@ -10,6 +9,6 @@ configName: output.copy
 
 将指定的文件或目录拷贝到构建输出目录中，基于 [rspack.CopyRspackPlugin](https://rspack.dev/zh/plugins/rspack/copy-rspack-plugin) 实现。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.copy" />

package/docs/zh/configure/app/output/css-modules.mdx

@@ -1,6 +1,5 @@
 ---
 title: cssModules
-configName: output.cssModules
 ---
 
 # output.cssModules
@@ -48,6 +47,6 @@ const defaultCssModules = {
 
 自定义 CSS 模块配置。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.cssModules" />

package/docs/zh/configure/app/output/data-uri-limit.mdx

@@ -1,6 +1,5 @@
 ---
 title: dataUriLimit
-configName: output.dataUriLimit
 ---
 
 # output.dataUriLimit
@@ -26,6 +25,6 @@ const defaultDatUriLimit = 10000;
 
 设置图片、字体、媒体等静态资源被自动内联为 base64 的体积阈值。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.dataUriLimit" />

package/docs/zh/configure/app/output/dist-path.mdx

@@ -1,6 +1,5 @@
 ---
 title: distPath
-configName: output.distPath
 ---
 
 # output.distPath
@@ -18,7 +17,6 @@ type DistPathConfig = {
   wasm?: string;
   image?: string;
   media?: string;
-  server?: string;
   worker?: string;
   assets?: string;
 };
@@ -43,6 +41,6 @@ const defaultDistPath = {
 
 设置构建产物的输出目录，Modern.js 会根据产物的类型输出到对应的子目录下。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.distPath" />

package/docs/zh/configure/app/output/externals.mdx

@@ -1,6 +1,5 @@
 ---
 title: externals
-configName: output.externals
 ---
 
 # output.externals
@@ -20,6 +19,6 @@ type Externals =
 
 在构建时，防止将代码中某些 `import` 的依赖包打包到 bundle 中，而是在运行时再去从外部获取这些依赖。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.externals" />

package/docs/zh/configure/app/output/filename-hash.mdx

@@ -1,6 +1,5 @@
 ---
 title: filenameHash
-configName: output.filenameHash
 ---
 
 # output.filenameHash
@@ -10,6 +9,6 @@ configName: output.filenameHash
 
 在生产模式构建后，是否在产物的文件名中添加 hash 值。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.filenameHash" />

package/docs/zh/configure/app/output/filename.mdx

@@ -1,6 +1,5 @@
 ---
 title: filename
-configName: output.filename
 ---
 
 :::warning
@@ -60,6 +59,6 @@ const prodDefaultFilename = {
 
 设置构建产物的名称。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.filename" />

package/docs/zh/configure/app/output/inject-styles.mdx

@@ -1,6 +1,5 @@
 ---
 title: injectStyles
-configName: output.injectStyles
 ---
 
 # output.injectStyles
@@ -10,6 +9,6 @@ configName: output.injectStyles
 
 是否将 CSS 样式插入到 DOM 中。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.injectStyles" />

package/docs/zh/configure/app/output/inline-scripts.mdx

@@ -1,6 +1,5 @@
 ---
 title: inlineScripts
-configName: output.inlineScripts
 ---
 
 # output.inlineScripts
@@ -29,6 +28,6 @@ type InlineScripts =
 当使用约定式路由时，如果开启了这个选项，需要将 [output.splitRouteChunks](/configure/app/output/split-route-chunks) 设置为 false。
 :::
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.inlineScripts" />

package/docs/zh/configure/app/output/inline-styles.mdx

@@ -1,6 +1,5 @@
 ---
 title: inlineStyles
-configName: output.inlineStyles
 ---
 
 # output.inlineStyles
@@ -29,6 +28,6 @@ type InlineStyles =
 当使用约定式路由时，如果开启了这个选项，需要将 [output.splitRouteChunks](/configure/app/output/split-route-chunks) 设置为 false。
 :::
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="output.inlineStyles" />