@liveblocks/react 1.8.1 → 1.8.3-oss1

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.8.1";
+var PKG_VERSION = "1.8.3-oss1";
 var PKG_FORMAT = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -32,10 +32,10 @@ import * as React2 from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector.js";
 
 // src/comments/CommentsRoom.ts
-import { CommentsApiError, console as console2, makeEventSource } from "@liveblocks/core";
+import { CommentsApiError, console as console2 } from "@liveblocks/core";
 import { nanoid } from "nanoid";
-import { useEffect as useEffect2 } from "react";
-import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
+import { useCallback as useCallback3, useEffect as useEffect3 } from "react";
+import { useSyncExternalStore as useSyncExternalStore3 } from "use-sync-external-store/shim/index.js";
 
 // src/comments/errors.ts
 var CreateThreadError = class extends Error {
@@ -95,18 +95,245 @@ var RemoveReactionError = class extends Error {
   }
 };
 
-// src/comments/CommentsRoom.ts
-var POLLING_INTERVAL_REALTIME = 3e4;
-var POLLING_INTERVAL = 5e3;
-var MAX_ERROR_RETRY_COUNT = 5;
-var ERROR_RETRY_INTERVAL = 5e3;
-var THREAD_ID_PREFIX = "th";
-var COMMENT_ID_PREFIX = "cm";
-var DEDUPING_INTERVAL = 1e3;
-function createOptimisticId(prefix) {
-  return `${prefix}_${nanoid()}`;
+// src/comments/lib/revalidation.ts
+import { makeEventSource } from "@liveblocks/core";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/comments/lib/use-is-document-visible.ts
+import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
+function useIsDocumentVisible() {
+  const isVisible = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return isVisible;
+}
+function subscribe(onStoreChange) {
+  document.addEventListener("visibilitychange", onStoreChange);
+  return () => {
+    document.removeEventListener("visibilitychange", onStoreChange);
+  };
+}
+function getSnapshot() {
+  const isDocumentDefined = typeof document !== "undefined";
+  return isDocumentDefined ? document.visibilityState === "visible" : true;
+}
+
+// src/comments/lib/use-is-online.ts
+import { useCallback, useRef } from "react";
+import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external-store/shim/index.js";
+function useIsOnline() {
+  const isOnlineRef = useRef(true);
+  const subscribe2 = useCallback((onStoreChange) => {
+    function handleIsOnline() {
+      isOnlineRef.current = true;
+      onStoreChange();
+    }
+    function handleIsOffline() {
+      isOnlineRef.current = false;
+      onStoreChange();
+    }
+    window.addEventListener("online", handleIsOnline);
+    window.addEventListener("offline", handleIsOffline);
+    return () => {
+      window.removeEventListener("online", handleIsOnline);
+      window.removeEventListener("offline", handleIsOffline);
+    };
+  }, []);
+  const getSnapshot2 = useCallback(() => {
+    return isOnlineRef.current;
+  }, []);
+  const isOnline = useSyncExternalStore2(subscribe2, getSnapshot2, getSnapshot2);
+  return isOnline;
+}
+
+// src/comments/lib/revalidation.ts
+var DEFAULT_ERROR_RETRY_INTERVAL = 5e3;
+var DEFAULT_MAX_ERROR_RETRY_COUNT = 5;
+var DEFAULT_DEDUPING_INTERVAL = 2e3;
+var timestamp = 0;
+function useRevalidateCache(manager, fetcher, options = {}) {
+  const isOnlineRef = useRef2(true);
+  const {
+    dedupingInterval = DEFAULT_DEDUPING_INTERVAL,
+    errorRetryInterval = DEFAULT_ERROR_RETRY_INTERVAL,
+    errorRetryCount = DEFAULT_MAX_ERROR_RETRY_COUNT
+  } = options;
+  const _revalidateCache = useCallback2(
+    async (shouldDedupe, retryCount = 0) => {
+      let startAt;
+      const shouldStartRequest = !manager.request || !shouldDedupe;
+      function deleteActiveRequest() {
+        const activeRequest = manager.request;
+        if (!activeRequest)
+          return;
+        if (activeRequest.timestamp !== startAt)
+          return;
+        manager.request = 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);
+        }, timeout);
+      }
+      try {
+        if (shouldStartRequest) {
+          const currentCache = manager.cache;
+          if (!currentCache)
+            manager.cache = { isLoading: true };
+          manager.request = {
+            fetcher: fetcher(),
+            timestamp: ++timestamp
+          };
+        }
+        const activeRequest = manager.request;
+        if (!activeRequest)
+          return;
+        startAt = activeRequest.timestamp;
+        const newData = await activeRequest.fetcher;
+        if (shouldStartRequest) {
+          setTimeout(deleteActiveRequest, dedupingInterval);
+        }
+        if (!manager.request || manager.request.timestamp !== startAt)
+          return;
+        const activeMutation = manager.mutation;
+        if (activeMutation && (activeMutation.startTime > startAt || activeMutation.endTime > startAt || activeMutation.endTime === 0)) {
+          return;
+        }
+        manager.cache = {
+          isLoading: false,
+          data: newData
+        };
+      } catch (err) {
+        deleteActiveRequest();
+        const isVisible = document.visibilityState === "visible";
+        const isOnline = isOnlineRef.current;
+        if (shouldStartRequest && isVisible && isOnline)
+          handleError();
+        manager.cache = {
+          data: manager.cache?.data,
+          isLoading: false,
+          error: err
+        };
+      }
+      return;
+    },
+    [manager, fetcher, dedupingInterval, errorRetryInterval, errorRetryCount]
+  );
+  useEffect2(() => {
+    function handleIsOnline() {
+      isOnlineRef.current = true;
+    }
+    function handleIsOffline() {
+      isOnlineRef.current = false;
+    }
+    window.addEventListener("online", handleIsOnline);
+    window.addEventListener("offline", handleIsOffline);
+    return () => {
+      window.removeEventListener("online", handleIsOnline);
+      window.removeEventListener("offline", handleIsOffline);
+    };
+  }, []);
+  const revalidateCache = useCallback2(
+    (shoulDedupe) => {
+      return _revalidateCache(shoulDedupe, 0);
+    },
+    [_revalidateCache]
+  );
+  return revalidateCache;
+}
+function useMutate(manager, revalidateCache) {
+  const mutate = useCallback2(
+    async (data, options) => {
+      const beforeMutationTimestamp = ++timestamp;
+      manager.mutation = {
+        startTime: beforeMutationTimestamp,
+        endTime: 0
+      };
+      const currentCache = manager.cache;
+      manager.cache = {
+        isLoading: false,
+        data: options.optimisticData
+      };
+      let error;
+      try {
+        await data;
+      } catch (err) {
+        error = err;
+      }
+      const activeMutation = manager.mutation;
+      if (activeMutation && beforeMutationTimestamp !== activeMutation.startTime) {
+        if (error)
+          throw error;
+        return;
+      }
+      if (error) {
+        manager.cache = currentCache;
+      }
+      manager.mutation = {
+        startTime: beforeMutationTimestamp,
+        endTime: ++timestamp
+      };
+      manager.request = void 0;
+      void revalidateCache(false);
+      if (error)
+        throw error;
+    },
+    [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.cache?.error) {
+          void revalidateCache(true).then(scheduleRevalidation);
+          return;
+        }
+        scheduleRevalidation();
+      }, refreshInterval);
+    }
+    scheduleRevalidation();
+    return () => {
+      window.clearTimeout(revalidationTimerId);
+    };
+  }, [revalidateCache, refreshInterval, isOnline, isDocumentVisible, manager]);
+  useEffect2(() => {
+    function handleIsOnline() {
+      if (revalidateOnReconnect && isDocumentVisible) {
+        void revalidateCache(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(true);
+      }
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [revalidateCache, revalidateOnFocus, isOnline]);
 }
-function createThreadsManager() {
+function createCacheManager() {
   let cache;
   let request;
   let mutation;
@@ -136,516 +363,482 @@ function createThreadsManager() {
     }
   };
 }
-function handleCommentsApiError(err) {
-  const message = `Request failed with status ${err.status}: ${err.message}`;
-  if (err.details?.error === "FORBIDDEN") {
-    const detailedMessage = [message, err.details.suggestion, err.details.docs].filter(Boolean).join("\n");
-    console2.error(detailedMessage);
-  }
-  return new Error(message);
+
+// src/comments/CommentsRoom.ts
+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()}`;
+}
+function getPollingInterval(isBrowserOnline, isDocumentVisible, isRoomConnected) {
+  if (!isBrowserOnline || !isDocumentVisible)
+    return;
+  if (isRoomConnected)
+    return POLLING_INTERVAL_REALTIME;
+  return POLLING_INTERVAL;
 }
 function createCommentsRoom(room, errorEventSource) {
-  const manager = createThreadsManager();
-  let timestamp = 0;
-  let commentsEventRefCount = 0;
-  let commentsEventDisposer;
-  async function mutate(data, options) {
-    const beforeMutationTimestamp = ++timestamp;
-    manager.mutation = {
-      startTime: beforeMutationTimestamp,
-      endTime: 0
-    };
-    const currentCache = manager.cache;
-    manager.cache = {
-      isLoading: false,
-      threads: options.optimisticData
-    };
-    try {
-      await data;
-      const activeMutation = manager.mutation;
-      if (activeMutation && beforeMutationTimestamp !== activeMutation.startTime) {
-        return;
-      }
-    } catch (err) {
-      manager.cache = currentCache;
-      throw err;
-    }
-    manager.mutation = {
-      startTime: beforeMutationTimestamp,
-      endTime: ++timestamp
-    };
-    manager.request = void 0;
-    void revalidateCache(false);
-  }
-  async function revalidateCache(shouldDedupe, retryCount = 0) {
-    let startAt;
-    const shouldStartRequest = !manager.request || !shouldDedupe;
-    function deleteActiveRequest() {
-      const activeRequest = manager.request;
-      if (!activeRequest)
-        return;
-      if (activeRequest.timestamp !== startAt)
-        return;
-      manager.request = void 0;
-    }
-    function handleError() {
-      const timeout = ~~((Math.random() + 0.5) * (1 << (retryCount < 8 ? retryCount : 8))) * ERROR_RETRY_INTERVAL;
-      if (retryCount > MAX_ERROR_RETRY_COUNT)
-        return;
-      setTimeout(() => {
-        void revalidateCache(true, retryCount + 1);
-      }, timeout);
-    }
-    try {
-      if (shouldStartRequest) {
-        const currentCache = manager.cache;
-        if (!currentCache)
-          manager.cache = { isLoading: true };
-        manager.request = {
-          fetcher: room.getThreads(),
-          timestamp: ++timestamp
-        };
-      }
-      const activeRequest = manager.request;
-      if (!activeRequest)
-        return;
-      const newData = await activeRequest.fetcher;
-      startAt = activeRequest.timestamp;
-      if (shouldStartRequest) {
-        setTimeout(deleteActiveRequest, DEDUPING_INTERVAL);
-      }
-      if (!manager.request || manager.request.timestamp !== startAt)
-        return;
-      const activeMutation = manager.mutation;
-      if (activeMutation && (activeMutation.startTime > startAt || activeMutation.endTime > startAt || activeMutation.endTime === 0)) {
-        return;
-      }
-      manager.cache = {
-        isLoading: false,
-        threads: newData
-      };
-    } catch (err) {
-      if (shouldStartRequest)
-        handleError();
-      deleteActiveRequest();
-      manager.cache = {
-        isLoading: false,
-        error: err
-      };
-    }
-  }
-  function editThreadMetadata(options) {
-    const threadId = options.threadId;
-    const metadata = "metadata" in options ? options.metadata : {};
-    const threads = getThreads();
-    const optimisticData = threads.map(
-      (thread) => thread.id === threadId ? {
-        ...thread,
-        metadata: {
-          ...thread.metadata,
-          ...metadata
-        }
-      } : thread
-    );
-    mutate(room.editThreadMetadata({ metadata, threadId }), {
-      optimisticData
-    }).catch((err) => {
-      if (!(err instanceof CommentsApiError)) {
-        throw err;
-      }
-      const error = handleCommentsApiError(err);
-      errorEventSource.notify(
-        new EditThreadMetadataError(error, {
-          roomId: room.id,
-          threadId,
-          metadata
-        })
-      );
-    });
-  }
-  function createThread(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 now = (/* @__PURE__ */ new Date()).toISOString();
-    const newComment = {
-      id: commentId,
-      threadId,
-      roomId: room.id,
-      createdAt: now,
-      type: "comment",
-      userId: getCurrentUserId(),
-      body,
-      reactions: []
-    };
-    const newThread = {
-      id: threadId,
-      type: "thread",
-      createdAt: now,
-      roomId: room.id,
-      metadata,
-      comments: [newComment]
-    };
-    mutate(room.createThread({ threadId, commentId, body, metadata }), {
-      optimisticData: [...threads, newThread]
-    }).catch((err) => {
-      if (!(err instanceof CommentsApiError)) {
-        throw err;
-      }
-      const error = handleCommentsApiError(err);
-      errorEventSource.notify(
-        new CreateThreadError(error, {
-          roomId: room.id,
-          threadId,
-          commentId,
-          body,
-          metadata
-        })
-      );
-    });
-    return newThread;
-  }
-  function createComment({
-    threadId,
-    body
-  }) {
-    const threads = getThreads();
-    const commentId = createOptimisticId(COMMENT_ID_PREFIX);
-    const now = (/* @__PURE__ */ new Date()).toISOString();
-    const comment = {
-      id: commentId,
-      threadId,
-      roomId: room.id,
-      type: "comment",
-      createdAt: now,
-      userId: getCurrentUserId(),
-      body,
-      reactions: []
-    };
-    const optimisticData = threads.map(
-      (thread) => thread.id === threadId ? {
-        ...thread,
-        comments: [...thread.comments, comment]
-      } : thread
-    );
-    mutate(room.createComment({ threadId, commentId, body }), {
-      optimisticData
-    }).catch((err) => {
-      if (!(err instanceof CommentsApiError)) {
-        throw err;
-      }
-      const error = handleCommentsApiError(err);
-      errorEventSource.notify(
-        new CreateCommentError(error, {
-          roomId: room.id,
-          threadId,
-          commentId,
-          body
-        })
-      );
-    });
-    return comment;
-  }
-  function editComment({ threadId, commentId, body }) {
-    const threads = getThreads();
-    const now = (/* @__PURE__ */ new Date()).toISOString();
-    const optimisticData = threads.map(
-      (thread) => thread.id === threadId ? {
-        ...thread,
-        comments: thread.comments.map(
-          (comment) => comment.id === commentId ? {
-            ...comment,
-            editedAt: now,
-            body
-          } : comment
-        )
-      } : thread
-    );
-    mutate(room.editComment({ threadId, commentId, body }), {
-      optimisticData
-    }).catch((err) => {
-      if (!(err instanceof CommentsApiError)) {
-        throw err;
-      }
-      const error = handleCommentsApiError(err);
-      errorEventSource.notify(
-        new EditCommentError(error, {
-          roomId: room.id,
-          threadId,
-          commentId,
-          body
-        })
-      );
-    });
-  }
-  function deleteComment({ threadId, commentId }) {
-    const threads = getThreads();
-    const now = (/* @__PURE__ */ new Date()).toISOString();
-    const newThreads = [];
-    for (const thread of threads) {
-      if (thread.id === threadId) {
-        const newThread = {
-          ...thread,
-          comments: thread.comments.map(
-            (comment) => comment.id === commentId ? {
-              ...comment,
-              deletedAt: now,
-              body: void 0
-            } : comment
-          )
-        };
-        if (newThread.comments.some((comment) => comment.deletedAt === void 0)) {
-          newThreads.push(newThread);
-        }
-      } else {
-        newThreads.push(thread);
-      }
-    }
-    mutate(room.deleteComment({ threadId, commentId }), {
-      optimisticData: newThreads
-    }).catch((err) => {
-      if (!(err instanceof CommentsApiError)) {
-        throw err;
-      }
-      const error = handleCommentsApiError(err);
-      errorEventSource.notify(
-        new DeleteCommentError(error, {
-          roomId: room.id,
-          threadId,
-          commentId
-        })
-      );
-    });
-  }
-  function getCurrentUserId() {
-    const self = room.getSelf();
-    if (self === null || self.id === void 0) {
-      return "anonymous";
-    } else {
-      return self.id;
-    }
-  }
-  function getThreads() {
-    const threads = manager.cache;
-    if (!threads || threads.isLoading || threads.error) {
-      throw new Error(
-        "Cannot update threads or comments before they are loaded."
-      );
-    }
-    return threads.threads;
-  }
-  function _subscribe() {
-    if (commentsEventRefCount === 0) {
-      commentsEventDisposer = room.events.comments.subscribe(() => {
-        void revalidateCache(true);
-      });
-    }
-    commentsEventRefCount = commentsEventRefCount + 1;
-    return () => {
-      commentsEventRefCount = commentsEventRefCount - 1;
-      if (commentsEventRefCount > 0)
-        return;
-      commentsEventDisposer?.();
-      commentsEventDisposer = void 0;
-    };
-  }
-  function usePolling() {
-    const status = useSyncExternalStore(
+  const manager = createCacheManager();
+  function _useThreads(revalidateCache) {
+    const status = useSyncExternalStore3(
       room.events.status.subscribe,
       room.getStatus,
       room.getStatus
     );
-    useEffect2(
-      () => {
-        const interval = status === "connected" ? POLLING_INTERVAL_REALTIME : POLLING_INTERVAL;
-        let revalidationTimerId;
-        function scheduleRevalidation() {
-          revalidationTimerId = window.setTimeout(
-            executeRevalidation,
-            interval
-          );
-        }
-        function executeRevalidation() {
-          void revalidateCache(true).then(scheduleRevalidation);
-        }
-        scheduleRevalidation();
-        return () => {
-          window.clearTimeout(revalidationTimerId);
-        };
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- ESLint recommends against adding `revalidateCache` as a dependency, but not doing so causes the code inside `useEffect` to reference an outdated version of `revalidateCache`
-      [status, revalidateCache]
+    const isOnline = useIsOnline();
+    const isDocumentVisible = useIsDocumentVisible();
+    const interval = getPollingInterval(
+      isOnline,
+      isDocumentVisible,
+      status === "connected"
     );
-  }
-  function useThreadsInternal() {
-    useEffect2(_subscribe, [_subscribe]);
-    usePolling();
-    const cache = useSyncExternalStore(
+    useAutomaticRevalidation(manager, revalidateCache, {
+      revalidateOnFocus: true,
+      revalidateOnReconnect: true,
+      refreshInterval: interval
+    });
+    useEffect3(() => {
+      const unsubscribe = room.events.comments.subscribe(() => {
+        void revalidateCache(true);
+      });
+      return () => {
+        unsubscribe();
+      };
+    }, [revalidateCache]);
+    const cache = useSyncExternalStore3(
       manager.subscribe,
       () => manager.cache,
       () => manager.cache
     );
-    return cache ?? { isLoading: true };
+    if (!cache || cache.isLoading) {
+      return { isLoading: true };
+    }
+    return {
+      isLoading: cache.isLoading,
+      threads: cache.data ?? [],
+      error: cache.error
+    };
   }
   function useThreads() {
-    useEffect2(
-      () => {
-        void revalidateCache(true);
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- ESLint recommends against adding `revalidateCache` as a dependency, but not doing so causes the code inside `useEffect` to reference an outdated version of `revalidateCache`
-      [revalidateCache]
-    );
-    return useThreadsInternal();
+    const revalidate = useRevalidateCache(manager, room.getThreads);
+    useEffect3(() => {
+      void revalidate(true);
+    }, [revalidate]);
+    return _useThreads(revalidate);
   }
   function useThreadsSuspense() {
-    const cache = useThreadsInternal();
-    if (cache.isLoading) {
-      throw revalidateCache(true);
-    }
+    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const cache = _useThreads(revalidate);
     if (cache.error) {
       throw cache.error;
     }
+    if (cache.isLoading || !cache.threads) {
+      throw revalidate(true);
+    }
     return {
       threads: cache.threads,
       isLoading: false
     };
   }
-  function addReaction({
-    threadId,
-    commentId,
-    emoji
-  }) {
-    const threads = getThreads();
-    const now = (/* @__PURE__ */ new Date()).toISOString();
-    const userId = getCurrentUserId();
-    const optimisticData = threads.map(
-      (thread) => thread.id === threadId ? {
-        ...thread,
-        comments: thread.comments.map((comment) => {
-          if (comment.id !== commentId) {
-            return comment;
-          }
-          let reactions;
-          if (comment.reactions.some((reaction) => reaction.emoji === emoji)) {
-            reactions = comment.reactions.map(
-              (reaction) => reaction.emoji === emoji ? {
-                ...reaction,
-                users: [...reaction.users, { id: userId }]
-              } : reaction
-            );
-          } else {
-            reactions = [
-              ...comment.reactions,
-              {
-                emoji,
-                createdAt: now,
-                users: [{ id: userId }]
-              }
-            ];
+  function useEditThreadMetadata() {
+    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const mutate = useMutate(manager, revalidate);
+    const editThreadMetadata = useCallback3(
+      (options) => {
+        const threadId = options.threadId;
+        const metadata = "metadata" in options ? options.metadata : {};
+        const threads = getThreads();
+        const optimisticData = threads.map(
+          (thread) => thread.id === threadId ? {
+            ...thread,
+            metadata: {
+              ...thread.metadata,
+              ...metadata
+            }
+          } : thread
+        );
+        mutate(room.editThreadMetadata({ metadata, threadId }), {
+          optimisticData
+        }).catch((err) => {
+          if (!(err instanceof CommentsApiError)) {
+            throw err;
           }
-          return {
-            ...comment,
-            reactions
-          };
-        })
-      } : thread
+          const error = handleCommentsApiError(err);
+          errorEventSource.notify(
+            new EditThreadMetadataError(error, {
+              roomId: room.id,
+              threadId,
+              metadata
+            })
+          );
+        });
+      },
+      [mutate]
     );
-    mutate(room.addReaction({ threadId, commentId, emoji }), {
-      optimisticData
-    }).catch((err) => {
-      if (!(err instanceof CommentsApiError)) {
-        throw err;
-      }
-      const error = handleCommentsApiError(err);
-      errorEventSource.notify(
-        new AddReactionError(error, {
+    return editThreadMetadata;
+  }
+  function useCreateThread() {
+    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const mutate = useMutate(manager, revalidate);
+    const createThread = useCallback3(
+      (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 now = /* @__PURE__ */ new Date();
+        const newComment = {
+          id: commentId,
+          threadId,
           roomId: room.id,
+          createdAt: now,
+          type: "comment",
+          userId: getCurrentUserId(),
+          body,
+          reactions: []
+        };
+        const newThread = {
+          id: threadId,
+          type: "thread",
+          createdAt: now,
+          roomId: room.id,
+          metadata,
+          comments: [newComment]
+        };
+        mutate(room.createThread({ threadId, commentId, body, metadata }), {
+          optimisticData: [...threads, newThread]
+        }).catch((err) => {
+          if (!(err instanceof CommentsApiError)) {
+            throw err;
+          }
+          const error = handleCommentsApiError(err);
+          errorEventSource.notify(
+            new CreateThreadError(error, {
+              roomId: room.id,
+              threadId,
+              commentId,
+              body,
+              metadata
+            })
+          );
+        });
+        return newThread;
+      },
+      [mutate]
+    );
+    return createThread;
+  }
+  function useCreateComment() {
+    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const mutate = useMutate(manager, revalidate);
+    const createComment = useCallback3(
+      ({ threadId, body }) => {
+        const threads = getThreads();
+        const commentId = createOptimisticId(COMMENT_ID_PREFIX);
+        const now = /* @__PURE__ */ new Date();
+        const comment = {
+          id: commentId,
           threadId,
-          commentId,
-          emoji
-        })
-      );
-    });
+          roomId: room.id,
+          type: "comment",
+          createdAt: now,
+          userId: getCurrentUserId(),
+          body,
+          reactions: []
+        };
+        const optimisticData = threads.map(
+          (thread) => thread.id === threadId ? {
+            ...thread,
+            comments: [...thread.comments, comment]
+          } : thread
+        );
+        mutate(room.createComment({ threadId, commentId, body }), {
+          optimisticData
+        }).catch((err) => {
+          if (!(err instanceof CommentsApiError)) {
+            throw err;
+          }
+          const error = handleCommentsApiError(err);
+          errorEventSource.notify(
+            new CreateCommentError(error, {
+              roomId: room.id,
+              threadId,
+              commentId,
+              body
+            })
+          );
+        });
+        return comment;
+      },
+      [mutate]
+    );
+    return createComment;
   }
-  function removeReaction({
-    threadId,
-    commentId,
-    emoji
-  }) {
-    const threads = getThreads();
-    const userId = getCurrentUserId();
-    const optimisticData = threads.map(
-      (thread) => thread.id === threadId ? {
-        ...thread,
-        comments: thread.comments.map((comment) => {
-          if (comment.id !== commentId) {
-            return comment;
+  function useEditComment() {
+    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const mutate = useMutate(manager, revalidate);
+    const editComment = useCallback3(
+      ({ threadId, commentId, body }) => {
+        const threads = getThreads();
+        const now = /* @__PURE__ */ new Date();
+        const optimisticData = threads.map(
+          (thread) => thread.id === threadId ? {
+            ...thread,
+            comments: thread.comments.map(
+              (comment) => comment.id === commentId ? {
+                ...comment,
+                editedAt: now,
+                body
+              } : comment
+            )
+          } : thread
+        );
+        mutate(room.editComment({ threadId, commentId, body }), {
+          optimisticData
+        }).catch((err) => {
+          if (!(err instanceof CommentsApiError)) {
+            throw err;
           }
-          const reactionIndex = comment.reactions.findIndex(
-            (reaction) => reaction.emoji === emoji
+          const error = handleCommentsApiError(err);
+          errorEventSource.notify(
+            new EditCommentError(error, {
+              roomId: room.id,
+              threadId,
+              commentId,
+              body
+            })
           );
-          let reactions = comment.reactions;
-          if (reactionIndex >= 0 && comment.reactions[reactionIndex].users.some(
-            (user) => user.id === userId
-          )) {
-            if (comment.reactions[reactionIndex].users.length <= 1) {
-              reactions = [...comment.reactions];
-              reactions.splice(reactionIndex, 1);
-            } else {
-              reactions[reactionIndex] = {
-                ...reactions[reactionIndex],
-                users: reactions[reactionIndex].users.filter(
-                  (user) => user.id !== userId
-                )
-              };
+        });
+      },
+      [mutate]
+    );
+    return editComment;
+  }
+  function useDeleteComment() {
+    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const mutate = useMutate(manager, revalidate);
+    const deleteComment = useCallback3(
+      ({ threadId, commentId }) => {
+        const threads = getThreads();
+        const now = /* @__PURE__ */ new Date();
+        const newThreads = [];
+        for (const thread of threads) {
+          if (thread.id === threadId) {
+            const newThread = {
+              ...thread,
+              comments: thread.comments.map(
+                (comment) => comment.id === commentId ? {
+                  ...comment,
+                  deletedAt: now,
+                  body: void 0
+                } : comment
+              )
+            };
+            if (newThread.comments.some(
+              (comment) => comment.deletedAt === void 0
+            )) {
+              newThreads.push(newThread);
             }
+          } else {
+            newThreads.push(thread);
           }
-          return {
-            ...comment,
-            reactions
-          };
-        })
-      } : thread
+        }
+        mutate(room.deleteComment({ threadId, commentId }), {
+          optimisticData: newThreads
+        }).catch((err) => {
+          if (!(err instanceof CommentsApiError)) {
+            throw err;
+          }
+          const error = handleCommentsApiError(err);
+          errorEventSource.notify(
+            new DeleteCommentError(error, {
+              roomId: room.id,
+              threadId,
+              commentId
+            })
+          );
+        });
+      },
+      [mutate]
     );
-    mutate(room.removeReaction({ threadId, commentId, emoji }), {
-      optimisticData
-    }).catch((err) => {
-      if (!(err instanceof CommentsApiError)) {
-        throw err;
-      }
-      const error = handleCommentsApiError(err);
-      errorEventSource.notify(
-        new RemoveReactionError(error, {
-          roomId: room.id,
-          threadId,
-          commentId,
-          emoji
-        })
+    return deleteComment;
+  }
+  function useAddReaction() {
+    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const mutate = useMutate(manager, revalidate);
+    const createComment = useCallback3(
+      ({ threadId, commentId, emoji }) => {
+        const threads = getThreads();
+        const now = /* @__PURE__ */ new Date();
+        const userId = getCurrentUserId();
+        const optimisticData = threads.map(
+          (thread) => thread.id === threadId ? {
+            ...thread,
+            comments: thread.comments.map((comment) => {
+              if (comment.id !== commentId) {
+                return comment;
+              }
+              let reactions;
+              if (comment.reactions.some(
+                (reaction) => reaction.emoji === emoji
+              )) {
+                reactions = comment.reactions.map(
+                  (reaction) => reaction.emoji === emoji ? {
+                    ...reaction,
+                    users: [...reaction.users, { id: userId }]
+                  } : reaction
+                );
+              } else {
+                reactions = [
+                  ...comment.reactions,
+                  {
+                    emoji,
+                    createdAt: now,
+                    users: [{ id: userId }]
+                  }
+                ];
+              }
+              return {
+                ...comment,
+                reactions
+              };
+            })
+          } : thread
+        );
+        mutate(room.addReaction({ threadId, commentId, emoji }), {
+          optimisticData
+        }).catch((err) => {
+          if (!(err instanceof CommentsApiError)) {
+            throw err;
+          }
+          const error = handleCommentsApiError(err);
+          errorEventSource.notify(
+            new AddReactionError(error, {
+              roomId: room.id,
+              threadId,
+              commentId,
+              emoji
+            })
+          );
+        });
+      },
+      [mutate]
+    );
+    return createComment;
+  }
+  function useRemoveReaction() {
+    const revalidate = useRevalidateCache(manager, room.getThreads);
+    const mutate = useMutate(manager, revalidate);
+    const createComment = useCallback3(
+      ({ threadId, commentId, emoji }) => {
+        const threads = getThreads();
+        const userId = getCurrentUserId();
+        const optimisticData = threads.map(
+          (thread) => thread.id === threadId ? {
+            ...thread,
+            comments: thread.comments.map((comment) => {
+              if (comment.id !== commentId) {
+                return comment;
+              }
+              const reactionIndex = comment.reactions.findIndex(
+                (reaction) => reaction.emoji === emoji
+              );
+              let reactions = comment.reactions;
+              if (reactionIndex >= 0 && comment.reactions[reactionIndex].users.some(
+                (user) => user.id === userId
+              )) {
+                if (comment.reactions[reactionIndex].users.length <= 1) {
+                  reactions = [...comment.reactions];
+                  reactions.splice(reactionIndex, 1);
+                } else {
+                  reactions[reactionIndex] = {
+                    ...reactions[reactionIndex],
+                    users: reactions[reactionIndex].users.filter(
+                      (user) => user.id !== userId
+                    )
+                  };
+                }
+              }
+              return {
+                ...comment,
+                reactions
+              };
+            })
+          } : thread
+        );
+        mutate(room.removeReaction({ threadId, commentId, emoji }), {
+          optimisticData
+        }).catch((err) => {
+          if (!(err instanceof CommentsApiError)) {
+            throw err;
+          }
+          const error = handleCommentsApiError(err);
+          errorEventSource.notify(
+            new RemoveReactionError(error, {
+              roomId: room.id,
+              threadId,
+              commentId,
+              emoji
+            })
+          );
+        });
+      },
+      [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 (err.details?.error === "FORBIDDEN") {
+      const detailedMessage = [
+        message,
+        err.details.suggestion,
+        err.details.docs
+      ].filter(Boolean).join("\n");
+      console2.error(detailedMessage);
+    }
+    return new Error(message);
   }
   return {
     useThreads,
     useThreadsSuspense,
-    editThreadMetadata,
-    addReaction,
-    removeReaction,
-    createThread,
-    createComment,
-    editComment,
-    deleteComment
+    useCreateThread,
+    useEditThreadMetadata,
+    useCreateComment,
+    useEditComment,
+    useDeleteComment,
+    useAddReaction,
+    useRemoveReaction
   };
 }
 
 // src/comments/lib/use-debounce.ts
-import { useEffect as useEffect3, useRef, 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 = useRef();
+  const timeout = useRef3();
   const [debouncedValue, setDebouncedValue] = useState2(value);
-  useEffect3(() => {
+  useEffect4(() => {
     if (delay === false) {
       return;
     }
@@ -664,8 +857,8 @@ function useDebounce(value, delay = DEFAULT_DELAY) {
 }
 
 // src/lib/use-async-cache.ts
-import { useCallback, useEffect as useEffect4, useMemo, useRef as useRef2 } from "react";
-import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external-store/shim/index.js";
+import { useCallback as useCallback4, useEffect as useEffect5, useMemo, useRef as useRef4 } from "react";
+import { useSyncExternalStore as useSyncExternalStore4 } from "use-sync-external-store/shim/index.js";
 
 // src/lib/use-initial.ts
 import { useState as useState3 } from "react";
@@ -691,19 +884,19 @@ function useAsyncCache(cache, key, options) {
     void cacheItem2.get();
     return cacheItem2;
   }, [cache, key]);
-  const subscribe = useCallback(
+  const subscribe2 = useCallback4(
     (callback) => cacheItem?.subscribe(callback) ?? noop,
     [cacheItem]
   );
-  const getState = useCallback(
+  const getState = useCallback4(
     () => cacheItem?.getState() ?? INITIAL_ASYNC_STATE,
     [cacheItem]
   );
-  const revalidate = useCallback(() => cacheItem?.revalidate(), [cacheItem]);
-  const state = useSyncExternalStore2(subscribe, getState, getState);
-  const previousData = useRef2();
+  const revalidate = useCallback4(() => cacheItem?.revalidate(), [cacheItem]);
+  const state = useSyncExternalStore4(subscribe2, getState, getState);
+  const previousData = useRef4();
   let data = state.data;
-  useEffect4(() => {
+  useEffect5(() => {
     previousData.current = { key, data: state.data };
   }, [key, state.data]);
   if (!cacheItem) {
@@ -742,10 +935,10 @@ function useAsyncCache(cache, key, options) {
 }
 
 // src/lib/use-latest.ts
-import { useEffect as useEffect5, useRef as useRef3 } from "react";
+import { useEffect as useEffect6, useRef as useRef5 } from "react";
 function useLatest(value) {
-  const ref = useRef3(value);
-  useEffect5(() => {
+  const ref = useRef5(value);
+  useEffect6(() => {
     ref.current = value;
   }, [value]);
   return ref;
@@ -780,7 +973,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 useSyncExternalStore3(s, gs, gss) {
+function useSyncExternalStore5(s, gs, gss) {
   return useSyncExternalStoreWithSelector(s, gs, gss, identity);
 }
 var STABLE_EMPTY_LIST = Object.freeze([]);
@@ -931,16 +1124,16 @@ function createRoomContext(client, options) {
   }
   function useStatus() {
     const room = useRoom();
-    const subscribe = room.events.status.subscribe;
-    const getSnapshot = room.getStatus;
+    const subscribe2 = room.events.status.subscribe;
+    const getSnapshot2 = room.getStatus;
     const getServerSnapshot = room.getStatus;
-    return useSyncExternalStore3(subscribe, getSnapshot, getServerSnapshot);
+    return useSyncExternalStore5(subscribe2, getSnapshot2, getServerSnapshot);
   }
   function useMyPresence() {
     const room = useRoom();
-    const subscribe = room.events.myPresence.subscribe;
-    const getSnapshot = room.getPresence;
-    const presence = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
+    const subscribe2 = room.events.myPresence.subscribe;
+    const getSnapshot2 = room.getPresence;
+    const presence = useSyncExternalStore5(subscribe2, getSnapshot2, getSnapshot2);
     const setPresence = room.updatePresence;
     return [presence, setPresence];
   }
@@ -949,12 +1142,12 @@ function createRoomContext(client, options) {
   }
   function useOthers(selector, isEqual) {
     const room = useRoom();
-    const subscribe = room.events.others.subscribe;
-    const getSnapshot = room.getOthers;
+    const subscribe2 = room.events.others.subscribe;
+    const getSnapshot2 = room.getOthers;
     const getServerSnapshot = alwaysEmptyList;
     return useSyncExternalStoreWithSelector(
-      subscribe,
-      getSnapshot,
+      subscribe2,
+      getSnapshot2,
       getServerSnapshot,
       selector ?? identity,
       isEqual
@@ -1058,8 +1251,8 @@ function createRoomContext(client, options) {
   }
   function useSelf(maybeSelector, isEqual) {
     const room = useRoom();
-    const subscribe = room.events.self.subscribe;
-    const getSnapshot = room.getSelf;
+    const subscribe2 = room.events.self.subscribe;
+    const getSnapshot2 = room.getSelf;
     const selector = maybeSelector ?? identity;
     const wrappedSelector = React2.useCallback(
       (me) => me !== null ? selector(me) : null,
@@ -1067,8 +1260,8 @@ function createRoomContext(client, options) {
     );
     const getServerSnapshot = alwaysNull;
     return useSyncExternalStoreWithSelector(
-      subscribe,
-      getSnapshot,
+      subscribe2,
+      getSnapshot2,
       getServerSnapshot,
       wrappedSelector,
       isEqual
@@ -1076,10 +1269,10 @@ function createRoomContext(client, options) {
   }
   function useMutableStorageRoot() {
     const room = useRoom();
-    const subscribe = room.events.storageDidLoad.subscribeOnce;
-    const getSnapshot = room.getStorageSnapshot;
+    const subscribe2 = room.events.storageDidLoad.subscribeOnce;
+    const getSnapshot2 = room.getStorageSnapshot;
     const getServerSnapshot = alwaysNull;
-    return useSyncExternalStore3(subscribe, getSnapshot, getServerSnapshot);
+    return useSyncExternalStore5(subscribe2, getSnapshot2, getServerSnapshot);
   }
   function useStorageRoot() {
     return [useMutableStorageRoot()];
@@ -1095,15 +1288,15 @@ function createRoomContext(client, options) {
   }
   function useCanUndo() {
     const room = useRoom();
-    const subscribe = room.events.history.subscribe;
+    const subscribe2 = room.events.history.subscribe;
     const canUndo = room.history.canUndo;
-    return useSyncExternalStore3(subscribe, canUndo, canUndo);
+    return useSyncExternalStore5(subscribe2, canUndo, canUndo);
   }
   function useCanRedo() {
     const room = useRoom();
-    const subscribe = room.events.history.subscribe;
+    const subscribe2 = room.events.history.subscribe;
     const canRedo = room.history.canRedo;
-    return useSyncExternalStore3(subscribe, canRedo, canRedo);
+    return useSyncExternalStore5(subscribe2, canRedo, canRedo);
   }
   function useBatch() {
     return useRoom().batch;
@@ -1152,11 +1345,11 @@ function createRoomContext(client, options) {
       (rootOrNull2) => rootOrNull2 !== null ? selector(rootOrNull2) : null,
       [selector]
     );
-    const subscribe = React2.useCallback(
+    const subscribe2 = React2.useCallback(
       (onStoreChange) => rootOrNull !== null ? room.subscribe(rootOrNull, onStoreChange, { isDeep: true }) : noop2,
       [room, rootOrNull]
     );
-    const getSnapshot = React2.useCallback(() => {
+    const getSnapshot2 = React2.useCallback(() => {
       if (rootOrNull === null) {
         return null;
       } else {
@@ -1167,8 +1360,8 @@ function createRoomContext(client, options) {
     }, [rootOrNull]);
     const getServerSnapshot = alwaysNull;
     return useSyncExternalStoreWithSelector(
-      subscribe,
-      getSnapshot,
+      subscribe2,
+      getSnapshot2,
       getServerSnapshot,
       wrappedSelector,
       isEqual
@@ -1280,52 +1473,31 @@ function createRoomContext(client, options) {
   }
   function useCreateThread() {
     const room = useRoom();
-    return React2.useCallback(
-      (options2) => getCommentsRoom(room).createThread(options2),
-      [room]
-    );
+    return getCommentsRoom(room).useCreateThread();
   }
   function useEditThreadMetadata() {
     const room = useRoom();
-    return React2.useCallback(
-      (options2) => getCommentsRoom(room).editThreadMetadata(options2),
-      [room]
-    );
+    return getCommentsRoom(room).useEditThreadMetadata();
   }
   function useAddReaction() {
     const room = useRoom();
-    return React2.useCallback(
-      (options2) => getCommentsRoom(room).addReaction(options2),
-      [room]
-    );
+    return getCommentsRoom(room).useAddReaction();
   }
   function useRemoveReaction() {
     const room = useRoom();
-    return React2.useCallback(
-      (options2) => getCommentsRoom(room).removeReaction(options2),
-      [room]
-    );
+    return getCommentsRoom(room).useRemoveReaction();
   }
   function useCreateComment() {
     const room = useRoom();
-    return React2.useCallback(
-      (options2) => getCommentsRoom(room).createComment(options2),
-      [room]
-    );
+    return getCommentsRoom(room).useCreateComment();
   }
   function useEditComment() {
     const room = useRoom();
-    return React2.useCallback(
-      (options2) => getCommentsRoom(room).editComment(options2),
-      [room]
-    );
+    return getCommentsRoom(room).useEditComment();
   }
   function useDeleteComment() {
     const room = useRoom();
-    return React2.useCallback(
-      (options2) => getCommentsRoom(room).deleteComment(options2),
-      [room]
-    );
+    return getCommentsRoom(room).useDeleteComment();
   }
   const { resolveUsers, resolveMentionSuggestions } = options ?? {};
   const usersCache = resolveUsers ? createAsyncCache(async (stringifiedOptions) => {