@modern-js/main-doc 2.0.0-canary.0 → 2.0.0-canary.1

package/en/docusaurus-plugin-content-docs/current/components/enable-bff.md

@@ -0,0 +1,36 @@
+1. Execute `pnpm new` and select "Enable BFF"
+2. Add the following code to `modern.config.[tj]s` according to the chosen runtime framework：
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+  <TabItem value="express" label="Express.js" default>
+
+```ts title="edenx.config.ts"
+import ExpressPlugin from '@edenx/plugin-express';
+import BffPlugin from '@edenx/plugin-bff';
+
+export default defineConfig({
+  plugins: [
+    ExpressPlugin(),
+    BffPlugin()
+  ]
+})
+```
+  </TabItem>
+  <TabItem value="koa" label="Koa.js">
+
+```ts title="edenx.config.ts"
+import KoaPlugin from '@edenx/plugin-koa';
+import BffPlugin from '@edenx/plugin-bff';
+
+export default defineConfig({
+  plugins: [
+    KoaPlugin(),
+    BffPlugin()
+  ]
+})
+```
+  </TabItem>
+</Tabs>

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/bff/frameworks.md

@@ -3,6 +3,8 @@ sidebar_position: 3
 title: Frameworks
 ---
 
+Modern.js's BFF supports different runtime frameworks, currently Modern.js's BFF supports two runtime frameworks[Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/).
+
 ## Function Writing
 
 Under the function writing, only the middleware writing method of various runtime frameworks is different, and other implementations are basically the same. Take Express as an example to introduce how to write a middleware by hand in the `api/_ app.ts` and add permission verification:

package/en/docusaurus-plugin-content-docs/current/guides/advanced-features/bff/function.md

@@ -1,13 +1,15 @@
 ---
 sidebar_position: 1
-title: Integration
+title: Basic usage
 ---
 
-Modern.js allow functions that meet certain conditions in the `api/` directory to be directly called in the React component, which is called **integration**.
+Applications developed with Modern.js can define API functions in the `api/` directory, which can be called by the front-end to send requests without writing front and back-end glue layer code, At the same time, it ensures the type safety of the front and back end
 
-:::note
-The use of integration calls requires the enable BFF first.
-:::
+## Enable BFF
+
+import EnableBFF from '@site-docs-en/components/enable-bff.md'
+
+<EnableBFF/>
 
 ## BFF Function
 
@@ -41,6 +43,8 @@ The functions import in `src/App.tsx` will be automatically converted into inter
 
 Execute `pnpm run dev`, then open `http://localhost:8080/` to see that the page has displayed the content returned by the BFF function. In Network, you can see that the page sent a request to `http://localhost:8080/api/hello`.
 
+![Network](https://p6-piu.byteimg.com/tos-cn-i-8jisjyls3a/fd41750f8d414179a9b4ecb519919b36~tplv-8jisjyls3a-3:0:0:q75.png)
+
 ## Function Route
 
 In Modern.js, the BFF function routing system is implemented based on the file system, and it is also a conventional routing system.

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.0.0-canary.0",
+  "version": "2.0.0-canary.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"

package/zh/components/enable-bff.md

@@ -0,0 +1,36 @@
+1. 执行 `pnpm new`，选择启用 BFF
+2. 根据选择的运行时框架，将下面的代码添加到 `modern.config.[tj]s` 中：
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+  <TabItem value="express" label="Express.js" default>
+
+```ts title="edenx.config.ts"
+import ExpressPlugin from '@edenx/plugin-express';
+import BffPlugin from '@edenx/plugin-bff';
+
+export default defineConfig({
+  plugins: [
+    ExpressPlugin(),
+    BffPlugin()
+  ]
+})
+```
+  </TabItem>
+  <TabItem value="koa" label="Koa.js">
+
+```ts title="edenx.config.ts"
+import KoaPlugin from '@edenx/plugin-koa';
+import BffPlugin from '@edenx/plugin-bff';
+
+export default defineConfig({
+  plugins: [
+    KoaPlugin(),
+    BffPlugin()
+  ]
+})
+```
+  </TabItem>
+</Tabs>

package/zh/guides/advanced-features/bff/frameworks.md

@@ -3,6 +3,8 @@ sidebar_position: 3
 title: 运行时框架
 ---
 
+Modern.js 的 BFF 支持不同的运行时框架，当前 Modern.js 的 BFF 支持两种运行时框架 [Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/)。
+
 ## 函数写法
 
 在函数写法下，各类运行时框架仅中间件写法存在差异，其他实现基本相同。这里以 Express 为例，介绍如何在 `api/_app.ts` 中，手写一个中间件，添加权限校验：

package/zh/guides/advanced-features/bff/function.md

@@ -1,13 +1,15 @@
 ---
 sidebar_position: 1
-title: 一体化调用
+title: 基础用法
 ---
 
-Modern.js 允许在 React 组件中直接调用 `api/` 目录下满足一定条件的函数，称为**一体化调用**。
+通过 Modern.js 开发的应用，可以在 `api/` 目录下定义接口函数，前端可以调用这些接口函数，即可发起请求，无需写前后端胶水层代码，同时保证前后端类型安全。
 
-:::note
-使用一体化调用需要先开启 BFF 功能。
-:::
+## 启用 BFF
+
+import EnableBFF from '@site-docs/components/enable-bff.md'
+
+<EnableBFF/>
 
 ## BFF 函数