@modern-js/main-doc 2.59.0 → 2.60.0

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

@@ -15,9 +15,7 @@ sidebar_position: 4
 
 ## 通过 `tsconfig.json` 的 `paths` 配置
 
-你可以通过 `tsconfig.json` 中的 `paths` 来配置别名，这是我们在 TypeScript 项目中推荐使用的方式，因为它可以解决路径别名的 TS 类型问题。
-
-比如：
+你可以通过 `tsconfig.json` 中的 `paths` 来配置别名，这是我们在 TypeScript 项目中推荐使用的方式，因为它可以解决路径别名的 TS 类型问题。比如：
 
 ```json title="tsconfig.json"
 {
@@ -29,7 +27,7 @@ sidebar_position: 4
 }
 ```
 
-以上配置完成后，如果你在代码中引用 `@common/Foo.tsx`, 则会映射到 `<project>/src/common/Foo.tsx` 路径上。
+以上配置完成后，如果你在代码中引用 `@common/Foo.tsx`，则会映射到 `<project>/src/common/Foo.tsx` 路径上。
 
 :::tip
 你可以阅读 [TypeScript - paths](https://www.typescriptlang.org/tsconfig#paths) 文档来了解更多用法。
@@ -47,9 +45,7 @@ Modern.js 提供了 [source.alias](/configure/app/source/alias) 配置项，对
 
 ### 对象用法
 
-你可以通过对象的方式来配置 `source.alias`，其中的相对路径会被自动补全为绝对路径。
-
-比如：
+你可以通过对象的方式来配置 `source.alias`，其中的相对路径会被自动补全为绝对路径。比如：
 
 ```js
 export default {
@@ -61,13 +57,11 @@ export default {
 };
 ```
 
-以上配置完成后，如果你在代码中引用 `@common/Foo.tsx`, 则会映射到 `<project>/src/common/Foo.tsx` 路径上。
+以上配置完成后，如果你在代码中引用 `@common/Foo.tsx`，则会映射到 `<project>/src/common/Foo.tsx` 路径上。
 
 ### 函数用法
 
-你也可以将 `source.alias` 配置为一个函数，拿到内置的 `alias` 对象，对其进行修改。
-
-比如：
+你也可以将 `source.alias` 配置为一个函数，拿到内置的 `alias` 对象，对其进行修改。比如：
 
 ```js
 export default {

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

@@ -61,7 +61,7 @@ function App() {
 }
 ```
 
-这种方式可以针对不同客户端提供不同的产物，保证代码体积最小化；也便于处理不同环境下代码中的一些副作用。
+这种方式可以针对不同客户端提供不同的产物，保证代码体积最小化，也便于处理不同环境下代码中的一些副作用。
 
 :::note 死代码移除
 在生产环境，Terser 和 SWC 等代码压缩工具会分析代码，并将 dead code 移除，从而减少产物体积，这个过程被称为死代码移除（DCE）。

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

@@ -464,8 +464,7 @@ Modern.js 支持通过 `loading.tsx` 文件来解决这个问题，`routes/` 下
 
 :::tip
 
-- 该功能目前仅在 Webpack 项目中支持，Rspack 项目暂不支持。
-- 对数据的预加载目前只会预加载 SSR 项目中 [Data Loader](/guides/basic-features/data/data-fetch) 中返回的数据。
+对数据的预加载目前只会预加载 SSR 项目中 [Data Loader](/guides/basic-features/data/data-fetch) 中返回的数据。
 
 :::
 

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

@@ -72,7 +72,7 @@ console.log(largeImage); // "/static/largeImage.6c12aba3.png"
 console.log(smallImage); // "data:image/png;base64,iVBORw0KGgo..."
 ```
 
-关于资源内联的更详细介绍，请参考 [静态资源内联](/guides/advanced-features/inline-assets) 章节。
+关于资源内联的更详细介绍，请参考 [静态资源内联](/guides/advanced-features/page-performance/inline-assets) 章节。
 
 ## 构建产物
 

package/docs/zh/guides/deprecated.md

@@ -13,3 +13,7 @@ Modern.js 之前提供的 Monorepo 方案是基于 [pnpm Workspace](https://pnpm
 ## new 命令开启 test 能力
 
 Modern.js 之前提供的测试能力是基于 Jest 的简单封装。该封装导致 Jest 配置不直观、用户配置更加复杂等问题。在 [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0) 版本中，移除了在应用项目和模块项目中开启 test 功能的选项。推荐直接使用社区提供的测试方案。
+
+## Eslint 规则集
+
+Modern.js 之前提供了 ESLint 的完整规则集，涵盖了 @modern-js（针对 Node.js 项目的 Lint 规则）和 @modern-js-app（针对前端项目的 Lint 规则）。在 [v2.60.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.60.0) 版本中，我们正式移除了这些规则集。我们鼓励开发者根据自身需求选择合适的代码规范工具，直接使用 ESLint 并结合社区推荐的规则，或使用 Biome 以提升代码格式化的性能。

package/docs/zh/guides/topic-detail/_meta.json

@@ -5,12 +5,6 @@
     "label": "micro-frontend",
     "collapsed": true
   },
-  {
-    "type": "dir",
-    "name": "framework-plugin",
-    "label": "framework-plugin",
-    "collapsed": true
-  },
   {
     "type": "dir",
     "name": "model",

package/docs/zh/plugin/_meta.json

@@ -0,0 +1,19 @@
+[
+  "introduction",
+  {
+    "type": "dir",
+    "name": "plugin-system",
+    "label": "plugin-system",
+    "collapsed": true
+  },
+  {
+    "type": "dir",
+    "name": "cli-plugins",
+    "label": "cli-plugins"
+  },
+  {
+    "type": "dir",
+    "name": "rsbuild-plugins",
+    "label": "rsbuild-plugins"
+  }
+]

package/docs/zh/plugin/cli-plugins/_meta.json

@@ -0,0 +1 @@
+["plugin-tailwind", "plugin-bff", "plugin-ssg", "plugin-swc"]

package/docs/zh/plugin/cli-plugins/plugin-bff.mdx

@@ -0,0 +1,5 @@
+# BFF 插件
+
+在 Modern.js 应用中，通过 BFF 插件，开发者可以在 `api/lambda` 目录下定义接口文件，并导出接口函数。在前端代码中，可以用文件引用的方式，直接调用这些接口函数，发起接口请求。
+
+详细内容可以参考 [BFF - 基础用法](/guides/advanced-features/bff/function)。

package/docs/zh/plugin/cli-plugins/plugin-ssg.mdx

@@ -0,0 +1,5 @@
+# SSG 插件
+
+SSG（Static Site Generation）是一种基于数据与模板，在构建时渲染完整静态网页的技术解决方案。这意味着在生产环境中，页面默认就是有内容的，并且可以被 CDN 缓存。对于无需数据的页面，SSG 可以提供更好的性能和更高的安全性。
+
+详细内容可以参考 [静态站点生成（SSG）](/guides/basic-features/render/ssg)。

package/docs/zh/{guides/rsbuild-plugins → plugin/cli-plugins}/plugin-swc.mdx

@@ -4,6 +4,13 @@ sidebar_position: 2
 
 # SWC 插件
 
+:::warning
+**当前文档中的 SWC 功能已停止迭代**，我们更推荐使用 Rspack + SWC 的方案。
+
+请参考[「使用 Rspack」](/guides/advanced-features/rspack-start.html)了解更多。
+
+:::
+
 import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
 
 <SWC />

package/docs/zh/plugin/cli-plugins/plugin-tailwind.mdx

@@ -0,0 +1,5 @@
+# Tailwind CSS 插件
+
+Tailwind CSS 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。
+
+详细内容可以参考 [使用 Tailwind CSS](/guides/basic-features/css/tailwindcss)。

package/docs/zh/plugin/cli-plugins.mdx

@@ -0,0 +1,6 @@
+# 概览
+
+- [@modern-js/plugin-tailwindcss](/plugin/cli-plugins/plugin-tailwind)：提供使用 Tailwind CSS 样式的能力。
+- [@modern-js/plugin-bff](/plugin/cli-plugins/plugin-bff)：提供 BFF 服务，一体化调用的能力。
+- [@modern-js/plugin-ssg](/plugin/cli-plugins/plugin-bff)：提供静态站点生成的能力。
+- [@modern-js/plugin-swc](/plugin/cli-plugins/plugin-swc)：提供 SWC 编译支持。

package/docs/zh/{guides/advanced-features/rsbuild-plugin.mdx → plugin/introduction.mdx}

@@ -1,11 +1,28 @@
----
-sidebar_position: 21
-title: 使用 Rsbuild 插件
----
+# 插件
 
-# 使用 Rsbuild 插件
+在 Modern.js 中目前可以直接使用两种插件，分别是 Modern.js 框架插件和 Rsbuild 构建插件。
 
-## 插件介绍
+## Modern.js 框架插件
+
+Modern.js 拥有自己的框架插件系统，你可以通过在 `modern.config.ts` 中配置 [`plugins`](/configure/app/plugins) 字段来使用 Modern.js 插件。
+
+### 插件类型 
+
+框架插件可以细分成三类，分别是：
+
+1. [CLI 插件](/plugin/cli-plugins)：用于在应用执行 Modern.js 命令时，提供额外的功能。例如，添加命令、修改配置、监听文件等。大多数构建相关的能力都可以通过 CLI 插件来实现。
+2. 服务端插件：用于在应用接受请求时，提供额外的功能。例如，添加中间件、修改请求响应等。
+3. 运行时插件：用于在应用运行 React 代码时，提供额外的功能。例如，执行初始化行为，包裹 React 高阶组件等。
+
+:::note
+服务端插件和运行时插件即将正式对外开放。
+:::
+
+### 开发插件
+
+如果你需要开发 Modern.js 框架插件，可以阅读 [Modern.js 插件系统](/plugin/plugin-system/introduction) 获取更多信息。
+
+## Rsbuild 构建插件
 
 Rsbuild 是 Modern.js 底层的构建工具，可通过添加 Rsbuild 插件修改默认的构建行为并添加各类额外功能，包括但不限于：
 
@@ -17,14 +34,18 @@ Rsbuild 是 Modern.js 底层的构建工具，可通过添加 Rsbuild 插件修
 你可以在 `modern.config.ts` 中通过 `builderPlugins` 选项来注册 Rsbuild 插件，详见 [builderPlugins 构建插件](/configure/app/builder-plugins.html)。
 
 :::tip
-Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [Rsbuild](https://rsbuild.dev/)。
+Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [Rsbuild](https://rsbuild.dev/).
+
+如果你当前版本低于 MAJOR_VERSION.46.0，可通过执行 `npx modern upgrade` 进行升级。
+:::
 
-如果你当前版本低于 MAJOR_VERSION.46.0, 可通过执行 `npx modern upgrade` 进行升级。
+:::info
+可以阅读 [Rsbuild 官网 - 插件](https://rsbuild.dev/plugins/list/index) 来了解更多 Rsbuild 插件体系的内容。
 :::
 
-## 官方插件
+### 官方插件
 
-### 内置插件
+#### 内置插件
 
 以下是已在 Modern.js 中内置的 Rsbuild 官方插件，无需安装，即可启用：
 
@@ -44,10 +65,14 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [R
 | [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | 用于引用 YAML 文件，并将其转换为 JavaScript 对象                                         | [TOML 文件](/guides/basic-features/static-assets/json-files.html#toml-文件)                                                                         |
 | [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | 用于引用 TOML 文件，并将其转换为 JavaScript 对象                                         | [YAML 文件](/guides/basic-features/static-assets/json-files.html#yaml-文件)                                                                         |
 
-### 未内置插件
+#### 未内置的插件
 
 以下是未在 Modern.js 中内置的 Rsbuild 官方插件：
 
 - [Image Compress 插件](https://github.com/rspack-contrib/rsbuild-plugin-image-compress)：将项目中用到的图片资源进行压缩处理。
 - [Stylus 插件](https://rsbuild.dev/zh/plugins/list/plugin-stylus)：使用 Stylus 作为 CSS 预处理器。
 - [UMD 插件](https://github.com/rspack-contrib/rsbuild-plugin-umd)：用于构建 UMD 格式的产物。
+
+import OtherPlugins from '@site-docs/components/other-plugins.mdx';
+
+<OtherPlugins />

package/docs/zh/{guides/topic-detail/framework-plugin → plugin/plugin-system}/extend.mdx

@@ -4,7 +4,7 @@ sidebar_position: 5
 
 # 扩展插件 Hook
 
-本小节介绍如何通过动态注册 [Hook 模型](/guides/topic-detail/framework-plugin/hook) 的方式来扩展插件 Hook。
+本小节介绍如何通过动态注册 [Hook 模型](/plugin/plugin-system/hook) 的方式来扩展插件 Hook。
 
 ## 示例
 

package/docs/zh/{guides/topic-detail/framework-plugin → plugin/plugin-system}/implement.mdx

@@ -31,7 +31,7 @@ const myPlugin = {
 };
 ```
 
-另外，在插件中，允许配置与其他插件的执行顺序。详情可以参考[插件关系](/guides/topic-detail/framework-plugin/relationship)。
+另外，在插件中，允许配置与其他插件的执行顺序。详情可以参考[插件关系](/plugin/plugin-system/relationship)。
 
 ### 插件类型
 
@@ -115,7 +115,7 @@ import type { MyPluginHook } from 'xxx';
 const myPlugin: CliPlugin<AppTools & { hooks: MyPluginHook }> = {};
 ```
 
-详细说明，请参考 [扩展 Hook](/guides/topic-detail/framework-plugin/extend)。
+详细说明，请参考 [扩展 Hook](/plugin/plugin-system/extend)。
 
 ### 插件配置项
 
@@ -158,7 +158,7 @@ export const myPlugin = (): CliPlugin => ({
 });
 ```
 
-插件 API 的详细说明，请参考 [Plugin API](/guides/topic-detail/framework-plugin/plugin-api)。
+插件 API 的详细说明，请参考 [Plugin API](/plugin/plugin-system/plugin-api)。
 
 ### 异步 setup
 

package/docs/zh/{guides/topic-detail/framework-plugin → plugin/plugin-system}/plugin-api.mdx

@@ -44,7 +44,7 @@ interface UserConfig {
 具体配置字段的意义请参考 [配置](/configure/app/usage)。
 
 :::tip
-该方法获取到的是只读配置，不可修改。如果需要修改配置，请使用 [config hook](/guides/topic-detail/framework-plugin/hook-list.html#config)。
+该方法获取到的是只读配置，不可修改。如果需要修改配置，请使用 [config hook](/plugin/plugin-system/hook-list.html#config)。
 :::
 
 ### useResolvedConfigContext
@@ -67,7 +67,7 @@ interface NormalizedConfig {
 配置字段的完整内容请参考 [配置](/configure/app/usage)。
 
 :::tip
-该方法获取到的是只读配置，不可修改。如果需要修改配置，请使用 [config hook](/guides/topic-detail/framework-plugin/hook-list.html#config)。
+该方法获取到的是只读配置，不可修改。如果需要修改配置，请使用 [config hook](/plugin/plugin-system/hook-list.html#config)。
 :::
 
 ### useAppContext

package/docs/zh/plugin/rsbuild-plugins/_meta.json

@@ -0,0 +1 @@
+["plugin-esbuild"]

package/docs/zh/plugin/rsbuild-plugins.mdx

@@ -0,0 +1,4 @@
+# 概览
+
+- [@modern-js/plugin-esbuild](/plugin/rsbuild-plugins/plugin-esbuild)：提供 esbuild 编译支持。
+

package/i18n.json

@@ -11,6 +11,10 @@
     "zh": "配置",
     "en": "Config"
   },
+  "plugin-menu": {
+    "zh": "插件",
+    "en": "Plugin"
+  },
   "apis": {
     "zh": "API",
     "en": "API"
@@ -71,13 +75,33 @@
     "zh": "使用 BFF",
     "en": "Using BFF"
   },
+  "page-performance": {
+    "zh": "优化页面性能",
+    "en": "Optimize Page Performance"
+  },
   "micro-frontend": {
     "zh": "微前端",
     "en": "Micro Frontend"
   },
-  "framework-plugin": {
-    "zh": "框架插件",
-    "en": "Framework Plugin"
+  "plugin-system": {
+    "zh": "插件系统",
+    "en": "Plugin System"
+  },
+  "cli-plugins": {
+    "zh": "CLI 插件",
+    "en": "CLI Plugins"
+  },
+  "server-plugins": {
+    "zh": "服务端插件",
+    "en": "Server Plugins"
+  },
+  "runtime-plugins": {
+    "zh": "运行时插件",
+    "en": "Runtime Plugins"
+  },
+  "rsbuild-plugins": {
+    "zh": "Rsbuild 插件",
+    "en": "Rsbuild Plugins"
   },
   "reduck": {
     "zh": "Reduck 状态管理",

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.59.0",
+  "version": "2.60.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.59.0"
+    "@modern-js/sandpack-react": "2.60.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.59.0"
+    "@modern-js/builder-doc": "^2.60.0"
   },
   "devDependencies": {
     "@rspress/shared": "1.28.2",
@@ -39,10 +39,11 @@
     "rspress": "1.28.2",
     "ts-node": "^10.9.1",
     "typescript": "^5",
-    "@modern-js/builder-doc": "2.59.0"
+    "@modern-js/builder-doc": "2.60.0"
   },
   "scripts": {
     "dev": "rspress dev",
+    "dev:no_lazy": "LAZY=false rspress dev",
     "build": "npx ts-node ./scripts/sync.ts",
     "build:doc": "rspress build",
     "preview": "rspress preview"

package/rspress.config.ts

@@ -6,61 +6,6 @@ const { version } = require('./package.json');
 
 const docPath = path.join(__dirname, 'docs');
 
-const getNavbar = (lang: string): NavItem[] => {
-  const cn = lang === 'zh';
-  const prefix = cn ? '' : '/en';
-  const getLink = (str: string) => `${prefix}${str}`;
-  const getText = (cnText: string, enText: string) => (cn ? cnText : enText);
-  return [
-    {
-      text: getText('指南', 'Guide'),
-      link: getLink('/guides/get-started/introduction'),
-      activeMatch: '/guides/',
-    },
-    {
-      text: getText('教程', 'Tutorials'),
-      link: getLink('/tutorials/foundations/introduction'),
-      activeMatch: '/tutorials/',
-    },
-    {
-      text: getText('配置', 'Configure'),
-      link: getLink('/configure/app/usage'),
-      activeMatch: '/configure/app',
-    },
-    {
-      text: getText('API', 'API'),
-      link: getLink('/apis/app/commands'),
-      activeMatch: '/apis/',
-    },
-    {
-      text: getText('社区', 'Community'),
-      link: getLink('/community/showcase'),
-      activeMatch: '/community/',
-    },
-    {
-      text: `v${version}`,
-      items: [
-        {
-          text: 'Rsbuild',
-          link: 'https://github.com/web-infra-dev/rsbuild',
-        },
-        {
-          text: 'Rspress',
-          link: 'https://github.com/web-infra-dev/rspress',
-        },
-        {
-          text: 'Modern.js Module',
-          link: 'https://modernjs.dev/module-tools/en/',
-        },
-        {
-          text: 'Modern.js v1',
-          link: 'https://modernjs.dev/v1/',
-        },
-      ],
-    },
-  ];
-};
-
 export default defineConfig({
   root: docPath,
   base: '/',
@@ -134,12 +79,10 @@ export default defineConfig({
   ],
   builderConfig: {
     output: {
-      disableTsChecker: true,
-      svgDefaultExport: 'component',
       dataUriLimit: 0,
     },
     dev: {
-      startUrl: false,
+      lazyCompilation: process.env.LAZY !== 'false',
     },
     source: {
       alias: {

package/src/components/Footer/index.tsx

@@ -76,7 +76,7 @@ export default function Footer() {
         },
         {
           label: t('pluginSystem'),
-          to: useUrl('/guides/topic-detail/framework-plugin/introduction'),
+          to: useUrl('/plugin/plugin-system/introduction'),
         },
         {
           label: t('projectGenerator'),

package/src/pages/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unescaped-entities */
 import clsx from 'clsx';
 import { useEffect } from 'react';
 import { Helmet, useLang, useLocation } from 'rspress/runtime';

package/docs/en/apis/app/hooks/api/api.mdx

@@ -1,80 +0,0 @@
----
-title: '**/*.[tj]s'
-sidebar_position: 1
----
-# **/*.[tj]s
-
-Files that declare API routes in the [BFF Function Mode](/guides/advanced-features/bff/type.html#function-mode). Except for some [convention files](/apis/app/hooks/api/api#allow-list), files in the `api` directory will be registered as the routes.
-
-:::info
-Using the `api` directory requires enabling the BFF feature, and you need to run the `new` command in the project to enable the "BFF" feature.
-
-This file supports using the `js` or `ts` language, but you must use `esm` syntax to export functions.
-
-:::
-
-## Routing File Convention
-
-### Default Routing
-
-The routing system will map files named `index` to the previous directory.
-
-- `api/index.ts` -> `$BASENAME/`
-- `api/user/index.ts` -> `$BASENAME/user`
-
-### Nested Routing
-
-The routing system also supports parsing nested files. If you create a nested folder structure, the files will still automatically resolve routes in the same way.
-
-- `api/hello.ts` -> `$BASENAME/hello`
-- `api/user/list.ts` -> `$BASENAME/user/list`
-
-### Dynamic Routing
-
-The routing system supports generating dynamic routes through file directories named with `[]`.
-
-- `api/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
-- `api/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
-- `api/article/[id]/info.ts` -> `$BASENAME/article/:id/info`
-
-The `$BASENAME` can be configured in `modern.config.js`, and the default value is `/api`.
-
-### Allow List
-
-By default, all files in the `api` directory will be parsed as BFF function files, but we also set a white list for these files that are not parsed:
-
-- Files whose names start with `_`. For example: `_utils.ts`.
-- All files in folders whose names start with `_`. For example: `_utils/index.ts`, `_utils/cp.ts`.
-- Test files. For example: `foo.test.ts`.
-- TypeScript type files. For example: `hello.d.ts`.
-- Files under `node_modules`.
-
-## Function Definition
-
-In addition to the routing rules above, there are also conventions for function definitions and exports in the code.
-
-Functions are exported by name, and the name of the exported function is the HTTP method accepted by the corresponding interface, that is:
-
-```ts
-export const get = async () => {
-  return {
-    name: 'Modern.js',
-    desc: 'Modern web Solutions',
-  };
-};
-```
-
-By exporting functions in this way, you will get a `GET` interface.
-
-The application project supports 9 Method definitions, namely: `GET`, `POST`, `PUT`, `DELETE`, `CONNECT`, `TRACE`, `PATCH`, `OPTION`, `HEAD`, that is, these Methods can be used as the names of the exported functions.
-
-The name is case-insensitive, that is, if it is `GET`, it can be written as `get`, `Get`, `GEt`, `GET`, all of which can be accurately recognized. The default export, that is, `export default xxx`, will be mapped to `Get`.
-
-Because `delete` is a keyword in JavaScript, you can use `del` or `DELETE` instead.
-
-Multiple functions with different Methods can be defined in one file, but if multiple functions with the same Method are defined, only the first one will take effect.
-
-:::info
-It should be noted that the defined functions should all be asynchronous, which is related to the type when calling the function.
-
-:::

package/docs/en/apis/app/hooks/api/app.mdx

@@ -1,12 +0,0 @@
----
-title: _app.[tj]s
-sidebar_position: 2
----
-# _app.[tj]s
-
-In the [BFF Function Mode](/guides/advanced-features/bff/type.html#function-mode), this file can add pre-middleware for BFF functions.
-
-:::note
-For specific examples, please refer to [hook](/apis/app/runtime/bff/hook).
-
-:::

package/docs/en/guides/advanced-features/bff/type.mdx

@@ -1,46 +0,0 @@
----
-sidebar_position: 2
-title: BFF Type
----
-# BFF Type
-
-Runtime framework support is also an important part of **BFF**. Modern.js supports extending BFF's runtime framework through plugins, and provides a series of built-in plugins, developers can directly use the conventions and ecology of the framework.
-
-The plugin is compatible with most of the specifications of these frameworks, and each framework needs to provide two types of ways to extend the writing of BFF functions, namely **Function Mode** and **Framework Mode**.
-
-:::note
-Whether the current `api/` directory structure is written as a framework is determined by the corresponding plugin, Modern.js don't care.
-
-:::
-
-## Function Mode
-
-When the plugin considers that it is currently written as a function, it must support writing middleware in the `api/_ app.ts` to extend the BFF function.
-
-Modern.js collects the middleware in the `api/_app.ts` and passes it to the plugin, which injects the middleware into the runtime, for example:
-
-```ts
-import { hook } from '@modern-js/runtime/server';
-
-export default hook(({ addMiddleware }) => {
-  addMiddleware(myMiddleware);
-});
-```
-
-:::note
-The writing of middleware for different plugins is not the same, see [Runtime Framework](/guides/advanced-features/bff/frameworks) for details.
-
-:::
-
-## Framework Mode
-
-Framework writing is a way of using frame structure to extend BFF functions. Compared with function writing, although frame writing can use more frame structure and make the entire BFF Server clearer in complex scenarios, it is also more complex and requires more attention to the content at the framework level.
-
-In the framework writing method, all BFF functions need to be written in the `api/lambda/` directory, and the hook file `_app.[tj]s` cannot be used.
-
-In most cases, the function writing method can cover the customization requirements of most BFF functions. Only when your project server level logic is more complex, the code needs to be layered, or you need to use more elements of the framework, you need to use the framework writing method.
-
-:::note
-The directory structure of different plugin frameworks is not the same, see [Runtime Frameworks](/guides/advanced-features/bff/frameworks) for details.
-
-:::