@liveblocks/react 1.10.0-beta1 → 1.10.0-beta3

package/dist/index.js

@@ -5,7 +5,7 @@ var _core = require('@liveblocks/core');
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/react";
-var PKG_VERSION = "1.10.0-beta1";
+var PKG_VERSION = "1.10.0-beta3";
 var PKG_FORMAT = "cjs";
 
 // src/ClientSideSuspense.tsx
@@ -34,7 +34,10 @@ var _withselectorjs = require('use-sync-external-store/shim/with-selector.js');
 
 function selectedInboxNotifications(state) {
   const result = _core.applyOptimisticUpdates.call(void 0, state);
-  return Object.values(result.inboxNotifications);
+  return Object.values(result.inboxNotifications).sort(
+    // Sort so that the most recent notifications are first
+    (a, b) => b.notifiedAt.getTime() - a.notifiedAt.getTime()
+  );
 }
 
 // src/shared.ts
@@ -153,9 +156,10 @@ function createCommentId() {
 
 
 
+
 function selectNotificationSettings(roomId, state) {
   const { notificationSettings } = _core.applyOptimisticUpdates.call(void 0, state);
-  return notificationSettings[roomId];
+  return _core.nn.call(void 0, notificationSettings[roomId]);
 }
 
 // src/comments/lib/selected-threads.ts
@@ -164,9 +168,12 @@ function selectNotificationSettings(roomId, state) {
 
 function selectedThreads(roomId, state, options) {
   const result = _core.applyOptimisticUpdates.call(void 0, state);
-  return Object.values(result.threads).filter((thread) => {
+  const threads = Object.values(result.threads).filter((thread) => {
     if (thread.roomId !== roomId)
       return false;
+    if (thread.deletedAt !== void 0) {
+      return false;
+    }
     const query = options.query;
     if (!query)
       return true;
@@ -177,6 +184,7 @@ function selectedThreads(roomId, state, options) {
     }
     return true;
   });
+  return threads.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime());
 }
 
 // src/comments/lib/upsert-comment.ts
@@ -299,7 +307,17 @@ function useRoomContextBundle() {
   }
   return bundle;
 }
-function createRoomContext(client) {
+function createRoomContext(client, options) {
+  if (_optionalChain([options, 'optionalAccess', _ => _.resolveUsers])) {
+    throw new Error(
+      "The 'resolveUsers' option has moved to 'createClient' from '@liveblocks/client'. Please refer to our Upgrade Guide to learn more, see https://liveblocks.io/docs/platform/upgrading/1.10."
+    );
+  }
+  if (_optionalChain([options, 'optionalAccess', _2 => _2.resolveMentionSuggestions])) {
+    throw new Error(
+      "The 'resolveMentionSuggestions' option has moved to 'createClient' from '@liveblocks/client'. Please refer to our Upgrade Guide to learn more, see https://liveblocks.io/docs/platform/upgrading/1.10."
+    );
+  }
   const RoomContext = React2.createContext(null);
   const commentsErrorEventSource = _core.makeEventSource.call(void 0, );
   const shared = createSharedContext(client);
@@ -308,13 +326,13 @@ function createRoomContext(client) {
       () => /* @__PURE__ */ new Map()
     );
     const stableEnterRoom = React2.useCallback(
-      (roomId, options) => {
+      (roomId, options2) => {
         const cached = cache.get(roomId);
         if (cached)
           return cached;
         const rv = client.enterRoom(
           roomId,
-          options
+          options2
         );
         const origLeave = rv.leave;
         rv.leave = () => {
@@ -507,8 +525,8 @@ function createRoomContext(client) {
   function useBroadcastEvent() {
     const room = useRoom();
     return React2.useCallback(
-      (event, options = { shouldQueueEventIfNotReady: false }) => {
-        room.broadcastEvent(event, options);
+      (event, options2 = { shouldQueueEventIfNotReady: false }) => {
+        room.broadcastEvent(event, options2);
       },
       [room]
     );
@@ -618,7 +636,7 @@ function createRoomContext(client) {
       function onRootChange() {
         const newValue = root.get(key);
         if (newValue !== curr) {
-          _optionalChain([unsubCurr, 'optionalCall', _2 => _2()]);
+          _optionalChain([unsubCurr, 'optionalCall', _3 => _3()]);
           curr = newValue;
           subscribeToCurr();
           rerender();
@@ -629,7 +647,7 @@ function createRoomContext(client) {
       const unsubscribeRoot = room.subscribe(root, onRootChange);
       return () => {
         unsubscribeRoot();
-        _optionalChain([unsubCurr, 'optionalCall', _3 => _3()]);
+        _optionalChain([unsubCurr, 'optionalCall', _4 => _4()]);
       };
     }, [rootOrNull, room, key, rerender]);
     if (rootOrNull === null) {
@@ -775,15 +793,46 @@ function createRoomContext(client) {
   const requestsCache = /* @__PURE__ */ new Map();
   const poller = _core.makePoller.call(void 0, refreshThreadsAndNotifications);
   async function refreshThreadsAndNotifications() {
-    await Promise.allSettled(
-      Array.from(requestsCache.entries()).filter(([_, requestCache]) => requestCache.subscribers > 0).map(async ([_, requestCache]) => {
-        return requestCache.requestFactory().then(
-          (result) => requestCache.onSuccess(result),
-          () => {
-          }
+    const requests = [];
+    client[_core.kInternal].getRoomIds().map((roomId) => {
+      const room = client.getRoom(roomId);
+      if (room === null)
+        return;
+      const notificationSettingsQuery = makeNotificationSettingsQueryKey(
+        room.id
+      );
+      if (requestsCache.has(notificationSettingsQuery)) {
+        requests.push(
+          room.getRoomNotificationSettings().then((settings) => {
+            store.updateRoomInboxNotificationSettings(
+              room.id,
+              settings,
+              notificationSettingsQuery
+            );
+          }).catch(() => {
+          })
         );
-      })
-    );
+      }
+      const lastRequestedAt = room[_core.kInternal].comments.lastRequestedAt;
+      if (lastRequestedAt === null)
+        return;
+      requests.push(
+        room.getThreads({ since: lastRequestedAt }).then((result) => {
+          store.updateThreadsAndNotifications(
+            result.threads,
+            result.inboxNotifications,
+            result.deletedThreads,
+            result.deletedInboxNotifications
+          );
+          const room2 = client.getRoom(roomId);
+          if (room2 === null)
+            return;
+          room2[_core.kInternal].comments.lastRequestedAt = result.meta.requestedAt;
+        }).catch(() => {
+        })
+      );
+    });
+    await Promise.allSettled(requests);
   }
   function incrementQuerySubscribers(queryKey) {
     const requestCache = requestsCache.get(queryKey);
@@ -813,16 +862,14 @@ function createRoomContext(client) {
       poller.stop();
     }
   }
-  async function getOrInitRequest(queryKey, requestFactory, onSuccess) {
+  async function getThreadsAndInboxNotifications(room, queryKey, options2) {
     const requestInfo = requestsCache.get(queryKey);
     if (requestInfo !== void 0) {
       return requestInfo.promise;
     }
-    const promise = requestFactory();
+    const promise = room.getThreads(options2);
     requestsCache.set(queryKey, {
       promise,
-      requestFactory,
-      onSuccess,
       subscribers: 0
     });
     store.setQueryState(queryKey, {
@@ -830,103 +877,102 @@ function createRoomContext(client) {
     });
     try {
       const result = await promise;
-      onSuccess(result);
-    } catch (er) {
+      store.updateThreadsAndNotifications(
+        result.threads,
+        result.inboxNotifications,
+        result.deletedThreads,
+        result.deletedInboxNotifications,
+        queryKey
+      );
+      const lastRequestedAt = room[_core.kInternal].comments.lastRequestedAt;
+      if (lastRequestedAt === null || lastRequestedAt > result.meta.requestedAt) {
+        room[_core.kInternal].comments.lastRequestedAt = result.meta.requestedAt;
+      }
+    } catch (err) {
       store.setQueryState(queryKey, {
         isLoading: false,
-        error: er
+        error: err
       });
     }
     poller.start(POLLING_INTERVAL);
   }
-  async function getThreadsAndInboxNotifications(room, queryKey, options) {
-    const roomId = room.id;
-    return getOrInitRequest(
-      queryKey,
-      async () => {
-        const room2 = client.getRoom(roomId);
-        if (room2 === null) {
-          return;
-        }
-        return room2.getThreads(options);
-      },
-      (result) => {
-        if (result !== void 0) {
-          store.updateThreadsAndNotifications(
-            result.threads,
-            result.inboxNotifications,
-            queryKey
-          );
-        }
-      }
-    );
-  }
-  function useThreads(options = { query: { metadata: {} } }) {
+  function useThreads(options2 = { query: { metadata: {} } }) {
     const room = useRoom();
     const queryKey = React2.useMemo(
-      () => generateQueryKey(room.id, options.query),
-      [room, options]
+      () => generateQueryKey(room.id, options2.query),
+      [room, options2]
     );
     React2.useEffect(() => {
-      void getThreadsAndInboxNotifications(room, queryKey, options);
+      void getThreadsAndInboxNotifications(room, queryKey, options2);
       incrementQuerySubscribers(queryKey);
       return () => decrementQuerySubscribers(queryKey);
     }, [room, queryKey]);
-    return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
-      store.subscribe,
-      store.get,
-      store.get,
+    const selector = React2.useCallback(
       (state) => {
-        if (state.queries[queryKey] === void 0 || state.queries[queryKey].isLoading) {
+        const query = state.queries[queryKey];
+        if (query === void 0 || query.isLoading) {
           return {
             isLoading: true
           };
         }
         return {
-          threads: selectedThreads(room.id, state, options),
+          threads: selectedThreads(room.id, state, options2),
           isLoading: false,
-          error: state.queries[queryKey].error
+          error: query.error
         };
-      }
+      },
+      [room, queryKey]
+      // eslint-disable-line react-hooks/exhaustive-deps
+    );
+    return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
     );
   }
-  function useThreadsSuspense(options = { query: { metadata: {} } }) {
+  function useThreadsSuspense(options2 = { query: { metadata: {} } }) {
     const room = useRoom();
     const queryKey = React2.useMemo(
-      () => generateQueryKey(room.id, _optionalChain([options, 'optionalAccess', _4 => _4.query])),
-      [room, options]
+      () => generateQueryKey(room.id, _optionalChain([options2, 'optionalAccess', _5 => _5.query])),
+      [room, options2]
     );
     const query = store.get().queries[queryKey];
     if (query === void 0 || query.isLoading) {
-      throw getThreadsAndInboxNotifications(room, queryKey, options);
+      throw getThreadsAndInboxNotifications(room, queryKey, options2);
     }
     if (query.error) {
       throw query.error;
     }
+    const selector = React2.useCallback(
+      (state) => {
+        return {
+          threads: selectedThreads(room.id, state, options2),
+          isLoading: false
+        };
+      },
+      [room, queryKey]
+      // eslint-disable-line react-hooks/exhaustive-deps
+    );
     React2.useEffect(() => {
       incrementQuerySubscribers(queryKey);
       return () => {
         decrementQuerySubscribers(queryKey);
       };
-    }, [room, queryKey]);
+    }, [queryKey]);
     return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        return {
-          threads: selectedThreads(room.id, state, options),
-          isLoading: false
-        };
-      }
+      selector
     );
   }
   function useCreateThread() {
     const room = useRoom();
     return React2.useCallback(
-      (options) => {
-        const body = options.body;
-        const metadata = "metadata" in options ? options.metadata : {};
+      (options2) => {
+        const body = options2.body;
+        const metadata = "metadata" in options2 ? options2.metadata : {};
         const threadId = createThreadId();
         const commentId = createCommentId();
         const now = /* @__PURE__ */ new Date();
@@ -987,12 +1033,12 @@ function createRoomContext(client) {
   function useEditThreadMetadata() {
     const room = useRoom();
     return React2.useCallback(
-      (options) => {
-        if (!("metadata" in options)) {
+      (options2) => {
+        if (!("metadata" in options2)) {
           return;
         }
-        const threadId = options.threadId;
-        const metadata = options.metadata;
+        const threadId = options2.threadId;
+        const metadata = options2.metadata;
         const optimisticUpdateId = _nanoid.nanoid.call(void 0, );
         store.pushOptimisticUpdate({
           type: "edit-thread-metadata",
@@ -1002,22 +1048,33 @@ function createRoomContext(client) {
         });
         room.editThreadMetadata({ metadata, threadId }).then(
           (metadata2) => {
-            store.set((state) => ({
-              ...state,
-              threads: {
-                ...state.threads,
-                [threadId]: {
-                  ...state.threads[threadId],
-                  metadata: {
-                    ...state.threads[threadId].metadata,
-                    ...metadata2
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: state.optimisticUpdates.filter(
+                    (update) => update.id !== optimisticUpdateId
+                  )
+                };
+              }
+              return {
+                ...state,
+                threads: {
+                  ...state.threads,
+                  [threadId]: {
+                    ...existingThread,
+                    metadata: {
+                      ...existingThread.metadata,
+                      ...metadata2
+                    }
                   }
-                }
-              },
-              optimisticUpdates: state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              )
-            }));
+                },
+                optimisticUpdates: state.optimisticUpdates.filter(
+                  (update) => update.id !== optimisticUpdateId
+                )
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1051,41 +1108,52 @@ function createRoomContext(client) {
         });
         room.addReaction({ threadId, commentId, emoji }).then(
           (addedReaction) => {
-            store.set((state) => ({
-              ...state,
-              threads: {
-                ...state.threads,
-                [threadId]: {
-                  ...state.threads[threadId],
-                  comments: state.threads[threadId].comments.map(
-                    (comment) => comment.id === commentId ? {
-                      ...comment,
-                      reactions: comment.reactions.some(
-                        (reaction) => reaction.emoji === addedReaction.emoji
-                      ) ? comment.reactions.map(
-                        (reaction) => reaction.emoji === addedReaction.emoji ? {
-                          ...reaction,
-                          users: [
-                            ...reaction.users,
-                            { id: addedReaction.userId }
-                          ]
-                        } : reaction
-                      ) : [
-                        ...comment.reactions,
-                        {
-                          emoji: addedReaction.emoji,
-                          createdAt: addedReaction.createdAt,
-                          users: [{ id: addedReaction.userId }]
-                        }
-                      ]
-                    } : comment
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: state.optimisticUpdates.filter(
+                    (update) => update.id !== optimisticUpdateId
                   )
-                }
-              },
-              optimisticUpdates: state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              )
-            }));
+                };
+              }
+              return {
+                ...state,
+                threads: {
+                  ...state.threads,
+                  [threadId]: {
+                    ...existingThread,
+                    comments: existingThread.comments.map(
+                      (comment) => comment.id === commentId ? {
+                        ...comment,
+                        reactions: comment.reactions.some(
+                          (reaction) => reaction.emoji === addedReaction.emoji
+                        ) ? comment.reactions.map(
+                          (reaction) => reaction.emoji === addedReaction.emoji ? {
+                            ...reaction,
+                            users: [
+                              ...reaction.users,
+                              { id: addedReaction.userId }
+                            ]
+                          } : reaction
+                        ) : [
+                          ...comment.reactions,
+                          {
+                            emoji: addedReaction.emoji,
+                            createdAt: addedReaction.createdAt,
+                            users: [{ id: addedReaction.userId }]
+                          }
+                        ]
+                      } : comment
+                    )
+                  }
+                },
+                optimisticUpdates: state.optimisticUpdates.filter(
+                  (update) => update.id !== optimisticUpdateId
+                )
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1118,46 +1186,65 @@ function createRoomContext(client) {
         });
         room.removeReaction({ threadId, commentId, emoji }).then(
           () => {
-            store.set((state) => ({
-              ...state,
-              threads: {
-                ...state.threads,
-                [threadId]: {
-                  ...state.threads[threadId],
-                  comments: state.threads[threadId].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
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: state.optimisticUpdates.filter(
+                    (update) => update.id !== optimisticUpdateId
+                  )
+                };
+              }
+              return {
+                ...state,
+                threads: {
+                  ...state.threads,
+                  [threadId]: {
+                    ...existingThread,
+                    comments: existingThread.comments.map((comment) => {
+                      if (comment.id !== commentId) {
+                        return comment;
+                      }
+                      const existingReaction = comment.reactions.find(
+                        (reaction) => reaction.emoji === emoji
+                      );
+                      if (existingReaction === void 0) {
+                        return comment;
+                      }
+                      const reactions = comment.reactions;
+                      if (!existingReaction.users.some(
+                        (user) => user.id === userId
+                      )) {
+                        return comment;
+                      }
+                      if (existingReaction.users.length <= 1) {
+                        return {
+                          ...comment,
+                          reactions: reactions.filter(
+                            (reaction) => reaction.emoji !== emoji
                           )
                         };
                       }
-                    }
-                    return {
-                      ...comment,
-                      reactions
-                    };
-                  })
-                }
-              },
-              optimisticUpdates: state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              )
-            }));
+                      return {
+                        ...comment,
+                        reactions: reactions.map(
+                          (reaction) => reaction.emoji !== emoji ? reaction : {
+                            ...reaction,
+                            users: reaction.users.filter(
+                              (user) => user.id !== userId
+                            )
+                          }
+                        )
+                      };
+                    })
+                  }
+                },
+                optimisticUpdates: state.optimisticUpdates.filter(
+                  (update) => update.id !== optimisticUpdateId
+                )
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1198,7 +1285,7 @@ function createRoomContext(client) {
           type: "create-comment",
           comment,
           id: optimisticUpdateId,
-          inboxNotificationId: _optionalChain([inboxNotification, 'optionalAccess', _5 => _5.id])
+          inboxNotificationId: _optionalChain([inboxNotification, 'optionalAccess', _6 => _6.id])
         });
         room.createComment({ threadId, commentId, body }).then(
           (newComment) => {
@@ -1288,32 +1375,40 @@ function createRoomContext(client) {
         });
         room.deleteComment({ threadId, commentId }).then(
           () => {
-            const newThreads = { ...store.get().threads };
-            const thread = newThreads[threadId];
-            if (thread === void 0)
-              return;
-            newThreads[thread.id] = {
-              ...thread,
-              comments: thread.comments.map(
-                (comment) => comment.id === commentId ? {
-                  ...comment,
-                  deletedAt: now,
-                  body: void 0
-                } : comment
-              )
-            };
-            if (!newThreads[thread.id].comments.some(
-              (comment) => comment.deletedAt === void 0
-            )) {
-              delete newThreads[thread.id];
-            }
-            store.set((state) => ({
-              ...state,
-              threads: newThreads,
-              optimisticUpdates: state.optimisticUpdates.filter(
-                (update) => update.id !== optimisticUpdateId
-              )
-            }));
+            store.set((state) => {
+              const existingThread = state.threads[threadId];
+              if (existingThread === void 0) {
+                return {
+                  ...state,
+                  optimisticUpdates: state.optimisticUpdates.filter(
+                    (update) => update.id !== optimisticUpdateId
+                  )
+                };
+              }
+              const newThread = {
+                ...existingThread,
+                comments: existingThread.comments.map(
+                  (comment) => comment.id === commentId ? {
+                    ...comment,
+                    deletedAt: now,
+                    body: void 0
+                  } : comment
+                )
+              };
+              const newThreads = { ...state.threads, [threadId]: newThread };
+              if (!newThread.comments.some(
+                (comment) => comment.deletedAt === void 0
+              )) {
+                delete newThreads[threadId];
+              }
+              return {
+                ...state,
+                threads: newThreads,
+                optimisticUpdates: state.optimisticUpdates.filter(
+                  (update) => update.id !== optimisticUpdateId
+                )
+              };
+            });
           },
           (err) => onMutationFailure(
             err,
@@ -1359,7 +1454,7 @@ function createRoomContext(client) {
             );
           }
         } catch (error) {
-          _core.console.error(_optionalChain([error, 'optionalAccess', _6 => _6.message]));
+          _core.console.error(_optionalChain([error, 'optionalAccess', _7 => _7.message]));
         }
       };
       if (mentionSuggestionsCache.has(mentionSuggestionsCacheKey)) {
@@ -1381,10 +1476,7 @@ function createRoomContext(client) {
     return mentionSuggestions;
   }
   function useThreadSubscription(threadId) {
-    return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
-      store.subscribe,
-      store.get,
-      store.get,
+    const selector = React2.useCallback(
       (state) => {
         const inboxNotification = selectedInboxNotifications(state).find(
           (inboxNotification2) => inboxNotification2.threadId === threadId
@@ -1399,7 +1491,14 @@ function createRoomContext(client) {
           status: "subscribed",
           unreadSince: inboxNotification.readAt
         };
-      }
+      },
+      [threadId]
+    );
+    return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
     );
   }
   function useMarkThreadAsRead() {
@@ -1450,34 +1549,28 @@ function createRoomContext(client) {
     return `${roomId}:NOTIFICATION_SETTINGS`;
   }
   async function getInboxNotificationSettings(room, queryKey) {
-    const roomId = room.id;
-    return getOrInitRequest(
-      queryKey,
-      async () => {
-        const room2 = client.getRoom(roomId);
-        if (room2 === null) {
-          return;
-        }
-        return room2.getRoomNotificationSettings();
-      },
-      (settings) => {
-        if (settings !== void 0) {
-          store.set((state) => ({
-            ...state,
-            notificationSettings: {
-              ...state.notificationSettings,
-              [room.id]: settings
-            },
-            queries: {
-              ...state.queries,
-              [queryKey]: {
-                isLoading: false
-              }
-            }
-          }));
-        }
-      }
-    );
+    const requestInfo = requestsCache.get(queryKey);
+    if (requestInfo !== void 0) {
+      return requestInfo.promise;
+    }
+    const promise = room.getRoomNotificationSettings();
+    requestsCache.set(queryKey, {
+      promise,
+      subscribers: 0
+    });
+    store.setQueryState(queryKey, {
+      isLoading: true
+    });
+    try {
+      const settings = await promise;
+      store.updateRoomInboxNotificationSettings(room.id, settings, queryKey);
+    } catch (err) {
+      store.setQueryState(queryKey, {
+        isLoading: false,
+        error: err
+      });
+    }
+    poller.start(POLLING_INTERVAL);
   }
   function useRoomNotificationSettings() {
     const room = useRoom();
@@ -1488,27 +1581,31 @@ function createRoomContext(client) {
       return () => decrementQuerySubscribers(queryKey);
     }, [room]);
     const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
-    return [
-      _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
-        store.subscribe,
-        store.get,
-        store.get,
-        (state) => {
-          const query = state.queries[makeNotificationSettingsQueryKey(room.id)];
-          if (query === void 0 || query.isLoading) {
-            return { isLoading: true };
-          }
-          if (query.error !== void 0) {
-            return { isLoading: false, error: query.error };
-          }
-          return {
-            isLoading: false,
-            settings: selectNotificationSettings(room.id, state)
-          };
+    const selector = React2.useCallback(
+      (state) => {
+        const query = state.queries[makeNotificationSettingsQueryKey(room.id)];
+        if (query === void 0 || query.isLoading) {
+          return { isLoading: true };
         }
-      ),
-      updateRoomNotificationSettings
-    ];
+        if (query.error !== void 0) {
+          return { isLoading: false, error: query.error };
+        }
+        return {
+          isLoading: false,
+          settings: selectNotificationSettings(room.id, state)
+        };
+      },
+      [room]
+    );
+    const settings = _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
+    );
+    return React2.useMemo(() => {
+      return [settings, updateRoomNotificationSettings];
+    }, [settings, updateRoomNotificationSettings]);
   }
   function useRoomNotificationSettingsSuspense() {
     const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
@@ -1526,20 +1623,24 @@ function createRoomContext(client) {
       incrementQuerySubscribers(queryKey2);
       return () => decrementQuerySubscribers(queryKey2);
     }, [room]);
-    return [
-      _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
-        store.subscribe,
-        store.get,
-        store.get,
-        (state) => {
-          return {
-            isLoading: false,
-            settings: selectNotificationSettings(room.id, state)
-          };
-        }
-      ),
-      updateRoomNotificationSettings
-    ];
+    const selector = React2.useCallback(
+      (state) => {
+        return {
+          isLoading: false,
+          settings: selectNotificationSettings(room.id, state)
+        };
+      },
+      [room]
+    );
+    const settings = _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
+    );
+    return React2.useMemo(() => {
+      return [settings, updateRoomNotificationSettings];
+    }, [settings, updateRoomNotificationSettings]);
   }
   function useUpdateRoomNotificationSettings() {
     const room = useRoom();
@@ -1686,7 +1787,7 @@ function getCurrentUserId(room) {
 }
 function handleApiError(err) {
   const message = `Request failed with status ${err.status}: ${err.message}`;
-  if (_optionalChain([err, 'access', _7 => _7.details, 'optionalAccess', _8 => _8.error]) === "FORBIDDEN") {
+  if (_optionalChain([err, 'access', _8 => _8.details, 'optionalAccess', _9 => _9.error]) === "FORBIDDEN") {
     const detailedMessage = [message, err.details.suggestion, err.details.docs].filter(Boolean).join("\n");
     _core.console.error(detailedMessage);
   }
@@ -1750,7 +1851,7 @@ function createSharedContext(client) {
     );
     return {
       ...state,
-      user: _optionalChain([state, 'optionalAccess', _9 => _9.data])
+      user: _optionalChain([state, 'optionalAccess', _10 => _10.data])
     };
   }
   function useRoomInfo(roomId) {
@@ -1778,19 +1879,19 @@ function createSharedContext(client) {
     );
     const roomInfoState = getRoomInfoState();
     if (!roomInfoState || roomInfoState.isLoading) {
-      throw usersStore.get(roomId);
+      throw roomsInfoStore.get(roomId);
     }
     if (roomInfoState.error) {
       throw roomInfoState.error;
     }
     const state = _indexjs.useSyncExternalStore.call(void 0, 
-      usersStore.subscribe,
+      roomsInfoStore.subscribe,
       getRoomInfoState,
       getRoomInfoState
     );
     return {
       ...state,
-      info: _optionalChain([state, 'optionalAccess', _10 => _10.data])
+      info: _optionalChain([state, 'optionalAccess', _11 => _11.data])
     };
   }
   const bundle = {
@@ -1813,6 +1914,8 @@ function useLiveblocksContextBundle() {
   }
   return bundle;
 }
+var POLLING_INTERVAL2 = 60 * 1e3;
+var INBOX_NOTIFICATIONS_QUERY = "INBOX_NOTIFICATIONS";
 function createLiveblocksContext(client) {
   const shared = createSharedContext(client);
   const store = client[_core.kInternal].cacheStore;
@@ -1827,15 +1930,17 @@ function createLiveblocksContext(client) {
   }
   let fetchInboxNotificationsRequest = null;
   let inboxNotificationsSubscribers = 0;
-  const INBOX_NOTIFICATIONS_QUERY = "INBOX_NOTIFICATIONS";
-  const POLLING_INTERVAL2 = 60 * 1e3;
+  let lastRequestedAt;
   const poller = _core.makePoller.call(void 0, refreshThreadsAndNotifications);
   function refreshThreadsAndNotifications() {
-    return client.getInboxNotifications().then(
-      ({ threads, inboxNotifications }) => {
+    return client.getInboxNotifications({ since: lastRequestedAt }).then(
+      (result) => {
+        lastRequestedAt = result.meta.requestedAt;
         store.updateThreadsAndNotifications(
-          threads,
-          inboxNotifications,
+          result.threads,
+          result.inboxNotifications,
+          result.deletedThreads,
+          result.deletedInboxNotifications,
           INBOX_NOTIFICATIONS_QUERY
         );
       },
@@ -1868,12 +1973,17 @@ function createLiveblocksContext(client) {
     });
     try {
       fetchInboxNotificationsRequest = client.getInboxNotifications();
-      const { inboxNotifications, threads } = await fetchInboxNotificationsRequest;
+      const result = await fetchInboxNotificationsRequest;
       store.updateThreadsAndNotifications(
-        threads,
-        inboxNotifications,
+        result.threads,
+        result.inboxNotifications,
+        result.deletedThreads,
+        result.deletedInboxNotifications,
         INBOX_NOTIFICATIONS_QUERY
       );
+      if (lastRequestedAt === void 0 || lastRequestedAt > result.meta.requestedAt) {
+        lastRequestedAt = result.meta.requestedAt;
+      }
     } catch (er) {
       store.setQueryState(INBOX_NOTIFICATIONS_QUERY, {
         isLoading: false,
@@ -1882,39 +1992,47 @@ function createLiveblocksContext(client) {
     }
     return;
   }
+  function useInboxNotificationsSelectorCallback(state) {
+    const query = state.queries[INBOX_NOTIFICATIONS_QUERY];
+    if (query === void 0 || query.isLoading) {
+      return {
+        isLoading: true
+      };
+    }
+    if (query.error !== void 0) {
+      return {
+        error: query.error,
+        isLoading: false
+      };
+    }
+    return {
+      inboxNotifications: selectedInboxNotifications(state),
+      isLoading: false
+    };
+  }
   function useInboxNotifications() {
     _react.useEffect.call(void 0, () => {
       void fetchInboxNotifications();
       incrementInboxNotificationsSubscribers();
       return () => decrementInboxNotificationsSubscribers();
-    });
+    }, []);
     const result = _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        const query = state.queries[INBOX_NOTIFICATIONS_QUERY];
-        if (query === void 0 || query.isLoading) {
-          return {
-            isLoading: true
-          };
-        }
-        if (query.error !== void 0) {
-          return {
-            error: query.error,
-            isLoading: false
-          };
-        }
-        return {
-          inboxNotifications: selectedInboxNotifications(state),
-          isLoading: false
-        };
-      }
+      useInboxNotificationsSelectorCallback
     );
     return result;
   }
+  function useInboxNotificationsSuspenseSelector(state) {
+    return {
+      inboxNotifications: selectedInboxNotifications(state),
+      isLoading: false
+    };
+  }
   function useInboxNotificationsSuspense() {
-    if (store.get().queries[INBOX_NOTIFICATIONS_QUERY] === void 0 || store.get().queries[INBOX_NOTIFICATIONS_QUERY].isLoading) {
+    const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
+    if (query === void 0 || query.isLoading) {
       throw fetchInboxNotifications();
     }
     React.default.useEffect(() => {
@@ -1927,12 +2045,7 @@ function createLiveblocksContext(client) {
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        return {
-          inboxNotifications: selectedInboxNotifications(state),
-          isLoading: false
-        };
-      }
+      useInboxNotificationsSuspenseSelector
     );
   }
   function selectUnreadInboxNotificationsCount(state) {
@@ -1944,38 +2057,46 @@ function createLiveblocksContext(client) {
     }
     return count;
   }
+  function useUnreadInboxNotificationsCountSelector(state) {
+    const query = state.queries[INBOX_NOTIFICATIONS_QUERY];
+    if (query === void 0 || query.isLoading) {
+      return {
+        isLoading: true
+      };
+    }
+    if (query.error !== void 0) {
+      return {
+        error: query.error,
+        isLoading: false
+      };
+    }
+    return {
+      isLoading: false,
+      count: selectUnreadInboxNotificationsCount(state)
+    };
+  }
   function useUnreadInboxNotificationsCount() {
     _react.useEffect.call(void 0, () => {
       void fetchInboxNotifications();
       incrementInboxNotificationsSubscribers();
       return () => decrementInboxNotificationsSubscribers();
-    });
+    }, []);
     return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
-        if (query === void 0 || query.isLoading) {
-          return {
-            isLoading: true
-          };
-        }
-        if (query.error !== void 0) {
-          return {
-            error: query.error,
-            isLoading: false
-          };
-        }
-        return {
-          isLoading: false,
-          count: selectUnreadInboxNotificationsCount(state)
-        };
-      }
+      useUnreadInboxNotificationsCountSelector
     );
   }
+  function useUnreadInboxNotificationsCountSuspenseSelector(state) {
+    return {
+      isLoading: false,
+      count: selectUnreadInboxNotificationsCount(state)
+    };
+  }
   function useUnreadInboxNotificationsCountSuspense() {
-    if (store.get().queries[INBOX_NOTIFICATIONS_QUERY] === void 0 || store.get().queries[INBOX_NOTIFICATIONS_QUERY].isLoading) {
+    const query = store.get().queries[INBOX_NOTIFICATIONS_QUERY];
+    if (query === void 0 || query.isLoading) {
       throw fetchInboxNotifications();
     }
     React.default.useEffect(() => {
@@ -1988,12 +2109,7 @@ function createLiveblocksContext(client) {
       store.subscribe,
       store.get,
       store.get,
-      (state) => {
-        return {
-          isLoading: false,
-          count: selectUnreadInboxNotificationsCount(state)
-        };
-      }
+      useUnreadInboxNotificationsCountSuspenseSelector
     );
   }
   function useMarkInboxNotificationAsRead() {
@@ -2008,20 +2124,30 @@ function createLiveblocksContext(client) {
       });
       client.markInboxNotificationAsRead(inboxNotificationId).then(
         () => {
-          store.set((state) => ({
-            ...state,
-            inboxNotifications: {
-              ...state.inboxNotifications,
-              [inboxNotificationId]: {
-                // TODO: Handle potential deleted inbox notification
-                ...state.inboxNotifications[inboxNotificationId],
-                readAt
-              }
-            },
-            optimisticUpdates: state.optimisticUpdates.filter(
-              (update) => update.id !== optimisticUpdateId
-            )
-          }));
+          store.set((state) => {
+            const existingNotification = state.inboxNotifications[inboxNotificationId];
+            if (existingNotification === void 0) {
+              return {
+                ...state,
+                optimisticUpdates: state.optimisticUpdates.filter(
+                  (update) => update.id !== optimisticUpdateId
+                )
+              };
+            }
+            return {
+              ...state,
+              inboxNotifications: {
+                ...state.inboxNotifications,
+                [inboxNotificationId]: {
+                  ...existingNotification,
+                  readAt
+                }
+              },
+              optimisticUpdates: state.optimisticUpdates.filter(
+                (update) => update.id !== optimisticUpdateId
+              )
+            };
+          });
         },
         () => {
           store.set((state) => ({
@@ -2072,10 +2198,7 @@ function createLiveblocksContext(client) {
     }, []);
   }
   function useThreadFromCache(threadId) {
-    return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
-      store.subscribe,
-      store.get,
-      store.get,
+    const selector = _react.useCallback.call(void 0, 
       (state) => {
         const thread = state.threads[threadId];
         if (thread === void 0) {
@@ -2084,7 +2207,14 @@ function createLiveblocksContext(client) {
           );
         }
         return thread;
-      }
+      },
+      [threadId]
+    );
+    return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
+      store.subscribe,
+      store.get,
+      store.get,
+      selector
     );
   }
   const currentUserIdStore = client[_core.kInternal].currentUserIdStore;