@liveblocks/react 1.4.7 → 1.5.0-test1

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { ReactElement, ReactNode } from 'react';
 import * as _liveblocks_core from '@liveblocks/core';
 import { CommentBody, BaseMetadata, ThreadData, Resolve, ToImmutable, RoomEventMessage, CommentData, RoomInitializers } from '@liveblocks/core';
-import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Others, Json, Room, Status, BroadcastOptions, LostConnectionEvent, History, Client } from '@liveblocks/client';
+import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Json, Room, Status, BroadcastOptions, LostConnectionEvent, History, Client } from '@liveblocks/client';
 export { Json, JsonObject, shallow } from '@liveblocks/client';
 
 declare type Props = {
@@ -133,6 +133,8 @@ declare type RoomProviderProps<TPresence extends JsonObject, TStorage extends Ls
      * meaning the RoomProvider tries to connect to Liveblocks servers
      * only on the client side.
      */
+    autoConnect?: boolean;
+    /** @deprecated Renamed to `autoConnect` */
     shouldInitiallyConnect?: boolean;
     /**
      * If you're on React 17 or lower, pass in a reference to
@@ -158,7 +160,7 @@ declare type OmitFirstArg<F> = F extends (first: any, ...rest: infer A) => infer
 declare type MutationContext<TPresence extends JsonObject, TStorage extends LsonObject, TUserMeta extends BaseUserMeta> = {
     storage: LiveObject<TStorage>;
     self: User<TPresence, TUserMeta>;
-    others: Others<TPresence, TUserMeta>;
+    others: readonly User<TPresence, TUserMeta>[];
     setMyPresence: (patch: Partial<TPresence>, options?: {
         addToHistory: boolean;
     }) => void;
@@ -369,7 +371,7 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      *   </>
      * )
      */
-    useOthers(): Others<TPresence, TUserMeta>;
+    useOthers(): readonly User<TPresence, TUserMeta>[];
     /**
      * Extract arbitrary data based on all the users currently connected in the
      * room (except yourself).
@@ -391,7 +393,7 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      * const someoneIsTyping = useOthers(users => users.some(u => u.presence.isTyping));
      *
      */
-    useOthers<T>(selector: (others: Others<TPresence, TUserMeta>) => T, isEqual?: (prev: T, curr: T) => boolean): T;
+    useOthers<T>(selector: (others: readonly User<TPresence, TUserMeta>[]) => T, isEqual?: (prev: T, curr: T) => boolean): T;
     /**
      * Returns an array of connection IDs. This matches the values you'll get by
      * using the `useOthers()` hook.
@@ -780,6 +782,7 @@ declare function useRoomContextBundle(): {
     RoomProvider: (props: {
         id: string;
         children: React$1.ReactNode;
+        autoConnect?: boolean | undefined;
         shouldInitiallyConnect?: boolean | undefined;
         unstable_batchedUpdates?: ((cb: () => void) => void) | undefined;
         initialPresence: JsonObject | ((roomId: string) => JsonObject);
@@ -806,8 +809,8 @@ declare function useRoomContextBundle(): {
     } | undefined) => void;
     useMutation: <F extends (context: MutationContext<JsonObject, LsonObject, BaseUserMeta>, ...args: any[]) => any>(callback: F, deps: readonly unknown[]) => OmitFirstArg<F>;
     useOthers: {
-        (): _liveblocks_core.Others<JsonObject, BaseUserMeta>;
-        <T_1>(selector: (others: _liveblocks_core.Others<JsonObject, BaseUserMeta>) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
+        (): readonly User<JsonObject, BaseUserMeta>[];
+        <T_1>(selector: (others: readonly User<JsonObject, BaseUserMeta>[]) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
     };
     useOthersConnectionIds: () => readonly number[];
     useOthersMapped: <T_2>(itemSelector: (other: User<JsonObject, BaseUserMeta>) => T_2, itemIsEqual?: ((prev: T_2, curr: T_2) => boolean) | undefined) => readonly (readonly [connectionId: number, data: T_2])[];
@@ -1136,6 +1139,7 @@ declare function useRoomContextBundle(): {
         RoomProvider: (props: {
             id: string;
             children: React$1.ReactNode;
+            autoConnect?: boolean | undefined;
             shouldInitiallyConnect?: boolean | undefined;
             unstable_batchedUpdates?: ((cb: () => void) => void) | undefined;
             initialPresence: JsonObject | ((roomId: string) => JsonObject);
@@ -1162,8 +1166,8 @@ declare function useRoomContextBundle(): {
         } | undefined) => void;
         useMutation: <F extends (context: MutationContext<JsonObject, LsonObject, BaseUserMeta>, ...args: any[]) => any>(callback: F, deps: readonly unknown[]) => OmitFirstArg<F>;
         useOthers: {
-            (): _liveblocks_core.Others<JsonObject, BaseUserMeta>;
-            <T_1>(selector: (others: _liveblocks_core.Others<JsonObject, BaseUserMeta>) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
+            (): readonly User<JsonObject, BaseUserMeta>[];
+            <T_1>(selector: (others: readonly User<JsonObject, BaseUserMeta>[]) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
         };
         useOthersConnectionIds: () => readonly number[];
         useOthersMapped: <T_2>(itemSelector: (other: User<JsonObject, BaseUserMeta>) => T_2, itemIsEqual?: ((prev: T_2, curr: T_2) => boolean) | undefined) => readonly (readonly [connectionId: number, data: T_2])[];

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import { ReactElement, ReactNode } from 'react';
 import * as _liveblocks_core from '@liveblocks/core';
 import { CommentBody, BaseMetadata, ThreadData, Resolve, ToImmutable, RoomEventMessage, CommentData, RoomInitializers } from '@liveblocks/core';
-import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Others, Json, Room, Status, BroadcastOptions, LostConnectionEvent, History, Client } from '@liveblocks/client';
+import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Json, Room, Status, BroadcastOptions, LostConnectionEvent, History, Client } from '@liveblocks/client';
 export { Json, JsonObject, shallow } from '@liveblocks/client';
 
 declare type Props = {
@@ -133,6 +133,8 @@ declare type RoomProviderProps<TPresence extends JsonObject, TStorage extends Ls
      * meaning the RoomProvider tries to connect to Liveblocks servers
      * only on the client side.
      */
+    autoConnect?: boolean;
+    /** @deprecated Renamed to `autoConnect` */
     shouldInitiallyConnect?: boolean;
     /**
      * If you're on React 17 or lower, pass in a reference to
@@ -158,7 +160,7 @@ declare type OmitFirstArg<F> = F extends (first: any, ...rest: infer A) => infer
 declare type MutationContext<TPresence extends JsonObject, TStorage extends LsonObject, TUserMeta extends BaseUserMeta> = {
     storage: LiveObject<TStorage>;
     self: User<TPresence, TUserMeta>;
-    others: Others<TPresence, TUserMeta>;
+    others: readonly User<TPresence, TUserMeta>[];
     setMyPresence: (patch: Partial<TPresence>, options?: {
         addToHistory: boolean;
     }) => void;
@@ -369,7 +371,7 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      *   </>
      * )
      */
-    useOthers(): Others<TPresence, TUserMeta>;
+    useOthers(): readonly User<TPresence, TUserMeta>[];
     /**
      * Extract arbitrary data based on all the users currently connected in the
      * room (except yourself).
@@ -391,7 +393,7 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      * const someoneIsTyping = useOthers(users => users.some(u => u.presence.isTyping));
      *
      */
-    useOthers<T>(selector: (others: Others<TPresence, TUserMeta>) => T, isEqual?: (prev: T, curr: T) => boolean): T;
+    useOthers<T>(selector: (others: readonly User<TPresence, TUserMeta>[]) => T, isEqual?: (prev: T, curr: T) => boolean): T;
     /**
      * Returns an array of connection IDs. This matches the values you'll get by
      * using the `useOthers()` hook.
@@ -780,6 +782,7 @@ declare function useRoomContextBundle(): {
     RoomProvider: (props: {
         id: string;
         children: React$1.ReactNode;
+        autoConnect?: boolean | undefined;
         shouldInitiallyConnect?: boolean | undefined;
         unstable_batchedUpdates?: ((cb: () => void) => void) | undefined;
         initialPresence: JsonObject | ((roomId: string) => JsonObject);
@@ -806,8 +809,8 @@ declare function useRoomContextBundle(): {
     } | undefined) => void;
     useMutation: <F extends (context: MutationContext<JsonObject, LsonObject, BaseUserMeta>, ...args: any[]) => any>(callback: F, deps: readonly unknown[]) => OmitFirstArg<F>;
     useOthers: {
-        (): _liveblocks_core.Others<JsonObject, BaseUserMeta>;
-        <T_1>(selector: (others: _liveblocks_core.Others<JsonObject, BaseUserMeta>) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
+        (): readonly User<JsonObject, BaseUserMeta>[];
+        <T_1>(selector: (others: readonly User<JsonObject, BaseUserMeta>[]) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
     };
     useOthersConnectionIds: () => readonly number[];
     useOthersMapped: <T_2>(itemSelector: (other: User<JsonObject, BaseUserMeta>) => T_2, itemIsEqual?: ((prev: T_2, curr: T_2) => boolean) | undefined) => readonly (readonly [connectionId: number, data: T_2])[];
@@ -1136,6 +1139,7 @@ declare function useRoomContextBundle(): {
         RoomProvider: (props: {
             id: string;
             children: React$1.ReactNode;
+            autoConnect?: boolean | undefined;
             shouldInitiallyConnect?: boolean | undefined;
             unstable_batchedUpdates?: ((cb: () => void) => void) | undefined;
             initialPresence: JsonObject | ((roomId: string) => JsonObject);
@@ -1162,8 +1166,8 @@ declare function useRoomContextBundle(): {
         } | undefined) => void;
         useMutation: <F extends (context: MutationContext<JsonObject, LsonObject, BaseUserMeta>, ...args: any[]) => any>(callback: F, deps: readonly unknown[]) => OmitFirstArg<F>;
         useOthers: {
-            (): _liveblocks_core.Others<JsonObject, BaseUserMeta>;
-            <T_1>(selector: (others: _liveblocks_core.Others<JsonObject, BaseUserMeta>) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
+            (): readonly User<JsonObject, BaseUserMeta>[];
+            <T_1>(selector: (others: readonly User<JsonObject, BaseUserMeta>[]) => T_1, isEqual?: ((prev: T_1, curr: T_1) => boolean) | undefined): T_1;
         };
         useOthersConnectionIds: () => readonly number[];
         useOthersMapped: <T_2>(itemSelector: (other: User<JsonObject, BaseUserMeta>) => T_2, itemIsEqual?: ((prev: T_2, curr: T_2) => boolean) | undefined) => readonly (readonly [connectionId: number, data: T_2])[];

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.4.7";
+var PKG_VERSION = "1.5.0-test1";
 var PKG_FORMAT = "cjs";
 
 // src/ClientSideSuspense.tsx
@@ -744,9 +744,6 @@ function alwaysEmptyList() {
 function alwaysNull() {
   return null;
 }
-function alwaysConnecting() {
-  return "connecting";
-}
 function makeMutationContext(room) {
   const errmsg = "This mutation cannot be used until connected to the Liveblocks room";
   return {
@@ -800,16 +797,40 @@ function useRoomContextBundle() {
   }
   return bundle;
 }
+var lastInstanceId = 0;
 function createRoomContext(client, options) {
   const RoomContext = React2.createContext(null);
-  function RoomProvider(props) {
+  const roomCache = /* @__PURE__ */ new Map();
+  function stableEnterRoom(instanceId, roomId, options2) {
+    const key = `${instanceId}:${roomId}`;
+    const cached = roomCache.get(key);
+    if (cached)
+      return cached;
+    const rv = client.enterRoom(
+      roomId,
+      options2
+    );
+    const origLeave = rv.leave;
+    rv.leave = () => {
+      origLeave();
+      roomCache.delete(key);
+    };
+    roomCache.set(key, rv);
+    return rv;
+  }
+  function RoomProviderOuter(props) {
+    const instanceId = React2.useRef(`p${++lastInstanceId}`).current;
+    return /* @__PURE__ */ React2.createElement(RoomProviderInner, { instanceId, ...props });
+  }
+  function RoomProviderInner(props) {
     const {
+      instanceId,
       id: roomId,
       initialPresence,
       initialStorage,
-      unstable_batchedUpdates,
-      shouldInitiallyConnect
+      unstable_batchedUpdates
     } = props;
+    const autoConnect = _nullishCoalesce(_nullishCoalesce(props.autoConnect, () => ( props.shouldInitiallyConnect)), () => ( typeof window !== "undefined"));
     if (process.env.NODE_ENV !== "production") {
       if (!roomId) {
         throw new Error(
@@ -831,36 +852,38 @@ function createRoomContext(client, options) {
       );
     }
     const frozen = useInitial({
+      instanceId,
       initialPresence,
       initialStorage,
       unstable_batchedUpdates,
-      shouldInitiallyConnect: shouldInitiallyConnect === void 0 ? typeof window !== "undefined" : shouldInitiallyConnect
+      autoConnect
     });
-    const [room, setRoom] = React2.useState(
-      () => client.enter(roomId, {
+    const [{ room }, setRoomLeavePair] = React2.useState(
+      () => stableEnterRoom(frozen.instanceId, roomId, {
         initialPresence: frozen.initialPresence,
         initialStorage: frozen.initialStorage,
-        shouldInitiallyConnect: frozen.shouldInitiallyConnect,
+        autoConnect: false,
         unstable_batchedUpdates: frozen.unstable_batchedUpdates
       })
     );
     React2.useEffect(() => {
-      const room2 = client.enter(
-        roomId,
-        {
-          initialPresence: frozen.initialPresence,
-          initialStorage: frozen.initialStorage,
-          shouldInitiallyConnect: frozen.shouldInitiallyConnect,
-          unstable_batchedUpdates: frozen.unstable_batchedUpdates
-        }
-      );
-      setRoom(room2);
+      const pair = stableEnterRoom(frozen.instanceId, roomId, {
+        initialPresence: frozen.initialPresence,
+        initialStorage: frozen.initialStorage,
+        autoConnect: false,
+        unstable_batchedUpdates: frozen.unstable_batchedUpdates
+      });
+      setRoomLeavePair(pair);
+      const { room: room2, leave } = pair;
+      if (frozen.autoConnect) {
+        room2.connect();
+      }
       return () => {
         const commentsRoom = commentsRooms.get(room2);
         if (commentsRoom) {
           commentsRooms.delete(room2);
         }
-        client.leave(roomId);
+        leave();
       };
     }, [roomId, frozen]);
     return /* @__PURE__ */ React2.createElement(RoomContext.Provider, { value: room }, /* @__PURE__ */ React2.createElement(
@@ -885,7 +908,7 @@ function createRoomContext(client, options) {
     const room = useRoom();
     const subscribe = room.events.status.subscribe;
     const getSnapshot = room.getStatus;
-    const getServerSnapshot = alwaysConnecting;
+    const getServerSnapshot = room.getStatus;
     return useSyncExternalStore3(subscribe, getSnapshot, getServerSnapshot);
   }
   function useMyPresence() {
@@ -1370,7 +1393,7 @@ function createRoomContext(client, options) {
   }
   const bundle = {
     RoomContext,
-    RoomProvider,
+    RoomProvider: RoomProviderOuter,
     useRoom,
     useStatus,
     useBatch,
@@ -1408,7 +1431,7 @@ function createRoomContext(client, options) {
     useRemoveReaction,
     suspense: {
       RoomContext,
-      RoomProvider,
+      RoomProvider: RoomProviderOuter,
       useRoom,
       useStatus,
       useBatch,