@modern-js/main-doc 2.67.4 → 2.67.6

package/docs/zh/configure/app/tools/rspack.mdx

@@ -1,6 +1,5 @@
 ---
 title: rspack
-configName: tools.rspack
 ---
 
 # tools.rspack
@@ -10,6 +9,6 @@ configName: tools.rspack
 
 `tools.rspack` 选项用于修改 [Rspack](https://rspack.dev/) 的配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.rspack" />

package/docs/zh/configure/app/tools/style-loader.mdx

@@ -1,6 +1,5 @@
 ---
 title: styleLoader
-configName: tools.styleLoader
 ---
 
 # tools.styleLoader
@@ -10,6 +9,6 @@ configName: tools.styleLoader
 
 通过 `tools.styleLoader` 可以设置 [style-loader](https://github.com/webpack-contrib/style-loader) 的配置项。
 
-import RsbuildConig from '@site-docs/components/rsbuild-config-tooltip';
+import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 
-<RsbuildConig />
+<RsbuildConfig configName="tools.styleLoader" />

package/docs/zh/configure/app/tools/swc.mdx

@@ -21,7 +21,7 @@ import SWC from '@site-docs/components/swc.mdx';
 
 通过 `tools.swc` 可以设置 Rspack [builtin:swc-loader](https://rspack.dev/zh/guide/features/builtin-swc-loader) 的选项。
 
-```
+```ts
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig<'rspack'>({

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

@@ -13,7 +13,7 @@ Modern.js 不支持同时在 `package.json` 中和 `modern.config.ts` 中配置
 
 **运行时配置**可以在 `src/modern.runtime.(ts|js|mjs)` 文件中配置。
 
-**服务端运行时配置**可以在根路径下的 `modern.server-runtime.config.(ts|js|mjs)` 中进行配置。
+**服务端运行时配置**可以在 `server/modern.server.(ts|js|mjs)` 中进行配置。
 
 ## 编译时配置
 

package/docs/zh/guides/advanced-features/bff/extend-server.mdx

@@ -2,31 +2,39 @@
 
 部分应用中，开发者可能希望对所有 BFF 函数做统一的处理，例如鉴权、日志、数据处理等。
 
-Modern.js 提供了两种方式，允许开发者根据运行时框架自由扩展 BFF Server。
+Modern.js 支持用户通过 [Middleware](/guides/advanced-features/web-server.html#middleware) 的方式来自由扩展 BFF Server。
 
-## 中间件
 
-开发者可以在编写 `api/_app.ts` 文件中编写中间件，用来扩展 BFF Server。以 Express 作为运行时框架为例，介绍如何手写一个中间件，添加权限校验：
+## 使用中间件
 
-```ts title="api/_app.ts"
-import { hook } from '@modern-js/runtime/server';
-import { Request, Response, NextFunction } from 'express';
+开发者可以在 `server/modern.server.ts` 中通过 配置 middlewares 来使用中间件。下面介绍如何手写一个 BFF 中间件，添加权限校验：
 
-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();
+
+```ts title="server/modern.server.ts"
+import {
+  type MiddlewareHandler,
+  defineServerConfig,
+} from '@modern-js/server-runtime';
+
+const requireAuthForApi: MiddlewareHandler = async (c, next) => {
+  if (c.req.path.startsWith('/api') && c.req.path !== '/api/login') {
+    const sid = c.req.cookie('sid');
+    if (!sid) {
+      return c.json({ code: -1, message: 'need login' }, 400);
     }
-  });
+  }
+  await next();
+};
+
+export default defineServerConfig({
+  middlewares: [
+    {
+      name: 'require-auth-for-api',
+      handler: requireAuthForApi,
+    },
+  ]
 });
+
 ```
 
 
@@ -97,60 +105,4 @@ export default () => {
 
 ![Network](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/network3.png)
 
-以上代码模拟了在 `/api/_app.ts` 中添加中间件的方式，实现了简易的登录功能。同样，可以在这个钩子文件中实现其他功能来扩展 BFF Server。
-
-:::info
-不同运行时框架中，中间件的写法不一定相同，详情可见[运行时框架](/guides/advanced-features/bff/frameworks)。
-
-:::
-
-## 定义 Server 实例
-
-除了中间件之外，还可以通过 `api/app.ts` 文件来定义 BFF Server 的实例。开发者需要默认导出一个能被运行时框架插件识别的实例。这里简单展示一下 Koa 和 Express 如何定义 Server 实例。
-
-import { Tabs, Tab as TabItem } from "@theme";
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="api/app.ts"
-import express from 'express';
-
-const app = express();
-app.use(async (req, res, next) => {
-  console.info(`access url: ${req.url}`);
-  next();
-});
-
-export default app;
-```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
-```ts title="api/app.ts"
-import koa from 'koa';
-
-const app = new Koa();
-app.use(async (ctx, next) => {
-  console.info(`access url: ${ctx.url}`);
-  await next();
-});
-
-export default app;
-```
-
-  </TabItem>
-</Tabs>
-
-在复杂的 BFF 逻辑中，定义 Server 实例可以更方便通过一个入口来组织代码逻辑，设计目录结构。在这个文件中，可以执行初始化逻辑，添加全局中间件，声明路由，甚至扩展原有框架。
-
-BFF 函数定义的路由会在 `app.ts` 文件定义的路由之后注册，所以在这里你也可以拦截 BFF 函数定义的路由，进行预处理或是提前响应。
-
-:::note
-此时，如果应用中同时存在 `api/_app.ts`，则定义的中间件会被放在 `api/app.ts` 导出实例的最后执行。多数情况下，中间件就能覆盖大多数 BFF 函数的定制需求。只有当应用的服务端逻辑比较复杂时，才需要自定义 Server 实例。
-:::
-
-:::caution
-当应用中没有 `api/app.ts` 的时候，Modern.js 默认会添加 [koa-body](https://www.npmjs.com/package/koa-body)。当应用中存在 `api/app.ts` 时，如果开发者希望使用带有 Body 的 BFF 函数，需要**自行添加** `koa-body`。
-:::
+以上代码模拟了在 `server/Modern.server.ts` 中定义中间件的方式，实现了简易的登录功能。同样，可以在这个配置文件中实现其他功能来扩展 BFF Server。

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

@@ -5,82 +5,22 @@ title: 运行时框架
 
 # 运行时框架
 
-Modern.js 的 BFF 支持不同的运行时框架，当前 Modern.js 的 BFF 支持两种运行时框架 [Express.js](https://expressjs.com/) 和 [Koa.js](https://koajs.com/)。
-
-使用不同运行时框架时，有部分 API 会存在差异。
+Modern.js 以 [Hono.js](https://hono.dev/) 作为 BFF 和 Server 运行时框架，因此可以基于 Hono.js 生态[扩展 BFF Server](/guides/advanced-features/bff/extend-server.html)。
 
 ## 获取请求上下文
 
-在 BFF 函数中，有时需要获取请求上下文，来处理更多逻辑。此时，根据不同的运行时框架，你需要从通过不同的 API 来获取：
-
-import { Tabs, Tab as TabItem } from "@theme";
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="api/lambda/hello.ts"
-import { useContext } from '@modern-js/runtime/express'
-export const get = async () => {
-  const { req } = useContext();
-  console.info(`access url: ${req.url}`);
-  return 'Hello Modern.js'
-};
-```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
+在 BFF 函数中，有时需要获取请求上下文，来处理更多逻辑。此时，你可以通过 `useHonoContext` 来获取：
 
 ```ts title="api/lambda/hello.ts"
-import { useContext } from '@modern-js/runtime/koa'
+import { useHonoContext } from '@modern-js/plugin-bff/hono'
 export const get = async () => {
-  const ctx = useContext();
-  console.info(`access url: ${req.url}`);
+  const c = useHonoContext();
+  console.info(`access url: ${c.req.url}`);
   return 'Hello Modern.js'
 };
 ```
 
-  </TabItem>
-</Tabs>
-
 :::info
-详细内容可以参考 [useContext](/apis/app/runtime/bff/use-context)。
+详细内容可以参考 [useHonoContext](/apis/app/runtime/bff/use-hono-context)。
 :::
 
-## 使用中间件
-
-在 BFF 函数中，有时需要使用中间件，来处理更多逻辑。此时，根据不同的运行时框架，你需要从通过不同的 API 来获取：
-
-<Tabs>
-  <TabItem value="express" label="Express.js" default>
-
-```ts title="api/_app.ts"
-import { hook } from '@modern-js/runtime/express';
-
-export default hook(({ addMiddleware }) => {
-  addMiddleware((req, res, next) => {
-    req.query.id = 'koa';
-    next();
-  });
-});
-```
-
-  </TabItem>
-  <TabItem value="koa" label="Koa.js">
-
-```ts title="api/_app.ts"
-import { hook } from '@modern-js/runtime/koa';
-
-export default hook(({ addMiddleware }) => {
-  addMiddleware(async (ctx, next) => {
-    ctx.req.query.id = 'koa';
-    await next();
-  });
-});
-```
-
-  </TabItem>
-</Tabs>
-
-:::info
-详细内容可以参考 [hook](/apis/app/runtime/bff/hook)。
-:::

package/docs/zh/guides/advanced-features/page-performance/_meta.json

@@ -1 +1 @@
-["code-split", "inline-assets", "optimize-bundle"]
+["code-split", "inline-assets", "optimize-bundle", "react-compiler"]

package/docs/zh/guides/advanced-features/page-performance/react-compiler.mdx

@@ -0,0 +1,44 @@
+# React Compiler
+
+React Compiler 是 React 19 引入的一个实验性编译器，它可以自动优化你的 React 代码。
+
+在开始使用 React Compiler 之前，建议阅读 [React Compiler 文档](https://zh-hans.react.dev/learn/react-compiler)，以了解 React Compiler 的功能、当前状态和使用方法。
+
+## 如何使用
+
+在 Modern.js 中使用 React Compiler 的步骤如下：
+
+1. Modern.js 目前项目还未正式支持 React 19，可以在 React 17 或 18 项目中安装 `react-compiler-runtime@rc`，以允许编译后的代码在 19 之前的版本上运行。
+
+2. 目前 React Compiler 仅提供了 Babel 插件，你需要安装 `babel-plugin-react-compiler`。
+
+3. 在你的 Modern.js 配置文件中注册 Babel 插件：
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  runtime: {
+    router: true,
+  },
+  tools: {
+    babel(_, { addPlugins }) {
+      addPlugins([
+        [
+          'babel-plugin-react-compiler',
+          {
+            target: '18',
+          },
+        ],
+      ]);
+    },
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack',
+    }),
+  ],
+});
+```
+
+> 详细代码可以参考：[Modern.js & React Compiler 示例项目](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/react-compiler)