@liveblocks/react 1.9.2 → 1.9.4

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.4";
 var PKG_FORMAT = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -29,7 +29,7 @@ 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";
@@ -39,10 +39,10 @@ import React2, {
   useCallback as useCallback3,
   useContext,
   useEffect as useEffect3,
-  useMemo,
-  useRef as useRef3
+  useMemo
 } from "react";
-import { useSyncExternalStore as useSyncExternalStore3 } from "use-sync-external-store/shim/index.js";
+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
 var CreateThreadError = class extends Error {
@@ -283,122 +283,17 @@ 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";
+var POLLING_INTERVAL_REALTIME = 3e4;
+var POLLING_INTERVAL = 5e3;
 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 +306,118 @@ 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;
+    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);
       }
-      commentsEventSubscribersCountRef.current = commentsEventSubscribersCount + 1;
+      scheduleRevalidation();
       return () => {
-        commentsEventSubscribersCountRef.current = commentsEventSubscribersCountRef.current - 1;
-        if (commentsEventSubscribersCountRef.current > 0)
-          return;
-        commentsEventDisposerRef.current?.();
-        commentsEventDisposerRef.current = void 0;
+        window.clearTimeout(revalidationTimerId);
       };
-    }, [revalidateCache, room]);
+    }, [
+      revalidateCache,
+      refreshInterval,
+      isOnline,
+      isDocumentVisible,
+      manager
+    ]);
     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);
+      function handleIsOnline() {
+        if (isDocumentVisible) {
+          void revalidateCache({ shouldDedupe: true });
         }
-        eventSource.notify(threads);
-      });
+      }
+      window.addEventListener("online", handleIsOnline);
       return () => {
-        unsubscribe();
+        window.removeEventListener("online", handleIsOnline);
       };
-    }, []);
+    }, [revalidateCache, isDocumentVisible]);
     useEffect3(() => {
-      const unsubscribe = manager.subscribe("error", (error) => {
-        for (const state of cacheStates.values()) {
-          state.error = error;
+      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 });
       });
       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 +426,126 @@ 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);
+      };
+    }, [manager, key]);
+    const cache = _useThreads(room, options);
+    return cache;
   }
-  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
-          });
-        }
-        return () => {
-          const info3 = filterOptions.get(key);
-          if (!info3)
-            return;
-          info3.count -= 1;
-          if (info3.count > 0)
-            return;
-          filterOptions.delete(key);
-        };
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [key]
+    const revalidateCache = useRevalidateCache(
+      useThreadsRevalidationManager,
+      fetcher
     );
-    const cache = _useThreads(room, key);
+    useEffect3(() => {
+      void revalidateCache({ shouldDedupe: true });
+    }, [revalidateCache]);
+    useEffect3(() => {
+      manager.incrementReferenceCount(key);
+      return () => {
+        manager.decrementReferenceCount(key);
+      };
+    }, [manager, key]);
+    const cache = _useThreads(room, options);
     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 _useThreads(room, options) {
+    const manager = useRoomManager();
+    const useThreadsRevalidationManager = getUseThreadsRevalidationManager(
+      options,
+      manager
+    );
+    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 key in query.metadata) {
+            if (thread.metadata[key] !== query.metadata[key]) {
+              return false;
+            }
+          }
+          return true;
+        });
+        return {
+          isLoading: false,
+          threads: filtered,
+          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(
       (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,11 +571,12 @@ 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);
@@ -684,9 +584,9 @@ function createCommentsRoom(errorEventSource) {
       (options) => {
         const body = options.body;
         const metadata = "metadata" in options ? options.metadata : {};
-        const threads = getThreads();
-        const threadId = createOptimisticId(THREAD_ID_PREFIX);
-        const commentId = createOptimisticId(COMMENT_ID_PREFIX);
+        const threads = getThreads(manager);
+        const threadId = createThreadId();
+        const commentId = createCommentId();
         const now = /* @__PURE__ */ new Date();
         const newComment = {
           id: commentId,
@@ -725,18 +625,19 @@ 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(
       ({ threadId, body }) => {
-        const threads = getThreads();
-        const commentId = createOptimisticId(COMMENT_ID_PREFIX);
+        const threads = getThreads(manager);
+        const commentId = createCommentId();
         const now = /* @__PURE__ */ new Date();
         const comment = {
           id: commentId,
@@ -772,16 +673,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(
       ({ 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 +715,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(
       ({ threadId, commentId }) => {
-        const threads = getThreads();
+        const threads = getThreads(manager);
         const now = /* @__PURE__ */ new Date();
         const newThreads = [];
         for (const thread of threads) {
@@ -861,16 +766,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(
       ({ 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 +831,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(
       ({ threadId, commentId, emoji }) => {
-        const threads = getThreads();
+        const threads = getThreads(manager);
         const userId = getCurrentUserId(room);
         const optimisticData = threads.map(
           (thread) => thread.id === threadId ? {
@@ -985,7 +894,7 @@ function createCommentsRoom(errorEventSource) {
           );
         });
       },
-      [room, mutate]
+      [room, mutate, manager]
     );
     return createComment;
   }
@@ -1005,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) {
@@ -1021,31 +936,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 +979,6 @@ function createThreadsCacheManager() {
     },
     setError(err) {
       error = err;
-      errorEventSource.notify(err);
     },
     // Mutation
     getMutation() {
@@ -1069,25 +987,117 @@ 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);
+    },
+    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);
+    },
+    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;
+  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;
+      isLoading = false;
+      const cache = manager.getCache();
+      manager.setCache(cache);
+    },
+    // Mutation
+    getMutation() {
+      return void 0;
+    },
+    setMutation(_) {
+      return;
+    },
+    getOptions() {
+      return options;
+    },
+    getIsLoading() {
+      return isLoading;
+    },
+    setIsLoading(value) {
+      isLoading = value;
     }
   };
 }
+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 useRef4, 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 = useRef4();
+  const timeout = useRef3();
   const [debouncedValue, setDebouncedValue] = useState2(value);
   useEffect4(() => {
     if (delay === false) {
@@ -1108,7 +1118,7 @@ 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 { 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
@@ -1145,7 +1155,7 @@ function useAsyncCache(cache, key, options) {
   );
   const revalidate = useCallback4(() => cacheItem?.revalidate(), [cacheItem]);
   const state = useSyncExternalStore4(subscribe2, getState, getState);
-  const previousData = useRef5();
+  const previousData = useRef4();
   let data = state.data;
   useEffect5(() => {
     previousData.current = { key, data: state.data };
@@ -1186,9 +1196,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 useRef5 } from "react";
 function useLatest(value) {
-  const ref = useRef6(value);
+  const ref = useRef5(value);
   useEffect6(() => {
     ref.current = value;
   }, [value]);
@@ -1225,7 +1235,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 useSyncExternalStore5(s, gs, gss) {
-  return useSyncExternalStoreWithSelector(s, gs, gss, identity);
+  return useSyncExternalStoreWithSelector2(s, gs, gss, identity);
 }
 var STABLE_EMPTY_LIST = Object.freeze([]);
 function alwaysEmptyList() {
@@ -1394,7 +1404,7 @@ function createRoomContext(client, options) {
     const subscribe2 = room.events.others.subscribe;
     const getSnapshot2 = room.getOthers;
     const getServerSnapshot = alwaysEmptyList;
-    return useSyncExternalStoreWithSelector(
+    return useSyncExternalStoreWithSelector2(
       subscribe2,
       getSnapshot2,
       getServerSnapshot,
@@ -1508,7 +1518,7 @@ function createRoomContext(client, options) {
       [selector]
     );
     const getServerSnapshot = alwaysNull;
-    return useSyncExternalStoreWithSelector(
+    return useSyncExternalStoreWithSelector2(
       subscribe2,
       getSnapshot2,
       getServerSnapshot,
@@ -1608,7 +1618,7 @@ function createRoomContext(client, options) {
       }
     }, [rootOrNull]);
     const getServerSnapshot = alwaysNull;
-    return useSyncExternalStoreWithSelector(
+    return useSyncExternalStoreWithSelector2(
       subscribe2,
       getSnapshot2,
       getServerSnapshot,