rhine-var 0.4.8 → 0.4.10

package/README.md

@@ -3,22 +3,37 @@
 # RHINE-VAR: Simplest and Powerful CRDT Library
 
 Rhine Variable — A self-synchronizing variable for collaboration.
-Developing collaborative applications has never been this easy.
 
 
 [English](README.md)   |   [中文](README_zh.md)
 
-<img src='./assets/images/example1.png' style="border-radius: 10px"/>
+<img src='./assets/images/example_counter.png' style="border-radius: 10px"/>
 
 </div>
 
+```typescript jsx
+const state = rhineProxy({count: 0}, 'room-0')   // Create
+function Counter() {
+  const snap = useRhine(state)   // Hook for React
+  return <div>
+    <span>{snap.count}</span>   // Automatic Update
+    <button onClick={() => state.count-- }> -1 </button>   // Operate Anyway
+    <button onClick={() => state.count++ }> +1 </button>
+  </div>
+} 
+```
+
+Try: [https://rv.rhineai.com/examples/counter](https://rv.rhineai.com/examples/counter)
+
 <br/>
 
-### **Document:** [LEARN.md](assets/documents/LEARN.md)
+## Overview
+
+**Document:** [LEARN_zh.md](assets/documents/LEARN_zh.md)
 
-### **Github:** [https://github.com/RhineAI-Lab/rhine-var](https://github.com/RhineAI-Lab/rhine-var)
+**Github:** [https://github.com/RhineAI-Lab/rhine-var](https://github.com/RhineAI-Lab/rhine-var)
 
-### **Npm:** [https://www.npmjs.com/package/rhine-var](https://www.npmjs.com/package/rhine-var)
+**Npm:** [https://www.npmjs.com/package/rhine-var](https://www.npmjs.com/package/rhine-var)
 
 <br/>
 
@@ -92,16 +107,17 @@ If you don't have `yarn`, you can install it via `npm i rhine-var`, or install `
 ```typescript jsx
 const defaultValue = {value: 0}
 const url = 'ws://localhost:6600/room-0'
-const count = rhineProxy(defaultValue, url)
+
+const state = rhineProxy(defaultValue, url)
 
 function Counter() {
   
-  const countSnap = useRhine(count)
+  const snap = useRhine(state)
   
   return <div>
-    <button onClick={() => count.value-- }> - 1 </button>
-    <span>{countSnap.value}</span>
-    <button onClick={() => count.value++ }> + 1 </button>
+    <button onClick={() => state.count-- }> -1 </button>
+    <span>{snap.count}</span>
+    <button onClick={() => state.count++ }> +1 </button>
   </div>
 }
 ```
@@ -125,6 +141,8 @@ Its data structure `can be quite complex`, but `at least`, it is `an object` in
 
 A hook for use with React. It creates a snapshot of a `RhineVar Object`, and whenever someone modifies this value, the information will be `updated on everyone's screen` in real-time.
 
+Note: The returned snapshot is read-only. Please do not perform any operations on it! The snapshot is only for reading data within React's XML. For all other operations (such as assignment or subscription), please operate on the original RhineVar object.
+
 <br/>
 
 #### [Click to view the full document: LEARN.md](assets/documents/LEARN.md)

package/README_zh.md

@@ -2,21 +2,37 @@
 
 # 最简单且强大的多人协同框架 RHINE-VAR
 
-莱茵变量 —— 会自己与他人协同的变量   多人协同应用开发从未如此简单 
+莱茵变量 —— 会自己与他人协同的变量   多人协同应用开发从未如此简单
 
 [English](README.md)   |   [中文](README_zh.md)
 
-<img src='./assets/images/example1.png' style="border-radius: 10px; max-width: 840px"/>
+<img src='./assets/images/example_counter.png' style="border-radius: 10px"/>
 
 </div>
 
+```typescript jsx
+const state = rhineProxy({count: 0}, 'room-0')   // Create
+function Counter() {
+  const snap = useRhine(state)   // Hook for React
+  return <div>
+    <span>{snap.count}</span>   // Automatic Update
+    <button onClick={() => state.count-- }> -1 </button>   // Operate Anyway
+    <button onClick={() => state.count++ }> +1 </button>
+  </div>
+} 
+```
+
+Try: [https://rv.rhineai.com/examples/counter](https://rv.rhineai.com/examples/counter)
+
 <br/>
 
-### **Document:** [LEARN_zh.md](assets/documents/LEARN_zh.md)
+## 简介
+
+**Document:** [LEARN_zh.md](assets/documents/LEARN_zh.md)
 
-### **Github:** [https://github.com/RhineAI-Lab/rhine-var](https://github.com/RhineAI-Lab/rhine-var)
+**Github:** [https://github.com/RhineAI-Lab/rhine-var](https://github.com/RhineAI-Lab/rhine-var)
 
-### **Npm:** [https://www.npmjs.com/package/rhine-var](https://www.npmjs.com/package/rhine-var)
+**Npm:** [https://www.npmjs.com/package/rhine-var](https://www.npmjs.com/package/rhine-var)
 
 <br/>
 
@@ -101,17 +117,19 @@ yarn add rhine-var
 ## Usage
 
 ```typescript jsx
-const defaultValue = {count: 0}
-const state = rhineProxy(defaultValue, 'room-0')
+const defaultValue = {value: 0}
+const url = 'ws://localhost:6600/room-0'
+
+const state = rhineProxy(defaultValue, url)
 
 function Counter() {
   
   const snap = useRhine(state)
   
   return <div>
-    <button onClick={() => state.count-- }> - 1 </button>
+    <button onClick={() => state.count-- }> -1 </button>
     <span>{snap.count}</span>
-    <button onClick={() => state.count++ }> + 1 </button>
+    <button onClick={() => state.count++ }> +1 </button>
   </div>
 }
 ```
@@ -138,6 +156,8 @@ function Counter() {
 
 当任何人对值做出修改时，它会把最新的值立刻更新到所有人的屏幕上。
 
+注意：返回的快照为只读，请勿对其做出操作！快照仅用于在 React 的 XML 中读取数据。其他所有操作（如赋值或订阅等）请操作原 RhineVar 对象。
+
 <br/>
 
 #### [点击查看 完整文档 LEARN_zh.md](assets/documents/LEARN_zh.md)

package/dist/react/hooks/useRhine.js

@@ -8,7 +8,7 @@ function useRhine(proxy) {
     const [state, setState] = (0, react_1.useState)(getState);
     (0, react_1.useEffect)(() => {
         var _a;
-        proxy.subscribe(() => {
+        proxy.subscribeDeep(() => {
             // TODO: 提高性能
             setState(getState);
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rhine-var",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "Variables that support multi-user collaboration and persistence, making collaboration and variable operations as simple as possible, with strict and well-defined type hints.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",