@liveblocks/react 1.9.2 → 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.2";
+var PKG_VERSION = "1.9.4";
 var PKG_FORMAT = "cjs";
 
 // src/ClientSideSuspense.tsx
@@ -41,8 +41,8 @@ var _nanoid = require('nanoid');
 
 
 
+var _shim = require('use-sync-external-store/shim');
 
-var _indexjs = require('use-sync-external-store/shim/index.js');
 
 // src/comments/errors.ts
 var CreateThreadError = class extends Error {
@@ -106,7 +106,7 @@ var RemoveReactionError = class extends Error {
 
 
 // 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;
@@ -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;
-  _react.useEffect.call(void 0, () => {
-    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]);
-  _react.useEffect.call(void 0, () => {
-    function handleIsOnline() {
-      if (revalidateOnReconnect && isDocumentVisible) {
-        void revalidateCache({ shouldDedupe: true });
-      }
-    }
-    window.addEventListener("online", handleIsOnline);
-    return () => {
-      window.removeEventListener("online", handleIsOnline);
-    };
-  }, [revalidateCache, revalidateOnReconnect, isDocumentVisible]);
-  _react.useEffect.call(void 0, () => {
-    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(
-          (_nullishCoalesce(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 = _core.makeEventSource.call(void 0, );
-  const subscribe2 = eventSource.subscribe;
-  const getCache = (key) => cacheStates.get(key);
-  const setCache = (key, value) => {
-    cacheStates.set(key, value);
-  };
+  const store = createClientCacheStore();
   const FetcherContext = _react.createContext.call(void 0, null);
-  const CommentsEventSubscriptionContext = _react.createContext.call(void 0, () => {
-  });
-  function getThreads() {
+  const RoomManagerContext = _react.createContext.call(void 0, null);
+  function getThreads(manager) {
     const threads = manager.getCache();
     if (!threads) {
       throw new Error(
@@ -411,84 +306,118 @@ function createCommentsRoom(errorEventSource) {
     room,
     children
   }) {
-    const commentsEventSubscribersCountRef = _react.useRef.call(void 0, 0);
-    const commentsEventDisposerRef = _react.useRef.call(void 0, );
-    const fetcher = _react.useCallback.call(void 0, async () => {
+    const manager = _react.useMemo.call(void 0, () => {
+      return createRoomRevalidationManager(room.id, {
+        getCache: store.getThreads,
+        setCache: store.setThreads
+      });
+    }, [room.id]);
+    const fetcher = React.default.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 = _react.useCallback.call(void 0, () => {
-      const commentsEventSubscribersCount = commentsEventSubscribersCountRef.current;
-      if (commentsEventSubscribersCount === 0) {
-        const unsubscribe = room.events.comments.subscribe(() => {
-          void revalidateCache({ shouldDedupe: true });
-        });
-        commentsEventDisposerRef.current = unsubscribe;
+    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);
       }
-      commentsEventSubscribersCountRef.current = commentsEventSubscribersCount + 1;
+      scheduleRevalidation();
       return () => {
-        commentsEventSubscribersCountRef.current = commentsEventSubscribersCountRef.current - 1;
-        if (commentsEventSubscribersCountRef.current > 0)
-          return;
-        _optionalChain([commentsEventDisposerRef, 'access', _ => _.current, 'optionalCall', _2 => _2()]);
-        commentsEventDisposerRef.current = void 0;
+        window.clearTimeout(revalidationTimerId);
       };
-    }, [revalidateCache, room]);
+    }, [
+      revalidateCache,
+      refreshInterval,
+      isOnline,
+      isDocumentVisible,
+      manager
+    ]);
     _react.useEffect.call(void 0, () => {
-      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]);
     _react.useEffect.call(void 0, () => {
-      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]);
+    _react.useEffect.call(void 0, () => {
+      const unsubscribe = room.events.comments.subscribe(() => {
+        void revalidateCache({ shouldDedupe: false });
       });
       return () => {
         unsubscribe();
       };
-    }, []);
-    return /* @__PURE__ */ React.default.createElement(FetcherContext.Provider, { value: fetcher }, /* @__PURE__ */ React.default.createElement(
-      CommentsEventSubscriptionContext.Provider,
-      {
-        value: subscribeToCommentEvents
-      },
-      children
-    ));
+    }, [room, revalidateCache]);
+    return /* @__PURE__ */ React.default.createElement(FetcherContext.Provider, { value: fetcher }, /* @__PURE__ */ React.default.createElement(RoomManagerContext.Provider, { value: manager }, children));
+  }
+  function useRoomManager() {
+    const manager = _react.useContext.call(void 0, RoomManagerContext);
+    if (manager === null) {
+      throw new Error("CommentsRoomProvider is missing from the React tree.");
+    }
+    return manager;
+  }
+  function getUseThreadsRevalidationManager(options, roomManager) {
+    const key = _core.stringify.call(void 0, 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 = _react.useContext.call(void 0, FetcherContext);
@@ -497,156 +426,126 @@ function createCommentsRoom(errorEventSource) {
     }
     return fetcher;
   }
-  function _useThreads(room, key) {
-    const fetcher = useThreadsFetcher();
-    const revalidateCache = useRevalidateCache(manager, fetcher);
-    const status = _indexjs.useSyncExternalStore.call(void 0, 
-      room.events.status.subscribe,
-      room.getStatus,
-      room.getStatus
-    );
-    const isOnline = useIsOnline();
-    const isDocumentVisible = useIsDocumentVisible();
-    const subscribeToCommentEvents = _react.useContext.call(void 0, 
-      CommentsEventSubscriptionContext
-    );
-    const interval = getPollingInterval(
-      isOnline,
-      isDocumentVisible,
-      status === "connected"
-    );
-    useAutomaticRevalidation(manager, revalidateCache, {
-      revalidateOnFocus: true,
-      revalidateOnReconnect: true,
-      refreshInterval: interval
-    });
-    _react.useEffect.call(void 0, subscribeToCommentEvents, [subscribeToCommentEvents]);
-    const cache = _indexjs.useSyncExternalStore.call(void 0, 
-      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 = _react.useMemo.call(void 0, () => _core.stringify.call(void 0, options), [options]);
-    let revalidationManager = revalidationManagers.get(key);
-    if (!revalidationManager) {
-      revalidationManager = createThreadsRevalidationManager(key);
-      revalidationManagers.set(key, revalidationManager);
-    }
-    const fetcher = _react.useCallback.call(void 0, 
+    const manager = useRoomManager();
+    const useThreadsRevalidationManager = getUseThreadsRevalidationManager(
+      options,
+      manager
+    );
+    const fetcher = React.default.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);
-    _react.useEffect.call(void 0, 
-      () => {
-        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
     );
     _react.useEffect.call(void 0, () => {
       void revalidateCache({ shouldDedupe: true });
     }, [revalidateCache]);
-    return _useThreads(room, key);
+    _react.useEffect.call(void 0, () => {
+      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 = _react.useMemo.call(void 0, () => _core.stringify.call(void 0, options), [options]);
-    let revalidationManager = revalidationManagers.get(key);
-    if (!revalidationManager) {
-      revalidationManager = createThreadsRevalidationManager(key);
-      revalidationManagers.set(key, revalidationManager);
-    }
-    const fetcher = _react.useCallback.call(void 0, 
+    const manager = useRoomManager();
+    const useThreadsRevalidationManager = getUseThreadsRevalidationManager(
+      options,
+      manager
+    );
+    const fetcher = React.default.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);
-    _react.useEffect.call(void 0, 
-      () => {
-        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);
+    _react.useEffect.call(void 0, () => {
+      void revalidateCache({ shouldDedupe: true });
+    }, [revalidateCache]);
+    _react.useEffect.call(void 0, () => {
+      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 _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 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 = _react.useCallback.call(void 0, 
       (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 = _react.useCallback.call(void 0, 
       ({ 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 = _react.useCallback.call(void 0, 
       ({ 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 = _react.useCallback.call(void 0, 
       ({ 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 = _react.useCallback.call(void 0, 
       ({ 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 = _react.useCallback.call(void 0, 
       ({ 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.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) {
@@ -1015,37 +930,41 @@ function getCurrentUserId(room) {
 }
 function handleCommentsApiError(err) {
   const message = `Request failed with status ${err.status}: ${err.message}`;
-  if (_optionalChain([err, 'access', _3 => _3.details, 'optionalAccess', _4 => _4.error]) === "FORBIDDEN") {
+  if (_optionalChain([err, 'access', _2 => _2.details, 'optionalAccess', _3 => _3.error]) === "FORBIDDEN") {
     const detailedMessage = [message, err.details.suggestion, err.details.docs].filter(Boolean).join("\n");
     console.error(detailedMessage);
   }
   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 = _core.makeEventSource.call(void 0, );
-  const errorEventSource = _core.makeEventSource.call(void 0, );
+  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,19 +987,111 @@ 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 = _nullishCoalesce(referenceCountByOptions.get(key), () => ( 0));
+      referenceCountByOptions.set(key, count + 1);
+    },
+    decrementReferenceCount(key) {
+      const count = _nullishCoalesce(referenceCountByOptions.get(key), () => ( 0));
+      referenceCountByOptions.set(key, count - 1);
+    },
+    getReferenceCount(key) {
+      return _nullishCoalesce(referenceCountByOptions.get(key), () => ( 0));
+    }
+  };
+}
+function createClientCacheStore() {
+  let threads = [];
+  const threadsEventSource = _core.makeEventSource.call(void 0, );
+  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(
+        (_nullishCoalesce(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
 
@@ -1136,14 +1146,14 @@ function useAsyncCache(cache, key, options) {
     return cacheItem2;
   }, [cache, key]);
   const subscribe2 = _react.useCallback.call(void 0, 
-    (callback) => _nullishCoalesce(_optionalChain([cacheItem, 'optionalAccess', _5 => _5.subscribe, 'call', _6 => _6(callback)]), () => ( noop)),
+    (callback) => _nullishCoalesce(_optionalChain([cacheItem, 'optionalAccess', _4 => _4.subscribe, 'call', _5 => _5(callback)]), () => ( noop)),
     [cacheItem]
   );
   const getState = _react.useCallback.call(void 0, 
-    () => _nullishCoalesce(_optionalChain([cacheItem, 'optionalAccess', _7 => _7.getState, 'call', _8 => _8()]), () => ( INITIAL_ASYNC_STATE)),
+    () => _nullishCoalesce(_optionalChain([cacheItem, 'optionalAccess', _6 => _6.getState, 'call', _7 => _7()]), () => ( INITIAL_ASYNC_STATE)),
     [cacheItem]
   );
-  const revalidate = _react.useCallback.call(void 0, () => _optionalChain([cacheItem, 'optionalAccess', _9 => _9.revalidate, 'call', _10 => _10()]), [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, subscribe2, getState, getState);
   const previousData = _react.useRef.call(void 0, );
   let data = state.data;
@@ -1159,7 +1169,7 @@ function useAsyncCache(cache, key, options) {
       revalidate
     };
   }
-  if (_optionalChain([frozenOptions, 'optionalAccess', _11 => _11.suspense])) {
+  if (_optionalChain([frozenOptions, 'optionalAccess', _10 => _10.suspense])) {
     const error = getState().error;
     if (error) {
       throw error;
@@ -1173,7 +1183,7 @@ function useAsyncCache(cache, key, options) {
       });
     }
   }
-  if (state.isLoading && _optionalChain([frozenOptions, 'optionalAccess', _12 => _12.keepPreviousDataWhileLoading]) && typeof state.data === "undefined" && _optionalChain([previousData, 'access', _13 => _13.current, 'optionalAccess', _14 => _14.key]) !== key && typeof _optionalChain([previousData, 'access', _15 => _15.current, 'optionalAccess', _16 => _16.data]) !== "undefined") {
+  if (state.isLoading && _optionalChain([frozenOptions, 'optionalAccess', _11 => _11.keepPreviousDataWhileLoading]) && typeof state.data === "undefined" && _optionalChain([previousData, 'access', _12 => _12.current, 'optionalAccess', _13 => _13.key]) !== key && typeof _optionalChain([previousData, 'access', _14 => _14.current, 'optionalAccess', _15 => _15.data]) !== "undefined") {
     data = previousData.current.data;
   }
   return {
@@ -1567,7 +1577,7 @@ function createRoomContext(client, options) {
       function onRootChange() {
         const newValue = root.get(key);
         if (newValue !== curr) {
-          _optionalChain([unsubCurr, 'optionalCall', _17 => _17()]);
+          _optionalChain([unsubCurr, 'optionalCall', _16 => _16()]);
           curr = newValue;
           subscribeToCurr();
           rerender();
@@ -1578,7 +1588,7 @@ function createRoomContext(client, options) {
       const unsubscribeRoot = room.subscribe(root, onRootChange);
       return () => {
         unsubscribeRoot();
-        _optionalChain([unsubCurr, 'optionalCall', _18 => _18()]);
+        _optionalChain([unsubCurr, 'optionalCall', _17 => _17()]);
       };
     }, [rootOrNull, room, key, rerender]);
     if (rootOrNull === null) {
@@ -1743,7 +1753,7 @@ function createRoomContext(client, options) {
     const users = await resolveUsers(
       JSON.parse(stringifiedOptions)
     );
-    return _optionalChain([users, 'optionalAccess', _19 => _19[0]]);
+    return _optionalChain([users, 'optionalAccess', _18 => _18[0]]);
   }) : void 0;
   function useUser(userId) {
     const room = useRoom();