@liveblocks/react 0.16.3 → 0.16.4

package/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Client, Room, Presence, Others, BroadcastOptions, Json, User, LiveObject, Lson, LiveMap, LiveList, LsonObject, History } from '@liveblocks/client';
 export { Json, JsonObject } from '@liveblocks/client';
+import { Resolve, RoomInitializers } from '@liveblocks/client/internal';
 
 declare type LiveblocksProviderProps = {
     children: React.ReactNode;
@@ -16,25 +17,19 @@ declare function LiveblocksProvider(props: LiveblocksProviderProps): JSX.Element
  */
 declare function useClient(): Client;
 
-declare type RoomProviderProps<TStorageRoot> = {
+declare type RoomProviderProps<TStorage> = Resolve<{
     /**
      * The id of the room you want to connect to
      */
     id: string;
-    /**
-     * A callback that let you initialize the default presence when entering the room.
-     * If ommited, the default presence will be an empty object
-     */
-    defaultPresence?: () => Presence;
-    defaultStorageRoot?: TStorageRoot;
     children: React.ReactNode;
-};
+} & RoomInitializers<Presence, TStorage>>;
 /**
  * Makes a Room available in the component hierarchy below.
  * When this component is unmounted, the current user leave the room.
  * That means that you can't have 2 RoomProvider with the same room id in your react tree.
  */
-declare function RoomProvider<TStorageRoot>({ id, children, defaultPresence, defaultStorageRoot, }: RoomProviderProps<TStorageRoot>): JSX.Element;
+declare function RoomProvider<TStorage>(props: RoomProviderProps<TStorage>): JSX.Element;
 /**
  * Returns the Room of the nearest RoomProvider above in the React component
  * tree.
@@ -142,50 +137,57 @@ declare function useEventListener<TEvent extends Json>(callback: ({ connectionId
  * const user = useSelf();
  */
 declare function useSelf<TPresence extends Presence = Presence>(): User<TPresence> | null;
-declare function useStorage<TRoot extends Record<string, any>>(): [
-    root: LiveObject<TRoot> | null
+declare function useStorage<TStorage extends Record<string, any>>(): [
+    root: LiveObject<TStorage> | null
 ];
 /**
  * Returns the LiveMap associated with the provided key. If the LiveMap does not exist, a new empty LiveMap will be created.
  * The hook triggers a re-render if the LiveMap is updated, however it does not triggers a re-render if a nested CRDT is updated.
  *
  * @param key The storage key associated with the LiveMap
- * @param entries Optional entries that are used to create the LiveMap for the first time
  * @returns null while the storage is loading, otherwise, returns the LiveMap associated to the storage
  *
  * @example
- * const emptyMap = useMap("mapA");
- * const mapWithItems = useMap("mapB", [["keyA", "valueA"], ["keyB", "valueB"]]);
+ * const shapesById = useMap<string, Shape>("shapes");
+ */
+declare function useMap<TKey extends string, TValue extends Lson>(key: string): LiveMap<TKey, TValue> | null;
+/**
+ * @deprecated We no longer recommend initializing the
+ * entries from the useMap() hook. For details, see https://bit.ly/3Niy5aP.
  */
-declare function useMap<TKey extends string, TValue extends Lson>(key: string, entries?: readonly (readonly [TKey, TValue])[] | null | undefined): LiveMap<TKey, TValue> | null;
+declare function useMap<TKey extends string, TValue extends Lson>(key: string, entries: readonly (readonly [TKey, TValue])[] | null): LiveMap<TKey, TValue> | null;
 /**
- * Returns the LiveList associated with the provided key. If the LiveList does not exist, a new LiveList will be created.
+ * Returns the LiveList associated with the provided key.
  * The hook triggers a re-render if the LiveList is updated, however it does not triggers a re-render if a nested CRDT is updated.
  *
  * @param key The storage key associated with the LiveList
- * @param items Optional items that are used to create the LiveList for the first time
  * @returns null while the storage is loading, otherwise, returns the LiveList associated to the storage
  *
  * @example
- * const emptyList = useList("listA");
- * const listWithItems = useList("listB", ["a", "b", "c"]);
+ * const animals = useList("animals");  // e.g. [] or ["🦁", "🐍", "🦍"]
  */
-declare function useList<TValue extends Lson>(key: string, items?: TValue[] | undefined): LiveList<TValue> | null;
+declare function useList<TValue extends Lson>(key: string): LiveList<TValue> | null;
 /**
- * Returns the LiveObject associated with the provided key. If the LiveObject does not exist, it will be created with the initialData parameter.
+ * @deprecated We no longer recommend initializing the
+ * items from the useList() hook. For details, see https://bit.ly/3Niy5aP.
+ */
+declare function useList<TValue extends Lson>(key: string, items: TValue[]): LiveList<TValue> | null;
+/**
+ * Returns the LiveObject associated with the provided key.
  * The hook triggers a re-render if the LiveObject is updated, however it does not triggers a re-render if a nested CRDT is updated.
  *
  * @param key The storage key associated with the LiveObject
- * @param initialData Optional data that is used to create the LiveObject for the first time
  * @returns null while the storage is loading, otherwise, returns the LveObject associated to the storage
  *
  * @example
- * const object = useObject("obj", {
- *   company: "Liveblocks",
- *   website: "https://liveblocks.io"
- * });
+ * const object = useObject("obj");
+ */
+declare function useObject<TData extends LsonObject>(key: string): LiveObject<TData> | null;
+/**
+ * @deprecated We no longer recommend initializing the fields from the
+ * useObject() hook. For details, see https://bit.ly/3Niy5aP.
  */
-declare function useObject<TData extends LsonObject>(key: string, initialData?: TData): LiveObject<TData> | null;
+declare function useObject<TData extends LsonObject>(key: string, initialData: TData): LiveObject<TData> | null;
 /**
  * Returns a function that undoes the last operation executed by the current client.
  * It does not impact operations made by other clients.

package/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var client = require('@liveblocks/client');
+var internal = require('@liveblocks/client/internal');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -87,27 +88,32 @@ function useRerender() {
 }
 
 var RoomContext = React__namespace.createContext(null);
-function RoomProvider(_ref) {
-  var id = _ref.id,
-      children = _ref.children,
-      defaultPresence = _ref.defaultPresence,
-      defaultStorageRoot = _ref.defaultStorageRoot;
+function RoomProvider(props) {
+  var roomId = props.id,
+      initialPresence = props.initialPresence,
+      initialStorage = props.initialStorage,
+      defaultPresence = props.defaultPresence,
+      defaultStorageRoot = props.defaultStorageRoot;
 
   if (process.env.NODE_ENV !== "production") {
-    if (id == null) {
+    if (roomId == null) {
       throw new Error("RoomProvider id property is required. For more information: https://liveblocks.io/docs/errors/liveblocks-react/RoomProvider-id-property-is-required");
     }
 
-    if (typeof id !== "string") {
+    if (typeof roomId !== "string") {
       throw new Error("RoomProvider id property should be a string.");
     }
   }
 
+  internal.deprecateIf(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", "defaultPresence");
+  internal.deprecateIf(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", "defaultStorageRoot");
   var client = useClient();
 
   var _React$useState = React__namespace.useState(function () {
-    return client.enter(id, {
-      defaultPresence: defaultPresence ? defaultPresence() : undefined,
+    return client.enter(roomId, {
+      initialPresence: initialPresence,
+      initialStorage: initialStorage,
+      defaultPresence: defaultPresence,
       defaultStorageRoot: defaultStorageRoot,
       DO_NOT_USE_withoutConnecting: typeof window === "undefined"
     });
@@ -116,18 +122,20 @@ function RoomProvider(_ref) {
       setRoom = _React$useState[1];
 
   React__namespace.useEffect(function () {
-    setRoom(client.enter(id, {
-      defaultPresence: defaultPresence ? defaultPresence() : undefined,
+    setRoom(client.enter(roomId, {
+      initialPresence: initialPresence,
+      initialStorage: initialStorage,
+      defaultPresence: defaultPresence,
       defaultStorageRoot: defaultStorageRoot,
       DO_NOT_USE_withoutConnecting: typeof window === "undefined"
     }));
     return function () {
-      client.leave(id);
+      client.leave(roomId);
     };
-  }, [client, id]);
+  }, [client, roomId]);
   return React__namespace.createElement(RoomContext.Provider, {
     value: room
-  }, children);
+  }, props.children);
 }
 function useRoom() {
   var room = React__namespace.useContext(RoomContext);
@@ -278,13 +286,37 @@ function useStorage() {
   return [root];
 }
 function useMap(key, entries) {
-  return useCrdt(key, new client.LiveMap(entries));
+  internal.deprecateIf(entries, "Support for initializing entries in useMap() directly will be removed in @liveblocks/react 0.18.\n\nInstead, please initialize this data where you set up your RoomProvider:\n\n    const initialStorage = () => {\n      " + JSON.stringify(key) + ": new LiveMap(...),\n      ...\n    };\n\n    <RoomProvider initialStorage={initialStorage}>\n      ...\n    </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.");
+  var value = useCrdt(key, new client.LiveMap(entries));
+
+  if (value.status === "ok") {
+    return value.value;
+  } else {
+    internal.deprecateIf(value.status === "notfound", "Key " + JSON.stringify(key) + " was not found in Storage. Starting with 0.18, useMap() will no longer automatically create this key.\n\nInstead, please initialize your storage where you set up your RoomProvider:\n\n    import { LiveMap } from \"@liveblocks/client\";\n\n    const initialStorage = () => {\n      " + JSON.stringify(key) + ": new LiveMap(...),\n      ...\n    };\n\n    <RoomProvider initialStorage={initialStorage}>\n      ...\n    </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.");
+    return null;
+  }
 }
 function useList(key, items) {
-  return useCrdt(key, new client.LiveList(items));
+  internal.deprecateIf(items, "Support for initializing items in useList() directly will be removed in @liveblocks/react 0.18.\n\nInstead, please initialize this data where you set up your RoomProvider:\n\n    import { LiveList } from \"@liveblocks/client\";\n\n    const initialStorage = () => {\n      " + JSON.stringify(key) + ": new LiveList(...),\n      ...\n    };\n\n    <RoomProvider initialStorage={initialStorage}>\n      ...\n    </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.");
+  var value = useCrdt(key, new client.LiveList(items));
+
+  if (value.status === "ok") {
+    return value.value;
+  } else {
+    internal.deprecateIf(value.status === "notfound", "Key " + JSON.stringify(key) + " was not found in Storage. Starting with 0.18, useList() will no longer automatically create this key.\n\nInstead, please initialize your storage where you set up your RoomProvider:\n\n    import { LiveList } from \"@liveblocks/client\";\n\n    const initialStorage = () => {\n      " + JSON.stringify(key) + ": new LiveList(...),\n      ...\n    };\n\n    <RoomProvider initialStorage={initialStorage}>\n      ...\n    </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.");
+    return null;
+  }
 }
 function useObject(key, initialData) {
-  return useCrdt(key, new client.LiveObject(initialData));
+  internal.deprecateIf(initialData, "Support for initializing data in useObject() directly will be removed in @liveblocks/react 0.18.\n\nInstead, please initialize this data where you set up your RoomProvider:\n\n    import { LiveObject } from \"@liveblocks/client\";\n\n    const initialStorage = () => {\n      " + JSON.stringify(key) + ": new LiveObject(...),\n      ...\n    };\n\n    <RoomProvider initialStorage={initialStorage}>\n      ...\n    </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.");
+  var value = useCrdt(key, new client.LiveObject(initialData));
+
+  if (value.status === "ok") {
+    return value.value;
+  } else {
+    internal.deprecateIf(value.status === "notfound", "Key " + JSON.stringify(key) + " was not found in Storage. Starting with 0.18, useObject() will no longer automatically create this key.\n\nInstead, please initialize your storage where you set up your RoomProvider:\n\n    import { LiveObject } from \"@liveblocks/client\";\n\n    const initialStorage = () => {\n      " + JSON.stringify(key) + ": new LiveObject(...),\n      ...\n    };\n\n    <RoomProvider initialStorage={initialStorage}>\n      ...\n    </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.");
+    return null;
+  }
 }
 function useUndo() {
   return useRoom().history.undo;
@@ -300,8 +332,6 @@ function useHistory() {
 }
 
 function useCrdt(key, initialCrdt) {
-  var _root$get;
-
   var room = useRoom();
 
   var _useStorage = useStorage(),
@@ -339,7 +369,25 @@ function useCrdt(key, initialCrdt) {
       unsubscribeCrdt();
     };
   }, [root, room]);
-  return (_root$get = root == null ? void 0 : root.get(key)) != null ? _root$get : null;
+
+  if (root == null) {
+    return {
+      status: "loading"
+    };
+  } else {
+    var value = root.get(key);
+
+    if (value == null) {
+      return {
+        status: "notfound"
+      };
+    } else {
+      return {
+        status: "ok",
+        value: value
+      };
+    }
+  }
 }
 
 exports.LiveblocksProvider = LiveblocksProvider;

package/index.mjs

@@ -0,0 +1,507 @@
+import * as React from 'react';
+import { useReducer } from 'react';
+import { LiveMap, LiveList, LiveObject } from '@liveblocks/client';
+import { deprecateIf } from '@liveblocks/client/internal';
+
+const ClientContext = React.createContext(null);
+/**
+ * Makes the Liveblocks client available in the component hierarchy below.
+ */
+function LiveblocksProvider(props) {
+    return (React.createElement(ClientContext.Provider, { value: props.client }, props.children));
+}
+/**
+ * Returns the Client of the nearest LiveblocksProvider above in the React
+ * component tree.
+ */
+function useClient() {
+    const client = React.useContext(ClientContext);
+    if (client == null) {
+        throw new Error("LiveblocksProvider is missing from the react tree");
+    }
+    return client;
+}
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+/**
+ * Trigger a re-render programmatically, without changing the component's
+ * state.
+ *
+ * Usage:
+ *
+ *   const rerender = useRerender();
+ *   return (
+ *     <button onClick={rerender}>
+ *       {Math.random()}
+ *     </button>
+ *   )
+ *
+ */
+function useRerender() {
+    const [, update] = useReducer(
+    // This implementation works by incrementing a hidden counter value that is
+    // never consumed. Simply incrementing the counter changes the component's
+    // state and, thus, trigger a re-render.
+    (x) => x + 1, 0);
+    return update;
+}
+
+const RoomContext = React.createContext(null);
+/**
+ * Makes a Room available in the component hierarchy below.
+ * When this component is unmounted, the current user leave the room.
+ * That means that you can't have 2 RoomProvider with the same room id in your react tree.
+ */
+function RoomProvider(props) {
+    const { id: roomId, initialPresence, initialStorage, defaultPresence, // Will get removed in 0.18
+    defaultStorageRoot, } = props;
+    if (process.env.NODE_ENV !== "production") {
+        if (roomId == null) {
+            throw new Error("RoomProvider id property is required. For more information: https://liveblocks.io/docs/errors/liveblocks-react/RoomProvider-id-property-is-required");
+        }
+        if (typeof roomId !== "string") {
+            throw new Error("RoomProvider id property should be a string.");
+        }
+    }
+    deprecateIf(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", "defaultPresence");
+    deprecateIf(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", "defaultStorageRoot");
+    const client = useClient();
+    const [room, setRoom] = React.useState(() => client.enter(roomId, {
+        initialPresence,
+        initialStorage,
+        defaultPresence,
+        defaultStorageRoot,
+        DO_NOT_USE_withoutConnecting: typeof window === "undefined",
+    }));
+    React.useEffect(() => {
+        setRoom(client.enter(roomId, {
+            initialPresence,
+            initialStorage,
+            defaultPresence,
+            defaultStorageRoot,
+            DO_NOT_USE_withoutConnecting: typeof window === "undefined",
+        }));
+        return () => {
+            client.leave(roomId);
+        };
+    }, [client, roomId]);
+    return (React.createElement(RoomContext.Provider, { value: room }, props.children));
+}
+/**
+ * Returns the Room of the nearest RoomProvider above in the React component
+ * tree.
+ */
+function useRoom() {
+    const room = React.useContext(RoomContext);
+    if (room == null) {
+        throw new Error("RoomProvider is missing from the react tree");
+    }
+    return room;
+}
+/**
+ * Returns the presence of the current user of the current room, and a function to update it.
+ * It is different from the setState function returned by the useState hook from React.
+ * You don't need to pass the full presence object to update it.
+ *
+ * @example
+ * import { useMyPresence } from "@liveblocks/react";
+ *
+ * const [myPresence, updateMyPresence] = useMyPresence();
+ * updateMyPresence({ x: 0 });
+ * updateMyPresence({ y: 0 });
+ *
+ * // At the next render, "myPresence" will be equal to "{ x: 0, y: 0 }"
+ */
+function useMyPresence() {
+    const room = useRoom();
+    const presence = room.getPresence();
+    const rerender = useRerender();
+    React.useEffect(() => {
+        const unsubscribe = room.subscribe("my-presence", rerender);
+        return () => {
+            unsubscribe();
+        };
+    }, [room]);
+    const setPresence = React.useCallback((overrides, options) => room.updatePresence(overrides, options), [room]);
+    return [presence, setPresence];
+}
+/**
+ * useUpdateMyPresence is similar to useMyPresence but it only returns the function to update the current user presence.
+ * If you don't use the current user presence in your component, but you need to update it (e.g. live cursor), it's better to use useUpdateMyPresence to avoid unnecessary renders.
+ *
+ * @example
+ * import { useUpdateMyPresence } from "@liveblocks/react";
+ *
+ * const updateMyPresence = useUpdateMyPresence();
+ * updateMyPresence({ x: 0 });
+ * updateMyPresence({ y: 0 });
+ *
+ * // At the next render, the presence of the current user will be equal to "{ x: 0, y: 0 }"
+ */
+function useUpdateMyPresence() {
+    const room = useRoom();
+    return React.useCallback((overrides, options) => {
+        room.updatePresence(overrides, options);
+    }, [room]);
+}
+/**
+ * Returns an object that lets you get information about all the the users currently connected in the room.
+ *
+ * @example
+ * import { useOthers } from "@liveblocks/react";
+ *
+ * const others = useOthers();
+ *
+ * // Example to map all cursors in jsx
+ * {
+ *   others.map(({ connectionId, presence }) => {
+ *     if(presence == null || presence.cursor == null) {
+ *       return null;
+ *     }
+ *     return <Cursor key={connectionId} cursor={presence.cursor} />
+ *   })
+ * }
+ */
+function useOthers() {
+    const room = useRoom();
+    const rerender = useRerender();
+    React.useEffect(() => {
+        const unsubscribe = room.subscribe("others", rerender);
+        return () => {
+            unsubscribe();
+        };
+    }, [room]);
+    return room.getOthers();
+}
+/**
+ * Returns a callback that lets you broadcast custom events to other users in the room
+ *
+ * @example
+ * import { useBroadcastEvent } from "@liveblocks/react";
+ *
+ * const broadcast = useBroadcastEvent();
+ *
+ * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
+ */
+function useBroadcastEvent() {
+    const room = useRoom();
+    return React.useCallback((event, options = { shouldQueueEventIfNotReady: false }) => {
+        room.broadcastEvent(event, options);
+    }, [room]);
+}
+/**
+ * useErrorListener is a react hook that lets you react to potential room connection errors.
+ *
+ * @example
+ * import { useErrorListener } from "@liveblocks/react";
+ *
+ * useErrorListener(er => {
+ *   console.error(er);
+ * })
+ */
+function useErrorListener(callback) {
+    const room = useRoom();
+    const savedCallback = React.useRef(callback);
+    React.useEffect(() => {
+        savedCallback.current = callback;
+    });
+    React.useEffect(() => {
+        const listener = (e) => savedCallback.current(e);
+        const unsubscribe = room.subscribe("error", listener);
+        return () => {
+            unsubscribe();
+        };
+    }, [room]);
+}
+/**
+ * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.
+ *
+ * @example
+ * import { useEventListener } from "@liveblocks/react";
+ *
+ * useEventListener(({ connectionId, event }) => {
+ *   if (event.type === "CUSTOM_EVENT") {
+ *     // Do something
+ *   }
+ * });
+ */
+function useEventListener(callback) {
+    const room = useRoom();
+    const savedCallback = React.useRef(callback);
+    React.useEffect(() => {
+        savedCallback.current = callback;
+    });
+    React.useEffect(() => {
+        const listener = (e) => savedCallback.current(e);
+        const unsubscribe = room.subscribe("event", listener);
+        return () => {
+            unsubscribe();
+        };
+    }, [room]);
+}
+/**
+ * Gets the current user once it is connected to the room.
+ *
+ * @example
+ * import { useSelf } from "@liveblocks/react";
+ *
+ * const user = useSelf();
+ */
+function useSelf() {
+    const room = useRoom();
+    const rerender = useRerender();
+    React.useEffect(() => {
+        const unsubscribePresence = room.subscribe("my-presence", rerender);
+        const unsubscribeConnection = room.subscribe("connection", rerender);
+        return () => {
+            unsubscribePresence();
+            unsubscribeConnection();
+        };
+    }, [room]);
+    return room.getSelf();
+}
+function useStorage() {
+    const room = useRoom();
+    const [root, setState] = React.useState(null);
+    React.useEffect(() => {
+        let didCancel = false;
+        function fetchStorage() {
+            return __awaiter(this, void 0, void 0, function* () {
+                const storage = yield room.getStorage();
+                if (!didCancel) {
+                    setState(storage.root);
+                }
+            });
+        }
+        fetchStorage();
+        return () => {
+            didCancel = true;
+        };
+    }, [room]);
+    return [root];
+}
+function useMap(key, entries) {
+    deprecateIf(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 value = useCrdt(key, new LiveMap(entries));
+    //                         ^^^^^^^^^^^^^^^^^^^^
+    //                         NOTE: This param is scheduled for removal in 0.18
+    if (value.status === "ok") {
+        return value.value;
+    }
+    else {
+        deprecateIf(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(key, items) {
+    deprecateIf(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 value = useCrdt(key, new LiveList(items));
+    //                                           ^^^^^^^^^^^^^^^^^^^
+    //                                           NOTE: This param is scheduled for removal in 0.18
+    if (value.status === "ok") {
+        return value.value;
+    }
+    else {
+        deprecateIf(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(key, initialData) {
+    deprecateIf(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.`);
+    const value = useCrdt(key, new LiveObject(initialData));
+    //                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    //                         NOTE: This param is scheduled for removal in 0.18
+    if (value.status === "ok") {
+        return value.value;
+    }
+    else {
+        deprecateIf(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;
+    }
+}
+/**
+ * Returns a function that undoes the last operation executed by the current client.
+ * It does not impact operations made by other clients.
+ */
+function useUndo() {
+    return useRoom().history.undo;
+}
+/**
+ * Returns a function that redoes the last operation executed by the current client.
+ * It does not impact operations made by other clients.
+ */
+function useRedo() {
+    return useRoom().history.redo;
+}
+/**
+ * Returns a function that batches modifications made during the given function.
+ * All the modifications are sent to other clients in a single message.
+ * All the modifications are merged in a single history item (undo/redo).
+ * All the subscribers are called only after the batch is over.
+ */
+function useBatch() {
+    return useRoom().batch;
+}
+/**
+ * Returns the room.history
+ */
+function useHistory() {
+    return useRoom().history;
+}
+function useCrdt(key, initialCrdt) {
+    const room = useRoom();
+    const [root] = useStorage();
+    const rerender = useRerender();
+    React.useEffect(() => {
+        if (root == null) {
+            return;
+        }
+        let crdt = root.get(key);
+        if (crdt == null) {
+            crdt = initialCrdt;
+            root.set(key, crdt);
+        }
+        function onRootChange() {
+            const newCrdt = root.get(key);
+            if (newCrdt !== crdt) {
+                unsubscribeCrdt();
+                crdt = newCrdt;
+                unsubscribeCrdt = room.subscribe(crdt /* AbstractCrdt */, rerender);
+                rerender();
+            }
+        }
+        let unsubscribeCrdt = room.subscribe(crdt /* AbstractCrdt */, rerender);
+        const unsubscribeRoot = room.subscribe(root /* AbstractCrdt */, onRootChange);
+        rerender();
+        return () => {
+            unsubscribeRoot();
+            unsubscribeCrdt();
+        };
+    }, [root, room]);
+    if (root == null) {
+        return { status: "loading" };
+    }
+    else {
+        const value = root.get(key);
+        if (value == null) {
+            return { status: "notfound" };
+        }
+        else {
+            return { status: "ok", value };
+        }
+    }
+}
+
+export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useClient, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };

package/package.json

@@ -1,21 +1,13 @@
 {
   "name": "@liveblocks/react",
-  "version": "0.16.3",
+  "version": "0.16.4",
   "description": "A set of React hooks and providers to use Liveblocks declaratively.",
   "main": "./index.js",
+  "module": "./index.mjs",
   "types": "./index.d.ts",
   "files": [
     "**"
   ],
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./index.d.ts",
-      "module": "./esm/index.js",
-      "import": "./esm/index.mjs",
-      "default": "./index.js"
-    }
-  },
   "keywords": [
     "react",
     "liveblocks",
@@ -29,11 +21,13 @@
   "scripts": {
     "build": "rollup -c && cp ./package.json ./README.md ./lib",
     "start": "rollup -c -w",
-    "test": "jest --watch"
+    "lint": "eslint src/",
+    "test": "jest --watch",
+    "test-ci": "jest"
   },
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@liveblocks/client": "0.16.3",
+    "@liveblocks/client": "0.16.4",
     "react": "^16.14.0 || ^17 || ^18"
   },
   "devDependencies": {
@@ -43,6 +37,7 @@
     "@babel/preset-typescript": "^7.12.16",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-replace": "^4.0.0",
     "@rollup/plugin-typescript": "^8.3.1",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^13.1.1",
@@ -59,8 +54,8 @@
     "msw": "^0.27.1",
     "react-error-boundary": "^3.1.1",
     "rollup": "^2.39.0",
+    "rollup-plugin-command": "^1.1.3",
     "rollup-plugin-dts": "^4.2.0",
-    "rollup-plugin-esbuild": "^4.8.2",
     "typescript": "^4.1.5",
     "whatwg-fetch": "^3.6.2"
   },
@@ -68,5 +63,6 @@
     "type": "git",
     "url": "https://github.com/liveblocks/liveblocks.git",
     "directory": "packages/liveblocks-react"
-  }
+  },
+  "sideEffects": false
 }

package/esm/index.js

@@ -1,216 +0,0 @@
-import * as React from 'react';
-import { useReducer } from 'react';
-import { LiveMap, LiveList, LiveObject } from '@liveblocks/client';
-
-const ClientContext = React.createContext(null);
-function LiveblocksProvider(props) {
-  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 useRerender() {
-  const [, update] = useReducer((x) => x + 1, 0);
-  return update;
-}
-
-const RoomContext = React.createContext(null);
-function RoomProvider({
-  id,
-  children,
-  defaultPresence,
-  defaultStorageRoot
-}) {
-  if (process.env.NODE_ENV !== "production") {
-    if (id == null) {
-      throw new Error("RoomProvider id property is required. For more information: https://liveblocks.io/docs/errors/liveblocks-react/RoomProvider-id-property-is-required");
-    }
-    if (typeof id !== "string") {
-      throw new Error("RoomProvider id property should be a string.");
-    }
-  }
-  const client = useClient();
-  const [room, setRoom] = React.useState(() => client.enter(id, {
-    defaultPresence: defaultPresence ? defaultPresence() : void 0,
-    defaultStorageRoot,
-    DO_NOT_USE_withoutConnecting: typeof window === "undefined"
-  }));
-  React.useEffect(() => {
-    setRoom(client.enter(id, {
-      defaultPresence: defaultPresence ? defaultPresence() : void 0,
-      defaultStorageRoot,
-      DO_NOT_USE_withoutConnecting: typeof window === "undefined"
-    }));
-    return () => {
-      client.leave(id);
-    };
-  }, [client, id]);
-  return /* @__PURE__ */ React.createElement(RoomContext.Provider, {
-    value: room
-  }, children);
-}
-function useRoom() {
-  const room = React.useContext(RoomContext);
-  if (room == null) {
-    throw new Error("RoomProvider is missing from the react tree");
-  }
-  return room;
-}
-function useMyPresence() {
-  const room = useRoom();
-  const presence = room.getPresence();
-  const rerender = useRerender();
-  React.useEffect(() => {
-    const unsubscribe = room.subscribe("my-presence", rerender);
-    return () => {
-      unsubscribe();
-    };
-  }, [room]);
-  const setPresence = React.useCallback((overrides, options) => room.updatePresence(overrides, options), [room]);
-  return [presence, setPresence];
-}
-function useUpdateMyPresence() {
-  const room = useRoom();
-  return React.useCallback((overrides, options) => {
-    room.updatePresence(overrides, options);
-  }, [room]);
-}
-function useOthers() {
-  const room = useRoom();
-  const rerender = useRerender();
-  React.useEffect(() => {
-    const unsubscribe = room.subscribe("others", rerender);
-    return () => {
-      unsubscribe();
-    };
-  }, [room]);
-  return room.getOthers();
-}
-function useBroadcastEvent() {
-  const room = useRoom();
-  return React.useCallback((event, options = { shouldQueueEventIfNotReady: false }) => {
-    room.broadcastEvent(event, options);
-  }, [room]);
-}
-function useErrorListener(callback) {
-  const room = useRoom();
-  const savedCallback = React.useRef(callback);
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  });
-  React.useEffect(() => {
-    const listener = (e) => savedCallback.current(e);
-    const unsubscribe = room.subscribe("error", listener);
-    return () => {
-      unsubscribe();
-    };
-  }, [room]);
-}
-function useEventListener(callback) {
-  const room = useRoom();
-  const savedCallback = React.useRef(callback);
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  });
-  React.useEffect(() => {
-    const listener = (e) => savedCallback.current(e);
-    const unsubscribe = room.subscribe("event", listener);
-    return () => {
-      unsubscribe();
-    };
-  }, [room]);
-}
-function useSelf() {
-  const room = useRoom();
-  const rerender = useRerender();
-  React.useEffect(() => {
-    const unsubscribePresence = room.subscribe("my-presence", rerender);
-    const unsubscribeConnection = room.subscribe("connection", rerender);
-    return () => {
-      unsubscribePresence();
-      unsubscribeConnection();
-    };
-  }, [room]);
-  return room.getSelf();
-}
-function useStorage() {
-  const room = useRoom();
-  const [root, setState] = React.useState(null);
-  React.useEffect(() => {
-    let didCancel = false;
-    async function fetchStorage() {
-      const storage = await room.getStorage();
-      if (!didCancel) {
-        setState(storage.root);
-      }
-    }
-    fetchStorage();
-    return () => {
-      didCancel = true;
-    };
-  }, [room]);
-  return [root];
-}
-function useMap(key, entries) {
-  return useCrdt(key, new LiveMap(entries));
-}
-function useList(key, items) {
-  return useCrdt(key, new LiveList(items));
-}
-function useObject(key, initialData) {
-  return useCrdt(key, new LiveObject(initialData));
-}
-function useUndo() {
-  return useRoom().history.undo;
-}
-function useRedo() {
-  return useRoom().history.redo;
-}
-function useBatch() {
-  return useRoom().batch;
-}
-function useHistory() {
-  return useRoom().history;
-}
-function useCrdt(key, initialCrdt) {
-  var _a;
-  const room = useRoom();
-  const [root] = useStorage();
-  const rerender = useRerender();
-  React.useEffect(() => {
-    if (root == null) {
-      return;
-    }
-    let crdt = root.get(key);
-    if (crdt == null) {
-      crdt = initialCrdt;
-      root.set(key, crdt);
-    }
-    function onRootChange() {
-      const newCrdt = root.get(key);
-      if (newCrdt !== crdt) {
-        unsubscribeCrdt();
-        crdt = newCrdt;
-        unsubscribeCrdt = room.subscribe(crdt, rerender);
-        rerender();
-      }
-    }
-    let unsubscribeCrdt = room.subscribe(crdt, rerender);
-    const unsubscribeRoot = room.subscribe(root, onRootChange);
-    rerender();
-    return () => {
-      unsubscribeRoot();
-      unsubscribeCrdt();
-    };
-  }, [root, room]);
-  return (_a = root == null ? void 0 : root.get(key)) != null ? _a : null;
-}
-
-export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useClient, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };

package/esm/index.mjs

@@ -1,216 +0,0 @@
-import * as React from 'react';
-import { useReducer } from 'react';
-import { LiveMap, LiveList, LiveObject } from '@liveblocks/client';
-
-const ClientContext = React.createContext(null);
-function LiveblocksProvider(props) {
-  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 useRerender() {
-  const [, update] = useReducer((x) => x + 1, 0);
-  return update;
-}
-
-const RoomContext = React.createContext(null);
-function RoomProvider({
-  id,
-  children,
-  defaultPresence,
-  defaultStorageRoot
-}) {
-  if (process.env.NODE_ENV !== "production") {
-    if (id == null) {
-      throw new Error("RoomProvider id property is required. For more information: https://liveblocks.io/docs/errors/liveblocks-react/RoomProvider-id-property-is-required");
-    }
-    if (typeof id !== "string") {
-      throw new Error("RoomProvider id property should be a string.");
-    }
-  }
-  const client = useClient();
-  const [room, setRoom] = React.useState(() => client.enter(id, {
-    defaultPresence: defaultPresence ? defaultPresence() : void 0,
-    defaultStorageRoot,
-    DO_NOT_USE_withoutConnecting: typeof window === "undefined"
-  }));
-  React.useEffect(() => {
-    setRoom(client.enter(id, {
-      defaultPresence: defaultPresence ? defaultPresence() : void 0,
-      defaultStorageRoot,
-      DO_NOT_USE_withoutConnecting: typeof window === "undefined"
-    }));
-    return () => {
-      client.leave(id);
-    };
-  }, [client, id]);
-  return /* @__PURE__ */ React.createElement(RoomContext.Provider, {
-    value: room
-  }, children);
-}
-function useRoom() {
-  const room = React.useContext(RoomContext);
-  if (room == null) {
-    throw new Error("RoomProvider is missing from the react tree");
-  }
-  return room;
-}
-function useMyPresence() {
-  const room = useRoom();
-  const presence = room.getPresence();
-  const rerender = useRerender();
-  React.useEffect(() => {
-    const unsubscribe = room.subscribe("my-presence", rerender);
-    return () => {
-      unsubscribe();
-    };
-  }, [room]);
-  const setPresence = React.useCallback((overrides, options) => room.updatePresence(overrides, options), [room]);
-  return [presence, setPresence];
-}
-function useUpdateMyPresence() {
-  const room = useRoom();
-  return React.useCallback((overrides, options) => {
-    room.updatePresence(overrides, options);
-  }, [room]);
-}
-function useOthers() {
-  const room = useRoom();
-  const rerender = useRerender();
-  React.useEffect(() => {
-    const unsubscribe = room.subscribe("others", rerender);
-    return () => {
-      unsubscribe();
-    };
-  }, [room]);
-  return room.getOthers();
-}
-function useBroadcastEvent() {
-  const room = useRoom();
-  return React.useCallback((event, options = { shouldQueueEventIfNotReady: false }) => {
-    room.broadcastEvent(event, options);
-  }, [room]);
-}
-function useErrorListener(callback) {
-  const room = useRoom();
-  const savedCallback = React.useRef(callback);
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  });
-  React.useEffect(() => {
-    const listener = (e) => savedCallback.current(e);
-    const unsubscribe = room.subscribe("error", listener);
-    return () => {
-      unsubscribe();
-    };
-  }, [room]);
-}
-function useEventListener(callback) {
-  const room = useRoom();
-  const savedCallback = React.useRef(callback);
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  });
-  React.useEffect(() => {
-    const listener = (e) => savedCallback.current(e);
-    const unsubscribe = room.subscribe("event", listener);
-    return () => {
-      unsubscribe();
-    };
-  }, [room]);
-}
-function useSelf() {
-  const room = useRoom();
-  const rerender = useRerender();
-  React.useEffect(() => {
-    const unsubscribePresence = room.subscribe("my-presence", rerender);
-    const unsubscribeConnection = room.subscribe("connection", rerender);
-    return () => {
-      unsubscribePresence();
-      unsubscribeConnection();
-    };
-  }, [room]);
-  return room.getSelf();
-}
-function useStorage() {
-  const room = useRoom();
-  const [root, setState] = React.useState(null);
-  React.useEffect(() => {
-    let didCancel = false;
-    async function fetchStorage() {
-      const storage = await room.getStorage();
-      if (!didCancel) {
-        setState(storage.root);
-      }
-    }
-    fetchStorage();
-    return () => {
-      didCancel = true;
-    };
-  }, [room]);
-  return [root];
-}
-function useMap(key, entries) {
-  return useCrdt(key, new LiveMap(entries));
-}
-function useList(key, items) {
-  return useCrdt(key, new LiveList(items));
-}
-function useObject(key, initialData) {
-  return useCrdt(key, new LiveObject(initialData));
-}
-function useUndo() {
-  return useRoom().history.undo;
-}
-function useRedo() {
-  return useRoom().history.redo;
-}
-function useBatch() {
-  return useRoom().batch;
-}
-function useHistory() {
-  return useRoom().history;
-}
-function useCrdt(key, initialCrdt) {
-  var _a;
-  const room = useRoom();
-  const [root] = useStorage();
-  const rerender = useRerender();
-  React.useEffect(() => {
-    if (root == null) {
-      return;
-    }
-    let crdt = root.get(key);
-    if (crdt == null) {
-      crdt = initialCrdt;
-      root.set(key, crdt);
-    }
-    function onRootChange() {
-      const newCrdt = root.get(key);
-      if (newCrdt !== crdt) {
-        unsubscribeCrdt();
-        crdt = newCrdt;
-        unsubscribeCrdt = room.subscribe(crdt, rerender);
-        rerender();
-      }
-    }
-    let unsubscribeCrdt = room.subscribe(crdt, rerender);
-    const unsubscribeRoot = room.subscribe(root, onRootChange);
-    rerender();
-    return () => {
-      unsubscribeRoot();
-      unsubscribeCrdt();
-    };
-  }, [root, room]);
-  return (_a = root == null ? void 0 : root.get(key)) != null ? _a : null;
-}
-
-export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useClient, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };