@liveblocks/react 1.9.0-example1 → 1.19.0-test1

package/dist/index.js

@@ -5,11 +5,11 @@ var _core = require('@liveblocks/core');
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/react";
-var PKG_VERSION = "1.9.0-example1";
+var PKG_VERSION = "1.19.0-test1";
 var PKG_FORMAT = "cjs";
 
 // src/ClientSideSuspense.tsx
-var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react);
+var _react = require('react'); var React = _interopRequireWildcard(_react); var React3 = _interopRequireWildcard(_react);
 function ClientSideSuspense(props) {
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
@@ -31,10 +31,17 @@ var _client = require('@liveblocks/client');
 
 var _withselectorjs = require('use-sync-external-store/shim/with-selector.js');
 
-// src/comments/CommentsRoom.ts
+// src/comments/CommentsRoom.tsx
 
 var _nanoid = require('nanoid');
 
+
+
+
+
+
+
+
 var _indexjs = require('use-sync-external-store/shim/index.js');
 
 // src/comments/errors.ts
@@ -98,7 +105,6 @@ var RemoveReactionError = class extends Error {
 // src/comments/lib/revalidation.ts
 
 
-
 // src/comments/lib/use-is-document-visible.ts
 
 function useIsDocumentVisible() {
@@ -157,36 +163,39 @@ function useRevalidateCache(manager, fetcher, options = {}) {
     errorRetryCount = DEFAULT_MAX_ERROR_RETRY_COUNT
   } = options;
   const _revalidateCache = _react.useCallback.call(void 0, 
-    async (shouldDedupe, retryCount = 0) => {
+    async ({
+      shouldDedupe,
+      retryCount = 0
+    }) => {
       let startAt;
-      const shouldStartRequest = !manager.request || !shouldDedupe;
+      const shouldStartRequest = !manager.getRequest() || !shouldDedupe;
       function deleteActiveRequest() {
-        const activeRequest = manager.request;
+        const activeRequest = manager.getRequest();
         if (!activeRequest)
           return;
         if (activeRequest.timestamp !== startAt)
           return;
-        manager.request = void 0;
+        manager.setRequest(void 0);
       }
       function handleError() {
         const timeout = ~~((Math.random() + 0.5) * (1 << (retryCount < 8 ? retryCount : 8))) * errorRetryInterval;
         if (retryCount > errorRetryCount)
           return;
         setTimeout(() => {
-          void _revalidateCache(false, retryCount + 1);
+          void _revalidateCache({
+            shouldDedupe: false,
+            retryCount: retryCount + 1
+          });
         }, timeout);
       }
+      if (shouldStartRequest) {
+        manager.setRequest({
+          fetcher: fetcher(),
+          timestamp: ++timestamp
+        });
+      }
       try {
-        if (shouldStartRequest) {
-          const currentCache = manager.cache;
-          if (!currentCache)
-            manager.cache = { isLoading: true };
-          manager.request = {
-            fetcher: fetcher(),
-            timestamp: ++timestamp
-          };
-        }
-        const activeRequest = manager.request;
+        let activeRequest = manager.getRequest();
         if (!activeRequest)
           return;
         startAt = activeRequest.timestamp;
@@ -194,27 +203,21 @@ function useRevalidateCache(manager, fetcher, options = {}) {
         if (shouldStartRequest) {
           setTimeout(deleteActiveRequest, dedupingInterval);
         }
-        if (!manager.request || manager.request.timestamp !== startAt)
+        activeRequest = manager.getRequest();
+        if (!activeRequest || activeRequest.timestamp !== startAt)
           return;
-        const activeMutation = manager.mutation;
+        const activeMutation = manager.getMutation();
         if (activeMutation && (activeMutation.startTime > startAt || activeMutation.endTime > startAt || activeMutation.endTime === 0)) {
           return;
         }
-        manager.cache = {
-          isLoading: false,
-          data: newData
-        };
+        manager.setCache(newData);
       } catch (err) {
         deleteActiveRequest();
         const isVisible = document.visibilityState === "visible";
         const isOnline = isOnlineRef.current;
         if (shouldStartRequest && isVisible && isOnline)
           handleError();
-        manager.cache = {
-          data: _optionalChain([manager, 'access', _ => _.cache, 'optionalAccess', _2 => _2.data]),
-          isLoading: false,
-          error: err
-        };
+        manager.setError(err);
       }
       return;
     },
@@ -235,8 +238,8 @@ function useRevalidateCache(manager, fetcher, options = {}) {
     };
   }, []);
   const revalidateCache = _react.useCallback.call(void 0, 
-    (shoulDedupe) => {
-      return _revalidateCache(shoulDedupe, 0);
+    ({ shouldDedupe }) => {
+      return _revalidateCache({ shouldDedupe, retryCount: 0 });
     },
     [_revalidateCache]
   );
@@ -246,36 +249,33 @@ function useMutate(manager, revalidateCache) {
   const mutate = _react.useCallback.call(void 0, 
     async (data, options) => {
       const beforeMutationTimestamp = ++timestamp;
-      manager.mutation = {
+      manager.setMutation({
         startTime: beforeMutationTimestamp,
         endTime: 0
-      };
-      const currentCache = manager.cache;
-      manager.cache = {
-        isLoading: false,
-        data: options.optimisticData
-      };
+      });
+      const currentCache = manager.getCache();
+      manager.setCache(options.optimisticData);
       let error;
       try {
         await data;
       } catch (err) {
         error = err;
       }
-      const activeMutation = manager.mutation;
+      const activeMutation = manager.getMutation();
       if (activeMutation && beforeMutationTimestamp !== activeMutation.startTime) {
         if (error)
           throw error;
         return;
       }
       if (error) {
-        manager.cache = currentCache;
+        manager.setCache(currentCache);
       }
-      manager.mutation = {
+      manager.setMutation({
         startTime: beforeMutationTimestamp,
         endTime: ++timestamp
-      };
-      manager.request = void 0;
-      void revalidateCache(false);
+      });
+      manager.setRequest(void 0);
+      void revalidateCache({ shouldDedupe: false });
       if (error)
         throw error;
     },
@@ -297,8 +297,10 @@ function useAutomaticRevalidation(manager, revalidateCache, options = {}) {
       if (refreshInterval === 0)
         return;
       revalidationTimerId = window.setTimeout(() => {
-        if (isOnline && isDocumentVisible && !_optionalChain([manager, 'access', _3 => _3.cache, 'optionalAccess', _4 => _4.error])) {
-          void revalidateCache(true).then(scheduleRevalidation);
+        if (isOnline && isDocumentVisible && !manager.getError()) {
+          void revalidateCache({ shouldDedupe: true }).then(
+            scheduleRevalidation
+          );
           return;
         }
         scheduleRevalidation();
@@ -312,7 +314,7 @@ function useAutomaticRevalidation(manager, revalidateCache, options = {}) {
   _react.useEffect.call(void 0, () => {
     function handleIsOnline() {
       if (revalidateOnReconnect && isDocumentVisible) {
-        void revalidateCache(true);
+        void revalidateCache({ shouldDedupe: true });
       }
     }
     window.addEventListener("online", handleIsOnline);
@@ -324,7 +326,7 @@ function useAutomaticRevalidation(manager, revalidateCache, options = {}) {
     function handleVisibilityChange() {
       const isVisible = document.visibilityState === "visible";
       if (revalidateOnFocus && isVisible && isOnline) {
-        void revalidateCache(true);
+        void revalidateCache({ shouldDedupe: true });
       }
     }
     document.addEventListener("visibilitychange", handleVisibilityChange);
@@ -333,55 +335,171 @@ function useAutomaticRevalidation(manager, revalidateCache, options = {}) {
     };
   }, [revalidateCache, revalidateOnFocus, isOnline]);
 }
-function createCacheManager() {
-  let cache;
-  let request;
-  let mutation;
-  const eventSource = _core.makeEventSource.call(void 0, );
-  return {
-    get cache() {
-      return cache;
-    },
-    set cache(value) {
-      cache = value;
-      eventSource.notify(cache);
-    },
-    get request() {
-      return request;
-    },
-    set request(value) {
-      request = value;
-    },
-    get mutation() {
-      return mutation;
-    },
-    set mutation(value) {
-      mutation = value;
-    },
-    subscribe(callback) {
-      return eventSource.subscribe(callback);
-    }
-  };
-}
 
-// src/comments/CommentsRoom.ts
+// src/comments/CommentsRoom.tsx
 var POLLING_INTERVAL_REALTIME = 3e4;
 var POLLING_INTERVAL = 5e3;
 var THREAD_ID_PREFIX = "th";
 var COMMENT_ID_PREFIX = "cm";
-function createOptimisticId(prefix) {
-  return `${prefix}_${_nanoid.nanoid.call(void 0, )}`;
-}
-function getPollingInterval(isBrowserOnline, isDocumentVisible, isRoomConnected) {
-  if (!isBrowserOnline || !isDocumentVisible)
-    return;
-  if (isRoomConnected)
-    return POLLING_INTERVAL_REALTIME;
-  return POLLING_INTERVAL;
-}
-function createCommentsRoom(room, errorEventSource) {
-  const manager = createCacheManager();
-  function _useThreads(revalidateCache) {
+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 FetcherContext = _react.createContext.call(void 0, null);
+  const CommentsEventSubscriptionContext = _react.createContext.call(void 0, () => {
+  });
+  function getThreads() {
+    const threads = manager.getCache();
+    if (!threads) {
+      throw new Error(
+        "Cannot update threads or comments before they are loaded."
+      );
+    }
+    return threads;
+  }
+  function CommentsRoomProvider({
+    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 responses = await Promise.all(
+        Array.from(filterOptions.values()).map((info) => {
+          return room.getThreads(info.options);
+        })
+      );
+      const threads = Array.from(
+        new Map(responses.flat().map((thread) => [thread.id, thread])).values()
+      );
+      return threads;
+    }, [room]);
+    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;
+      }
+      commentsEventSubscribersCountRef.current = commentsEventSubscribersCount + 1;
+      return () => {
+        commentsEventSubscribersCountRef.current = commentsEventSubscribersCountRef.current - 1;
+        if (commentsEventSubscribersCountRef.current > 0)
+          return;
+        _optionalChain([commentsEventDisposerRef, 'access', _ => _.current, 'optionalCall', _2 => _2()]);
+        commentsEventDisposerRef.current = void 0;
+      };
+    }, [revalidateCache, room]);
+    _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);
+        }
+        eventSource.notify(threads);
+      });
+      return () => {
+        unsubscribe();
+      };
+    }, []);
+    _react.useEffect.call(void 0, () => {
+      const unsubscribe = manager.subscribe("error", (error) => {
+        for (const state of cacheStates.values()) {
+          state.error = error;
+        }
+      });
+      return () => {
+        unsubscribe();
+      };
+    }, []);
+    return /* @__PURE__ */ React.default.createElement(FetcherContext.Provider, { value: fetcher }, /* @__PURE__ */ React.default.createElement(
+      CommentsEventSubscriptionContext.Provider,
+      {
+        value: subscribeToCommentEvents
+      },
+      children
+    ));
+  }
+  function useThreadsFetcher() {
+    const fetcher = _react.useContext.call(void 0, FetcherContext);
+    if (fetcher === null) {
+      throw new Error("CommentsRoomProvider is missing from the React tree.");
+    }
+    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,
@@ -389,6 +507,9 @@ function createCommentsRoom(room, errorEventSource) {
     );
     const isOnline = useIsOnline();
     const isDocumentVisible = useIsDocumentVisible();
+    const subscribeToCommentEvents = _react.useContext.call(void 0, 
+      CommentsEventSubscriptionContext
+    );
     const interval = getPollingInterval(
       isOnline,
       isDocumentVisible,
@@ -399,50 +520,126 @@ function createCommentsRoom(room, errorEventSource) {
       revalidateOnReconnect: true,
       refreshInterval: interval
     });
-    _react.useEffect.call(void 0, () => {
-      const unsubscribe = room.events.comments.subscribe(() => {
-        void revalidateCache(true);
-      });
-      return () => {
-        unsubscribe();
-      };
-    }, [revalidateCache]);
+    _react.useEffect.call(void 0, subscribeToCommentEvents, [subscribeToCommentEvents]);
     const cache = _indexjs.useSyncExternalStore.call(void 0, 
-      manager.subscribe,
-      () => manager.cache,
-      () => manager.cache
+      subscribe2,
+      () => getCache(key),
+      () => getCache(key)
     );
     if (!cache || cache.isLoading) {
       return { isLoading: true };
     }
     return {
       isLoading: cache.isLoading,
-      threads: _nullishCoalesce(cache.data, () => ( [])),
+      threads: cache.data || [],
       error: cache.error
     };
   }
-  function useThreads() {
-    const revalidate = useRevalidateCache(manager, room.getThreads);
+  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, 
+      () => {
+        return room.getThreads(options);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [key]
+    );
+    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]
+    );
     _react.useEffect.call(void 0, () => {
-      void revalidate(true);
-    }, [revalidate]);
-    return _useThreads(revalidate);
-  }
-  function useThreadsSuspense() {
-    const revalidate = useRevalidateCache(manager, room.getThreads);
-    const cache = _useThreads(revalidate);
+      void revalidateCache({ shouldDedupe: true });
+    }, [revalidateCache]);
+    return _useThreads(room, key);
+  }
+  function useThreadsSuspense(room, options = {}) {
+    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, 
+      () => {
+        return room.getThreads(options);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [key]
+    );
+    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 cache = _useThreads(room, key);
     if (cache.error) {
       throw cache.error;
     }
     if (cache.isLoading || !cache.threads) {
-      throw revalidate(true);
+      throw revalidateCache({ shouldDedupe: true });
     }
     return {
       threads: cache.threads,
       isLoading: false
     };
   }
-  function useEditThreadMetadata() {
+  function useEditThreadMetadata(room) {
     const revalidate = useRevalidateCache(manager, room.getThreads);
     const mutate = useMutate(manager, revalidate);
     const editThreadMetadata = _react.useCallback.call(void 0, 
@@ -475,12 +672,13 @@ function createCommentsRoom(room, errorEventSource) {
           );
         });
       },
-      [mutate]
+      [room, mutate]
     );
     return editThreadMetadata;
   }
-  function useCreateThread() {
-    const revalidate = useRevalidateCache(manager, room.getThreads);
+  function useCreateThread(room) {
+    const fetcher = useThreadsFetcher();
+    const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
     const createThread = _react.useCallback.call(void 0, 
       (options) => {
@@ -496,7 +694,7 @@ function createCommentsRoom(room, errorEventSource) {
           roomId: room.id,
           createdAt: now,
           type: "comment",
-          userId: getCurrentUserId(),
+          userId: getCurrentUserId(room),
           body,
           reactions: []
         };
@@ -527,12 +725,13 @@ function createCommentsRoom(room, errorEventSource) {
         });
         return newThread;
       },
-      [mutate]
+      [room, mutate]
     );
     return createThread;
   }
-  function useCreateComment() {
-    const revalidate = useRevalidateCache(manager, room.getThreads);
+  function useCreateComment(room) {
+    const fetcher = useThreadsFetcher();
+    const revalidate = useRevalidateCache(manager, fetcher);
     const mutate = useMutate(manager, revalidate);
     const createComment = _react.useCallback.call(void 0, 
       ({ threadId, body }) => {
@@ -545,7 +744,7 @@ function createCommentsRoom(room, errorEventSource) {
           roomId: room.id,
           type: "comment",
           createdAt: now,
-          userId: getCurrentUserId(),
+          userId: getCurrentUserId(room),
           body,
           reactions: []
         };
@@ -573,11 +772,11 @@ function createCommentsRoom(room, errorEventSource) {
         });
         return comment;
       },
-      [mutate]
+      [room, mutate]
     );
     return createComment;
   }
-  function useEditComment() {
+  function useEditComment(room) {
     const revalidate = useRevalidateCache(manager, room.getThreads);
     const mutate = useMutate(manager, revalidate);
     const editComment = _react.useCallback.call(void 0, 
@@ -613,11 +812,11 @@ function createCommentsRoom(room, errorEventSource) {
           );
         });
       },
-      [mutate]
+      [room, mutate]
     );
     return editComment;
   }
-  function useDeleteComment() {
+  function useDeleteComment(room) {
     const revalidate = useRevalidateCache(manager, room.getThreads);
     const mutate = useMutate(manager, revalidate);
     const deleteComment = _react.useCallback.call(void 0, 
@@ -662,18 +861,18 @@ function createCommentsRoom(room, errorEventSource) {
           );
         });
       },
-      [mutate]
+      [room, mutate]
     );
     return deleteComment;
   }
-  function useAddReaction() {
+  function useAddReaction(room) {
     const revalidate = useRevalidateCache(manager, room.getThreads);
     const mutate = useMutate(manager, revalidate);
     const createComment = _react.useCallback.call(void 0, 
       ({ threadId, commentId, emoji }) => {
         const threads = getThreads();
         const now = /* @__PURE__ */ new Date();
-        const userId = getCurrentUserId();
+        const userId = getCurrentUserId(room);
         const optimisticData = threads.map(
           (thread) => thread.id === threadId ? {
             ...thread,
@@ -725,17 +924,17 @@ function createCommentsRoom(room, errorEventSource) {
           );
         });
       },
-      [mutate]
+      [room, mutate]
     );
     return createComment;
   }
-  function useRemoveReaction() {
+  function useRemoveReaction(room) {
     const revalidate = useRevalidateCache(manager, room.getThreads);
     const mutate = useMutate(manager, revalidate);
     const createComment = _react.useCallback.call(void 0, 
       ({ threadId, commentId, emoji }) => {
         const threads = getThreads();
-        const userId = getCurrentUserId();
+        const userId = getCurrentUserId(room);
         const optimisticData = threads.map(
           (thread) => thread.id === threadId ? {
             ...thread,
@@ -786,44 +985,16 @@ function createCommentsRoom(room, errorEventSource) {
           );
         });
       },
-      [mutate]
+      [room, mutate]
     );
     return createComment;
   }
-  function getThreads() {
-    const threads = manager.cache;
-    if (!threads || threads.isLoading || threads.error || threads.data === void 0) {
-      throw new Error(
-        "Cannot update threads or comments before they are loaded."
-      );
-    }
-    return threads.data;
-  }
-  function getCurrentUserId() {
-    const self = room.getSelf();
-    if (self === null || self.id === void 0) {
-      return "anonymous";
-    } else {
-      return self.id;
-    }
-  }
-  function handleCommentsApiError(err) {
-    const message = `Request failed with status ${err.status}: ${err.message}`;
-    if (_optionalChain([err, 'access', _5 => _5.details, 'optionalAccess', _6 => _6.error]) === "FORBIDDEN") {
-      const detailedMessage = [
-        message,
-        err.details.suggestion,
-        err.details.docs
-      ].filter(Boolean).join("\n");
-      _core.console.error(detailedMessage);
-    }
-    return new Error(message);
-  }
   return {
+    CommentsRoomProvider,
     useThreads,
     useThreadsSuspense,
-    useCreateThread,
     useEditThreadMetadata,
+    useCreateThread,
     useCreateComment,
     useEditComment,
     useDeleteComment,
@@ -831,6 +1002,86 @@ function createCommentsRoom(room, errorEventSource) {
     useRemoveReaction
   };
 }
+function createOptimisticId(prefix) {
+  return `${prefix}_${_nanoid.nanoid.call(void 0, )}`;
+}
+function getCurrentUserId(room) {
+  const self = room.getSelf();
+  if (self === null || self.id === void 0) {
+    return "anonymous";
+  } else {
+    return self.id;
+  }
+}
+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") {
+    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;
+  let request;
+  let error;
+  let mutation;
+  const cacheEventSource = _core.makeEventSource.call(void 0, );
+  const errorEventSource = _core.makeEventSource.call(void 0, );
+  return {
+    // Cache
+    getCache() {
+      return cache;
+    },
+    setCache(value) {
+      const sorted = value.sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+      );
+      cache = sorted;
+      cacheEventSource.notify(cache);
+    },
+    // Request
+    getRequest() {
+      return request;
+    },
+    setRequest(value) {
+      request = value;
+    },
+    // Error
+    getError() {
+      return error;
+    },
+    setError(err) {
+      error = err;
+      errorEventSource.notify(err);
+    },
+    // Mutation
+    getMutation() {
+      return mutation;
+    },
+    setMutation(info) {
+      mutation = info;
+    },
+    // Subscription
+    subscribe(type, callback) {
+      switch (type) {
+        case "cache":
+          return cacheEventSource.subscribe(
+            callback
+          );
+        case "error":
+          return errorEventSource.subscribe(callback);
+      }
+    }
+  };
+}
 
 // src/comments/lib/use-debounce.ts
 
@@ -885,14 +1136,14 @@ function useAsyncCache(cache, key, options) {
     return cacheItem2;
   }, [cache, key]);
   const subscribe2 = _react.useCallback.call(void 0, 
-    (callback) => _nullishCoalesce(_optionalChain([cacheItem, 'optionalAccess', _7 => _7.subscribe, 'call', _8 => _8(callback)]), () => ( noop)),
+    (callback) => _nullishCoalesce(_optionalChain([cacheItem, 'optionalAccess', _5 => _5.subscribe, 'call', _6 => _6(callback)]), () => ( noop)),
     [cacheItem]
   );
   const getState = _react.useCallback.call(void 0, 
-    () => _nullishCoalesce(_optionalChain([cacheItem, 'optionalAccess', _9 => _9.getState, 'call', _10 => _10()]), () => ( INITIAL_ASYNC_STATE)),
+    () => _nullishCoalesce(_optionalChain([cacheItem, 'optionalAccess', _7 => _7.getState, 'call', _8 => _8()]), () => ( INITIAL_ASYNC_STATE)),
     [cacheItem]
   );
-  const revalidate = _react.useCallback.call(void 0, () => _optionalChain([cacheItem, 'optionalAccess', _11 => _11.revalidate, 'call', _12 => _12()]), [cacheItem]);
+  const revalidate = _react.useCallback.call(void 0, () => _optionalChain([cacheItem, 'optionalAccess', _9 => _9.revalidate, 'call', _10 => _10()]), [cacheItem]);
   const state = _indexjs.useSyncExternalStore.call(void 0, subscribe2, getState, getState);
   const previousData = _react.useRef.call(void 0, );
   let data = state.data;
@@ -908,7 +1159,7 @@ function useAsyncCache(cache, key, options) {
       revalidate
     };
   }
-  if (_optionalChain([frozenOptions, 'optionalAccess', _13 => _13.suspense])) {
+  if (_optionalChain([frozenOptions, 'optionalAccess', _11 => _11.suspense])) {
     const error = getState().error;
     if (error) {
       throw error;
@@ -922,7 +1173,7 @@ function useAsyncCache(cache, key, options) {
       });
     }
   }
-  if (state.isLoading && _optionalChain([frozenOptions, 'optionalAccess', _14 => _14.keepPreviousDataWhileLoading]) && typeof state.data === "undefined" && _optionalChain([previousData, 'access', _15 => _15.current, 'optionalAccess', _16 => _16.key]) !== key && typeof _optionalChain([previousData, 'access', _17 => _17.current, 'optionalAccess', _18 => _18.data]) !== "undefined") {
+  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") {
     data = previousData.current.data;
   }
   return {
@@ -1019,21 +1270,23 @@ function warnIfNoResolveUsers(usersCache) {
     hasWarnedIfNoResolveUsers = true;
   }
 }
-var ContextBundle = React2.createContext(null);
+var ContextBundle = React3.createContext(null);
 function useRoomContextBundle() {
-  const bundle = React2.useContext(ContextBundle);
+  const bundle = React3.useContext(ContextBundle);
   if (bundle === null) {
     throw new Error("RoomProvider is missing from the React tree.");
   }
   return bundle;
 }
 function createRoomContext(client, options) {
-  const RoomContext = React2.createContext(null);
+  const RoomContext = React3.createContext(null);
+  const commentsErrorEventSource = _core.makeEventSource.call(void 0, );
+  const { CommentsRoomProvider, ...commentsRoom } = createCommentsRoom(commentsErrorEventSource);
   function RoomProviderOuter(props) {
-    const [cache] = React2.useState(
+    const [cache] = React3.useState(
       () => /* @__PURE__ */ new Map()
     );
-    const stableEnterRoom = React2.useCallback(
+    const stableEnterRoom = React3.useCallback(
       (roomId, options2) => {
         const cached = cache.get(roomId);
         if (cached)
@@ -1052,7 +1305,7 @@ function createRoomContext(client, options) {
       },
       [cache]
     );
-    return /* @__PURE__ */ React2.createElement(RoomProviderInner, { ...props, stableEnterRoom });
+    return /* @__PURE__ */ React3.createElement(RoomProviderInner, { ...props, stableEnterRoom });
   }
   function RoomProviderInner(props) {
     const { id: roomId, stableEnterRoom } = props;
@@ -1065,7 +1318,7 @@ function createRoomContext(client, options) {
       if (typeof roomId !== "string") {
         throw new Error("RoomProvider id property should be a string.");
       }
-      const majorReactVersion = parseInt(React2.version) || 1;
+      const majorReactVersion = parseInt(React3.version) || 1;
       const oldReactVersion = majorReactVersion < 18;
       _core.errorIf.call(void 0, 
         oldReactVersion && props.unstable_batchedUpdates === void 0,
@@ -1082,14 +1335,14 @@ function createRoomContext(client, options) {
       unstable_batchedUpdates: props.unstable_batchedUpdates,
       autoConnect: _nullishCoalesce(_nullishCoalesce(props.autoConnect, () => ( props.shouldInitiallyConnect)), () => ( typeof window !== "undefined"))
     });
-    const [{ room }, setRoomLeavePair] = React2.useState(
+    const [{ room }, setRoomLeavePair] = React3.useState(
       () => stableEnterRoom(roomId, {
         ...frozenProps,
         autoConnect: false
         // Deliberately using false here on the first render, see below
       })
     );
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       const pair = stableEnterRoom(roomId, frozenProps);
       setRoomLeavePair(pair);
       const { room: room2, leave } = pair;
@@ -1097,26 +1350,22 @@ function createRoomContext(client, options) {
         room2.connect();
       }
       return () => {
-        const commentsRoom = commentsRooms.get(room2);
-        if (commentsRoom) {
-          commentsRooms.delete(room2);
-        }
         leave();
       };
     }, [roomId, frozenProps, stableEnterRoom]);
-    return /* @__PURE__ */ React2.createElement(RoomContext.Provider, { value: room }, /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React3.createElement(RoomContext.Provider, { value: room }, /* @__PURE__ */ React3.createElement(CommentsRoomProvider, { room }, /* @__PURE__ */ React3.createElement(
       ContextBundle.Provider,
       {
         value: internalBundle
       },
       props.children
-    ));
+    )));
   }
   function connectionIdSelector(others) {
     return others.map((user) => user.connectionId);
   }
   function useRoom() {
-    const room = React2.useContext(RoomContext);
+    const room = React3.useContext(RoomContext);
     if (room === null) {
       throw new Error("RoomProvider is missing from the React tree.");
     }
@@ -1157,13 +1406,13 @@ function createRoomContext(client, options) {
     return useOthers(connectionIdSelector, _client.shallow);
   }
   function useOthersMapped(itemSelector, itemIsEqual) {
-    const wrappedSelector = React2.useCallback(
+    const wrappedSelector = React3.useCallback(
       (others) => others.map(
         (other) => [other.connectionId, itemSelector(other)]
       ),
       [itemSelector]
     );
-    const wrappedIsEqual = React2.useCallback(
+    const wrappedIsEqual = React3.useCallback(
       (a, b) => {
         const eq = _nullishCoalesce(itemIsEqual, () => ( Object.is));
         return a.length === b.length && a.every((atuple, index) => {
@@ -1177,7 +1426,7 @@ function createRoomContext(client, options) {
   }
   const NOT_FOUND = Symbol();
   function useOther(connectionId, selector, isEqual) {
-    const wrappedSelector = React2.useCallback(
+    const wrappedSelector = React3.useCallback(
       (others) => {
         const other2 = others.find(
           (other3) => other3.connectionId === connectionId
@@ -1186,7 +1435,7 @@ function createRoomContext(client, options) {
       },
       [connectionId, selector]
     );
-    const wrappedIsEqual = React2.useCallback(
+    const wrappedIsEqual = React3.useCallback(
       (prev, curr) => {
         if (prev === NOT_FOUND || curr === NOT_FOUND) {
           return prev === curr;
@@ -1206,7 +1455,7 @@ function createRoomContext(client, options) {
   }
   function useBroadcastEvent() {
     const room = useRoom();
-    return React2.useCallback(
+    return React3.useCallback(
       (event, options2 = { shouldQueueEventIfNotReady: false }) => {
         room.broadcastEvent(event, options2);
       },
@@ -1216,7 +1465,7 @@ function createRoomContext(client, options) {
   function useOthersListener(callback) {
     const room = useRoom();
     const savedCallback = useLatest(callback);
-    React2.useEffect(
+    React3.useEffect(
       () => room.events.others.subscribe((event) => savedCallback.current(event)),
       [room, savedCallback]
     );
@@ -1224,7 +1473,7 @@ function createRoomContext(client, options) {
   function useLostConnectionListener(callback) {
     const room = useRoom();
     const savedCallback = useLatest(callback);
-    React2.useEffect(
+    React3.useEffect(
       () => room.events.lostConnection.subscribe(
         (event) => savedCallback.current(event)
       ),
@@ -1234,7 +1483,7 @@ function createRoomContext(client, options) {
   function useErrorListener(callback) {
     const room = useRoom();
     const savedCallback = useLatest(callback);
-    React2.useEffect(
+    React3.useEffect(
       () => room.events.error.subscribe((e) => savedCallback.current(e)),
       [room, savedCallback]
     );
@@ -1242,7 +1491,7 @@ function createRoomContext(client, options) {
   function useEventListener(callback) {
     const room = useRoom();
     const savedCallback = useLatest(callback);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       const listener = (eventData) => {
         savedCallback.current(eventData);
       };
@@ -1254,7 +1503,7 @@ function createRoomContext(client, options) {
     const subscribe2 = room.events.self.subscribe;
     const getSnapshot2 = room.getSelf;
     const selector = _nullishCoalesce(maybeSelector, () => ( identity));
-    const wrappedSelector = React2.useCallback(
+    const wrappedSelector = React3.useCallback(
       (me) => me !== null ? selector(me) : null,
       [selector]
     );
@@ -1305,7 +1554,7 @@ function createRoomContext(client, options) {
     const room = useRoom();
     const rootOrNull = useMutableStorageRoot();
     const rerender = useRerender();
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (rootOrNull === null) {
         return;
       }
@@ -1318,7 +1567,7 @@ function createRoomContext(client, options) {
       function onRootChange() {
         const newValue = root.get(key);
         if (newValue !== curr) {
-          _optionalChain([unsubCurr, 'optionalCall', _19 => _19()]);
+          _optionalChain([unsubCurr, 'optionalCall', _17 => _17()]);
           curr = newValue;
           subscribeToCurr();
           rerender();
@@ -1329,7 +1578,7 @@ function createRoomContext(client, options) {
       const unsubscribeRoot = room.subscribe(root, onRootChange);
       return () => {
         unsubscribeRoot();
-        _optionalChain([unsubCurr, 'optionalCall', _20 => _20()]);
+        _optionalChain([unsubCurr, 'optionalCall', _18 => _18()]);
       };
     }, [rootOrNull, room, key, rerender]);
     if (rootOrNull === null) {
@@ -1341,15 +1590,15 @@ function createRoomContext(client, options) {
   function useStorage(selector, isEqual) {
     const room = useRoom();
     const rootOrNull = useMutableStorageRoot();
-    const wrappedSelector = React2.useCallback(
+    const wrappedSelector = React3.useCallback(
       (rootOrNull2) => rootOrNull2 !== null ? selector(rootOrNull2) : null,
       [selector]
     );
-    const subscribe2 = React2.useCallback(
+    const subscribe2 = React3.useCallback(
       (onStoreChange) => rootOrNull !== null ? room.subscribe(rootOrNull, onStoreChange, { isDeep: true }) : noop2,
       [room, rootOrNull]
     );
-    const getSnapshot2 = React2.useCallback(() => {
+    const getSnapshot2 = React3.useCallback(() => {
       if (rootOrNull === null) {
         return null;
       } else {
@@ -1397,7 +1646,7 @@ function createRoomContext(client, options) {
   }
   function useMutation(callback, deps) {
     const room = useRoom();
-    return React2.useMemo(
+    return React3.useMemo(
       () => {
         return (...args) => (
           // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -1453,67 +1702,57 @@ function createRoomContext(client, options) {
     useSuspendUntilStorageLoaded();
     return useLegacyKey(key);
   }
-  const commentsErrorEventSource = _core.makeEventSource.call(void 0, );
-  const commentsRooms = /* @__PURE__ */ new Map();
-  function getCommentsRoom(room) {
-    let commentsRoom = commentsRooms.get(room);
-    if (commentsRoom === void 0) {
-      commentsRoom = createCommentsRoom(room, commentsErrorEventSource);
-      commentsRooms.set(room, commentsRoom);
-    }
-    return commentsRoom;
-  }
-  function useThreads() {
+  function useThreads(options2) {
     const room = useRoom();
-    return getCommentsRoom(room).useThreads();
+    return commentsRoom.useThreads(room, options2);
   }
-  function useThreadsSuspense() {
+  function useThreadsSuspense(options2) {
     const room = useRoom();
-    return getCommentsRoom(room).useThreadsSuspense();
+    return commentsRoom.useThreadsSuspense(room, options2);
   }
   function useCreateThread() {
     const room = useRoom();
-    return getCommentsRoom(room).useCreateThread();
+    return commentsRoom.useCreateThread(room);
   }
   function useEditThreadMetadata() {
     const room = useRoom();
-    return getCommentsRoom(room).useEditThreadMetadata();
+    return commentsRoom.useEditThreadMetadata(room);
   }
   function useAddReaction() {
     const room = useRoom();
-    return getCommentsRoom(room).useAddReaction();
+    return commentsRoom.useAddReaction(room);
   }
   function useRemoveReaction() {
     const room = useRoom();
-    return getCommentsRoom(room).useRemoveReaction();
+    return commentsRoom.useRemoveReaction(room);
   }
   function useCreateComment() {
     const room = useRoom();
-    return getCommentsRoom(room).useCreateComment();
+    return commentsRoom.useCreateComment(room);
   }
   function useEditComment() {
     const room = useRoom();
-    return getCommentsRoom(room).useEditComment();
+    return commentsRoom.useEditComment(room);
   }
   function useDeleteComment() {
     const room = useRoom();
-    return getCommentsRoom(room).useDeleteComment();
+    return commentsRoom.useDeleteComment(room);
   }
   const { resolveUsers, resolveMentionSuggestions } = _nullishCoalesce(options, () => ( {}));
   const usersCache = resolveUsers ? _core.createAsyncCache.call(void 0, async (stringifiedOptions) => {
     const users = await resolveUsers(
       JSON.parse(stringifiedOptions)
     );
-    return _optionalChain([users, 'optionalAccess', _21 => _21[0]]);
+    return _optionalChain([users, 'optionalAccess', _19 => _19[0]]);
   }) : void 0;
   function useUser(userId) {
     const room = useRoom();
-    const resolverKey = React2.useMemo(
+    const resolverKey = React3.useMemo(
       () => _core.stringify.call(void 0, { userIds: [userId], roomId: room.id }),
       [userId, room.id]
     );
     const state = useAsyncCache(usersCache, resolverKey);
-    React2.useEffect(() => warnIfNoResolveUsers(usersCache), []);
+    React3.useEffect(() => warnIfNoResolveUsers(usersCache), []);
     if (state.isLoading) {
       return {
         isLoading: true
@@ -1528,14 +1767,14 @@ function createRoomContext(client, options) {
   }
   function useUserSuspense(userId) {
     const room = useRoom();
-    const resolverKey = React2.useMemo(
+    const resolverKey = React3.useMemo(
       () => _core.stringify.call(void 0, { userIds: [userId], roomId: room.id }),
       [userId, room.id]
     );
     const state = useAsyncCache(usersCache, resolverKey, {
       suspense: true
     });
-    React2.useEffect(() => warnIfNoResolveUsers(usersCache), []);
+    React3.useEffect(() => warnIfNoResolveUsers(usersCache), []);
     return {
       user: state.data,
       isLoading: false
@@ -1551,7 +1790,7 @@ function createRoomContext(client, options) {
   function useMentionSuggestions(search) {
     const room = useRoom();
     const debouncedSearch = useDebounce(search, 500);
-    const resolverKey = React2.useMemo(
+    const resolverKey = React3.useMemo(
       () => debouncedSearch !== void 0 ? _core.stringify.call(void 0, { text: debouncedSearch, roomId: room.id }) : null,
       [debouncedSearch, room.id]
     );