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

package/zh/tutorials/first-app/c10-model/10.3-use-model.md

@@ -2,18 +2,17 @@
 title: 使用 Model
 ---
 
-上一小节中，我们实现了 Model，已经把 AllContacts 组件中原有的 UI 无关业务逻辑解耦出来。
+上一小节中，我们实现了 Model，已经把 `page.tsx` `Index` 组件中原有的 UI 无关业务逻辑解耦出来。
 
-这一小节中，我们使用这个 Model 直接把 AllContacts 组件重新还原出来，实现变得更简洁清晰：
+这一小节中，我们使用这个 Model 直接把 `page.tsx` `Index` 组件重新还原出来，实现变得更简洁清晰：
 
-```js title="src/contacts/components/AllContacts/index.tsx"
+```js title="src/contacts/routes/page.tsx"
 import { useEffect } from 'react';
 import { useLocalModel } from '@modern-js/runtime/model';
-import { List } from 'antd';
-import Item from '../Item';
-import contacts from '../../models/contacts';
+import contacts from './models/contacts';
+import Item from './components/Item';
 
-const AllContacts = () => {
+function Index() {
   const [{ items, error, pending }, actions] = useLocalModel(contacts);
 
   useEffect(() => {
@@ -22,23 +21,25 @@ const AllContacts = () => {
     }
   });
   return (
-    (items.length && (
-      <List
-        dataSource={items}
-        renderItem={info => <Item key={info.name} info={info} />}
-      />
-    )) || (
-      <div className="p-4 items-center border-gray-200 border-b border-t custom-text-gray">
-        Pending...
-      </div>
-    )
+    <div className="container lg mx-auto">
+      {(items.length && (
+        <List
+          dataSource={items}
+          renderItem={info => <Item key={info.name} info={info} />}
+        />
+      )) || (
+        <div className="p-4 items-center border-gray-200 border-b border-t custom-text-gray">
+          Pending...
+        </div>
+      )}
+    </div>
   );
-};
+}
 
-export default AllContacts;
+export default Index;
 ```
 
-以上代码跟上一章节中 `AllContacts` 组件的代码等价。
+以上代码跟上一章节中 `Index` 组件的代码等价。
 
 `useLocalModel` 是 Modern.js 提供的 hooks API，可以使用 Model，在组件中提供 Model 中定义的 state，或通过 actions 调用 Model 中定义的 side effect 与 action，从而改变 Model 的 state。
 

package/zh/tutorials/first-app/c10-model/10.4-testing.md

@@ -17,14 +17,14 @@ import TabItem from '@theme/TabItem';
 <TabItem value="macOS" label="macOS" default>
 
 ```bash
-touch src/contacts/models/contacts.test.ts
+touch src/contacts/routes/models/contacts.test.ts
 ```
 
 </TabItem>
 <TabItem value="Windows" label="Windows">
 
 ```powershell
-ni src/contacts/models/contacts.test.ts
+ni src/contacts/routes/models/contacts.test.ts
 ```
 
 </TabItem>

package/zh/tutorials/first-app/c11-container/11.1-use-model-with-app-state.md

@@ -2,13 +2,13 @@
 title: ​完整使用 Model
 ---
 
-上一章节中，我们初步引入**客户端应用架构**，从【 视图组件 】中拆分出【 业务模型（Model）】，`AllContacts` 中不再包含 UI 无关的业务逻辑实现细节，只需要使用 Model，就能实现同样的功能。
+上一章节中，我们初步引入**客户端应用架构**，从【 视图组件 】中拆分出【 业务模型（Model）】，`page.tsx` 中不再包含 UI 无关的业务逻辑实现细节，只需要使用 Model，就能实现同样的功能。
 
-这一章节中，我们要进一步利用 Model 中实现的业务逻辑，让 `AllContacts` 和  `ArchivedContacts` 都从 BFF 获取数据，实现 Archive 按钮，点击按钮能把联系人归档，只显示在 Archives 列表里，不显示在 All 列表里。
+这一章节中，我们要进一步利用 Model 中实现的业务逻辑，让 `archived/page.ts` 也从 BFF 获取数据，实现 Archive 按钮，点击按钮能把联系人归档，只显示在 Archives 列表里，不显示在 All 列表里。
 
 先改造 `Item` 组件，增加 Archive 按钮的交互实现：
 
-```tsx title="src/contacts/components/Item/index.tsx"
+```tsx title="src/contacts/routes/components/Item/index.tsx"
 import Avatar from '../Avatar';
 
 type InfoProps = {
@@ -42,7 +42,8 @@ const Item = ({
             archived
               ? 'bg-gray-400 cursor-default'
               : 'bg-blue-500 hover:bg-blue-700'
-          }`}>
+          }`}
+        >
           {archived ? 'Archived' : 'Archive'}
         </button>
       </div>
@@ -53,9 +54,9 @@ const Item = ({
 export default Item;
 ```
 
-`ArchivedContacts` 和 `AllContacts` 需要共用同一套状态（联系人列表数据、联系人是否被归档），并且由于 Archives 列表和 All 列表都可能是第一屏页面（从不同 URL 访问），这两个组件都需要包含加载初始数据的逻辑（如果客户端没有联系人列表数据，就请求 BFF），所以这类两个组件公用的实现逻辑应该合并到一起：
+两个页面需要共用同一套状态（联系人列表数据、联系人是否被归档），并且由于 Archives 列表和 All 列表都可能是第一屏页面（从不同 URL 访问），这两个组件都需要包含加载初始数据的逻辑（如果客户端没有联系人列表数据，就请求 BFF），所以这类两个组件公用的实现逻辑应该合并到一起：
 
-我们删除原有的两个组件，创建一个新的 `Contacts` 组件：
+我们创建一个新的 `Contacts` 组件：
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -64,18 +65,16 @@ import TabItem from '@theme/TabItem';
 <TabItem value="macOS" label="macOS" default>
 
 ```bash
-rm -r src/contacts/components/*Contacts
-mkdir -p src/contacts/components/Contacts/
-touch src/contacts/components/Contacts/index.tsx
+mkdir -p src/contacts/routes/components/Contacts/
+touch src/contacts/routes/components/Contacts/index.tsx
 ```
 
 </TabItem>
 <TabItem value="Windows" label="Windows">
 
 ```powershell
-rm -r src/contacts/components/*Contacts
-mkdir -p src/contacts/components/Contacts/
-ni src/contacts/components/Contacts/index.tsx
+mkdir -p src/contacts/routes/components/Contacts/
+ni src/contacts/routes/components/Contacts/index.tsx
 ```
 
 </TabItem>
@@ -83,7 +82,7 @@ ni src/contacts/components/Contacts/index.tsx
 
 修改`components/Contacts/index.tsx` ，内容如下：
 
-```tsx title="src/contacts/components/Contacts/index.tsx"
+```tsx title="src/contacts/routes/components/Contacts/index.tsx"
 import { useEffect } from 'react';
 import { useLocalModel } from '@modern-js/runtime/model';
 import { List } from 'antd';
@@ -128,57 +127,39 @@ const Contacts = ({ source }: { source: 'archived' | 'items' }) => {
 export default Contacts;
 ```
 
-:::info 注
-由于 computed 功能还未提供，这里先在组件里将传入的数据做预处理。
-:::
+最后改造 `page.tsx` 和 `archived/page.ts`，利用 Contacts 实现 Archives 列表和 All 列表：
 
-最后改造 `App.tsx`，利用 Contacts 实现 Archives 列表和 All 列表：
-
-```tsx title="src/contacts/App.tsx"
-import { useState } from 'react';
-import { Radio, RadioChangeEvent } from 'antd';
-import { Route, useHistory } from '@modern-js/runtime/router';
-import { Helmet } from '@modern-js/runtime/head';
+```tsx title="src/contacts/page.tsx"
+import Contacts from './components/Contacts';
+import 'ladda/dist/ladda.min.css';
 import 'tailwindcss/base.css';
 import 'tailwindcss/components.css';
 import 'tailwindcss/utilities.css';
 import './styles/utils.css';
-import Contacts from './components/Contacts';
 
-function App() {
-  const history = useHistory();
-  const [currentList, setList] = useState(history.location.pathname || '/');
-  const handleSetList = (e: RadioChangeEvent) => {
-    const { value } = e.target;
-    setList(value);
-    history.push(value);
-  };
+function Index() {
+  return (
+    <div className="container lg mx-auto">
+      <Contacts source="items" />
+    </div>
+  );
+}
+
+export default Index;
+```
+
+```tsx title="src/contacts/archived/page.tsx"
+import Contacts from './components/Contacts';
 
+function Index() {
   return (
     <div className="container lg mx-auto">
-      <div className="h-16 p-2 flex items-center justify-center">
-        <Radio.Group onChange={handleSetList} value={currentList}>
-          <Radio value="/">All</Radio>
-          <Radio value="/archives">Archives</Radio>
-        </Radio.Group>
-      </div>
-      <Route path="/" exact={true}>
-        <Helmet>
-          <title>All</title>
-        </Helmet>
-        <Contacts source="items" />
-      </Route>
-      <Route path="/archives" exact={true}>
-        <Helmet>
-          <title>Archives</title>
-        </Helmet>
-        <Contacts source="archived" />
-      </Route>
+      <Contacts source="archived" />
     </div>
   );
 }
 
-export default App;
+export default Index;
 ```
 
 执行 `pnpm run dev`，访问 `http://localhost:8080/contacts/`，点击 Archive 按钮后，可以看到按钮置灰：
@@ -189,22 +170,7 @@ export default App;
 
 ![display7](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/11/display7.png)
 
-出现这个问题的原因是，我们继续沿用了上一节的 `useLocalModel` API 来使用 Model，状态被保存到了组件内部的 state 里，而 `All` 列表和 `Archives` 列表中分别调用的 `Contacts` 组件，是两个各自独立的组件：
-
-```tsx title="src/contacts/App.tsx"
-<Route path="/" exact={true}>
-  <Helmet>
-    <title>All</title>
-  </Helmet>
-  <Contacts source="items" />
-</Route>
-<Route path="/archives" exact={true}>
-  <Helmet>
-    <title>Archives</title>
-  </Helmet>
-  <Contacts source="archived" />
-</Route>
-```
+出现这个问题的原因是，我们继续沿用了上一节的 `useLocalModel` API 来使用 Model，状态被保存到了组件内部的 state 里，而 `All` 列表和 `Archives` 列表中分别调用的 `Contacts` 组件，是两个各自独立的组件.
 
 所以它们有各自独立的内部 state，互相不共享状态，渲染 `Archives` 列表的时候，`items` 仍然是初始状态。
 
@@ -215,7 +181,7 @@ export default App;
 修改 `components/Contacts/index.tsx` 的内容：
 
 
-```tsx title="src/contacts/components/Contacts/index.tsx"
+```tsx title="src/contacts/routes/components/Contacts/index.tsx"
 import { useEffect } from 'react';
 import { useModel } from '@modern-js/runtime/model';
 import { List } from 'antd';

package/zh/tutorials/first-app/c11-container/11.2-add-container.md

@@ -19,9 +19,9 @@ import TabItem from '@theme/TabItem';
 <TabItem value="macOS" label="macOS" default>
 
 ```bash
-mkdir -p src/contacts/containers/
-mv src/contacts/components/Contacts/index.tsx src/contacts/containers/Contacts.tsx
-rm -r src/contacts/components/Contacts/
+mkdir -p src/contacts/routes/containers/
+mv src/contacts/routes/components/Contacts/index.tsx src/contacts/routes/containers/Contacts.tsx
+rm -r src/contacts/routes/components/Contacts/
 ```
 
 </TabItem>
@@ -43,7 +43,7 @@ import Item from '../components/Item';
 import contacts from '../models/contacts';
 ```
 
-修改 `App.tsx` 的代码：
+修改 `page.tsx` 和 `archives/page.tsx` 的代码：
 
 ```tsx
 import Contacts from './containers/Contacts';
@@ -53,45 +53,48 @@ import Contacts from './containers/Contacts';
 
 ```md
 .
-├── .vscode/
-├── api/
-│   ├── .eslintrc.json
-│   └── contacts.ts
-├── src/
-│   ├── contacts/
-│   │   ├── components/
-│   │   │   ├── Avatar/
-│   │   │   │   ├── index.stories.tsx
-│   │   │   │   └── index.tsx
-│   │   │   └── Item/
-│   │   │       ├── index.test.tsx
-│   │   │       └── index.tsx
-│   │   ├── containers/
-│   │   │   └── Contacts.tsx
-│   │   ├── models/
-│   │   │   ├── contacts.test.ts
-│   │   │   └── contacts.ts
-│   │   ├── styles/
-│   │   │   └── utils.css
-│   │   ├── App.css
-│   │   └── App.tsx
-│   ├── landing-page/
-│   │   └── pages/
-│   │       ├── comments/
-│   │       │   └── [commentTitle]/
-│   │       │       └── index.tsx
-│   │       ├── _app.tsx
-│   │       ├── docs.tsx
-│   │       └── index.tsx
-│   ├── .eslintrc.json
-│   └── modern-app-env.d.ts
-├── .editorconfig
+├── .eslintrc.js
 ├── .gitignore
+├── .husky
 ├── .npmrc
 ├── .nvmrc
+├── .prettierrc
+├── .vscode
 ├── README.md
+├── api
+│   └── contacts.ts
+├── modern.config.ts
 ├── package.json
 ├── pnpm-lock.yaml
+├── src
+│   ├── .eslintrc.js
+│   ├── contacts
+│   │   └── routes
+│   │       ├── archives
+│   │       │   └── page.tsx
+│   │       ├── components
+│   │       │   ├── Avatar
+│   │       │   │   ├── index.stories.tsx
+│   │       │   │   └── index.tsx
+│   │       │   └── Item
+│   │       │       ├── index.test.tsx
+│   │       │       └── index.tsx
+│   │       ├── containers
+│   │       │   └── Contacts.tsx
+│   │       ├── index.css
+│   │       ├── layout.tsx
+│   │       ├── models
+│   │       │   ├── contacts.test.ts
+│   │       │   └── contacts.ts
+│   │       ├── page.tsx
+│   │       └── styles
+│   │           └── utils.css
+│   ├── landing-page
+│   │   └── routes
+│   │       ├── index.css
+│   │       ├── layout.tsx
+│   │       └── page.tsx
+│   └── modern-app-env.d.ts
 └── tsconfig.json
 ```
 

package/zh/tutorials/first-app/c11-container/11.3-use-loader.md

@@ -8,10 +8,12 @@ title: ​使用 Loader
 
 可以在当前项目中开启 [SSR](/docs/configure/app/server/ssr)，看下这种效果。
 
-```json
-"server": {
-  "ssr": true,
-}
+```js
+export default defineConfig({
+  server: {
+    ssr: true,
+  },
+});
 ```
 
 执行 `pnpm run dev`，在 devtools 的 network 面板里查看 HTML 请求的 Preview 面板，可以看到 SSR 的渲染结果只有导航栏和 Pending... 字符，并没有联系人数据：

package/zh/tutorials/first-app/c11-container/11.4-testing.md

@@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem';
 <TabItem value="macOS" label="macOS" default>
 
 ```bash
-touch src/contacts/containers/contacts.test.tsx
+touch src/contacts/routes/containers/contacts.test.tsx
 ```
 
 </TabItem>
 <TabItem value="Windows" label="Windows">
 
 ```powershell
-ni src/contacts/containers/contacts.test.tsx
+ni src/contacts/routes/containers/contacts.test.tsx
 ```
 
 </TabItem>

package/zh/tutorials/foundations/introduction.md

@@ -31,7 +31,7 @@ Modern.js 能为开发者提供极致的**开发体验（Development Experience
 - 🏠 **一体化**：开发与生产环境 Web Server 唯一，CSR 和 SSR 同构开发，函数即接口的 API 服务调用。
 - 📦 **开箱即用**：默认 TS 支持，内置构建、ESLint、调试工具，全功能可测试。
 - 🌏 **周边生态**：自研状态管理、微前端、模块打包、Monorepo 方案等周边需求。
-- 🕸 **多种路由模式**：包含自控路由、基于文件约定的路由（嵌套路由）、配置式路由等。
+- 🕸 **多种路由模式**：包含自控路由、基于文件约定的路由（嵌套路由）等。
 - 🚀 **独立构建核心**：支持多种打包工具，深度优化构建产物。
 
 ## 下一步

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/default-alias.md

@@ -1,25 +0,0 @@
----
-sidebar_position: 1
-title: Default Alias
----
-
-Modern.js recommend referring to the source code by alias, which contains 3 default aliases:
-- `@/`: the file under the project root directory `src/* `.
-- `@api/`: the file under the `api/*` in the project root directory (you need to enable the BFF first).
-- `@shared/`: the file under the project root directory `shared/* `.
-
-:::tip
-In addition, developers can customize aliases in modern.config.js, see [Aliases](/docs/configure/app/source/alias) for detail.
-:::
-
-
-## Example
-
-The following example shows how to reference a function by default alias.
-
-```tsx
-import { hello } from '@/common/utils';
-
-hello();
-```
-A reference to `@/common/utils` is equal to a reference to `src/common/utils`.

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/plugin/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "插件 API",
-  "position": 12
-}

package/en/docusaurus-plugin-content-docs/current/apis/app/runtime/plugin/abstract.md

@@ -1,26 +0,0 @@
----
-sidebar_position: 1
----
-
-# 概览
-
-Modern.js 的基础的插件系统中主要分为三个部分: Hook 模型（Pipeline、Workflow、Waterfall）、 Hook 模型的管理器（Manager），上下文共享机制。
-
-其中的 Hook 模型是用于管理运行一系列相同模型（形状）函数的管理工具，目前提供了三个大类，7个小类:
-
-- Pipeline
-  - Sync
-  - Async
-- Waterfall
-  - Sync
-  - Async
-- Workflow
-  - Sync
-  - Async
-  - Parallel(Async)
-
-它们之间的区别是他们所管理的函数的运行模式的不同。不同的地方会在下面具体分析介绍。
-
-Hook 模型的管理器（Manager），顾名思义就是用来管理上面提到的那些 Hook 模型，添加至同一个 Manager 可以使用同一个 Runner 对象（包含所有 Hook 的执行函数）来运行，也共享同一个上下文环境。而 Modern.js 的基础插件系统中的插件就是针对 Manager 来说的，是一个拥有属性、插件 Hook 函数的对象。
-
-基于上面的工具（Hook 模型 + Manager），在 Modern.js 中主要构建了三套插件模型: CLI、Runtime、Server。其中 CLI 是 Modern.js 中主要的运行流程控制模型，Modern.js 中的各种工程方案（应用工程方案、模块工程方案、Monorepo 工程方案）都是主要通过这一套模型运行的。而 Runtime 则主要负责的是 React 路由组件和元素的处理（Component 和 Element）和渲染（包括服务器端渲染和客户端渲染）。而 Server 则是针对 Server 运行时的这个阶段的生命周期运行和特殊信息收集。其中 Runtime 和 Server 的运行都是在 CLI 中触发的。