update zh docs translations

docs/zh/guide/apis/app-hooks.md

@@ -2,7 +2,7 @@
 
 钩子是在特定时机被调用的回调函数。
 
-钩子可以在插件被安装时添加，或者在 `UPDATE` 状态下由主函数添加。
+钩子可由插件添加，也可以编程式地注册。
 
 ## 一次性钩子
 

docs/zh/guide/apis/directives.md

@@ -21,7 +21,7 @@
 **使用方法**：
 
 ```ts
-$app(_ => {
+$app([], _ => {
   if (_.$updateContext) {
     _.$root.addCls("dark");
   }
@@ -34,12 +34,6 @@ $app(_ => {
 
 如果应用处于 `RECV` 状态，那么它是当前上下文对象，否则它是 `null`。
 
-## `_.$update` {#update}
-
-调用此方法以触发页面更新（即触发 `UPDATE` 状态的调用）。
-
-与 `_.$app.update` 等价。
-
 ## `_.$updateModel`
 
 设置一个 `Model` 所包含的值，并触发页面更新。
@@ -51,11 +45,11 @@ $app(_ => {
 **使用方法**：
 
 ```ts
-$app(_ => {
-  _.$ev; // 错误： 'Context' 上不存在 '$ev'。
+$app([], _ => {
+  _.$ev; // ERROR: Property '$ev' does not exist on type 'Context'.
 
   if (_.button("Click me")) {
-    _.$ev; // 类型为 MouseEvent
+    _.$ev; // of type MouseEvent
   }
 });
 ```
@@ -100,12 +94,6 @@ $app(_ => {
 
 参见 [添加类名与样式](../essentials/rendering-basics#add-classes-and-styles).
 
-## `_.$permanentData`
-
-`_.$app.permanentData` 的简写。
-
-**生命周期**: 从页面创建到应用被关闭。
-
 ## `_.$runtimeData` {#runtime-data}
 
 `_.$state.runtimeData` 的简写。
@@ -114,6 +102,8 @@ $app(_ => {
 
 :::info
 
-通常你不需要直接读写 `_.$runtimeData`，因为它可能会从可控的作用域泄露。请使用 `_.provide` 方法向一定范围内提供值。
+It is usually a bad idea to write to `_.$runtimeData` directly,
+which is not scoped to children,
+use `_.provide` to provide values to `_.$runtimeData` instead.
 
 :::

docs/zh/guide/apis/util-funcs.md

@@ -16,12 +16,12 @@ import NowVue from "snippets/now.vue";
 **例子**
 
 ```ts {4}
-$app.use(Basics)(_ => {
+$app([Basics], _ => {
   _.div(() => {
-    _.span("在 div 内部");
-    _.portal(_ => _.span("在 portal 内部"));
+    _.span("Inside the div");
+    _.portal(_ => _.span("Inside the portal"));
   });
-  _.span("在 div 外部");
+  _.span("Outside the div");
 });
 ```
 
@@ -75,9 +75,9 @@ if (_.await(() => fetch("https://example.com"))) {
 **例子**
 
 ```ts {6}
-import { d } from "refina";
-const username = d("");
-$app.use(Basics)(_ => {
+import { model } from "refina";
+const username = model("");
+$app([Basics], _ => {
   _.label("Username");
   _.textInput(username, false, "edit me");
   _.documentTitle(`Hello ${username}`);
@@ -108,7 +108,7 @@ _.asyncEmbed(() => import("./someContent.ts"));
 
 ## `_.provide`
 
-提供一组键值或一个对象到 [`_.$runtimeData`](./directives.md#runtime-data)，并且这些值与对象仅在内部有效。
+Provide a value or an object of values to [`_.$runtimeData`](./directives.md#runtime-data) for the duration of children.
 
 **例子**
 
@@ -137,7 +137,7 @@ _.provide("username", "John", myView, ...viewParams);
 **例子**
 
 ```ts
-$app.use(Basics)(_ => {
+$app([Basics], _ => {
   _.p(`The current time is ${_.now(500)}`);
 });
 ```

docs/zh/guide/essentials/app-state.md

@@ -36,7 +36,7 @@
 
 ```ts
 let count = 0;
-$app.use(Basics)(_ => {
+$app([Basics], _ => {
   _.p(`Count is: ${count}`);
   count++; // count 在 UPDATE 状态下也会被改变
 });
@@ -59,7 +59,7 @@ $app.use(Basics)(_ => {
 以下代码是错误的。它会造成未定义行为。
 
 ```ts
-$app.use(Basics)(_ => {
+$app([Basics], _ => {
   if (_.button("Click me")) {
     _.p("Hello");
   }

docs/zh/guide/essentials/application.md

@@ -7,44 +7,38 @@
 ```ts
 import { $app } from "refina";
 
-$app(_ => {
+$app([], _ => {
   // 应用主体 （主函数）
   // ...
 });
 ```
 
 ## 使用插件
 
-通过调用 `$app.use` 向应用添加插件。
-
 所有组件和工具函数都通过插件提供。所以插件是必不可少的一部分。
 
-```ts
-import { $app } from "refina";
-import Basics from "@refina/basic-components";
+`$app` 的第一个参数可以是插件列表。
 
-$app.use(Basics)(_ => {
-  // _.h1 由名为 Basics 的插件提供
-  _.h1("Hello, Refina!");
+```ts
+$app([Plugin1, Plugin2(param1, param2), Plugin3], _ => {
+  // ...
 });
 ```
 
-若要使用多个插件，请链式调用 `$app.use` 方法：
+但是，TypeScript 并不知道有哪些插件被使用，除非显式地声明它们 ：
 
 ```ts
-$app.use(Plugin1).use(Plugin2, param1, param2).use(Plugin3)(_ => {
-  // ...
-});
+declare module "refina" {
+  interface Plugins {
+    Plugin1: typeof Plugin1;
+    Plugin2: typeof Plugin2;
+    Plugin3: typeof Plugin3;
+  }
+}
 ```
 
 事实上，属于Refina核心的组件和工具函数由名为 `Prelude` 插件的提供。这个插件在创建应用时会被自动添加。
 
-:::warning
-
-由于 TypeScript 的限制，如果仅导入插件却不安装它，其类型仍然在上下文对象中可见。 但是如果你使用这些实际上并没有安装的插件，会产生运行时错误。
-
-:::
-
 ## 主函数
 
 主函数是页面的主体，负责构建页面和处理事件。
@@ -65,35 +59,16 @@ $app.use(Plugin1).use(Plugin2, param1, param2).use(Plugin3)(_ => {
 
 根元素是应用挂载在 DOM 中的容器元素。
 
-默认的根元素是 `id` 为 `root` 的元素。
+根元素默认是 `"#app"`。
 
-你可以将期望的根元素的 `id` 传入 `$app` 的第二个参数。
+你可以用 `root` 选项自定义根元素。
 
 ```ts
-$app(_ => {
-  // ...
-}, "my-root");
-```
-
-## 多个应用实例
-
-在同一个页面中可以创建多个共存的 Refina 应用。
-
-你可以为每个应用指定不同的根元素。
-
-```html
-<body>
-  <div id="root1"></div>
-  <div id="root2"></div>
-</body>
-```
-
-```ts
-$app(_ => {
-  // ...
-}, "root1");
-
-$app(_ => {
-  // ...
-}, "root2");
+$app(
+  { plugins: [], root: "#my-root" },
+  _ => {
+    // ...
+  },
+  "my-root",
+);
 ```

docs/zh/guide/essentials/component.md

@@ -2,7 +2,7 @@
 
 组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。
 
-与 Vue.js 中的组件不同，Refina 中的组件**不**被用于将应用分成几个部分，对于这种需求，请使用[视图](./view.md)。
+与其他框架中的组件不同，Refina 中的组件**不**被用于将应用分成几个部分，对于这种需求，请使用[视图](./view.md)。
 
 ## 组件的种类
 
@@ -25,7 +25,7 @@ Refina 中有3种组件：
 有时一个组件有很多可选的 props。这使得将这些 props 通过组件函数参数传入十分不便。 这时我们可以使用 [`_.$props` 指令](../apis/directives.md#props) 向下一个组件以按名称传入的方式添加多个额外的 prop。
 
 ```ts
-$app.use(MdUI)(_ => {
+$app([MdUI], _ => {
   _.$props({
     icon: "person",
     endIcon: "arrow_forward",
@@ -48,15 +48,15 @@ $app.use(MdUI)(_ => {
 
 :::
 
-## 主元素 {#main-element}
+## 主元素 {#primary-element}
 
-如果组件渲染了一个 DOM 元素（不包括文本节点），它就有一个主元素。主元素可以通过 `componentInstance.$mainEl` 属性获得。
+如果组件渲染了一个 DOM 元素（不包括文本节点），它就有一个主元素。主元素可以通过 `componentInstance.$primaryEl` 属性获得。
 
 如果一个组件不包括任何非文本节点的 DOM 元素，那么它的主元素的值为 `undefined`。
 
 主元素应当是组件的视觉核心。 向组件添加的类名与样式将被设置在主元素上。 组件的底层实现是一个上下文函数。 所以创建一个不属于上述种类的组件是完全可行的。
 
-组件可以通过调用 `this,$main()` 指令来设置下一个元素为主元素。 默认地，组件渲染的第一个元素将被视为组件的主元素。
+组件可以通过调用 `this,$primary()` 指令来设置下一个元素为主元素。 默认地，组件渲染的第一个元素将被视为组件的主元素。 默认地，组件渲染的第一个元素将被视为组件的主元素。
 
 :::info
 

docs/zh/guide/essentials/conditional.md

@@ -9,7 +9,7 @@ import ConditionalRenderingVue from "snippets/conditional-rendering.vue";
 ```ts
 let count = 0;
 
-$app.use(Basics)(_ => {
+$app([Basics], _ => {
   _.p(`Count is: ${count}`);
 
   _.button(`Add`) && count++;

docs/zh/guide/essentials/event.md

@@ -7,18 +7,6 @@ import EventHandling from "snippets/event-handling.vue";
 本节将介绍在 Refina 中如何处理事件。
 
 ```ts
-let count = 0;
-
-$app.use(Basics)(_ => {
-  _.p(`Count is: ${count}`);
-
-  _.button(`Add`) && count++;
-
-  if (_.button("Reset")) {
-    count = 0;
-    console.log(_.$ev);
-  }
-});
 ```
 
 **运行结果**

docs/zh/guide/essentials/input.md

@@ -12,11 +12,11 @@ import InputEventVue from "snippets/input-event.vue";
 ## 例子：获取用户在 input 元素中的输入。
 
 ```ts
-import { d } from "refina";
+import { model } from "refina";
 
-const username = d("");
+const username = model("");
 
-$app.use(Basics)(_ => {
+$app([Basics], _ => {
   _.label("Username");
   _.textInput(username, false, "edit me");
   username.value.length && _.button("Clear") && (username.value = "");
@@ -43,7 +43,7 @@ $app.use(Basics)(_ => {
 ```ts
 import { fromProp } from "refina";
 const user = { username: "" };
-$app.use(Basics)(_ => {
+$app([Basics], _ => {
   _.label("Username");
   _.textInput(fromProp(user, "username")); // [!code focus]
 });
@@ -57,27 +57,27 @@ $app.use(Basics)(_ => {
 type D<T> = T | PD<T>;
 ```
 
-### `d` 函数
+### The `unwrap` Function
 
 该函数可以从类型为 `Model` 的值中取出原始值。
 
 ```ts
 const intrinsicValue = 1;
-assert(getD(intrinsicValue) === 1);
+assert(unwrap(intrinsicValue) === 1);
 
-const wrappedValue = d(1);
-assert(getD(wrappedValue) === 1);
+const wrappedValue = model(1);
+assert(unwrap(wrappedValue) === 1);
 ```
 
 :::info
 
-如果数据包裹由 `d` 函数创建，那么它的类型是 `PD<T>`, 因此你不需要使用 `getD` 函数。 你可以直接访问 `wrappedValue.value`. 你可以直接访问 `yourModel.value`.
+If the wrapped value is defined via `model` function, it is of type `JustModel<T>`, so you don't need to use `unwrap` function to extract the value. 你可以直接访问 `yourModel.value`.
 
 :::
 
 ### `_.$setD` 函数
 
-与 `valueOf` 函数相对应，这个函数可以设置类型为 `Model` 中的数据的值，并触发应用的更新。
+Corresponding to `unwrap` function, this function can update the value of a model.
 
 ## 另一种获取用户输入的方式。
 
@@ -86,7 +86,7 @@ assert(getD(wrappedValue) === 1);
 下面的例子中，用户的输入被存储在 `sessionStorage`，而不是一个变量。
 
 ```ts
-$app.use(Basics)(_ => {
+$app([Basics], _ => {
   _.label("Username");
   if (_.textInput(sessionStorage.getItem("username") ?? "")) {
     sessionStorage.setItem("username", _.$ev);

docs/zh/guide/essentials/list.md

@@ -16,7 +16,7 @@ import { bySelf } from "refina";
 
 const items = ["Apple", "Banana", "Orange"];
 
-$app.use(Basics)(_ => {
+$app([Basics], _ => {
   _.for(items, bySelf, item => {
     _.p(item);
   });
@@ -45,7 +45,7 @@ Refina 提供了两个 key 生成器：
 `_.forTimes` 没有 key 生成器。它将索引作为 key。
 
 ```ts
-$app.use(Basics)(_ => {
+$app([Basics], _ => {
   _.forTimes(5, index => {
     _.p(`This is the ${index + 1}th paragraph.`);
   });