@liveblocks/react 2.2.3-alpha2 → 2.3.0

package/dist/{chunk-AKAI4UTH.mjs → chunk-N2EE2UOX.mjs}

@@ -1,6 +1,6 @@
 // src/version.ts
 var PKG_NAME = "@liveblocks/react";
-var PKG_VERSION = "2.2.3-alpha2";
+var PKG_VERSION = "2.3.0";
 var PKG_FORMAT = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -15,9 +15,11 @@ function ClientSideSuspense(props) {
 
 // src/liveblocks.tsx
 import {
+  assert,
   createClient,
   kInternal,
   makePoller,
+  memoizeOnSuccess,
   raise,
   shallow
 } from "@liveblocks/core";
@@ -43,6 +45,7 @@ function selectedInboxNotifications(state) {
 }
 
 // src/lib/retry-error.ts
+import { wait } from "@liveblocks/core";
 var MAX_ERROR_RETRY_COUNT = 5;
 var ERROR_RETRY_INTERVAL = 5e3;
 function retryError(action, retryCount) {
@@ -52,6 +55,23 @@ function retryError(action, retryCount) {
     void action();
   }, timeout);
 }
+async function autoRetry(promiseFn, maxTries, backoff) {
+  const fallbackBackoff = backoff.length > 0 ? backoff[backoff.length - 1] : 0;
+  let attempt = 0;
+  while (true) {
+    attempt++;
+    const promise = promiseFn();
+    try {
+      return await promise;
+    } catch (err) {
+      if (attempt >= maxTries) {
+        throw new Error(`Failed after ${maxTries} attempts: ${String(err)}`);
+      }
+    }
+    const delay = backoff[attempt - 1] ?? fallbackBackoff;
+    await wait(delay);
+  }
+}
 
 // src/lib/use-initial.ts
 import { useCallback, useReducer } from "react";
@@ -83,6 +103,33 @@ function useInitialUnlessFunction(latestValue) {
   }
 }
 
+// src/lib/use-polyfill.ts
+var use = (
+  // React.use ||
+  (promise) => {
+    if (promise.status === "pending") {
+      throw promise;
+    } else if (promise.status === "fulfilled") {
+      return promise.value;
+    } else if (promise.status === "rejected") {
+      throw promise.reason;
+    } else {
+      promise.status = "pending";
+      promise.then(
+        (v) => {
+          promise.status = "fulfilled";
+          promise.value = v;
+        },
+        (e) => {
+          promise.status = "rejected";
+          promise.reason = e;
+        }
+      );
+      throw promise;
+    }
+  }
+);
+
 // src/liveblocks.tsx
 var ClientContext = createContext(null);
 function missingUserError(userId) {
@@ -115,12 +162,6 @@ function selectorFor_useInboxNotifications(state) {
     isLoading: false
   };
 }
-function selectorFor_useInboxNotificationsSuspense(state) {
-  return {
-    inboxNotifications: selectedInboxNotifications(state),
-    isLoading: false
-  };
-}
 function selectUnreadInboxNotificationsCount(state) {
   let count = 0;
   for (const notification of selectedInboxNotifications(state)) {
@@ -148,10 +189,40 @@ function selectorFor_useUnreadInboxNotificationsCount(state) {
     count: selectUnreadInboxNotificationsCount(state)
   };
 }
-function selectorFor_useUnreadInboxNotificationsCountSuspense(state) {
+function selectorFor_useUser(state, userId) {
+  if (state === void 0 || state?.isLoading) {
+    return state ?? { isLoading: true };
+  }
+  if (state.error) {
+    return state;
+  }
+  if (!state.data) {
+    return {
+      isLoading: false,
+      error: missingUserError(userId)
+    };
+  }
+  return {
+    isLoading: false,
+    user: state.data
+  };
+}
+function selectorFor_useRoomInfo(state, roomId) {
+  if (state === void 0 || state?.isLoading) {
+    return state ?? { isLoading: true };
+  }
+  if (state.error) {
+    return state;
+  }
+  if (!state.data) {
+    return {
+      isLoading: false,
+      error: missingRoomInfoError(roomId)
+    };
+  }
   return {
     isLoading: false,
-    count: selectUnreadInboxNotificationsCount(state)
+    info: state.data
   };
 }
 function getOrCreateContextBundle(client) {
@@ -174,93 +245,84 @@ function makeExtrasForClient(client) {
   const internals = client[kInternal];
   const store = internals.cacheStore;
   const notifications = internals.notifications;
-  let fetchInboxNotifications$ = null;
   let lastRequestedAt;
-  const poller = makePoller(
-    () => notifications.getInboxNotifications({ since: lastRequestedAt }).then(
-      (result) => {
-        lastRequestedAt = result.meta.requestedAt;
-        store.updateThreadsAndNotifications(
-          result.threads,
-          result.inboxNotifications,
-          result.deletedThreads,
-          result.deletedInboxNotifications,
-          INBOX_NOTIFICATIONS_QUERY
-        );
-      },
-      () => {
-      }
-    )
-  );
-  async function fetchInboxNotifications({ retryCount } = { retryCount: 0 }) {
-    if (fetchInboxNotifications$ !== null) {
-      return fetchInboxNotifications$;
+  async function fetchInboxNotifications() {
+    const since = lastRequestedAt !== void 0 ? { since: lastRequestedAt } : void 0;
+    const result = await notifications.getInboxNotifications(since);
+    store.updateThreadsAndNotifications(
+      result.threads,
+      result.inboxNotifications,
+      result.deletedThreads,
+      result.deletedInboxNotifications,
+      INBOX_NOTIFICATIONS_QUERY
+    );
+    if (lastRequestedAt === void 0 || lastRequestedAt < result.meta.requestedAt) {
+      lastRequestedAt = result.meta.requestedAt;
+    }
+  }
+  let pollerSubscribers = 0;
+  const poller = makePoller(async () => {
+    try {
+      await waitUntilInboxNotificationsLoaded();
+      await fetchInboxNotifications();
+    } catch (err) {
+      console.warn(`Polling new inbox notifications failed: ${String(err)}`);
     }
+  });
+  const waitUntilInboxNotificationsLoaded = memoizeOnSuccess(async () => {
     store.setQueryState(INBOX_NOTIFICATIONS_QUERY, {
       isLoading: true
     });
     try {
-      fetchInboxNotifications$ = notifications.getInboxNotifications();
-      const result = await fetchInboxNotifications$;
-      store.updateThreadsAndNotifications(
-        result.threads,
-        result.inboxNotifications,
-        result.deletedThreads,
-        result.deletedInboxNotifications,
-        INBOX_NOTIFICATIONS_QUERY
+      await autoRetry(
+        () => fetchInboxNotifications(),
+        5,
+        [5e3, 5e3, 1e4, 15e3]
       );
-      if (lastRequestedAt === void 0 || lastRequestedAt > result.meta.requestedAt) {
-        lastRequestedAt = result.meta.requestedAt;
-      }
-      poller.start(POLLING_INTERVAL);
-    } catch (er) {
-      fetchInboxNotifications$ = null;
-      retryError(() => {
-        void fetchInboxNotifications({
-          retryCount: retryCount + 1
-        });
-      }, retryCount);
+    } catch (err) {
       store.setQueryState(INBOX_NOTIFICATIONS_QUERY, {
         isLoading: false,
-        error: er
+        error: err
       });
+      throw err;
     }
-    return;
+  });
+  function loadInboxNotifications() {
+    void waitUntilInboxNotificationsLoaded().catch(() => {
+    });
   }
-  let inboxNotificationsSubscribers = 0;
-  function useSubscribeToInboxNotificationsEffect(options) {
-    const autoFetch = useInitial(options?.autoFetch ?? true);
+  function useEnableInboxNotificationsPolling() {
     useEffect3(() => {
-      if (autoFetch) {
-        void fetchInboxNotifications();
-      }
-      inboxNotificationsSubscribers++;
+      pollerSubscribers++;
       poller.start(POLLING_INTERVAL);
       return () => {
-        if (inboxNotificationsSubscribers <= 0) {
+        if (pollerSubscribers <= 0) {
           console.warn(
             `Internal unexpected behavior. Cannot decrease subscriber count for query "${INBOX_NOTIFICATIONS_QUERY}"`
           );
           return;
         }
-        inboxNotificationsSubscribers--;
-        if (inboxNotificationsSubscribers <= 0) {
+        pollerSubscribers--;
+        if (pollerSubscribers <= 0) {
           poller.stop();
         }
       };
-    }, [autoFetch]);
+    }, []);
   }
   return {
     store,
     notifications,
-    fetchInboxNotifications,
-    useSubscribeToInboxNotificationsEffect
+    useEnableInboxNotificationsPolling,
+    waitUntilInboxNotificationsLoaded,
+    loadInboxNotifications
   };
 }
 function makeLiveblocksContextBundle(client) {
   const useInboxNotificationThread2 = (inboxNotificationId) => useInboxNotificationThread_withClient(client, inboxNotificationId);
   const useMarkInboxNotificationAsRead2 = () => useMarkInboxNotificationAsRead_withClient(client);
   const useMarkAllInboxNotificationsAsRead2 = () => useMarkAllInboxNotificationsAsRead_withClient(client);
+  const useDeleteInboxNotification2 = () => useDeleteInboxNotification_withClient(client);
+  const useDeleteAllInboxNotifications2 = () => useDeleteAllInboxNotifications_withClient(client);
   function LiveblocksProvider2(props) {
     useEnsureNoLiveblocksProvider();
     return /* @__PURE__ */ React2.createElement(ClientContext.Provider, { value: client }, props.children);
@@ -272,6 +334,8 @@ function makeLiveblocksContextBundle(client) {
     useUnreadInboxNotificationsCount: () => useUnreadInboxNotificationsCount_withClient(client),
     useMarkInboxNotificationAsRead: useMarkInboxNotificationAsRead2,
     useMarkAllInboxNotificationsAsRead: useMarkAllInboxNotificationsAsRead2,
+    useDeleteInboxNotification: useDeleteInboxNotification2,
+    useDeleteAllInboxNotifications: useDeleteAllInboxNotifications2,
     useInboxNotificationThread: useInboxNotificationThread2,
     ...shared.classic,
     suspense: {
@@ -280,6 +344,8 @@ function makeLiveblocksContextBundle(client) {
       useUnreadInboxNotificationsCount: () => useUnreadInboxNotificationsCountSuspense_withClient(client),
       useMarkInboxNotificationAsRead: useMarkInboxNotificationAsRead2,
       useMarkAllInboxNotificationsAsRead: useMarkAllInboxNotificationsAsRead2,
+      useDeleteInboxNotification: useDeleteInboxNotification2,
+      useDeleteAllInboxNotifications: useDeleteAllInboxNotifications2,
       useInboxNotificationThread: useInboxNotificationThread2,
       ...shared.suspense
     }
@@ -287,8 +353,11 @@ function makeLiveblocksContextBundle(client) {
   return bundle;
 }
 function useInboxNotifications_withClient(client) {
-  const { store, useSubscribeToInboxNotificationsEffect } = getExtrasForClient(client);
-  useSubscribeToInboxNotificationsEffect();
+  const { loadInboxNotifications, store, useEnableInboxNotificationsPolling } = getExtrasForClient(client);
+  useEffect3(() => {
+    loadInboxNotifications();
+  }, [loadInboxNotifications]);
+  useEnableInboxNotificationsPolling();
   return useSyncExternalStoreWithSelector(
     store.subscribe,
     store.get,
@@ -298,30 +367,19 @@ function useInboxNotifications_withClient(client) {
   );
 }
 function useInboxNotificationsSuspense_withClient(client) {
-  const {
-    store,
-    fetchInboxNotifications,
-    useSubscribeToInboxNotificationsEffect
-  } = getExtrasForClient(client);
-  const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
-  if (query === void 0 || query.isLoading) {
-    throw fetchInboxNotifications();
-  }
-  if (query.error !== void 0) {
-    throw query.error;
-  }
-  useSubscribeToInboxNotificationsEffect({ autoFetch: false });
-  return useSyncExternalStoreWithSelector(
-    store.subscribe,
-    store.get,
-    store.get,
-    selectorFor_useInboxNotificationsSuspense,
-    shallow
-  );
+  const { waitUntilInboxNotificationsLoaded } = getExtrasForClient(client);
+  use(waitUntilInboxNotificationsLoaded());
+  const result = useInboxNotifications_withClient(client);
+  assert(!result.error, "Did not expect error");
+  assert(!result.isLoading, "Did not expect loading");
+  return result;
 }
 function useUnreadInboxNotificationsCount_withClient(client) {
-  const { store, useSubscribeToInboxNotificationsEffect } = getExtrasForClient(client);
-  useSubscribeToInboxNotificationsEffect();
+  const { store, loadInboxNotifications, useEnableInboxNotificationsPolling } = getExtrasForClient(client);
+  useEffect3(() => {
+    loadInboxNotifications();
+  }, [loadInboxNotifications]);
+  useEnableInboxNotificationsPolling();
   return useSyncExternalStoreWithSelector(
     store.subscribe,
     store.get,
@@ -331,23 +389,12 @@ function useUnreadInboxNotificationsCount_withClient(client) {
   );
 }
 function useUnreadInboxNotificationsCountSuspense_withClient(client) {
-  const {
-    store,
-    fetchInboxNotifications,
-    useSubscribeToInboxNotificationsEffect
-  } = getExtrasForClient(client);
-  const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
-  if (query === void 0 || query.isLoading) {
-    throw fetchInboxNotifications();
-  }
-  useSubscribeToInboxNotificationsEffect({ autoFetch: false });
-  return useSyncExternalStoreWithSelector(
-    store.subscribe,
-    store.get,
-    store.get,
-    selectorFor_useUnreadInboxNotificationsCountSuspense,
-    shallow
-  );
+  const { waitUntilInboxNotificationsLoaded } = getExtrasForClient(client);
+  use(waitUntilInboxNotificationsLoaded());
+  const result = useUnreadInboxNotificationsCount_withClient(client);
+  assert(!result.isLoading, "Did not expect loading");
+  assert(!result.error, "Did not expect error");
+  return result;
 }
 function useMarkInboxNotificationAsRead_withClient(client) {
   return useCallback2(
@@ -407,7 +454,7 @@ function useMarkAllInboxNotificationsAsRead_withClient(client) {
     const optimisticUpdateId = nanoid();
     const readAt = /* @__PURE__ */ new Date();
     store.pushOptimisticUpdate({
-      type: "mark-inbox-notifications-as-read",
+      type: "mark-all-inbox-notifications-as-read",
       id: optimisticUpdateId,
       readAt
     });
@@ -439,6 +486,84 @@ function useMarkAllInboxNotificationsAsRead_withClient(client) {
     );
   }, [client]);
 }
+function useDeleteInboxNotification_withClient(client) {
+  return useCallback2(
+    (inboxNotificationId) => {
+      const { store, notifications } = getExtrasForClient(client);
+      const optimisticUpdateId = nanoid();
+      const deletedAt = /* @__PURE__ */ new Date();
+      store.pushOptimisticUpdate({
+        type: "delete-inbox-notification",
+        id: optimisticUpdateId,
+        inboxNotificationId,
+        deletedAt
+      });
+      notifications.deleteInboxNotification(inboxNotificationId).then(
+        () => {
+          store.set((state) => {
+            const existingNotification = state.inboxNotifications[inboxNotificationId];
+            if (existingNotification === void 0) {
+              return {
+                ...state,
+                optimisticUpdates: state.optimisticUpdates.filter(
+                  (update) => update.id !== optimisticUpdateId
+                )
+              };
+            }
+            const { [inboxNotificationId]: _, ...inboxNotifications } = state.inboxNotifications;
+            return {
+              ...state,
+              inboxNotifications,
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            };
+          });
+        },
+        () => {
+          store.set((state) => ({
+            ...state,
+            optimisticUpdates: state.optimisticUpdates.filter(
+              (update) => update.id !== optimisticUpdateId
+            )
+          }));
+        }
+      );
+    },
+    [client]
+  );
+}
+function useDeleteAllInboxNotifications_withClient(client) {
+  return useCallback2(() => {
+    const { store, notifications } = getExtrasForClient(client);
+    const optimisticUpdateId = nanoid();
+    const deletedAt = /* @__PURE__ */ new Date();
+    store.pushOptimisticUpdate({
+      type: "delete-all-inbox-notifications",
+      id: optimisticUpdateId,
+      deletedAt
+    });
+    notifications.deleteAllInboxNotifications().then(
+      () => {
+        store.set((state) => ({
+          ...state,
+          inboxNotifications: {},
+          optimisticUpdates: state.optimisticUpdates.filter(
+            (update) => update.id !== optimisticUpdateId
+          )
+        }));
+      },
+      () => {
+        store.set((state) => ({
+          ...state,
+          optimisticUpdates: state.optimisticUpdates.filter(
+            (update) => update.id !== optimisticUpdateId
+          )
+        }));
+      }
+    );
+  }, [client]);
+}
 function useInboxNotificationThread_withClient(client, inboxNotificationId) {
   const { store } = getExtrasForClient(client);
   const selector = useCallback2(
@@ -472,17 +597,17 @@ function useUser_withClient(client, userId) {
   useEffect3(() => {
     void usersStore.get(userId);
   }, [usersStore, userId]);
-  const state = useSyncExternalStore(
+  const selector = useCallback2(
+    (state) => selectorFor_useUser(state, userId),
+    [userId]
+  );
+  return useSyncExternalStoreWithSelector(
     usersStore.subscribe,
     getUserState,
-    getUserState
+    getUserState,
+    selector,
+    shallow
   );
-  return state ? {
-    isLoading: state.isLoading,
-    user: state.data,
-    // Return an error if `undefined` was returned by `resolveUsers` for this user ID
-    error: !state.isLoading && !state.data && !state.error ? missingUserError(userId) : state.error
-  } : { isLoading: true };
 }
 function useUserSuspense_withClient(client, userId) {
   const usersStore = client[kInternal].usersStore;
@@ -505,10 +630,13 @@ function useUserSuspense_withClient(client, userId) {
     getUserState,
     getUserState
   );
+  assert(state !== void 0, "Unexpected missing state");
+  assert(!state.isLoading, "Unexpected loading state");
+  assert(!state.error, "Unexpected error state");
   return {
     isLoading: false,
-    user: state?.data,
-    error: state?.error
+    user: state.data,
+    error: void 0
   };
 }
 function useRoomInfo_withClient(client, roomId) {
@@ -517,20 +645,20 @@ function useRoomInfo_withClient(client, roomId) {
     () => roomsInfoStore.getState(roomId),
     [roomsInfoStore, roomId]
   );
+  const selector = useCallback2(
+    (state) => selectorFor_useRoomInfo(state, roomId),
+    [roomId]
+  );
   useEffect3(() => {
     void roomsInfoStore.get(roomId);
   }, [roomsInfoStore, roomId]);
-  const state = useSyncExternalStore(
+  return useSyncExternalStoreWithSelector(
     roomsInfoStore.subscribe,
     getRoomInfoState,
-    getRoomInfoState
+    getRoomInfoState,
+    selector,
+    shallow
   );
-  return state ? {
-    isLoading: state.isLoading,
-    info: state.data,
-    // Return an error if `undefined` was returned by `resolveRoomsInfo` for this room ID
-    error: !state.isLoading && !state.data && !state.error ? missingRoomInfoError(roomId) : state.error
-  } : { isLoading: true };
 }
 function useRoomInfoSuspense_withClient(client, roomId) {
   const roomsInfoStore = client[kInternal].roomsInfoStore;
@@ -553,10 +681,14 @@ function useRoomInfoSuspense_withClient(client, roomId) {
     getRoomInfoState,
     getRoomInfoState
   );
+  assert(state !== void 0, "Unexpected missing state");
+  assert(!state.isLoading, "Unexpected loading state");
+  assert(!state.error, "Unexpected error state");
+  assert(state.data !== void 0, "Unexpected missing room info data");
   return {
     isLoading: false,
-    info: state?.data,
-    error: state?.error
+    info: state.data,
+    error: void 0
   };
 }
 function createSharedContext(client) {
@@ -641,6 +773,12 @@ function useMarkAllInboxNotificationsAsRead() {
 function useMarkInboxNotificationAsRead() {
   return useMarkInboxNotificationAsRead_withClient(useClient());
 }
+function useDeleteAllInboxNotifications() {
+  return useDeleteAllInboxNotifications_withClient(useClient());
+}
+function useDeleteInboxNotification() {
+  return useDeleteInboxNotification_withClient(useClient());
+}
 function useUnreadInboxNotificationsCount() {
   return useUnreadInboxNotificationsCount_withClient(useClient());
 }
@@ -777,6 +915,9 @@ function selectedThreads(roomId, state, options) {
       }
       const query = options.query;
       if (!query) return true;
+      if (query.resolved !== void 0 && thread.resolved !== query.resolved) {
+        return false;
+      }
       for (const key in query.metadata) {
         const metadataValue = thread.metadata[key];
         const filterValue = query.metadata[key];
@@ -851,33 +992,6 @@ function selectNotificationSettings(roomId, state) {
   return nn(notificationSettings[roomId]);
 }
 
-// src/lib/use-polyfill.ts
-var use = (
-  // React.use ||
-  (promise) => {
-    if (promise.status === "pending") {
-      throw promise;
-    } else if (promise.status === "fulfilled") {
-      return promise.value;
-    } else if (promise.status === "rejected") {
-      throw promise.reason;
-    } else {
-      promise.status = "pending";
-      promise.then(
-        (v) => {
-          promise.status = "fulfilled";
-          promise.value = v;
-        },
-        (e) => {
-          promise.status = "rejected";
-          promise.reason = e;
-        }
-      );
-      throw promise;
-    }
-  }
-);
-
 // src/use-scroll-to-comment-on-load-effect.ts
 import * as React3 from "react";
 function handleScrollToCommentOnLoad(shouldScrollOnLoad, state) {
@@ -2693,6 +2807,8 @@ export {
   useInboxNotificationsSuspense,
   useMarkAllInboxNotificationsAsRead,
   useMarkInboxNotificationAsRead,
+  useDeleteAllInboxNotifications,
+  useDeleteInboxNotification,
   useUnreadInboxNotificationsCount,
   useUnreadInboxNotificationsCountSuspense,
   useRoomInfo,
@@ -2754,4 +2870,4 @@ export {
   _useStorageRoot,
   _useUpdateMyPresence
 };
-//# sourceMappingURL=chunk-AKAI4UTH.mjs.map
+//# sourceMappingURL=chunk-N2EE2UOX.mjs.map