@liveblocks/react 1.10.0-beta1 → 1.10.0-beta2

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode, PropsWithChildren } from 'react';
 import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Json, RoomNotificationSettings, Room, Status, BroadcastOptions, OthersEvent, LostConnectionEvent, History, BaseMetadata as BaseMetadata$1, Client } from '@liveblocks/client';
 export { Json, JsonObject, shallow } from '@liveblocks/client';
 import * as _liveblocks_core from '@liveblocks/core';
-import { BaseMetadata, GetThreadsOptions, Resolve, ToImmutable, kInternal, ThreadData, InboxNotificationData, RoomEventMessage, CommentData, RoomInfo, CommentBody, PartialNullable, RoomInitializers, BaseUserMeta as BaseUserMeta$1 } from '@liveblocks/core';
+import { BaseMetadata, GetThreadsOptions, Resolve, ToImmutable, kInternal, ThreadData, InboxNotificationData, RoomEventMessage, CommentData, RoomInfo, CommentBody, PartialNullable, RoomInitializers, ResolveUsersArgs, OptionalPromise, ResolveMentionSuggestionsArgs, BaseUserMeta as BaseUserMeta$1 } from '@liveblocks/core';
 
 declare type Props = {
     fallback: NonNullable<ReactNode> | null;
@@ -1049,7 +1049,23 @@ declare function createLiveblocksContext<TUserMeta extends BaseUserMeta = BaseUs
  * This is an internal API, use `createRoomContext` instead.
  */
 declare function useRoomContextBundle(): RoomContextBundle<JsonObject, LsonObject, BaseUserMeta, never, BaseMetadata>;
-declare function createRoomContext<TPresence extends JsonObject, TStorage extends LsonObject = LsonObject, TUserMeta extends BaseUserMeta = BaseUserMeta, TRoomEvent extends Json = never, TThreadMetadata extends BaseMetadata = never>(client: Client): RoomContextBundle<TPresence, TStorage, TUserMeta, TRoomEvent, TThreadMetadata>;
+declare type Options<TUserMeta extends BaseUserMeta> = {
+    /**
+     * @deprecated Define 'resolveUsers' in 'createClient' from '@liveblocks/client' instead.
+     * Please refer to our Upgrade Guide to learn more, see https://liveblocks.io/docs/platform/upgrading/1.10.
+     *
+     * A function that returns user info from user IDs.
+     */
+    resolveUsers?: (args: ResolveUsersArgs) => OptionalPromise<(TUserMeta["info"] | undefined)[] | undefined>;
+    /**
+     * @deprecated Define 'resolveMentionSuggestions' in 'createClient' from '@liveblocks/client' instead.
+     * Please refer to our Upgrade Guide to learn more, see https://liveblocks.io/docs/platform/upgrading/1.10.
+     *
+     * A function that returns a list of user IDs matching a string.
+     */
+    resolveMentionSuggestions?: (args: ResolveMentionSuggestionsArgs) => OptionalPromise<string[]>;
+};
+declare function createRoomContext<TPresence extends JsonObject, TStorage extends LsonObject = LsonObject, TUserMeta extends BaseUserMeta = BaseUserMeta, TRoomEvent extends Json = never, TThreadMetadata extends BaseMetadata = never>(client: Client, options?: Options<TUserMeta>): RoomContextBundle<TPresence, TStorage, TUserMeta, TRoomEvent, TThreadMetadata>;
 
 /**
  * @private

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { ReactElement, ReactNode, PropsWithChildren } from 'react';
 import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Json, RoomNotificationSettings, Room, Status, BroadcastOptions, OthersEvent, LostConnectionEvent, History, BaseMetadata as BaseMetadata$1, Client } from '@liveblocks/client';
 export { Json, JsonObject, shallow } from '@liveblocks/client';
 import * as _liveblocks_core from '@liveblocks/core';
-import { BaseMetadata, GetThreadsOptions, Resolve, ToImmutable, kInternal, ThreadData, InboxNotificationData, RoomEventMessage, CommentData, RoomInfo, CommentBody, PartialNullable, RoomInitializers, BaseUserMeta as BaseUserMeta$1 } from '@liveblocks/core';
+import { BaseMetadata, GetThreadsOptions, Resolve, ToImmutable, kInternal, ThreadData, InboxNotificationData, RoomEventMessage, CommentData, RoomInfo, CommentBody, PartialNullable, RoomInitializers, ResolveUsersArgs, OptionalPromise, ResolveMentionSuggestionsArgs, BaseUserMeta as BaseUserMeta$1 } from '@liveblocks/core';
 
 declare type Props = {
     fallback: NonNullable<ReactNode> | null;
@@ -1049,7 +1049,23 @@ declare function createLiveblocksContext<TUserMeta extends BaseUserMeta = BaseUs
  * This is an internal API, use `createRoomContext` instead.
  */
 declare function useRoomContextBundle(): RoomContextBundle<JsonObject, LsonObject, BaseUserMeta, never, BaseMetadata>;
-declare function createRoomContext<TPresence extends JsonObject, TStorage extends LsonObject = LsonObject, TUserMeta extends BaseUserMeta = BaseUserMeta, TRoomEvent extends Json = never, TThreadMetadata extends BaseMetadata = never>(client: Client): RoomContextBundle<TPresence, TStorage, TUserMeta, TRoomEvent, TThreadMetadata>;
+declare type Options<TUserMeta extends BaseUserMeta> = {
+    /**
+     * @deprecated Define 'resolveUsers' in 'createClient' from '@liveblocks/client' instead.
+     * Please refer to our Upgrade Guide to learn more, see https://liveblocks.io/docs/platform/upgrading/1.10.
+     *
+     * A function that returns user info from user IDs.
+     */
+    resolveUsers?: (args: ResolveUsersArgs) => OptionalPromise<(TUserMeta["info"] | undefined)[] | undefined>;
+    /**
+     * @deprecated Define 'resolveMentionSuggestions' in 'createClient' from '@liveblocks/client' instead.
+     * Please refer to our Upgrade Guide to learn more, see https://liveblocks.io/docs/platform/upgrading/1.10.
+     *
+     * A function that returns a list of user IDs matching a string.
+     */
+    resolveMentionSuggestions?: (args: ResolveMentionSuggestionsArgs) => OptionalPromise<string[]>;
+};
+declare function createRoomContext<TPresence extends JsonObject, TStorage extends LsonObject = LsonObject, TUserMeta extends BaseUserMeta = BaseUserMeta, TRoomEvent extends Json = never, TThreadMetadata extends BaseMetadata = never>(client: Client, options?: Options<TUserMeta>): RoomContextBundle<TPresence, TStorage, TUserMeta, TRoomEvent, TThreadMetadata>;
 
 /**
  * @private

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-beta2";
 var PKG_FORMAT = "cjs";
 
 // src/ClientSideSuspense.tsx
@@ -164,7 +164,7 @@ 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;
     const query = options.query;
@@ -177,6 +177,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 +300,17 @@ function useRoomContextBundle() {
   }
   return bundle;
 }
-function createRoomContext(client) {
+function createRoomContext(client, options) {
+  if (_optionalChain([options, 'optionalAccess', _2 => _2.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', _3 => _3.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 +319,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 +518,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 +629,7 @@ function createRoomContext(client) {
       function onRootChange() {
         const newValue = root.get(key);
         if (newValue !== curr) {
-          _optionalChain([unsubCurr, 'optionalCall', _2 => _2()]);
+          _optionalChain([unsubCurr, 'optionalCall', _4 => _4()]);
           curr = newValue;
           subscribeToCurr();
           rerender();
@@ -629,7 +640,7 @@ function createRoomContext(client) {
       const unsubscribeRoot = room.subscribe(root, onRootChange);
       return () => {
         unsubscribeRoot();
-        _optionalChain([unsubCurr, 'optionalCall', _3 => _3()]);
+        _optionalChain([unsubCurr, 'optionalCall', _5 => _5()]);
       };
     }, [rootOrNull, room, key, rerender]);
     if (rootOrNull === null) {
@@ -839,7 +850,7 @@ function createRoomContext(client) {
     }
     poller.start(POLLING_INTERVAL);
   }
-  async function getThreadsAndInboxNotifications(room, queryKey, options) {
+  async function getThreadsAndInboxNotifications(room, queryKey, options2) {
     const roomId = room.id;
     return getOrInitRequest(
       queryKey,
@@ -848,7 +859,7 @@ function createRoomContext(client) {
         if (room2 === null) {
           return;
         }
-        return room2.getThreads(options);
+        return room2.getThreads(options2);
       },
       (result) => {
         if (result !== void 0) {
@@ -861,21 +872,18 @@ function createRoomContext(client) {
       }
     );
   }
-  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) {
           return {
@@ -883,26 +891,44 @@ function createRoomContext(client) {
           };
         }
         return {
-          threads: selectedThreads(room.id, state, options),
+          threads: selectedThreads(room.id, state, options2),
           isLoading: false,
           error: state.queries[queryKey].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', _6 => _6.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 () => {
@@ -913,20 +939,15 @@ function createRoomContext(client) {
       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 +1008,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",
@@ -1198,7 +1219,7 @@ function createRoomContext(client) {
           type: "create-comment",
           comment,
           id: optimisticUpdateId,
-          inboxNotificationId: _optionalChain([inboxNotification, 'optionalAccess', _5 => _5.id])
+          inboxNotificationId: _optionalChain([inboxNotification, 'optionalAccess', _7 => _7.id])
         });
         room.createComment({ threadId, commentId, body }).then(
           (newComment) => {
@@ -1359,7 +1380,7 @@ function createRoomContext(client) {
             );
           }
         } catch (error) {
-          _core.console.error(_optionalChain([error, 'optionalAccess', _6 => _6.message]));
+          _core.console.error(_optionalChain([error, 'optionalAccess', _8 => _8.message]));
         }
       };
       if (mentionSuggestionsCache.has(mentionSuggestionsCacheKey)) {
@@ -1686,7 +1707,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', _9 => _9.details, 'optionalAccess', _10 => _10.error]) === "FORBIDDEN") {
     const detailedMessage = [message, err.details.suggestion, err.details.docs].filter(Boolean).join("\n");
     _core.console.error(detailedMessage);
   }
@@ -1750,7 +1771,7 @@ function createSharedContext(client) {
     );
     return {
       ...state,
-      user: _optionalChain([state, 'optionalAccess', _9 => _9.data])
+      user: _optionalChain([state, 'optionalAccess', _11 => _11.data])
     };
   }
   function useRoomInfo(roomId) {
@@ -1790,7 +1811,7 @@ function createSharedContext(client) {
     );
     return {
       ...state,
-      info: _optionalChain([state, 'optionalAccess', _10 => _10.data])
+      info: _optionalChain([state, 'optionalAccess', _12 => _12.data])
     };
   }
   const bundle = {