@modern-js/main-doc 0.0.0-next-20221203140534 → 0.0.0-next-20221205074243

package/zh/guides/advanced-features/ssr.md

@@ -1,11 +1,11 @@
 ---
-title: 服务端渲染
+title: 服务端渲染（SSR）
 sidebar_position: 3
 ---
 
-在 Modern.js 中，和 Web Server 一样，SSR 服务与应用也是一体的，开发者无需为 SSR 编写复杂的服务端逻辑。同样，开发者也无需关心 SSR 服务的运维，Modern.js 拥有完备的 SSR 降级策略，保证页面能够安全运行。
+在 Modern.js 中，SSR 也是开箱即用的。开发者无需为 SSR 编写复杂的服务端逻辑，也无需关心 SSR 的运维，或是创建单独的服务。Modern.js 拥有完备的 SSR 降级策略，保证页面能够安全运行。
 
-Modern.js 启用 SSR 非常简单，只需要设置 [`server.ssr`](/docs/configure/app/server/ssr) 为 `true` 即可：
+启用 SSR 非常简单，只需要设置 [`server.ssr`](/docs/configure/app/server/ssr) 为 `true` 即可：
 
 ```json title="package.json"
 {
@@ -15,9 +15,9 @@ Modern.js 启用 SSR 非常简单，只需要设置 [`server.ssr`](/docs/configu
 }
 ```
 
-## SSR 时的数据请求
+## SSR 时的数据获取
 
-Modern.js 中提供了 `useLoader` Hooks API，可以在某些场景下代替 `useEffect` 进行数据请求。这是一个同构的 API，直接使用它即可完成在服务端的数据获取：
+Modern.js 中提供了 [`useLoader`](/docs/apis/app/runtime/core/use-loader) Hooks API，用于在 SSR 环境下同构的获取数据：
 
 ```ts
 const { data, loading, error } = useLoader(() => {
@@ -30,16 +30,14 @@ Modern.js 打破传统的 SSR 开发模式，提供了用户无感的 SSR 开发
 不过，开发者仍然需要关注数据的兜底处理，例如 `null` 值或不符合预期的数据返回。避免在 SSR 时产生 React 渲染错误或是返回凌乱的渲染结果。
 
 :::info 补充信息
-关于 `useLoader` 的详细介绍可以参考[这里](/docs/apis/app/runtime/core/use-loader)。
+更多相关内容可以查看[数据获取](/docs/guides/basic-features/data-fetch)。
 :::
 
 ## 保持渲染一致
 
-代码中区分 SSR 和 CSR 渲染，通常需要根据当前的运行容器环境特征做判断，例如 [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) 信息或是某个 Native 模块。如果处理不够仔细，此时很有可能出现不符合预期的渲染结果。
+有些业务中，通常需要根据当前的运行容器环境特征做不同的 UI 展示，例如 [UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) 信息。如果处理不够仔细，此时很有可能出现不符合预期的渲染结果。
 
-这里通过一个例子，演示当 SSR 与 CSR 渲染不一致时出现的问题。
-
-在组件中添加以下代码：
+这里通过一个例子，演示当 SSR 与 CSR 渲染不一致时出现的问题，在组件中添加以下代码：
 
 ```tsx
 {
@@ -57,7 +55,7 @@ Modern.js 打破传统的 SSR 开发模式，提供了用户无感的 SSR 开发
 Warning: Expected server HTML to contain a matching <div> in <div>.
 ```
 
-这是因为 React 在客户端执行注水逻辑时，发现渲染结果与 SSR 渲染结果不一致造成的。虽然页面表现正常，但在复杂应用中，很有可能因此出现 DOM 层级混乱、样式混乱等问题。
+这是 React 在客户端执行注水逻辑时，发现渲染结果与 SSR 渲染结果不一致造成的。虽然页面表现正常，但在复杂应用中，很有可能因此出现 DOM 层级混乱、样式混乱等问题。
 
 :::info 注
 关于注水逻辑请参考[这里](https://reactjs.org/docs/react-dom.html#hydrate)。
@@ -184,3 +182,70 @@ import { PreRender } from '@modern-js/runtime/ssr';
 :::info 补充信息
 `PreRender` 的详细使用可以参考[这里](/docs/apis/app/runtime/ssr/pre-render)。
 :::
+
+## Treeshaking
+
+开启 SSR 时，Modern.js 会用相同的入口，构建出 SSR Bundle 和 CSR Bundle 两份产物。因此，在 SSR Bundle 中存在 Web API，或是在 CSR Bundle 中存在 Node API 时，都可能导致运行出错。
+
+### 环境变量区分
+
+在组件中可以直接使用 EdenX 内置的环境变量 `EDENX_TARGET` 进行判断，方便在构建时删除无用代码：
+
+```ts
+export default () => {
+  if (process.env.EDENX_TARGET === 'node') {
+    console.log('server render')
+  } else {
+    console.log('client render')
+  }
+}
+```
+
+在 SSR 中直接调用 RPC 接口时，该环境变量会非常有用，因为 RPC 调用时往往会执行到浏览器中无法运行的代码。
+
+:::note
+更多内容可以查看[环境变量](/docs/guides/basic-features/env-vars)。
+:::
+
+### 文件后缀区分
+
+但有时，这种 Treeshaking 的方式并不能保证代码被完全分离。EdenX 也支持通过 `.node.` 后缀的文件来区分 SSR Bundle 和 CSR Bundle 产物的打包文件。
+
+例如存在 `client-sdk` 中直接使用了 Web API：
+
+```ts
+// client-sdk
+export const href = location.href;
+```
+
+这时候直接引用到组件中，会造成 SSR 报错。可以创建同名的 `.ts` 和 `.node.ts` 文件做一层代理：
+
+```ts title="compat.ts"
+export { href } from 'client-sdk';
+```
+
+```ts title="compat.node.ts"
+export const href = '';
+```
+
+在文件中直接引入 `./compat`，此时 SSR 环境下会优先使用 `.node.ts` 后缀的文件，CSR 环境下会使用 `.ts` 后缀的文件。
+
+```ts title="App.tsx"
+import { href } from './compat'
+
+export default () => {
+  return <div onClick={() => { console.log(href) }}></div>
+}
+```
+
+### 独立文件
+
+上述两种方式，都会为开发者带来一些心智负担。Modern.js 正在基于[嵌套路由](/docs/guides/basic-features/routes)开发设计更简单的方案来分离 CSR 和 SSR 的代码。。
+
+## 接口请求
+
+在 SSR 中发起接口请求时，开发者有时自己封装了同构的请求工具。部分接口需要传递用户 Cookie，开发者可以通过 [`useRuntimeContext`](/docs/apis/app/runtime/core/use-runtime-context) API 获取到请求头来实现。
+
+需要注意的是，此时获取到的是 HTML 请求的请求头，不一定适用于接口请求，因此**千万不能**透传所有请求头。并且，一些后端接口，或是通用网关，会根据请求头中的信息做校验，全量透传容易出现各种难以排查的问题，推荐**按需透传**。
+
+如果实在需要透传所有请求头，请务必过滤 `host` 字段。

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

@@ -0,0 +1,46 @@
+---
+title: 构建能力
+sidebar_position: 2
+---
+
+**Modern.js 的构建能力由 [Modern.js Builder](https://modernjs.dev/builder) 提供。**
+
+Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向现代 Web 开发场景的构建引擎，可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 rspack 等多种打包工具，默认情况下使用最成熟的 webpack 进行打包。
+
+## 构建架构
+
+从构建的角度看，Modern.js 分为三层架构，从上到下依次是：
+
+- 上层研发框架：Modern.js。
+- 通用构建引擎：Modern.js Builder。
+- 底层打包工具：webpack 和 rspack。
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ maxWidth: '540px' }} />
+
+## 构建文档
+
+由于 Modern.js Builder 是一个可独立使用的模块，我们为它提供了单独的文档，文档地址为：[modernjs.dev/builder](https://modernjs.dev/builder)。
+
+在该文档中，你可以了解到 Modern.js Builder 的详细介绍，同时也可以找到各个构建能力的完整使用指南。当你遇到构建方面的需求或问题时，建议你优先阅读 Modern.js Builder 文档来解决。
+
+## 构建配置
+
+Modern.js 的配置继承自 Modern.js Builder，因此你可以在 Modern.js 中使用 Modern.js Builder 提供的所有构建配置。
+
+以 Modern.js Builder 的 `html.title` 配置项为例，你可以直接在 `modern.config.ts` 文件中使用该配置项，它会被自动传递给 Modern.js Builder。
+
+```ts title="modern.config.js"
+export default defineConfig({
+  html: {
+    title: 'example',
+  },
+});
+```
+
+关于构建配置的详细说明，请参考 [「Modern.js Builder - Builder 配置」](https://modernjs.dev/builder/zh/guide/basic/builder-config.html)。
+
+## 构建能力
+
+Modern.js Builder 提供了丰富的构建能力，包括 JavaScript 编译、CSS 编译、静态资源处理、代码热更新、代码压缩、TS 类型检查等几十种能力。
+
+我们推荐你阅读 [「Modern.js Builder - 功能导航」](https://modernjs.dev/builder/zh/guide/features.html) 来了解 Modern.js Builder 提供的所有构建能力。

package/zh/guides/basic-features/css/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "CSS 开发方案",
-  "position": 3
+  "position": 4
 }

package/zh/guides/basic-features/css/less-sass.md

@@ -4,20 +4,7 @@ sidebar_position: 4
 
 # Less 和 Sass
 
-[Less](https://lesscss.org/) 和 [Sass](https://sass-lang.com/) 是常用的两种 CSS 预处理器，Modern.js 通过插件来提供 Less 和 Sass 编译能力的支持。
-
-## 启用 Less 或 Sass
-
-为了使用 Less 或 Sass 编译能力，我们需要先启用对应的功能。
-
-以 Less 为例，在当前项目根目录执行 new 命令, 并选择 **启用 Less 支持** 即可。
-
-```bash
-$ pnpm run new
-? 请选择你想要的操作
-? 启用可选功能 (Use arrow keys)
-❯ 启用 Less 支持
-```
+[Less](https://lesscss.org/) 和 [Sass](https://sass-lang.com/) 是常用的两种 CSS 预处理器，Modern.js 内置了 Less 和 Sass 编译能力的支持。
 
 ## 自定义配置
 

package/zh/guides/basic-features/data-fetch.md

@@ -1,6 +1,6 @@
 ---
 title: 数据获取
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过这些 API，在 CSR 和 SSR 环境同构的进行开发。

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 进行开发。
-
-例如：
+以 `routes/` 为约定的入口，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

@@ -91,13 +91,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 +105,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/tutorials/first-app/c01-getting-started/1.2-minimal-mwa.md

@@ -75,10 +75,10 @@ ni package.json
   "dependencies": {
     "react": "^17",
     "react-dom": "^17",
-    "@modern-js/runtime": "^1.0.0"
+    "@modern-js/runtime": "^2.0.0"
   },
   "devDependencies": {
-    "@modern-js/app-tools": "^1.0.0"
+    "@modern-js/app-tools": "^2.0.0"
   }
 }
 ```

package/zh/tutorials/first-app/c01-getting-started/1.4-enable-ssr.md

@@ -6,18 +6,21 @@ title: 启用 SSR
 
 在项目根目录下创建 `modern.config.js`：
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 <Tabs>
 <TabItem value="macOS" label="macOS" default>
 
 ```bash
-touch modern.config.js
+touch modern.config.ts
 ```
 
 </TabItem>
 <TabItem value="Windows" label="Windows">
 
 ```bash
-ni modern.config.js
+ni modern.config.ts
 ```
 
 </TabItem>

package/zh/tutorials/first-app/c02-generator-and-studio/2.2-boilerplates.md

@@ -15,17 +15,15 @@ title: 样板文件
 ├── .prettierrc
 ├── .vscode
 ├── README.md
-├── modern.config.ts
+├── modern.config.js
 ├── package.json
-├── pnpm-lock.yaml
 ├── src
 │   ├── .eslintrc.js
-│   ├── modern-app-env.d.ts
 │   └── routes
 │       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
-└── tsconfig.json
+│       ├── layout.jsx
+│       └── page.jsx
+└── pnpm-lock.yaml
 ```
 
 和上一章节手动创建出来的项目一样，仍然是零配置、极简和轻量的，但功能更完整，最佳实践开箱即用，比如：

package/zh/tutorials/first-app/c02-generator-and-studio/2.3-configuration.md

@@ -2,11 +2,9 @@
 title: ​配置项目
 ---
 
-通过命令行工具创建的 Modern.js 项目，在 `package.json` 文件中，存在 `modernConfig` 字段。
+通过命令行工具创建的 Modern.js 项目，会默认生成 `modern.config.js` 配置文件。
 
-我们也可以创建 `modern.config.js` 配置文件。
-
-这两处都可以进行 Modern.js 项目的配置，并且 `modernConfig` 字段中的配置优先级高于 `modern.config.js` 中相同的内容。
+Modern.js 也支持使用 `package.json` 文件中的 `modernConfig` 字段进行配置，两个位置不支持同时配置同一字段，推荐使用 `modern.config.js` 配置文件进行配置。
 
 :::info 注
 

package/zh/tutorials/first-app/c03-ide/3.1-setting-up.md

@@ -15,7 +15,7 @@ cd hello-modern/
 code .
 ```
 
-![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-mwa.png)
+![vsc-alert](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/vsc-mwa.jpeg)
 
 :::info 补充信息
 必须打开项目根目录，不能打开其他子目录或父目录，否则 IDE 支持不会生效。

package/zh/tutorials/first-app/c03-ide/3.2-hints-in-ide.md

@@ -2,65 +2,59 @@
 title: IDE 中的自动提示
 ---
 
-打开任意 JS/TS 文件（比如 `src/App.jsx`），底部状态栏右侧应该有显示 ESLint，点击可以看到运行 log，应该没有报错。
+打开任意 JS/TS 文件（比如 `src/routes/page.tsx`），底部状态栏右侧应该有显示 ESLint，点击可以看到运行 log，应该没有报错。
 
-接下来对 `App.jsx` 代码做如下修改（修改过程中不要保存），增加无用的函数参数、去掉换行、单引号改成双引号、增加缩进（可以直接复制下面的代码替换 App.jsx 的内容），注意修改过程中**先不要保存文件**。
+接下来对 `page.jsx` 代码做如下修改（修改过程中不要保存），增加无用的函数参数、去掉换行、单引号改成双引号、增加缩进（可以直接复制下面的代码替换 App.jsx 的内容），注意修改过程中**先不要保存文件**。
 
 ```js
-import { Switch, Route } from '@modern-js/runtime/router';
+import './index.css';
 
-import './App.css';
-
-const App = (a) => (
-  <Switch>
-    <Route exact={true} path="/">
+const Index = (a) => (
       <div className="container-box">
-        <main>
-          <div className='logo'>
-            <img
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png"
-              width="300"
-              alt="Modern.js Logo"
-            />
-          </div>
-          <p className="description">
-            Get started by editing <code className="code">src/App.tsx</code>
-          </p>
-          <div className="grid">
-            <a href="#" className="card">
-              <h2>Quick Start</h2>
-            </a>
-            <a href="#" className="card">
-              <h2>Handbook</h2>
-            </a>
-            <a href="#" className="card">
-              <h2>API Reference </h2>
-            </a>
-            <a
-              href="#"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="card">
-              <h2>Community </h2>
-            </a>
-          </div>
-        </main>
-        <footer className="footer">
-          <a href="#" target="_blank" rel="noopener noreferrer">
-            Powered by Modern.JS
-          </a>
-        </footer>
+    <main>
+      <div className='logo'>
+        <img
+          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png"
+          width="300"
+          alt="Modern.js Logo"
+        />
+      </div>
+      <p className="description">
+        Get started by editing <code className="code">src/routes/page.tsx</code>
+      </p>
+      <div className="grid">
+        <a href="https://modernjs.dev/docs/start" className="card">
+          <h2>Quick Start</h2>
+        </a>
+        <a href="https://modernjs.dev/docs/guides" className="card">
+          <h2>Handbook</h2>
+        </a>
+        <a href="https://modernjs.dev/docs/apis/app/overview" className="card">
+          <h2>API Reference </h2>
+        </a>
+        <a
+          href="https://modernjs.dev/blog"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="card"
+        >
+          <h2>Blog</h2>
+        </a>
       </div>
-    </Route>
-    <Route path="*">
-      <div>404</div>
-    </Route>
-  </Switch>
+    </main>
+    <footer className="footer">
+      <a href="https://modernjs.dev" target="_blank" rel="noopener noreferrer">
+        Powered by Modern.js
+      </a>
+    </footer>
+  </div>
 );
 
-export default App;
+export default Index;
+
+
 ```
 
 可以在 VS Code 中看到修改过的代码出现了问题提示，点击底部界面中的 Problems 一栏，可以看到问题列表。
 
-![vsc-with-error](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-with-error.png)
+![vsc-with-error](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/vsc-with-error.jpeg)

package/zh/tutorials/first-app/c03-ide/3.3-autofix-in-ide.md

@@ -6,6 +6,6 @@ title: IDE 中的自动修复
 
 只剩下**无用的函数参数**问题，需要人工修复：
 
-![vsc-how-to-fix](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-how-to-fix.png)
+![vsc-how-to-fix](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/vsc-how-to-fix.jpeg)
 
 问题提示中，显示了这个问题来自 ESLint 的 `no-unused-vars` 规则，带下划线的是 ESLint 规则名称，按住 CMD/Alt 键点击，可以打开这条规则的文档，查看问题的解释和解决方法。

package/zh/tutorials/first-app/c03-ide/3.4-autofix-in-cli.md

@@ -7,10 +7,10 @@ title: 命令行中的自动修复
 我们添加一段可自动修复的问题代码（如果在 VS Code 里添加，保存时会自动修复，所以用 CLI 来添加）：
 
 ```bash
-echo ';' >> src/App.jsx
+echo ';' >> src/routes/page.jsx
 ```
 
-打开 `App.jsx`，可以看到末尾多了一个 ';'，有问题提示。
+打开 `page.tsx`，可以看到末尾多了一个 ';'，有问题提示。
 
 提交代码：
 
@@ -24,7 +24,7 @@ git status
 手动把参数 a 的问题修复（删除 a），再次添加 ';'，提交代码：
 
 ```bash
-echo ';' >> src/App.jsx
+echo ';' >> src/routes/page.jsx
 git commit -am "test: 再次测试准入检查"
 git log HEAD --stat --graph --name-status
 ```
@@ -43,7 +43,7 @@ git log HEAD --stat --graph --name-status
 如果要对整个仓库的所有文件做 lint 检查和自动修复，可以手动执行 `lint` 命令，比如：
 
 ```bash
-echo ';' >> src/App.jsx
+echo ';' >> src/routes/page.jsx
 pnpm run lint
 ```
 

package/zh/tutorials/first-app/c04-es6-plus-and-ts/4.1-use-es6-plus.md

@@ -6,22 +6,9 @@ title: 使用 ES6+ 语法
 
 这一章节中，我们沿用上一章节的项目和编码环境，实现一个最简单的联系人列表。
 
-Modern.js 支持 `src` 目录下直接使用 ES6+（ES2015+）语法，原则上包括：
+Modern.js 支持 `src` 目录下直接使用 ES6+（ES2015+）语法。
 
-1. 已经进入 [Stage 4（完成阶段）](https://github.com/tc39/proposals/blob/master/finished-proposals.md)的语法，包括 ES2015（ES6）到 ES2020（ES11）以及后续版本。
-2. 部分很有用且确定性较强（重构也容易）的 [Stage 1（提案阶段）](https://github.com/tc39/proposals/blob/master/stage-1-proposals.md)、[Stage 2（草案阶段）](https://github.com/tc39/proposals#stage-2)、[Stage 3（候选阶段）](https://github.com/tc39/proposals#stage-3)语法，比如：
-
-     - [Decorators](https://babeljs.io/docs/en/babel-plugin-proposal-decorators)（默认使用 legacy 提案，可通过 `output.enableLatestDecorators` 使用新版提案）
-     - [Class Public Properties](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)
-     - [Class Private Properties](https://babeljs.io/docs/en/babel-plugin-proposal-private-property-in-object)、[Class Private Methods](https://babeljs.io/docs/en/babel-plugin-proposal-private-methods)
-     - [Pipeline Operator](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator)（默认为 minimal 提案）
-     - [Partial Application](https://babeljs.io/docs/en/babel-plugin-proposal-partial-application)
-     - [Bind Operator](https://babeljs.io/docs/en/babel-plugin-proposal-function-bind)
-     - [export default from](https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from), [export namespace from](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from)
-     - [Optional Catch Binding](https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding)
-     - [Numeric Separator](https://babeljs.io/docs/en/babel-plugin-proposal-numeric-separator)
-
-我们把 `src/App.jsx` 改成：
+我们把 `routes/page.jsx` 改成：
 
 ```js
 const getAvatar = users =>
@@ -30,18 +17,18 @@ const getAvatar = users =>
     avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
   }));
 
-const mockData =
-  [
+const getMockData = () =>
+  getAvatar([
     { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
     { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
     { name: 'Bradley', email: 'd.wfovsqyo@gpkcjwjgb.fr' },
     { name: 'Davis', email: '"t.kqkoj@utlkwnpwk.nu' },
-  ] |> getAvatar;
+  ]);
 
-function App() {
+function Index() {
   return (
     <ul>
-      {mockData.map(({ name, avatar, email }) => (
+      {getMockData().map(({ name, avatar, email }) => (
         <li key={name}>
           <img src={avatar} width={60} height={60} /> ---
           <span>{name}</span> ---
@@ -52,7 +39,7 @@ function App() {
   );
 }
 
-export default App;
+export default Index;
 ```
 
 可以看到其中使用了多种 ES6+ 语法（注意生成 mockData 过程中使用了 [Pipeline Operator](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator) 语法），都不需要做任何配置。