@modern-js/main-doc 2.0.0-beta.2 → 2.0.0-beta.4

package/zh/guides/basic-features/proxy.md

@@ -32,34 +32,9 @@ export default defineConfig({
 
 ## 全局代理
 
-Modern.js 提供了开箱即用的全局代理插件 `@modern-js/plugin-proxy`，该插件底层基于 [whistle](https://github.com/avwo/whistle)，可用来查看、修改 HTTP/HTTPS 的请求和响应，也可作为 HTTP 代理服务器使用。
-
-### 设置代理规则
-
-引入代理插件并填写规则后，执行 `pnpm run dev`，Modern.js 会在开发服务器启动之后，自动启用代理服务器。
-
-具体代理规则，可通过 [`dev.proxy`](/docs/configure/app/dev/proxy) 选项或 `config/proxy.js` 文件进行设置。
-
-### 代理服务器 UI 界面
-
-安装代理插件并配置代理规则后， 执行 `pnpm run dev` 命令：
-
-```bash
-  App running at:
-
-  Local:    http://localhost:8080/
-  Network:  http://192.168.0.1:8080/
-
-ℹ  info      Starting the proxy server.....
-✔  success   Proxy Server start on localhost:8899
-```
-
-在控制台中可以看到代理服务器成功启动。
-
-访问 `http://localhost:8899`，显示下图所示的 UI 界面后，即可通过界面设置规则。
-
-![debug-proxy-ui](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/debug/debug-proxy-ui.png)
+import GlobalProxy from '@site-docs/components/global-proxy.md'
 
+<GlobalProxy />
 
 ## BFF 代理
 

package/zh/guides/basic-features/routes.md

@@ -3,7 +3,7 @@ title: 路由
 sidebar_position: 1
 ---
 
-Modern.js 内置了对 [React Router 6](https://reactrouter.com/en/main) 的**部分**支持，并提供了多种类型的路由模式。根据不同[入口](/docs/guides/concept/entries)类型，将路由分为三种模式，分别是**约定式路由**，**自控式路由**和**配置式路由**。
+Modern.js 内置了对 [React Router 6](https://reactrouter.com/en/main) 的**部分**支持，并提供了多种类型的路由模式。根据不同[入口](/docs/guides/concept/entries)类型，将路由分为三种模式，分别是**约定式路由**，**自控式路由**和**其他路由方案**。
 
 :::note
 本小节提到的路由，都是客户端路由，即 SPA 路由。
@@ -219,40 +219,21 @@ export default const ErrorBoundary = () => {
 
 ## 自控式路由
 
-以 `routes/` 为约定的入口，Modern.js 不会多路由做额外的操作，开发者可以自行使用 React Router 6 的 API 进行开发。
-
-例如：
+以 `src/App.tsx` 为约定的入口，Modern.js 不会多路由做额外的操作，开发者可以自行使用 React Router 6 的 API 进行开发，例如：
 
 ```tsx
-import {
-  Route,
-  Routes,
-  BrowserRouter,
-  Outlet,
-} from '@modern-js/runtime/router';
+import { Route, Routes, BrowserRouter } from '@modern-js/runtime/router';
+import { StaticRouter } from '@modern-js/runtime/router/server';
 
+const Router = typeof window === 'undefined' ? StaticRouter : BrowserRouter;
 export default () => {
   return (
-    <div>
-      <BrowserRouter>
-        <Routes>
-          <Route index element={<div>index</div>} />
-          <Route
-            path="user"
-            element={
-              <div>
-                User Layout
-                <Outlet />
-              </div>
-            }
-          >
-            <Route index element={<div>user</div>} />
-            <Route path="profile" element={<div>profile</div>} />
-          </Route>
-          <Route path="about" element={<div>about</div>} />
-        </Routes>
-      </BrowserRouter>
-    </div>
+    <Router location={context.request.pathname}>
+      <Routes>
+        <Route index element={<div>index</div>} />
+        <Route path="about" element={<div>about</div>} />
+      </Routes>
+    </Router>
   );
 };
 ```
@@ -261,11 +242,27 @@ export default () => {
 在自控式路由下，开发者如果希望在 SSR 中使用 React Router 6 中 [Loader API](https://reactrouter.com/en/main/hooks/use-loader-data#useloaderdata) 的能力会相对复杂，推荐直接使用约定式路由。Modern.js 已经为你封装好了一切。
 
 <!-- Todo 嵌套路由带来的优化可以补充下文档-->
-如果项目只想升级到 React Router 6，而不希望使用嵌套路由带来的优化，那[useLoader](/docs/apis/app/runtime/core/use-loader) 在 SSR 下仍然可以工作。
+如果项目只想升级到 React Router 6，而不希望使用嵌套路由带来的优化，那 [useLoader](/docs/apis/app/runtime/core/use-loader) 在 SSR 下仍然可以工作。
 :::
 
-## 配置式路由
+## 其他路由方案
 
-:::note
-敬请期待
-:::
+默认情况下，Modern.js 会开启内置的路由方案，即 React Router。
+
+```js
+export default defineConfig({
+  runtime: {
+    router: true,
+  }
+})
+```
+
+Modern.js 从 `@modern-js/runtime/router` 命名空间暴露了 React Router 的 API 供开发者使用，保证开发者和 Modern.js 中使用同一份代码。另外，这种情况下，React Router 的代码会被打包到 JS 产物中。如果项目已经有自己的路由方案，或者不需要使用客户端路由，可以关闭这个功能。
+
+```js
+export default defineConfig({
+  runtime: {
+    router: false,
+  }
+})
+```

package/zh/guides/concept/entries.md

@@ -13,7 +13,6 @@ Modern.js 初始化的项目是单入口的，项目结构如下：
 
 ```
 .
-├── node_modules
 ├── src
 │   ├── modern-app-env.d.ts
 │   └── routes
@@ -30,9 +29,9 @@ Modern.js 初始化的项目是单入口的，项目结构如下：
 Modern.js 可以很方便的将单入口切换成多入口。可以在项目下执行 `pnpm run new`，通过生成器创建入口：
 
 ```bash
-? 请选择你想要的操作： 创建工程元素
-? 创建工程元素： 新建「应用入口」
-? 请填写入口名称： new-entry
+? 请选择你想要的操作 创建工程元素
+? 创建工程元素 新建「应用入口」
+? 请填写入口名称 new-entry
 ```
 
 执行后，`src/` 目录将会变成如下结构：
@@ -73,7 +72,7 @@ Modern.js 会将和 `package.json` 中 `name` 同名的目录作为主入口，
 1. 具有 `routes/` 目录
 2. 具有 `App.[jt]sx?` 文件
 3. 具有 `index.[jt]sx?` 文件
-2. 具有 `pages/` 目录（兼容旧版本）
+2. 具有 `pages/` 目录（兼容 Modern.js 1.0）
 
 当 `src/` 目录满足入口特征时，Modern.js 会认为当前项目为单入口应用。
 
@@ -91,13 +90,13 @@ Modern.js 会将和 `package.json` 中 `name` 同名的目录作为主入口，
 
 如果入口为 `routes/` 约定，Modern.js 会在启动时扫描 `routes` 下的文件，基于文件约定，自动生成客户端路由（react-router）。
 
-详细内容可以参考[路由](/docs/guides/basic-features/routes).
+详细内容可以参考[路由](/docs/guides/basic-features/routes)。
 
 ### App 入口
 
 如果入口为 `App.[jt]sx?` 约定，开发者可以在这个文件中自由的设置客户端路由，或者不设置客户端路由。
 
-详细内容可以参考[路由](/docs/guides/basic-features/routes).
+详细内容可以参考[路由](/docs/guides/basic-features/routes)。
 
 ### Index 入口
 
@@ -105,12 +104,12 @@ Modern.js 会将和 `package.json` 中 `name` 同名的目录作为主入口，
 
 如果入口为 `index.[jt]sx?` 约定，Modern.js 会根据该文件是否存在默认的组件导出，来决定构建行为。
 
-详细内容可以参考[自定义 App](/docs/guides/advanced-features/custom-app).
+详细内容可以参考[自定义 App](/docs/guides/advanced-features/custom-app)。
 
 ## 配置入口
 
 在 Modern.js 中，除了使用文件约定生成入口外，还可以在 `modern.config.[jt]s` 中手动配置入口。
 
 :::tip
-详情可以查看 [source.entries](/docs/configure/app/source/entries).
+详情可以查看 [source.entries](/docs/configure/app/source/entries)。
 :::

package/zh/guides/get-started/quick-start.md

@@ -5,25 +5,9 @@ sidebar_position: 1
 
 ## 环境准备
 
-### Node.js
+import Prerequisites from '@site-docs/components/prerequisites.md'
 
-需要 [Node.js LTS](https://github.com/nodejs/Release)，并确保 Node 版本大于等于 14.17.6。
-
-Modern.js 推荐在开发环境里先安装 [nvm](https://github.com/nvm-sh/nvm#install--update-script)，在 shell 里集成[自动切换 node 版本的脚本](https://github.com/nvm-sh/nvm#deeper-shell-integration)。
-
-然后只要仓库根目录下有内容为 `lts/fermium` 或 `lts/gallium` 的 `.nvmrc` 文件，进入这个仓库时就会自动安装或切换到正确的 Node.js 版本。
-
-### pnpm
-
-推荐使用 [pnpm](https://pnpm.io/installation) 来管理依赖：
-
-```bash
-npm install -g pnpm
-```
-
-:::note
-Modern.js 同样支持使用 `yarn`、`npm` 进行依赖管理。
-:::
+<Prerequisites />
 
 ## 安装
 
@@ -44,72 +28,16 @@ npx @modern-js/create myapp
 
 ## 初始化项目
 
-Modern.js 生成器会提供一个可交互的问答界面，根据结果初始化项目，按照默认的选择进行初始化：
 
-```bash
-? 请选择你想创建的工程类型 应用
-? 请选择开发语言 TS
-? 请选择包管理工具 pnpm
-```
-
-在生成项目后，Modern.js 会自动安装依赖、创建 git 仓库。
-
-```bash
-[INFO] 依赖自动安装成功
-[INFO] git 仓库初始化成功
-[INFO] 创建成功！
-可在新项目的目录下运行以下命令：
-pnpm run dev          # 按开发环境的要求，运行和调试项目
-pnpm run build        # 按产品环境的要求，构建项目
-pnpm run start        # 按产品环境的要求，运行项目
-pnpm run lint         # 检查和修复所有代码
-pnpm run new          # 继续创建更多项目要素，比如应用入口
-```
+import InitApp from '@site-docs/components/init-app.md'
 
-:::note
-Modern.js 生成器除了在项目初始化时工作外，也能在后续研发中生成项目各种粒度的模块，并非一用即抛开。
-:::
-
-现在，项目结构如下：
-
-```
-.
-├── node_modules
-├── src
-│   ├── modern-app-env.d.ts
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
-├── modern.config.ts
-├── package.json
-├── pnpm-lock.yaml
-├── README.md
-└── tsconfig.json
-```
+<InitApp />
 
 ## 启动项目
 
-在项目中执行 `pnpm run dev` 即可启动项目：
-
-```bash
-$ pnpm run dev
-
-> modern dev
-
-info    Starting dev server...
-info    App running at:
-
-  > Local:    http://localhost:8080/
-  > Network:  http://10.94.58.87:8080/
-  > Network:  http://10.254.68.105:8080/
-
- Client ✔ done in 76.10ms
-```
-
-在浏览器中打开 `http://localhost:8000/`，能看到以下内容：
+import DebugApp from '@site-docs/components/debug-app.md'
 
-![dev](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/dev.png)
+<DebugApp />
 
 ## 使用配置
 

package/zh/guides/get-started/upgrade.md

@@ -16,28 +16,28 @@ $ pnpm run upgrade
 
 [INFO] [项目类型]: 应用
 [INFO] [Modern.js 最新版本]: 2.0.0
-[INFO] [当前项目 Modern.js 依赖已经为最新版本]: 2.0.0
+[INFO] 已更新 Modern.js 依赖至最新版本!
 ```
 
-可以看到项目 `package.json` 中的依赖已经更改到最新，执行 `pnpm install` 重新安装即可。
+可以看到项目 `package.json` 中的依赖已经更改到最新。
 
 ## 指定版本升级
 
-Modern.js 所有的官方包目前都使用统一版本号进行发布。
+Modern.js 所有的官方包目前都使用**统一版本号**进行发布。
 
 根据官网 Release Note，开发者也可以手动将项目升级到想要的版本。
 
 :::tip
-对所有 Modern.js 官方提供的包做统一升级，而不是升级单个依赖。
+当升级时，需要对 Modern.js 官方提供的所有包做统一升级，而不是升级单个依赖。
 :::
 
 ## 锁定子依赖
 
 当项目某个子依赖出现问题，而 Modern.js 无法立即更新时，可以使用包管理器锁定子依赖版本。
 
-### Pnpm
+### pnpm
 
-对于使用 Pnpm 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `pnpm i`：
+对于使用 pnpm 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `pnpm install`：
 
 ```json
 {
@@ -51,7 +51,7 @@ Modern.js 所有的官方包目前都使用统一版本号进行发布。
 
 ### Yarn
 
-对于使用 Yarn 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `yarn i`：
+对于使用 Yarn 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `yarn install`：
 
 ```json
 {
@@ -63,7 +63,7 @@ Modern.js 所有的官方包目前都使用统一版本号进行发布。
 
 ### Npm
 
-对于使用 Npm 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `npm i`：
+对于使用 Npm 的项目，请在**项目根目录**的 `package.json` 中添加以下配置，然后重新执行 `npm install`：
 
 ```json
 {

package/zh/guides/topic-detail/framework-plugin/extend.md

@@ -1,10 +1,9 @@
 ---
-sidebar_position: 4
+title: 扩展插件 Hook
+sidebar_position: 5
 ---
 
-# 扩展插件 Hook
-
-本章节介绍如何通过动态注册 [Hook 模型](/docs/apis/app/runtime/plugin/hook#hook-模型) 的方式来扩展插件 Hook。
+本小节介绍如何通过动态注册 [Hook 模型](/docs/guides/topic-detail/framework-plugin/hook) 的方式来扩展插件 Hook。
 
 ## 示例