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

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/zh/apis/app/runtime/default-alias.md

@@ -1,23 +0,0 @@
----
-sidebar_position: 1
-title: 默认别名
----
-
-Modern.js 推荐通过别名的方式引用源码，其中包含 3 种默认别名:
-- `@/`：等价于引用项目根目录 `src/*` 下的文件。
-- `@api/`：等价于引用项目根目录下 `api/*` 下的文件（需要先开启 BFF 功能）。
-- `@shared/`：等价于引用项目根目录下 `shared/*` 下的文件。
-
-:::tip 提示
-- 除了以下默认别名，开发者可以在 `modern.config.js` 中自定义别名，详见[如何配置别名](/docs/configure/app/source/alias)。
-:::
-
-## 示例
-下面的例子展示了如何通过默认别名引用函数。
-```tsx
-import { hello } from '@/common/utils';
-
-hello();
-
-```
-引用 `@/common/utils` 相当于引用 `src/common/utils`。

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

@@ -1,43 +0,0 @@
----
-title: 图片资源
-sidebar_position: 4
----
-
-## JS 中使用图片
-
-JS 文件中引入的图片资源会返回解析之后的 URL：
-
-```js title=src/App.jsx
-import logoUrl from './logo.png';
-
-console.log(logoUrl); // 输出： '/src/logo.png';
-```
-
-## Base64 编码内联
-
-默认情况下，小于 10kb 的图片、字体文件，会经过 Base64 编码，内联进页面，不会再发送独立的请求。
-
-可以通过配置 [`output.dataUriLimit`](/docs/configure/app/output/data-uri-limit) 修改这个阈值。
-
-## JS 中使用 SVG
-
-针对 SVG 资源，默认启用了 [SVGR](https://react-svgr.com/)，可以通过 React 组件的形式导入：
-
-```js title=App.jsx
-import logoUrl, { ReactComponent as LogoComponent } from './logo.svg';
-```
-
-## CSS 中使用图片
-
-在 CSS 文件中既可以通过相对路径也可以通过别名的方式引入图片:
-
-```css
-.logo {
-  background: url('./foo.png');
-}
-
-/** or **/
-.logo {
-  background: url('@/foo.png');
-}
-```

package/zh/guides/topic-detail/compile-speed.md

@@ -1,182 +0,0 @@
----
-title: 提升编译速度
-sidebar_position: 9
----
-
-Modern.js 默认内置了一系列的编译性能优化策略，但是随着业务场景变复杂、仓库的代码量增大，在使用过程中可能会遇到一些编译性能的问题。
-
-本文档提供了一些可选的提速策略，**开发者可以根据实际场景选取其中的部分策略**，从而进一步提升编译速度。
-
-## 通用优化策略
-
-以下是一些通用的优化策略，对 `modern dev` 和 `modern build` 均有提速效果，其中部分策略对包体积也有优化。
-
-### 减少重复依赖
-
-在实际项目中，会存在某些第三方依赖被安装了多个版本的现象。重复依赖会导致包体积变大、编译速度变慢。
-
-我们可以通过社区中的一些工具来自动消除重复依赖，比如 [yarn-deduplicate](https://github.com/scinos/yarn-deduplicate)。
-
-```bash
-npx yarn-deduplicate && yarn
-```
-
-如果你在使用 `pnpm`，可以考虑通过**重新生成 lock 文件**来减少重复依赖，
-
-```bash
-rm -rf ./node_modules pnpm-lock.yaml && pnpm install
-```
-
-:::info
-删除 lock 文件会使项目中的依赖版本自动升级到指定范围下的最新版，请进行充分的测试。
-:::
-
-### 替换体积较大的依赖
-
-建议将项目中体积较大的第三方依赖替换为更轻量的库，比如将 [moment](https://momentjs.com/) 替换为 [day.js](https://day.js.org/)。
-
-如果不清楚项目中哪些三方依赖的体积较大，可以在执行构建时添加 `--analyze` 参数：
-
-```bash
-npx modern build --analyze
-```
-
-该参数会生成一个分析构建产物体积的 HTML 文件，手动在浏览器中打开该文件，可以看到打包产物的瓦片图。区块的面积越大，说明该模块的体积越大。
-
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/mwa-build-analyze-8784f762c1ab0cb20935829d5f912c4c.png" />
-
-### 避免使用 ts-loader
-
-默认情况下，Modern.js 使用 Babel 编译 TS 文件，开启 `output.enableTsLoader` 选项后，会使用 `ts-loader` 编译 TS 文件。
-
-由于 `ts-loader` 需要进行额外的语法解析和类型检查，因此会导致项目编译速度变慢，请避免使用。
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  output: {
-    // 移除这项配置
-    enableTsLoader: true,
-  },
-});
-```
-
-详见 [tools.tsLoader 文档](/docs/configure/app/tools/ts-loader)。
-
-### 提升 Browserslist 范围
-
-**减少 Polyfill 的代码量可以提升编译速度。**Modern.js 会根据项目的 Browserslist 配置范围进行代码编译，并注入相应的 Polyfill。如果项目对兼容性的要求较低，可以根据实际情况，提升 Browserslist 范围，从而减少 Polyfill 的代码量。
-
-默认的 Browserslist 配置为：
-
-```js
-['> 0.01%', 'not dead', 'not op_mini all'];
-```
-
-比如只兼容 Chrome 53 以上的浏览器，可以改成：
-
-```js
-['Chrome >= 53'];
-```
-
-详见 [客户端兼容性 - Browserslist 配置](/docs/guides/advanced-features/compatibility#browserslist-配置)。
-
-### 按需引入 Polyfill
-
-明确第三方依赖不需要 Polyfill 的情况下，可以将 `output.polyfill` 设置为 `usage`，根据代码中使用到的语法，按需注入所需的 Polyfill 代码，从而减少 Polyfill 的代码量。
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  output: {
-    polyfill: 'usage',
-  },
-});
-```
-
-详见 [客户端兼容性 - Polyfill 模式](/docs/guides/advanced-features/compatibility#polyfill-模式)。
-
-## dev 优化策略
-
-以下是针对 `modern dev` 进行提速的策略。
-
-### 调整开发环境 SourceMap 格式
-
-为了提供良好的调试体验，Modern.js 在开发环境下默认使用 webpack 提供的 `cheap-module-source-map` 格式 SourceMap。
-
-由于生成高质量的 SourceMap 需要额外的性能开销，通过调整开发环境的 SourceMap 格式，可以提升 dev 编译速度。
-
-比如禁用 SourceMap：
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    webpackChain(chain, { env }) {
-      if (env === 'development') {
-        chain.devtool(false);
-      }
-    },
-  },
-});
-```
-
-或是把开发环境的 SourceMap 格式设置为开销最小的 `eval` 格式：
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    webpackChain(chain, { env }) {
-      if (env === 'development') {
-        chain.devtool('eval');
-      }
-    },
-  },
-});
-```
-
-> 关于不同 SourceMap 格式之间的详细差异，请查看 [webpack - devtool](https://webpack.js.org/configuration/devtool/)。
-
-### 调整开发环境的 Browserslist 范围
-
-这项优化的原理与「提升 Browserslist 范围」类似，区别在于，我们可以为开发环境和生产环境设置不同的 browserslist，使开发环境下不需要引入额外的 Polyfill 编译逻辑。
-
-比如在 `package.json` 中添加以下配置，在开发环境下只兼容最新的浏览器，在生产环境下兼容实际需要的浏览器：
-
-```json
-{
-  "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
-```
-
-注意，这项优化策略会导致 `dev` 构建的产物与 `build` 构建的产物存在一定差异。
-
-## build 优化策略
-
-以下是针对 `modern build` 进行提速的策略。
-
-### 禁用生产环境 SourceMap
-
-如果项目在生产环境下不需要 SourceMap，可以通过 `disableSourceMap` 配置项关闭，从而提升 build 构建的速度。
-
-```typescript title="modern.config.ts"
-export default defineConfig({
-  output: {
-    disableSourceMap: true,
-  },
-});
-```
-
-详见 [output.disableSourceMap](/docs/configure/app/output/disable-source-map)。
-
-### 使用 esbuild 压缩
-
-Modern.js 基于 esbuild 提供了代码编译和压缩的能力，在大型工程中开启后，**可以大幅度减少代码压缩所需的时间，同时有效避免 OOM (heap out of memory) 问题**。
-
-使用 esbuild 压缩虽然带来了构建效率上的提升，但 esbuild 的压缩比例是低于 terser 的，因此**构建产物的体积会增大**，请根据业务情况酌情使用（比较适合中后台场景）。
-
-详见 [tools.esbuild](/docs/configure/app/tools/esbuild)。