@liveblocks/react 1.5.0-test1 → 1.5.0-test3

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, Json, Room, Status, BroadcastOptions, LostConnectionEvent, History, Client } from '@liveblocks/client';
+import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Json, Room, Status, BroadcastOptions, OthersEvent, LostConnectionEvent, History, Client } from '@liveblocks/client';
 export { Json, JsonObject, shallow } from '@liveblocks/client';
 
 declare type Props = {
@@ -204,6 +204,19 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
      */
     useBroadcastEvent(): (event: TRoomEvent, options?: BroadcastOptions) => void;
+    /**
+     * Get informed when users enter or leave the room, as an event.
+     *
+     * @example
+     * useOthersListener({ type, user, others }) => {
+     *   if (type === 'enter') {
+     *     // `user` has joined the room
+     *   } else if (type === 'leave') {
+     *     // `user` has left the room
+     *   }
+     * })
+     */
+    useOthersListener(callback: (event: OthersEvent<TPresence, TUserMeta>) => void): void;
     /**
      * Get informed when reconnecting to the Liveblocks servers is taking
      * longer than usual. This typically is a sign of a client that has lost
@@ -226,7 +239,8 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      */
     useLostConnectionListener(callback: (event: LostConnectionEvent) => void): void;
     /**
-     * useErrorListener is a react hook that lets you react to potential room connection errors.
+     * useErrorListener is a React hook that allows you to respond to potential room
+     * connection errors.
      *
      * @example
      * useErrorListener(er => {
@@ -235,7 +249,8 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      */
     useErrorListener(callback: (err: Error) => void): void;
     /**
-     * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.
+     * useEventListener is a React hook that allows you to respond to events broadcast
+     * by other users in the room.
      *
      * @example
      * useEventListener(({ connectionId, event }) => {
@@ -792,6 +807,7 @@ declare function useRoomContextBundle(): {
     useStatus: () => Status;
     useBatch: <T>() => (callback: () => T) => T;
     useBroadcastEvent: () => (event: never, options?: BroadcastOptions | undefined) => void;
+    useOthersListener: (callback: (event: OthersEvent<JsonObject, BaseUserMeta>) => void) => void;
     useLostConnectionListener: (callback: (event: LostConnectionEvent) => void) => void;
     useErrorListener: (callback: (err: Error) => void) => void;
     useEventListener: (callback: (data: RoomEventMessage<JsonObject, BaseUserMeta, never>) => void) => void;
@@ -1149,6 +1165,7 @@ declare function useRoomContextBundle(): {
         useStatus: () => Status;
         useBatch: <T>() => (callback: () => T) => T;
         useBroadcastEvent: () => (event: never, options?: BroadcastOptions | undefined) => void;
+        useOthersListener: (callback: (event: OthersEvent<JsonObject, BaseUserMeta>) => void) => void;
         useLostConnectionListener: (callback: (event: LostConnectionEvent) => void) => void;
         useErrorListener: (callback: (err: Error) => void) => void;
         useEventListener: (callback: (data: RoomEventMessage<JsonObject, BaseUserMeta, never>) => void) => void;

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, Json, Room, Status, BroadcastOptions, LostConnectionEvent, History, Client } from '@liveblocks/client';
+import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Json, Room, Status, BroadcastOptions, OthersEvent, LostConnectionEvent, History, Client } from '@liveblocks/client';
 export { Json, JsonObject, shallow } from '@liveblocks/client';
 
 declare type Props = {
@@ -204,6 +204,19 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
      */
     useBroadcastEvent(): (event: TRoomEvent, options?: BroadcastOptions) => void;
+    /**
+     * Get informed when users enter or leave the room, as an event.
+     *
+     * @example
+     * useOthersListener({ type, user, others }) => {
+     *   if (type === 'enter') {
+     *     // `user` has joined the room
+     *   } else if (type === 'leave') {
+     *     // `user` has left the room
+     *   }
+     * })
+     */
+    useOthersListener(callback: (event: OthersEvent<TPresence, TUserMeta>) => void): void;
     /**
      * Get informed when reconnecting to the Liveblocks servers is taking
      * longer than usual. This typically is a sign of a client that has lost
@@ -226,7 +239,8 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      */
     useLostConnectionListener(callback: (event: LostConnectionEvent) => void): void;
     /**
-     * useErrorListener is a react hook that lets you react to potential room connection errors.
+     * useErrorListener is a React hook that allows you to respond to potential room
+     * connection errors.
      *
      * @example
      * useErrorListener(er => {
@@ -235,7 +249,8 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      */
     useErrorListener(callback: (err: Error) => void): void;
     /**
-     * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.
+     * useEventListener is a React hook that allows you to respond to events broadcast
+     * by other users in the room.
      *
      * @example
      * useEventListener(({ connectionId, event }) => {
@@ -792,6 +807,7 @@ declare function useRoomContextBundle(): {
     useStatus: () => Status;
     useBatch: <T>() => (callback: () => T) => T;
     useBroadcastEvent: () => (event: never, options?: BroadcastOptions | undefined) => void;
+    useOthersListener: (callback: (event: OthersEvent<JsonObject, BaseUserMeta>) => void) => void;
     useLostConnectionListener: (callback: (event: LostConnectionEvent) => void) => void;
     useErrorListener: (callback: (err: Error) => void) => void;
     useEventListener: (callback: (data: RoomEventMessage<JsonObject, BaseUserMeta, never>) => void) => void;
@@ -1149,6 +1165,7 @@ declare function useRoomContextBundle(): {
         useStatus: () => Status;
         useBatch: <T>() => (callback: () => T) => T;
         useBroadcastEvent: () => (event: never, options?: BroadcastOptions | undefined) => void;
+        useOthersListener: (callback: (event: OthersEvent<JsonObject, BaseUserMeta>) => void) => void;
         useLostConnectionListener: (callback: (event: LostConnectionEvent) => void) => void;
         useErrorListener: (callback: (err: Error) => void) => void;
         useEventListener: (callback: (data: RoomEventMessage<JsonObject, BaseUserMeta, never>) => void) => void;

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.5.0-test1";
+var PKG_VERSION = "1.5.0-test3";
 var PKG_FORMAT = "cjs";
 
 // src/ClientSideSuspense.tsx
@@ -634,7 +634,7 @@ function useDebounce(value, delay = DEFAULT_DELAY) {
 // src/lib/use-initial.ts
 
 function useInitial(value) {
-  return _react.useRef.call(void 0, value).current;
+  return _react.useState.call(void 0, value)[0];
 }
 
 // src/lib/use-async-cache.ts
@@ -705,6 +705,16 @@ function useAsyncCache(cache, key, options) {
   };
 }
 
+// src/lib/use-latest.ts
+
+function useLatest(value) {
+  const ref = _react.useRef.call(void 0, value);
+  _react.useEffect.call(void 0, () => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+
 // src/lib/use-rerender.ts
 
 function useRerender() {
@@ -732,7 +742,7 @@ var missing_unstable_batchedUpdates = (reactVersion, roomId) => `We noticed you\
       ...
     </RoomProvider>
 
-Why? Please see https://liveblocks.io/docs/guides/troubleshooting#stale-props-zombie-child for more information`;
+Why? Please see https://liveblocks.io/docs/platform/troubleshooting#stale-props-zombie-child for more information`;
 var superfluous_unstable_batchedUpdates = "You don\u2019t need to pass unstable_batchedUpdates to RoomProvider anymore, since you\u2019re on React 18+ already.";
 function useSyncExternalStore3(s, gs, gss) {
   return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, s, gs, gss, identity);
@@ -797,40 +807,35 @@ function useRoomContextBundle() {
   }
   return bundle;
 }
-var lastInstanceId = 0;
 function createRoomContext(client, options) {
   const RoomContext = React2.createContext(null);
-  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 });
+    const [cache] = React2.useState(
+      () => /* @__PURE__ */ new Map()
+    );
+    const stableEnterRoom = React2.useCallback(
+      (roomId, options2) => {
+        const cached = cache.get(roomId);
+        if (cached)
+          return cached;
+        const rv = client.enterRoom(
+          roomId,
+          options2
+        );
+        const origLeave = rv.leave;
+        rv.leave = () => {
+          origLeave();
+          cache.delete(roomId);
+        };
+        cache.set(roomId, rv);
+        return rv;
+      },
+      [cache]
+    );
+    return /* @__PURE__ */ React2.createElement(RoomProviderInner, { ...props, stableEnterRoom });
   }
   function RoomProviderInner(props) {
-    const {
-      instanceId,
-      id: roomId,
-      initialPresence,
-      initialStorage,
-      unstable_batchedUpdates
-    } = props;
-    const autoConnect = _nullishCoalesce(_nullishCoalesce(props.autoConnect, () => ( props.shouldInitiallyConnect)), () => ( typeof window !== "undefined"));
+    const { id: roomId, stableEnterRoom } = props;
     if (process.env.NODE_ENV !== "production") {
       if (!roomId) {
         throw new Error(
@@ -851,31 +856,24 @@ function createRoomContext(client, options) {
         superfluous_unstable_batchedUpdates
       );
     }
-    const frozen = useInitial({
-      instanceId,
-      initialPresence,
-      initialStorage,
-      unstable_batchedUpdates,
-      autoConnect
+    const frozenProps = useInitial({
+      initialPresence: props.initialPresence,
+      initialStorage: props.initialStorage,
+      unstable_batchedUpdates: props.unstable_batchedUpdates,
+      autoConnect: _nullishCoalesce(_nullishCoalesce(props.autoConnect, () => ( props.shouldInitiallyConnect)), () => ( typeof window !== "undefined"))
     });
     const [{ room }, setRoomLeavePair] = React2.useState(
-      () => stableEnterRoom(frozen.instanceId, roomId, {
-        initialPresence: frozen.initialPresence,
-        initialStorage: frozen.initialStorage,
-        autoConnect: false,
-        unstable_batchedUpdates: frozen.unstable_batchedUpdates
+      () => stableEnterRoom(roomId, {
+        ...frozenProps,
+        autoConnect: false
+        // Deliberately using false here on the first render, see below
       })
     );
     React2.useEffect(() => {
-      const pair = stableEnterRoom(frozen.instanceId, roomId, {
-        initialPresence: frozen.initialPresence,
-        initialStorage: frozen.initialStorage,
-        autoConnect: false,
-        unstable_batchedUpdates: frozen.unstable_batchedUpdates
-      });
+      const pair = stableEnterRoom(roomId, frozenProps);
       setRoomLeavePair(pair);
       const { room: room2, leave } = pair;
-      if (frozen.autoConnect) {
+      if (frozenProps.autoConnect) {
         room2.connect();
       }
       return () => {
@@ -885,7 +883,7 @@ function createRoomContext(client, options) {
         }
         leave();
       };
-    }, [roomId, frozen]);
+    }, [roomId, frozenProps, stableEnterRoom]);
     return /* @__PURE__ */ React2.createElement(RoomContext.Provider, { value: room }, /* @__PURE__ */ React2.createElement(
       ContextBundle.Provider,
       {
@@ -995,42 +993,41 @@ function createRoomContext(client, options) {
       [room]
     );
   }
+  function useOthersListener(callback) {
+    const room = useRoom();
+    const savedCallback = useLatest(callback);
+    React2.useEffect(
+      () => room.events.others.subscribe((event) => savedCallback.current(event)),
+      [room, savedCallback]
+    );
+  }
   function useLostConnectionListener(callback) {
     const room = useRoom();
-    const savedCallback = React2.useRef(callback);
-    React2.useEffect(() => {
-      savedCallback.current = callback;
-    });
+    const savedCallback = useLatest(callback);
     React2.useEffect(
       () => room.events.lostConnection.subscribe(
         (event) => savedCallback.current(event)
       ),
-      [room]
+      [room, savedCallback]
     );
   }
   function useErrorListener(callback) {
     const room = useRoom();
-    const savedCallback = React2.useRef(callback);
-    React2.useEffect(() => {
-      savedCallback.current = callback;
-    });
+    const savedCallback = useLatest(callback);
     React2.useEffect(
       () => room.events.error.subscribe((e) => savedCallback.current(e)),
-      [room]
+      [room, savedCallback]
     );
   }
   function useEventListener(callback) {
     const room = useRoom();
-    const savedCallback = React2.useRef(callback);
-    React2.useEffect(() => {
-      savedCallback.current = callback;
-    });
+    const savedCallback = useLatest(callback);
     React2.useEffect(() => {
       const listener = (eventData) => {
         savedCallback.current(eventData);
       };
       return room.events.customEvent.subscribe(listener);
-    }, [room]);
+    }, [room, savedCallback]);
   }
   function useSelf(maybeSelector, isEqual) {
     const room = useRoom();
@@ -1398,6 +1395,7 @@ function createRoomContext(client, options) {
     useStatus,
     useBatch,
     useBroadcastEvent,
+    useOthersListener,
     useLostConnectionListener,
     useErrorListener,
     useEventListener,
@@ -1436,6 +1434,7 @@ function createRoomContext(client, options) {
       useStatus,
       useBatch,
       useBroadcastEvent,
+      useOthersListener,
       useLostConnectionListener,
       useErrorListener,
       useEventListener,