canvu-react 0.3.11 → 0.3.13

package/dist/realtime.cjs

@@ -2074,6 +2074,10 @@ function useRealtimeSession(options) {
   }, []);
   const applyDocument = react.useCallback(
     (snapshot, options2) => {
+      const currentSnapshot = latestDocumentRef.current;
+      if (currentSnapshot && currentSnapshot.revision === snapshot.revision && currentSnapshot.updatedByClientId === snapshot.updatedByClientId && sameSerializedItems(currentSnapshot.items, snapshot.items)) {
+        return;
+      }
       currentRevisionRef.current = snapshot.revision;
       latestDocumentRef.current = snapshot;
       setDocument(snapshot);
@@ -2200,7 +2204,7 @@ function useRealtimeSession(options) {
       items: preparedItems.items,
       serialized: preparedItems.serialized
     };
-    const didSend = sendRaw({
+    const didSend = sendRawRef.current({
       type: "document:update",
       roomId,
       clientId: clientIdRef.current,
@@ -2212,7 +2216,7 @@ function useRealtimeSession(options) {
       outboundInFlightRef.current = null;
       setHasPendingDocumentSync(true);
     }
-  }, [clearDocumentFlushSchedule, roomId, sendRaw]);
+  }, [clearDocumentFlushSchedule, roomId]);
   const scheduleDocumentFlush = react.useCallback(() => {
     clearDocumentFlushSchedule();
     documentFlushTimerRef.current = window.setTimeout(() => {
@@ -2235,9 +2239,9 @@ function useRealtimeSession(options) {
       queuedItemsRef.current = items;
       setHasPendingDocumentSync(true);
       if (conflictRef.current) return;
-      scheduleDocumentFlush();
+      scheduleDocumentFlushRef.current();
     },
-    [roomId, scheduleDocumentFlush, scheduleDraftPersistence, setLocalDraft]
+    [roomId, scheduleDraftPersistence, setLocalDraft]
   );
   const applyDraftSnapshot = react.useCallback(
     (draft, options2) => {
@@ -2255,7 +2259,7 @@ function useRealtimeSession(options) {
         return false;
       }
       if (sameSerializedItems(localDraft.items, serverDocument.items)) {
-        clearLocalDraft();
+        clearLocalDraftRef.current();
         setHasPendingDocumentSync(false);
         setConflictState(null);
         applyDocument(serverDocument, options2);
@@ -2282,13 +2286,7 @@ function useRealtimeSession(options) {
       });
       return true;
     },
-    [
-      applyDocument,
-      applyDraftSnapshot,
-      clearLocalDraft,
-      scheduleDocumentFlush,
-      setConflictState
-    ]
+    [applyDocument, applyDraftSnapshot, scheduleDocumentFlush, setConflictState]
   );
   const sendPresenceUpdate = react.useCallback(() => {
     sendRaw({
@@ -2375,6 +2373,26 @@ function useRealtimeSession(options) {
       setLocalDraft
     ]
   );
+  const setConflictStateRef = react.useRef(setConflictState);
+  setConflictStateRef.current = setConflictState;
+  const updateConnectionRef = react.useRef(updateConnection);
+  updateConnectionRef.current = updateConnection;
+  const applyDocumentRef = react.useRef(applyDocument);
+  applyDocumentRef.current = applyDocument;
+  const clearLocalDraftRef = react.useRef(clearLocalDraft);
+  clearLocalDraftRef.current = clearLocalDraft;
+  const collapsePeersToSelfRef = react.useRef(collapsePeersToSelf);
+  collapsePeersToSelfRef.current = collapsePeersToSelf;
+  const applyPeersRef = react.useRef(applyPeers);
+  applyPeersRef.current = applyPeers;
+  const resolveAuthoritativeDocumentRef = react.useRef(resolveAuthoritativeDocument);
+  resolveAuthoritativeDocumentRef.current = resolveAuthoritativeDocument;
+  const scheduleDocumentFlushRef = react.useRef(scheduleDocumentFlush);
+  scheduleDocumentFlushRef.current = scheduleDocumentFlush;
+  const scheduleReconnectRef = react.useRef(scheduleReconnect);
+  scheduleReconnectRef.current = scheduleReconnect;
+  const sendRawRef = react.useRef(sendRaw);
+  sendRawRef.current = sendRaw;
   react.useEffect(() => {
     if (!roomId) {
       clearDocumentFlushSchedule();
@@ -2428,8 +2446,8 @@ function useRealtimeSession(options) {
       queuedItemsRef.current = localDraftRef.current?.items ?? null;
       outboundInFlightRef.current = null;
       setHasPendingDocumentSync(localDraftRef.current != null);
-      collapsePeersToSelf("offline");
-      updateConnection((prev) => ({
+      collapsePeersToSelfRef.current("offline");
+      updateConnectionRef.current((prev) => ({
         ...prev,
         state: "offline",
         connected: false,
@@ -2441,8 +2459,8 @@ function useRealtimeSession(options) {
     manualDisconnectRef.current = false;
     const socketUrl = normalizeSocketUrl(url);
     if (!socketUrl) {
-      collapsePeersToSelf("offline");
-      updateConnection((prev) => ({
+      collapsePeersToSelfRef.current("offline");
+      updateConnectionRef.current((prev) => ({
         ...prev,
         state: "offline",
         connected: false,
@@ -2452,7 +2470,7 @@ function useRealtimeSession(options) {
       return;
     }
     if (!isValidSocketUrl(socketUrl)) {
-      updateConnection((prev) => ({
+      updateConnectionRef.current((prev) => ({
         ...prev,
         state: "error",
         connected: false,
@@ -2463,7 +2481,7 @@ function useRealtimeSession(options) {
       return;
     }
     let disposed = false;
-    updateConnection((prev) => ({
+    updateConnectionRef.current((prev) => ({
       ...prev,
       state: retryCountRef.current > 0 ? "reconnecting" : "connecting",
       connected: false,
@@ -2481,7 +2499,7 @@ function useRealtimeSession(options) {
     socket.addEventListener("open", () => {
       if (disposed) return;
       clearConnectTimeout();
-      sendRaw({
+      sendRawRef.current({
         type: "session:join",
         roomId,
         peer: {
@@ -2494,7 +2512,7 @@ function useRealtimeSession(options) {
       });
       clearHeartbeatTimer();
       heartbeatTimerRef.current = window.setInterval(() => {
-        sendRaw({
+        sendRawRef.current({
           type: "session:ping",
           roomId,
           clientId: clientIdRef.current,
@@ -2514,13 +2532,13 @@ function useRealtimeSession(options) {
       }
       const parsed = parseRealtimeServerMessage(payload);
       if (!parsed) return;
-      updateConnection((prev) => ({
+      updateConnectionRef.current((prev) => ({
         ...prev,
         lastMessageAt: nowMs()
       }));
       if (parsed.type === "session:welcome") {
         retryCountRef.current = 0;
-        updateConnection((prev) => ({
+        updateConnectionRef.current((prev) => ({
           ...prev,
           state: "connected",
           connected: true,
@@ -2529,8 +2547,8 @@ function useRealtimeSession(options) {
           lastConnectedAt: nowMs(),
           lastError: null
         }));
-        applyPeers(parsed.peers);
-        const handledByDraft = resolveAuthoritativeDocument(
+        applyPeersRef.current(parsed.peers);
+        const handledByDraft = resolveAuthoritativeDocumentRef.current(
           sanitizeRealtimeSnapshot(parsed.document),
           {
             suppressSubscriberNotify: localDraftRef.current != null && sameSerializedItems(
@@ -2544,11 +2562,11 @@ function useRealtimeSession(options) {
           outboundInFlightRef.current = null;
           setHasPendingDocumentSync(false);
         }
-        scheduleDocumentFlush();
+        scheduleDocumentFlushRef.current();
         return;
       }
       if (parsed.type === "presence:sync") {
-        applyPeers(parsed.peers);
+        applyPeersRef.current(parsed.peers);
         return;
       }
       if (parsed.type === "session:peer-joined") {
@@ -2570,14 +2588,14 @@ function useRealtimeSession(options) {
         return;
       }
       if (parsed.type === "session:pong") {
-        updateConnection((prev) => ({
+        updateConnectionRef.current((prev) => ({
           ...prev,
           lastPongAt: parsed.serverTime
         }));
         return;
       }
       if (parsed.type === "session:error") {
-        updateConnection((prev) => ({
+        updateConnectionRef.current((prev) => ({
           ...prev,
           state: prev.connected ? prev.state : "error",
           lastError: parsed.message
@@ -2593,42 +2611,46 @@ function useRealtimeSession(options) {
           outboundInFlightRef.current = null;
           queuedItemsRef.current = localDraftRef.current?.items ?? null;
           setHasPendingDocumentSync(queuedItemsRef.current != null);
-          resolveAuthoritativeDocument(sanitizeRealtimeSnapshot(parsed.document));
+          resolveAuthoritativeDocumentRef.current(
+            sanitizeRealtimeSnapshot(parsed.document)
+          );
           return;
         }
         const shouldSuppress = inFlight != null && sameSerializedItems(inFlight.items, parsed.document.items);
         outboundInFlightRef.current = null;
-        applyDocument(sanitizeRealtimeSnapshot(parsed.document), {
+        applyDocumentRef.current(sanitizeRealtimeSnapshot(parsed.document), {
           suppressSubscriberNotify: shouldSuppress
         });
         if (queuedItemsRef.current) {
           if (sameSerializedItems(queuedItemsRef.current, parsed.document.items)) {
             queuedItemsRef.current = null;
           } else {
-            scheduleDocumentFlush();
+            scheduleDocumentFlushRef.current();
           }
         }
         if (!queuedItemsRef.current) {
-          clearLocalDraft();
+          clearLocalDraftRef.current();
         }
         setHasPendingDocumentSync(queuedItemsRef.current != null);
-        setConflictState(null);
+        setConflictStateRef.current(null);
         return;
       }
       if (parsed.type === "document:resync-required") {
         outboundInFlightRef.current = null;
         queuedItemsRef.current = localDraftRef.current?.items ?? null;
         setHasPendingDocumentSync(queuedItemsRef.current != null);
-        updateConnection((prev) => ({
+        updateConnectionRef.current((prev) => ({
           ...prev,
           lastError: parsed.reason
         }));
-        resolveAuthoritativeDocument(sanitizeRealtimeSnapshot(parsed.document));
+        resolveAuthoritativeDocumentRef.current(
+          sanitizeRealtimeSnapshot(parsed.document)
+        );
       }
     });
     socket.addEventListener("error", () => {
       if (disposed) return;
-      updateConnection((prev) => ({
+      updateConnectionRef.current((prev) => ({
         ...prev,
         state: prev.connected ? prev.state : "error",
         lastError: "Falha de conex\xE3o websocket."
@@ -2639,17 +2661,17 @@ function useRealtimeSession(options) {
       clearHeartbeatTimer();
       clearConnectTimeout();
       wsRef.current = null;
-      collapsePeersToSelf(
+      collapsePeersToSelfRef.current(
         manualDisconnectRef.current || !enabled ? "offline" : "reconnecting"
       );
-      updateConnection((prev) => ({
+      updateConnectionRef.current((prev) => ({
         ...prev,
         connected: false,
         clientId: prev.clientId,
         state: manualDisconnectRef.current || !enabled ? "offline" : prev.state
       }));
       if (!manualDisconnectRef.current && enabled) {
-        scheduleReconnect();
+        scheduleReconnectRef.current();
       }
     });
     return () => {
@@ -2661,14 +2683,10 @@ function useRealtimeSession(options) {
       socket.close();
     };
   }, [
-    applyDocument,
-    applyPeers,
     clearConnectTimeout,
+    clearDocumentFlushSchedule,
     clearHeartbeatTimer,
-    clearLocalDraft,
     clearReconnectTimer,
-    collapsePeersToSelf,
-    clearDocumentFlushSchedule,
     connectSequence,
     connectTimeoutMs,
     enabled,
@@ -2677,13 +2695,7 @@ function useRealtimeSession(options) {
     peer.displayName,
     peer.id,
     peer.image,
-    resolveAuthoritativeDocument,
     roomId,
-    scheduleDocumentFlush,
-    scheduleReconnect,
-    sendRaw,
-    setConflictState,
-    updateConnection,
     url
   ]);
   react.useEffect(() => {
@@ -2989,7 +3001,12 @@ function useRealtimeCanvasDocument(options) {
   } = options;
   const [loading, setLoading] = react.useState(false);
   const lastAppliedRevisionRef = react.useRef(null);
+  const inFlightRevisionRef = react.useRef(null);
   const realtimeEnabled = enabled && session != null;
+  const documentRevision = session?.document?.revision ?? null;
+  const documentItems = session?.document?.items;
+  const documentUpdatedByClientId = session?.document?.updatedByClientId ?? null;
+  const connectionClientId = session?.connection.clientId ?? null;
   const applyIncomingItems = react.useCallback(
     async (nextItems) => {
       const normalizedItems = normalizeItems ? normalizeItems(nextItems) : [...nextItems];
@@ -3012,22 +3029,38 @@ function useRealtimeCanvasDocument(options) {
   );
   react.useEffect(() => {
     if (!realtimeEnabled || !onItemsChange || !session?.document) return;
-    if (session.document.updatedByClientId === session.connection.clientId) return;
-    if (lastAppliedRevisionRef.current === session.document.revision) return;
+    if (documentUpdatedByClientId === connectionClientId) return;
+    if (documentRevision == null) return;
+    if (lastAppliedRevisionRef.current === documentRevision) return;
+    if (inFlightRevisionRef.current === documentRevision) return;
+    inFlightRevisionRef.current = documentRevision;
     let cancelled = false;
     setLoading(true);
-    void applyIncomingItems(session.document.items).then((resolvedItems) => {
+    void applyIncomingItems(documentItems ?? []).then((resolvedItems) => {
       if (cancelled) return;
-      lastAppliedRevisionRef.current = session.document?.revision ?? null;
+      if (inFlightRevisionRef.current !== documentRevision) return;
+      lastAppliedRevisionRef.current = documentRevision;
       onItemsChange(resolvedItems);
     }).finally(() => {
+      if (inFlightRevisionRef.current === documentRevision) {
+        inFlightRevisionRef.current = null;
+      }
       if (cancelled) return;
       setLoading(false);
     });
     return () => {
       cancelled = true;
     };
-  }, [applyIncomingItems, realtimeEnabled, onItemsChange, session]);
+  }, [
+    applyIncomingItems,
+    connectionClientId,
+    documentItems,
+    documentRevision,
+    documentUpdatedByClientId,
+    onItemsChange,
+    realtimeEnabled,
+    session?.document
+  ]);
   return react.useMemo(
     () => ({
       items,