@liveblocks/react 0.12.1 → 0.13.0

package/README.md

@@ -1,17 +1,45 @@
 <p align="center">
   <a href="https://liveblocks.io">
-    <img src="https://liveblocks.io/icon-192x192.png" height="96">
+    <img src="https://liveblocks.io/images/blog/introducing-liveblocks.png">
   </a>
 </p>
 
-# [Liveblocks](https://liveblocks.io) · [![Twitter Follow](https://shields.io/twitter/follow/liveblocks?label=Follow)](https://twitter.com/liveblocks)
+# Liveblocks · [![Twitter Follow](https://shields.io/twitter/follow/liveblocks?label=Follow)](https://twitter.com/liveblocks)
 
-Liveblocks helps you create performant and reliable collaborative experiences.
+**At [Liveblocks](https://liveblocks.io), we’re building tools to help companies create world-class collaborative products that attract, engage and retain users.** This repository is a set of open-source packages for building performant and reliable multiplayer experiences.
 
-## [Documentation](https://liveblocks.io/docs)
+## Installation
+
+```
+npm install @liveblocks/react
+```
 
 ## Examples
 
-Try it live on [liveblocks.io](https://liveblocks.io/examples).
+- Browse our gallery of collaborative UI patterns. [View examples gallery](https://liveblocks.io/examples)
+- Explore and clone any of our open-source examples. [View code examples](https://github.com/liveblocks/liveblocks/tree/main/examples)
+
+## Documentation
+
+[Read the documentation](https://liveblocks.io/docs) to start using Liveblocks.
+
+## Releases
+
+For changelog, visit [https://github.com/liveblocks/liveblocks/releases](https://github.com/liveblocks/liveblocks/releases).
+
+## Authors
+
+- Guillaume Salles ([@guillaume_slls](https://twitter.com/guillaume_slls)) - [Liveblocks](https://liveblocks.io)
+- Olivier Foucherot ([@ofoucherot](https://twitter.com/ofoucherot)) - [Liveblocks](https://liveblocks.io)
+- Steven Fabre ([@stevenfabre](https://twitter.com/stevenfabre)) - [Liveblocks](https://liveblocks.io)
+
+## Community
+
+- [Discord](https://discord.gg/X4YWJuH9VY) - To get involved with the Liveblocks community, ask questions and share tips.
+- [Twitter](https://twitter.com/liveblocks) - To receive updates, announcements, blog posts, and general Liveblocks tips.
+
+## License
+
+Licensed under the Apache License 2.0, Copyright © 2021-present [Liveblocks](https://liveblocks.io).
 
-Clone one of our [examples](https://github.com/liveblocks/liveblocks/tree/main/examples).
+See [LICENSE](../../LICENSE) for more information.

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import { Client, Others, Presence, LiveObject, LiveMap, User, LiveList } from "@liveblocks/client";
+import { Client, Others, Presence, LiveObject, LiveMap, Room, User, LiveList } from "@liveblocks/client";
 import * as React from "react";
 declare type LiveblocksProviderProps = {
     children: React.ReactNode;
@@ -27,6 +27,10 @@ declare type RoomProviderProps<TStorageRoot> = {
  * That means that you can't have 2 RoomProvider with the same room id in your react tree.
  */
 export declare function RoomProvider<TStorageRoot>({ id, children, defaultPresence, defaultStorageRoot, }: RoomProviderProps<TStorageRoot>): JSX.Element;
+/**
+ * Returns the room of the nearest RoomProvider above in the react component tree
+ */
+export declare function useRoom(): 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.
@@ -43,7 +47,9 @@ export declare function RoomProvider<TStorageRoot>({ id, children, defaultPresen
  */
 export declare function useMyPresence<T extends Presence>(): [
     T,
-    (overrides: Partial<T>) => void
+    (overrides: Partial<T>, options?: {
+        addToHistory: boolean;
+    }) => void
 ];
 /**
  * useUpdateMyPresence is similar to useMyPresence but it only returns the function to update the current user presence.
@@ -58,7 +64,9 @@ export declare function useMyPresence<T extends Presence>(): [
  *
  * // At the next render, the presence of the current user will be equal to "{ x: 0, y: 0 }"
  */
-export declare function useUpdateMyPresence<T extends Presence>(): (overrides: Partial<T>) => void;
+export declare function useUpdateMyPresence<T extends Presence>(): (overrides: Partial<T>, options?: {
+    addToHistory: boolean;
+}) => void;
 /**
  * Returns an object that lets you get information about all the the users currently connected in the room.
  *
@@ -170,13 +178,26 @@ export declare function useList<TValue>(key: string, items?: TValue[] | undefine
  */
 export declare function useObject<TData>(key: string, initialData?: TData): LiveObject<TData> | null;
 /**
- * Returns a function that undo the last operation executed by the current client.
- * Undo does not impact operations made by other clients.
+ * Returns a function that undoes the last operation executed by the current client.
+ * It does not impact operations made by other clients.
  */
 export declare function useUndo(): () => void;
 /**
- * Returns a function that redo the last operation executed by the current client.
- * Redo does not impact operations made by other clients.
+ * Returns a function that redoes the last operation executed by the current client.
+ * It does not impact operations made by other clients.
  */
 export declare function useRedo(): () => void;
+/**
+ * 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.
+ */
+export declare function useBatch(): (fn: () => void) => void;
+export declare function useHistory(): {
+    undo: () => void;
+    redo: () => void;
+    pause: () => void;
+    resume: () => void;
+};
 export {};

package/lib/index.js

@@ -126,12 +126,14 @@ function useMyPresence() {
         function onMyPresenceChange() {
             update(function (x) { return x + 1; });
         }
-        room.subscribe("my-presence", onMyPresenceChange);
+        var unsubscribe = room.subscribe("my-presence", onMyPresenceChange);
         return function () {
-            room.unsubscribe("my-presence", onMyPresenceChange);
+            unsubscribe();
         };
     }, [room]);
-    var setPresence = React.useCallback(function (overrides) { return room.updatePresence(overrides); }, [room]);
+    var setPresence = React.useCallback(function (overrides, options) {
+        return room.updatePresence(overrides, options);
+    }, [room]);
     return [presence, setPresence];
 }
 /**
@@ -149,8 +151,8 @@ function useMyPresence() {
  */
 function useUpdateMyPresence() {
     var room = useRoom();
-    return React.useCallback(function (overrides) {
-        room.updatePresence(overrides);
+    return React.useCallback(function (overrides, options) {
+        room.updatePresence(overrides, options);
     }, [room]);
 }
 /**
@@ -178,9 +180,9 @@ function useOthers() {
         function onOthersChange() {
             update(function (x) { return x + 1; });
         }
-        room.subscribe("others", onOthersChange);
+        var unsubscribe = room.subscribe("others", onOthersChange);
         return function () {
-            room.subscribe("others", onOthersChange);
+            unsubscribe();
         };
     }, [room]);
     return room.getOthers();
@@ -219,9 +221,9 @@ function useErrorListener(callback) {
     });
     React.useEffect(function () {
         var listener = function (e) { return savedCallback.current(e); };
-        room.subscribe("error", listener);
+        var unsubscribe = room.subscribe("error", listener);
         return function () {
-            room.unsubscribe("error", listener);
+            unsubscribe();
         };
     }, [room]);
 }
@@ -247,9 +249,9 @@ function useEventListener(callback) {
         var listener = function (e) {
             return savedCallback.current(e);
         };
-        room.subscribe("event", listener);
+        var unsubscribe = room.subscribe("event", listener);
         return function () {
-            room.unsubscribe("event", listener);
+            unsubscribe();
         };
     }, [room]);
 }
@@ -268,11 +270,11 @@ function useSelf() {
         function onChange() {
             update(function (x) { return x + 1; });
         }
-        room.subscribe("my-presence", onChange);
-        room.subscribe("connection", onChange);
+        var unsubscribePresence = room.subscribe("my-presence", onChange);
+        var unsubscribeConnection = room.subscribe("connection", onChange);
         return function () {
-            room.unsubscribe("my-presence", onChange);
-            room.unsubscribe("connection", onChange);
+            unsubscribePresence();
+            unsubscribeConnection();
         };
     }, [room]);
     return room.getSelf();
@@ -281,6 +283,7 @@ function useStorage() {
     var room = useRoom();
     var _a = React.useState(null), root = _a[0], setState = _a[1];
     React.useEffect(function () {
+        var didCancel = false;
         function fetchStorage() {
             return __awaiter(this, void 0, void 0, function () {
                 var storage;
@@ -289,14 +292,18 @@ function useStorage() {
                         case 0: return [4 /*yield*/, room.getStorage()];
                         case 1:
                             storage = _a.sent();
-                            setState(storage.root);
+                            if (!didCancel) {
+                                setState(storage.root);
+                            }
                             return [2 /*return*/];
                     }
                 });
             });
         }
         fetchStorage();
-        return function () { };
+        return function () {
+            didCancel = true;
+        };
     }, [room]);
     return [root];
 }
@@ -348,21 +355,34 @@ function useObject(key, initialData) {
     return useCrdt(key, new client.LiveObject(initialData));
 }
 /**
- * Returns a function that undo the last operation executed by the current client.
- * Undo does not impact operations made by other clients.
+ * 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().undo;
+    return useRoom().history.undo;
 }
 /**
- * Returns a function that redo the last operation executed by the current client.
- * Redo does not impact operations made by other clients.
+ * 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().redo;
+    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;
+}
+function useHistory() {
+    return useRoom().history;
 }
 function useCrdt(key, initialCrdt) {
     var _a;
+    var room = useRoom();
     var root = useStorage()[0];
     var _b = React.useState(0), setCount = _b[1];
     React.useEffect(function () {
@@ -380,34 +400,37 @@ function useCrdt(key, initialCrdt) {
         function onRootChange() {
             var newCrdt = root.get(key);
             if (newCrdt !== crdt) {
-                crdt.unsubscribe(onChange);
+                unsubscribeCrdt();
                 crdt = newCrdt;
-                crdt.subscribe(onChange);
+                unsubscribeCrdt = room.subscribe(crdt /* AbstractCrdt */, onChange);
                 setCount(function (x) { return x + 1; });
             }
         }
-        crdt.subscribe(onChange);
-        root.subscribe(onRootChange);
+        var unsubscribeCrdt = room.subscribe(crdt /* AbstractCrdt */, onChange);
+        var unsubscribeRoot = room.subscribe(root /* AbstractCrdt */, onRootChange);
         setCount(function (x) { return x + 1; });
         return function () {
-            root.unsubscribe(onRootChange);
-            crdt.unsubscribe(onChange);
+            unsubscribeRoot();
+            unsubscribeCrdt();
         };
-    }, [root]);
+    }, [root, room]);
     return (_a = root === null || root === void 0 ? void 0 : root.get(key)) !== null && _a !== void 0 ? _a : null;
 }
 
 exports.LiveblocksProvider = LiveblocksProvider;
 exports.RoomProvider = RoomProvider;
+exports.useBatch = useBatch;
 exports.useBroadcastEvent = useBroadcastEvent;
 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.useUndo = useUndo;

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import {\n  Client,\n  Others,\n  Presence,\n  LiveObject,\n  LiveMap,\n  Room,\n  User,\n  LiveList,\n} from \"@liveblocks/client\";\nimport * as React from \"react\";\n\ntype LiveblocksProviderProps = {\n  children: React.ReactNode;\n  client: Client;\n};\n\nconst ClientContext = React.createContext<Client | null>(null);\nconst RoomContext = React.createContext<Room | null>(null);\n\n/**\n * Makes the Liveblocks client available in the component hierarchy below.\n */\nexport function LiveblocksProvider(props: LiveblocksProviderProps) {\n  return (\n    <ClientContext.Provider value={props.client}>\n      {props.children}\n    </ClientContext.Provider>\n  );\n}\n\n/**\n * Returns the client of the nearest LiveblocksProvider above in the react component tree\n */\nfunction useClient(): Client {\n  const client = React.useContext(ClientContext);\n  if (client == null) {\n    throw new Error(\"LiveblocksProvider is missing from the react tree\");\n  }\n\n  return client;\n}\n\ntype RoomProviderProps<TStorageRoot> = {\n  /**\n   * The id of the room you want to connect to\n   */\n  id: string;\n  /**\n   * A callback that let you initialize the default presence when entering the room.\n   * If ommited, the default presence will be an empty object\n   */\n  defaultPresence?: () => Presence;\n\n  defaultStorageRoot?: TStorageRoot;\n\n  children: React.ReactNode;\n};\n\n/**\n * Makes a Room available in the component hierarchy below.\n * When this component is unmounted, the current user leave the room.\n * That means that you can't have 2 RoomProvider with the same room id in your react tree.\n */\nexport function RoomProvider<TStorageRoot>({\n  id,\n  children,\n  defaultPresence,\n  defaultStorageRoot,\n}: RoomProviderProps<TStorageRoot>) {\n  const client = useClient();\n\n  React.useEffect(() => {\n    return () => {\n      client.leave(id);\n    };\n  }, [client, id]);\n\n  const room =\n    client.getRoom(id) ||\n    client.enter(id, {\n      defaultPresence: defaultPresence ? defaultPresence() : undefined,\n      defaultStorageRoot,\n    });\n\n  return <RoomContext.Provider value={room}>{children}</RoomContext.Provider>;\n}\n\n/**\n * Returns the room of the nearest RoomProvider above in the react component tree\n */\nfunction useRoom() {\n  const room = React.useContext(RoomContext);\n\n  if (room == null) {\n    throw new Error(\"RoomProvider is missing from the react tree\");\n  }\n\n  return room;\n}\n\n/**\n * Returns the presence of the current user of the current room, and a function to update it.\n * It is different from the setState function returned by the useState hook from React.\n * You don't need to pass the full presence object to update it.\n *\n * @example\n * import { useMyPresence } from \"@liveblocks/react\";\n *\n * const [myPresence, updateMyPresence] = useMyPresence();\n * updateMyPresence({ x: 0 });\n * updateMyPresence({ y: 0 });\n *\n * // At the next render, \"myPresence\" will be equal to \"{ x: 0, y: 0 }\"\n */\nexport function useMyPresence<T extends Presence>(): [\n  T,\n  (overrides: Partial<T>) => void\n] {\n  const room = useRoom();\n  const presence = room.getPresence<T>();\n  const [, update] = React.useState(0);\n\n  React.useEffect(() => {\n    function onMyPresenceChange() {\n      update((x) => x + 1);\n    }\n\n    room.subscribe(\"my-presence\", onMyPresenceChange);\n\n    return () => {\n      room.unsubscribe(\"my-presence\", onMyPresenceChange);\n    };\n  }, [room]);\n\n  const setPresence = React.useCallback(\n    (overrides: Partial<T>) => room.updatePresence(overrides),\n    [room]\n  );\n\n  return [presence, setPresence];\n}\n\n/**\n * useUpdateMyPresence is similar to useMyPresence but it only returns the function to update the current user presence.\n * 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.\n *\n * @example\n * import { useUpdateMyPresence } from \"@liveblocks/react\";\n *\n * const updateMyPresence = useUpdateMyPresence();\n * updateMyPresence({ x: 0 });\n * updateMyPresence({ y: 0 });\n *\n * // At the next render, the presence of the current user will be equal to \"{ x: 0, y: 0 }\"\n */\nexport function useUpdateMyPresence<T extends Presence>(): (\n  overrides: Partial<T>\n) => void {\n  const room = useRoom();\n\n  return React.useCallback(\n    (overrides: Partial<T>) => {\n      room.updatePresence(overrides);\n    },\n    [room]\n  );\n}\n\n/**\n * Returns an object that lets you get information about all the the users currently connected in the room.\n *\n * @example\n * import { useOthers } from \"@liveblocks/react\";\n *\n * const others = useOthers();\n *\n * // Example to map all cursors in jsx\n * {\n *   others.map(({ connectionId, presence }) => {\n *     if(presence == null || presence.cursor == null) {\n *       return null;\n *     }\n *     return <Cursor key={connectionId} cursor={presence.cursor} />\n *   })\n * }\n */\nexport function useOthers<T extends Presence>(): Others<T> {\n  const room = useRoom();\n\n  const [, update] = React.useState(0);\n\n  React.useEffect(() => {\n    function onOthersChange() {\n      update((x) => x + 1);\n    }\n\n    room.subscribe(\"others\", onOthersChange);\n\n    return () => {\n      room.subscribe(\"others\", onOthersChange);\n    };\n  }, [room]);\n\n  return room.getOthers();\n}\n\n/**\n * Returns a callback that lets you broadcast custom events to other users in the room\n *\n * @example\n * import { useBroadcastEvent } from \"@liveblocks/react\";\n *\n * const broadcast = useBroadcastEvent();\n *\n * broadcast({ type: \"CUSTOM_EVENT\", data: { x: 0, y: 0 } });\n */\nexport function useBroadcastEvent() {\n  const room = useRoom();\n\n  return React.useCallback(\n    (event: any) => {\n      room.broadcastEvent(event);\n    },\n    [room]\n  );\n}\n\n/**\n * useErrorListener is a react hook that lets you react to potential room connection errors.\n *\n * @example\n * import { useErrorListener } from \"@liveblocks/react\";\n *\n * useErrorListener(er => {\n *   console.error(er);\n * })\n */\nexport function useErrorListener(callback: (er: Error) => void) {\n  const room = useRoom();\n  const savedCallback = React.useRef(callback);\n\n  React.useEffect(() => {\n    savedCallback.current = callback;\n  });\n\n  React.useEffect(() => {\n    const listener = (e: Error) => savedCallback.current(e);\n\n    room.subscribe(\"error\", listener);\n\n    return () => {\n      room.unsubscribe(\"error\", listener);\n    };\n  }, [room]);\n}\n\n/**\n * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.\n *\n * @example\n * import { useEventListener } from \"@liveblocks/react\";\n *\n * useEventListener(({ connectionId, event }) => {\n *   if (event.type === \"CUSTOM_EVENT\") {\n *     // Do something\n *   }\n * });\n */\nexport function useEventListener<TEvent>(\n  callback: ({\n    connectionId,\n    event,\n  }: {\n    connectionId: number;\n    event: TEvent;\n  }) => void\n) {\n  const room = useRoom();\n  const savedCallback = React.useRef(callback);\n\n  React.useEffect(() => {\n    savedCallback.current = callback;\n  });\n\n  React.useEffect(() => {\n    const listener = (e: { connectionId: number; event: TEvent }) =>\n      savedCallback.current(e);\n\n    room.subscribe(\"event\", listener);\n\n    return () => {\n      room.unsubscribe(\"event\", listener);\n    };\n  }, [room]);\n}\n\n/**\n * Gets the current user once it is connected to the room.\n *\n * @example\n * import { useSelf } from \"@liveblocks/react\";\n *\n * const user = useSelf();\n */\nexport function useSelf<\n  TPresence extends Presence = Presence\n>(): User<TPresence> | null {\n  const room = useRoom();\n  const [, update] = React.useState(0);\n\n  React.useEffect(() => {\n    function onChange() {\n      update((x) => x + 1);\n    }\n\n    room.subscribe(\"my-presence\", onChange);\n    room.subscribe(\"connection\", onChange);\n\n    return () => {\n      room.unsubscribe(\"my-presence\", onChange);\n      room.unsubscribe(\"connection\", onChange);\n    };\n  }, [room]);\n\n  return room.getSelf<TPresence>();\n}\n\nexport function useStorage<TRoot extends Record<string, any>>(): [\n  root: LiveObject<TRoot> | null\n] {\n  const room = useRoom();\n  const [root, setState] = React.useState<LiveObject<TRoot> | null>(null);\n\n  React.useEffect(() => {\n    async function fetchStorage() {\n      const storage = await room.getStorage<TRoot>();\n      setState(storage.root);\n    }\n\n    fetchStorage();\n\n    return () => {};\n  }, [room]);\n\n  return [root];\n}\n\n/**\n * Returns the LiveMap associated with the provided key. If the LiveMap does not exist, a new empty LiveMap will be created.\n * 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.\n *\n * @param key The storage key associated with the LiveMap\n * @param entries Optional entries that are used to create the LiveMap for the first time\n * @returns null while the storage is loading, otherwise, returns the LiveMap associated to the storage\n *\n * @example\n * const emptyMap = useMap(\"mapA\");\n * const mapWithItems = useMap(\"mapB\", [[\"keyA\", \"valueA\"], [\"keyB\", \"valueB\"]]);\n */\nexport function useMap<TKey extends string, TValue>(\n  key: string,\n  entries?: readonly (readonly [TKey, TValue])[] | null | undefined\n): LiveMap<TKey, TValue> | null {\n  return useCrdt(key, new LiveMap(entries));\n}\n\n/**\n * Returns the LiveList associated with the provided key. If the LiveList does not exist, a new LiveList will be created.\n * 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.\n *\n * @param key The storage key associated with the LiveList\n * @param items Optional items that are used to create the LiveList for the first time\n * @returns null while the storage is loading, otherwise, returns the LiveList associated to the storage\n *\n * @example\n * const emptyList = useList(\"listA\");\n * const listWithItems = useList(\"listB\", [\"a\", \"b\", \"c\"]);\n */\nexport function useList<TValue>(\n  key: string,\n  items?: TValue[] | undefined\n): LiveList<TValue> | null {\n  return useCrdt<LiveList<TValue>>(key, new LiveList(items));\n}\n\n/**\n * Returns the LiveObject associated with the provided key. If the LiveObject does not exist, it will be created with the initialData parameter.\n * 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.\n *\n * @param key The storage key associated with the LiveObject\n * @param initialData Optional data that is used to create the LiveObject for the first time\n * @returns null while the storage is loading, otherwise, returns the LveObject associated to the storage\n *\n * @example\n * const object = useObject(\"obj\", {\n *   company: \"Liveblocks\",\n *   website: \"https://liveblocks.io\"\n * });\n */\nexport function useObject<TData>(\n  key: string,\n  initialData?: TData\n): LiveObject<TData> | null {\n  return useCrdt(key, new LiveObject(initialData));\n}\n\n/**\n * Returns a function that undo the last operation executed by the current client.\n * Undo does not impact operations made by other clients.\n */\nexport function useUndo() {\n  return useRoom().undo;\n}\n\n/**\n * Returns a function that redo the last operation executed by the current client.\n * Redo does not impact operations made by other clients.\n */\nexport function useRedo() {\n  return useRoom().redo;\n}\n\nfunction useCrdt<\n  T extends {\n    subscribe: (callback: () => void) => void;\n    unsubscribe: (callback: () => void) => void;\n  }\n>(key: string, initialCrdt: T): T | null {\n  const [root] = useStorage();\n  const [, setCount] = React.useState(0);\n\n  React.useEffect(() => {\n    if (root == null) {\n      return;\n    }\n\n    let crdt: null | T = root.get(key);\n\n    if (crdt == null) {\n      crdt = initialCrdt;\n      root.set(key, crdt);\n    }\n\n    function onChange() {\n      setCount((x) => x + 1);\n    }\n\n    function onRootChange() {\n      const newCrdt = root!.get(key);\n      if (newCrdt !== crdt) {\n        crdt!.unsubscribe(onChange);\n        crdt = newCrdt;\n        crdt!.subscribe(onChange);\n        setCount((x) => x + 1);\n      }\n    }\n\n    crdt.subscribe(onChange);\n    root.subscribe(onRootChange);\n\n    setCount((x) => x + 1);\n\n    return () => {\n      root.unsubscribe(onRootChange);\n      crdt!.unsubscribe(onChange);\n    };\n  }, [root]);\n\n  return root?.get(key) ?? null;\n}\n"],"names":["React.createContext","React.createElement","React.useContext","React.useEffect","React.useState","React.useCallback","React.useRef","LiveMap","LiveList","LiveObject"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import {\n  Client,\n  Others,\n  Presence,\n  LiveObject,\n  LiveMap,\n  Room,\n  User,\n  LiveList,\n} from \"@liveblocks/client\";\nimport * as React from \"react\";\n\ntype LiveblocksProviderProps = {\n  children: React.ReactNode;\n  client: Client;\n};\n\nconst ClientContext = React.createContext<Client | null>(null);\nconst RoomContext = React.createContext<Room | null>(null);\n\n/**\n * Makes the Liveblocks client available in the component hierarchy below.\n */\nexport function LiveblocksProvider(props: LiveblocksProviderProps) {\n  return (\n    <ClientContext.Provider value={props.client}>\n      {props.children}\n    </ClientContext.Provider>\n  );\n}\n\n/**\n * Returns the client of the nearest LiveblocksProvider above in the react component tree\n */\nfunction useClient(): Client {\n  const client = React.useContext(ClientContext);\n  if (client == null) {\n    throw new Error(\"LiveblocksProvider is missing from the react tree\");\n  }\n\n  return client;\n}\n\ntype RoomProviderProps<TStorageRoot> = {\n  /**\n   * The id of the room you want to connect to\n   */\n  id: string;\n  /**\n   * A callback that let you initialize the default presence when entering the room.\n   * If ommited, the default presence will be an empty object\n   */\n  defaultPresence?: () => Presence;\n\n  defaultStorageRoot?: TStorageRoot;\n\n  children: React.ReactNode;\n};\n\n/**\n * Makes a Room available in the component hierarchy below.\n * When this component is unmounted, the current user leave the room.\n * That means that you can't have 2 RoomProvider with the same room id in your react tree.\n */\nexport function RoomProvider<TStorageRoot>({\n  id,\n  children,\n  defaultPresence,\n  defaultStorageRoot,\n}: RoomProviderProps<TStorageRoot>) {\n  const client = useClient();\n\n  React.useEffect(() => {\n    return () => {\n      client.leave(id);\n    };\n  }, [client, id]);\n\n  const room =\n    client.getRoom(id) ||\n    client.enter(id, {\n      defaultPresence: defaultPresence ? defaultPresence() : undefined,\n      defaultStorageRoot,\n    });\n\n  return <RoomContext.Provider value={room}>{children}</RoomContext.Provider>;\n}\n\n/**\n * Returns the room of the nearest RoomProvider above in the react component tree\n */\nexport function useRoom() {\n  const room = React.useContext(RoomContext);\n\n  if (room == null) {\n    throw new Error(\"RoomProvider is missing from the react tree\");\n  }\n\n  return room;\n}\n\n/**\n * Returns the presence of the current user of the current room, and a function to update it.\n * It is different from the setState function returned by the useState hook from React.\n * You don't need to pass the full presence object to update it.\n *\n * @example\n * import { useMyPresence } from \"@liveblocks/react\";\n *\n * const [myPresence, updateMyPresence] = useMyPresence();\n * updateMyPresence({ x: 0 });\n * updateMyPresence({ y: 0 });\n *\n * // At the next render, \"myPresence\" will be equal to \"{ x: 0, y: 0 }\"\n */\nexport function useMyPresence<T extends Presence>(): [\n  T,\n  (overrides: Partial<T>, options?: { addToHistory: boolean }) => void\n] {\n  const room = useRoom();\n  const presence = room.getPresence<T>();\n  const [, update] = React.useState(0);\n\n  React.useEffect(() => {\n    function onMyPresenceChange() {\n      update((x) => x + 1);\n    }\n\n    const unsubscribe = room.subscribe(\"my-presence\", onMyPresenceChange);\n\n    return () => {\n      unsubscribe();\n    };\n  }, [room]);\n\n  const setPresence = React.useCallback(\n    (overrides: Partial<T>, options?: { addToHistory: boolean }) =>\n      room.updatePresence(overrides, options),\n    [room]\n  );\n\n  return [presence, setPresence];\n}\n\n/**\n * useUpdateMyPresence is similar to useMyPresence but it only returns the function to update the current user presence.\n * 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.\n *\n * @example\n * import { useUpdateMyPresence } from \"@liveblocks/react\";\n *\n * const updateMyPresence = useUpdateMyPresence();\n * updateMyPresence({ x: 0 });\n * updateMyPresence({ y: 0 });\n *\n * // At the next render, the presence of the current user will be equal to \"{ x: 0, y: 0 }\"\n */\nexport function useUpdateMyPresence<T extends Presence>(): (\n  overrides: Partial<T>,\n  options?: { addToHistory: boolean }\n) => void {\n  const room = useRoom();\n\n  return React.useCallback(\n    (overrides: Partial<T>, options?: { addToHistory: boolean }) => {\n      room.updatePresence(overrides, options);\n    },\n    [room]\n  );\n}\n\n/**\n * Returns an object that lets you get information about all the the users currently connected in the room.\n *\n * @example\n * import { useOthers } from \"@liveblocks/react\";\n *\n * const others = useOthers();\n *\n * // Example to map all cursors in jsx\n * {\n *   others.map(({ connectionId, presence }) => {\n *     if(presence == null || presence.cursor == null) {\n *       return null;\n *     }\n *     return <Cursor key={connectionId} cursor={presence.cursor} />\n *   })\n * }\n */\nexport function useOthers<T extends Presence>(): Others<T> {\n  const room = useRoom();\n\n  const [, update] = React.useState(0);\n\n  React.useEffect(() => {\n    function onOthersChange() {\n      update((x) => x + 1);\n    }\n\n    const unsubscribe = room.subscribe(\"others\", onOthersChange);\n\n    return () => {\n      unsubscribe();\n    };\n  }, [room]);\n\n  return room.getOthers();\n}\n\n/**\n * Returns a callback that lets you broadcast custom events to other users in the room\n *\n * @example\n * import { useBroadcastEvent } from \"@liveblocks/react\";\n *\n * const broadcast = useBroadcastEvent();\n *\n * broadcast({ type: \"CUSTOM_EVENT\", data: { x: 0, y: 0 } });\n */\nexport function useBroadcastEvent() {\n  const room = useRoom();\n\n  return React.useCallback(\n    (event: any) => {\n      room.broadcastEvent(event);\n    },\n    [room]\n  );\n}\n\n/**\n * useErrorListener is a react hook that lets you react to potential room connection errors.\n *\n * @example\n * import { useErrorListener } from \"@liveblocks/react\";\n *\n * useErrorListener(er => {\n *   console.error(er);\n * })\n */\nexport function useErrorListener(callback: (er: Error) => void) {\n  const room = useRoom();\n  const savedCallback = React.useRef(callback);\n\n  React.useEffect(() => {\n    savedCallback.current = callback;\n  });\n\n  React.useEffect(() => {\n    const listener = (e: Error) => savedCallback.current(e);\n\n    const unsubscribe = room.subscribe(\"error\", listener);\n\n    return () => {\n      unsubscribe();\n    };\n  }, [room]);\n}\n\n/**\n * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.\n *\n * @example\n * import { useEventListener } from \"@liveblocks/react\";\n *\n * useEventListener(({ connectionId, event }) => {\n *   if (event.type === \"CUSTOM_EVENT\") {\n *     // Do something\n *   }\n * });\n */\nexport function useEventListener<TEvent>(\n  callback: ({\n    connectionId,\n    event,\n  }: {\n    connectionId: number;\n    event: TEvent;\n  }) => void\n) {\n  const room = useRoom();\n  const savedCallback = React.useRef(callback);\n\n  React.useEffect(() => {\n    savedCallback.current = callback;\n  });\n\n  React.useEffect(() => {\n    const listener = (e: { connectionId: number; event: TEvent }) =>\n      savedCallback.current(e);\n\n    const unsubscribe = room.subscribe(\"event\", listener);\n\n    return () => {\n      unsubscribe();\n    };\n  }, [room]);\n}\n\n/**\n * Gets the current user once it is connected to the room.\n *\n * @example\n * import { useSelf } from \"@liveblocks/react\";\n *\n * const user = useSelf();\n */\nexport function useSelf<\n  TPresence extends Presence = Presence\n>(): User<TPresence> | null {\n  const room = useRoom();\n  const [, update] = React.useState(0);\n\n  React.useEffect(() => {\n    function onChange() {\n      update((x) => x + 1);\n    }\n\n    const unsubscribePresence = room.subscribe(\"my-presence\", onChange);\n    const unsubscribeConnection = room.subscribe(\"connection\", onChange);\n\n    return () => {\n      unsubscribePresence();\n      unsubscribeConnection();\n    };\n  }, [room]);\n\n  return room.getSelf<TPresence>();\n}\n\nexport function useStorage<TRoot extends Record<string, any>>(): [\n  root: LiveObject<TRoot> | null\n] {\n  const room = useRoom();\n  const [root, setState] = React.useState<LiveObject<TRoot> | null>(null);\n\n  React.useEffect(() => {\n    let didCancel = false;\n\n    async function fetchStorage() {\n      const storage = await room.getStorage<TRoot>();\n      if (!didCancel) {\n        setState(storage.root);\n      }\n    }\n\n    fetchStorage();\n\n    return () => {\n      didCancel = true;\n    };\n  }, [room]);\n\n  return [root];\n}\n\n/**\n * Returns the LiveMap associated with the provided key. If the LiveMap does not exist, a new empty LiveMap will be created.\n * 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.\n *\n * @param key The storage key associated with the LiveMap\n * @param entries Optional entries that are used to create the LiveMap for the first time\n * @returns null while the storage is loading, otherwise, returns the LiveMap associated to the storage\n *\n * @example\n * const emptyMap = useMap(\"mapA\");\n * const mapWithItems = useMap(\"mapB\", [[\"keyA\", \"valueA\"], [\"keyB\", \"valueB\"]]);\n */\nexport function useMap<TKey extends string, TValue>(\n  key: string,\n  entries?: readonly (readonly [TKey, TValue])[] | null | undefined\n): LiveMap<TKey, TValue> | null {\n  return useCrdt(key, new LiveMap(entries));\n}\n\n/**\n * Returns the LiveList associated with the provided key. If the LiveList does not exist, a new LiveList will be created.\n * 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.\n *\n * @param key The storage key associated with the LiveList\n * @param items Optional items that are used to create the LiveList for the first time\n * @returns null while the storage is loading, otherwise, returns the LiveList associated to the storage\n *\n * @example\n * const emptyList = useList(\"listA\");\n * const listWithItems = useList(\"listB\", [\"a\", \"b\", \"c\"]);\n */\nexport function useList<TValue>(\n  key: string,\n  items?: TValue[] | undefined\n): LiveList<TValue> | null {\n  return useCrdt<LiveList<TValue>>(key, new LiveList(items));\n}\n\n/**\n * Returns the LiveObject associated with the provided key. If the LiveObject does not exist, it will be created with the initialData parameter.\n * 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.\n *\n * @param key The storage key associated with the LiveObject\n * @param initialData Optional data that is used to create the LiveObject for the first time\n * @returns null while the storage is loading, otherwise, returns the LveObject associated to the storage\n *\n * @example\n * const object = useObject(\"obj\", {\n *   company: \"Liveblocks\",\n *   website: \"https://liveblocks.io\"\n * });\n */\nexport function useObject<TData>(\n  key: string,\n  initialData?: TData\n): LiveObject<TData> | null {\n  return useCrdt(key, new LiveObject(initialData));\n}\n\n/**\n * Returns a function that undoes the last operation executed by the current client.\n * It does not impact operations made by other clients.\n */\nexport function useUndo() {\n  return useRoom().history.undo;\n}\n\n/**\n * Returns a function that redoes the last operation executed by the current client.\n * It does not impact operations made by other clients.\n */\nexport function useRedo() {\n  return useRoom().history.redo;\n}\n\n/**\n * Returns a function that batches modifications made during the given function.\n * All the modifications are sent to other clients in a single message.\n * All the modifications are merged in a single history item (undo/redo).\n * All the subscribers are called only after the batch is over.\n */\nexport function useBatch() {\n  return useRoom().batch;\n}\n\nexport function useHistory() {\n  return useRoom().history;\n}\n\nfunction useCrdt<T>(key: string, initialCrdt: T): T | null {\n  const room = useRoom();\n  const [root] = useStorage();\n  const [, setCount] = React.useState(0);\n\n  React.useEffect(() => {\n    if (root == null) {\n      return;\n    }\n\n    let crdt: null | T = root.get(key);\n\n    if (crdt == null) {\n      crdt = initialCrdt;\n      root.set(key, crdt);\n    }\n\n    function onChange() {\n      setCount((x) => x + 1);\n    }\n\n    function onRootChange() {\n      const newCrdt = root!.get(key);\n      if (newCrdt !== crdt) {\n        unsubscribeCrdt();\n        crdt = newCrdt;\n        unsubscribeCrdt = room.subscribe(\n          crdt as any /* AbstractCrdt */,\n          onChange\n        );\n        setCount((x) => x + 1);\n      }\n    }\n\n    let unsubscribeCrdt = room.subscribe(\n      crdt as any /* AbstractCrdt */,\n      onChange\n    );\n    const unsubscribeRoot = room.subscribe(\n      root as any /* AbstractCrdt */,\n      onRootChange\n    );\n\n    setCount((x) => x + 1);\n\n    return () => {\n      unsubscribeRoot();\n      unsubscribeCrdt();\n    };\n  }, [root, room]);\n\n  return root?.get(key) ?? null;\n}\n"],"names":["React.createContext","React.createElement","React.useContext","React.useEffect","React.useState","React.useCallback","React.useRef","LiveMap","LiveList","LiveObject"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "",
   "main": "./lib/index.js",
   "files": [
@@ -23,7 +23,7 @@
   },
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@liveblocks/client": "0.12.1",
+    "@liveblocks/client": "0.13.0",
     "react": "^16.14.0 || ^17"
   },
   "devDependencies": {