@modern-js/main-doc 2.58.3 → 2.60.0

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 官方插件，无需安装，即可启用：
 
@@ -41,13 +62,17 @@ Modern.js 从 `MAJOR_VERSION.46.0` 起开始将底层的构建工具升级为 [R
 | [CSS Minimizer 插件](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)         | 用于自定义 CSS 压缩工具，切换到 [cssnano](https://cssnano.co/) 或其他工具进行 CSS 压缩。 | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
 | [Pug 插件](https://github.com/rspack-contrib/rsbuild-plugin-pug)                             | 提供对 Pug 模板引擎的支持                                                                | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
 | [Rem 插件](https://github.com/rspack-contrib/rsbuild-plugin-rem)                             | 用于实现移动端页面的 rem 自适应布局                                                      | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
-| [YAML 插件](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | 用于引用 YAML 文件，并将其转换为 JavaScript 对象                                         | [TOML 文件](/guides/basic-features/json-files.html#toml-文件)                                                                         |
-| [TOML 插件](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | 用于引用 TOML 文件，并将其转换为 JavaScript 对象                                         | [YAML 文件](/guides/basic-features/json-files.html#yaml-文件)                                                                         |
+| [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/docs/zh/tutorials/first-app/c03-css.mdx

@@ -293,7 +293,7 @@ import '../styles/utils.css';
 ```
 
 :::info
-Modern.js 集成了 [PostCSS](/guides/basic-features/css)，支持现代 CSS 语法特性，比如 [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)。
+Modern.js 集成了 [PostCSS](/guides/basic-features/css/css)，支持现代 CSS 语法特性，比如 [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)。
 
 :::
 

package/i18n.json

@@ -11,6 +11,10 @@
     "zh": "配置",
     "en": "Config"
   },
+  "plugin-menu": {
+    "zh": "插件",
+    "en": "Plugin"
+  },
   "apis": {
     "zh": "API",
     "en": "API"
@@ -51,21 +55,53 @@
     "zh": "渲染",
     "en": "Rendering"
   },
+  "css-solution": {
+    "zh": "样式开发",
+    "en": "Styling"
+  },
+  "debug": {
+    "zh": "调试",
+    "en": "Debug"
+  },
+  "static-assets": {
+    "zh": "引用静态资源",
+    "en": "Import Static Assets"
+  },
+  "testing": {
+    "zh": "测试",
+    "en": "Testing"
+  },
   "use-bff": {
     "zh": "使用 BFF",
     "en": "Using BFF"
   },
-  "use-ssr": {
-    "zh": "服务端渲染",
-    "en": "SSR"
+  "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,20 +15,20 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.58.3",
+  "version": "2.60.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.58.3"
+    "@modern-js/sandpack-react": "2.60.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.58.3"
+    "@modern-js/builder-doc": "^2.60.0"
   },
   "devDependencies": {
-    "@rspress/shared": "1.27.0",
+    "@rspress/shared": "1.28.2",
     "@types/fs-extra": "9.0.13",
     "@types/node": "^16",
     "classnames": "^2",
@@ -36,13 +36,14 @@
     "fs-extra": "^10",
     "react": "^18",
     "react-dom": "^18",
-    "rspress": "1.27.0",
+    "rspress": "1.28.2",
     "ts-node": "^10.9.1",
     "typescript": "^5",
-    "@modern-js/builder-doc": "2.58.3"
+    "@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/apis/app/hooks/config/storybook.mdx

@@ -1,37 +0,0 @@
----
-title: storybook/
-sidebar_position: 7
----
-
-# storybook/
-
-Modern.js supports debugging using Storybook. When configuring Storybook, you need to configure it in the `config/storybook` directory of the project.
-
-Please refer to [Storybook Configuration](https://storybook.js.org/docs/react/configure/overview) for Storybook configuration.
-
-:::info
-Enabling the Storybook function requires running the new command to enable it under the project first.
-:::
-
-#### Example
-
-For the webpack configuration of the Storybook Manager app section, you can configure it by adding the `./config/storybook/main.js` file to configure it.
-
-```js
-// ./config/storybook/main.js
-
-module.exports = {
-  // it controls the Storybook manager app
-  managerWebpack: async (config, options) => {
-    // update config here
-    return config;
-  },
-};
-```
-
-### Limitation
-
-There are some limitations when using the `config/storybook` directory for configuration:
-
-- The location where the Story file is stored cannot be modified, that is, the `stories` configuration cannot be modified in the `main.js` file.
-- It is not supported to modify Webpack and Babel related configurations in `main.js`, related requirements can be passed through [`tools.webpack`](/configure/app/tools/webpack.html) /[`tools.babel`](/configure/app/tools/babel.html) modify.

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.
-
-:::