@modern-js/main-doc 3.0.1 → 3.0.2

package/docs/zh/configure/app/resolve/alias-strategy.mdx

@@ -7,7 +7,7 @@ title: aliasStrategy
 - **类型:** `'prefer-tsconfig' | 'prefer-alias'`
 - **默认值:** `'prefer-tsconfig'`
 
-设置路径别名解析的策略，用于控制 `tsconfig.json` 中的 paths 选项与 Rsbuild 的 [resolve.alias](https://rsbuild.rs/config/resolve/alias) 选项之间的优先级关系。
+设置路径别名解析的策略，用于控制 `tsconfig.json` 中的 paths 选项与 Rsbuild 的 [resolve.alias](https://v2.rsbuild.dev/config/resolve/alias) 选项之间的优先级关系。
 
 import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';
 

package/docs/zh/configure/app/resolve/dedupe.mdx

@@ -6,7 +6,7 @@ title: dedupe
 
 - **类型:** `string[]`
 
-强制 Rsbuild 从项目根目录解析指定的包，这可以用于移除重复包和减少包大小。对应 Rsbuild 的 [resolve.dedupe](https://rsbuild.rs/config/resolve/dedupe) 配置。
+强制 Rsbuild 从项目根目录解析指定的包，这可以用于移除重复包和减少包大小。对应 Rsbuild 的 [resolve.dedupe](https://v2.rsbuild.dev/config/resolve/dedupe) 配置。
 
 
 import RsbuildConfig from '@site-docs/components/rsbuild-config-tooltip';

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

@@ -18,7 +18,7 @@ type SriOptions = {
 为 HTML 所引入的 `<script>` 和 `<link rel="stylesheet">` 标签添加完整性属性 —— `integrity`，使浏览器能够验证引入资源的完整性，以此防止下载的资源被篡改。
 
 :::info
-SRI 的具体介绍可以参考 [Rsbuild security.sri](https://rsbuild.rs/zh/config/security/sri)。
+SRI 的具体介绍可以参考 [Rsbuild security.sri](https://v2.rsbuild.dev/zh/config/security/sri)。
 
 该配置类型和 Rsbuild 不完全一致，在构建时将自动进行转换。
 :::

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

@@ -21,8 +21,8 @@ export default defineConfig({
 
 :::tip 前置条件
 在启用 RSC 之前，请确保：
-1. React 和 React DOM 已升级到 19 版本（建议 19.2.3 以上版本）
-2. 已安装 `react-server-dom-webpack` 依赖
+1. React 和 React DOM 已升级到 19 版本（建议 19.2.4 以上版本）
+2. 已安装 `react-server-dom-rspack@0.0.1-beta.0` 依赖
 
 :::
 

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

@@ -21,7 +21,7 @@ const defaultDecorators = {
 ```
 
 :::warning
-该配置项的使用方式与 Rsbuild 一致，但默认值不同。详细信息请参考 [Rsbuild - source.decorators](https://rsbuild.rs/zh/config/source/decorators)。
+该配置项的使用方式与 Rsbuild 一致，但默认值不同。详细信息请参考 [Rsbuild - source.decorators](https://v2.rsbuild.dev/zh/config/source/decorators)。
 :::
 
 我们发现大部分的项目仍使用 `legacy` 版本的装饰器语法，因此默认值为 `legacy`。

package/docs/zh/configure/app/tools/bundler-chain.mdx

@@ -30,4 +30,4 @@ Bundler chain 是基于 Rspack 配置 API 实现的链式配置工具，你可
 
 > `tools.bundlerChain` 的执行时机早于 tools.rspack，因此会被 tools.rspack 中的修改所覆盖。
 
-更多信息可参考 [Rsbuild#tools.bundlerChain](https://rsbuild.rs/zh/config/tools/bundler-chain)。
+更多信息可参考 [Rsbuild#tools.bundlerChain](https://v2.rsbuild.dev/zh/config/tools/bundler-chain)。

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

@@ -35,7 +35,7 @@ export default defineConfig({
 });
 ```
 
-更多用法可参考 [Rsbuild - tools.swc](https://rsbuild.rs/zh/config/tools/swc)。
+更多用法可参考 [Rsbuild - tools.swc](https://v2.rsbuild.dev/zh/config/tools/swc)。
 
 ### 注册 SWC 插件
 
@@ -66,4 +66,4 @@ export default {
 
 如果你遇到了以上问题，通常可行的解决方法是将 Modern.js 和 SWC 插件都升级到最新版本。
 
-详情可参考 [Rsbuild - SWC 插件版本](https://rsbuild.rs/zh/guide/basic/configure-swc#swc-%E6%8F%92%E4%BB%B6%E7%89%88%E6%9C%AC)。
+详情可参考 [Rsbuild - SWC 插件版本](https://v2.rsbuild.dev/zh/guide/configuration/swc#swc-%E6%8F%92%E4%BB%B6%E7%89%88%E6%9C%AC)。

package/docs/zh/guides/advanced-features/compatibility.mdx

@@ -55,7 +55,7 @@ export default {
 大多数场景下，推荐优先使用 `.browserslistrc` 文件，而不是使用 `overrideBrowserslist` 配置。因为 `.browserslistrc` 文件是官方定义的配置文件，通用性更强，可以被社区中的其他库识别。
 
 :::tip
-请查看 [Rsbuild - 设置浏览器范围](https://rsbuild.rs/zh/guide/advanced/browserslist) 来了解更多内容。
+请查看 [Rsbuild - 设置浏览器范围](https://v2.rsbuild.dev/zh/guide/advanced/browserslist) 来了解更多内容。
 :::
 
 import UpgradeBrowserslist from '@site-docs/components/upgrade-browserslist';

package/docs/zh/guides/advanced-features/page-performance/optimize-bundle.mdx

@@ -98,4 +98,4 @@ export default {
 
 良好的拆包策略对于提升应用的加载性能是十分重要的，可以充分利用浏览器的缓存机制，减少请求数量，加快页面加载速度。
 
-在 Modern.js 中内置了[多种拆包策略](https://rsbuild.rs/zh/guide/optimization/split-chunk)，可以满足大部分应用的需求，你也可以根据自己的业务场景，自定义拆包配置。
+在 Modern.js 中内置了[多种拆包策略](https://v2.rsbuild.dev/zh/guide/optimization/code-splitting)，可以满足大部分应用的需求，你也可以根据自己的业务场景，自定义拆包配置。

package/docs/zh/guides/basic-features/css/css.mdx

@@ -12,20 +12,20 @@ Modern.js 内置了社区流行的 CSS 预处理器，包括 Less 和 Sass。
 
 默认情况下，你不需要对 Less 和 Sass 进行任何配置。如果你有自定义 loader 配置的需求，可以通过配置 [tools.less](/configure/app/tools/less)、[tools.sass](/configure/app/tools/sass) 来进行设置。
 
-你也可以在 Modern.js 中使用 Stylus，只需要安装 Rsbuild 提供的 Stylus 插件即可，使用方式请参考 [Stylus 插件](https://rsbuild.rs/zh/plugins/list/plugin-stylus)。
+你也可以在 Modern.js 中使用 Stylus，只需要安装 Rsbuild 提供的 Stylus 插件即可，使用方式请参考 [Stylus 插件](https://v2.rsbuild.dev/zh/plugins/list/plugin-stylus)。
 
 ## 使用 PostCSS
 
 Modern.js 内置了 [PostCSS](https://postcss.org/) 来转换 CSS 代码。
 
-请阅读 [Rsbuild - 使用 PostCSS](https://rsbuild.rs/zh/guide/styling/css-usage) 了解更多用法。
+请阅读 [Rsbuild - 使用 PostCSS](https://v2.rsbuild.dev/zh/guide/styling/css-usage) 了解更多用法。
 
 ## 使用 Lightning CSS
 
 Modern.js 支持使用 [Lightning CSS](https://lightningcss.dev/) 来转换 CSS 代码，可以通过配置 [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader) 来开启此功能。
 
-请阅读 [Rsbuild - 使用 Lightning CSS](https://rsbuild.rs/zh/guide/styling/css-usage#lightning-css) 了解更多用法。
+请阅读 [Rsbuild - 使用 Lightning CSS](https://v2.rsbuild.dev/zh/guide/styling/css-usage#lightning-css) 了解更多用法。
 
 ## 使用 Uno CSS
 
-请阅读 [Rsbuild - 使用 UnoCSS](https://rsbuild.rs/zh/guide/basic/unocss) 了解更多用法。
+请阅读 [Rsbuild - 使用 UnoCSS](https://v2.rsbuild.dev/zh/guide/styling/unocss) 了解更多用法。

package/docs/zh/guides/basic-features/css/tailwindcss.mdx

@@ -6,8 +6,8 @@
 
 在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，你只需要按照 Rsbuild 操作步骤进行配置，Rsbuild 支持 Tailwind CSS v3 和 v4 版本：
 
-- [Tailwind CSS v3](https://rsbuild.rs/zh/guide/styling/tailwindcss-v3#tailwind-css-v3)
-- [Tailwind CSS v4](https://rsbuild.rs/zh/guide/styling/tailwindcss)
+- [Tailwind CSS v3](https://v2.rsbuild.dev/zh/guide/styling/tailwindcss-v3#tailwind-css-v3)
+- [Tailwind CSS v4](https://v2.rsbuild.dev/zh/guide/styling/tailwindcss)
 
 ## Tailwind CSS 自动补全
 

package/docs/zh/guides/basic-features/render/rsc.mdx

@@ -21,12 +21,12 @@ React Server Components (RSC) 是一种新的组件类型，允许在服务端
 
 ## 快速开始
 
-1. **确保 React 和 React DOM 升级到 19 版本**（建议 19.2.3 以上版本）
+1. **确保 React 和 React DOM 升级到 19 版本**（建议 19.2.4 以上版本）
 
-2. **安装 `react-server-dom-webpack` 依赖**
+2. **安装 `react-server-dom-rspack@0.0.1-beta.0` 依赖**
 
 ```bash
-npm install react-server-dom-webpack
+npm install react-server-dom-rspack@0.0.1-beta.0
 ```
 
 :::warning 注意事项
@@ -49,8 +49,8 @@ export default defineConfig({
 ```
 
 :::info 旧 CSR 项目迁移
-如果是 CSR 项目，且项目中使用了 Modern.js 的 data loader，开启 RSC 后，data loader 默认会在服务端执行。
-为了与原有行为保持一致，需要先将所有的 `.data.ts` 文件改为 `.data.client.ts`。
+如果是 CSR 项目，且项目中使用了 Modern.js 的 Data Loader，开启 RSC 后，Data Loader 默认会在服务端执行。
+详细的迁移指南请参考 [CSR 项目迁移到 RSC](#csr-项目迁移到-rsc)。
 
 :::
 
@@ -233,11 +233,225 @@ export default function DashboardPage() {
 
 例如，假设 `layout.tsx` 是一个 Client Component（需要客户端交互），你仍然可以将 `page.tsx` 设置为 Server Component（用于数据获取和渲染）。这种方式提供了极大的灵活性，也使非 RSC 项目可以渐进式地迁移至 RSC 项目。
 
-## 注意事项
+## Server Component 与 Data Loader
+
+在 RSC 项目中，你有两种方式获取数据：在 Server Component 中直接获取，或使用 [Data Loader](/guides/basic-features/data/data-fetch)。两种方式各有优势，可以根据场景灵活选择。
+
+### 两种数据获取方式对比
+
+| 特性 | Server Component 中获取 | Data Loader 中获取 |
+| --- | --- | --- |
+| 避免请求瀑布 | 需要手动优化 | ✅ 自动并行执行 |
+| 组件内聚性 | ✅ 数据和 UI 在同一处 | 数据逻辑分离到单独文件 |
+| 维护性 | ✅ 更易理解和维护 | 需要维护额外文件 |
+| 类型安全 | ✅ 天然类型推断 | 需要手动管理类型 |
+
+**一般情况下，我们推荐在 Server Component 中获取数据**，因为在服务端瀑布请求对性能的影响较小，这种方式使组件更加内聚，数据获取逻辑和 UI 渲染在同一处，更易于理解和维护。但如果你的页面有多个独立的数据源，且希望完全避免请求瀑布问题，Data Loader 的并行执行特性会更有优势。
+
+### RSC 项目中 Data Loader 的执行环境
+
+在 RSC 项目中，Data Loader 的执行环境与文件命名有关：
+
+- **`*.data.ts`**：只在**服务端**执行，Client Component 和 Server Component 都可以消费其数据
+- **`*.data.client.ts`**：只在**客户端**执行
+
+```bash
+.
+└── routes
+    └── user
+        ├── page.tsx           # 路由组件（可以是 Server 或 Client Component）
+        ├── page.data.ts       # 服务端执行，数据可被任何组件消费
+        └── page.data.client.ts # 客户端执行
+```
+
+在 Modern.js RSC 项目中，Server Component 可以通过 `loaderData` prop 接收 Data Loader 返回的数据：
+
+```tsx title="routes/user/page.tsx"
+// Server Component 通过 props 接收 loaderData
+export default function UserPage({ loaderData }: { loaderData: { name: string } }) {
+  return <div>Welcome, {loaderData.name}</div>;
+}
+```
+
+```tsx title="routes/user/page.tsx"
+'use client';
+// Client Component 同样可以通过 props 接收 loaderData
+export default function UserPage({ loaderData }: { loaderData: { name: string } }) {
+  return <div>Welcome, {loaderData.name}</div>;
+}
+```
+
+### Data Loader 返回 Server Component
+
+在 Modern.js RSC 项目中，Data Loader 有一个强大的特性：**可以返回 Server Component**。这对于渐进式迁移非常有帮助，允许你在 Client Component 中渲染服务端生成的内容。
+
+```tsx title="routes/user/layout.data.tsx"
+// Server Component 定义在 data loader 文件中
+function UserProfile() {
+  return <div>User Profile (Server Rendered)</div>;
+}
+
+export const loader = async () => {
+  const userData = await fetchUserData();
+
+  return {
+    user: userData,
+    // 返回一个 Server Component 作为数据的一部分
+    ProfileComponent: <UserProfile />,
+  };
+};
+```
+
+```tsx title="routes/user/layout.tsx"
+'use client';
+import { Outlet } from '@modern-js/runtime/router';
+
+export default function UserLayout({
+  loaderData,
+}: {
+  loaderData: { user: any; ProfileComponent: React.ReactNode };
+}) {
+  const { user, ProfileComponent } = loaderData;
+
+  return (
+    <div>
+      {/* 在 Client Component 中直接渲染 Server Component */}
+      {ProfileComponent}
+      <div>User: {user.name}</div>
+      <Outlet />
+    </div>
+  );
+}
+```
+
+## Server Component API
+
+在 RSC 场景下，Modern.js 提供了一系列服务端 API，允许你在 Server Component 中直接操作 HTTP 请求和响应。这些 API 只能在 Server Component 中使用。
+
+### getRequest
+
+获取当前请求的 `Request` 对象，用于访问请求信息（如 URL、查询参数、请求头等）。
+
+```tsx title="routes/page.tsx"
+import { getRequest } from '@modern-js/runtime';
+
+export default async function Page() {
+  const request = getRequest();
+  const url = new URL(request.url);
+  const searchParams = url.searchParams;
+  const query = searchParams.get('q');
+
+  return <div>Search query: {query}</div>;
+}
+```
+
+### setHeaders
+
+设置 HTTP 响应头。可以用于设置自定义响应头，如缓存控制、CORS 等。
+
+```tsx title="routes/page.tsx"
+import { setHeaders } from '@modern-js/runtime';
+
+export default async function Page() {
+  setHeaders({
+    'X-Custom-Header': 'custom-value',
+    'Cache-Control': 'public, max-age=3600',
+  });
+
+  return <div>Page content</div>;
+}
+```
+
+### setStatus
+
+设置 HTTP 响应状态码。常用于返回错误状态码（如 404、500）或成功状态码（如 201）。
+
+```tsx title="routes/page.tsx"
+import { setStatus } from '@modern-js/runtime';
+
+export default async function Page() {
+  setStatus(201);
+  return <div>Resource created</div>;
+}
+```
+
+### redirect
+
+执行 HTTP 重定向。可以指定重定向的状态码（默认为 307）和额外的响应头。
+
+```tsx title="routes/page.tsx"
+import { redirect } from '@modern-js/runtime';
+
+export default async function Page() {
+  // 简单重定向，使用默认状态码 307
+  redirect('/new-path');
+
+  // 指定状态码
+  redirect('/new-path', 301);
+
+  // 指定状态码和响应头
+  redirect('/new-path', {
+    status: 301,
+    headers: {
+      'X-Redirect-From': '/old-path',
+    },
+  });
+
+  return null; // redirect 后不会执行到这里
+}
+```
+
+:::warning 注意事项
+
+1. 这些 API 只能在 **Server Component** 中使用，在 Client Component 中调用不会产生任何效果
+2. `redirect` 会立即终止当前组件的渲染，后续代码不会执行
+3. 这些 API 应该在组件的顶层调用，而不是在条件分支或循环中调用，以确保行为可预测
+
+:::
+
+## CSR 项目迁移指南
 
-### 旧 CSR 项目
+Modern.js 的 RSC 能力，不仅支持 SSR 项目也支持 CSR 项目。对于现有的 CSR 项目，如果希望渐进式迁移到 RSC，推荐按照以下步骤：
 
-如果是 CSR 项目，且项目中使用了 Modern.js 的 data loader，开启 RSC 后，data loader 默认是在服务端执行，这意味着需要先把所有的 `.data.ts` 文件改为`.data.client.ts`，才能和之前的行为保持一致。
+1. **开启 RSC 配置**
+
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  server: {
+    rsc: true,
+  },
+});
+```
+
+2. **将所有路由组件标记为 `'use client'`**
+
+这确保现有组件的行为不变，它们仍然作为 Client Component 运行。
+
+```tsx title="routes/page.tsx"
+'use client';
+
+export default function Page() {
+  // 现有的客户端逻辑保持不变
+}
+```
+
+3. **将所有 `*.data.ts` 重命名为 `*.data.client.ts`**
+
+由于 RSC 项目中 `*.data.ts` 默认在服务端执行，为了保持与 CSR 项目一致的行为（Data Loader 在客户端执行），需要将文件重命名。
+
+```bash
+# 重命名前
+routes/user/page.data.ts
+
+# 重命名后
+routes/user/page.data.client.ts
+```
+
+完成以上步骤后，你可以逐步将组件迁移为 Server Component，享受 RSC 带来的性能优势。
+
+## 注意事项
 
 ### 使用 Streaming SSR 的项目
 

package/docs/zh/guides/concept/builder.mdx

@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # 构建工具
 
-Modern.js 构建是基于 [Rsbuild](https://rsbuild.rs/) 实现的，使用 Rspack 作为打包工具。
+Modern.js 构建是基于 [Rsbuild](https://v2.rsbuild.dev/) 实现的，使用 Rspack 作为打包工具。
 
 :::tip 什么是 Rsbuild
 Rsbuild 是基于 Rspack 的构建工具，是一个增强版的 Rspack CLI，更易用、开箱即用。
@@ -40,7 +40,7 @@ flowchart TD
 
 ## 构建文档
 
-Rsbuild 的文档地址为：https://rsbuild.rs/
+Rsbuild 的文档地址为：https://v2.rsbuild.dev/
 
 在该文档中，你可以了解到 Rsbuild 的详细介绍，同时也可以找到各个构建能力的完整使用指南。
 
@@ -57,4 +57,4 @@ Rsbuild 的文档地址为：https://rsbuild.rs/
 
 Rsbuild 提供了丰富的构建能力，包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。
 
-我们推荐你阅读 [「Rsbuild - 功能导航」](https://rsbuild.rs/zh/guide/start/features) 来了解 Rsbuild 提供的所有构建能力。
+我们推荐你阅读 [「Rsbuild - 功能导航」](https://v2.rsbuild.dev/zh/guide/start/features) 来了解 Rsbuild 提供的所有构建能力。

package/docs/zh/guides/get-started/tech-stack.mdx

@@ -12,7 +12,7 @@ Modern.js 框架默认集成了一些社区中流行的库和开发工具。
 
 Modern.js 使用 [React 19](https://react.dev/) 来构建用户界面，同时也兼容 React 18。
 
-Modern.js 底层的 Rsbuild 支持构建 Vue 应用，如果你需要使用 Vue，可以参考 [Rsbuild - Vue](https://rsbuild.rs/zh/guide/framework/vue)。
+Modern.js 底层的 Rsbuild 支持构建 Vue 应用，如果你需要使用 Vue，可以参考 [Rsbuild - Vue](https://v2.rsbuild.dev/zh/guide/framework/vue)。
 
 ## 路由
 
@@ -34,7 +34,7 @@ Modern.js 使用 [Rspack](https://rspack.rs/) 来打包你的 Web 应用。
 
 Modern.js 使用 [SWC](https://swc.rs/) 作为 JS 转译工具，将 TypeScript 或 JSX 转义为可以在浏览器上运行的 JavaScript 代码，并进行语法降级。
 
-在启用 Rspack 构建时，`babel-loader` 默认不会被启用。如需添加 [Babel](https://babeljs.io/) 插件，可通过 [`babel plugin`](https://rsbuild.rs/plugins/list/plugin-babel#babel-plugin) 配置，此时会产生额外的编译开销，在一定程度上拖慢 Rspack 构建速度。
+在启用 Rspack 构建时，`babel-loader` 默认不会被启用。如需添加 [Babel](https://babeljs.io/) 插件，可通过 [`babel plugin`](https://v2.rsbuild.dev/plugins/list/plugin-babel#babel-plugin) 配置，此时会产生额外的编译开销，在一定程度上拖慢 Rspack 构建速度。
 
 ## 压缩工具
 
@@ -53,7 +53,7 @@ Modern.js 支持 [启用 Tailwind CSS](/guides/basic-features/css/tailwindcss)
 Modern.js 支持 [Sass](https://sass-lang.com/)、[Less](https://lesscss.org/) 和 [Stylus](https://stylus-lang.com/) 三种 CSS 预处理器：
 
 - 默认支持 Sass 和 Less，开箱即用。
-- 可选支持 Stylus，请参考 [Stylus 插件](https://rsbuild.rs/zh/plugins/list/plugin-stylus) 来使用。
+- 可选支持 Stylus，请参考 [Stylus 插件](https://v2.rsbuild.dev/zh/plugins/list/plugin-stylus) 来使用。
 
 ## CSS Modules
 

package/docs/zh/guides/topic-detail/module-federation/application.mdx

@@ -18,7 +18,7 @@ Modern.js 提供了运行时 API，支持快速从应用中导出应用级别的
 import '@modern-js/runtime/registry/index'; // 这一行必须引入，它会默认导入微前端运行时依赖
 import { render } from '@modern-js/runtime/browser';
 import { createRoot } from '@modern-js/runtime/react';
-import { createBridgeComponent } from '@module-federation/modern-js/react-v19';
+import { createBridgeComponent } from '@module-federation/modern-js-v3/react-v19';
 
 const ModernRoot = createRoot();
 export const provider = createBridgeComponent({
@@ -33,8 +33,8 @@ export default provider;
 :::note
 请根据你项目中使用的 React 版本来选择对应的导入路径：
 
-- **React 19**：使用 `@module-federation/modern-js/react-v19`
-- **React 18**：使用 `@module-federation/modern-js/react-v18`
+- **React 19**：使用 `@module-federation/modern-js-v3/react-v19`
+- **React 18**：使用 `@module-federation/modern-js-v3/react-v18`
 
 你可以通过查看项目的 `package.json` 文件中的 `react` 依赖版本来确定应该使用哪个导入路径。
 :::
@@ -44,7 +44,7 @@ export default provider;
 接下来，我们配置 `module-federation.config.ts`，将导出修改为 `src/export-App.tsx`：
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   name: 'remote',
@@ -77,8 +77,8 @@ export default createModuleFederationConfig({
 :::
 
 ```tsx title="src/routes/remote/$.tsx"
-import { createRemoteAppComponent } from '@module-federation/modern-js/react';
-import { loadRemote } from '@module-federation/modern-js/runtime';
+import { createRemoteAppComponent } from '@module-federation/modern-js-v3/react';
+import { loadRemote } from '@module-federation/modern-js-v3/runtime';
 
 const ErrorBoundary = (info?: { error: { message: string } }) => {
   return (

package/docs/zh/guides/topic-detail/module-federation/deploy.mdx

@@ -14,7 +14,7 @@
 例如生产者部署在 `https://my-remote-module` 这个域名下，开发者需要修改消费者的配置文件：
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   name: 'host',
@@ -76,7 +76,7 @@ export default defineConfig({
 此时，消费者在配置远程模块时，需要配置以下地址：
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   name: 'host',

package/docs/zh/guides/topic-detail/module-federation/i18n.mdx

@@ -38,7 +38,7 @@ Modern.js 提供了 **@modern-js/plugin-i18n** 插件来支持国际化能力。
 在 Module Federation 场景下，需要同时安装 i18n 插件和 Module Federation 插件：
 
 ```bash
-pnpm add i18next react-i18next @modern-js/plugin-i18n @module-federation/modern-js
+pnpm add i18next react-i18next @modern-js/plugin-i18n @module-federation/modern-js-v3
 ```
 
 :::info
@@ -54,7 +54,7 @@ pnpm add i18next react-i18next @modern-js/plugin-i18n @module-federation/modern-
 ```ts title="modern.config.ts"
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { i18nPlugin } from '@modern-js/plugin-i18n';
-import { moduleFederationPlugin } from '@module-federation/modern-js';
+import { moduleFederationPlugin } from '@module-federation/modern-js-v3';
 
 export default defineConfig({
   plugins: [appTools(), i18nPlugin(), moduleFederationPlugin()],
@@ -84,7 +84,7 @@ export default defineConfig({
 #### 配置 Module Federation
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   // name 参数必须唯一，不能与其他应用（包括不同的 remote）使用相同的名称
@@ -199,7 +199,7 @@ export default useSwitchLanguage;
 #### 配置 Module Federation
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   // name 参数必须唯一，不能与其他应用（包括不同的 remote）使用相同的名称
@@ -225,7 +225,7 @@ export default createModuleFederationConfig({
 首先，在消费者的 `module-federation.config.ts` 中配置远程模块：
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   // name 参数必须唯一，不能与其他应用（包括不同的 remote）使用相同的名称
@@ -254,8 +254,8 @@ export default createModuleFederationConfig({
 当生产者使用共享 I18n 实例时，消费者可以直接加载远程组件，无需额外配置：
 
 ```tsx title="src/routes/page.tsx"
-import { createLazyComponent } from '@module-federation/modern-js/react';
-import { getInstance } from '@module-federation/modern-js/runtime';
+import { createLazyComponent } from '@module-federation/modern-js-v3/react';
+import { getInstance } from '@module-federation/modern-js-v3/runtime';
 
 const RemoteComponent = createLazyComponent({
   instance: getInstance(),
@@ -335,7 +335,7 @@ export default function Layout() {
 import '@modern-js/runtime/registry/index';
 import { render } from '@modern-js/runtime/browser';
 import { createRoot } from '@modern-js/runtime/react';
-import { createBridgeComponent } from '@module-federation/modern-js/react-v19';
+import { createBridgeComponent } from '@module-federation/modern-js-v3/react-v19';
 import type { ReactElement } from 'react';
 
 const ModernRoot = createRoot();
@@ -354,7 +354,7 @@ export default provider;
 #### 配置 Module Federation
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   // name 参数必须唯一，不能与其他应用（包括不同的 remote）使用相同的名称
@@ -432,7 +432,7 @@ export default defineRuntimeConfig({
 首先，在消费者的 `module-federation.config.ts` 中配置远程应用：
 
 ```ts title="module-federation.config.ts"
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 
 export default createModuleFederationConfig({
   // name 参数必须唯一，不能与其他应用（包括不同的 remote）使用相同的名称
@@ -460,8 +460,8 @@ export default createModuleFederationConfig({
 创建用于加载远程应用的组件：
 
 ```tsx title="src/components/RemoteApp.tsx"
-import { createRemoteAppComponent } from '@module-federation/modern-js/react';
-import { loadRemote } from '@module-federation/modern-js/runtime';
+import { createRemoteAppComponent } from '@module-federation/modern-js-v3/react';
+import { loadRemote } from '@module-federation/modern-js-v3/runtime';
 import React from 'react';
 
 const FallbackErrorComp = (info: any) => {

package/docs/zh/guides/topic-detail/module-federation/introduce.mdx

@@ -18,7 +18,7 @@ Module Federation 2.0 基于字节跳动内部实践以及 Module Federation 原
 
 ## Modern.js MF 插件
 
-基于字节跳动内部实践，Module Federation 团队官方提供了 [Modern.js 插件](https://www.npmjs.com/package/@module-federation/modern-js)，帮助开发者更方便的使用 Module Federation。
+基于字节跳动内部实践，Module Federation 团队官方提供了 [Modern.js 插件](https://www.npmjs.com/package/@module-federation/modern-js-v3)，帮助开发者更方便的使用 Module Federation。
 
 插件会在 Modern.js 应用中注入 Module Federation 插件，并自动处理构建配置、添加运行时代码等。
 

package/docs/zh/guides/topic-detail/module-federation/ssr.mdx

@@ -1,6 +1,6 @@
 # 服务端渲染
 
-`@module-federation/modern-js` 提供了非常强大的能力，开发者可以非常方便的在 Modern.js 应用中，组合使用 Module Federation 和服务端渲染（SSR）的能力。
+`@module-federation/modern-js-v3` 提供了非常强大的能力，开发者可以非常方便的在 Modern.js 应用中，组合使用 Module Federation 和服务端渲染（SSR）的能力。
 
 ## 开启 SSR
 
@@ -35,7 +35,7 @@ Module Federation 在新版本中支持了[数据获取](https://module-federati
 在 Modern.js 中，数据获取可以配合 SSR 使用。我们以前面章节的 Demo 为例子，创建一个数据获取文件：
 
 ```ts title="src/components/Button.data.ts"
-import type { DataFetchParams } from '@module-federation/modern-js/react';
+import type { DataFetchParams } from '@module-federation/modern-js-v3/react';
 
 export type Data = {
   data: string;
@@ -74,11 +74,11 @@ export const Button = (props: { mfData: Data }) => {
 
 ```tsx title="src/routes/page.tsx"
 import type { JSX } from 'react';
-import { getInstance } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js-v3/runtime';
 import {
   ERROR_TYPE,
   lazyLoadComponentPlugin,
-} from '@module-federation/modern-js/react';
+} from '@module-federation/modern-js-v3/react';
 
 const instance = getInstance();
 instance!.registerPlugins([lazyLoadComponentPlugin()]);