@liveblocks/react 1.4.8 → 1.5.0-subdoc

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.4.8";
+var PKG_VERSION = "1.5.0-subdoc";
 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);
@@ -744,9 +754,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 {
@@ -802,14 +809,33 @@ function useRoomContextBundle() {
 }
 function createRoomContext(client, options) {
   const RoomContext = React2.createContext(null);
-  function RoomProvider(props) {
-    const {
-      id: roomId,
-      initialPresence,
-      initialStorage,
-      unstable_batchedUpdates,
-      shouldInitiallyConnect
-    } = props;
+  function RoomProviderOuter(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 { id: roomId, stableEnterRoom } = props;
     if (process.env.NODE_ENV !== "production") {
       if (!roomId) {
         throw new Error(
@@ -830,39 +856,34 @@ function createRoomContext(client, options) {
         superfluous_unstable_batchedUpdates
       );
     }
-    const frozen = useInitial({
-      initialPresence,
-      initialStorage,
-      unstable_batchedUpdates,
-      shouldInitiallyConnect: shouldInitiallyConnect === void 0 ? typeof window !== "undefined" : shouldInitiallyConnect
+    const frozenProps = useInitial({
+      initialPresence: props.initialPresence,
+      initialStorage: props.initialStorage,
+      unstable_batchedUpdates: props.unstable_batchedUpdates,
+      autoConnect: props.autoConnect ?? props.shouldInitiallyConnect ?? typeof window !== "undefined"
     });
-    const [room, setRoom] = React2.useState(
-      () => client.enter(roomId, {
-        initialPresence: frozen.initialPresence,
-        initialStorage: frozen.initialStorage,
-        shouldInitiallyConnect: frozen.shouldInitiallyConnect,
-        unstable_batchedUpdates: frozen.unstable_batchedUpdates
+    const [{ room }, setRoomLeavePair] = React2.useState(
+      () => stableEnterRoom(roomId, {
+        ...frozenProps,
+        autoConnect: false
+        // Deliberately using false here on the first render, see below
       })
     );
     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(roomId, frozenProps);
+      setRoomLeavePair(pair);
+      const { room: room2, leave } = pair;
+      if (frozenProps.autoConnect) {
+        room2.connect();
+      }
       return () => {
         const commentsRoom = commentsRooms.get(room2);
         if (commentsRoom) {
           commentsRooms.delete(room2);
         }
-        client.leave(roomId);
+        leave();
       };
-    }, [roomId, frozen]);
+    }, [roomId, frozenProps, stableEnterRoom]);
     return /* @__PURE__ */ React2.createElement(RoomContext.Provider, { value: room }, /* @__PURE__ */ React2.createElement(
       ContextBundle.Provider,
       {
@@ -885,7 +906,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() {
@@ -972,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();
@@ -1370,11 +1390,12 @@ function createRoomContext(client, options) {
   }
   const bundle = {
     RoomContext,
-    RoomProvider,
+    RoomProvider: RoomProviderOuter,
     useRoom,
     useStatus,
     useBatch,
     useBroadcastEvent,
+    useOthersListener,
     useLostConnectionListener,
     useErrorListener,
     useEventListener,
@@ -1408,11 +1429,12 @@ function createRoomContext(client, options) {
     useRemoveReaction,
     suspense: {
       RoomContext,
-      RoomProvider,
+      RoomProvider: RoomProviderOuter,
       useRoom,
       useStatus,
       useBatch,
       useBroadcastEvent,
+      useOthersListener,
       useLostConnectionListener,
       useErrorListener,
       useEventListener,