canvu-react 0.4.7 → 0.4.9

package/dist/realtime.cjs

@@ -2021,6 +2021,7 @@ function createYjsBoardDoc() {
     doc,
     yItems,
     lastServerConfirmedIds: /* @__PURE__ */ new Set(),
+    lastServerConfirmedItemSerializations: /* @__PURE__ */ new Map(),
     serverItemSeenAt: /* @__PURE__ */ new Map()
   };
 }
@@ -2077,6 +2078,10 @@ function valuesEqual(left, right) {
     return false;
   }
 }
+function serializeItem(value) {
+  const item = value instanceof Y__namespace.Map ? yMapToVectorItem(value) : value;
+  return JSON.stringify(item);
+}
 function updateYMapInPlace(yMap, next) {
   const nextKeys = /* @__PURE__ */ new Set();
   for (const [key, value] of Object.entries(next)) {
@@ -2146,6 +2151,14 @@ function applyServerSnapshotToYDoc(board, options) {
       if (!id) continue;
       const existing = indexYItemsById(board.yItems).get(id);
       if (existing) {
+        const currentSerialized = serializeItem(existing.yMap);
+        const incomingSerialized = serializeItem(item);
+        const confirmedSerialized = board.lastServerConfirmedItemSerializations.get(id);
+        const hasPendingLocalChange = confirmedSerialized === void 0 ? currentSerialized !== incomingSerialized : currentSerialized !== confirmedSerialized && currentSerialized !== incomingSerialized;
+        if (hasPendingLocalChange) {
+          board.serverItemSeenAt.set(id, now);
+          continue;
+        }
         updateYMapInPlace(existing.yMap, item);
         board.serverItemSeenAt.set(id, now);
         continue;
@@ -2156,9 +2169,13 @@ function applyServerSnapshotToYDoc(board, options) {
     }
   }, origin);
   board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
+  board.lastServerConfirmedItemSerializations = /* @__PURE__ */ new Map();
   for (const item of snapshotItems) {
     const id = getItemId(item);
-    if (id) board.lastServerConfirmedIds.add(id);
+    if (id) {
+      board.lastServerConfirmedIds.add(id);
+      board.lastServerConfirmedItemSerializations.set(id, serializeItem(item));
+    }
   }
 }
 function replaceYDocWithSnapshot(board, options) {
@@ -2173,11 +2190,13 @@ function replaceYDocWithSnapshot(board, options) {
     }
   }, origin);
   board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
+  board.lastServerConfirmedItemSerializations = /* @__PURE__ */ new Map();
   board.serverItemSeenAt = /* @__PURE__ */ new Map();
   for (const item of snapshotItems) {
     const id = getItemId(item);
     if (id) {
       board.lastServerConfirmedIds.add(id);
+      board.lastServerConfirmedItemSerializations.set(id, serializeItem(item));
       board.serverItemSeenAt.set(id, now);
     }
   }
@@ -2189,7 +2208,8 @@ function getLocallyPendingItemIds(board) {
     if (!yMap) continue;
     const id = getItemId(yMap);
     if (!id) continue;
-    if (!board.lastServerConfirmedIds.has(id)) {
+    const confirmedSerialized = board.lastServerConfirmedItemSerializations.get(id);
+    if (!confirmedSerialized || serializeItem(yMap) !== confirmedSerialized) {
       pending.add(id);
     }
   }
@@ -2378,6 +2398,30 @@ function prepareRealtimeItems(items) {
     return null;
   }
 }
+function getRealtimeItemId(item) {
+  const id = item.id;
+  return typeof id === "string" ? id : null;
+}
+function serializeRealtimeItem(item) {
+  try {
+    return JSON.stringify(sanitizeRealtimeItem(item));
+  } catch {
+    return null;
+  }
+}
+function resolvePendingDraftItemIds(board, items) {
+  const pendingIds = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    const id = getRealtimeItemId(item);
+    if (!id) continue;
+    const confirmedSerialized = board.lastServerConfirmedItemSerializations.get(id);
+    const serialized = serializeRealtimeItem(item);
+    if (!confirmedSerialized || !serialized || serialized !== confirmedSerialized) {
+      pendingIds.add(id);
+    }
+  }
+  return pendingIds.size > 0 ? Array.from(pendingIds) : void 0;
+}
 function useRealtimeSession(options) {
   const {
     url,
@@ -2568,7 +2612,8 @@ function useRealtimeSession(options) {
     }
     const board = boardRef.current;
     const draft = localDraftRef.current;
-    const draftToWrite = board && draft.yDocState == null ? { ...draft, yDocState: encodeYDocState(board) } : draft;
+    const canEncodeYDocState = board && draft.yDocState == null && sameSerializedItems(readVectorItems(board.yItems), draft.items);
+    const draftToWrite = canEncodeYDocState ? { ...draft, yDocState: encodeYDocState(board) } : draft;
     writeRealtimeOfflineDraft(draftToWrite);
   }, [clearDraftPersistSchedule, roomId]);
   const scheduleDraftPersistence = react.useCallback(() => {
@@ -2708,13 +2753,26 @@ function useRealtimeSession(options) {
       }, DOCUMENT_FLUSH_DEBOUNCE_MS);
     }, DOCUMENT_FLUSH_DEBOUNCE_MS);
   }, [clearDocumentFlushSchedule, flushQueuedDocument]);
-  const queueDocumentSend = react.useCallback((items) => {
-    pendingLocalItemsRef.current = items;
-    queuedDirtyRef.current = true;
-    setHasPendingDocumentSync(true);
-    setHasLocalOfflineDraft(true);
-    scheduleDocumentFlushRef.current();
-  }, []);
+  const queueDocumentSend = react.useCallback(
+    (items) => {
+      pendingLocalItemsRef.current = items;
+      queuedDirtyRef.current = true;
+      setHasPendingDocumentSync(true);
+      setHasLocalOfflineDraft(true);
+      const board = boardRef.current;
+      const draftItems = sanitizeRealtimeItems(items);
+      setLocalDraftRef.current({
+        roomId,
+        baseRevision: currentRevisionRef.current,
+        items: draftItems,
+        updatedAt: nowMs(),
+        pendingIds: board ? resolvePendingDraftItemIds(board, draftItems) : void 0
+      });
+      scheduleDraftPersistenceRef.current?.();
+      scheduleDocumentFlushRef.current();
+    },
+    [roomId]
+  );
   const applyDraftSnapshot = react.useCallback(
     (draft, options2) => {
       const board = boardRef.current;
@@ -2729,6 +2787,7 @@ function useRealtimeSession(options) {
           restoredFromBinary = decodeYDocState(board, draft.yDocState);
           if (restoredFromBinary) {
             const allIds = /* @__PURE__ */ new Set();
+            const allItems = readVectorItems(board.yItems);
             for (let i = 0; i < board.yItems.length; i++) {
               const yMap = board.yItems.get(i);
               if (!yMap) continue;
@@ -2737,9 +2796,17 @@ function useRealtimeSession(options) {
             }
             const pendingIds = new Set(draft.pendingIds ?? []);
             board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
+            board.lastServerConfirmedItemSerializations = /* @__PURE__ */ new Map();
             for (const id of allIds) {
               if (!pendingIds.has(id)) {
                 board.lastServerConfirmedIds.add(id);
+                const item = allItems.find((candidate) => candidate.id === id);
+                if (item) {
+                  board.lastServerConfirmedItemSerializations.set(
+                    id,
+                    JSON.stringify(item)
+                  );
+                }
               }
             }
           }
@@ -2750,6 +2817,7 @@ function useRealtimeSession(options) {
             origin: ORIGIN_BOOTSTRAP
           });
           board.lastServerConfirmedIds = /* @__PURE__ */ new Set();
+          board.lastServerConfirmedItemSerializations = /* @__PURE__ */ new Map();
         }
       }
       const items = board ? readVectorItems(board.yItems) : draft.items;
@@ -2868,6 +2936,25 @@ function useRealtimeSession(options) {
   setLocalDraftRef.current = setLocalDraft;
   const scheduleDraftPersistenceRef = react.useRef(scheduleDraftPersistence);
   scheduleDraftPersistenceRef.current = scheduleDraftPersistence;
+  const persistLocalDraftRef = react.useRef(persistLocalDraft);
+  persistLocalDraftRef.current = persistLocalDraft;
+  react.useEffect(() => {
+    const persistDraft = () => {
+      persistLocalDraftRef.current();
+    };
+    const handleVisibilityChange = () => {
+      if (window.document.visibilityState === "hidden") persistDraft();
+    };
+    window.addEventListener("pagehide", persistDraft);
+    window.document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      window.removeEventListener("pagehide", persistDraft);
+      window.document.removeEventListener(
+        "visibilitychange",
+        handleVisibilityChange
+      );
+    };
+  }, []);
   react.useEffect(() => {
     if (boardRef.current) {
       boardRef.current.doc.destroy();