@modern-js/main-doc 2.46.1 → 2.47.0

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

@@ -4,44 +4,42 @@ sidebar_position: 2
 
 # 构建工具
 
-**Modern.js 的构建能力由 [Modern.js Builder](https://modernjs.dev/builder) 提供。**
+Modern.js 内部基于 [Rsbuild](https://rsbuild.dev/) 封装了自身的构建工具（Modern.js Builder），并支持在 Webpack 和 Rspack 两种打包工具间无缝切换。
 
-Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个基于 Rspack 的 Web 构建工具，可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 Rspack 等多种打包工具，默认情况下使用最成熟的 webpack 进行打包。
+:::tip 什么是 Rsbuild
+Rsbuild 是基于 Rspack 的构建工具，是一个增强版的 Rspack CLI，更易用、开箱即用。
+:::
 
 ## 构建架构
 
 从构建的角度看，Modern.js 分为三层架构，从上到下依次是：
 
-- 上层研发框架：Modern.js。
-- 通用构建工具：Modern.js Builder。
-- 底层打包工具：webpack 和 Rspack。
+- 研发框架：Modern.js（开源）和 EdenX（内部）。
+- 构建工具：Rsbuild。
+- 打包工具：Webpack 和 Rspack。
 
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-0824.png" style={{ width: '100%', maxWidth: '540px' }} />
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/build-layers-02193.png"
+  style={{ width: '100%', maxWidth: '540px' }}
+/>
 
 ## 构建文档
 
-由于 Modern.js Builder 是一个可独立使用的模块，我们为它提供了单独的文档，文档地址为：[modernjs.dev/builder](https://modernjs.dev/builder)。
+Rsbuild 的文档地址为：https://rsbuild.dev/
 
-在该文档中，你可以了解到 Modern.js Builder 的详细介绍，同时也可以找到各个构建能力的完整使用指南。当你遇到构建方面的需求或问题时，建议你优先阅读 Modern.js Builder 文档来解决。
+在该文档中，你可以了解到 Rsbuild 的详细介绍，同时也可以找到各个构建能力的完整使用指南。
 
-## 构建配置
+如果你想要了解某些构建配置的使用，建议你优先阅读 Modern.js 文档，因为 Modern.js 中的构建配置和默认值与 Rsbuild 并不完全相同。
 
-Modern.js 的配置继承自 Modern.js Builder，因此你可以在 Modern.js 中使用 Modern.js Builder 提供的所有构建配置。
+## 构建插件
 
-以 Modern.js Builder 的 `html.title` 配置项为例，你可以直接在 `modern.config.ts` 文件中使用该配置项，它会被自动传递给 Modern.js Builder。
+在 Modern.js 中，你可以注册 Webpack 插件、Rspack 插件或 Rsbuild 插件：
 
-```ts title="modern.config.js"
-export default defineConfig({
-  html: {
-    title: 'example',
-  },
-});
-```
-
-关于构建配置的详细说明，请参考 [「Modern.js Builder - Builder 配置」](https://modernjs.dev/builder/guide/basic/builder-config.html)。
+- Webpack / Rspack 插件：通过 [tools.bundlerChain](/configure/app/tools/bundler-chain) 配置。
+- Rsbuild 插件：通过 [builderPlugins](/configure/app/builder-plugins) 配置。
 
 ## 构建能力
 
-Modern.js Builder 提供了丰富的构建能力，包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。
+Rsbuild 提供了丰富的构建能力，包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。
 
-我们推荐你阅读 [「Modern.js Builder - 功能导航」](https://modernjs.dev/builder/guide/features.html) 来了解 Modern.js Builder 提供的所有构建能力。
+我们推荐你阅读 [「Rsbuild - 功能导航」](https://rsbuild.dev/zh/guide/start/features) 来了解 Rsbuild 提供的所有构建能力。

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

@@ -89,7 +89,7 @@ Modern.js 支持[「启用 Tailwind CSS」](/guides/basic-features/css.html#使
 Modern.js 支持 [Sass](https://sass-lang.com/)、[Less](https://lesscss.org/) 和 [Stylus](https://stylus-lang.com/) 三种 CSS 预处理器：
 
 - 默认支持 Sass 和 Less，开箱即用。
-- 可选支持 Stylus，请参考[「Stylus 插件」](https://modernjs.dev/builder/plugins/plugin-stylus.html) 来使用。
+- 可选支持 Stylus，请参考[「Stylus 插件」](https://rsbuild.dev/zh/plugins/list/plugin-stylus) 来使用。
 
 ---
 

package/docs/zh/guides/topic-detail/framework-plugin/introduction.mdx

@@ -10,7 +10,7 @@ Modern.js 提供了一套拥有完整生命周期的插件系统。插件可用
 
 ## 使用方式
 
-插件需要在配置文件中显示注册才能够生效，当需要为 Modern.js 添加插件时，可以将它配置到 [plugin](/configure/app/plugins.html) 字段中：
+插件需要在配置文件中显式注册才能够生效，当需要为 Modern.js 添加插件时，可以将它配置到 [plugins](/configure/app/plugins.html) 字段中：
 
 ```ts title="edenx.config.ts"
 // an example for bff

package/docs/zh/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -12,14 +12,13 @@ title: 体验微前端
 
 ## 创建应用
 
-目前支持两种路由模式
+目前项目的路由模式分为以下三种
 
-- 自控式路由
-- 约定式路由
+- 约定式路由 (设置 `router: true` 并使用文件路由)
+- 自控式路由 (设置 `router: true` 并自己创建 `BrowserRouter` 等)
+- 其他 (设置 `router: false` 项目内自己安装和使用 `react-router-dom`)
 
-首先明确主应用的路由模式 [创建约定式路由主应用](#创建约定式路由主应用) 或 [创建自控式路由主应用](#创建自控式路由主应用)
-
-在本次体验中我们会为主应用创建两个子应用 Table 和 Dashboard (Table 为约定式路由，Dashboard 为自控式路由)
+在本教程中我们会为主应用创建两个子应用 Table 和 Dashboard (Table 为约定式路由，Dashboard 为自控式路由)
 
 ### 创建约定式路由主应用
 
@@ -145,6 +144,36 @@ import CustomRouterMicroFrontend from '@site-docs/components/custom-router-micro
 
 <CustomRouterMicroFrontend />
 
+### 创建其他主应用
+
+项目内自己安装和使用 `react-router-dom` , 与自控式路由唯一的区别是, 设置 `router: false` 后 plugin-garfish 无法获得 `useLocation` `useHref` 等 hook 来辅助计算 basename 和主子应用路由同步
+
+import { Tab, Tabs } from 'rspress/theme';
+
+<Tabs>
+<Tab label="react-router-dom@6">
+```tsx
+import { useLocation, useHref } from 'react-router-dom';
+const App = () => {
+  const basename = useHref('/table');
+  const { Table } = useModuleApps();
+  return <Table useLocation={useLocation} basename={basename} />;
+};
+```
+</Tab>
+<Tab label="react-router-dom@5">
+```tsx
+import { useLocation, useHistory } from 'react-router-dom';
+const App = () => {
+  const history = useHistory();
+  const basename = history.createHref({ pathname: '/table' });
+  const { Table } = useModuleApps();
+  return <Table useLocation={useLocation} basename={basename} />;
+};
+```
+</Tab>
+</Tabs>
+
 ### 创建约定式路由子应用
 
 通过命令行工具初始化项目：

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.46.1",
+  "version": "2.47.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "2.46.1"
+    "@modern-js/sandpack-react": "2.47.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.46.1"
+    "@modern-js/builder-doc": "^2.47.0"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -35,12 +35,12 @@
     "ts-node": "^10.9.1",
     "typescript": "^5",
     "fs-extra": "^10",
-    "rspress": "1.10.0",
-    "@rspress/shared": "1.10.0",
+    "rspress": "1.11.2",
+    "@rspress/shared": "1.11.2",
     "@types/node": "^16",
     "@types/fs-extra": "9.0.13",
-    "@modern-js/builder-doc": "2.46.1",
-    "@modern-js/doc-plugin-auto-sidebar": "2.46.1"
+    "@modern-js/builder-doc": "2.47.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.47.0"
   },
   "scripts": {
     "dev": "rspress dev",

package/docs/en/configure/app/source/compile-js-data-uri.mdx

@@ -1,9 +0,0 @@
----
-sidebar_label: compileJsDataURI
----
-
-# source.compileJsDataURI
-
-import Main from '@modern-js/builder-doc/docs/en/config/source/compileJsDataURI.md';
-
-<Main />

package/docs/zh/configure/app/source/compile-js-data-uri.mdx

@@ -1,9 +0,0 @@
----
-sidebar_label: compileJsDataURI
----
-
-# source.compileJsDataURI
-
-import Main from '@modern-js/builder-doc/docs/zh/config/source/compileJsDataURI.md';
-
-<Main />