@modern-js/main-doc 0.0.0-next-20221216140552 → 0.0.0-next-20221218140542

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-20221216140552
+## 0.0.0-next-20221218140542
 
 ### Patch Changes
 
@@ -30,4 +30,4 @@
 - Updated dependencies [3fae2d03b]
 - Updated dependencies [df41d71ad]
 - Updated dependencies [14b712da8]
-  - @modern-js/builder-doc@0.0.0-next-20221216140552
+  - @modern-js/builder-doc@0.0.0-next-20221218140542

package/package.json

@@ -11,20 +11,20 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-20221216140552",
+  "version": "0.0.0-next-20221218140542",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-20221216140552"
+    "@modern-js/builder-doc": "0.0.0-next-20221218140542"
   },
   "devDependencies": {
     "ts-node": "^10",
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "0.0.0-next-20221216140552"
+    "@modern-js/builder-doc": "0.0.0-next-20221218140542"
   },
   "scripts": {
     "build": "npx ts-node ./scripts/sync.ts"

package/zh/tutorials/first-app/c01-start.md

@@ -64,15 +64,19 @@ function App() {
 export default App;
 ```
 
-因为框架默认支持 [HMR](https://webpack.js.org/concepts/hot-module-replacement/)，可以看到 `http://localhost:8080/` 里的内容会自动变成 Hello Modern.js。
-
 删除多余的 css 文件，保持目录没有多余的文件：
 
 ```bash
 rm src/routes/index.css
 ```
 
-## 使用配置
+因为框架默认支持 [HMR](https://webpack.js.org/concepts/hot-module-replacement/)，可以看到 `http://localhost:8080/` 里的内容会自动更新为：
+
+![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvt/ljhwZthlaukjlkulzlp/screenshot-20221214-141909.png)
+
+此刻的页面还没有样式。下一章节将展开这部分的内容。
+
+## 开启 SSR
 
 接下来，我们修改项目中的 `modern.config.ts`，开启 SSR 能力：
 

package/zh/tutorials/first-app/c05-loader.md

@@ -4,7 +4,7 @@ title: 添加 Loader
 
 上一章节中，我们学习了如何添加客户端路由。
 
-这一章节中，我们将会学习如何**为路由组件添加 Loader**。
+这一章节中，我们将会学习如何为**路由组件添加 Loader**。
 
 到目前为止，我们都是通过硬编码的方式，为组件提供数据。如果要从远端获取数据，通常情况下会使用 `useEffect` 来做。但在启用 SSR 的情况下，`useEffect` 是不会在服务端执行的，所以这种 SSR 只能渲染很有限的 UI。
 

package/zh/tutorials/first-app/c06-model.md

@@ -216,9 +216,9 @@ export const loader = async (): Promise<LoaderData> => {
 
 function Index() {
   const { data } = useLoaderData() as LoaderData;
-  const [{ items }, { archive, setItem }] = useModel(contacts);
+  const [{ items }, { archive, setItems }] = useModel(contacts);
   if (items.length === 0) {
-    setItem(data);
+    setItems(data);
   }
 
   return (