@liveblocks/yjs 3.2.0 → 3.3.0

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { OpaqueRoom, IYjsProvider, YjsSyncStatus } from '@liveblocks/core';
+import { OpaqueRoom, YjsSyncStatus, IYjsProvider } from '@liveblocks/core';
 import { Observable } from 'lib0/observable';
 import * as Y from 'yjs';
 import { PermanentUserData, Doc } from 'yjs';
@@ -38,6 +38,11 @@ declare class yDocHandler extends Observable<unknown> {
     private updateRoomDoc;
     private fetchRoomDoc;
     private useV2Encoding;
+    private localSnapshotHashΣ;
+    private remoteSnapshotHashΣ;
+    private debounceTimer;
+    private static readonly DEBOUNCE_INTERVAL_MS;
+    private isLocalAndRemoteSnapshotEqualΣ;
     constructor({ doc, isRoot, updateDoc, fetchDoc, useV2Encoding, }: {
         doc: Y.Doc;
         isRoot: boolean;
@@ -45,16 +50,19 @@ declare class yDocHandler extends Observable<unknown> {
         fetchDoc: (vector: string, guid?: string) => void;
         useV2Encoding: boolean;
     });
-    handleServerUpdate: ({ update, stateVector, readOnly, v2, }: {
+    handleServerUpdate: ({ update, stateVector, readOnly, v2, remoteSnapshotHash, }: {
         update: Uint8Array;
         stateVector: string | null;
         readOnly: boolean;
         v2?: boolean;
+        remoteSnapshotHash: string;
     }) => void;
     syncDoc: () => void;
     get synced(): boolean;
     set synced(state: boolean);
+    private debounced_updateLocalSnapshot;
     private updateHandler;
+    experimental_getSyncStatus(): YjsSyncStatus;
     destroy(): void;
 }
 
@@ -73,13 +81,12 @@ declare class LiveblocksYjsProvider extends Observable<unknown> implements IYjsP
     private readonly unsubscribers;
     readonly awareness: Awareness;
     readonly rootDocHandler: yDocHandler;
-    readonly subdocHandlers: Map<string, yDocHandler>;
+    private readonly subdocHandlersΣ;
+    private readonly syncStatusΣ;
     readonly permanentUserData?: PermanentUserData;
-    private pending;
     constructor(room: OpaqueRoom, doc: Doc, options?: ProviderOptions);
     private setupOfflineSupport;
     private handleSubdocs;
-    private getUniqueUpdateId;
     private updateDoc;
     private fetchDoc;
     private createSubdocHandler;
@@ -95,6 +102,8 @@ declare class LiveblocksYjsProvider extends Observable<unknown> implements IYjsP
     getYDoc(): Doc;
     disconnect(): void;
     connect(): void;
+    get subdocHandlers(): Map<string, yDocHandler>;
+    set subdocHandlers(value: Map<string, yDocHandler>);
 }
 
 /**

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { OpaqueRoom, IYjsProvider, YjsSyncStatus } from '@liveblocks/core';
+import { OpaqueRoom, YjsSyncStatus, IYjsProvider } from '@liveblocks/core';
 import { Observable } from 'lib0/observable';
 import * as Y from 'yjs';
 import { PermanentUserData, Doc } from 'yjs';
@@ -38,6 +38,11 @@ declare class yDocHandler extends Observable<unknown> {
     private updateRoomDoc;
     private fetchRoomDoc;
     private useV2Encoding;
+    private localSnapshotHashΣ;
+    private remoteSnapshotHashΣ;
+    private debounceTimer;
+    private static readonly DEBOUNCE_INTERVAL_MS;
+    private isLocalAndRemoteSnapshotEqualΣ;
     constructor({ doc, isRoot, updateDoc, fetchDoc, useV2Encoding, }: {
         doc: Y.Doc;
         isRoot: boolean;
@@ -45,16 +50,19 @@ declare class yDocHandler extends Observable<unknown> {
         fetchDoc: (vector: string, guid?: string) => void;
         useV2Encoding: boolean;
     });
-    handleServerUpdate: ({ update, stateVector, readOnly, v2, }: {
+    handleServerUpdate: ({ update, stateVector, readOnly, v2, remoteSnapshotHash, }: {
         update: Uint8Array;
         stateVector: string | null;
         readOnly: boolean;
         v2?: boolean;
+        remoteSnapshotHash: string;
     }) => void;
     syncDoc: () => void;
     get synced(): boolean;
     set synced(state: boolean);
+    private debounced_updateLocalSnapshot;
     private updateHandler;
+    experimental_getSyncStatus(): YjsSyncStatus;
     destroy(): void;
 }
 
@@ -73,13 +81,12 @@ declare class LiveblocksYjsProvider extends Observable<unknown> implements IYjsP
     private readonly unsubscribers;
     readonly awareness: Awareness;
     readonly rootDocHandler: yDocHandler;
-    readonly subdocHandlers: Map<string, yDocHandler>;
+    private readonly subdocHandlersΣ;
+    private readonly syncStatusΣ;
     readonly permanentUserData?: PermanentUserData;
-    private pending;
     constructor(room: OpaqueRoom, doc: Doc, options?: ProviderOptions);
     private setupOfflineSupport;
     private handleSubdocs;
-    private getUniqueUpdateId;
     private updateDoc;
     private fetchDoc;
     private createSubdocHandler;
@@ -95,6 +102,8 @@ declare class LiveblocksYjsProvider extends Observable<unknown> implements IYjsP
     getYDoc(): Doc;
     disconnect(): void;
     connect(): void;
+    get subdocHandlers(): Map<string, yDocHandler>;
+    set subdocHandlers(value: Map<string, yDocHandler>);
 }
 
 /**

package/dist/index.js

@@ -3,11 +3,14 @@ import { detectDupes } from "@liveblocks/core";
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/yjs";
-var PKG_VERSION = "3.2.0";
+var PKG_VERSION = "3.3.0";
 var PKG_FORMAT = "esm";
 
 // src/provider.ts
-import { ClientMsgCode, kInternal } from "@liveblocks/core";
+import {
+  DerivedSignal as DerivedSignal2
+} from "@liveblocks/core";
+import { ClientMsgCode, kInternal, MutableSignal } from "@liveblocks/core";
 import { Base64 as Base642 } from "js-base64";
 
 // ../../node_modules/lib0/map.js
@@ -82,7 +85,7 @@ var Observable = class {
 
 // src/provider.ts
 import { IndexeddbPersistence as IndexeddbPersistence2 } from "y-indexeddb";
-import { parseUpdateMeta, PermanentUserData } from "yjs";
+import { PermanentUserData } from "yjs";
 
 // src/awareness.ts
 var Y_PRESENCE_KEY = "__yjs";
@@ -215,16 +218,26 @@ var Awareness = class extends Observable {
 };
 
 // src/doc.ts
+import {
+  DerivedSignal,
+  Signal
+} from "@liveblocks/core";
+import { sha256 } from "@noble/hashes/sha2";
 import { Base64 } from "js-base64";
 import { IndexeddbPersistence } from "y-indexeddb";
 import * as Y from "yjs";
-var yDocHandler = class extends Observable {
+var yDocHandler = class _yDocHandler extends Observable {
   unsubscribers = [];
   _synced = false;
   doc;
   updateRoomDoc;
   fetchRoomDoc;
   useV2Encoding;
+  localSnapshotHash\u03A3;
+  remoteSnapshotHash\u03A3;
+  debounceTimer = null;
+  static DEBOUNCE_INTERVAL_MS = 200;
+  isLocalAndRemoteSnapshotEqual\u03A3;
   constructor({
     doc,
     isRoot,
@@ -243,12 +256,27 @@ var yDocHandler = class extends Observable {
       fetchDoc(vector, isRoot ? void 0 : this.doc.guid);
     };
     this.syncDoc();
+    const encodedSnapshot = this.useV2Encoding ? Y.encodeSnapshotV2(Y.snapshot(this.doc)) : Y.encodeSnapshot(Y.snapshot(this.doc));
+    this.localSnapshotHash\u03A3 = new Signal(
+      Base64.fromUint8Array(sha256(encodedSnapshot))
+    );
+    this.remoteSnapshotHash\u03A3 = new Signal(null);
+    this.isLocalAndRemoteSnapshotEqual\u03A3 = DerivedSignal.from(() => {
+      const remoteSnapshotHash = this.remoteSnapshotHash\u03A3.get();
+      if (remoteSnapshotHash === null) return false;
+      const localSnapshotHash = this.localSnapshotHash\u03A3.get();
+      if (localSnapshotHash !== remoteSnapshotHash) {
+        return false;
+      }
+      return true;
+    });
   }
   handleServerUpdate = ({
     update,
     stateVector,
     readOnly,
-    v2
+    v2,
+    remoteSnapshotHash
   }) => {
     const applyUpdate2 = v2 ? Y.applyUpdateV2 : Y.applyUpdate;
     applyUpdate2(this.doc, update, "backend");
@@ -267,6 +295,7 @@ var yDocHandler = class extends Observable {
       }
       this.synced = true;
     }
+    this.remoteSnapshotHash\u03A3.set(remoteSnapshotHash);
   };
   syncDoc = () => {
     this.synced = false;
@@ -284,13 +313,35 @@ var yDocHandler = class extends Observable {
       this.emit("sync", [state]);
     }
   }
+  debounced_updateLocalSnapshot() {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(() => {
+      const encodedSnapshot = this.useV2Encoding ? Y.encodeSnapshotV2(Y.snapshot(this.doc)) : Y.encodeSnapshot(Y.snapshot(this.doc));
+      this.localSnapshotHash\u03A3.set(
+        Base64.fromUint8Array(sha256(encodedSnapshot))
+      );
+      this.debounceTimer = null;
+    }, _yDocHandler.DEBOUNCE_INTERVAL_MS);
+  }
   updateHandler = (update, origin) => {
+    this.debounced_updateLocalSnapshot();
     const isFromLocal = origin instanceof IndexeddbPersistence;
     if (origin !== "backend" && !isFromLocal) {
       this.updateRoomDoc(update);
     }
   };
+  experimental_getSyncStatus() {
+    const remoteSnapshotHash = this.remoteSnapshotHash\u03A3.get();
+    if (remoteSnapshotHash === null) {
+      return "loading";
+    }
+    if (!this.isLocalAndRemoteSnapshotEqual\u03A3.get()) {
+      return "synchronizing";
+    }
+    return "synchronized";
+  }
   destroy() {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
     this.doc.off("update", this.updateHandler);
     this.unsubscribers.forEach((unsub) => unsub());
     this._observers = /* @__PURE__ */ new Map();
@@ -308,9 +359,9 @@ var LiveblocksYjsProvider = class extends Observable {
   unsubscribers = [];
   awareness;
   rootDocHandler;
-  subdocHandlers = /* @__PURE__ */ new Map();
+  subdocHandlers\u03A3 = new MutableSignal(/* @__PURE__ */ new Map());
+  syncStatus\u03A3;
   permanentUserData;
-  pending = [];
   constructor(room, doc, options = {}) {
     super();
     this.rootDoc = doc;
@@ -335,7 +386,6 @@ var LiveblocksYjsProvider = class extends Observable {
         } else {
           this.rootDocHandler.synced = false;
         }
-        this.emit("status", [this.getStatus()]);
       })
     );
     this.unsubscribers.push(
@@ -344,32 +394,32 @@ var LiveblocksYjsProvider = class extends Observable {
         if (type === ClientMsgCode.UPDATE_YDOC) {
           return;
         }
-        const { stateVector, update: updateStr, guid, v2 } = message;
+        const {
+          stateVector,
+          update: updateStr,
+          guid,
+          v2,
+          remoteSnapshotHash
+        } = message;
         const canWrite = this.room.getSelf()?.canWrite ?? true;
         const update = Base642.toUint8Array(updateStr);
-        const updateId = this.getUniqueUpdateId(update);
-        this.pending = this.pending.filter((pendingUpdate) => {
-          if (pendingUpdate === updateId) {
-            return false;
-          }
-          return true;
-        });
         if (guid !== void 0) {
-          this.subdocHandlers.get(guid)?.handleServerUpdate({
+          this.subdocHandlers\u03A3.get().get(guid)?.handleServerUpdate({
             update,
             stateVector,
             readOnly: !canWrite,
-            v2
+            v2,
+            remoteSnapshotHash
           });
         } else {
           this.rootDocHandler.handleServerUpdate({
             update,
             stateVector,
             readOnly: !canWrite,
-            v2
+            v2,
+            remoteSnapshotHash
           });
         }
-        this.emit("status", [this.getStatus()]);
       })
     );
     if (options.offlineSupport_experimental) {
@@ -377,15 +427,33 @@ var LiveblocksYjsProvider = class extends Observable {
     }
     this.rootDocHandler.on("synced", () => {
       const state = this.rootDocHandler.synced;
-      for (const [_, handler] of this.subdocHandlers) {
+      for (const [_, handler] of this.subdocHandlers\u03A3.get()) {
         handler.syncDoc();
       }
       this.emit("synced", [state]);
       this.emit("sync", [state]);
-      this.emit("status", [this.getStatus()]);
     });
     this.rootDoc.on("subdocs", this.handleSubdocs);
     this.syncDoc();
+    this.syncStatus\u03A3 = DerivedSignal2.from(() => {
+      const rootDocumentStatus = this.rootDocHandler.experimental_getSyncStatus();
+      if (rootDocumentStatus === "loading" || rootDocumentStatus === "synchronizing") {
+        return rootDocumentStatus;
+      }
+      const subdocumentStatuses = Array.from(
+        this.subdocHandlers\u03A3.get().values()
+      ).map((handler) => handler.experimental_getSyncStatus());
+      if (subdocumentStatuses.some((state) => state !== "synchronized")) {
+        return "synchronizing";
+      }
+      return "synchronized";
+    });
+    this.emit("status", [this.getStatus()]);
+    this.unsubscribers.push(
+      this.syncStatus\u03A3.subscribe(() => {
+        this.emit("status", [this.getStatus()]);
+      })
+    );
   }
   setupOfflineSupport = () => {
     this.indexeddbProvider = new IndexeddbPersistence2(
@@ -406,43 +474,38 @@ var LiveblocksYjsProvider = class extends Observable {
     added
   }) => {
     loaded.forEach(this.createSubdocHandler);
+    const subdocHandlers = this.subdocHandlers\u03A3.get();
     if (this.options.autoloadSubdocs) {
       for (const subdoc of added) {
-        if (!this.subdocHandlers.has(subdoc.guid)) {
+        if (!subdocHandlers.has(subdoc.guid)) {
           subdoc.load();
         }
       }
     }
     for (const subdoc of removed) {
-      if (this.subdocHandlers.has(subdoc.guid)) {
-        this.subdocHandlers.get(subdoc.guid)?.destroy();
-        this.subdocHandlers.delete(subdoc.guid);
+      if (subdocHandlers.has(subdoc.guid)) {
+        subdocHandlers.get(subdoc.guid)?.destroy();
+        subdocHandlers.delete(subdoc.guid);
       }
     }
   };
-  getUniqueUpdateId = (update) => {
-    const clock = parseUpdateMeta(update).to.get(this.rootDoc.clientID) ?? "-1";
-    return this.rootDoc.clientID + ":" + clock;
-  };
   updateDoc = (update, guid) => {
     const canWrite = this.room.getSelf()?.canWrite ?? true;
     if (canWrite && !this.isPaused) {
-      const updateId = this.getUniqueUpdateId(update);
-      this.pending.push(updateId);
       this.room.updateYDoc(
         Base642.fromUint8Array(update),
         guid,
         this.useV2Encoding
       );
-      this.emit("status", [this.getStatus()]);
     }
   };
   fetchDoc = (vector, guid) => {
     this.room.fetchYDoc(vector, guid, this.useV2Encoding);
   };
   createSubdocHandler = (subdoc) => {
-    if (this.subdocHandlers.has(subdoc.guid)) {
-      this.subdocHandlers.get(subdoc.guid)?.syncDoc();
+    const subdocHandlers = this.subdocHandlers\u03A3.get();
+    if (subdocHandlers.has(subdoc.guid)) {
+      subdocHandlers.get(subdoc.guid)?.syncDoc();
       return;
     }
     const handler = new yDocHandler({
@@ -452,7 +515,7 @@ var LiveblocksYjsProvider = class extends Observable {
       fetchDoc: this.fetchDoc,
       useV2Encoding: this.options.useV2Encoding_experimental ?? false
     });
-    this.subdocHandlers.set(subdoc.guid, handler);
+    subdocHandlers.set(subdoc.guid, handler);
   };
   // attempt to load a subdoc of a given guid
   loadSubdoc = (guid) => {
@@ -466,7 +529,7 @@ var LiveblocksYjsProvider = class extends Observable {
   };
   syncDoc = () => {
     this.rootDocHandler.syncDoc();
-    for (const [_, handler] of this.subdocHandlers) {
+    for (const [_, handler] of this.subdocHandlers\u03A3.get()) {
       handler.syncDoc();
     }
   };
@@ -490,20 +553,17 @@ var LiveblocksYjsProvider = class extends Observable {
     this.rootDocHandler.syncDoc();
   }
   getStatus() {
-    if (!this.synced) {
-      return "loading";
-    }
-    return this.pending.length === 0 ? "synchronized" : "synchronizing";
+    return this.syncStatus\u03A3.get();
   }
   destroy() {
     this.unsubscribers.forEach((unsub) => unsub());
     this.awareness.destroy();
     this.rootDocHandler.destroy();
     this._observers = /* @__PURE__ */ new Map();
-    for (const [_, handler] of this.subdocHandlers) {
+    for (const [_, handler] of this.subdocHandlers\u03A3.get()) {
       handler.destroy();
     }
-    this.subdocHandlers.clear();
+    this.subdocHandlers\u03A3.get().clear();
     super.destroy();
   }
   async clearOfflineData() {
@@ -518,6 +578,17 @@ var LiveblocksYjsProvider = class extends Observable {
   }
   connect() {
   }
+  get subdocHandlers() {
+    return this.subdocHandlers\u03A3.get();
+  }
+  set subdocHandlers(value) {
+    this.subdocHandlers\u03A3.mutate((map) => {
+      map.clear();
+      for (const [key, handler] of value) {
+        map.set(key, handler);
+      }
+    });
+  }
 };
 
 // src/providerContext.ts