@liveblocks/react 0.17.11-debug2 → 0.18.0-beta1

package/index.js

@@ -1,48 +1,20 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-
-// src/client.tsx
-var _internal = require('@liveblocks/client/internal');
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }// src/ClientSideSuspense.tsx
 var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react);
-var ClientContext = React.createContext(null);
-function LiveblocksProvider(props) {
-  _internal.deprecate.call(void 0, 
-    "LiveblocksProvider is no longer needed in your component tree if you set up your Liveblocks context using `createRoomContext()`. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return /* @__PURE__ */ React.createElement(ClientContext.Provider, {
-    value: props.client
-  }, props.children);
-}
-function useClient() {
-  const client = React.useContext(ClientContext);
-  if (client == null) {
-    throw new Error("LiveblocksProvider is missing from the react tree");
-  }
-  return client;
+function ClientSideSuspense(props) {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  return /* @__PURE__ */ React.createElement(React.Suspense, {
+    fallback: props.fallback
+  }, mounted ? props.children() : props.fallback);
 }
 
 // src/factory.tsx
-var _client2 = require('@liveblocks/client');
-
+var _client = require('@liveblocks/client');
+var _internal = require('@liveblocks/client/internal');
 
+var _withselector = require('use-sync-external-store/shim/with-selector');
 
 // src/hooks.ts
 
@@ -53,27 +25,22 @@ function useRerender() {
   );
   return update;
 }
+function useInitial(value) {
+  return _react.useRef.call(void 0, value).current;
+}
 
 // src/factory.tsx
-function useInitial(value) {
-  return React2.useRef(value).current;
+var noop = () => {
+};
+var identity = (x) => x;
+var EMPTY_OTHERS = _internal.asArrayWithLegacyMethods.call(void 0, []);
+function getEmptyOthers() {
+  return EMPTY_OTHERS;
 }
 function createRoomContext(client) {
-  let useClient2;
-  if (client !== "__legacy") {
-    useClient2 = () => client;
-  } else {
-    useClient2 = useClient;
-  }
   const RoomContext = React2.createContext(null);
-  function RoomProvider2(props) {
-    const {
-      id: roomId,
-      initialPresence,
-      initialStorage,
-      defaultPresence,
-      defaultStorageRoot
-    } = props;
+  function RoomProvider(props) {
+    const { id: roomId, initialPresence, initialStorage } = props;
     if (process.env.NODE_ENV !== "production") {
       if (roomId == null) {
         throw new Error(
@@ -84,93 +51,140 @@ function createRoomContext(client) {
         throw new Error("RoomProvider id property should be a string.");
       }
     }
-    _internal.errorIf.call(void 0, 
-      defaultPresence,
-      "RoomProvider's `defaultPresence` prop will be removed in @liveblocks/react 0.18. Please use `initialPresence` instead. For more info, see https://bit.ly/3Niy5aP"
-    );
-    _internal.errorIf.call(void 0, 
-      defaultStorageRoot,
-      "RoomProvider's `defaultStorageRoot` prop will be removed in @liveblocks/react 0.18. Please use `initialStorage` instead. For more info, see https://bit.ly/3Niy5aP"
-    );
-    const _client = useClient2();
     const frozen = useInitial({
       initialPresence,
-      initialStorage,
-      defaultPresence,
-      defaultStorageRoot
+      initialStorage
     });
     const [room, setRoom] = React2.useState(
-      () => _client.enter(roomId, {
+      () => client.enter(roomId, {
         initialPresence,
         initialStorage,
-        defaultPresence,
-        defaultStorageRoot,
         DO_NOT_USE_withoutConnecting: typeof window === "undefined"
       })
     );
     React2.useEffect(() => {
       setRoom(
-        _client.enter(roomId, {
+        client.enter(roomId, {
           initialPresence: frozen.initialPresence,
           initialStorage: frozen.initialStorage,
-          defaultPresence: frozen.defaultPresence,
-          defaultStorageRoot: frozen.defaultStorageRoot,
           DO_NOT_USE_withoutConnecting: typeof window === "undefined"
         })
       );
       return () => {
-        _client.leave(roomId);
+        client.leave(roomId);
       };
-    }, [_client, roomId, frozen]);
+    }, [roomId, frozen]);
     return /* @__PURE__ */ React2.createElement(RoomContext.Provider, {
       value: room
     }, props.children);
   }
-  function useRoom2() {
+  function connectionIdSelector(others) {
+    return others.map((user) => user.connectionId);
+  }
+  function useRoom() {
     const room = React2.useContext(RoomContext);
     if (room == null) {
       throw new Error("RoomProvider is missing from the react tree");
     }
     return room;
   }
-  function useMyPresence2() {
-    const room = useRoom2();
+  function useMyPresence() {
+    const room = useRoom();
     const presence = room.getPresence();
     const rerender = useRerender();
-    React2.useEffect(() => {
-      const unsubscribe = room.subscribe("my-presence", rerender);
-      return () => {
-        unsubscribe();
-      };
-    }, [room, rerender]);
-    const setPresence = React2.useCallback(
-      (overrides, options) => room.updatePresence(overrides, options),
-      [room]
-    );
+    const setPresence = room.updatePresence;
+    React2.useEffect(() => room.events.me.subscribe(rerender), [room, rerender]);
     return [presence, setPresence];
   }
-  function useUpdateMyPresence2() {
-    const room = useRoom2();
-    return React2.useCallback(
-      (overrides, options) => {
-        room.updatePresence(overrides, options);
-      },
-      [room]
+  function useUpdateMyPresence() {
+    return useRoom().updatePresence;
+  }
+  function useOthers(selector, isEqual) {
+    const room = useRoom();
+    const subscribe = room.events.others.subscribe;
+    const getSnapshot = room.getOthers;
+    const getServerSnapshot = getEmptyOthers;
+    return _withselector.useSyncExternalStoreWithSelector.call(void 0, 
+      subscribe,
+      getSnapshot,
+      getServerSnapshot,
+      selector != null ? selector : identity,
+      isEqual
     );
   }
-  function useOthers2() {
-    const room = useRoom2();
-    const rerender = useRerender();
-    React2.useEffect(() => {
-      const unsubscribe = room.subscribe("others", rerender);
-      return () => {
-        unsubscribe();
-      };
-    }, [room, rerender]);
-    return room.getOthers();
+  function useOtherIds(itemSelector, isEqual) {
+    const _useCallback = React2.useCallback;
+    const _useOthers = useOthers;
+    if (itemSelector === void 0) {
+      return _useOthers(connectionIdSelector, _client.shallow);
+    } else {
+      const wrappedSelector = _useCallback(
+        (others) => others.map((other) => ({
+          connectionId: other.connectionId,
+          data: itemSelector(other)
+        })),
+        [itemSelector]
+      );
+      const wrappedIsEqual = _useCallback(
+        (a, b) => {
+          const eq = isEqual != null ? isEqual : Object.is;
+          return a.length === b.length && a.every((atuple, index) => {
+            const btuple = b[index];
+            return atuple.connectionId === btuple.connectionId && eq(atuple.data, btuple.data);
+          });
+        },
+        [isEqual]
+      );
+      return _useOthers(wrappedSelector, wrappedIsEqual);
+    }
+  }
+  const sentinel = Symbol();
+  function useOther(connectionId, selector, isEqual) {
+    const _useCallback = React2.useCallback;
+    const _useOthers = useOthers;
+    if (selector === void 0) {
+      const selector2 = _useCallback(
+        (others) => others.find((other2) => other2.connectionId === connectionId),
+        [connectionId]
+      );
+      const other = _useOthers(selector2, _client.shallow);
+      if (other === void 0) {
+        throw new Error(
+          `No such other user with connection id ${connectionId} exists`
+        );
+      }
+      return other;
+    } else {
+      const wrappedSelector = _useCallback(
+        (others) => {
+          const other2 = others.find(
+            (other3) => other3.connectionId === connectionId
+          );
+          return other2 !== void 0 ? selector(other2) : sentinel;
+        },
+        [connectionId, selector]
+      );
+      const wrappedIsEqual = _useCallback(
+        (a, b) => {
+          if (a === sentinel || b === sentinel) {
+            return a === b;
+          }
+          const eq = isEqual != null ? isEqual : Object.is;
+          return eq(a, b);
+        },
+        [isEqual]
+      );
+      const other = _useOthers(wrappedSelector, wrappedIsEqual);
+      if (other === sentinel) {
+        throw new Error(
+          `No such other user with connection id ${connectionId} exists`
+        );
+      }
+      return other;
+    }
   }
-  function useBroadcastEvent2() {
-    const room = useRoom2();
+  function useBroadcastEvent() {
+    const room = useRoom();
     return React2.useCallback(
       (event, options = { shouldQueueEventIfNotReady: false }) => {
         room.broadcastEvent(event, options);
@@ -178,22 +192,19 @@ function createRoomContext(client) {
       [room]
     );
   }
-  function useErrorListener2(callback) {
-    const room = useRoom2();
+  function useErrorListener(callback) {
+    const room = useRoom();
     const savedCallback = React2.useRef(callback);
     React2.useEffect(() => {
       savedCallback.current = callback;
     });
-    React2.useEffect(() => {
-      const listener = (e) => savedCallback.current(e);
-      const unsubscribe = room.subscribe("error", listener);
-      return () => {
-        unsubscribe();
-      };
-    }, [room]);
+    React2.useEffect(
+      () => room.events.error.subscribe((e) => savedCallback.current(e)),
+      [room]
+    );
   }
-  function useEventListener2(callback) {
-    const room = useRoom2();
+  function useEventListener(callback) {
+    const room = useRoom();
     const savedCallback = React2.useRef(callback);
     React2.useEffect(() => {
       savedCallback.current = callback;
@@ -202,256 +213,92 @@ function createRoomContext(client) {
       const listener = (eventData) => {
         savedCallback.current(eventData);
       };
-      const unsubscribe = room.subscribe("event", listener);
-      return () => {
-        unsubscribe();
-      };
-    }, [room]);
-  }
-  function useSelf2() {
-    const room = useRoom2();
-    const rerender = useRerender();
-    React2.useEffect(() => {
-      const unsubscribePresence = room.subscribe("my-presence", rerender);
-      const unsubscribeConnection = room.subscribe("connection", rerender);
-      return () => {
-        unsubscribePresence();
-        unsubscribeConnection();
-      };
-    }, [room, rerender]);
-    return room.getSelf();
-  }
-  function useStorageRoot2() {
-    const room = useRoom2();
-    const [root, setState] = React2.useState(null);
-    React2.useEffect(() => {
-      let didCancel = false;
-      function fetchStorage() {
-        return __async(this, null, function* () {
-          const storage = yield room.getStorage();
-          if (!didCancel) {
-            setState(storage.root);
-          }
-        });
-      }
-      fetchStorage();
-      return () => {
-        didCancel = true;
-      };
+      return room.events.customEvent.subscribe(listener);
     }, [room]);
-    return [root];
   }
-  function useStorage2() {
-    _internal.deprecate.call(void 0, 
-      "In the upcoming 0.18 version, the name `useStorage()` is going to be repurposed for a new hook. Please use `useStorageRoot()` instead to keep the current behavior."
+  function useSelf(maybeSelector, isEqual) {
+    const room = useRoom();
+    const subscribe = React2.useCallback(
+      (onChange) => {
+        const unsub1 = room.events.me.subscribe(onChange);
+        const unsub2 = room.events.connection.subscribe(onChange);
+        return () => {
+          unsub1();
+          unsub2();
+        };
+      },
+      [room]
     );
-    return useStorageRoot2();
-  }
-  function useMap_deprecated(key, entries) {
-    _internal.errorIf.call(void 0, 
-      entries,
-      `Support for initializing entries in useMap() directly will be removed in @liveblocks/react 0.18.
-
-Instead, please initialize this data where you set up your RoomProvider:
-
-    const initialStorage = () => ({
-      ${JSON.stringify(key)}: new LiveMap(...),
-      ...
-    });
-
-    <RoomProvider initialStorage={initialStorage}>
-      ...
-    </RoomProvider>
-
-Please see https://bit.ly/3Niy5aP for details.`
+    const getSnapshot = room.getSelf;
+    const selector = maybeSelector != null ? maybeSelector : identity;
+    const wrappedSelector = React2.useCallback(
+      (me) => me !== null ? selector(me) : null,
+      [selector]
     );
-    const value = useStorageValue(key, new (0, _client2.LiveMap)(entries != null ? entries : void 0));
-    if (value.status === "ok") {
-      return value.value;
-    } else {
-      _internal.errorIf.call(void 0, 
-        value.status === "notfound",
-        `Key ${JSON.stringify(
-          key
-        )} was not found in Storage. Starting with 0.18, useMap() will no longer automatically create this key.
-
-Instead, please initialize your storage where you set up your RoomProvider:
-
-    import { LiveMap } from "@liveblocks/client";
-
-    const initialStorage = () => ({
-      ${JSON.stringify(key)}: new LiveMap(...),
-      ...
-    });
-
-    <RoomProvider initialStorage={initialStorage}>
-      ...
-    </RoomProvider>
-
-Please see https://bit.ly/3Niy5aP for details.`
-      );
-      return null;
-    }
-  }
-  function useList_deprecated(key, items) {
-    _internal.errorIf.call(void 0, 
-      items,
-      `Support for initializing items in useList() directly will be removed in @liveblocks/react 0.18.
-
-Instead, please initialize this data where you set up your RoomProvider:
-
-    import { LiveList } from "@liveblocks/client";
-
-    const initialStorage = () => ({
-      ${JSON.stringify(key)}: new LiveList(...),
-      ...
-    });
-
-    <RoomProvider initialStorage={initialStorage}>
-      ...
-    </RoomProvider>
-
-Please see https://bit.ly/3Niy5aP for details.`
+    const getServerSnapshot = React2.useCallback(() => null, []);
+    return _withselector.useSyncExternalStoreWithSelector.call(void 0, 
+      subscribe,
+      getSnapshot,
+      getServerSnapshot,
+      wrappedSelector,
+      isEqual
     );
-    const value = useStorageValue(key, new (0, _client2.LiveList)(items));
-    if (value.status === "ok") {
-      return value.value;
-    } else {
-      _internal.errorIf.call(void 0, 
-        value.status === "notfound",
-        `Key ${JSON.stringify(
-          key
-        )} was not found in Storage. Starting with 0.18, useList() will no longer automatically create this key.
-
-Instead, please initialize your storage where you set up your RoomProvider:
-
-    import { LiveList } from "@liveblocks/client";
-
-    const initialStorage = () => ({
-      ${JSON.stringify(key)}: new LiveList(...),
-      ...
-    });
-
-    <RoomProvider initialStorage={initialStorage}>
-      ...
-    </RoomProvider>
-
-Please see https://bit.ly/3Niy5aP for details.`
-      );
-      return null;
-    }
   }
-  function useObject_deprecated(key, initialData) {
-    _internal.errorIf.call(void 0, 
-      initialData,
-      `Support for initializing data in useObject() directly will be removed in @liveblocks/react 0.18.
-
-Instead, please initialize this data where you set up your RoomProvider:
-
-    import { LiveObject } from "@liveblocks/client";
-
-    const initialStorage = () => ({
-      ${JSON.stringify(key)}: new LiveObject(...),
-      ...
-    });
-
-    <RoomProvider initialStorage={initialStorage}>
-      ...
-    </RoomProvider>
-
-Please see https://bit.ly/3Niy5aP for details.`
+  function useMutableStorageRoot() {
+    const room = useRoom();
+    const subscribe = room.events.storageDidLoad.subscribeOnce;
+    const getSnapshot = room.getStorageSnapshot;
+    const getServerSnapshot = React2.useCallback(() => null, []);
+    const selector = identity;
+    return _withselector.useSyncExternalStoreWithSelector.call(void 0, 
+      subscribe,
+      getSnapshot,
+      getServerSnapshot,
+      selector
     );
-    const value = useStorageValue(key, new (0, _client2.LiveObject)(initialData));
-    if (value.status === "ok") {
-      return value.value;
-    } else {
-      _internal.errorIf.call(void 0, 
-        value.status === "notfound",
-        `Key ${JSON.stringify(
-          key
-        )} was not found in Storage. Starting with 0.18, useObject() will no longer automatically create this key.
-
-Instead, please initialize your storage where you set up your RoomProvider:
-
-    import { LiveObject } from "@liveblocks/client";
-
-    const initialStorage = () => ({
-      ${JSON.stringify(key)}: new LiveObject(...),
-      ...
-    });
-
-    <RoomProvider initialStorage={initialStorage}>
-      ...
-    </RoomProvider>
-
-Please see https://bit.ly/3Niy5aP for details.`
-      );
-      return null;
-    }
-  }
-  function useList2(key) {
-    return useList_deprecated(key);
   }
-  function useMap2(key) {
-    return useMap_deprecated(key);
+  function useStorageRoot() {
+    return [useMutableStorageRoot()];
   }
-  function useObject2(key) {
-    return useObject_deprecated(key);
+  function useHistory() {
+    return useRoom().history;
   }
-  function useHistory2() {
-    return useRoom2().history;
+  function useUndo() {
+    return useHistory().undo;
   }
-  function useUndo2() {
-    return useHistory2().undo;
-  }
-  function useRedo2() {
-    return useHistory2().redo;
+  function useRedo() {
+    return useHistory().redo;
   }
   function useCanUndo() {
-    const room = useRoom2();
+    const room = useRoom();
     const [canUndo, setCanUndo] = React2.useState(room.history.canUndo);
-    React2.useEffect(() => {
-      const unsubscribe = room.subscribe(
-        "history",
-        ({ canUndo: canUndo2 }) => setCanUndo(canUndo2)
-      );
-      return () => {
-        unsubscribe();
-      };
-    }, [room]);
+    React2.useEffect(
+      () => room.events.history.subscribe(({ canUndo: canUndo2 }) => setCanUndo(canUndo2)),
+      [room]
+    );
     return canUndo;
   }
   function useCanRedo() {
-    const room = useRoom2();
+    const room = useRoom();
     const [canRedo, setCanRedo] = React2.useState(room.history.canRedo);
-    React2.useEffect(() => {
-      const unsubscribe = room.subscribe(
-        "history",
-        ({ canRedo: canRedo2 }) => setCanRedo(canRedo2)
-      );
-      return () => {
-        unsubscribe();
-      };
-    }, [room]);
+    React2.useEffect(
+      () => room.events.history.subscribe(({ canRedo: canRedo2 }) => setCanRedo(canRedo2)),
+      [room]
+    );
     return canRedo;
   }
-  function useBatch2() {
-    return useRoom2().batch;
+  function useBatch() {
+    return useRoom().batch;
   }
-  function useStorageValue(key, initialValue) {
-    const room = useRoom2();
-    const [root] = useStorageRoot2();
+  function useLegacyKey(key) {
+    const room = useRoom();
+    const root = useMutableStorageRoot();
     const rerender = useRerender();
-    const frozenInitialValue = useInitial(initialValue);
     React2.useEffect(() => {
       if (root == null) {
         return;
       }
       let liveValue = root.get(key);
-      if (liveValue == null) {
-        liveValue = frozenInitialValue;
-        root.set(key, liveValue);
-      }
       function onRootChange() {
         const newCrdt = root.get(key);
         if (newCrdt !== liveValue) {
@@ -477,177 +324,181 @@ Please see https://bit.ly/3Niy5aP for details.`
         unsubscribeRoot();
         unsubscribeCrdt();
       };
-    }, [root, room, key, frozenInitialValue, rerender]);
+    }, [root, room, key, rerender]);
     if (root == null) {
-      return { status: "loading" };
+      return null;
     } else {
-      const value = root.get(key);
-      if (value == null) {
-        return { status: "notfound" };
+      return root.get(key);
+    }
+  }
+  function useStorage(maybeSelector, isEqual) {
+    const room = useRoom();
+    const rootOrNull = useMutableStorageRoot();
+    const selector = maybeSelector != null ? maybeSelector : identity;
+    const wrappedSelector = React2.useCallback(
+      (rootOrNull2) => rootOrNull2 !== null ? selector(rootOrNull2) : null,
+      [selector]
+    );
+    const subscribe = React2.useCallback(
+      (onStoreChange) => rootOrNull !== null ? room.subscribe(rootOrNull, onStoreChange, { isDeep: true }) : noop,
+      [room, rootOrNull]
+    );
+    const getSnapshot = React2.useCallback(() => {
+      if (rootOrNull === null) {
+        return null;
       } else {
-        return { status: "ok", value };
+        const root = rootOrNull;
+        const imm = root.toImmutable();
+        return imm;
       }
+    }, [rootOrNull]);
+    const getServerSnapshot = React2.useCallback(() => null, []);
+    return _withselector.useSyncExternalStoreWithSelector.call(void 0, 
+      subscribe,
+      getSnapshot,
+      getServerSnapshot,
+      wrappedSelector,
+      isEqual
+    );
+  }
+  function ensureNotServerSide() {
+    if (typeof window === "undefined") {
+      throw new Error(
+        "You cannot call the Suspense version of this hook on the server side. Make sure to only call them on the client side.\nFor tips for structuring your app, see XXX"
+      );
     }
   }
+  function useSuspendUntilStorageLoaded() {
+    const room = useRoom();
+    if (room.getStorageSnapshot() !== null) {
+      return;
+    }
+    ensureNotServerSide();
+    throw new Promise((res) => {
+      room.events.storageDidLoad.subscribeOnce(() => res());
+    });
+  }
+  function useSuspendUntilPresenceLoaded() {
+    const room = useRoom();
+    if (room.isSelfAware()) {
+      return;
+    }
+    ensureNotServerSide();
+    throw new Promise((res) => {
+      room.events.connection.subscribeOnce(() => res());
+    });
+  }
+  function useMutation(callback, deps) {
+    const room = useRoom();
+    const root = useMutableStorageRoot();
+    const setMyPresence = room.updatePresence;
+    return React2.useMemo(
+      () => {
+        if (root !== null) {
+          const mutationCtx = {
+            root,
+            setMyPresence
+          };
+          return (...args) => {
+            let rv;
+            room.batch(() => {
+              rv = callback(mutationCtx, ...args);
+            });
+            return rv;
+          };
+        } else {
+          return () => {
+            throw new Error(
+              "Mutation cannot be called while Liveblocks Storage has not loaded yet"
+            );
+          };
+        }
+      },
+      deps !== void 0 ? [root, room, setMyPresence, ...deps] : [root, room, setMyPresence, callback]
+    );
+  }
+  function useStorageSuspense(selector, isEqual) {
+    useSuspendUntilStorageLoaded();
+    return useStorage(
+      selector,
+      isEqual
+    );
+  }
+  function useSelfSuspense(selector, isEqual) {
+    useSuspendUntilPresenceLoaded();
+    return useSelf(
+      selector,
+      isEqual
+    );
+  }
+  function useOthersSuspense(selector, isEqual) {
+    useSuspendUntilPresenceLoaded();
+    return useOthers(
+      selector,
+      isEqual
+    );
+  }
+  function useOtherIdsSuspense(itemSelector, isEqual) {
+    useSuspendUntilPresenceLoaded();
+    return useOtherIds(
+      itemSelector,
+      isEqual
+    );
+  }
+  function useOtherSuspense(connectionId, selector, isEqual) {
+    useSuspendUntilPresenceLoaded();
+    return useOther(
+      connectionId,
+      selector,
+      isEqual
+    );
+  }
+  function useLegacyKeySuspense(key) {
+    useSuspendUntilStorageLoaded();
+    return useLegacyKey(key);
+  }
   return {
-    RoomProvider: RoomProvider2,
-    useBatch: useBatch2,
-    useBroadcastEvent: useBroadcastEvent2,
+    RoomProvider,
+    useBatch,
+    useBroadcastEvent,
     useCanRedo,
     useCanUndo,
-    useErrorListener: useErrorListener2,
-    useEventListener: useEventListener2,
-    useHistory: useHistory2,
-    useList: useList2,
-    useMap: useMap2,
-    useMyPresence: useMyPresence2,
-    useObject: useObject2,
-    useOthers: useOthers2,
-    useRedo: useRedo2,
-    useRoom: useRoom2,
-    useSelf: useSelf2,
-    useStorageRoot: useStorageRoot2,
-    useStorage: useStorage2,
-    useUndo: useUndo2,
-    useUpdateMyPresence: useUpdateMyPresence2,
+    useErrorListener,
+    useEventListener,
+    useHistory,
+    useMyPresence,
+    useOthers,
+    useOtherIds,
+    useOther,
+    useRedo,
+    useRoom,
+    useSelf,
+    useStorageRoot,
+    useStorage,
+    useUndo,
+    useUpdateMyPresence,
+    useMutation,
+    useList: useLegacyKey,
+    useMap: useLegacyKey,
+    useObject: useLegacyKey,
     RoomContext,
-    useList_deprecated,
-    useMap_deprecated,
-    useObject_deprecated
+    suspense: {
+      useStorage: useStorageSuspense,
+      useSelf: useSelfSuspense,
+      useOthers: useOthersSuspense,
+      useOtherIds: useOtherIdsSuspense,
+      useOther: useOtherSuspense,
+      useList: useLegacyKeySuspense,
+      useMap: useLegacyKeySuspense,
+      useObject: useLegacyKeySuspense
+    }
   };
 }
 
-// src/compat.tsx
-
-var _hooks = createRoomContext("__legacy");
-function RoomProvider(props) {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `RoomProvider` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.RoomProvider(props);
-}
-function useBatch() {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useBatch` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useBatch();
-}
-function useBroadcastEvent() {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useBroadcastEvent` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useBroadcastEvent();
-}
-function useErrorListener(callback) {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useErrorListener` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useErrorListener(callback);
-}
-function useEventListener(callback) {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useEventListener` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useEventListener(callback);
-}
-function useHistory() {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useHistory` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useHistory();
-}
-function useMyPresence() {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useMyPresence` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useMyPresence();
-}
-function useOthers() {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useOthers` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useOthers();
-}
-function useRedo() {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useRedo` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useRedo();
-}
-function useRoom() {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useRoom` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useRoom();
-}
-function useSelf() {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useSelf` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useSelf();
-}
-function useStorageRoot() {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useStorageRoot` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useStorageRoot();
-}
-function useStorage() {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useStorage` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useStorage();
-}
-function useUndo() {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useUndo` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useUndo();
-}
-function useUpdateMyPresence() {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useUpdateMyPresence` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useUpdateMyPresence();
-}
-function useList(key, items) {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useList` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useList_deprecated(key, items);
-}
-function useMap(key, entries) {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useMap` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useMap_deprecated(key, entries);
-}
-function useObject(key, initialData) {
-  _internal.deprecate.call(void 0, 
-    "Please use `createRoomContext()` instead of importing `useObject` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
-  );
-  return _hooks.useObject_deprecated(key, initialData);
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+// src/index.ts
 
 
 
 
 
-exports.LiveblocksProvider = LiveblocksProvider; exports.RoomProvider = RoomProvider; exports.createRoomContext = createRoomContext; exports.useBatch = useBatch; exports.useBroadcastEvent = useBroadcastEvent; exports.useClient = useClient; exports.useErrorListener = useErrorListener; exports.useEventListener = useEventListener; exports.useHistory = useHistory; exports.useList = useList; exports.useMap = useMap; exports.useMyPresence = useMyPresence; exports.useObject = useObject; exports.useOthers = useOthers; exports.useRedo = useRedo; exports.useRoom = useRoom; exports.useSelf = useSelf; exports.useStorage = useStorage; exports.useStorageRoot = useStorageRoot; exports.useUndo = useUndo; exports.useUpdateMyPresence = useUpdateMyPresence;
+exports.ClientSideSuspense = ClientSideSuspense; exports.createRoomContext = createRoomContext; exports.shallow = _client.shallow;