@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

package/docs/en/{_meta.json → _nav.json}

@@ -20,7 +20,7 @@
     "activeMatch": "/apis/"
   },
   {
-    "text": "tutorials",
+    "text": "Examples",
     "link": "/tutorials/foundations/introduction",
     "activeMatch": "/tutorials/"
   },
@@ -28,5 +28,9 @@
     "text": "community",
     "link": "/community/showcase",
     "activeMatch": "/community/"
+  },
+  {
+    "text": "Modern.js 2.x Docs",
+    "link": "https://modernjs.dev/guides/get-started/introduction.html"
   }
 ]

package/docs/en/apis/app/commands.mdx

@@ -19,7 +19,6 @@ Options:
   -e --entry <entry>    compiler by entry
   -c --config <config>  specify the configuration file, which can be a relative or absolute path
   -h, --help            show command help
-  --analyze             analyze the bundle and view size of each module
   --web-only            only start web service
   --api-only            only start API service
 ```
@@ -79,36 +78,13 @@ Options:
   -c --config <config>  specify the configuration file, which can be a relative or absolute path
   -h, --help            show command help
   -w --watch            turn on watch mode, watch for changes and rebuild
-  --analyze             analyze the bundle and view size of each module
 ```
 
-### Analyze Bundle
-
-execute `npx modern build --analyze` command, can produce an HTML file that analyzes the volume of the bundle while packaging the production code:
-
-```text
-Bundle Analyzer saved report to /example/dist/report.html
-
-info    Production file sizes:
-
-  File                                      Size         Gzipped
-  dist/static/js/lib-react.09721b5c.js      152.6 kB     49.0 kB
-  dist/html/main/index.html                 5.8 kB       2.5 kB
-  dist/static/js/main.3568a38e.js           3.5 kB       1.4 kB
-  dist/static/css/main.03221f72.css         1.4 kB       741 B
-```
-
-Open the above HTML file in the browser, you can see the tile diagram of the bundled files, and perform package volume analysis and optimization:
-
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/mwa-build-analyze-8784f762c1ab0cb20935829d5f912c4c.png" />
-
-> this features based on [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer).
-
 ## modern new
 
 The `modern new` command is used to enable features in an existing project.
 
-For example, add application entry, enable some optional features such as Tailwind CSS, micro frontend, etc.
+For example, add application entry, enable some optional features such as BFF, micro frontend, etc.
 
 ```bash
 Usage: modern new [options]
@@ -142,8 +118,7 @@ In the project, execute the `new` command to enable features as follows:
 $ npx modern new
 ? Please select the operation you want: Enable Features
 ? Please select the feature name: (Use arrow keys)
-❯ Enable Tailwind CSS
-  Enable BFF
+❯ Enable BFF
   Enable SSG
   Enable Micro Frontend
 ```
@@ -175,7 +150,7 @@ Options:
 
 ## modern inspect
 
-The `modern inspect` command is used to view the Modern.js config, [Rsbuild config](https://rsbuild.rs/config/index) and webpack or Rspack config of the project.
+The `modern inspect` command is used to view the Modern.js config, [Rsbuild config](https://rsbuild.rs/config/index) and Rspack config of the project.
 
 ```bash
 Usage: modern inspect [options]
@@ -192,7 +167,7 @@ After executing the command `npx modern inspect` in the project root directory,
 
 - `modern.js.config.mjs`:The Modern.js configuration currently used.
 - `rsbuild.config.mjs`: The Rsbuild config to use at build time.
-- `webpack.config.web.mjs`: The webpack config used by to use at build time.
+- `rspack.config.web.mjs`: The Rspack config used by to use at build time.
 
 ```bash
 ➜ npx modern inspect
@@ -200,7 +175,7 @@ After executing the command `npx modern inspect` in the project root directory,
 Inspect config succeed, open following files to view the content:
 
   - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
+  - Rspack Config (web): /root/my-project/dist/rspack.config.web.mjs
   - Modern.js Config: /root/my-project/dist/modern.js.config.mjs
 ```
 
@@ -222,7 +197,7 @@ modern inspect --verbose
 
 ### SSR Configuration
 
-If the project has enabled SSR, an additional `webpack.config.node.mjs` file will be generated in the `dist/`, corresponding to the webpack configuration at SSR build time.
+If the project has enabled SSR, an additional `rspack.config.node.mjs` file will be generated in the `dist/`, corresponding to the Rspack configuration at SSR build time.
 
 ```bash
 ➜ npx modern inspect
@@ -230,8 +205,8 @@ If the project has enabled SSR, an additional `webpack.config.node.mjs` file wil
 Inspect config succeed, open following files to view the content:
 
   - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
-  - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
-  - Webpack Config (node): /root/my-project/dist/webpack.config.node.mjs
+  - Rspack Config (web): /root/my-project/dist/rspack.config.web.mjs
+  - Rspack Config (node): /root/my-project/dist/rspack.config.node.mjs
   - Modern.js Config: /root/my-project/dist/modern.js.config.mjs
 ```
 

package/docs/en/apis/app/hooks/src/entry.mdx

@@ -5,10 +5,6 @@ sidebar_position: 4
 
 # entry.[tj]sx
 
-:::info
-Using this file requires enabling [source.enableCustomEntry](/configure/app/source/enable-custom-entry).
-:::
-
 Normally, the [`routes/`](/apis/app/hooks/src/routes.html) and [`App.[tj]sx`](/apis/app/hooks/src/app) hook files can meet our needs. When we need to add custom behavior before component rendering or take full control of the webpack packaging entry, we can create `entry.[tj]s` file in the src or entry directory. Here are two cases for discussion。
 
 ## Add custom behavior before Render
@@ -22,7 +18,7 @@ import { render } from '@modern-js/runtime/browser';
 const ModernRoot = createRoot();
 
 async function beforeRender() {
-   // todo
+  // todo
 }
 
 beforeRender().then(() => {

package/docs/en/apis/app/hooks/src/entry.server.mdx

@@ -5,10 +5,6 @@ sidebar_position: 5
 
 # entry.server.[tj]sx
 
-:::info
-Using this file requires enabling [source.enableCustomEntry](/configure/app/source/enable-custom-entry).
-:::
-
 When the project initiates `server.ssr`, Modern.js generates a default Server-Side entry. The sample code is as follows:
 
 ```tsx title="entry.server.tsx"
@@ -35,7 +31,10 @@ export default createRequestHandler(handleRequest);
 Users need to customize the Server-Side Rendering entry points, they can customize the server entry in `src/entry.server.ts` or `src/{entryName}/entry.server.ts`.
 
 ```tsx title="src/entry.server.tsx"
-import { renderString, createRequestHandler } from '@modern-js/runtime/ssr/server';
+import {
+  renderString,
+  createRequestHandler,
+} from '@modern-js/runtime/ssr/server';
 import type { HandleRequest } from '@modern-js/runtime/ssr/server';
 
 const handleRequest: HandleRequest = async (request, ServerRoot, options) => {

package/docs/en/apis/app/hooks/src/routes.mdx

@@ -4,7 +4,7 @@ sidebar_position: 2
 ---
 # routes/
 
-The identifier for the entry point when the application uses [Conventional Routing](guides/basic-features/routes.html#conventional-routing).
+The identifier for the entry point when the application uses [Conventional Routing](/guides/basic-features/routes/routes#conventional-routing).
 
 Conventional routing uses `routes/` as the convention for the entry point and analyzes the files in the `src/routes` directory to obtain the client-side routing configuration.
 
@@ -85,6 +85,6 @@ export default () => {
 ```
 
 :::note
-`<Outlet>` is a new API in React Router 6. For details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
+`<Outlet>` is a new API in React Router 7. For details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
 
 :::

package/docs/en/apis/app/runtime/_meta.json

@@ -5,24 +5,12 @@
     "label": "Core",
     "collapsed": true
   },
-  {
-    "type": "dir",
-    "name": "app",
-    "label": "App",
-    "collapsed": true
-  },
   {
     "type": "dir",
     "name": "router",
     "label": "Router",
     "collapsed": true
   },
-  {
-    "type": "dir",
-    "name": "model",
-    "label": "Model",
-    "collapsed": true
-  },
   {
     "type": "dir",
     "name": "ssr",
@@ -35,12 +23,6 @@
     "label": "BFF",
     "collapsed": true
   },
-  {
-    "type": "dir",
-    "name": "web-server",
-    "label": "Web Server",
-    "collapsed": true
-  },
   {
     "type": "dir",
     "name": "utility",

package/docs/en/apis/app/runtime/bff/use-hono-context.mdx

@@ -8,7 +8,7 @@ Used to obtain Hono context in an integrated BFF function.
 ## Usage
 
 ```ts
-import { useHonoContext } from '@modern-js/plugin-bff/hono';
+import { useHonoContext } from '@modern-js/plugin-bff/server';
 ```
 
 ## Function Signature
@@ -20,7 +20,7 @@ import { useHonoContext } from '@modern-js/plugin-bff/hono';
 Developers can use `context` to obtain more request information, such as setting response headers:
 
 ```ts
-import { useHonoContext } from '@modern-js/plugin-bff/hono';
+import { useHonoContext } from '@modern-js/plugin-bff/server';
 
 export async function get() {
   const c = useHonoContext();

package/docs/en/apis/app/runtime/router/router.mdx

@@ -6,7 +6,7 @@ sidebar_position: 1
 # router
 
 :::info
-The router solution based on [react-router 6](https://reactrouter.com/).
+The router solution based on [react-router v7](https://reactrouter.com/).
 
 :::
 

package/docs/en/apis/app/runtime/utility/css-in-js.mdx

@@ -1,6 +1,7 @@
 ---
 title: CSS-In-JS API
 ---
+
 # CSS-In-JS API
 
 Use Style Component to write CSS.
@@ -8,7 +9,7 @@ Use Style Component to write CSS.
 ## Usage
 
 ```ts
-import styled from '@modern-js/runtime/styled';
+import styled from '@modern-js/plugin-styled-components/styled';
 ```
 
 ## Function Signature
@@ -18,7 +19,7 @@ see [styled-component API](https://styled-components.com/docs/api).
 ## Example
 
 ```tsx
-import styled from '@modern-js/runtime/styled';
+import styled from '@modern-js/plugin-styled-components/styled';
 
 const Button = styled.button`
   background: palevioletred;

package/docs/en/community/blog/v2-release-note.mdx

@@ -232,8 +232,6 @@ Modern.js 中的部分代码实现参考了社区中的开源项目，我们对
 
 - `@modern-js/bundle-require`: 修改自 [bundle-require](https://github.com/egoist/bundle-require)。
 - `@modern-js/plugin`: hook API 的实现参考了 [farrow-pipeline](https://github.com/farrow-js/farrow/tree/master/packages/farrow-pipeline)。
-- `@modern-js/builder`: moduleScope 和 fileSize 插件参考了 [create-react-app](https://github.com/facebook/create-react-app)，TsConfigPathsPlugin 参考了 [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin)，generateMetaTags 函数参考了 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)。
-- `@modern-js/plugin-testing`: jest runner 参考了 [jest-cli](https://github.com/facebook/jest/blob/fdc74af37235354e077edeeee8aa2d1a4a863032/packages/jest-cli/src/cli/index.ts#L21)。
 - `@modern-js/plugin-data-loader`: 部分实现参考了 [remix](https://github.com/remix-run/remix)。
 
 ## 最后

package/docs/en/community/contributing-guide.mdx

@@ -15,7 +15,7 @@ own GitHub account and then [clone](https://help.github.com/articles/cloning-a-r
 
 ### Install Node.js
 
-We recommend using Node.js 18. You can check your currently used Node.js version with the following command:
+We recommend using Node.js 22. You can check your currently used Node.js version with the following command:
 
 ```bash
 node -v
@@ -23,17 +23,17 @@ node -v
 
 If you do not have Node.js installed in your current environment, you can use [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz/fnm) to install it.
 
-Here is an example of how to install the Node.js 18 LTS version via nvm:
+Here is an example of how to install the Node.js 22 LTS version via nvm:
 
 ```bash
-# Install the LTS version of Node.js 18
-nvm install 18 --lts
+# Install the LTS version of Node.js 22
+nvm install 22 --lts
 
-# Make the newly installed Node.js 18 as the default version
-nvm alias default 18
+# Make the newly installed Node.js 22 as the default version
+nvm alias default 22
 
-# Switch to the newly installed Node.js 18
-nvm use 18
+# Switch to the newly installed Node.js 22
+nvm use 22
 ```
 
 ### Install pnpm
@@ -125,7 +125,7 @@ pnpm run reset
 
 If you've fixed a bug or added code that should be tested, then add some tests.
 
-You can add unit test cases in the `<PACKAGE_DIR>/tests` folder. The test syntax is based on [Jest](https://jestjs.io/) and [Vitest](https://vitest.dev/).
+You can add unit test cases in the `<PACKAGE_DIR>/tests` folder. The test syntax is based on [Jest](https://jestjs.io/) and [Rstest](https://rstest.rs/).
 
 ### Run Unit Tests
 
@@ -185,9 +185,7 @@ You can find all the documentation in the `packages/document` folder:
 ```bash
 root
 └─ packages
-   └─ document
-       ├─ main-doc       # Documentation for Modern.js Framework
-       └─ module-doc     # Documentation for Modern.js Module
+   └─ document  # Documentation for Modern.js Framework
 ```
 
 This website is built with Rspress, the document content can be written using markdown or mdx syntax. You can refer to the [Rspress Website](https://rspress.rs/) for detailed usage.

package/docs/en/components/bff-upload.mdx

@@ -1,11 +1,9 @@
-BFF combined with runtime framework provides file upload capabilities, supporting integrated calls and pure function manual calls.
-
 ### BFF Function
 
 First, create the `api/lambda/upload.ts` file:
 
 ```ts title="api/lambda/upload.ts"
-export const post = async ({ formData }: {formData: Record<string, any>}) => {
+export const post = async ({ formData }: { formData: Record<string, any> }) => {
   console.info('formData:', formData);
   // do somethings
   return {
@@ -15,17 +13,18 @@ export const post = async ({ formData }: {formData: Record<string, any>}) => {
   };
 };
 ```
+
 :::tip
 The `formData` parameter in the interface processing function can access files uploaded from the client side. It is an `Object` where the keys correspond to the field names used during the upload.
 :::
 
-
 ### Integrated Calling
 
 Next, directly import and call the function in `src/routes/upload/page.tsx`:
+
 ```tsx title="routes/upload/page.tsx"
-import { upload } from '@api/upload';
-import React from 'react';
+import { post } from '@api/upload';
+import React, { type JSX } from 'react';
 
 export default (): JSX.Element => {
   const [file, setFile] = React.useState<FileList | null>();
@@ -34,31 +33,34 @@ export default (): JSX.Element => {
     setFile(e.target.files);
   };
 
-  const handleUpload = () => {
-    if (!file) {
-      return;
+  const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    const formData = new FormData();
+    if (file) {
+      for (let i = 0; i < file.length; i++) {
+        formData.append('images', file[i]);
+      }
+      post({
+        formData,
+      });
     }
-    upload({
-      files: {
-        images: file,
-      },
-    });
   };
 
   return (
     <div>
       <input multiple type="file" onChange={handleChange} />
-      <button onClick={handleUpload}>upload</button>
+      <button onClick={handleSubmit}>upload</button>
     </div>
   );
 };
 ```
+
 :::tip
-Note: The input type must be `{ formData: FormData }` for the upload to succeed.
+Note: The input parameter type must be `{ formData: FormData }` for the upload to succeed.
 :::
 
-
 ### Manual Calling
+
 You can manually upload files using the `fetch API`, when calling `fetch`, set the `body` as `FormData` type and submit a post request.
 
 ```tsx title="routes/upload/page.tsx"

package/docs/en/components/build-output.mdx

@@ -0,0 +1,45 @@
+To build the production artifacts of the project, run `pnpm run build` in the project:
+
+```bash
+$ pnpm run build
+
+> modern build
+
+  Modern.js Framework
+
+info    Starting production build...
+info    Type checker is enabled. It may take some time.
+ready   Client compiled in 6.19 s
+info    Production file sizes:
+
+  File                                       Size        Gzipped
+  dist/routes-manifest.json                  0.74 kB     0.28 kB
+  dist/static/css/async/page.d7915515.css    1.4 kB      0.69 kB
+  dist/static/js/main.5ae469e7.js            3.0 kB      1.3 kB
+  dist/html/index/index.html                  6.0 kB      2.6 kB
+  dist/static/js/async/page.ddc8a4c1.js      19.2 kB     6.7 kB
+  dist/static/js/34.171fffdb.js              21.3 kB     7.1 kB
+  dist/static/js/lib-router.8995a55e.js      55.3 kB     18.1 kB
+  dist/static/js/lib-lodash.53ec3384.js      71.4 kB     24.8 kB
+  dist/static/js/lib-react.b5856db9.js       140.0 kB    45.2 kB
+  dist/static/js/lib-polyfill.86c452b3.js    213.3 kB    69.9 kB
+
+  Total size:  531.8 kB
+  Gzipped size:  176.7 kB
+```
+
+By default, the build artifacts are generated in `dist/`, with the following directory structure:
+
+```
+dist
+├── html
+│   └── index
+├── modern.config.json
+├── route.json
+├── routes-manifest.json
+└── static
+    ├── css
+    └── js
+```
+
+> If you need to customize the directory of the build artifacts, please refer to [Output files](/guides/basic-features/output-files).

package/docs/en/components/bundler.mdx

@@ -1,3 +1,3 @@
-Refers to module bundlers such as [webpack](https://webpack.js.org/), [Rspack](https://rspack.rs/).
+Refers to module bundlers such as [Rspack](https://rspack.rs/).
 
 The main goal of bundlers is to bundle JavaScript, CSS and other files together, and the bundled files can be used in the browser, Node.js or other environments. When bundler processes the Web application, it builds a dependency graph and then combines every module into one or more bundles.

package/docs/en/components/debug-app.mdx

@@ -12,4 +12,4 @@ ready   Client compiled in 0.86 s
   > Network:  http://192.168.0.1:8080/
 ```
 
-Open `http://localhost:8000/` in your browser to see the page content.
+Open `http://localhost:8080/` in your browser to see the page content.

package/docs/en/components/enable-bff-caution.mdx

@@ -1,3 +1,3 @@
-:::caution
-Please use the [new command](/apis/app/commands#modern-new) in the root directory of the current project to enable BFF functionality first.
+:::tip
+Please refer to the [Enable BFF](/en/guides/advanced-features/bff/function.html#enable-bff) section in Basic Usage to enable BFF functionality first.
 :::

package/docs/en/components/enable-bff.mdx

@@ -1,22 +1,56 @@
-import { PackageManagerTabs } from '@theme';
+To enable BFF functionality in a Modern.js project, follow these steps to modify the code:
 
-1. Execute the `new` command:
+1. Install BFF plugin dependencies
 
-<PackageManagerTabs command="run new" />
+If the BFF plugin is not yet installed in your project, install it first:
 
-2. Follow the prompts to **enable BFF functionality**:
+```bash
+pnpm add @modern-js/plugin-bff
+```
+
+:::tip Version Consistency
+Make sure the version of `@modern-js/plugin-bff` matches the version of `@modern-js/app-tools` in your project. All Modern.js official packages are released with a uniform version number, and version mismatches may cause compatibility issues.
+
+Check the version of `@modern-js/app-tools` first, then install the same version of `@modern-js/plugin-bff`:
 
 ```bash
-? Please select the operation you want to perform Enable optional features
-? Please select the feature to enable Enable "BFF"
+# Check the current version of @modern-js/app-tools
+pnpm list @modern-js/app-tools
+
+# Install the same version of @modern-js/plugin-bff
+pnpm add @modern-js/plugin-bff@<version>
 ```
 
-3. Depending on the chosen runtime framework, add the following code to `modern.config.[tj]s`:
+:::
+
+2. Configure `modern.config.ts`
+
+Import and add the BFF plugin in the `modern.config.[tj]s` file:
 
 ```ts title="modern.config.ts"
+import { defineConfig, appTools } from '@modern-js/app-tools';
 import { bffPlugin } from '@modern-js/plugin-bff';
 
 export default defineConfig({
-  plugins: [bffPlugin()],
+  plugins: [appTools(), bffPlugin()],
 });
 ```
+
+3. Configure TypeScript alias
+
+To correctly recognize the `@api` alias in TypeScript, it is recommended to add path mapping in `tsconfig.json`:
+
+```json title="tsconfig.json"
+{
+  "compilerOptions": {
+    "paths": {
+      ..., // other paths,
+      "@api/*": ["./api/lambda/*"]
+    }
+  },
+  "include": [
+    ..., // other include directories
+    "api"  // Add api directory
+  ]
+}
+```

package/docs/en/components/enable-ssg.mdx

@@ -0,0 +1,49 @@
+To enable SSG functionality in a Modern.js project, follow these steps to modify the code:
+
+1. Install SSG plugin dependencies
+
+If the SSG plugin is not yet installed in your project, install it first:
+
+```bash
+pnpm add @modern-js/plugin-ssg
+```
+
+:::tip Version Consistency
+
+Make sure the version of `@modern-js/plugin-ssg` matches the version of `@modern-js/app-tools` in your project. All Modern.js official packages are released with a uniform version number, and version mismatches may cause compatibility issues.
+
+Check the version of `@modern-js/app-tools` first, then install the same version of `@modern-js/plugin-ssg`:
+
+```bash
+# Check the current version of @modern-js/app-tools
+pnpm list @modern-js/app-tools
+
+# Install the same version of @modern-js/plugin-ssg
+pnpm add @modern-js/plugin-ssg@<version>
+```
+
+:::
+
+2. Configure modern.config.ts
+
+Import and add the SSG plugin in the `modern.config.[tj]s` file, and configure `output.ssg`:
+
+```ts title="modern.config.ts"
+import { defineConfig, appTools } from '@modern-js/app-tools';
+import { ssgPlugin } from '@modern-js/plugin-ssg';
+
+export default defineConfig({
+  plugins: [appTools(), ssgPlugin()],
+  output: {
+    ssg: true,
+  },
+});
+```
+
+:::info Scope of Application
+
+- Use `output.ssg` for single-entry apps.
+- Use `output.ssgByEntries` for multi-entry apps.
+- When only `output.ssg: true` is set and `output.ssgByEntries` is not configured, all routes under all entries will be treated as SSG routes.
+
+:::

package/docs/en/components/entry-scan-logic.mdx

@@ -0,0 +1,7 @@
+:::tip Entry scanning logic
+- If `src/` itself meets entry criteria → Single-entry application
+- If `src/` does not meet criteria → Scan subdirectories under `src/` → Multi-entry application
+- In single-entry applications, the default entry name is `index`
+
+:::
+

package/docs/en/components/esbuild.mdx

@@ -1,3 +1,3 @@
-[esbuild](https://esbuild.github.io/) is a front-end build tool based on Golang. It has the functions of bundling, compiling and minimizing JavaScript code. Compared with traditional tools, the performance is significantly improved. When minimizing code, compared to webpack's built-in terser minimizer, esbuild has dozens of times better performance.
+[esbuild](https://esbuild.github.io/) is a front-end build tool based on Golang. It has the functions of bundling, compiling and minimizing JavaScript code. Compared with traditional tools, the performance is significantly improved. When minimizing code, esbuild has dozens of times better performance.
 
-Modern.js provides esbuild plugin that allow you to use esbuild instead of babel-loader, ts-loader and terser for transformation and minification process. When you enable esbuild in a large project, **it can greatly reduce the time required for code compilation and compression, while effectively avoiding OOM (heap out of memory) problems**.
+Modern.js provides esbuild plugin that allow you to use esbuild instead of babel-loader, ts-loader for transformation and minification process. When you enable esbuild in a large project, **it can greatly reduce the time required for code compilation and compression, while effectively avoiding OOM (heap out of memory) problems**.

package/docs/en/components/extend-bff-function.mdx

@@ -1,5 +1,3 @@
-The standard BFF function writing method may not always meet your needs. We are designing a more powerful BFF function writing method to allow developers to extend BFF functions more conveniently.
+The standard BFF function writing method may not always meet your needs. For example, complex TS type requirements in business scenarios. EdenX provides a more powerful BFF function writing method.
 
-:::note
-Coming soon
-:::
+For more details, please refer to - [Creating Extensible BFF Functions](/guides/advanced-features/bff/operators).