@liveblocks/react 1.5.0-test1 → 1.5.0-test3

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { detectDupes } from "@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 = "esm";
 
 // src/ClientSideSuspense.tsx
@@ -628,13 +628,13 @@ function useDebounce(value, delay = DEFAULT_DELAY) {
 }
 
 // src/lib/use-async-cache.ts
-import { useCallback, useEffect as useEffect4, useMemo, useRef as useRef3 } from "react";
+import { useCallback, useEffect as useEffect4, useMemo, useRef as useRef2 } from "react";
 import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external-store/shim/index.js";
 
 // src/lib/use-initial.ts
-import { useRef as useRef2 } from "react";
+import { useState as useState3 } from "react";
 function useInitial(value) {
-  return useRef2(value).current;
+  return useState3(value)[0];
 }
 
 // src/lib/use-async-cache.ts
@@ -665,7 +665,7 @@ function useAsyncCache(cache, key, options) {
   );
   const revalidate = useCallback(() => cacheItem?.revalidate(), [cacheItem]);
   const state = useSyncExternalStore2(subscribe, getState, getState);
-  const previousData = useRef3();
+  const previousData = useRef2();
   let data = state.data;
   useEffect4(() => {
     previousData.current = { key, data: state.data };
@@ -705,6 +705,16 @@ function useAsyncCache(cache, key, options) {
   };
 }
 
+// src/lib/use-latest.ts
+import { useEffect as useEffect5, useRef as useRef3 } from "react";
+function useLatest(value) {
+  const ref = useRef3(value);
+  useEffect5(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+
 // src/lib/use-rerender.ts
 import { useReducer } from "react";
 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 useSyncExternalStoreWithSelector(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 = 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: 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,