@liveblocks/react 1.9.3 → 1.9.4

package/dist/index.js

@@ -5,7 +5,7 @@ var _core = require('@liveblocks/core');
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/react";
-var PKG_VERSION = "1.9.3";
+var PKG_VERSION = "1.9.4";
 var PKG_FORMAT = "cjs";
 
 // src/ClientSideSuspense.tsx
@@ -41,6 +41,7 @@ var _nanoid = require('nanoid');
 
 
 
+var _shim = require('use-sync-external-store/shim');
 
 
 // src/comments/errors.ts
@@ -103,6 +104,53 @@ var RemoveReactionError = class extends Error {
 
 // src/comments/lib/revalidation.ts
 
+
+// src/comments/lib/use-is-document-visible.ts
+var _indexjs = require('use-sync-external-store/shim/index.js');
+function useIsDocumentVisible() {
+  const isVisible = _indexjs.useSyncExternalStore.call(void 0, 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
+
+
+function useIsOnline() {
+  const isOnlineRef = _react.useRef.call(void 0, true);
+  const subscribe2 = _react.useCallback.call(void 0, (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 = _react.useCallback.call(void 0, () => {
+    return isOnlineRef.current;
+  }, []);
+  const isOnline = _indexjs.useSyncExternalStore.call(void 0, 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;
@@ -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 = _react.createContext.call(void 0, null);
@@ -275,6 +325,70 @@ function createCommentsRoom(errorEventSource) {
       return threads;
     }, [room, manager]);
     const revalidateCache = useRevalidateCache(manager, fetcher);
+    const status = _shim.useSyncExternalStore.call(void 0, 
+      room.events.status.subscribe,
+      room.getStatus,
+      room.getStatus
+    );
+    const isOnline = useIsOnline();
+    const isDocumentVisible = useIsDocumentVisible();
+    const refreshInterval = getPollingInterval(
+      isOnline,
+      isDocumentVisible,
+      status === "connected"
+    );
+    _react.useEffect.call(void 0, () => {
+      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
+    ]);
+    _react.useEffect.call(void 0, () => {
+      function handleIsOnline() {
+        if (isDocumentVisible) {
+          void revalidateCache({ shouldDedupe: true });
+        }
+      }
+      window.addEventListener("online", handleIsOnline);
+      return () => {
+        window.removeEventListener("online", handleIsOnline);
+      };
+    }, [revalidateCache, isDocumentVisible]);
+    _react.useEffect.call(void 0, () => {
+      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]);
     _react.useEffect.call(void 0, () => {
       const unsubscribe = room.events.comments.subscribe(() => {
         void revalidateCache({ shouldDedupe: false });
@@ -338,38 +452,9 @@ function createCommentsRoom(errorEventSource) {
       return () => {
         manager.decrementReferenceCount(key);
       };
-    });
-    return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
-      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 = _nullishCoalesce(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 = _react.useMemo.call(void 0, () => _core.stringify.call(void 0, options), [options]);
@@ -397,8 +482,29 @@ function createCommentsRoom(errorEventSource) {
       return () => {
         manager.decrementReferenceCount(key);
       };
-    });
-    const cache = _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
+    }, [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 _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
       store.subscribe,
       () => store.getThreads(),
       () => store.getThreads(),
@@ -415,8 +521,8 @@ function createCommentsRoom(errorEventSource) {
           if (thread.roomId !== room.id)
             return false;
           const query = _nullishCoalesce(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,19 +535,6 @@ 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();
@@ -492,8 +585,8 @@ function createCommentsRoom(errorEventSource) {
         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,
@@ -544,7 +637,7 @@ function createCommentsRoom(errorEventSource) {
     const createComment = _react.useCallback.call(void 0, 
       ({ threadId, body }) => {
         const threads = getThreads(manager);
-        const commentId = createOptimisticId(COMMENT_ID_PREFIX);
+        const commentId = createCommentId();
         const now = /* @__PURE__ */ new Date();
         const comment = {
           id: commentId,
@@ -821,6 +914,12 @@ function createCommentsRoom(errorEventSource) {
 function createOptimisticId(prefix) {
   return `${prefix}_${_nanoid.nanoid.call(void 0, )}`;
 }
+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 = _nullishCoalesce(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 = _core.makeEventSource.call(void 0, );
   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,6 +1085,13 @@ 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
 
@@ -1006,7 +1119,7 @@ function useDebounce(value, delay = DEFAULT_DELAY) {
 
 // src/lib/use-async-cache.ts
 
-var _indexjs = require('use-sync-external-store/shim/index.js');
+
 
 // src/lib/use-initial.ts
 
@@ -1032,7 +1145,7 @@ function useAsyncCache(cache, key, options) {
     void cacheItem2.get();
     return cacheItem2;
   }, [cache, key]);
-  const subscribe = _react.useCallback.call(void 0, 
+  const subscribe2 = _react.useCallback.call(void 0, 
     (callback) => _nullishCoalesce(_optionalChain([cacheItem, 'optionalAccess', _4 => _4.subscribe, 'call', _5 => _5(callback)]), () => ( noop)),
     [cacheItem]
   );
@@ -1041,7 +1154,7 @@ function useAsyncCache(cache, key, options) {
     [cacheItem]
   );
   const revalidate = _react.useCallback.call(void 0, () => _optionalChain([cacheItem, 'optionalAccess', _8 => _8.revalidate, 'call', _9 => _9()]), [cacheItem]);
-  const state = _indexjs.useSyncExternalStore.call(void 0, subscribe, getState, getState);
+  const state = _indexjs.useSyncExternalStore.call(void 0, subscribe2, getState, getState);
   const previousData = _react.useRef.call(void 0, );
   let data = state.data;
   _react.useEffect.call(void 0, () => {
@@ -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 _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 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 _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
-      subscribe,
-      getSnapshot,
+      subscribe2,
+      getSnapshot2,
       getServerSnapshot,
       _nullishCoalesce(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 = _nullishCoalesce(maybeSelector, () => ( identity));
     const wrappedSelector = React3.useCallback(
       (me) => me !== null ? selector(me) : null,
@@ -1406,8 +1519,8 @@ function createRoomContext(client, options) {
     );
     const getServerSnapshot = alwaysNull;
     return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
-      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 _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
-      subscribe,
-      getSnapshot,
+      subscribe2,
+      getSnapshot2,
       getServerSnapshot,
       wrappedSelector,
       isEqual