@liveblocks/react 1.9.3 → 1.9.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.9.3";
+var PKG_VERSION = "1.9.5";
 var PKG_FORMAT = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -36,11 +36,12 @@ import { CommentsApiError, makeEventSource, stringify } from "@liveblocks/core";
 import { nanoid } from "nanoid";
 import React2, {
   createContext,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useContext,
   useEffect as useEffect3,
   useMemo
 } from "react";
+import { useSyncExternalStore as useSyncExternalStore3 } from "use-sync-external-store/shim";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector.js";
 
 // src/comments/errors.ts
@@ -102,19 +103,66 @@ var RemoveReactionError = class extends Error {
 };
 
 // src/comments/lib/revalidation.ts
-import { useCallback, useEffect as useEffect2, useRef } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/comments/lib/use-is-document-visible.ts
+import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
+function useIsDocumentVisible() {
+  const isVisible = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return isVisible;
+}
+function subscribe(onStoreChange) {
+  document.addEventListener("visibilitychange", onStoreChange);
+  return () => {
+    document.removeEventListener("visibilitychange", onStoreChange);
+  };
+}
+function getSnapshot() {
+  const isDocumentDefined = typeof document !== "undefined";
+  return isDocumentDefined ? document.visibilityState === "visible" : true;
+}
+
+// src/comments/lib/use-is-online.ts
+import { useCallback, useRef } from "react";
+import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external-store/shim/index.js";
+function useIsOnline() {
+  const isOnlineRef = useRef(true);
+  const subscribe2 = useCallback((onStoreChange) => {
+    function handleIsOnline() {
+      isOnlineRef.current = true;
+      onStoreChange();
+    }
+    function handleIsOffline() {
+      isOnlineRef.current = false;
+      onStoreChange();
+    }
+    window.addEventListener("online", handleIsOnline);
+    window.addEventListener("offline", handleIsOffline);
+    return () => {
+      window.removeEventListener("online", handleIsOnline);
+      window.removeEventListener("offline", handleIsOffline);
+    };
+  }, []);
+  const getSnapshot2 = useCallback(() => {
+    return isOnlineRef.current;
+  }, []);
+  const isOnline = useSyncExternalStore2(subscribe2, getSnapshot2, getSnapshot2);
+  return isOnline;
+}
+
+// src/comments/lib/revalidation.ts
 var DEFAULT_ERROR_RETRY_INTERVAL = 5e3;
 var DEFAULT_MAX_ERROR_RETRY_COUNT = 5;
 var DEFAULT_DEDUPING_INTERVAL = 2e3;
 var timestamp = 0;
 function useRevalidateCache(manager, fetcher, options = {}) {
-  const isOnlineRef = useRef(true);
+  const isOnlineRef = useRef2(true);
   const {
     dedupingInterval = DEFAULT_DEDUPING_INTERVAL,
     errorRetryInterval = DEFAULT_ERROR_RETRY_INTERVAL,
     errorRetryCount = DEFAULT_MAX_ERROR_RETRY_COUNT
   } = options;
-  const _revalidateCache = useCallback(
+  const _revalidateCache = useCallback2(
     async ({
       shouldDedupe,
       retryCount = 0
@@ -189,7 +237,7 @@ function useRevalidateCache(manager, fetcher, options = {}) {
       window.removeEventListener("offline", handleIsOffline);
     };
   }, []);
-  const revalidateCache = useCallback(
+  const revalidateCache = useCallback2(
     ({ shouldDedupe }) => {
       return _revalidateCache({ shouldDedupe, retryCount: 0 });
     },
@@ -198,7 +246,7 @@ function useRevalidateCache(manager, fetcher, options = {}) {
   return revalidateCache;
 }
 function useMutate(manager, revalidateCache) {
-  const mutate = useCallback(
+  const mutate = useCallback2(
     async (data, options) => {
       const beforeMutationTimestamp = ++timestamp;
       manager.setMutation({
@@ -239,6 +287,8 @@ function useMutate(manager, revalidateCache) {
 // src/comments/CommentsRoom.tsx
 var THREAD_ID_PREFIX = "th";
 var COMMENT_ID_PREFIX = "cm";
+var POLLING_INTERVAL_REALTIME = 3e4;
+var POLLING_INTERVAL = 5e3;
 function createCommentsRoom(errorEventSource) {
   const store = createClientCacheStore();
   const FetcherContext = createContext(null);
@@ -275,6 +325,70 @@ function createCommentsRoom(errorEventSource) {
       return threads;
     }, [room, manager]);
     const revalidateCache = useRevalidateCache(manager, fetcher);
+    const status = useSyncExternalStore3(
+      room.events.status.subscribe,
+      room.getStatus,
+      room.getStatus
+    );
+    const isOnline = useIsOnline();
+    const isDocumentVisible = useIsDocumentVisible();
+    const refreshInterval = getPollingInterval(
+      isOnline,
+      isDocumentVisible,
+      status === "connected"
+    );
+    useEffect3(() => {
+      let revalidationTimerId;
+      function scheduleRevalidation() {
+        if (refreshInterval === 0)
+          return;
+        revalidationTimerId = window.setTimeout(() => {
+          if (isOnline && isDocumentVisible && !manager.getError() && manager.getTotalReferenceCount() > 0) {
+            void revalidateCache({ shouldDedupe: true }).then(
+              scheduleRevalidation
+            );
+            return;
+          }
+          scheduleRevalidation();
+        }, refreshInterval);
+      }
+      scheduleRevalidation();
+      return () => {
+        window.clearTimeout(revalidationTimerId);
+      };
+    }, [
+      revalidateCache,
+      refreshInterval,
+      isOnline,
+      isDocumentVisible,
+      manager
+    ]);
+    useEffect3(() => {
+      function handleIsOnline() {
+        if (isDocumentVisible) {
+          void revalidateCache({ shouldDedupe: true });
+        }
+      }
+      window.addEventListener("online", handleIsOnline);
+      return () => {
+        window.removeEventListener("online", handleIsOnline);
+      };
+    }, [revalidateCache, isDocumentVisible]);
+    useEffect3(() => {
+      function handleVisibilityChange() {
+        const isVisible = document.visibilityState === "visible";
+        if (isVisible && isOnline) {
+          void revalidateCache({ shouldDedupe: true });
+        }
+      }
+      document.addEventListener("visibilitychange", handleVisibilityChange);
+      return () => {
+        document.removeEventListener(
+          "visibilitychange",
+          handleVisibilityChange
+        );
+      };
+    }, [revalidateCache, isOnline]);
     useEffect3(() => {
       const unsubscribe = room.events.comments.subscribe(() => {
         void revalidateCache({ shouldDedupe: false });
@@ -338,38 +452,9 @@ function createCommentsRoom(errorEventSource) {
       return () => {
         manager.decrementReferenceCount(key);
       };
-    });
-    return useSyncExternalStoreWithSelector(
-      store.subscribe,
-      () => store.getThreads(),
-      () => store.getThreads(),
-      (state) => {
-        const isLoading = useThreadsRevalidationManager.getIsLoading();
-        if (isLoading) {
-          return {
-            isLoading: true
-          };
-        }
-        const options2 = useThreadsRevalidationManager.getOptions();
-        const error = useThreadsRevalidationManager.getError();
-        const filtered = state.filter((thread) => {
-          if (thread.roomId !== room.id)
-            return false;
-          const query = options2.query ?? {};
-          for (const key2 in query.metadata) {
-            if (thread.metadata[key2] !== query.metadata[key2]) {
-              return false;
-            }
-          }
-          return true;
-        });
-        return {
-          isLoading: false,
-          threads: filtered,
-          error
-        };
-      }
-    );
+    }, [manager, key]);
+    const cache = _useThreads(room, options);
+    return cache;
   }
   function useThreadsSuspense(room, options = { query: { metadata: {} } }) {
     const key = useMemo(() => stringify(options), [options]);
@@ -397,8 +482,29 @@ function createCommentsRoom(errorEventSource) {
       return () => {
         manager.decrementReferenceCount(key);
       };
-    });
-    const cache = useSyncExternalStoreWithSelector(
+    }, [manager, key]);
+    const cache = _useThreads(room, options);
+    if (cache.error) {
+      throw cache.error;
+    }
+    if (cache.isLoading || !cache.threads) {
+      throw revalidateCache({
+        shouldDedupe: true
+      });
+    }
+    return {
+      isLoading: false,
+      threads: cache.threads,
+      error: cache.error
+    };
+  }
+  function _useThreads(room, options) {
+    const manager = useRoomManager();
+    const useThreadsRevalidationManager = getUseThreadsRevalidationManager(
+      options,
+      manager
+    );
+    return useSyncExternalStoreWithSelector(
       store.subscribe,
       () => store.getThreads(),
       () => store.getThreads(),
@@ -415,8 +521,8 @@ function createCommentsRoom(errorEventSource) {
           if (thread.roomId !== room.id)
             return false;
           const query = options2.query ?? {};
-          for (const key2 in query.metadata) {
-            if (thread.metadata[key2] !== query.metadata[key2]) {
+          for (const key in query.metadata) {
+            if (thread.metadata[key] !== query.metadata[key]) {
               return false;
             }
           }
@@ -429,26 +535,13 @@ function createCommentsRoom(errorEventSource) {
         };
       }
     );
-    if (cache.error) {
-      throw cache.error;
-    }
-    if (cache.isLoading || !cache.threads) {
-      throw revalidateCache({
-        shouldDedupe: true
-      });
-    }
-    return {
-      isLoading: false,
-      threads: cache.threads,
-      error: cache.error
-    };
   }
   function useEditThreadMetadata(room) {
     const manager = useRoomManager();
     const fetcher = useThreadsFetcher();
     const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const editThreadMetadata = useCallback2(
+    const editThreadMetadata = useCallback3(
       (options) => {
         const threadId = options.threadId;
         const metadata = "metadata" in options ? options.metadata : {};
@@ -487,13 +580,13 @@ function createCommentsRoom(errorEventSource) {
     const fetcher = useThreadsFetcher();
     const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const createThread = useCallback2(
+    const createThread = useCallback3(
       (options) => {
         const body = options.body;
         const metadata = "metadata" in options ? options.metadata : {};
         const threads = getThreads(manager);
-        const threadId = createOptimisticId(THREAD_ID_PREFIX);
-        const commentId = createOptimisticId(COMMENT_ID_PREFIX);
+        const threadId = createThreadId();
+        const commentId = createCommentId();
         const now = /* @__PURE__ */ new Date();
         const newComment = {
           id: commentId,
@@ -541,10 +634,10 @@ function createCommentsRoom(errorEventSource) {
     const fetcher = useThreadsFetcher();
     const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const createComment = useCallback2(
+    const createComment = useCallback3(
       ({ threadId, body }) => {
         const threads = getThreads(manager);
-        const commentId = createOptimisticId(COMMENT_ID_PREFIX);
+        const commentId = createCommentId();
         const now = /* @__PURE__ */ new Date();
         const comment = {
           id: commentId,
@@ -589,7 +682,7 @@ function createCommentsRoom(errorEventSource) {
     const fetcher = useThreadsFetcher();
     const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const editComment = useCallback2(
+    const editComment = useCallback3(
       ({ threadId, commentId, body }) => {
         const threads = getThreads(manager);
         const now = /* @__PURE__ */ new Date();
@@ -631,7 +724,7 @@ function createCommentsRoom(errorEventSource) {
     const fetcher = useThreadsFetcher();
     const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const deleteComment = useCallback2(
+    const deleteComment = useCallback3(
       ({ threadId, commentId }) => {
         const threads = getThreads(manager);
         const now = /* @__PURE__ */ new Date();
@@ -682,7 +775,7 @@ function createCommentsRoom(errorEventSource) {
     const fetcher = useThreadsFetcher();
     const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const createComment = useCallback2(
+    const createComment = useCallback3(
       ({ threadId, commentId, emoji }) => {
         const threads = getThreads(manager);
         const now = /* @__PURE__ */ new Date();
@@ -747,7 +840,7 @@ function createCommentsRoom(errorEventSource) {
     const fetcher = useThreadsFetcher();
     const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const createComment = useCallback2(
+    const createComment = useCallback3(
       ({ threadId, commentId, emoji }) => {
         const threads = getThreads(manager);
         const userId = getCurrentUserId(room);
@@ -821,6 +914,12 @@ function createCommentsRoom(errorEventSource) {
 function createOptimisticId(prefix) {
   return `${prefix}_${nanoid()}`;
 }
+function createThreadId() {
+  return createOptimisticId(THREAD_ID_PREFIX);
+}
+function createCommentId() {
+  return createOptimisticId(COMMENT_ID_PREFIX);
+}
 function getCurrentUserId(room) {
   const self = room.getSelf();
   if (self === null || self.id === void 0) {
@@ -897,6 +996,12 @@ function createRoomRevalidationManager(roomId, {
     setRevalidationmanager(key, manager) {
       revalidationManagerByOptions.set(key, manager);
     },
+    getTotalReferenceCount() {
+      return Array.from(referenceCountByOptions.values()).reduce(
+        (acc, count) => acc + count,
+        0
+      );
+    },
     incrementReferenceCount(key) {
       const count = referenceCountByOptions.get(key) ?? 0;
       referenceCountByOptions.set(key, count + 1);
@@ -930,7 +1035,6 @@ function createUseThreadsRevalidationManager(options, manager) {
   let isLoading = true;
   let request;
   let error;
-  const errorEventSource = makeEventSource();
   return {
     // Cache
     getCache() {
@@ -959,7 +1063,9 @@ function createUseThreadsRevalidationManager(options, manager) {
     },
     setError(err) {
       error = err;
-      errorEventSource.notify(err);
+      isLoading = false;
+      const cache = manager.getCache();
+      manager.setCache(cache);
     },
     // Mutation
     getMutation() {
@@ -979,12 +1085,19 @@ function createUseThreadsRevalidationManager(options, manager) {
     }
   };
 }
+function getPollingInterval(isBrowserOnline, isDocumentVisible, isRoomConnected) {
+  if (!isBrowserOnline || !isDocumentVisible)
+    return;
+  if (isRoomConnected)
+    return POLLING_INTERVAL_REALTIME;
+  return POLLING_INTERVAL;
+}
 
 // src/comments/lib/use-debounce.ts
-import { useEffect as useEffect4, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState2 } from "react";
 var DEFAULT_DELAY = 500;
 function useDebounce(value, delay = DEFAULT_DELAY) {
-  const timeout = useRef2();
+  const timeout = useRef3();
   const [debouncedValue, setDebouncedValue] = useState2(value);
   useEffect4(() => {
     if (delay === false) {
@@ -1005,8 +1118,8 @@ function useDebounce(value, delay = DEFAULT_DELAY) {
 }
 
 // src/lib/use-async-cache.ts
-import { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef3 } from "react";
-import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
+import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef4 } from "react";
+import { useSyncExternalStore as useSyncExternalStore4 } from "use-sync-external-store/shim/index.js";
 
 // src/lib/use-initial.ts
 import { useState as useState3 } from "react";
@@ -1032,17 +1145,17 @@ function useAsyncCache(cache, key, options) {
     void cacheItem2.get();
     return cacheItem2;
   }, [cache, key]);
-  const subscribe = useCallback3(
+  const subscribe2 = useCallback4(
     (callback) => cacheItem?.subscribe(callback) ?? noop,
     [cacheItem]
   );
-  const getState = useCallback3(
+  const getState = useCallback4(
     () => cacheItem?.getState() ?? INITIAL_ASYNC_STATE,
     [cacheItem]
   );
-  const revalidate = useCallback3(() => cacheItem?.revalidate(), [cacheItem]);
-  const state = useSyncExternalStore(subscribe, getState, getState);
-  const previousData = useRef3();
+  const revalidate = useCallback4(() => cacheItem?.revalidate(), [cacheItem]);
+  const state = useSyncExternalStore4(subscribe2, getState, getState);
+  const previousData = useRef4();
   let data = state.data;
   useEffect5(() => {
     previousData.current = { key, data: state.data };
@@ -1083,9 +1196,9 @@ function useAsyncCache(cache, key, options) {
 }
 
 // src/lib/use-latest.ts
-import { useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useEffect as useEffect6, useRef as useRef5 } from "react";
 function useLatest(value) {
-  const ref = useRef4(value);
+  const ref = useRef5(value);
   useEffect6(() => {
     ref.current = value;
   }, [value]);
@@ -1121,7 +1234,7 @@ var missing_unstable_batchedUpdates = (reactVersion, roomId) => `We noticed you\
 
 Why? Please see https://liveblocks.io/docs/platform/troubleshooting#stale-props-zombie-child for more information`;
 var superfluous_unstable_batchedUpdates = "You don\u2019t need to pass unstable_batchedUpdates to RoomProvider anymore, since you\u2019re on React 18+ already.";
-function useSyncExternalStore2(s, gs, gss) {
+function useSyncExternalStore5(s, gs, gss) {
   return useSyncExternalStoreWithSelector2(s, gs, gss, identity);
 }
 var STABLE_EMPTY_LIST = Object.freeze([]);
@@ -1270,16 +1383,16 @@ function createRoomContext(client, options) {
   }
   function useStatus() {
     const room = useRoom();
-    const subscribe = room.events.status.subscribe;
-    const getSnapshot = room.getStatus;
+    const subscribe2 = room.events.status.subscribe;
+    const getSnapshot2 = room.getStatus;
     const getServerSnapshot = room.getStatus;
-    return useSyncExternalStore2(subscribe, getSnapshot, getServerSnapshot);
+    return useSyncExternalStore5(subscribe2, getSnapshot2, getServerSnapshot);
   }
   function useMyPresence() {
     const room = useRoom();
-    const subscribe = room.events.myPresence.subscribe;
-    const getSnapshot = room.getPresence;
-    const presence = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+    const subscribe2 = room.events.myPresence.subscribe;
+    const getSnapshot2 = room.getPresence;
+    const presence = useSyncExternalStore5(subscribe2, getSnapshot2, getSnapshot2);
     const setPresence = room.updatePresence;
     return [presence, setPresence];
   }
@@ -1288,12 +1401,12 @@ function createRoomContext(client, options) {
   }
   function useOthers(selector, isEqual) {
     const room = useRoom();
-    const subscribe = room.events.others.subscribe;
-    const getSnapshot = room.getOthers;
+    const subscribe2 = room.events.others.subscribe;
+    const getSnapshot2 = room.getOthers;
     const getServerSnapshot = alwaysEmptyList;
     return useSyncExternalStoreWithSelector2(
-      subscribe,
-      getSnapshot,
+      subscribe2,
+      getSnapshot2,
       getServerSnapshot,
       selector ?? identity,
       isEqual
@@ -1397,8 +1510,8 @@ function createRoomContext(client, options) {
   }
   function useSelf(maybeSelector, isEqual) {
     const room = useRoom();
-    const subscribe = room.events.self.subscribe;
-    const getSnapshot = room.getSelf;
+    const subscribe2 = room.events.self.subscribe;
+    const getSnapshot2 = room.getSelf;
     const selector = maybeSelector ?? identity;
     const wrappedSelector = React3.useCallback(
       (me) => me !== null ? selector(me) : null,
@@ -1406,8 +1519,8 @@ function createRoomContext(client, options) {
     );
     const getServerSnapshot = alwaysNull;
     return useSyncExternalStoreWithSelector2(
-      subscribe,
-      getSnapshot,
+      subscribe2,
+      getSnapshot2,
       getServerSnapshot,
       wrappedSelector,
       isEqual
@@ -1415,10 +1528,10 @@ function createRoomContext(client, options) {
   }
   function useMutableStorageRoot() {
     const room = useRoom();
-    const subscribe = room.events.storageDidLoad.subscribeOnce;
-    const getSnapshot = room.getStorageSnapshot;
+    const subscribe2 = room.events.storageDidLoad.subscribeOnce;
+    const getSnapshot2 = room.getStorageSnapshot;
     const getServerSnapshot = alwaysNull;
-    return useSyncExternalStore2(subscribe, getSnapshot, getServerSnapshot);
+    return useSyncExternalStore5(subscribe2, getSnapshot2, getServerSnapshot);
   }
   function useStorageRoot() {
     return [useMutableStorageRoot()];
@@ -1434,15 +1547,15 @@ function createRoomContext(client, options) {
   }
   function useCanUndo() {
     const room = useRoom();
-    const subscribe = room.events.history.subscribe;
+    const subscribe2 = room.events.history.subscribe;
     const canUndo = room.history.canUndo;
-    return useSyncExternalStore2(subscribe, canUndo, canUndo);
+    return useSyncExternalStore5(subscribe2, canUndo, canUndo);
   }
   function useCanRedo() {
     const room = useRoom();
-    const subscribe = room.events.history.subscribe;
+    const subscribe2 = room.events.history.subscribe;
     const canRedo = room.history.canRedo;
-    return useSyncExternalStore2(subscribe, canRedo, canRedo);
+    return useSyncExternalStore5(subscribe2, canRedo, canRedo);
   }
   function useBatch() {
     return useRoom().batch;
@@ -1491,11 +1604,11 @@ function createRoomContext(client, options) {
       (rootOrNull2) => rootOrNull2 !== null ? selector(rootOrNull2) : null,
       [selector]
     );
-    const subscribe = React3.useCallback(
+    const subscribe2 = React3.useCallback(
       (onStoreChange) => rootOrNull !== null ? room.subscribe(rootOrNull, onStoreChange, { isDeep: true }) : noop2,
       [room, rootOrNull]
     );
-    const getSnapshot = React3.useCallback(() => {
+    const getSnapshot2 = React3.useCallback(() => {
       if (rootOrNull === null) {
         return null;
       } else {
@@ -1506,8 +1619,8 @@ function createRoomContext(client, options) {
     }, [rootOrNull]);
     const getServerSnapshot = alwaysNull;
     return useSyncExternalStoreWithSelector2(
-      subscribe,
-      getSnapshot,
+      subscribe2,
+      getSnapshot2,
       getServerSnapshot,
       wrappedSelector,
       isEqual