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

package/docs/zh/configure/app/dev/server.mdx

@@ -68,7 +68,6 @@ export default {
 };
 ```
 
-
 更多配置选项请参考 [Rsbuild - server.historyApiFallback](https://rsbuild.rs/zh/config/server/history-api-fallback) 文档。
 
 ### watch
@@ -97,8 +96,116 @@ const defaultOptions = {
   // - localhost
   // - 127.0.0.1
   // - [::1]
-  origin: defaultAllowedOrigins
+  origin: defaultAllowedOrigins,
 };
 ```
 
 更多配置选项和详细用法请参考 [Rsbuild - server.cors](https://rsbuild.rs/zh/config/server/cors) 文档。
+
+### proxy
+
+- **类型：** `Record<string, string> | Record<string, ProxyDetail>`
+- **默认值：** `undefined`
+
+代理请求到指定的服务上。
+
+```js
+export default {
+  dev: {
+    server: {
+      proxy: {
+        '/api': 'http://localhost:3000',
+      },
+    },
+  },
+};
+```
+
+此时，/api/users 请求将会代理到 http://localhost:3000/api/users。
+
+如果你不想传递 /api，可以通过 `pathRewrite` 重写请求路径：
+
+```js
+export default {
+  dev: {
+    server: {
+      proxy: {
+        '/api': {
+          target: 'http://localhost:3000',
+          pathRewrite: { '^/api': '' },
+        },
+      },
+    },
+  },
+};
+```
+
+DevServer Proxy 基于 [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware/tree/2.x) 实现。你可以使用 http-proxy-middleware 的所有配置项，具体可以查看文档。
+
+DevServer Proxy 完整类型定义为：
+
+```ts
+import type { Options as HttpProxyOptions } from 'http-proxy-middleware';
+
+type Filter = string | string[] | ((pathname: string, req: Request) => boolean);
+
+type ProxyDetail = HttpProxyOptions & {
+  bypass?: (
+    req: IncomingMessage,
+    res: ServerResponse,
+    proxyOptions: ProxyOptions,
+  ) => string | undefined | null | false;
+  context?: Filter;
+};
+
+type ProxyOptions =
+  | Record<string, string>
+  | Record<string, ProxyDetail>
+  | ProxyDetail[]
+  | ProxyDetail;
+```
+
+除了 http-proxy-middleware 的选项外，还支持 bypass 和 context 两个配置项：
+
+- bypass：根据函数的返回值绕过代理。
+  - 返回 `null` 或 `undefined` 会继续用代理处理请求。
+  - 返回 `false` 会返回 404 错误。
+  - 返回一个具体的服务路径，将会使用此路径替代原请求路径。
+- context：如果你想代理多个特定的路径到同一个目标，你可以使用 context 配置项。
+
+```js
+// 自定义 bypass 方法
+export default {
+  dev: {
+    server: {
+      proxy: {
+        '/api': {
+          target: 'http://localhost:3000',
+          bypass: function (req, res, proxyOptions) {
+            if (req.headers.accept.indexOf('html') !== -1) {
+              console.log('Skipping proxy for browser request.');
+              return '/index.html';
+            }
+          },
+        },
+      },
+    },
+  },
+};
+```
+
+```js
+// 代理多个路径到同一个目标
+export default {
+  dev: {
+    server: {
+      proxy: [
+        {
+          context: ['/auth', '/api'],
+          target: 'http://localhost:3000',
+        },
+      ],
+    },
+  },
+};
+```

package/docs/zh/configure/app/experiments/source-build.mdx

@@ -6,7 +6,6 @@ title: sourceBuild
 
 - **类型：** `boolean | PluginSourceBuildOptions`
 - **默认值：** `false`
-- **版本：** `MAJOR_VERSION.46.0`
 
 用于开启源码构建的能力。当开启此配置项时，Modern.js 会读取子项目 package.json 的 `source` 字段对应的源码文件，并进行编译。
 

package/docs/zh/configure/app/output/assets-retry.mdx

@@ -31,7 +31,7 @@ export type AssetsRetryOptions = {
 
 - **默认值：** `undefined`
 
-由于该能力会往 HTML 中和 [webpack/Rspack Runtime](https://rspack.rs/api/runtime-api/module-variables) 注入额外的一些运行时代码，因此我们默认关闭了该能力，如果需要开启该能力，你可以添加以下配置：
+由于该能力会往 HTML 中和 [Rspack Runtime](https://rspack.rs/api/runtime-api/module-variables) 注入额外的一些运行时代码，因此我们默认关闭了该能力，如果需要开启该能力，你可以添加以下配置：
 
 ```js
 export default {

package/docs/zh/configure/app/output/disable-inline-runtime-chunk.mdx

@@ -10,9 +10,9 @@ title: disableInlineRuntimeChunk
 用于控制是否将打包工具的 runtime 代码内联到 HTML 中。
 
 :::tip 什么是 runtimeChunk
-当构建完成后，会在 dist 目录生成 `builder-runtime.js` 文件，该文件为 webpack 或 Rspack 的 runtime 代码，即 runtimeChunk。
+当构建完成后，会在 dist 目录生成 `builder-runtime.js` 文件，该文件为 Rspack 的 runtime 代码，即 runtimeChunk。
 
-runtimeChunk 是一段运行时代码，它由 webpack 或 Rspack 提供，包含必要的模块处理逻辑，比如模块加载、模块解析等，具体可参考 [Runtime](https://webpack.js.org/concepts/manifest/#runtime)。
+runtimeChunk 是一段运行时代码，它由 Rspack 提供，包含必要的模块处理逻辑，比如模块加载、模块解析等，具体可参考 [Runtime Chunk](https://rspack.rs/config/optimization#optimizationruntimechunk)。
 
 :::
 

package/docs/zh/configure/app/output/filename.mdx

@@ -2,16 +2,14 @@
 title: filename
 ---
 
+# output.filename
+
 :::warning
 
 在 Modern.js 开发阶段，或是使用 Modern.js 服务器部署应用时，应避免使用该配置修改 html 产物文件名，会导致页面 404。
 
-通常情况下，无需修改 html 产物文件名。常见的需求是将 `main.html` 修改为 `index.html`，请使用 [source.mainEntryName](/configure/app/source/main-entry-name)。
-
 :::
 
-# output.filename
-
 - **类型：**
 
 ```ts

package/docs/zh/configure/app/output/temp-dir.mdx

@@ -7,7 +7,7 @@ title: tempDir
 - **类型：** `string`
 - **默认值：** `''`
 
-项目开发或构建时，Modern.js 会生成真实的 Webpack 入口和 HTML 模板，并放在临时目录下。
+项目开发或构建时，Modern.js 会生成真实的 Rspack 入口和 HTML 模板，并放在临时目录下。
 
 如果希望由多个配置同时启动某项目，可以通过该配置，将文件生成到不同的临时目录下，避免相互干扰。配置可以是相对路径或绝对路径，但应避免项目外的路径。
 
@@ -17,6 +17,6 @@ title: tempDir
 export default {
   output: {
     tempDir: path.join('node_modules', '.temp-dir'),
-  }
-}
+  },
+};
 ```

package/docs/zh/configure/app/performance/build-cache.mdx

@@ -19,7 +19,7 @@ type BuildCacheConfig =
       cacheDigest?: Array<string | undefined>;
       /**
        * 一个包含构建依赖的文件数组。
-       * Rspack / webpack 将使用其中每个文件的哈希值来判断持久化缓存是否失效。
+       * Rspack 将使用其中每个文件的哈希值来判断持久化缓存是否失效。
        */
       buildDependencies?: string[];
     }

package/docs/zh/configure/app/performance/profile.mdx

@@ -7,7 +7,7 @@ title: profile
 - **类型：** `boolean`
 - **默认值：** `false`
 
-是否捕获每个模块的耗时信息，对应 Rspack 的 [profile](https://webpack.js.org/configuration/other-options/#profile) 配置。
+是否捕获每个模块的耗时信息，对应 Rspack 的 [profile](https://rspack.rs/zh/config/other-options#profile) 配置。
 
 import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 

package/docs/zh/configure/app/plugins.mdx

@@ -10,8 +10,7 @@
 该选项**用于配置框架 CLI 插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
 
 - 配置 Rsbuild 插件，请使用 [builderPlugins](/configure/app/builder-plugins) 配置项。
-- 配置 Rspack 或 webpack 插件，请使用 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置项。
-- 配置 Babel 插件，请使用 [tools.babel](/configure/app/tools/babel) 配置项。
+- 配置 Rspack 插件，请使用 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置项。
 - 配置框架 Runtime 插件，请使用 [runtime 配置文件 plugins](/configure/app/runtime/plugins) 配置项。
 
 ## 示例

package/docs/zh/configure/app/runtime/router.mdx

@@ -4,10 +4,6 @@ title: router
 
 # router
 
-import RouterLegacyTip from "@site-docs/components/router-legacy-tip"
-
-<RouterLegacyTip />
-
 - **类型：** `boolean | Object`
 - **默认值：** `false`
 

package/docs/zh/configure/app/security/sri.mdx

@@ -10,7 +10,6 @@ title: sri
 type SriOptions = {
   hashFuncNames?: [string, ...string[]];
   enabled?: 'auto' | true | false;
-  hashLoading?: 'eager' | 'lazy'; // only support webpack
 };
 ```
 

package/docs/zh/configure/app/source/alias.mdx

@@ -12,7 +12,7 @@ type Alias = Record<string, string | false | (string | false)[]> | Function;
 
 - **默认值:** `undefined`
 
-设置文件引用的别名，对应 Rspack 的 [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealias) 配置。
+设置文件引用的别名，对应 Rspack 的 [resolve.alias](https://rspack.rs/config/resolve#resolvealias) 配置。
 
 :::tip
 对于 TypeScript 项目，你只需要在 `tsconfig.json` 中配置 [compilerOptions.paths](https://www.typescriptlang.org/tsconfig#paths) 即可，Rsbuild 会自动识别它，不需要额外配置 `source.alias` 字段，详见 [「路径别名」](https://modernjs.dev/guides/basic-features/alias.html)。

package/docs/zh/configure/app/source/enable-async-entry.mdx

@@ -7,7 +7,7 @@ title: enableAsyncEntry
 - **类型：** `boolean`
 - **默认值：** `false`
 
-该选项用于 webpack 模块联邦（Module Federation）场景。
+该选项用于 Rspack 模块联邦（Module Federation）场景。
 
 开启此选项后，Modern.js 会通过 dynamic import 来包裹自动生成的入口文件（Asynchronous Boundaries），使页面代码可以消费模块联邦生成的远程模块。
 

package/docs/zh/configure/app/source/include.mdx

@@ -9,10 +9,7 @@ title: include
 
 ```ts
 const defaultInclude = [
-  [
-    { not: /[\\/]node_modules[\\/]/ },
-    /\.(?:ts|tsx|jsx|mts|cts)$/,
-  ],
+  [{ not: /[\\/]node_modules[\\/]/ }, /\.(?:ts|tsx|jsx|mts|cts)$/],
 ];
 ```
 
@@ -28,10 +25,7 @@ const defaultInclude = [
 const defaultInclude = [
   [
     {
-      and: [
-        APP_ROOT,
-        { not: /[\\/]node_modules[\\/]/ }
-      ]
+      and: [APP_ROOT, { not: /[\\/]node_modules[\\/]/ }],
     },
     /\.(?:ts|tsx|jsx|mts|cts)$/,
   ],
@@ -41,14 +35,6 @@ const defaultInclude = [
 与新版本的差异是，非当前项目目录的 `.js`、`.mjs`、`.cjs` 文件不会被编译。
 :::
 
-## Rspack
-
 import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
 <RsbuildConfig configName="source.include" />
-
-## Webpack
-
-为了保证历史项目可以正常运行，Webpack 编译时，`source.include` 与 Rsbuild 1.4 版本前的默认值一致。
-
-

package/docs/zh/configure/app/tools/dev-server.mdx

@@ -18,7 +18,7 @@ Modern.js 中并没有直接使用 [webpack-dev-server](https://webpack.js.org/a
 #### compress
 
 :::warning
-**Deprecated**：该配置已废弃，请使用 [dev.server.compress](https://modernjs.dev/configure/app/dev/server) 代替。
+**Deprecated**：该配置已废弃，请使用 [dev.server.compress](/configure/app/dev/server) 代替。
 :::
 
 - **类型：** `boolean`
@@ -41,7 +41,7 @@ export default {
 #### headers
 
 :::warning
-**Deprecated**：该配置已废弃，请使用 [dev.server.headers](https://modernjs.dev/configure/app/dev/server) 代替。
+**Deprecated**：该配置已废弃，请使用 [dev.server.headers](/configure/app/dev/server) 代替。
 :::
 
 - **类型：** `Record<string, string>`
@@ -64,7 +64,7 @@ export default {
 #### historyApiFallback
 
 :::warning
-**Deprecated**：该配置已废弃，请使用 [dev.server.historyApiFallback](https://modernjs.dev/configure/app/dev/server) 代替。
+**Deprecated**：该配置已废弃，请使用 [dev.server.historyApiFallback](/configure/app/dev/server) 代替。
 :::
 
 - **类型：** `boolean | ConnectHistoryApiFallbackOptions`
@@ -87,7 +87,7 @@ export default {
 #### proxy
 
 :::warning
-**Deprecated**：该配置已废弃，请使用 [dev.server.proxy](https://modernjs.dev/configure/app/dev/server) 代替。
+**Deprecated**：该配置已废弃，请使用 [dev.server.proxy](/configure/app/dev/server) 代替。
 :::
 
 - **类型：** `Record<string, string> | Record<string, ProxyDetail>`
@@ -199,7 +199,7 @@ export default {
 #### watch
 
 :::warning
-**Deprecated**：该配置已废弃，请使用 [dev.server.watch](https://modernjs.dev/configure/app/dev/server) 代替。
+**Deprecated**：该配置已废弃，请使用 [dev.server.watch](/configure/app/dev/server) 代替。
 :::
 
 - **类型：** `boolean`

package/docs/zh/configure/app/usage.mdx

@@ -246,18 +246,6 @@ Modern.js 导出了 `AppUserConfig` 类型，对应 Modern.js 配置对象的类
 ```ts title="modern.config.ts"
 import type { AppUserConfig } from '@modern-js/app-tools';
 
-const config: AppUserConfig = {
-  tools: {
-    webpack: {},
-  },
-};
-```
-
-当你使用 Rspack 作为打包工具时，由于 webpack 和 Rspack 的配置类型存在一些差异，需要为 `AppUserConfig` 指定 `` 泛型：
-
-```ts title="modern.config.ts"
-import type { AppUserConfig } from '@modern-js/app-tools';
-
 const config: AppUserConfig = {
   tools: {
     rspack: {},

package/docs/zh/guides/advanced-features/bff/_meta.json

@@ -1 +1,9 @@
-["function", "frameworks", "extend-server", "sdk", "upload", "cross-project"]
+[
+  "function",
+  "frameworks",
+  "operators",
+  "extend-server",
+  "sdk",
+  "upload",
+  "cross-project"
+]

package/docs/zh/guides/advanced-features/bff/frameworks.mdx

@@ -7,20 +7,6 @@ title: 运行时框架
 
 Modern.js 以 [Hono.js](https://hono.dev/) 作为 BFF 和 Server 运行时框架，因此可以基于 Hono.js 生态[扩展 BFF Server](/guides/advanced-features/bff/extend-server.html)。
 
-## 获取请求上下文
-
-在 BFF 函数中，有时需要获取请求上下文，来处理更多逻辑。此时，你可以通过 `useHonoContext` 来获取：
-
-```ts title="api/lambda/hello.ts"
-import { useHonoContext } from '@modern-js/plugin-bff/server'
-export const get = async () => {
-  const c = useHonoContext();
-  console.info(`access url: ${c.req.url}`);
-  return 'Hello Modern.js'
-};
-```
-
-:::info
-详细内容可以参考 [useHonoContext](/apis/app/runtime/bff/use-hono-context)。
-:::
+import Hono from '@site-docs/components/hono';
 
+<Hono />