@liveblocks/react 1.10.0-beta4 → 1.10.1

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.10.0-beta4";
+var PKG_VERSION = "1.10.1";
 var PKG_FORMAT = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -40,6 +40,18 @@ function selectedInboxNotifications(state) {
   );
 }
 
+// src/lib/retry-error.ts
+var MAX_ERROR_RETRY_COUNT = 5;
+var ERROR_RETRY_INTERVAL = 5e3;
+function retryError(action, retryCount) {
+  if (retryCount >= MAX_ERROR_RETRY_COUNT)
+    return;
+  const timeout = Math.pow(2, retryCount) * ERROR_RETRY_INTERVAL;
+  setTimeout(() => {
+    void action();
+  }, timeout);
+}
+
 // src/shared.ts
 import { kInternal as kInternal2 } from "@liveblocks/core";
 import { useCallback as useCallback2, useContext as useContext2, useEffect as useEffect4 } from "react";
@@ -392,6 +404,15 @@ function createRoomContext(client, options) {
     React2.useEffect(() => {
       void getThreadsUpdates(room.id);
     }, [room.id]);
+    React2.useEffect(() => {
+      function handleIsOnline() {
+        void getThreadsUpdates(room.id);
+      }
+      window.addEventListener("online", handleIsOnline);
+      return () => {
+        window.removeEventListener("online", handleIsOnline);
+      };
+    }, [room.id]);
     React2.useEffect(() => {
       const pair = stableEnterRoom(roomId, frozenProps);
       setRoomLeavePair(pair);
@@ -771,7 +792,8 @@ function createRoomContext(client, options) {
     }
     throw innerError;
   }
-  const requestsCache = /* @__PURE__ */ new Map();
+  const subscribersByQuery = /* @__PURE__ */ new Map();
+  const requestsByQuery = /* @__PURE__ */ new Map();
   const poller = makePoller(refreshThreadsAndNotifications);
   async function refreshThreadsAndNotifications() {
     const requests = [];
@@ -779,85 +801,43 @@ function createRoomContext(client, options) {
       const room = client.getRoom(roomId);
       if (room === null)
         return;
-      const notificationSettingsQuery = makeNotificationSettingsQueryKey(
-        room.id
-      );
-      if (requestsCache.has(notificationSettingsQuery)) {
-        requests.push(
-          room[kInternal].notifications.getRoomNotificationSettings().then((settings) => {
-            store.updateRoomInboxNotificationSettings(
-              room.id,
-              settings,
-              notificationSettingsQuery
-            );
-          }).catch(() => {
-          })
-        );
-      }
-      const lastRequestedAt = lastRequestedAtByRoom.get(room.id);
-      if (lastRequestedAt === void 0)
-        return;
-      requests.push(
-        room[kInternal].comments.getThreads({ since: lastRequestedAt }).then((result) => {
-          store.updateThreadsAndNotifications(
-            result.threads,
-            result.inboxNotifications,
-            result.deletedThreads,
-            result.deletedInboxNotifications
-          );
-          const room2 = client.getRoom(roomId);
-          if (room2 === null)
-            return;
-          lastRequestedAtByRoom.set(room2.id, result.meta.requestedAt);
-        }).catch(() => {
-        })
-      );
+      requests.push(getThreadsUpdates(room.id));
     });
     await Promise.allSettled(requests);
   }
   function incrementQuerySubscribers(queryKey) {
-    const requestCache = requestsCache.get(queryKey);
-    if (requestCache === void 0) {
-      console2.warn(
-        `Internal unexpected behavior. Cannot increase subscriber count for query "${queryKey}"`
-      );
-      return;
-    }
-    requestCache.subscribers++;
+    const subscribers = subscribersByQuery.get(queryKey) ?? 0;
+    subscribersByQuery.set(queryKey, subscribers + 1);
     poller.start(POLLING_INTERVAL);
   }
   function decrementQuerySubscribers(queryKey) {
-    const requestCache = requestsCache.get(queryKey);
-    if (requestCache === void 0 || requestCache.subscribers <= 0) {
+    const subscribers = subscribersByQuery.get(queryKey);
+    if (subscribers === void 0 || subscribers <= 0) {
       console2.warn(
         `Internal unexpected behavior. Cannot decrease subscriber count for query "${queryKey}"`
       );
       return;
     }
-    requestCache.subscribers--;
+    subscribersByQuery.set(queryKey, subscribers - 1);
     let totalSubscribers = 0;
-    for (const requestCache2 of requestsCache.values()) {
-      totalSubscribers += requestCache2.subscribers;
+    for (const subscribers2 of subscribersByQuery.values()) {
+      totalSubscribers += subscribers2;
     }
     if (totalSubscribers <= 0) {
       poller.stop();
     }
   }
-  async function getThreadsAndInboxNotifications(room, queryKey, options2) {
-    const requestInfo = requestsCache.get(queryKey);
-    if (requestInfo !== void 0) {
-      return requestInfo.promise;
-    }
-    const promise = room[kInternal].comments.getThreads(options2);
-    requestsCache.set(queryKey, {
-      promise,
-      subscribers: 0
-    });
+  async function getThreadsAndInboxNotifications(room, queryKey, options2, { retryCount } = { retryCount: 0 }) {
+    const existingRequest = requestsByQuery.get(queryKey);
+    if (existingRequest !== void 0)
+      return existingRequest;
+    const request = room[kInternal].comments.getThreads(options2);
+    requestsByQuery.set(queryKey, request);
     store.setQueryState(queryKey, {
       isLoading: true
     });
     try {
-      const result = await promise;
+      const result = await request;
       store.updateThreadsAndNotifications(
         result.threads,
         result.inboxNotifications,
@@ -869,17 +849,24 @@ function createRoomContext(client, options) {
       if (lastRequestedAt === void 0 || lastRequestedAt > result.meta.requestedAt) {
         lastRequestedAtByRoom.set(room.id, result.meta.requestedAt);
       }
+      poller.start(POLLING_INTERVAL);
     } catch (err) {
+      requestsByQuery.delete(queryKey);
+      retryError(() => {
+        void getThreadsAndInboxNotifications(room, queryKey, options2, {
+          retryCount: retryCount + 1
+        });
+      }, retryCount);
       store.setQueryState(queryKey, {
         isLoading: false,
         error: err
       });
+      return;
     }
-    poller.start(POLLING_INTERVAL);
   }
   const DEFAULT_DEDUPING_INTERVAL = 2e3;
   const lastRequestedAtByRoom = /* @__PURE__ */ new Map();
-  let isFetchingThreadsUpdates = false;
+  const requestStatusByRoom = /* @__PURE__ */ new Map();
   async function getThreadsUpdates(roomId) {
     const room = client.getRoom(roomId);
     if (room === null)
@@ -887,13 +874,14 @@ function createRoomContext(client, options) {
     const since = lastRequestedAtByRoom.get(room.id);
     if (since === void 0)
       return;
-    if (isFetchingThreadsUpdates)
+    const isFetchingThreadsUpdates = requestStatusByRoom.get(room.id) ?? false;
+    if (isFetchingThreadsUpdates === true)
       return;
     try {
-      isFetchingThreadsUpdates = true;
+      requestStatusByRoom.set(room.id, true);
       const updates = await room[kInternal].comments.getThreads({ since });
       setTimeout(() => {
-        isFetchingThreadsUpdates = false;
+        requestStatusByRoom.set(room.id, false);
       }, DEFAULT_DEDUPING_INTERVAL);
       store.updateThreadsAndNotifications(
         updates.threads,
@@ -903,7 +891,8 @@ function createRoomContext(client, options) {
       );
       lastRequestedAtByRoom.set(room.id, updates.meta.requestedAt);
     } catch (err) {
-      isFetchingThreadsUpdates = false;
+      requestStatusByRoom.set(room.id, false);
+      return;
     }
   }
   function useThreads(options2 = { query: { metadata: {} } }) {
@@ -1560,37 +1549,37 @@ function createRoomContext(client, options) {
   function makeNotificationSettingsQueryKey(roomId) {
     return `${roomId}:NOTIFICATION_SETTINGS`;
   }
-  async function getInboxNotificationSettings(room, queryKey) {
-    const requestInfo = requestsCache.get(queryKey);
-    if (requestInfo !== void 0) {
-      return requestInfo.promise;
-    }
-    const promise = room[kInternal].notifications.getRoomNotificationSettings();
-    requestsCache.set(queryKey, {
-      promise,
-      subscribers: 0
-    });
-    store.setQueryState(queryKey, {
-      isLoading: true
-    });
+  async function getInboxNotificationSettings(room, queryKey, { retryCount } = { retryCount: 0 }) {
+    const existingRequest = requestsByQuery.get(queryKey);
+    if (existingRequest !== void 0)
+      return existingRequest;
     try {
-      const settings = await promise;
+      const request = room[kInternal].notifications.getRoomNotificationSettings();
+      requestsByQuery.set(queryKey, request);
+      store.setQueryState(queryKey, {
+        isLoading: true
+      });
+      const settings = await request;
       store.updateRoomInboxNotificationSettings(room.id, settings, queryKey);
     } catch (err) {
+      requestsByQuery.delete(queryKey);
+      retryError(() => {
+        void getInboxNotificationSettings(room, queryKey, {
+          retryCount: retryCount + 1
+        });
+      }, retryCount);
       store.setQueryState(queryKey, {
         isLoading: false,
         error: err
       });
+      return;
     }
-    poller.start(POLLING_INTERVAL);
   }
   function useRoomNotificationSettings() {
     const room = useRoom();
     React2.useEffect(() => {
       const queryKey = makeNotificationSettingsQueryKey(room.id);
       void getInboxNotificationSettings(room, queryKey);
-      incrementQuerySubscribers(queryKey);
-      return () => decrementQuerySubscribers(queryKey);
     }, [room]);
     const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
     const selector = React2.useCallback(
@@ -1630,11 +1619,6 @@ function createRoomContext(client, options) {
     if (query.error) {
       throw query.error;
     }
-    React2.useEffect(() => {
-      const queryKey2 = makeNotificationSettingsQueryKey(room.id);
-      incrementQuerySubscribers(queryKey2);
-      return () => decrementQuerySubscribers(queryKey2);
-    }, [room]);
     const selector = React2.useCallback(
       (state) => {
         return {
@@ -1977,8 +1961,8 @@ function createLiveblocksContext(client) {
       poller.stop();
     }
   }
-  async function fetchInboxNotifications() {
-    if (fetchInboxNotificationsRequest) {
+  async function fetchInboxNotifications({ retryCount } = { retryCount: 0 }) {
+    if (fetchInboxNotificationsRequest !== null) {
       return fetchInboxNotificationsRequest;
     }
     store.setQueryState(INBOX_NOTIFICATIONS_QUERY, {
@@ -1997,7 +1981,14 @@ function createLiveblocksContext(client) {
       if (lastRequestedAt === void 0 || lastRequestedAt > result.meta.requestedAt) {
         lastRequestedAt = result.meta.requestedAt;
       }
+      poller.start(POLLING_INTERVAL2);
     } catch (er) {
+      fetchInboxNotificationsRequest = null;
+      retryError(() => {
+        void fetchInboxNotifications({
+          retryCount: retryCount + 1
+        });
+      }, retryCount);
       store.setQueryState(INBOX_NOTIFICATIONS_QUERY, {
         isLoading: false,
         error: er
@@ -2048,6 +2039,9 @@ function createLiveblocksContext(client) {
     if (query === void 0 || query.isLoading) {
       throw fetchInboxNotifications();
     }
+    if (query.error !== void 0) {
+      throw query.error;
+    }
     React3.useEffect(() => {
       incrementInboxNotificationsSubscribers();
       return () => {