@liveblocks/react 1.3.3 → 1.3.5

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { detectDupes } from "@liveblocks/core";
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/react";
-var PKG_VERSION = "1.3.3";
+var PKG_VERSION = "1.3.5";
 var PKG_FORMAT = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -24,13 +24,16 @@ import {
   createAsyncCache,
   deprecateIf,
   errorIf,
+  isLiveNode,
   makeEventSource as makeEventSource2
 } from "@liveblocks/core";
 import * as React2 from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector.js";
 
 // src/comments/CommentsRoom.ts
-import { makePoller } from "@liveblocks/core";
+import {
+  makeEventSource
+} from "@liveblocks/core";
 import { nanoid } from "nanoid";
 import { useEffect as useEffect2 } from "react";
 import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
@@ -77,158 +80,166 @@ var DeleteCommentError = class extends Error {
   }
 };
 
-// src/comments/lib/store.ts
-import { makeEventSource } from "@liveblocks/core";
-function createStore(initialState) {
-  let state = initialState;
+// src/comments/CommentsRoom.ts
+var POLLING_INTERVAL_REALTIME = 3e4;
+var POLLING_INTERVAL = 5e3;
+var MAX_ERROR_RETRY_COUNT = 5;
+var ERROR_RETRY_INTERVAL = 5e3;
+var THREAD_ID_PREFIX = "th";
+var COMMENT_ID_PREFIX = "cm";
+var DEDUPING_INTERVAL = 1e3;
+function createOptimisticId(prefix) {
+  return `${prefix}_${nanoid()}`;
+}
+function createThreadsManager() {
+  let cache;
+  let request;
+  let mutation;
   const eventSource = makeEventSource();
   return {
-    get() {
-      return state;
+    get cache() {
+      return cache;
     },
-    set(newState) {
-      state = newState;
-      eventSource.notify(state);
+    set cache(value) {
+      cache = value;
+      eventSource.notify(cache);
     },
-    subscribe(callback) {
-      return eventSource.subscribe(callback);
+    get request() {
+      return request;
+    },
+    set request(value) {
+      request = value;
     },
-    subscribeOnce(callback) {
-      return eventSource.subscribeOnce(callback);
+    get mutation() {
+      return mutation;
     },
-    subscribersCount() {
-      return eventSource.count();
+    set mutation(value) {
+      mutation = value;
     },
-    destroy() {
-      return eventSource.clear();
+    subscribe(callback) {
+      return eventSource.subscribe(callback);
     }
   };
 }
-
-// src/comments/CommentsRoom.ts
-var POLLING_INTERVAL_REALTIME = 3e4;
-var POLLING_INTERVAL = 5e3;
-var THREAD_ID_PREFIX = "th";
-var COMMENT_ID_PREFIX = "cm";
-function createOptimisticId(prefix) {
-  return `${prefix}_${nanoid()}`;
-}
 function createCommentsRoom(room, errorEventSource) {
-  const store = createStore({
-    isLoading: true
-  });
-  let fetchThreadsPromise = null;
-  let numberOfMutations = 0;
-  function endMutation() {
-    numberOfMutations--;
-    if (numberOfMutations === 0) {
-      void revalidateThreads();
-    }
-  }
-  function startMutation() {
-    pollingHub.threads.stop();
-    numberOfMutations++;
-  }
-  const pollingHub = {
-    // TODO: If there's an error, it will currently infinitely retry at the current polling rate → add retry logic
-    threads: makePoller(revalidateThreads)
-  };
-  let unsubscribeRealtimeEvents;
-  let unsubscribeRealtimeConnection;
-  let realtimeClientConnected = false;
-  function getPollingInterval() {
-    return realtimeClientConnected ? POLLING_INTERVAL_REALTIME : POLLING_INTERVAL;
-  }
-  function ensureThreadsAreLoadedForMutations() {
-    const state = store.get();
-    if (state.isLoading || state.error) {
-      throw new Error(
-        "Cannot update threads or comments before they are loaded"
-      );
-    }
-    return state.threads;
-  }
-  async function revalidateThreads() {
-    pollingHub.threads.pause();
-    if (numberOfMutations === 0) {
-      if (fetchThreadsPromise === null) {
-        fetchThreadsPromise = room.getThreads();
+  const manager = createThreadsManager();
+  let timestamp = 0;
+  let commentsEventRefCount = 0;
+  let commentsEventDisposer;
+  async function mutate(data, options) {
+    const beforeMutationTimestamp = ++timestamp;
+    manager.mutation = {
+      startTime: beforeMutationTimestamp,
+      endTime: 0
+    };
+    const currentCache = manager.cache;
+    manager.cache = {
+      isLoading: false,
+      threads: options.optimisticData
+    };
+    try {
+      await data;
+      const activeMutation = manager.mutation;
+      if (activeMutation && beforeMutationTimestamp !== activeMutation.startTime) {
+        return;
       }
-      setThreads(await fetchThreadsPromise);
-      fetchThreadsPromise = null;
+    } catch (err) {
+      manager.cache = currentCache;
+      throw err;
     }
-    pollingHub.threads.resume();
-  }
-  function subscribe() {
-    if (!unsubscribeRealtimeEvents) {
-      unsubscribeRealtimeEvents = room.events.comments.subscribe(() => {
-        pollingHub.threads.restart(getPollingInterval());
-        void revalidateThreads();
-      });
+    manager.mutation = {
+      startTime: beforeMutationTimestamp,
+      endTime: ++timestamp
+    };
+    manager.request = void 0;
+    void revalidateCache(false);
+  }
+  async function revalidateCache(shouldDedupe, retryCount = 0) {
+    let startAt;
+    const shouldStartRequest = !manager.request || !shouldDedupe;
+    function deleteActiveRequest() {
+      const activeRequest = manager.request;
+      if (!activeRequest)
+        return;
+      if (activeRequest.timestamp !== startAt)
+        return;
+      manager.request = void 0;
     }
-    if (!unsubscribeRealtimeConnection) {
-      unsubscribeRealtimeConnection = room.events.status.subscribe((status) => {
-        const nextRealtimeClientConnected = status === "connected";
-        if (nextRealtimeClientConnected !== realtimeClientConnected) {
-          realtimeClientConnected = nextRealtimeClientConnected;
-          pollingHub.threads.restart(getPollingInterval());
-        }
-      });
+    function handleError() {
+      const timeout = ~~((Math.random() + 0.5) * (1 << (retryCount < 8 ? retryCount : 8))) * ERROR_RETRY_INTERVAL;
+      if (retryCount > MAX_ERROR_RETRY_COUNT)
+        return;
+      setTimeout(() => {
+        void revalidateCache(true, retryCount + 1);
+      }, timeout);
     }
-    pollingHub.threads.start(getPollingInterval());
-    return () => {
-      if (store.subscribersCount() > 1) {
+    try {
+      if (shouldStartRequest) {
+        const currentCache = manager.cache;
+        if (!currentCache)
+          manager.cache = { isLoading: true };
+        manager.request = {
+          fetcher: room.getThreads(),
+          timestamp: ++timestamp
+        };
+      }
+      const activeRequest = manager.request;
+      if (!activeRequest)
         return;
+      const newData = await activeRequest.fetcher;
+      startAt = activeRequest.timestamp;
+      if (shouldStartRequest) {
+        setTimeout(deleteActiveRequest, DEDUPING_INTERVAL);
       }
-      pollingHub.threads.stop();
-      unsubscribeRealtimeEvents?.();
-      unsubscribeRealtimeEvents = void 0;
-      unsubscribeRealtimeConnection?.();
-      unsubscribeRealtimeConnection = void 0;
-    };
-  }
-  function setThreads(newThreads) {
-    store.set({
-      threads: newThreads,
-      isLoading: false
-    });
-  }
-  function useThreadsInternal() {
-    useEffect2(subscribe, []);
-    return useSyncExternalStore(
-      store.subscribe,
-      store.get,
-      store.get
-    );
-  }
-  function useThreads() {
-    useEffect2(() => {
-      void revalidateThreads();
-    }, []);
-    return useThreadsInternal();
-  }
-  function useThreadsSuspense() {
-    const result = useThreadsInternal();
-    if (result.isLoading) {
-      throw revalidateThreads();
-    }
-    if (result.error) {
-      throw result.error;
+      if (!manager.request || manager.request.timestamp !== startAt)
+        return;
+      const activeMutation = manager.mutation;
+      if (activeMutation && (activeMutation.startTime > startAt || activeMutation.endTime > startAt || activeMutation.endTime === 0)) {
+        return;
+      }
+      manager.cache = {
+        isLoading: false,
+        threads: newData
+      };
+    } catch (err) {
+      if (shouldStartRequest)
+        handleError();
+      deleteActiveRequest();
+      manager.cache = {
+        isLoading: false,
+        error: err
+      };
     }
-    return result.threads;
   }
-  function getCurrentUserId() {
-    const self = room.getSelf();
-    if (self === null || self.id === void 0) {
-      return "anonymous";
-    } else {
-      return self.id;
-    }
+  function editThreadMetadata(options) {
+    const threadId = options.threadId;
+    const metadata = "metadata" in options ? options.metadata : {};
+    const threads = getThreads();
+    const optimisticData = threads.map(
+      (thread) => thread.id === threadId ? {
+        ...thread,
+        metadata: {
+          ...thread.metadata,
+          ...metadata
+        }
+      } : thread
+    );
+    mutate(room.editThreadMetadata({ metadata, threadId }), {
+      optimisticData
+    }).catch((err) => {
+      errorEventSource.notify(
+        new EditThreadMetadataError(err, {
+          roomId: room.id,
+          threadId,
+          metadata
+        })
+      );
+    });
   }
   function createThread(options) {
     const body = options.body;
     const metadata = "metadata" in options ? options.metadata : {};
-    const threads = ensureThreadsAreLoadedForMutations();
+    const threads = getThreads();
     const threadId = createOptimisticId(THREAD_ID_PREFIX);
     const commentId = createOptimisticId(COMMENT_ID_PREFIX);
     const now = (/* @__PURE__ */ new Date()).toISOString();
@@ -248,9 +259,9 @@ function createCommentsRoom(room, errorEventSource) {
         }
       ]
     };
-    setThreads([...threads, newThread]);
-    startMutation();
-    room.createThread({ threadId, commentId, body, metadata }).catch(
+    mutate(room.createThread({ threadId, commentId, body, metadata }), {
+      optimisticData: [...threads, newThread]
+    }).catch(
       (er) => errorEventSource.notify(
         new CreateThreadError(er, {
           roomId: room.id,
@@ -260,40 +271,14 @@ function createCommentsRoom(room, errorEventSource) {
           metadata
         })
       )
-    ).finally(endMutation);
-    return newThread;
-  }
-  function editThreadMetadata(options) {
-    const threadId = options.threadId;
-    const metadata = "metadata" in options ? options.metadata : {};
-    const threads = ensureThreadsAreLoadedForMutations();
-    setThreads(
-      threads.map(
-        (thread) => thread.id === threadId ? {
-          ...thread,
-          metadata: {
-            ...thread.metadata,
-            ...metadata
-          }
-        } : thread
-      )
     );
-    startMutation();
-    room.editThreadMetadata({ metadata, threadId }).catch(
-      (er) => errorEventSource.notify(
-        new EditThreadMetadataError(er, {
-          roomId: room.id,
-          threadId,
-          metadata
-        })
-      )
-    ).finally(endMutation);
+    return newThread;
   }
   function createComment({
     threadId,
     body
   }) {
-    const threads = ensureThreadsAreLoadedForMutations();
+    const threads = getThreads();
     const commentId = createOptimisticId(COMMENT_ID_PREFIX);
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const comment = {
@@ -305,16 +290,15 @@ function createCommentsRoom(room, errorEventSource) {
       userId: getCurrentUserId(),
       body
     };
-    setThreads(
-      threads.map(
-        (thread) => thread.id === threadId ? {
-          ...thread,
-          comments: [...thread.comments, comment]
-        } : thread
-      )
+    const optimisticData = threads.map(
+      (thread) => thread.id === threadId ? {
+        ...thread,
+        comments: [...thread.comments, comment]
+      } : thread
     );
-    startMutation();
-    room.createComment({ threadId, commentId, body }).catch(
+    mutate(room.createComment({ threadId, commentId, body }), {
+      optimisticData
+    }).catch(
       (er) => errorEventSource.notify(
         new CreateCommentError(er, {
           roomId: room.id,
@@ -323,28 +307,27 @@ function createCommentsRoom(room, errorEventSource) {
           body
         })
       )
-    ).finally(endMutation);
+    );
     return comment;
   }
   function editComment({ threadId, commentId, body }) {
-    const threads = ensureThreadsAreLoadedForMutations();
+    const threads = getThreads();
     const now = (/* @__PURE__ */ new Date()).toISOString();
-    setThreads(
-      threads.map(
-        (thread) => thread.id === threadId ? {
-          ...thread,
-          comments: thread.comments.map(
-            (comment) => comment.id === commentId ? {
-              ...comment,
-              editedAt: now,
-              body
-            } : comment
-          )
-        } : thread
-      )
+    const optimisticData = threads.map(
+      (thread) => thread.id === threadId ? {
+        ...thread,
+        comments: thread.comments.map(
+          (comment) => comment.id === commentId ? {
+            ...comment,
+            editedAt: now,
+            body
+          } : comment
+        )
+      } : thread
     );
-    startMutation();
-    room.editComment({ threadId, commentId, body }).catch(
+    mutate(room.editComment({ threadId, commentId, body }), {
+      optimisticData
+    }).catch(
       (er) => errorEventSource.notify(
         new EditCommentError(er, {
           roomId: room.id,
@@ -353,10 +336,10 @@ function createCommentsRoom(room, errorEventSource) {
           body
         })
       )
-    ).finally(endMutation);
+    );
   }
   function deleteComment({ threadId, commentId }) {
-    const threads = ensureThreadsAreLoadedForMutations();
+    const threads = getThreads();
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const newThreads = [];
     for (const thread of threads) {
@@ -378,9 +361,9 @@ function createCommentsRoom(room, errorEventSource) {
         newThreads.push(thread);
       }
     }
-    setThreads(newThreads);
-    startMutation();
-    room.deleteComment({ threadId, commentId }).catch(
+    mutate(room.deleteComment({ threadId, commentId }), {
+      optimisticData: newThreads
+    }).catch(
       (er) => errorEventSource.notify(
         new DeleteCommentError(er, {
           roomId: room.id,
@@ -388,13 +371,103 @@ function createCommentsRoom(room, errorEventSource) {
           commentId
         })
       )
-    ).finally(endMutation);
+    );
+  }
+  function getCurrentUserId() {
+    const self = room.getSelf();
+    if (self === null || self.id === void 0) {
+      return "anonymous";
+    } else {
+      return self.id;
+    }
+  }
+  function getThreads() {
+    const threads = manager.cache;
+    if (!threads || threads.isLoading || threads.error) {
+      throw new Error(
+        "Cannot update threads or comments before they are loaded."
+      );
+    }
+    return threads.threads;
+  }
+  function _subscribe() {
+    if (commentsEventRefCount === 0) {
+      commentsEventDisposer = room.events.comments.subscribe(() => {
+        void revalidateCache(true);
+      });
+    }
+    commentsEventRefCount = commentsEventRefCount + 1;
+    return () => {
+      commentsEventRefCount = commentsEventRefCount - 1;
+      if (commentsEventRefCount > 0)
+        return;
+      commentsEventDisposer?.();
+      commentsEventDisposer = void 0;
+    };
+  }
+  function usePolling() {
+    const status = useSyncExternalStore(
+      room.events.status.subscribe,
+      room.getStatus,
+      room.getStatus
+    );
+    useEffect2(
+      () => {
+        const interval = status === "connected" ? POLLING_INTERVAL_REALTIME : POLLING_INTERVAL;
+        let revalidationTimerId;
+        function scheduleRevalidation() {
+          revalidationTimerId = window.setTimeout(
+            executeRevalidation,
+            interval
+          );
+        }
+        function executeRevalidation() {
+          void revalidateCache(true).then(scheduleRevalidation);
+        }
+        scheduleRevalidation();
+        return () => {
+          window.clearTimeout(revalidationTimerId);
+        };
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- ESLint recommends against adding `revalidateCache` as a dependency, but not doing so causes the code inside `useEffect` to reference an outdated version of `revalidateCache`
+      [status, revalidateCache]
+    );
+  }
+  function useThreadsInternal() {
+    useEffect2(_subscribe, [_subscribe]);
+    usePolling();
+    const cache = useSyncExternalStore(
+      manager.subscribe,
+      () => manager.cache,
+      () => manager.cache
+    );
+    return cache ?? { isLoading: true };
+  }
+  function useThreads() {
+    useEffect2(
+      () => {
+        void revalidateCache(true);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- ESLint recommends against adding `revalidateCache` as a dependency, but not doing so causes the code inside `useEffect` to reference an outdated version of `revalidateCache`
+      [revalidateCache]
+    );
+    return useThreadsInternal();
+  }
+  function useThreadsSuspense() {
+    const cache = useThreadsInternal();
+    if (cache.isLoading) {
+      throw revalidateCache(true);
+    }
+    if (cache.error) {
+      throw cache.error;
+    }
+    return cache.threads;
   }
   return {
     useThreads,
     useThreadsSuspense,
-    createThread,
     editThreadMetadata,
+    createThread,
     createComment,
     editComment,
     deleteComment
@@ -641,9 +714,9 @@ function createRoomContext(client, options) {
       );
       setRoom(room2);
       return () => {
-        const commentsRoom = commentsRooms.get(roomId);
+        const commentsRoom = commentsRooms.get(room2);
         if (commentsRoom) {
-          commentsRooms.delete(roomId);
+          commentsRooms.delete(room2);
         }
         client.leave(roomId);
       };
@@ -847,46 +920,39 @@ function createRoomContext(client, options) {
   }
   function useLegacyKey(key) {
     const room = useRoom();
-    const root = useMutableStorageRoot();
+    const rootOrNull = useMutableStorageRoot();
     const rerender = useRerender();
     React2.useEffect(() => {
-      if (root === null) {
+      if (rootOrNull === null) {
         return;
       }
-      let liveValue = root.get(key);
+      const root = rootOrNull;
+      let unsubCurr;
+      let curr = root.get(key);
+      function subscribeToCurr() {
+        unsubCurr = isLiveNode(curr) ? room.subscribe(curr, rerender) : void 0;
+      }
       function onRootChange() {
-        const newCrdt = root.get(key);
-        if (newCrdt !== liveValue) {
-          unsubscribeCrdt();
-          liveValue = newCrdt;
-          unsubscribeCrdt = room.subscribe(
-            liveValue,
-            // TODO: This is hiding a bug! If `liveValue` happens to be the string `"event"` this actually subscribes an event handler!
-            rerender
-          );
+        const newValue = root.get(key);
+        if (newValue !== curr) {
+          unsubCurr?.();
+          curr = newValue;
+          subscribeToCurr();
           rerender();
         }
       }
-      let unsubscribeCrdt = room.subscribe(
-        liveValue,
-        // TODO: This is hiding a bug! If `liveValue` happens to be the string `"event"` this actually subscribes an event handler!
-        rerender
-      );
-      const unsubscribeRoot = room.subscribe(
-        root,
-        // TODO: This is hiding a bug! If `liveValue` happens to be the string `"event"` this actually subscribes an event handler!
-        onRootChange
-      );
+      subscribeToCurr();
       rerender();
+      const unsubscribeRoot = room.subscribe(root, onRootChange);
       return () => {
         unsubscribeRoot();
-        unsubscribeCrdt();
+        unsubCurr?.();
       };
-    }, [root, room, key, rerender]);
-    if (root === null) {
+    }, [rootOrNull, room, key, rerender]);
+    if (rootOrNull === null) {
       return null;
     } else {
-      return root.get(key);
+      return rootOrNull.get(key);
     }
   }
   function useStorage(selector, isEqual) {
@@ -1006,10 +1072,10 @@ function createRoomContext(client, options) {
   const commentsErrorEventSource = makeEventSource2();
   const commentsRooms = /* @__PURE__ */ new Map();
   function getCommentsRoom(room) {
-    let commentsRoom = commentsRooms.get(room.id);
+    let commentsRoom = commentsRooms.get(room);
     if (commentsRoom === void 0) {
       commentsRoom = createCommentsRoom(room, commentsErrorEventSource);
-      commentsRooms.set(room.id, commentsRoom);
+      commentsRooms.set(room, commentsRoom);
     }
     return commentsRoom;
   }