rhine-var 0.4.10 → 0.5.0

package/README.md

@@ -29,7 +29,7 @@ Try: [https://rv.rhineai.com/examples/counter](https://rv.rhineai.com/examples/c
 
 ## Overview
 
-**Document:** [LEARN_zh.md](assets/documents/LEARN_zh.md)
+**Document:** [LEARN.md](assets/documents/LEARN.md)
 
 **Github:** [https://github.com/RhineAI-Lab/rhine-var](https://github.com/RhineAI-Lab/rhine-var)
 

package/README_zh.md

@@ -1,216 +1,216 @@
-<div align="center">
-
-# 最简单且强大的多人协同框架 RHINE-VAR
-
-莱茵变量 —— 会自己与他人协同的变量 &nbsp; 多人协同应用开发从未如此简单
-
-[English](README.md) &nbsp; | &nbsp; [中文](README_zh.md)
-
-<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)
-
-**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)
-
-<br/>
-
-## 为什么选择 RHINE-VAR ?
-
-<div style="height: 6px"></div>
-
-### 简洁高效的语法设计
-
-RHINE-VAR 借鉴了 Valtio 状态管理库的设计理念，极大地降低了学习成本。开发者可以像操作普通变量一样轻松操控协同数据。
-
-### 完备的类型支持
-
-RHINE-VAR 提供全面的类型提示和类型检查，确保在开发过程中能够获得精确的代码补全和静态分析。这不仅改善了开发体验，还有效降低了潜在的错误风险，特别适用于 TypeScript 项目，提升了代码的安全性和可靠性。
-
-### 分布式实时协作算法
-
-RHINE-VAR 的底层协同算法基于强大的 Yjs 库。通过 CRDT (Conflict-free Replicated Data Type，无冲突复制数据类型) 算法，确保多用户同时使用，甚至离线下使用的最终一致性。
-
-### 完全开源
-
-这是个完全开源的项目，本库在 Github 上以 Apache-2.0 许可证发布。您可以自由将其用于商业和非商业项目，并且允许对其进行修改和分发，只需要保留原作者的版权声明。
-
-<br/>
-<details>
-<summary><b>更多 RHINE-VAR 的优势</b></summary>
-
-### 高性能和低带宽需求
-
-数据同步和冲突解决机制非常高效，通过 Yjs 的增量更新机制，仅传输必要的数据更改，而非整个文档。这使得它在网络带宽受限的环境中表现良好，减少了不必要的数据传输。
-
-### 强大的离线支持
-
-即使在离线状态下，用户仍然可以继续使用应用。当重新联机时，所有更改将自动同步，确保数据不会出现丢失或冲突。这对于构建离线优先的应用至关重要。
-
-### 几乎没有体积上限
-
-它几乎没有体积限制，可以是一个极其复杂且庞大的数据结构，以容纳一个大型项目所需的所有数据。但至少是一个 JavaScript 对象。
-
-### 跨平台和框架无关
-
-RHINE-VAR 支持在多种环境中使用，包括浏览器、Node.js 和其它 JavaScript 环境。此外，它可以与多个前端框架和库 (如 NextJs、React、Vue.js、ProseMirror 等) 集成。
-
-### 轻量级且可扩展
-
-RHINE-VAR 是一个非常轻量的库，核心包仅几 KB，适合各种前端应用。其模块化架构也支持扩展特性，开发者可以根据需要引入或开发自定义模块。
-
-### 更友好且完善的事件体系
-
-RHINE-VAR 提供了丰富的事件订阅监听方式，直观的数据变更事件，更好的支持数据变更的监听和处理。以及提供了对内部深层数据变化的监听，以适用更多场景。
-
-### 原生Yjs支持
-
-RHINE-VAR 提供完好的Yjs原生对象操作支持，更底层更丰富的API支持。直接对Yjs的对象进行操作，也将自动触发 RHINE-VAR 的更新。
-
-### 去中心化架构
-
-通过去中心化架构，使得协作编辑更具扩展性、更高效且更具容错能力。可通过 P2P 进行数据传输，无需依赖中央服务器（开发中）。
-
-</details>
-
-<br/>
-
-## Contact Us
-
-欢迎加入我们的微信群一起讨论交流，我们期待更多的社区开发者能加入到 RHINE-VAR 的创造中！
-
-微信: [FNA-04]() (请备注来源)
-
-邮箱: [RhineAILab@gmail.com](rhineailab@gmail.com) & [RhineAI@163.com](RhineAI@163.com)
-
-<br/>
-
-## Install
-```bash
-yarn add rhine-var
-```
-如果你的电脑未安装`yarn`, 也可通过 `npm i rhine-var` 安装。或先用 `npm i -g yarn` 安装`yarn`，然后再用上方命令进行安装。
-
-<br/>
-
-## Usage
-
-```typescript jsx
-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>
-    <span>{snap.count}</span>
-    <button onClick={() => state.count++ }> +1 </button>
-  </div>
-}
-```
-
-### Room ID
-
-一个房间号对应一个状态变量, 加入到一个房间中的用户会参与到多人协同中。支持使用自己的服务端，甚至其他链接协议。
-
-### Default Value
-
-当服务端无信息时，将使用 DefaultValue 作为项目默认内容。
-
-### rhineProxy
-
-用于创建一个 `RhineVar 对象` 它的属性的值会和房间中的其他人共享并同步。
-
-你可以像操作 `JavaScript` 中的普通变量一样直接随意操作它。
-
-他内部数据结构可以很复杂，但至少需要是 `JavaScript` 中的一个 `object`。
-
-### useRhine
-
-一个 `React` 的 `Hook` 函数. 它将为 `RhineVariable` 创建一个快照, 用于自动更新页面。
-
-当任何人对值做出修改时，它会把最新的值立刻更新到所有人的屏幕上。
-
-注意：返回的快照为只读，请勿对其做出操作！快照仅用于在 React 的 XML 中读取数据。其他所有操作（如赋值或订阅等）请操作原 RhineVar 对象。
-
-<br/>
-
-#### [点击查看 完整文档 LEARN_zh.md](assets/documents/LEARN_zh.md)
-
-
-<br/>
-
-## Server
-
-我们提供了一个位于公网的公共服务器，可以用于试用和测试 RHINE-VAR。你可以通过 `wss://rwq.rhineai.com/<room-id>` 连接它。
-
-注意，该服务器无法保证安全和性能，并会对大规模使用的用户做出一定限制。
-
-<br/>
-
-本仓库中提供了一个简单的服务器例子，位于本项目中的 `/test/server` 处。 服务端完全兼容所有的 Yjs 的 Websocket 服务器，将来会支持更多。
-```
-git clone https://github.com/RhineAI-Lab/rhine-var.git
-cd test/server
-yarn install
-yarn start
-```
-默认运行在 `端口 6600`, 你可以通过连接 `ws://localhost:6600/<room-id>` 连接它，`<room-id>` 可以是任意文本，一个房间号对应一个 `RhineVar 对象`。
-
-更多服务端开发信息请参考: [https://docs.yjs.dev/ecosystem/connection-provider/y-websocket](https://docs.yjs.dev/ecosystem/connection-provider/y-websocket)
-
-<br/>
-
-## Develop
-
-欢迎参与 RHINE-VAR 库的共同开发。本库内有基本的服务端，和调试用 NextJS 项目，可以满足大部分开发过程基本需求。
-
-
-### 准备工作 仅初次使用时需执行
-```bash
-# 安装依赖
-yarn install
-# 安装 NextJs 环境调试项目的依赖
-yarn run install-next
-# 链接本库到 NextJs 环境调试项目
-yarn run link-next
-```
-
-### 开始调试
-```bash
-# 启用 typescript 实时编译
-yarn run watch
-# 启用临时本地服务端 默认端口6600 
-yarn run server
-# 启动 NextJs 环境调试项目 默认端口6700
-yarn run next
-# 浏览器将跳转至 http://localhost:6700
-```
-
-<br/>
-
+<div align="center">
+
+# 最简单且强大的多人协同框架 RHINE-VAR
+
+莱茵变量 —— 会自己与他人协同的变量 &nbsp; 多人协同应用开发从未如此简单
+
+[English](README.md) &nbsp; | &nbsp; [中文](README_zh.md)
+
+<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)
+
+**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)
+
+<br/>
+
+## 为什么选择 RHINE-VAR ?
+
+<div style="height: 6px"></div>
+
+### 简洁高效的语法设计
+
+RHINE-VAR 借鉴了 Valtio 状态管理库的设计理念，极大地降低了学习成本。开发者可以像操作普通变量一样轻松操控协同数据。
+
+### 完备的类型支持
+
+RHINE-VAR 提供全面的类型提示和类型检查，确保在开发过程中能够获得精确的代码补全和静态分析。这不仅改善了开发体验，还有效降低了潜在的错误风险，特别适用于 TypeScript 项目，提升了代码的安全性和可靠性。
+
+### 分布式实时协作算法
+
+RHINE-VAR 的底层协同算法基于强大的 Yjs 库。通过 CRDT (Conflict-free Replicated Data Type，无冲突复制数据类型) 算法，确保多用户同时使用，甚至离线下使用的最终一致性。
+
+### 完全开源
+
+这是个完全开源的项目，本库在 Github 上以 Apache-2.0 许可证发布。您可以自由将其用于商业和非商业项目，并且允许对其进行修改和分发，只需要保留原作者的版权声明。
+
+<br/>
+<details>
+<summary><b>更多 RHINE-VAR 的优势</b></summary>
+
+### 高性能和低带宽需求
+
+数据同步和冲突解决机制非常高效，通过 Yjs 的增量更新机制，仅传输必要的数据更改，而非整个文档。这使得它在网络带宽受限的环境中表现良好，减少了不必要的数据传输。
+
+### 强大的离线支持
+
+即使在离线状态下，用户仍然可以继续使用应用。当重新联机时，所有更改将自动同步，确保数据不会出现丢失或冲突。这对于构建离线优先的应用至关重要。
+
+### 几乎没有体积上限
+
+它几乎没有体积限制，可以是一个极其复杂且庞大的数据结构，以容纳一个大型项目所需的所有数据。但至少是一个 JavaScript 对象。
+
+### 跨平台和框架无关
+
+RHINE-VAR 支持在多种环境中使用，包括浏览器、Node.js 和其它 JavaScript 环境。此外，它可以与多个前端框架和库 (如 NextJs、React、Vue.js、ProseMirror 等) 集成。
+
+### 轻量级且可扩展
+
+RHINE-VAR 是一个非常轻量的库，核心包仅几 KB，适合各种前端应用。其模块化架构也支持扩展特性，开发者可以根据需要引入或开发自定义模块。
+
+### 更友好且完善的事件体系
+
+RHINE-VAR 提供了丰富的事件订阅监听方式，直观的数据变更事件，更好的支持数据变更的监听和处理。以及提供了对内部深层数据变化的监听，以适用更多场景。
+
+### 原生Yjs支持
+
+RHINE-VAR 提供完好的Yjs原生对象操作支持，更底层更丰富的API支持。直接对Yjs的对象进行操作，也将自动触发 RHINE-VAR 的更新。
+
+### 去中心化架构
+
+通过去中心化架构，使得协作编辑更具扩展性、更高效且更具容错能力。可通过 P2P 进行数据传输，无需依赖中央服务器（开发中）。
+
+</details>
+
+<br/>
+
+## Contact Us
+
+欢迎加入我们的微信群一起讨论交流，我们期待更多的社区开发者能加入到 RHINE-VAR 的创造中！
+
+微信: [FNA-04]() (请备注来源)
+
+邮箱: [RhineAILab@gmail.com](rhineailab@gmail.com) & [RhineAI@163.com](RhineAI@163.com)
+
+<br/>
+
+## Install
+```bash
+yarn add rhine-var
+```
+如果你的电脑未安装`yarn`, 也可通过 `npm i rhine-var` 安装。或先用 `npm i -g yarn` 安装`yarn`，然后再用上方命令进行安装。
+
+<br/>
+
+## Usage
+
+```typescript jsx
+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>
+    <span>{snap.count}</span>
+    <button onClick={() => state.count++ }> +1 </button>
+  </div>
+}
+```
+
+### Room ID
+
+一个房间号对应一个状态变量, 加入到一个房间中的用户会参与到多人协同中。支持使用自己的服务端，甚至其他链接协议。
+
+### Default Value
+
+当服务端无信息时，将使用 DefaultValue 作为项目默认内容。
+
+### rhineProxy
+
+用于创建一个 `RhineVar 对象` 它的属性的值会和房间中的其他人共享并同步。
+
+你可以像操作 `JavaScript` 中的普通变量一样直接随意操作它。
+
+他内部数据结构可以很复杂，但至少需要是 `JavaScript` 中的一个 `object`。
+
+### useRhine
+
+一个 `React` 的 `Hook` 函数. 它将为 `RhineVariable` 创建一个快照, 用于自动更新页面。
+
+当任何人对值做出修改时，它会把最新的值立刻更新到所有人的屏幕上。
+
+注意：返回的快照为只读，请勿对其做出操作！快照仅用于在 React 的 XML 中读取数据。其他所有操作（如赋值或订阅等）请操作原 RhineVar 对象。
+
+<br/>
+
+#### [点击查看 完整文档 LEARN_zh.md](assets/documents/LEARN_zh.md)
+
+
+<br/>
+
+## Server
+
+我们提供了一个位于公网的公共服务器，可以用于试用和测试 RHINE-VAR。你可以通过 `wss://rwq.rhineai.com/<room-id>` 连接它。
+
+注意，该服务器无法保证安全和性能，并会对大规模使用的用户做出一定限制。
+
+<br/>
+
+本仓库中提供了一个简单的服务器例子，位于本项目中的 `/test/server` 处。 服务端完全兼容所有的 Yjs 的 Websocket 服务器，将来会支持更多。
+```
+git clone https://github.com/RhineAI-Lab/rhine-var.git
+cd test/server
+yarn install
+yarn start
+```
+默认运行在 `端口 6600`, 你可以通过连接 `ws://localhost:6600/<room-id>` 连接它，`<room-id>` 可以是任意文本，一个房间号对应一个 `RhineVar 对象`。
+
+更多服务端开发信息请参考: [https://docs.yjs.dev/ecosystem/connection-provider/y-websocket](https://docs.yjs.dev/ecosystem/connection-provider/y-websocket)
+
+<br/>
+
+## Develop
+
+欢迎参与 RHINE-VAR 库的共同开发。本库内有基本的服务端，和调试用 NextJS 项目，可以满足大部分开发过程基本需求。
+
+
+### 准备工作 仅初次使用时需执行
+```bash
+# 安装依赖
+yarn install
+# 安装 NextJs 环境调试项目的依赖
+yarn run install-next
+# 链接本库到 NextJs 环境调试项目
+yarn run link-next
+```
+
+### 开始调试
+```bash
+# 启用 typescript 实时编译
+yarn run watch
+# 启用临时本地服务端 默认端口6600 
+yarn run server
+# 启动 NextJs 环境调试项目 默认端口6700
+yarn run next
+# 浏览器将跳转至 http://localhost:6700
+```
+
+<br/>
+

package/dist/core/connector/WebsocketConnector.d.ts

@@ -0,0 +1,28 @@
+import { Doc as YDoc, Map as YMap } from "yjs";
+import { WebsocketProvider } from "y-websocket";
+import { ConnectorStatus } from "./ConnectorStatus";
+import { Native } from "../native/Native";
+import { SyncedCallback } from "../event/Callback";
+export default class WebsocketConnector {
+    static STATE_KEY: string;
+    yDoc: YDoc;
+    yBaseMap: YMap<any>;
+    url: string;
+    clientId: number;
+    synced: boolean;
+    provider: WebsocketProvider | null;
+    websocketStatus: ConnectorStatus;
+    private syncedSubscribers;
+    subscribeSynced(callback: SyncedCallback): () => void;
+    unsubscribeSynced(callback: SyncedCallback): void;
+    unsubscribeAllSynced(): void;
+    emitSynced(synced: boolean): void;
+    afterSynced(callback: () => void): void;
+    waitSynced(): Promise<void>;
+    constructor(url?: string);
+    bind(defaultValue: Native, overwrite?: boolean): any;
+    connect(url: string): Promise<void>;
+    disconnect(): Promise<void>;
+}
+export declare function websocketRhineConnect(url: string): WebsocketConnector;
+//# sourceMappingURL=WebsocketConnector.d.ts.map

package/dist/core/connector/WebsocketConnector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebsocketConnector.d.ts","sourceRoot":"","sources":["../../../src/core/connector/WebsocketConnector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,EAAC,MAAM,KAAK,CAAC;AAC7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAC,0BAAyC;AAEjE,OAAO,EAAC,MAAM,EAAC,yBAA6B;AAC5C,OAAO,EAAC,cAAc,EAAC,0BAA8B;AAErD,MAAM,CAAC,OAAO,OAAO,kBAAkB;IAErC,MAAM,CAAC,SAAS,SAAU;IAE1B,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAA;IACnB,GAAG,EAAE,MAAM,CAAK;IAEhB,QAAQ,SAAK;IACb,MAAM,UAAQ;IAEd,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAO;IACzC,eAAe,EAAE,eAAe,CAA+B;IAG/D,OAAO,CAAC,iBAAiB,CAAuB;IAChD,eAAe,CAAC,QAAQ,EAAE,cAAc;IAIxC,iBAAiB,CAAC,QAAQ,EAAE,cAAc;IAG1C,oBAAoB;IAGpB,UAAU,CAAC,MAAM,EAAE,OAAO;IAI1B,WAAW,CAAC,QAAQ,EAAE,MAAM,IAAI;IAahC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;gBAOf,GAAG,SAAK;IAMpB,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,SAAS,GAAE,OAAe;IAc/C,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IA4CnC,UAAU;CAYjB;AAGD,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,sBAMhD"}

package/dist/core/connector/WebsocketConnector.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.websocketRhineConnect = websocketRhineConnect;
+const yjs_1 = require("yjs");
+const y_websocket_1 = require("y-websocket");
+const ConnectorStatus_1 = require("./ConnectorStatus");
+const Logger_1 = require("../utils/Logger");
+class WebsocketConnector {
+    subscribeSynced(callback) {
+        this.syncedSubscribers.push(callback);
+        return () => this.unsubscribeSynced(callback);
+    }
+    unsubscribeSynced(callback) {
+        this.syncedSubscribers = this.syncedSubscribers.filter(subscriber => subscriber !== callback);
+    }
+    unsubscribeAllSynced() {
+        this.syncedSubscribers = [];
+    }
+    emitSynced(synced) {
+        this.syncedSubscribers.forEach(subscriber => subscriber(synced));
+    }
+    afterSynced(callback) {
+        if (this.synced) {
+            callback();
+        }
+        else {
+            const subscriber = (synced) => {
+                if (synced) {
+                    this.unsubscribeSynced(subscriber);
+                    callback();
+                }
+            };
+            this.subscribeSynced(subscriber);
+        }
+    }
+    waitSynced() {
+        return new Promise((resolve) => {
+            this.afterSynced(resolve);
+        });
+    }
+    constructor(url = '') {
+        this.url = '';
+        this.clientId = -1;
+        this.synced = false;
+        this.provider = null;
+        this.websocketStatus = ConnectorStatus_1.ConnectorStatus.DISCONNECTED;
+        this.syncedSubscribers = [];
+        this.yDoc = new yjs_1.Doc();
+        this.yBaseMap = this.yDoc.getMap();
+        url && this.connect(url);
+    }
+    bind(defaultValue, overwrite = false) {
+        if (this.synced) {
+            if (!overwrite && this.yBaseMap.has(WebsocketConnector.STATE_KEY)) {
+                return this.yBaseMap.get(WebsocketConnector.STATE_KEY);
+            }
+            this.yBaseMap.set(WebsocketConnector.STATE_KEY, defaultValue);
+            return defaultValue;
+        }
+        else {
+            const tempMap = new yjs_1.Doc().getMap();
+            tempMap.set(WebsocketConnector.STATE_KEY, defaultValue);
+            return defaultValue;
+        }
+    }
+    async connect(url) {
+        this.url = url;
+        let li = this.url.lastIndexOf('/');
+        if (li == -1 || li == this.url.length - 1 || !this.url.startsWith('ws')) {
+            console.error('UnSupport URL for Connect Room');
+            return;
+        }
+        return new Promise((resolve, reject) => {
+            this.provider = new y_websocket_1.WebsocketProvider(this.url.slice(0, li), this.url.slice(li + 1), this.yDoc);
+            this.provider.shouldConnect = true;
+            this.provider.on('status', (event) => {
+                this.websocketStatus = event.status;
+                (0, Logger_1.log)('WebsocketRhineConnector.event status:', event.status);
+            });
+            this.provider.on('sync', (synced) => {
+                (0, Logger_1.log)('WebsocketRhineConnector.event sync:', synced);
+                if (synced) {
+                    this.synced = true;
+                    this.clientId = this.yDoc.clientID;
+                    this.emitSynced(synced);
+                    resolve();
+                }
+            });
+            this.provider.on('connection-close', (e) => {
+                this.websocketStatus = ConnectorStatus_1.ConnectorStatus.DISCONNECTED;
+                (0, Logger_1.log)('WebsocketRhineConnector.event connection-close:', e);
+            });
+            this.provider.on('connection-error', (error) => {
+                this.websocketStatus = ConnectorStatus_1.ConnectorStatus.DISCONNECTED;
+                (0, Logger_1.log)('WebsocketRhineConnector.event connection-error:', error);
+            });
+        });
+    }
+    async disconnect() {
+        throw new Error('Disconnecting and switching connections are not supported at the moment.');
+        /*
+        if (this.provider) {
+          this.provider.disconnect()
+        }
+        this.provider = null
+        this.synced = false
+        this.websocketStatus = ConnectorStatus.DISCONNECTED
+        */
+    }
+}
+WebsocketConnector.STATE_KEY = 'state';
+exports.default = WebsocketConnector;
+function websocketRhineConnect(url) {
+    const connector = new WebsocketConnector();
+    if (typeof window !== 'undefined') {
+        connector.connect(url);
+    }
+    return connector;
+}

package/dist/core/connector/WebsocketRhineConnector.d.ts

@@ -2,7 +2,7 @@ import { Doc as YDoc, Map as YMap } from "yjs";
 import { WebsocketProvider } from "y-websocket";
 import { ConnectorStatus } from "./ConnectorStatus";
 import { Native } from "../native/Native";
-export type SyncedListener = (synced: boolean) => void;
+import { SyncedCallback } from "../event/Callback";
 export default class WebsocketRhineConnector {
     static STATE_KEY: string;
     yDoc: YDoc;
@@ -12,9 +12,10 @@ export default class WebsocketRhineConnector {
     synced: boolean;
     provider: WebsocketProvider | null;
     websocketStatus: ConnectorStatus;
-    syncedListeners: SyncedListener[];
-    addSyncedListener(listener: SyncedListener): void;
-    removeSyncedListener(listener: SyncedListener): void;
+    private syncedSubscribers;
+    subscribeSynced(callback: SyncedCallback): () => void;
+    unsubscribeSynced(callback: SyncedCallback): void;
+    unsubscribeAllSynced(): void;
     emitSynced(synced: boolean): void;
     afterSynced(callback: () => void): void;
     waitSynced(): Promise<void>;

package/dist/core/connector/WebsocketRhineConnector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WebsocketRhineConnector.d.ts","sourceRoot":"","sources":["../../../src/core/connector/WebsocketRhineConnector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,EAAC,MAAM,KAAK,CAAC;AAC7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAC,0BAAyC;AAEjE,OAAO,EAAC,MAAM,EAAC,yBAA6B;AAE5C,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;AAEtD,MAAM,CAAC,OAAO,OAAO,uBAAuB;IAE1C,MAAM,CAAC,SAAS,SAAU;IAE1B,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAA;IACnB,GAAG,EAAE,MAAM,CAAK;IAEhB,QAAQ,SAAK;IACb,MAAM,UAAQ;IAEd,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAO;IACzC,eAAe,EAAE,eAAe,CAA+B;IAG/D,eAAe,EAAE,cAAc,EAAE,CAAK;IACtC,iBAAiB,CAAC,QAAQ,EAAE,cAAc;IAG1C,oBAAoB,CAAC,QAAQ,EAAE,cAAc;IAG7C,UAAU,CAAC,MAAM,EAAE,OAAO;IAI1B,WAAW,CAAC,QAAQ,EAAE,MAAM,IAAI;IAahC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;gBAOf,GAAG,SAAK;IAMpB,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,SAAS,GAAE,OAAe;IAc/C,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IA4CnC,UAAU;CAYjB;AAGD,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,2BAMhD"}
+{"version":3,"file":"WebsocketRhineConnector.d.ts","sourceRoot":"","sources":["../../../src/core/connector/WebsocketRhineConnector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,IAAI,IAAI,EAAE,GAAG,IAAI,IAAI,EAAC,MAAM,KAAK,CAAC;AAC7C,OAAO,EAAC,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAC,eAAe,EAAC,0BAAyC;AAEjE,OAAO,EAAC,MAAM,EAAC,yBAA6B;AAC5C,OAAO,EAAC,cAAc,EAAC,0BAA8B;AAErD,MAAM,CAAC,OAAO,OAAO,uBAAuB;IAE1C,MAAM,CAAC,SAAS,SAAU;IAE1B,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAA;IACnB,GAAG,EAAE,MAAM,CAAK;IAEhB,QAAQ,SAAK;IACb,MAAM,UAAQ;IAEd,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAO;IACzC,eAAe,EAAE,eAAe,CAA+B;IAG/D,OAAO,CAAC,iBAAiB,CAAuB;IAChD,eAAe,CAAC,QAAQ,EAAE,cAAc;IAIxC,iBAAiB,CAAC,QAAQ,EAAE,cAAc;IAG1C,oBAAoB;IAGpB,UAAU,CAAC,MAAM,EAAE,OAAO;IAI1B,WAAW,CAAC,QAAQ,EAAE,MAAM,IAAI;IAahC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;gBAOf,GAAG,SAAK;IAMpB,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,SAAS,GAAE,OAAe;IAc/C,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IA4CnC,UAAU;CAYjB;AAGD,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,2BAMhD"}

package/dist/core/connector/WebsocketRhineConnector.js

@@ -6,27 +6,31 @@ const y_websocket_1 = require("y-websocket");
 const ConnectorStatus_1 = require("./ConnectorStatus");
 const Logger_1 = require("../utils/Logger");
 class WebsocketRhineConnector {
-    addSyncedListener(listener) {
-        this.syncedListeners.push(listener);
+    subscribeSynced(callback) {
+        this.syncedSubscribers.push(callback);
+        return () => this.unsubscribeSynced(callback);
     }
-    removeSyncedListener(listener) {
-        this.syncedListeners = this.syncedListeners.filter(l => l !== listener);
+    unsubscribeSynced(callback) {
+        this.syncedSubscribers = this.syncedSubscribers.filter(subscriber => subscriber !== callback);
+    }
+    unsubscribeAllSynced() {
+        this.syncedSubscribers = [];
     }
     emitSynced(synced) {
-        this.syncedListeners.forEach(listener => listener(synced));
+        this.syncedSubscribers.forEach(subscriber => subscriber(synced));
     }
     afterSynced(callback) {
         if (this.synced) {
             callback();
         }
         else {
-            const listener = (synced) => {
+            const subscriber = (synced) => {
                 if (synced) {
-                    this.removeSyncedListener(listener);
+                    this.unsubscribeSynced(subscriber);
                     callback();
                 }
             };
-            this.addSyncedListener(listener);
+            this.subscribeSynced(subscriber);
         }
     }
     waitSynced() {
@@ -40,7 +44,7 @@ class WebsocketRhineConnector {
         this.synced = false;
         this.provider = null;
         this.websocketStatus = ConnectorStatus_1.ConnectorStatus.DISCONNECTED;
-        this.syncedListeners = [];
+        this.syncedSubscribers = [];
         this.yDoc = new yjs_1.Doc();
         this.yBaseMap = this.yDoc.getMap();
         url && this.connect(url);

package/dist/core/event/Callback.d.ts

@@ -4,4 +4,5 @@ import { YPath } from "../native/Native";
 import { ProxiedRhineVarItem } from "../proxy/ProxiedRhineVar";
 export type Callback<T> = (key: keyof T, value: T[keyof T] | ProxiedRhineVarItem<T[keyof T]>, oldValue: T[keyof T], type: ChangeType, nativeEvent: YMapEvent<any> | YArrayEvent<any>, nativeTransaction: Transaction) => void;
 export type DeepCallback<T> = (path: YPath, value: any | ProxiedRhineVarItem<any>, oldValue: any, type: ChangeType, nativeEvent: YMapEvent<any> | YArrayEvent<any>, nativeTransaction: Transaction) => void;
+export type SyncedCallback = (synced: boolean) => void;
 //# sourceMappingURL=Callback.d.ts.map

package/dist/core/event/Callback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callback.d.ts","sourceRoot":"","sources":["../../../src/core/event/Callback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,qBAAgC;AACnD,OAAO,EAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,KAAK,CAAC;AACxD,OAAO,EAAS,KAAK,EAAC,yBAA6B;AACnD,OAAO,EAAC,mBAAmB,EAAC,iCAAqC;AAGjE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CACxB,GAAG,EAAE,MAAM,CAAC,EACZ,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EACnD,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EACpB,IAAI,EAAE,UAAU,EAChB,WAAW,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,EAC9C,iBAAiB,EAAE,WAAW,KAC3B,IAAI,CAAA;AAET,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAC5B,IAAI,EAAE,KAAK,EACX,KAAK,EAAE,GAAG,GAAG,mBAAmB,CAAC,GAAG,CAAC,EACrC,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,UAAU,EAChB,WAAW,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,EAC9C,iBAAiB,EAAE,WAAW,KAC3B,IAAI,CAAA"}
+{"version":3,"file":"Callback.d.ts","sourceRoot":"","sources":["../../../src/core/event/Callback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,qBAAgC;AACnD,OAAO,EAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,KAAK,CAAC;AACxD,OAAO,EAAS,KAAK,EAAC,yBAA6B;AACnD,OAAO,EAAC,mBAAmB,EAAC,iCAAqC;AAGjE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CACxB,GAAG,EAAE,MAAM,CAAC,EACZ,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EACnD,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EACpB,IAAI,EAAE,UAAU,EAChB,WAAW,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,EAC9C,iBAAiB,EAAE,WAAW,KAC3B,IAAI,CAAA;AAET,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAC5B,IAAI,EAAE,KAAK,EACX,KAAK,EAAE,GAAG,GAAG,mBAAmB,CAAC,GAAG,CAAC,EACrC,QAAQ,EAAE,GAAG,EACb,IAAI,EAAE,UAAU,EAChB,WAAW,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,EAC9C,iBAAiB,EAAE,WAAW,KAC3B,IAAI,CAAA;AAET,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA"}

package/dist/core/proxy/Proxy.d.ts

@@ -1,10 +1,10 @@
-import WebsocketRhineConnector from "../connector/WebsocketRhineConnector";
+import WebsocketConnector from "../connector/WebsocketConnector";
 import RhineVarItem from "./RhineVarItem";
 import { ProxiedRhineVar, ProxiedRhineVarItem } from "./ProxiedRhineVar";
 import { Native } from "../native/Native";
 import RhineVar from "./RhineVar";
 export declare const PROTOCOL_LIST: string[];
 export declare const DEFAULT_PUBLIC_URL = "wss://rpw.rhineai.com/";
-export declare function rhineProxy<T extends object>(defaultValue: T | Native, connector: WebsocketRhineConnector | string | number, overwrite?: boolean | number): ProxiedRhineVar<T>;
+export declare function rhineProxy<T extends object>(defaultValue: T | Native, connector: WebsocketConnector | string | number, overwrite?: boolean | number): ProxiedRhineVar<T>;
 export declare function rhineProxyItem<T extends object>(data: T | Native, parent?: RhineVar<any> | RhineVarItem<any> | null): ProxiedRhineVarItem<T> | ProxiedRhineVar<T>;
 //# sourceMappingURL=Proxy.d.ts.map

package/dist/core/proxy/Proxy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Proxy.d.ts","sourceRoot":"","sources":["../../../src/core/proxy/Proxy.ts"],"names":[],"mappings":"AACA,OAAO,uBAAgD,6CAAiD;AACxG,OAAO,YAA+C,uBAAkC;AAIxF,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,0BAAqC;AAClF,OAAO,EAAC,MAAM,EAAC,yBAA6B;AAS5C,OAAO,QAAQ,mBAA8B;AAG7C,eAAO,MAAM,aAAa,UAAsB,CAAA;AAChD,eAAO,MAAM,kBAAkB,2BAA2B,CAAA;AAG1D,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EACzC,YAAY,EAAE,CAAC,GAAG,MAAM,EACxB,SAAS,EAAE,uBAAuB,GAAG,MAAM,GAAG,MAAM,EACpD,SAAS,GAAE,OAAO,GAAG,MAAc,GAClC,eAAe,CAAC,CAAC,CAAC,CA+CpB;AAGD,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAC7C,IAAI,EAAE,CAAC,GAAG,MAAM,EAChB,MAAM,GAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,IAAW,GACtD,mBAAmB,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CA2F7C"}
+{"version":3,"file":"Proxy.d.ts","sourceRoot":"","sources":["../../../src/core/proxy/Proxy.ts"],"names":[],"mappings":"AACA,OAAO,kBAA2C,wCAA4C;AAC9F,OAAO,YAA+C,uBAAkC;AAIxF,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAC,0BAAqC;AAClF,OAAO,EAAC,MAAM,EAAC,yBAA6B;AAS5C,OAAO,QAAQ,mBAA8B;AAG7C,eAAO,MAAM,aAAa,UAAsB,CAAA;AAChD,eAAO,MAAM,kBAAkB,2BAA2B,CAAA;AAG1D,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EACzC,YAAY,EAAE,CAAC,GAAG,MAAM,EACxB,SAAS,EAAE,kBAAkB,GAAG,MAAM,GAAG,MAAM,EAC/C,SAAS,GAAE,OAAO,GAAG,MAAc,GAClC,eAAe,CAAC,CAAC,CAAC,CA+CpB;AAGD,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAC7C,IAAI,EAAE,CAAC,GAAG,MAAM,EAChB,MAAM,GAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,IAAW,GACtD,mBAAmB,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CA2F7C"}

package/dist/core/proxy/Proxy.js

@@ -30,7 +30,7 @@ exports.DEFAULT_PUBLIC_URL = exports.PROTOCOL_LIST = void 0;
 exports.rhineProxy = rhineProxy;
 exports.rhineProxyItem = rhineProxyItem;
 const yjs_1 = require("yjs");
-const WebsocketRhineConnector_1 = __importStar(require("../connector/WebsocketRhineConnector"));
+const WebsocketConnector_1 = __importStar(require("../connector/WebsocketConnector"));
 const RhineVarItem_1 = __importStar(require("./RhineVarItem"));
 const DataUtils_1 = require("../utils/DataUtils");
 const Logger_1 = require("../utils/Logger");
@@ -42,11 +42,11 @@ exports.DEFAULT_PUBLIC_URL = 'wss://rpw.rhineai.com/';
 function rhineProxy(defaultValue, connector, overwrite = false) {
     let target = (0, DataUtils_1.ensureNative)(defaultValue);
     if (connector) {
-        if (!(connector instanceof WebsocketRhineConnector_1.default)) {
+        if (!(connector instanceof WebsocketConnector_1.default)) {
             if (exports.PROTOCOL_LIST.every(protocol => !(String(connector)).startsWith(protocol))) {
                 connector = exports.DEFAULT_PUBLIC_URL + connector;
             }
-            connector = (0, WebsocketRhineConnector_1.websocketRhineConnect)(String(connector));
+            connector = (0, WebsocketConnector_1.websocketRhineConnect)(String(connector));
         }
         target = connector.bind(target, Boolean(overwrite));
     }
@@ -54,17 +54,17 @@ function rhineProxy(defaultValue, connector, overwrite = false) {
     const object = rhineProxyItem(target);
     object.connector = connector;
     if (connector && !connector.synced) {
-        connector.addSyncedListener((synced) => {
+        connector.subscribeSynced((synced) => {
             if (synced) {
                 let syncedValue = target.clone();
-                if (!overwrite && connector.yBaseMap.has(WebsocketRhineConnector_1.default.STATE_KEY)) {
-                    syncedValue = connector.yBaseMap.get(WebsocketRhineConnector_1.default.STATE_KEY);
+                if (!overwrite && connector.yBaseMap.has(WebsocketConnector_1.default.STATE_KEY)) {
+                    syncedValue = connector.yBaseMap.get(WebsocketConnector_1.default.STATE_KEY);
                     object.native.forEach((value, key) => {
                         Reflect.deleteProperty(object.origin, key);
                     });
-                    object.unobserve();
+                    Reflect.get(object, 'unobserve').call(object);
                     object.native = syncedValue;
-                    object.observe();
+                    Reflect.get(object, 'observe').call(object);
                     (0, Logger_1.log)('Proxy.synced: Update synced native');
                     syncedValue.forEach((value, key) => {
                         if ((0, NativeUtils_1.isNative)(value)) {
@@ -76,7 +76,7 @@ function rhineProxy(defaultValue, connector, overwrite = false) {
                     });
                 }
                 else {
-                    connector.yBaseMap.set(WebsocketRhineConnector_1.default.STATE_KEY, syncedValue);
+                    connector.yBaseMap.set(WebsocketConnector_1.default.STATE_KEY, syncedValue);
                 }
             }
         });
@@ -166,6 +166,6 @@ function rhineProxyItem(data, parent = null) {
         },
         getOwnPropertyDescriptor: proxyGetOwnPropertyDescriptor,
     };
-    object.observe();
+    Reflect.get(object, 'observe').call(object);
     return new Proxy(object, handler);
 }

package/dist/core/proxy/RhineVar.d.ts

@@ -1,7 +1,7 @@
 import RhineVarItem from "./RhineVarItem";
-import WebsocketRhineConnector from "../connector/WebsocketRhineConnector";
+import WebsocketConnector from "../connector/WebsocketConnector";
 export default class RhineVar<T> extends RhineVarItem<T> {
-    connector: WebsocketRhineConnector | null;
+    connector: WebsocketConnector | null;
     isRoot(): boolean;
     root(): RhineVar<any>;
 }

package/dist/core/proxy/RhineVar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RhineVar.d.ts","sourceRoot":"","sources":["../../../src/core/proxy/RhineVar.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,uBAAkC;AACrD,OAAO,uBAAuB,6CAAiD;AAE/E,MAAM,CAAC,OAAO,OAAO,QAAQ,CAAC,CAAC,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC;IAEtD,SAAS,EAAE,uBAAuB,GAAG,IAAI,CAAO;IAEhD,MAAM,IAAI,OAAO;IAIjB,IAAI,IAAI,QAAQ,CAAC,GAAG,CAAC;CAItB"}
+{"version":3,"file":"RhineVar.d.ts","sourceRoot":"","sources":["../../../src/core/proxy/RhineVar.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,uBAAkC;AACrD,OAAO,kBAAkB,wCAA4C;AAErE,MAAM,CAAC,OAAO,OAAO,QAAQ,CAAC,CAAC,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC;IAEtD,SAAS,EAAE,kBAAkB,GAAG,IAAI,CAAO;IAE3C,MAAM,IAAI,OAAO;IAIjB,IAAI,IAAI,QAAQ,CAAC,GAAG,CAAC;CAItB"}

package/dist/core/proxy/RhineVarItem.d.ts

@@ -1,9 +1,10 @@
 import { Transaction, YArrayEvent, YMapEvent } from "yjs";
 import { Native, YPath } from "../native/Native";
 import { ChangeType } from "../event/ChangeType";
-import { Callback, DeepCallback } from "../event/Callback";
+import { Callback, DeepCallback, SyncedCallback } from "../event/Callback";
 import { StoredRhineVarItem } from "./ProxiedRhineVar";
 import RhineVar from "./RhineVar";
+import WebsocketConnector from "../connector/WebsocketConnector";
 export default class RhineVarItem<T> {
     native: Native;
     parent: RhineVar<any> | RhineVarItem<any> | null;
@@ -11,11 +12,17 @@ export default class RhineVarItem<T> {
     constructor(native: Native, parent?: RhineVar<any> | RhineVarItem<any> | null, origin?: StoredRhineVarItem<T>);
     isRoot(): boolean;
     root(): RhineVar<any>;
+    getConnector(): WebsocketConnector | null;
     afterSynced(callback: () => void): void;
     waitSynced(): Promise<unknown>;
     json(): T;
     frozenJson(): T;
-    toString(): string;
+    string(indent?: number): string;
+    private syncedSubscribers;
+    subscribeSynced(callback: SyncedCallback): () => void;
+    unsubscribeSynced(callback: SyncedCallback): void;
+    unsubscribeAllSynced(): void;
+    private emitSynced;
     private subscribers;
     subscribe(callback: Callback<T>): () => void;
     unsubscribe(callback: Callback<T>): void;
@@ -30,9 +37,10 @@ export default class RhineVarItem<T> {
     unsubscribeDeep(callback: DeepCallback<T>): void;
     unsubscribeAllDeep(): void;
     emitDeep(path: YPath, value: any, oldValue: any, type: ChangeType, nativeEvent: YMapEvent<any> | YArrayEvent<any>, nativeTransaction: Transaction): undefined;
-    observer: (event: YMapEvent<any> | YArrayEvent<any>, transaction: Transaction) => void;
-    observe(): void;
-    unobserve(): void;
+    private observer;
+    private syncedObserver;
+    private observe;
+    private unobserve;
 }
 export declare const RHINE_VAR_PREDEFINED_PROPERTIES: Set<string | symbol>;
 //# sourceMappingURL=RhineVarItem.d.ts.map

package/dist/core/proxy/RhineVarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RhineVarItem.d.ts","sourceRoot":"","sources":["../../../src/core/proxy/RhineVarItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,WAAW,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,KAAK,CAAC;AAItF,OAAO,EAAC,MAAM,EAAE,KAAK,EAAC,yBAA6B;AACnD,OAAO,EAAC,UAAU,EAAC,4BAAgC;AACnD,OAAO,EAAC,QAAQ,EAAE,YAAY,EAAC,0BAA8B;AAC7D,OAAO,EAAC,kBAAkB,EAAC,0BAAqC;AAChE,OAAO,QAAQ,mBAA8B;AAG7C,MAAM,CAAC,OAAO,OAAO,YAAY,CAAC,CAAC;IAGxB,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI;IAChD,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC;gBAF7B,MAAM,EAAE,MAAM,EACd,MAAM,GAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,IAAW,EACvD,MAAM,GAAE,kBAAkB,CAAC,CAAC,CAAe;IAGpD,MAAM,IAAI,OAAO;IAIjB,IAAI,IAAI,QAAQ,CAAC,GAAG,CAAC;IAKrB,WAAW,CAAC,QAAQ,EAAE,MAAM,IAAI;IAO1B,UAAU;IAOhB,IAAI,IAAI,CAAC;IAIT,UAAU,IAAI,CAAC;IAwCf,QAAQ;IAKR,OAAO,CAAC,WAAW,CAAoB;IACvC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAI5C,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAGjC,cAAc;IAId,OAAO,CAAC,cAAc,CAAyC;IAC/D,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAO7D,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAKpC,iBAAiB;IAIjB,OAAO,CAAC,IAAI;IAQZ,OAAO,CAAC,eAAe,CAAwB;IAC/C,aAAa,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAIpD,eAAe,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAGzC,kBAAkB;IAIlB,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,EAAE,iBAAiB,EAAE,WAAW;IAgBjJ,QAAQ,UAAW,SAAS,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,eAAe,WAAW,UAAO;IAGrF,OAAO;IAsFP,SAAS;CAKV;AAGD,eAAO,MAAM,+BAA+B,sBAkC1C,CAAA"}
+{"version":3,"file":"RhineVarItem.d.ts","sourceRoot":"","sources":["../../../src/core/proxy/RhineVarItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,WAAW,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,KAAK,CAAC;AAItF,OAAO,EAAC,MAAM,EAAE,KAAK,EAAC,yBAA6B;AACnD,OAAO,EAAC,UAAU,EAAC,4BAAgC;AACnD,OAAO,EAAC,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAC,0BAA8B;AAC7E,OAAO,EAAC,kBAAkB,EAAC,0BAAqC;AAChE,OAAO,QAAQ,mBAA8B;AAC7C,OAAO,kBAAkB,wCAA4C;AAGrE,MAAM,CAAC,OAAO,OAAO,YAAY,CAAC,CAAC;IAGxB,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI;IAChD,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC;gBAF7B,MAAM,EAAE,MAAM,EACd,MAAM,GAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,IAAW,EACvD,MAAM,GAAE,kBAAkB,CAAC,CAAC,CAAe;IAGpD,MAAM,IAAI,OAAO;IAIjB,IAAI,IAAI,QAAQ,CAAC,GAAG,CAAC;IAIrB,YAAY,IAAI,kBAAkB,GAAG,IAAI;IAKzC,WAAW,CAAC,QAAQ,EAAE,MAAM,IAAI;IAO1B,UAAU;IAOhB,IAAI,IAAI,CAAC;IAIT,UAAU,IAAI,CAAC;IAwCf,MAAM,CAAC,MAAM,SAAI;IAIjB,OAAO,CAAC,iBAAiB,CAAuB;IAChD,eAAe,CAAC,QAAQ,EAAE,cAAc;IAIxC,iBAAiB,CAAC,QAAQ,EAAE,cAAc;IAG1C,oBAAoB;IAIpB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW,CAAoB;IACvC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAI5C,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAGjC,cAAc;IAId,OAAO,CAAC,cAAc,CAAyC;IAC/D,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAO7D,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAKpC,iBAAiB;IAIjB,OAAO,CAAC,IAAI;IAQZ,OAAO,CAAC,eAAe,CAAwB;IAC/C,aAAa,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAIpD,eAAe,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAGzC,kBAAkB;IAIlB,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,EAAE,iBAAiB,EAAE,WAAW;IAgBjJ,OAAO,CAAC,QAAQ,CAA6E;IAC7F,OAAO,CAAC,cAAc,CAA0C;IAGhE,OAAO,CAAC,OAAO;IA2Ff,OAAO,CAAC,SAAS;CAQlB;AAGD,eAAO,MAAM,+BAA+B,sBAyC1C,CAAA"}

package/dist/core/proxy/RhineVarItem.js

@@ -11,10 +11,12 @@ class RhineVarItem {
         this.native = native;
         this.parent = parent;
         this.origin = origin;
+        this.syncedSubscribers = [];
         this.subscribers = [];
         this.keySubscribers = new Map();
         this.deepSubscribers = [];
         this.observer = (event, transaction) => { };
+        this.syncedObserver = (synced) => { };
     }
     isRoot() {
         return false;
@@ -22,6 +24,9 @@ class RhineVarItem {
     root() {
         return this.parent.root();
     }
+    getConnector() {
+        return this.root().connector;
+    }
     afterSynced(callback) {
         var _a;
         const connector = (_a = this.root()) === null || _a === void 0 ? void 0 : _a.connector;
@@ -77,15 +82,28 @@ class RhineVarItem {
         }
         return {};
     }
-    toString() {
-        return String(this.json());
+    string(indent = 2) {
+        return JSON.stringify(this.json(), null, indent);
+    }
+    subscribeSynced(callback) {
+        this.syncedSubscribers.push(callback);
+        return () => this.unsubscribeSynced(callback);
+    }
+    unsubscribeSynced(callback) {
+        this.syncedSubscribers = this.syncedSubscribers.filter(subscriber => subscriber !== callback);
+    }
+    unsubscribeAllSynced() {
+        this.syncedSubscribers = [];
+    }
+    emitSynced(synced) {
+        this.syncedSubscribers.forEach(subscriber => subscriber(synced));
     }
     subscribe(callback) {
         this.subscribers.push(callback);
         return () => this.unsubscribe(callback);
     }
     unsubscribe(callback) {
-        this.subscribers = this.subscribers.filter(listener => listener !== callback);
+        this.subscribers = this.subscribers.filter(subscriber => subscriber !== callback);
     }
     unsubscribeAll() {
         this.subscribers = [];
@@ -98,8 +116,8 @@ class RhineVarItem {
         return () => this.unsubscribeKey(callback);
     }
     unsubscribeKey(callback) {
-        this.keySubscribers.forEach((listeners, key) => {
-            this.keySubscribers.set(key, listeners.filter(listener => listener !== callback));
+        this.keySubscribers.forEach((subscribers, key) => {
+            this.keySubscribers.set(key, subscribers.filter(subscriber => subscriber !== callback));
         });
     }
     unsubscribeAllKey() {
@@ -108,7 +126,7 @@ class RhineVarItem {
     emit(key, value, oldValue, type, nativeEvent, nativeTransaction) {
         this.subscribers.forEach(subscriber => subscriber(key, value, oldValue, type, nativeEvent, nativeTransaction));
         if (this.keySubscribers.has(key)) {
-            this.keySubscribers.get(key).forEach(listener => listener(key, value, oldValue, type, nativeEvent, nativeTransaction));
+            this.keySubscribers.get(key).forEach(subscriber => subscriber(key, value, oldValue, type, nativeEvent, nativeTransaction));
         }
     }
     subscribeDeep(callback) {
@@ -116,7 +134,7 @@ class RhineVarItem {
         return () => this.unsubscribeDeep(callback);
     }
     unsubscribeDeep(callback) {
-        this.deepSubscribers = this.deepSubscribers.filter(listener => listener !== callback);
+        this.deepSubscribers = this.deepSubscribers.filter(subscriber => subscriber !== callback);
     }
     unsubscribeAllDeep() {
         this.deepSubscribers = [];
@@ -140,6 +158,11 @@ class RhineVarItem {
     }
     // 开始观察当前Native的内容变化
     observe() {
+        var _a;
+        this.syncedObserver = (synced) => {
+            this.emitSynced(synced);
+        };
+        (_a = this.getConnector()) === null || _a === void 0 ? void 0 : _a.subscribeSynced(this.syncedObserver);
         const target = this.native;
         if (target instanceof yjs_1.Map) {
             this.observer = (event, transaction) => {
@@ -222,9 +245,13 @@ class RhineVarItem {
         }
     }
     unobserve() {
+        var _a;
         if (this.observer) {
             this.native.unobserve(this.observer);
         }
+        if (this.syncedObserver) {
+            (_a = this.getConnector()) === null || _a === void 0 ? void 0 : _a.unsubscribeSynced(this.syncedObserver);
+        }
     }
 }
 exports.default = RhineVarItem;
@@ -233,12 +260,17 @@ exports.RHINE_VAR_PREDEFINED_PROPERTIES = new Set([
     'native',
     'connector',
     'json',
-    'toString',
+    'string',
     'parent',
     'isRoot',
     'root',
+    'getConnector',
     'afterSynced',
     'waitSynced',
+    'syncedSubscribers',
+    'subscribeSynced',
+    'unsubscribeSynced',
+    'unsubscribeAllSynced',
     'subscribers',
     'subscribe',
     'unsubscribe',
@@ -251,6 +283,7 @@ exports.RHINE_VAR_PREDEFINED_PROPERTIES = new Set([
     'subscribeDeep',
     'unsubscribeDeep',
     'unsubscribeAllDeep',
+    'emitSynced',
     'emit',
     'emitDeep',
     'observer',

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { rhineProxy, rhineProxyItem } from "./core/proxy/Proxy";
 import RhineVarItem from "./core/proxy/RhineVarItem";
 import { StoredRhineVarItem, ProxiedRhineVarItem, RecursiveCrossRhineVarItem, StoredRhineVar, ProxiedRhineVar, RecursiveCrossRhineVar } from "./core/proxy/ProxiedRhineVar";
-import WebsocketRhineConnector from "./core/connector/WebsocketRhineConnector";
+import WebsocketConnector from "./core/connector/WebsocketConnector";
 import useRhine from "./react/hooks/useRhine";
 import useSynced from "./react/hooks/useSynced";
 import { Native, YPath } from "./core/native/Native";
-export { WebsocketRhineConnector, rhineProxy, rhineProxyItem, RhineVarItem, StoredRhineVarItem, ProxiedRhineVarItem, RecursiveCrossRhineVarItem, StoredRhineVar, ProxiedRhineVar, RecursiveCrossRhineVar, YPath, Native, useRhine, useSynced, };
+export { WebsocketConnector, rhineProxy, rhineProxyItem, RhineVarItem, StoredRhineVarItem, ProxiedRhineVarItem, RecursiveCrossRhineVarItem, StoredRhineVar, ProxiedRhineVar, RecursiveCrossRhineVar, YPath, Native, useRhine, useSynced, };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAC,2BAA2B;AAC9D,OAAO,YAAY,kCAAkC;AACrD,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,sBAAsB,EACvB,qCAAqC;AACtC,OAAO,uBAAuB,iDAAiD;AAC/E,OAAO,QAAQ,+BAA8B;AAC7C,OAAO,SAAS,gCAA+B;AAC/C,OAAO,EAAC,MAAM,EAAE,KAAK,EAAC,6BAA6B;AAEnD,OAAO,EACL,uBAAuB,EACvB,UAAU,EACV,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,sBAAsB,EACtB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACV,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAC,2BAA2B;AAC9D,OAAO,YAAY,kCAAkC;AACrD,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,sBAAsB,EACvB,qCAAqC;AACtC,OAAO,kBAAkB,4CAA4C;AACrE,OAAO,QAAQ,+BAA8B;AAC7C,OAAO,SAAS,gCAA+B;AAC/C,OAAO,EAAC,MAAM,EAAE,KAAK,EAAC,6BAA6B;AAEnD,OAAO,EACL,kBAAkB,EAClB,UAAU,EACV,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,sBAAsB,EACtB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACV,CAAA"}

package/dist/index.js

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSynced = exports.useRhine = exports.RhineVarItem = exports.rhineProxyItem = exports.rhineProxy = exports.WebsocketRhineConnector = void 0;
+exports.useSynced = exports.useRhine = exports.RhineVarItem = exports.rhineProxyItem = exports.rhineProxy = exports.WebsocketConnector = void 0;
 const Proxy_1 = require("./core/proxy/Proxy");
 Object.defineProperty(exports, "rhineProxy", { enumerable: true, get: function () { return Proxy_1.rhineProxy; } });
 Object.defineProperty(exports, "rhineProxyItem", { enumerable: true, get: function () { return Proxy_1.rhineProxyItem; } });
 const RhineVarItem_1 = __importDefault(require("./core/proxy/RhineVarItem"));
 exports.RhineVarItem = RhineVarItem_1.default;
-const WebsocketRhineConnector_1 = __importDefault(require("./core/connector/WebsocketRhineConnector"));
-exports.WebsocketRhineConnector = WebsocketRhineConnector_1.default;
+const WebsocketConnector_1 = __importDefault(require("./core/connector/WebsocketConnector"));
+exports.WebsocketConnector = WebsocketConnector_1.default;
 const useRhine_1 = __importDefault(require("./react/hooks/useRhine"));
 exports.useRhine = useRhine_1.default;
 const useSynced_1 = __importDefault(require("./react/hooks/useSynced"));

package/dist/react/hooks/useRhine.d.ts

@@ -1,3 +1,3 @@
 import { ProxiedRhineVar } from "../../core/proxy/ProxiedRhineVar";
-export default function useRhine<T extends object>(proxy: ProxiedRhineVar<T>): T;
+export default function useRhine<T extends object>(proxy: ProxiedRhineVar<T>): Readonly<T>;
 //# sourceMappingURL=useRhine.d.ts.map

package/dist/react/hooks/useRhine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRhine.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/useRhine.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,eAAe,EAAC,yCAAqC;AAE7D,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAgB3E"}
+{"version":3,"file":"useRhine.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/useRhine.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,eAAe,EAAC,yCAAqC;AAE7D,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAgBzF"}

package/dist/react/hooks/useRhine.js

@@ -4,17 +4,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = useRhine;
 const react_1 = require("react");
 function useRhine(proxy) {
-    const getState = () => proxy.json();
-    const [state, setState] = (0, react_1.useState)(getState);
+    const createSnapshot = () => proxy.json();
+    const [state, setState] = (0, react_1.useState)(createSnapshot);
     (0, react_1.useEffect)(() => {
-        var _a;
-        proxy.subscribeDeep(() => {
-            // TODO: 提高性能
-            setState(getState);
-        });
-        (_a = proxy.connector) === null || _a === void 0 ? void 0 : _a.addSyncedListener(() => {
-            setState(getState);
-        });
-    }, []);
+        const updateState = () => setState(createSnapshot);
+        const unsubscribeSynced = proxy.subscribeSynced(updateState);
+        const unsubscribeDeep = proxy.subscribeDeep(updateState);
+        return () => {
+            unsubscribeSynced();
+            unsubscribeDeep();
+        };
+    }, [proxy]);
     return state;
 }

package/dist/react/hooks/useSynced.d.ts

@@ -1,4 +1,4 @@
-import WebsocketRhineConnector from "../../core/connector/WebsocketRhineConnector";
+import WebsocketConnector from "../../core/connector/WebsocketConnector";
 import { ProxiedRhineVar } from "../../core/proxy/ProxiedRhineVar";
-export default function useSynced(target?: WebsocketRhineConnector | ProxiedRhineVar<any>): boolean | undefined;
+export default function useSynced(target?: WebsocketConnector | ProxiedRhineVar<any>): boolean;
 //# sourceMappingURL=useSynced.d.ts.map

package/dist/react/hooks/useSynced.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSynced.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/useSynced.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,qDAAiD;AAE/E,OAAO,EAAC,eAAe,EAAC,yCAAqC;AAE7D,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,MAAM,CAAC,EAAE,uBAAuB,GAAG,eAAe,CAAC,GAAG,CAAC,uBA0BxF"}
+{"version":3,"file":"useSynced.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/useSynced.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,gDAA4C;AAErE,OAAO,EAAC,eAAe,EAAC,yCAAqC;AAG7D,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,MAAM,CAAC,EAAE,kBAAkB,GAAG,eAAe,CAAC,GAAG,CAAC,WAwBnF"}

package/dist/react/hooks/useSynced.js

@@ -4,30 +4,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = useSynced;
-const WebsocketRhineConnector_1 = __importDefault(require("../../core/connector/WebsocketRhineConnector"));
+const WebsocketConnector_1 = __importDefault(require("../../core/connector/WebsocketConnector"));
 const react_1 = require("react");
+const RhineVarItem_1 = __importDefault(require("../../core/proxy/RhineVarItem"));
 function useSynced(target) {
-    let connector = null;
-    if (target) {
-        if (target instanceof WebsocketRhineConnector_1.default) {
+    const checkSynced = () => {
+        var _a;
+        let connector = null;
+        if (target instanceof WebsocketConnector_1.default) {
             connector = target;
         }
-        else {
-            connector = target.connector;
+        else if (target instanceof RhineVarItem_1.default) {
+            connector = target.getConnector();
         }
-    }
-    const [synced, setSynced] = (0, react_1.useState)(connector === null || connector === void 0 ? void 0 : connector.synced);
+        return (_a = connector === null || connector === void 0 ? void 0 : connector.synced) !== null && _a !== void 0 ? _a : false;
+    };
+    const [synced, setSynced] = (0, react_1.useState)(checkSynced);
     (0, react_1.useEffect)(() => {
-        let listener = null;
-        if (connector) {
-            listener = (synced) => setSynced(synced);
-            connector.addSyncedListener(listener);
+        if (target instanceof WebsocketConnector_1.default) {
+            return target.subscribeSynced((value) => setSynced(value));
         }
-        return () => {
-            if (listener && connector) {
-                connector.removeSyncedListener(listener);
-            }
-        };
-    }, []);
+        if (target instanceof RhineVarItem_1.default) {
+            return target.subscribeSynced((value) => setSynced(value));
+        }
+    }, [target]);
     return synced;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rhine-var",
-  "version": "0.4.10",
+  "version": "0.5.0",
   "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",