@liveblocks/react 1.9.2 → 1.9.3

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.2";
+var PKG_VERSION = "1.9.3";
 var PKG_FORMAT = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -29,20 +29,19 @@ import {
   stringify as stringify2
 } from "@liveblocks/core";
 import * as React3 from "react";
-import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector.js";
+import { useSyncExternalStoreWithSelector as useSyncExternalStoreWithSelector2 } from "use-sync-external-store/shim/with-selector.js";
 
 // src/comments/CommentsRoom.tsx
 import { CommentsApiError, makeEventSource, stringify } from "@liveblocks/core";
 import { nanoid } from "nanoid";
 import React2, {
   createContext,
-  useCallback as useCallback3,
+  useCallback as useCallback2,
   useContext,
   useEffect as useEffect3,
-  useMemo,
-  useRef as useRef3
+  useMemo
 } from "react";
-import { useSyncExternalStore as useSyncExternalStore3 } from "use-sync-external-store/shim/index.js";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector.js";
 
 // src/comments/errors.ts
 var CreateThreadError = class extends Error {
@@ -103,66 +102,19 @@ var RemoveReactionError = class extends Error {
 };
 
 // src/comments/lib/revalidation.ts
-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
+import { useCallback, useEffect as useEffect2, useRef } from "react";
 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 = useRef2(true);
+  const isOnlineRef = useRef(true);
   const {
     dedupingInterval = DEFAULT_DEDUPING_INTERVAL,
     errorRetryInterval = DEFAULT_ERROR_RETRY_INTERVAL,
     errorRetryCount = DEFAULT_MAX_ERROR_RETRY_COUNT
   } = options;
-  const _revalidateCache = useCallback2(
+  const _revalidateCache = useCallback(
     async ({
       shouldDedupe,
       retryCount = 0
@@ -237,7 +189,7 @@ function useRevalidateCache(manager, fetcher, options = {}) {
       window.removeEventListener("offline", handleIsOffline);
     };
   }, []);
-  const revalidateCache = useCallback2(
+  const revalidateCache = useCallback(
     ({ shouldDedupe }) => {
       return _revalidateCache({ shouldDedupe, retryCount: 0 });
     },
@@ -246,7 +198,7 @@ function useRevalidateCache(manager, fetcher, options = {}) {
   return revalidateCache;
 }
 function useMutate(manager, revalidateCache) {
-  const mutate = useCallback2(
+  const mutate = useCallback(
     async (data, options) => {
       const beforeMutationTimestamp = ++timestamp;
       manager.setMutation({
@@ -283,122 +235,15 @@ function useMutate(manager, revalidateCache) {
   );
   return mutate;
 }
-function useAutomaticRevalidation(manager, revalidateCache, options = {}) {
-  const isOnline = useIsOnline();
-  const isDocumentVisible = useIsDocumentVisible();
-  const {
-    revalidateOnFocus = true,
-    revalidateOnReconnect = true,
-    refreshInterval = 0
-  } = options;
-  useEffect2(() => {
-    let revalidationTimerId;
-    function scheduleRevalidation() {
-      if (refreshInterval === 0)
-        return;
-      revalidationTimerId = window.setTimeout(() => {
-        if (isOnline && isDocumentVisible && !manager.getError()) {
-          void revalidateCache({ shouldDedupe: true }).then(
-            scheduleRevalidation
-          );
-          return;
-        }
-        scheduleRevalidation();
-      }, refreshInterval);
-    }
-    scheduleRevalidation();
-    return () => {
-      window.clearTimeout(revalidationTimerId);
-    };
-  }, [revalidateCache, refreshInterval, isOnline, isDocumentVisible, manager]);
-  useEffect2(() => {
-    function handleIsOnline() {
-      if (revalidateOnReconnect && isDocumentVisible) {
-        void revalidateCache({ shouldDedupe: true });
-      }
-    }
-    window.addEventListener("online", handleIsOnline);
-    return () => {
-      window.removeEventListener("online", handleIsOnline);
-    };
-  }, [revalidateCache, revalidateOnReconnect, isDocumentVisible]);
-  useEffect2(() => {
-    function handleVisibilityChange() {
-      const isVisible = document.visibilityState === "visible";
-      if (revalidateOnFocus && isVisible && isOnline) {
-        void revalidateCache({ shouldDedupe: true });
-      }
-    }
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () => {
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
-  }, [revalidateCache, revalidateOnFocus, isOnline]);
-}
 
 // src/comments/CommentsRoom.tsx
-var POLLING_INTERVAL_REALTIME = 3e4;
-var POLLING_INTERVAL = 5e3;
 var THREAD_ID_PREFIX = "th";
 var COMMENT_ID_PREFIX = "cm";
 function createCommentsRoom(errorEventSource) {
-  const manager = createThreadsCacheManager();
-  const filterOptions = /* @__PURE__ */ new Map();
-  const cacheStates = /* @__PURE__ */ new Map();
-  const revalidationManagers = /* @__PURE__ */ new Map();
-  function createThreadsRevalidationManager(key) {
-    let request;
-    let error;
-    return {
-      getCache() {
-        return void 0;
-      },
-      setCache(value) {
-        const cache = new Map(
-          (manager.getCache() ?? []).map((thread) => [thread.id, thread])
-        );
-        for (const thread of value) {
-          cache.set(thread.id, thread);
-        }
-        setCache(key, {
-          isLoading: false,
-          data: value
-        });
-        manager.setCache(Array.from(cache.values()));
-      },
-      // Request
-      getRequest() {
-        return request;
-      },
-      setRequest(value) {
-        request = value;
-      },
-      // Error
-      getError() {
-        return error;
-      },
-      setError(err) {
-        error = err;
-        manager.setError(err);
-      },
-      // Mutation
-      getMutation() {
-        return void 0;
-      },
-      setMutation() {
-      }
-    };
-  }
-  const eventSource = makeEventSource();
-  const subscribe2 = eventSource.subscribe;
-  const getCache = (key) => cacheStates.get(key);
-  const setCache = (key, value) => {
-    cacheStates.set(key, value);
-  };
+  const store = createClientCacheStore();
   const FetcherContext = createContext(null);
-  const CommentsEventSubscriptionContext = createContext(() => {
-  });
-  function getThreads() {
+  const RoomManagerContext = createContext(null);
+  function getThreads(manager) {
     const threads = manager.getCache();
     if (!threads) {
       throw new Error(
@@ -411,84 +256,54 @@ function createCommentsRoom(errorEventSource) {
     room,
     children
   }) {
-    const commentsEventSubscribersCountRef = useRef3(0);
-    const commentsEventDisposerRef = useRef3();
-    const fetcher = useCallback3(async () => {
+    const manager = useMemo(() => {
+      return createRoomRevalidationManager(room.id, {
+        getCache: store.getThreads,
+        setCache: store.setThreads
+      });
+    }, [room.id]);
+    const fetcher = React2.useCallback(async () => {
+      const options = manager.getRevalidationManagers().filter(([key]) => manager.getReferenceCount(key) > 0).map(([_, manager2]) => manager2.getOptions());
       const responses = await Promise.all(
-        Array.from(filterOptions.values()).map((info) => {
-          return room.getThreads(info.options);
+        options.map(async (option) => {
+          return await room.getThreads(option);
         })
       );
       const threads = Array.from(
         new Map(responses.flat().map((thread) => [thread.id, thread])).values()
       );
       return threads;
-    }, [room]);
+    }, [room, manager]);
     const revalidateCache = useRevalidateCache(manager, fetcher);
-    const subscribeToCommentEvents = useCallback3(() => {
-      const commentsEventSubscribersCount = commentsEventSubscribersCountRef.current;
-      if (commentsEventSubscribersCount === 0) {
-        const unsubscribe = room.events.comments.subscribe(() => {
-          void revalidateCache({ shouldDedupe: true });
-        });
-        commentsEventDisposerRef.current = unsubscribe;
-      }
-      commentsEventSubscribersCountRef.current = commentsEventSubscribersCount + 1;
-      return () => {
-        commentsEventSubscribersCountRef.current = commentsEventSubscribersCountRef.current - 1;
-        if (commentsEventSubscribersCountRef.current > 0)
-          return;
-        commentsEventDisposerRef.current?.();
-        commentsEventDisposerRef.current = void 0;
-      };
-    }, [revalidateCache, room]);
     useEffect3(() => {
-      const unsubscribe = manager.subscribe("cache", (threads) => {
-        for (const [key, info] of filterOptions.entries()) {
-          const filtered = threads.filter((thread) => {
-            const query = info.options.query;
-            if (!query)
-              return true;
-            for (const key2 in query.metadata) {
-              if (thread.metadata[key2] !== query.metadata[key2]) {
-                return false;
-              }
-            }
-            return true;
-          });
-          setCache(key, {
-            isLoading: false,
-            data: filtered
-          });
-        }
-        for (const [key] of cacheStates.entries()) {
-          if (filterOptions.has(key))
-            continue;
-          cacheStates.delete(key);
-        }
-        eventSource.notify(threads);
+      const unsubscribe = room.events.comments.subscribe(() => {
+        void revalidateCache({ shouldDedupe: false });
       });
       return () => {
         unsubscribe();
       };
-    }, []);
-    useEffect3(() => {
-      const unsubscribe = manager.subscribe("error", (error) => {
-        for (const state of cacheStates.values()) {
-          state.error = error;
-        }
-      });
-      return () => {
-        unsubscribe();
-      };
-    }, []);
-    return /* @__PURE__ */ React2.createElement(FetcherContext.Provider, { value: fetcher }, /* @__PURE__ */ React2.createElement(
-      CommentsEventSubscriptionContext.Provider,
-      {
-        value: subscribeToCommentEvents
-      },
-      children
-    ));
+    }, [room, revalidateCache]);
+    return /* @__PURE__ */ React2.createElement(FetcherContext.Provider, { value: fetcher }, /* @__PURE__ */ React2.createElement(RoomManagerContext.Provider, { value: manager }, children));
+  }
+  function useRoomManager() {
+    const manager = useContext(RoomManagerContext);
+    if (manager === null) {
+      throw new Error("CommentsRoomProvider is missing from the React tree.");
+    }
+    return manager;
+  }
+  function getUseThreadsRevalidationManager(options, roomManager) {
+    const key = stringify(options);
+    const revalidationManager = roomManager.getRevalidationManager(key);
+    if (!revalidationManager) {
+      const useThreadsRevalidationManager = createUseThreadsRevalidationManager(
+        options,
+        roomManager
+      );
+      roomManager.setRevalidationmanager(key, useThreadsRevalidationManager);
+      return useThreadsRevalidationManager;
+    }
+    return revalidationManager;
   }
   function useThreadsFetcher() {
     const fetcher = useContext(FetcherContext);
@@ -497,156 +312,147 @@ function createCommentsRoom(errorEventSource) {
     }
     return fetcher;
   }
-  function _useThreads(room, key) {
-    const fetcher = useThreadsFetcher();
-    const revalidateCache = useRevalidateCache(manager, fetcher);
-    const status = useSyncExternalStore3(
-      room.events.status.subscribe,
-      room.getStatus,
-      room.getStatus
-    );
-    const isOnline = useIsOnline();
-    const isDocumentVisible = useIsDocumentVisible();
-    const subscribeToCommentEvents = useContext(
-      CommentsEventSubscriptionContext
-    );
-    const interval = getPollingInterval(
-      isOnline,
-      isDocumentVisible,
-      status === "connected"
-    );
-    useAutomaticRevalidation(manager, revalidateCache, {
-      revalidateOnFocus: true,
-      revalidateOnReconnect: true,
-      refreshInterval: interval
-    });
-    useEffect3(subscribeToCommentEvents, [subscribeToCommentEvents]);
-    const cache = useSyncExternalStore3(
-      subscribe2,
-      () => getCache(key),
-      () => getCache(key)
-    );
-    if (!cache || cache.isLoading) {
-      return { isLoading: true };
-    }
-    return {
-      isLoading: cache.isLoading,
-      threads: cache.data || [],
-      error: cache.error
-    };
-  }
   function useThreads(room, options = { query: { metadata: {} } }) {
     const key = useMemo(() => stringify(options), [options]);
-    let revalidationManager = revalidationManagers.get(key);
-    if (!revalidationManager) {
-      revalidationManager = createThreadsRevalidationManager(key);
-      revalidationManagers.set(key, revalidationManager);
-    }
-    const fetcher = useCallback3(
+    const manager = useRoomManager();
+    const useThreadsRevalidationManager = getUseThreadsRevalidationManager(
+      options,
+      manager
+    );
+    const fetcher = React2.useCallback(
       () => {
         return room.getThreads(options);
       },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [key]
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- The missing dependency is `options` but `key` and `normalized` are analogous, so we only include `key` as dependency. This helps minimize the number of re-renders as `options` can change on each render
+      [key, room]
     );
-    const revalidateCache = useRevalidateCache(revalidationManager, fetcher);
-    useEffect3(
-      () => {
-        const info = filterOptions.get(key);
-        if (info) {
-          info.count += 1;
-        } else {
-          filterOptions.set(key, {
-            options,
-            count: 1
-          });
-          cacheStates.set(key, { isLoading: true });
-        }
-        return () => {
-          const info2 = filterOptions.get(key);
-          if (!info2)
-            return;
-          info2.count -= 1;
-          if (info2.count > 0)
-            return;
-          filterOptions.delete(key);
-        };
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [key]
+    const revalidateCache = useRevalidateCache(
+      useThreadsRevalidationManager,
+      fetcher
     );
     useEffect3(() => {
       void revalidateCache({ shouldDedupe: true });
     }, [revalidateCache]);
-    return _useThreads(room, key);
+    useEffect3(() => {
+      manager.incrementReferenceCount(key);
+      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
+        };
+      }
+    );
   }
-  function useThreadsSuspense(room, options = {}) {
+  function useThreadsSuspense(room, options = { query: { metadata: {} } }) {
     const key = useMemo(() => stringify(options), [options]);
-    let revalidationManager = revalidationManagers.get(key);
-    if (!revalidationManager) {
-      revalidationManager = createThreadsRevalidationManager(key);
-      revalidationManagers.set(key, revalidationManager);
-    }
-    const fetcher = useCallback3(
+    const manager = useRoomManager();
+    const useThreadsRevalidationManager = getUseThreadsRevalidationManager(
+      options,
+      manager
+    );
+    const fetcher = React2.useCallback(
       () => {
         return room.getThreads(options);
       },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [key]
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- The missing dependency is `options` but `key` and `normalized` are analogous, so we only include `key` as dependency. This helps minimize the number of re-renders as `options` can change on each render
+      [key, room]
     );
-    const info = filterOptions.get(key);
-    if (!info) {
-      filterOptions.set(key, {
-        options,
-        count: 0
-      });
-      cacheStates.set(key, { isLoading: true });
-    }
-    const revalidateCache = useRevalidateCache(revalidationManager, fetcher);
-    useEffect3(
-      () => {
-        const info2 = filterOptions.get(key);
-        if (info2) {
-          info2.count += 1;
-        } else {
-          filterOptions.set(key, {
-            options,
-            count: 1
-          });
+    const revalidateCache = useRevalidateCache(
+      useThreadsRevalidationManager,
+      fetcher
+    );
+    useEffect3(() => {
+      void revalidateCache({ shouldDedupe: true });
+    }, [revalidateCache]);
+    useEffect3(() => {
+      manager.incrementReferenceCount(key);
+      return () => {
+        manager.decrementReferenceCount(key);
+      };
+    });
+    const cache = useSyncExternalStoreWithSelector(
+      store.subscribe,
+      () => store.getThreads(),
+      () => store.getThreads(),
+      (state) => {
+        const isLoading = useThreadsRevalidationManager.getIsLoading();
+        if (isLoading) {
+          return {
+            isLoading: true
+          };
         }
-        return () => {
-          const info3 = filterOptions.get(key);
-          if (!info3)
-            return;
-          info3.count -= 1;
-          if (info3.count > 0)
-            return;
-          filterOptions.delete(key);
+        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
         };
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [key]
+      }
     );
-    const cache = _useThreads(room, key);
     if (cache.error) {
       throw cache.error;
     }
     if (cache.isLoading || !cache.threads) {
-      throw revalidateCache({ shouldDedupe: true });
+      throw revalidateCache({
+        shouldDedupe: true
+      });
     }
     return {
+      isLoading: false,
       threads: cache.threads,
-      isLoading: false
+      error: cache.error
     };
   }
   function useEditThreadMetadata(room) {
-    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const manager = useRoomManager();
+    const fetcher = useThreadsFetcher();
+    const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const editThreadMetadata = useCallback3(
+    const editThreadMetadata = useCallback2(
       (options) => {
         const threadId = options.threadId;
         const metadata = "metadata" in options ? options.metadata : {};
-        const threads = getThreads();
+        const threads = getThreads(manager);
         const optimisticData = threads.map(
           (thread) => thread.id === threadId ? {
             ...thread,
@@ -672,19 +478,20 @@ function createCommentsRoom(errorEventSource) {
           );
         });
       },
-      [room, mutate]
+      [room, mutate, manager]
     );
     return editThreadMetadata;
   }
   function useCreateThread(room) {
+    const manager = useRoomManager();
     const fetcher = useThreadsFetcher();
     const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const createThread = useCallback3(
+    const createThread = useCallback2(
       (options) => {
         const body = options.body;
         const metadata = "metadata" in options ? options.metadata : {};
-        const threads = getThreads();
+        const threads = getThreads(manager);
         const threadId = createOptimisticId(THREAD_ID_PREFIX);
         const commentId = createOptimisticId(COMMENT_ID_PREFIX);
         const now = /* @__PURE__ */ new Date();
@@ -725,17 +532,18 @@ function createCommentsRoom(errorEventSource) {
         });
         return newThread;
       },
-      [room, mutate]
+      [room, mutate, manager]
     );
     return createThread;
   }
   function useCreateComment(room) {
+    const manager = useRoomManager();
     const fetcher = useThreadsFetcher();
     const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const createComment = useCallback3(
+    const createComment = useCallback2(
       ({ threadId, body }) => {
-        const threads = getThreads();
+        const threads = getThreads(manager);
         const commentId = createOptimisticId(COMMENT_ID_PREFIX);
         const now = /* @__PURE__ */ new Date();
         const comment = {
@@ -772,16 +580,18 @@ function createCommentsRoom(errorEventSource) {
         });
         return comment;
       },
-      [room, mutate]
+      [room, mutate, manager]
     );
     return createComment;
   }
   function useEditComment(room) {
-    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const manager = useRoomManager();
+    const fetcher = useThreadsFetcher();
+    const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const editComment = useCallback3(
+    const editComment = useCallback2(
       ({ threadId, commentId, body }) => {
-        const threads = getThreads();
+        const threads = getThreads(manager);
         const now = /* @__PURE__ */ new Date();
         const optimisticData = threads.map(
           (thread) => thread.id === threadId ? {
@@ -812,16 +622,18 @@ function createCommentsRoom(errorEventSource) {
           );
         });
       },
-      [room, mutate]
+      [room, mutate, manager]
     );
     return editComment;
   }
   function useDeleteComment(room) {
-    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const manager = useRoomManager();
+    const fetcher = useThreadsFetcher();
+    const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const deleteComment = useCallback3(
+    const deleteComment = useCallback2(
       ({ threadId, commentId }) => {
-        const threads = getThreads();
+        const threads = getThreads(manager);
         const now = /* @__PURE__ */ new Date();
         const newThreads = [];
         for (const thread of threads) {
@@ -861,16 +673,18 @@ function createCommentsRoom(errorEventSource) {
           );
         });
       },
-      [room, mutate]
+      [room, mutate, manager]
     );
     return deleteComment;
   }
   function useAddReaction(room) {
-    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const manager = useRoomManager();
+    const fetcher = useThreadsFetcher();
+    const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const createComment = useCallback3(
+    const createComment = useCallback2(
       ({ threadId, commentId, emoji }) => {
-        const threads = getThreads();
+        const threads = getThreads(manager);
         const now = /* @__PURE__ */ new Date();
         const userId = getCurrentUserId(room);
         const optimisticData = threads.map(
@@ -924,16 +738,18 @@ function createCommentsRoom(errorEventSource) {
           );
         });
       },
-      [room, mutate]
+      [room, mutate, manager]
     );
     return createComment;
   }
   function useRemoveReaction(room) {
-    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const manager = useRoomManager();
+    const fetcher = useThreadsFetcher();
+    const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
-    const createComment = useCallback3(
+    const createComment = useCallback2(
       ({ threadId, commentId, emoji }) => {
-        const threads = getThreads();
+        const threads = getThreads(manager);
         const userId = getCurrentUserId(room);
         const optimisticData = threads.map(
           (thread) => thread.id === threadId ? {
@@ -985,7 +801,7 @@ function createCommentsRoom(errorEventSource) {
           );
         });
       },
-      [room, mutate]
+      [room, mutate, manager]
     );
     return createComment;
   }
@@ -1021,31 +837,35 @@ function handleCommentsApiError(err) {
   }
   return new Error(message);
 }
-function getPollingInterval(isBrowserOnline, isDocumentVisible, isRoomConnected) {
-  if (!isBrowserOnline || !isDocumentVisible)
-    return;
-  if (isRoomConnected)
-    return POLLING_INTERVAL_REALTIME;
-  return POLLING_INTERVAL;
-}
-function createThreadsCacheManager() {
-  let cache;
+function createRoomRevalidationManager(roomId, {
+  getCache,
+  setCache
+}) {
   let request;
   let error;
   let mutation;
-  const cacheEventSource = makeEventSource();
-  const errorEventSource = makeEventSource();
+  const revalidationManagerByOptions = /* @__PURE__ */ new Map();
+  const referenceCountByOptions = /* @__PURE__ */ new Map();
   return {
     // Cache
     getCache() {
-      return cache;
+      const threads = getCache();
+      const filtered = threads.filter((thread) => thread.roomId === roomId);
+      return filtered;
     },
     setCache(value) {
+      for (const key of revalidationManagerByOptions.keys()) {
+        if (referenceCountByOptions.get(key) === 0) {
+          revalidationManagerByOptions.delete(key);
+          referenceCountByOptions.delete(key);
+        }
+      }
       const sorted = value.sort(
         (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
       );
-      cache = sorted;
-      cacheEventSource.notify(cache);
+      const threads = getCache();
+      const newThreads = threads.filter((thread) => thread.roomId !== roomId).concat(sorted);
+      setCache(newThreads);
     },
     // Request
     getRequest() {
@@ -1060,7 +880,6 @@ function createThreadsCacheManager() {
     },
     setError(err) {
       error = err;
-      errorEventSource.notify(err);
     },
     // Mutation
     getMutation() {
@@ -1069,25 +888,103 @@ function createThreadsCacheManager() {
     setMutation(info) {
       mutation = info;
     },
-    // Subscription
-    subscribe(type, callback) {
-      switch (type) {
-        case "cache":
-          return cacheEventSource.subscribe(
-            callback
-          );
-        case "error":
-          return errorEventSource.subscribe(callback);
+    getRevalidationManagers() {
+      return Array.from(revalidationManagerByOptions.entries());
+    },
+    getRevalidationManager(key) {
+      return revalidationManagerByOptions.get(key);
+    },
+    setRevalidationmanager(key, manager) {
+      revalidationManagerByOptions.set(key, manager);
+    },
+    incrementReferenceCount(key) {
+      const count = referenceCountByOptions.get(key) ?? 0;
+      referenceCountByOptions.set(key, count + 1);
+    },
+    decrementReferenceCount(key) {
+      const count = referenceCountByOptions.get(key) ?? 0;
+      referenceCountByOptions.set(key, count - 1);
+    },
+    getReferenceCount(key) {
+      return referenceCountByOptions.get(key) ?? 0;
+    }
+  };
+}
+function createClientCacheStore() {
+  let threads = [];
+  const threadsEventSource = makeEventSource();
+  return {
+    getThreads() {
+      return threads;
+    },
+    setThreads(value) {
+      threads = value;
+      threadsEventSource.notify(threads);
+    },
+    subscribe(callback) {
+      return threadsEventSource.subscribe(callback);
+    }
+  };
+}
+function createUseThreadsRevalidationManager(options, manager) {
+  let isLoading = true;
+  let request;
+  let error;
+  const errorEventSource = makeEventSource();
+  return {
+    // Cache
+    getCache() {
+      return void 0;
+    },
+    setCache(value) {
+      const cache = new Map(
+        (manager.getCache() ?? []).map((thread) => [thread.id, thread])
+      );
+      for (const thread of value) {
+        cache.set(thread.id, thread);
       }
+      manager.setCache(Array.from(cache.values()));
+      isLoading = false;
+    },
+    // Request
+    getRequest() {
+      return request;
+    },
+    setRequest(value) {
+      request = value;
+    },
+    // Error
+    getError() {
+      return error;
+    },
+    setError(err) {
+      error = err;
+      errorEventSource.notify(err);
+    },
+    // Mutation
+    getMutation() {
+      return void 0;
+    },
+    setMutation(_) {
+      return;
+    },
+    getOptions() {
+      return options;
+    },
+    getIsLoading() {
+      return isLoading;
+    },
+    setIsLoading(value) {
+      isLoading = value;
     }
   };
 }
 
 // src/comments/lib/use-debounce.ts
-import { useEffect as useEffect4, useRef as useRef4, useState as useState2 } from "react";
+import { useEffect as useEffect4, useRef as useRef2, useState as useState2 } from "react";
 var DEFAULT_DELAY = 500;
 function useDebounce(value, delay = DEFAULT_DELAY) {
-  const timeout = useRef4();
+  const timeout = useRef2();
   const [debouncedValue, setDebouncedValue] = useState2(value);
   useEffect4(() => {
     if (delay === false) {
@@ -1108,8 +1005,8 @@ function useDebounce(value, delay = DEFAULT_DELAY) {
 }
 
 // src/lib/use-async-cache.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef5 } from "react";
-import { useSyncExternalStore as useSyncExternalStore4 } from "use-sync-external-store/shim/index.js";
+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";
 
 // src/lib/use-initial.ts
 import { useState as useState3 } from "react";
@@ -1135,17 +1032,17 @@ function useAsyncCache(cache, key, options) {
     void cacheItem2.get();
     return cacheItem2;
   }, [cache, key]);
-  const subscribe2 = useCallback4(
+  const subscribe = useCallback3(
     (callback) => cacheItem?.subscribe(callback) ?? noop,
     [cacheItem]
   );
-  const getState = useCallback4(
+  const getState = useCallback3(
     () => cacheItem?.getState() ?? INITIAL_ASYNC_STATE,
     [cacheItem]
   );
-  const revalidate = useCallback4(() => cacheItem?.revalidate(), [cacheItem]);
-  const state = useSyncExternalStore4(subscribe2, getState, getState);
-  const previousData = useRef5();
+  const revalidate = useCallback3(() => cacheItem?.revalidate(), [cacheItem]);
+  const state = useSyncExternalStore(subscribe, getState, getState);
+  const previousData = useRef3();
   let data = state.data;
   useEffect5(() => {
     previousData.current = { key, data: state.data };
@@ -1186,9 +1083,9 @@ function useAsyncCache(cache, key, options) {
 }
 
 // src/lib/use-latest.ts
-import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { useEffect as useEffect6, useRef as useRef4 } from "react";
 function useLatest(value) {
-  const ref = useRef6(value);
+  const ref = useRef4(value);
   useEffect6(() => {
     ref.current = value;
   }, [value]);
@@ -1224,8 +1121,8 @@ 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 useSyncExternalStore5(s, gs, gss) {
-  return useSyncExternalStoreWithSelector(s, gs, gss, identity);
+function useSyncExternalStore2(s, gs, gss) {
+  return useSyncExternalStoreWithSelector2(s, gs, gss, identity);
 }
 var STABLE_EMPTY_LIST = Object.freeze([]);
 function alwaysEmptyList() {
@@ -1373,16 +1270,16 @@ function createRoomContext(client, options) {
   }
   function useStatus() {
     const room = useRoom();
-    const subscribe2 = room.events.status.subscribe;
-    const getSnapshot2 = room.getStatus;
+    const subscribe = room.events.status.subscribe;
+    const getSnapshot = room.getStatus;
     const getServerSnapshot = room.getStatus;
-    return useSyncExternalStore5(subscribe2, getSnapshot2, getServerSnapshot);
+    return useSyncExternalStore2(subscribe, getSnapshot, getServerSnapshot);
   }
   function useMyPresence() {
     const room = useRoom();
-    const subscribe2 = room.events.myPresence.subscribe;
-    const getSnapshot2 = room.getPresence;
-    const presence = useSyncExternalStore5(subscribe2, getSnapshot2, getSnapshot2);
+    const subscribe = room.events.myPresence.subscribe;
+    const getSnapshot = room.getPresence;
+    const presence = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
     const setPresence = room.updatePresence;
     return [presence, setPresence];
   }
@@ -1391,12 +1288,12 @@ function createRoomContext(client, options) {
   }
   function useOthers(selector, isEqual) {
     const room = useRoom();
-    const subscribe2 = room.events.others.subscribe;
-    const getSnapshot2 = room.getOthers;
+    const subscribe = room.events.others.subscribe;
+    const getSnapshot = room.getOthers;
     const getServerSnapshot = alwaysEmptyList;
-    return useSyncExternalStoreWithSelector(
-      subscribe2,
-      getSnapshot2,
+    return useSyncExternalStoreWithSelector2(
+      subscribe,
+      getSnapshot,
       getServerSnapshot,
       selector ?? identity,
       isEqual
@@ -1500,17 +1397,17 @@ function createRoomContext(client, options) {
   }
   function useSelf(maybeSelector, isEqual) {
     const room = useRoom();
-    const subscribe2 = room.events.self.subscribe;
-    const getSnapshot2 = room.getSelf;
+    const subscribe = room.events.self.subscribe;
+    const getSnapshot = room.getSelf;
     const selector = maybeSelector ?? identity;
     const wrappedSelector = React3.useCallback(
       (me) => me !== null ? selector(me) : null,
       [selector]
     );
     const getServerSnapshot = alwaysNull;
-    return useSyncExternalStoreWithSelector(
-      subscribe2,
-      getSnapshot2,
+    return useSyncExternalStoreWithSelector2(
+      subscribe,
+      getSnapshot,
       getServerSnapshot,
       wrappedSelector,
       isEqual
@@ -1518,10 +1415,10 @@ function createRoomContext(client, options) {
   }
   function useMutableStorageRoot() {
     const room = useRoom();
-    const subscribe2 = room.events.storageDidLoad.subscribeOnce;
-    const getSnapshot2 = room.getStorageSnapshot;
+    const subscribe = room.events.storageDidLoad.subscribeOnce;
+    const getSnapshot = room.getStorageSnapshot;
     const getServerSnapshot = alwaysNull;
-    return useSyncExternalStore5(subscribe2, getSnapshot2, getServerSnapshot);
+    return useSyncExternalStore2(subscribe, getSnapshot, getServerSnapshot);
   }
   function useStorageRoot() {
     return [useMutableStorageRoot()];
@@ -1537,15 +1434,15 @@ function createRoomContext(client, options) {
   }
   function useCanUndo() {
     const room = useRoom();
-    const subscribe2 = room.events.history.subscribe;
+    const subscribe = room.events.history.subscribe;
     const canUndo = room.history.canUndo;
-    return useSyncExternalStore5(subscribe2, canUndo, canUndo);
+    return useSyncExternalStore2(subscribe, canUndo, canUndo);
   }
   function useCanRedo() {
     const room = useRoom();
-    const subscribe2 = room.events.history.subscribe;
+    const subscribe = room.events.history.subscribe;
     const canRedo = room.history.canRedo;
-    return useSyncExternalStore5(subscribe2, canRedo, canRedo);
+    return useSyncExternalStore2(subscribe, canRedo, canRedo);
   }
   function useBatch() {
     return useRoom().batch;
@@ -1594,11 +1491,11 @@ function createRoomContext(client, options) {
       (rootOrNull2) => rootOrNull2 !== null ? selector(rootOrNull2) : null,
       [selector]
     );
-    const subscribe2 = React3.useCallback(
+    const subscribe = React3.useCallback(
       (onStoreChange) => rootOrNull !== null ? room.subscribe(rootOrNull, onStoreChange, { isDeep: true }) : noop2,
       [room, rootOrNull]
     );
-    const getSnapshot2 = React3.useCallback(() => {
+    const getSnapshot = React3.useCallback(() => {
       if (rootOrNull === null) {
         return null;
       } else {
@@ -1608,9 +1505,9 @@ function createRoomContext(client, options) {
       }
     }, [rootOrNull]);
     const getServerSnapshot = alwaysNull;
-    return useSyncExternalStoreWithSelector(
-      subscribe2,
-      getSnapshot2,
+    return useSyncExternalStoreWithSelector2(
+      subscribe,
+      getSnapshot,
       getServerSnapshot,
       wrappedSelector,
       isEqual