@modern-js/main-doc 2.0.0-beta.1 → 2.0.0-beta.3

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/plugin/hook.md

@@ -1,170 +0,0 @@
----
-sidebar_position: 2
----
-
-# Hook 模型
-
-首先介绍一下 Modern.js 的基础的插件系统中的一些内容，包括 Hook 模型的工作方式、各个 Hook 模型的运行模式、Manager 的工作模式。
-
-每种 Hook 模型都是独立的，可以独立管理运行函数。
-
-## 基础工作方式
-
-先以 Pipeline 为例，简单介绍一下 Hook 模型的工作方式。先看一个简单的例子:
-
-```ts
-import { createPipeline } from '@modern-js/plugin'
-
-// 1. 创建
-const pipeline = createPipeline<number, number>()
-
-// 2. 添加函数
-pipeline.use((count, next) => {
-  return next(count + 1)
-})
-pipeline.use((count, next) => {
-  return count * 2
-})
-
-// 3. 执行
-pipeline.run(1) // 4
-pipeline.run(5) // 12
-```
-
-在这个例子中，创建了一个 `Pipeline<number, number>` 类型的 Pipeline（L3），这意味着运行它的时候，你需要传入一个 `number`，然后你会得到一个 `number`，而这个模型管理的函数的类型是:
-
-```ts
-(count: number, next: (nextCount: number) => number) => number
-```
-
-这里全是 `number`，是因为我们创建的是 `Pipeline<number, number>` ，如果创建的是 `Pipeline<number, string>` 则运行它入参是 `number`，返回值是 `string`，对应管理的函数的类型会是:
-
-```ts
-(count: number, next: (nextCount: number) => string) => string
-```
-
-
-创建好 Pipeline 之后，可以通过 `use` 添加函数（L5、L8），需要注意的是，添加的顺序就是他们默认的运行顺序，在这些函数中，你可以对 `count` 进行处理、返回一个值，如果你调用了 `next` 函数，则会运行后面的函数，即如果你添加了三个函数:  `A`、`B`、`C`，如果你在 `A` 中调用 `next` 那么就会运行 `B`，同样的，如果你在 `B` 中调用 `next` 那么就会运行 `C`，而在上面的例子中，添加的第一个函数（L5）就运行了 `next`，所以这里就会运行第二个函数（L8），并且运行的返回值就是 第二个函数的返回值，如果在第一个函数中没有调用 `next`，直接返回，例如:
-
-```ts
-import { createPipeline } from '@modern-js/plugin'
-
-// 1. 创建
-const pipeline = createPipeline<number, number>()
-
-// 2. 添加函数
-pipeline.use((count, next) => {
-  return count + 1
-})
-pipeline.use((count, next) => {
-  return count * 2
-})
-
-// 3. 执行
-pipeline.run(1) // 2
-pipeline.run(5) // 6
-```
-
-则在运行 Pipeline 的时候就不会运行第二个函数，那么 Pipeline 的运行结果则就是第一个函数的返回值。
-
-最后，运行 Pipeline 的方式也显而易见就是调用 `pipeline.run` 。
-
-## 不同 Hook 模型的区别
-
-上面这部分就是 Pipeline 整体的一个工作模式的描述，其他的 Hook 模型的工作模式基本也是这样，主要的区别点，是函数类型、执行顺序，参数。
-
-### Pipeline
-
-上面的例子就是以 Pipeline 为例描述的，这里就不赘述了，在 Pipeline 这个大类中，提供了两个小类: Sync 和 Async，顾名思义，它们的区别就是管理的函数的类型是 Sync 的还是 Async 的。
-
-:::info
-当 Pipeline 中没有函数或者所有函数都调用了 `next` 函数，则就需要在运行的时候提供:
-
-```ts
-pipeline({}, {
-    onLast: () => {
-        // do something
-    }
-})
-```
-:::
-
-### Waterfall
-
-这种模型顾名思义，他的特点就是参数的顺序递交，即前面一个函数的返回值，将会成为下一个函数的入参，我们也用一个例子来看一下:
-
-```ts
-import { createWaterfall } from '@modern-js/plugin'
-
-// 1. 创建
-const waterfall = createWaterfall<number>()
-
-// 2. 添加函数
-waterfall.use((count) => {
-  return count + 1
-})
-waterfall.use((count) => {
-  return count * 2
-})
-
-// 3. 执行
-waterfall.run(1) // 4
-waterfall.run(5) // 12
-```
-
-这个例子中，创建了一个类型为 `Waterfall<number> `，即这个模型执行的入参和返回值是一样的，这个例子中都是 `number`，而它管理的函数的类型是:
-
-```ts
-(count: number) => number
-```
-
-可能简单看这个例子感觉和上面的 Pipeline 功能一样，那需要注意的是，首先这里 Waterfall 管理的函数没有next 函数作为第二个参数，所以它无法在函数内部通过调用 next 来先运行之后添加的函数，从而修改运行的顺序，其次这里的运行的入参的类型和返回值的类型必须是一样的（而 Pipeline 可以不一样）。
-
-同样的，在 Waterfall 这个大类中，也提供了 Sync 和 Async 的小类，分别对应 Sync 和 Async 的函数。
-
-### Workflow
-
-这种 Hook 模型与上面两种 Hook 模型的区别是，没有那么强的前后参数返回值递交的概念，在这个模型中，每个函数都是基于同样的入参，相对独立运行的，通过一个例子简单看一下:
-
-```ts
-import { createWorkflow } from '@modern-js/plugin'
-
-// 1. 创建
-const workflow = createWorkflow <number, number>()
-
-// 2. 添加函数
-workflow.use((count) => {
-  return count + 1
-})
-workflow.use((count) => {
-  return count * 2
-})
-
-// 3. 执行
-workflow.run(1) // [2, 2]
-workflow.run(5) // [6, 10]
-```
-
-在这个例子中，添加了两个函数，所以运行的结果就是这两个函数运行的结果形成的一个数组。
-
-虽然这种模型中没有那么强的前后参数返回值递交的概念，但依旧有执行顺序的区别，在 Workflow 这个大类中，提供了三个小类: Sync、Async、Parallel。他们之间的区别就是函数的执行顺序，当然默认的都是按照添加顺序执行，而在 Sync、Async 则是强制按照添加顺序执行，而 Parallel 则是 Async 模式的一个变体，即它使用的是 `Promise.all` 来执行所有函数，而 Async 则会 `await` 前面的函数运行结束。
-
-## Hook 模型对比
-
-<div style={{ width: "100%", overflowX: "scroll" }}>
-<div style={{ width: "150%" }}>
-
-||函数类型|执行顺序|函数参数来源|执行返回值来源|倾向处理的任务类型|函数 TS 类型|
-|-----|-----|-----|-----|----|----|----|
-|Pipeline|Sync|默认执行第一个添加的函数，可以通过 next 调用之后添加的函数|第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数向 next 函数传递的参数|第一个函数的返回值|<ul><li>需要修改初始参数</li><li>需要修改函数执行顺序</li></ul>|`(input: I, next: Next<I, O>) => O`|
-|AsyncPipeline|Sync/Async|默认执行第一个添加的函数，可以通过 next 调用之后添加的函数|第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数向 next 函数传递的参数|第一个函数的返回值|<ul><li>需要修改初始参数</li><li>需要修改函数执行顺序</li></ul>|`(input: I, next: AsyncNext<I, O>) => O ｜ Promise<O>`|
-|WaterFall|Sync|一直顺序执行|第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数的返回值|最后一个函数的返回值|<ul><li>需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>|`(I: I) => I`|
-|AsyncWaterFall|Sync/Async|一直顺序执行|第一个函数的参数来源是运行的参数，之后的函数的参数来源是，前一个函数的返回值|最后一个函数的返回值|<ul><li>需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>|`(I: I) => I ｜ Promise<I>`|
-|Workflow|Sync|一直顺序执行|所有函数的入参都是运行的参数|所有函数返回值形成的数组|<ul><li>不需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>|`(I: I) => O`|
-|AsyncWorkflow|Sync/Async|一直顺序执行|所有函数的入参都是运行的参数|所有函数返回值形成的数组|<ul><li>不需要修改初始参数</li><li>不需要修改函数执行顺序</li></ul>|`(I: I) => O ｜ Promise<O>`|
-|ParallelWorkFlow|Sync/Async|异步执行|所有函数的入参都是运行的参数|所有函数返回值形成的数组|<ul><li>不需要修改初始参数</li><li>不关心执行顺序</li></ul>|`(I: I) => O ｜ Promise<O>`|
-
-</div>
-</div>
-
-Workflow、Waterfall 其实都是 Pipeline 的变体，Pipeline 可以通过特定的写法来实现 Workflow、Waterfall ，但都较为麻烦，有许多隐形的约定，为了方便使用，提供了这两种变体来满足这种特殊场景。

package/zh/apis/app/runtime/default-alias.md

@@ -1,23 +0,0 @@
----
-sidebar_position: 1
-title: 默认别名
----
-
-Modern.js 推荐通过别名的方式引用源码，其中包含 3 种默认别名:
-- `@/`：等价于引用项目根目录 `src/*` 下的文件。
-- `@api/`：等价于引用项目根目录下 `api/*` 下的文件（需要先开启 BFF 功能）。
-- `@shared/`：等价于引用项目根目录下 `shared/*` 下的文件。
-
-:::tip 提示
-- 除了以下默认别名，开发者可以在 `modern.config.js` 中自定义别名，详见[如何配置别名](/docs/configure/app/source/alias)。
-:::
-
-## 示例
-下面的例子展示了如何通过默认别名引用函数。
-```tsx
-import { hello } from '@/common/utils';
-
-hello();
-
-```
-引用 `@/common/utils` 相当于引用 `src/common/utils`。

package/zh/apis/app/runtime/env.md

@@ -1,70 +0,0 @@
----
-sidebar_position: 1
-title: 环境变量
----
-
-Modern.js 内置了对环境变量的支持，包含内置的环境变量和自定义的环境变量。
-
-## 内置的环境变量
-
-### NODE_ENV
-
-表示当前的执行环境，是**只读的**的环境变量，其值在不同的执行命令下具有不同的值：
-
-- `production`：执行 `modern build`、`modern preview` 命令时的默认值。
-- `test`：执行 `modern test` 命令时的默认值。
-- `development`：执行 `modern dev` 命令时的默认值，同时也是其他所有情况下的默认值。
-
-### MODERN_ENV
-
-用于设置当前的执行环境，除了上述 NODE_ENV 对应的值之外，这里支持自定义环境名称，比如 `staging`、`boe` 等，Modern.js 会根据该环境变量对应的加载 env.{process.env.MODERN_ENV} 文件中设置的环境变量值。
-
-当需要通过环境名称使用不同的配置时，可以把环境变量定义到对应的环境名称的 env 文件中。
-
-MODERN_ENV 的优先级高于 NODE_ENV。
-
-## 自定义环境变量
-
-Modern.js 支持自定义的环境变量，以 `MODERN_` 开头的环境变量可以在代码中直接使用。
-
-如果需要自动以任意名称的环境变量，需要在 [`source.define`](/docs/configure/app/source/define) 配置中声明后使用。
-
-## 定义环境变量
-
-环境变量支持通过 `shell` 和 `.env` 文件两种方式指定。
-
-### 通过 `shell` 指定
-
-在命令前添加自定义环境变量：
-
-```shell
-REACT_APP_FOO=123 BAR=456 pnpm run dev
-```
-
-### 通过 `.env` 文件指定
-
-在项目根目录创建 `.env` 文件，其中添加自定义环境变量：
-
-```env
-REACT_APP_FOO=123
-BAR=456
-```
-
-.env 文件支持后缀名后 NODE_ENV 或 MODERN_ENV 定义的环境名称，如 `.env.development`，可根据项目需求进行定义。Modern.js 会根据环境名称变量值读取对应的 env 文件。
-
-## 使用环境变量
-
-### JS/TS 代码内使用
-
-通过 `process.env.*` 直接获取环境变量。
-
-```js
-console.log(process.env.NODE_ENV);
-// "development"
-```
-
-### HTML 代码片段使用
-
-```html title="config/html/head.ejs"
-<meta name="env" content="<%=process.env.NODE_ENV %>" />
-```

package/zh/apis/app/runtime/plugin/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "插件 API",
-  "position": 12
-}

package/zh/apis/app/runtime/plugin/abstract.md

@@ -1,26 +0,0 @@
----
-sidebar_position: 1
----
-
-# 概览
-
-Modern.js 的基础的插件系统中主要分为三个部分：Hook 模型（Pipeline、Workflow、Waterfall）、 Hook 模型的管理器（Manager），上下文共享机制。
-
-其中的 Hook 模型是用于管理运行一系列相同模型（形状）函数的管理工具，目前提供了三个大类，7个小类：
-
-- Pipeline
-  - Sync
-  - Async
-- Waterfall
-  - Sync
-  - Async
-- Workflow
-  - Sync
-  - Async
-  - Parallel(Async)
-
-它们之间的区别是他们所管理的函数的运行模式的不同。不同的地方会在下面具体分析介绍。
-
-Hook 模型的管理器（Manager），顾名思义就是用来管理上面提到的那些 Hook 模型，添加至同一个 Manager 可以使用同一个 Runner 对象（包含所有 Hook 的执行函数）来运行，也共享同一个上下文环境。而 Modern.js 的基础插件系统中的插件就是针对 Manager 来说的，是一个拥有属性、插件 Hook 函数的对象。
-
-基于上面的工具（Hook 模型 + Manager），在 Modern.js 中主要构建了三套插件模型：CLI、Runtime、Server。其中 CLI 是 Modern.js 中主要的运行流程控制模型，Modern.js 中的各种工程方案（应用工程方案、模块工程方案、Monorepo 工程方案）都是主要通过这一套模型运行的。而 Runtime 则主要负责的是 React 路由组件和元素的处理（Component 和 Element）和渲染（包括服务器端渲染和客户端渲染）。而 Server 则是针对 Server 运行时的这个阶段的生命周期运行和特殊信息收集。其中 Runtime 和 Server 的运行都是在 CLI 中触发的。

package/zh/apis/app/runtime/plugin/plugin-api.md

@@ -1,117 +0,0 @@
----
-sidebar_position: 5
----
-
-# Plugin API
-
-插件的 setup 函数会接收一个 api 入参，你可以调用 api 上提供的一些方法来获取到配置、应用上下文等信息。
-
-```ts
-import type { CliPlugin } from '@modern-js/core';
-
-export default (): CliPlugin => ({
-  name: 'my-plugin',
-
-  setup(api) {
-    // 获取应用原始配置
-    const config = api.useConfigContext();
-    // 获取应用运行上下文
-    const appContext = api.useAppContext();
-    // 获取解析之后的最终配置
-    const resolvedConfig = api.useResolvedConfigContext();
-  },
-});
-```
-
-## API
-
-### useConfigContext
-
-用于获取应用原始配置。
-
-```ts
-const useConfigContext: () => UserConfig
-
-interface UserConfig {
-  source?: SourceConfig;
-  output?: OutputConfig;
-  server?: ServerConfig;
-  dev?: DevConfig;
-  deploy?: DeployConfig;
-  tools?: ToolsConfig;
-  plugins?: PluginConfig;
-  runtime?: RuntimeConfig;
-  runtimeByEntries?: RuntimeByEntriesConfig;
-}
-```
-
-具体配置字段的意义请参考【[配置](/docs/configure/app/source/alias)】。
-
-### useAppContext
-
-用于获取应用运行上下文。
-
-```ts
-const useAppContext: () => IAppContext
-
-interface IAppContext {
-  appDirectory: string;
-  configFile: string | false;
-  ip?: string;
-  port?: number;
-  distDirectory: string;
-  packageName: string;
-  srcDirectory: string;
-  sharedDirectory: string;
-  nodeModulesDirectory: string;
-  internalDirectory: string;
-  plugins: {
-    cli?: any;
-    server?: any;
-  }[];
-  entrypoints: Entrypoint[];
-  serverRoutes: ServerRoute[];
-  htmlTemplates: HtmlTemplates;
-}
-```
-
-### useResolvedConfigContext
-
-用于获取解析之后的最终配置。
-
-```ts
-const useResolvedConfigContext: () => NormalizedConfig
-
-interface NormalizedConfig {
-  source: NormalizedSourceConfig;
-  output: OutputConfig;
-  server: ServerConfig;
-  dev: DevConfig;
-  deploy: DeployConfig;
-  tools: NormalizedToolsConfig;
-  plugins: PluginConfig;
-  runtime: RuntimeConfig;
-  runtimeByEntries?: RuntimeByEntriesConfig;
-  _raw: UserConfig
-}
-```
-
-具体配置字段的意义请参考【[配置](/docs/configure/app/source/alias)】。
-
-### useHookRunners
-
-用于获取 Hooks 的执行器，并触发特定的 Hook 执行。
-
-```ts
-import type { CliPlugin } from '@modern-js/core';
-
-export default (): CliPlugin => ({
-  name: 'my-plugin',
-
-  async setup(api) {
-    const hookRunners = api.useHookRunners();
-    // 触发 afterBuild Hook
-    await hookRunners.afterBuild();
-  },
-});
-```

package/zh/components/deploy.md

@@ -1,60 +0,0 @@
-Modern.js 支持通过云平台一键部署应用。
-
-使用云平台部署应用，我们需要先开启部署功能。在项目根目录下执行 `pnpm run new`，进行如下选择：
-
-```bash
-? 请选择你想要的操作：启用可选功能
-? 启用可选功能：启用「部署」功能
-? 默认使用框架自带的专业 Web 服务器，是否调整：否
-? 请选择 CDN 平台：阿里云 OSS
-? 请选择云函数平台：阿里云 FC
-```
-
-安装依赖后，可以看到 package.json 中新增了两项依赖：
-
-```bash
-+ "@modern-js/plugin-lambda-fc": "^1"
-+ "@modern-js/plugin-cdn-fc": "^1"
-```
-
-我们可以在项目根目录下的 `.env` 中添加云平台必要的账号信息，以阿里云为例，包括 `accountId`、`secretId` 和 `secretKey`。使用 CDN 上传还需要配置 `bucketName`。
-
-部分**可暴露的、可以进入代码仓库**的环境变量可以放在项目的 `.env` 文件中，例如：
-
-```bash
-# 阿里云账号 ID
-CLOUD_ACCOUNT_ID
-# 阿里云 OSS Bucket 名称
-CLOUD_BUCKET_NAME
-```
-
-鉴权相关信息**必须在平台上配置，不能进入代码仓库**。为了方便本地测试，我们临时的在 `.env` 中添加：
-
-```bash
-# 阿里云访问 AK
-CLOUD_SECRET_ID
-# 阿里云访问 SK
-CLOUD_SECRET_KEY
-```
-
-:::warning 警告
-此处仅仅是用于本地测试，SecretID/SecretKey 必须从代码中移除，避免信息泄露。
-:::
-
-1. AccountID 在[阿里云账号中心页](https://account.console.aliyun.com/v2/#/basic-info/index)获取。
-
-2. SecretID（AccessKey ID），SecretKey（AccessKey Secret），在[用户信息管理页](https://usercenter.console.aliyun.com/#/manage/ak)获取。
-
-3. Bucket 信息可以从阿里云 OSS 的 [Bucket 列表](https://oss.console.aliyun.com/bucket)中获取。
-
-我们可以根据 OSS 的 Bucket 名称和 Region 名称拼接出 OSS 的临时域名，并设置为[静态资源域名前缀](/docs/configure/app/output/asset-prefix)：
-
-```js
-export default defineConfig({
-  output: {
-    assetPrefix: "https://{bucketName}.oss-{bucketRegion}.aliyuncs.com/"
-  }
-}
-```
-
-执行 `pnpm run deploy` 命令后，应用将会先执行构建，将静态资源上传到 OSS 以及将应用部署到阿里云 FC 中。

package/zh/components/dev-ide.md

@@ -1 +0,0 @@
-Modern.js 对 VS Code 等主流 IDE 提供了开箱即用的支持，具备 Lint 问题自动检测、自动修复，代码提交前的准入检查等功能特性，可以让代码开发更加高效和智能。详细介绍请参考【[确认编程环境](/docs/tutorials/first-app/c03-ide/3.1-setting-up)】。

package/zh/components/entry-name.md

@@ -1,15 +0,0 @@
-## 入口名称
-
-默认情况下，「入口名称」为页面入口所在目录的名称。
-
-例如，项目的目录结构如下时，入口名称为 `page-a` 和 `page-b`。
-
-```
-└── src
-    ├── page-a
-    │   └── App.jsx
-    └── page-b
-        └── App.jsx
-```
-
-如果使用 [source.entries](/docs/configure/app/source/entries) 自定义了页面入口，则「入口名称」为 `source.entries` 对象的 `key`。

package/zh/components/env-prepare.md

@@ -1 +0,0 @@
-开始之前，请参考【[环境准备](/docs/tutorials/first-app/c01-getting-started/1.1-prerequisites)】部分，确保本地环境正常。

package/zh/components/launch-bff-choices.md

@@ -1,6 +0,0 @@
-```bash
-? 请选择你想要的操作: 启用可选功能
-? 启用可选功能: 启用「BFF」功能
-? 请选择 BFF 类型：函数写法
-？请选择运行时框架：Express
-```

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

@@ -1,142 +0,0 @@
----
-sidebar_position: 3
-title: 定制 BFF Server
----
-
-BFF Server 与应用一体，共同开发、调试、部署，开发者通常只需要写函数即可。但有时，应用中会存在一些 BFF 函数的通用前置逻辑，例如权限校验。
-
-在[一体化 Web 专题](/docs/guides/advanced-features/web-server)中提到过，Modern.js 支持定制 Web Server。同样，Modern.js 也为 BFF Server 提供了扩展能力。
-
-Modern.js 允许开发者创建 `api/_app.ts` 文件，在该文件中对定制自己的 BFF Server。
-
-和 Web Server 相同，默认支持了 4 种主流的 Node.js Server 框架：Express、Koa、Egg、Nest，开发者可以根据自身偏好，选择合适的框架来编写 `api/_app.ts`。
-
-这里先以 Express 为例来展示一下用法，下一章节会详细介绍各个框架扩展的写法。
-
-首先创建项目，并[开启 BFF 功能](/docs/tutorials/first-app/c09-bff/9.2-enable-bff)，这时项目的目录结构是：
-
-```md
-.
-├── README.md
-├── api
-│   ├── _app.ts
-│   ├── index.ts
-│   └── info
-│       └── [type].ts
-├── modern.config.ts
-├── package.json
-├── pnpm-lock.yaml
-├── src
-│   ├── App.css
-│   ├── App.tsx
-│   ├── index.test.ts
-│   └── modern-app-env.d.ts
-└── tsconfig.json
-```
-
-创建一个 `api/login.ts` 文件用于实现登录：
-
-```ts
-import { useContext } from '@modern-js/runtime/server';
-
-export const post = async () => {
-  const ctx = useContext();
-  ctx.res.cookie('sid', Math.random());
-
-  return { code: 0, message: 'OK' };
-};
-```
-
-:::info 补充信息
-`useContext` API 用于获取请求上下文，具体用法可以看 [API 文档](/docs/apis/app/runtime/bff/use-context)。
-:::
-
-接下来修改 `api/_app.ts`，手写一个中间件用于权限校验：
-
-```ts
-import { hook } from '@modern-js/runtime/server';
-import { Request, Response, NextFunction } from 'express';
-
-export default hook(({ addMiddleware }) => {
-  addMiddleware(async (req: Request, res: Response, next: NextFunction) => {
-    if (req.url !== '/api/login') {
-      const sid = req?.cookies?.sid;
-      if (!sid) {
-        res.status(400);
-        res.json({ code: -1, message: 'need login' });
-      } else {
-        next();
-      }
-    } else {
-      next();
-    }
-  });
-});
-```
-
-然后添加一个普通的接口函数文件 `/api/hello.ts`：
-
-```ts
-export default async () => {
-  return 'Hello Modern.js';
-};
-```
-
-最后在前端 `/src/App.tsx` 添加接口的访问代码，直接使用一体化调用的方式：
-
-```ts
-import { useState, useEffect } from 'react';
-import { get as hello } from '@api/hello';
-
-export default () => {
-  const [text, setText] = useState('');
-
-  useEffect(() => {
-    async function fetchMyApi() {
-      const { message } = await hello();
-      setText(message);
-    }
-
-    fetchMyApi();
-  }, []);
-
-  return <p>{text}</p>;
-};
-```
-
-然后 `pnpm run dev` 启动项目，访问 [http://localhost:8080/](http://localhost:8080/) 会发现 `/api/hello` 的请求被拦截了：
-
-![Network](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/network2.png)
-
-我们再修改前端代码 `src/App.tsx`，在访问 `/api/hello` 前先调用登录接口：
-
-```ts
-import { useState, useEffect } from 'react';
-import { get as hello } from '@api/hello';
-import { post as login } from '@api/login';
-
-export default () => {
-  const [text, setText] = useState('');
-
-  useEffect(() => {
-    async function fetchAfterLogin() {
-      const { code } = await login();
-      if (code === 0) {
-        const { message } = await hello();
-        setText(message);
-      }
-    }
-    fetchAfterLogin();
-  }, []);
-
-  return <p>{text}</p>;
-};
-```
-
-刷新页面，可以看到 `/api/hello` 访问成功：
-
-![Network](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/network3.png)
-
-以上代码模拟了在 `/api/_app.ts` 中添加中间件的方式，实现了简易的登录功能。
-
-同样，可以在这个钩子文件中实现其他功能来扩展 BFF Server。

package/zh/guides/advanced-features/typescript.md

@@ -1,4 +0,0 @@
----
-title: TS 支持
-sidebar_position: 9
----