@liveblocks/client 0.13.0-beta.1 → 0.13.3

package/lib/esm/immutable.js

@@ -0,0 +1,225 @@
+import { LiveList } from "./LiveList";
+import { LiveMap } from "./LiveMap";
+import { LiveObject } from "./LiveObject";
+import { LiveRegister } from "./LiveRegister";
+export function liveObjectToJson(liveObject) {
+    const result = {};
+    const obj = liveObject.toObject();
+    for (const key in obj) {
+        result[key] = liveNodeToJson(obj[key]);
+    }
+    return result;
+}
+function liveMapToJson(map) {
+    const result = {};
+    const obj = Object.fromEntries(map);
+    for (const key in obj) {
+        result[key] = liveNodeToJson(obj[key]);
+    }
+    return result;
+}
+function liveListToJson(value) {
+    return value.toArray().map(liveNodeToJson);
+}
+function liveNodeToJson(value) {
+    if (value instanceof LiveObject) {
+        return liveObjectToJson(value);
+    }
+    else if (value instanceof LiveList) {
+        return liveListToJson(value);
+    }
+    else if (value instanceof LiveMap) {
+        return liveMapToJson(value);
+    }
+    else if (value instanceof LiveRegister) {
+        return value.data;
+    }
+    return value;
+}
+function isPlainObject(obj) {
+    return Object.prototype.toString.call(obj) === "[object Object]";
+}
+function anyToCrdt(obj) {
+    if (obj == null) {
+        return obj;
+    }
+    if (Array.isArray(obj)) {
+        return new LiveList(obj.map(anyToCrdt));
+    }
+    if (isPlainObject(obj)) {
+        const init = {};
+        for (const key in obj) {
+            init[key] = anyToCrdt(obj[key]);
+        }
+        return new LiveObject(init);
+    }
+    return obj;
+}
+export function patchLiveList(liveList, prev, next) {
+    let i = 0;
+    let prevEnd = prev.length - 1;
+    let nextEnd = next.length - 1;
+    let prevNode = prev[0];
+    let nextNode = next[0];
+    /**
+     * For A,B,C => A,B,C,D
+     * i = 3, prevEnd = 2, nextEnd = 3
+     *
+     * For A,B,C => B,C
+     * i = 2, prevEnd = 2, nextEnd = 1
+     *
+     * For B,C => A,B,C
+     * i = 0, pre
+     */
+    outer: {
+        while (prevNode === nextNode) {
+            ++i;
+            if (i > prevEnd || i > nextEnd) {
+                break outer;
+            }
+            prevNode = prev[i];
+            nextNode = next[i];
+        }
+        prevNode = prev[prevEnd];
+        nextNode = next[nextEnd];
+        while (prevNode === nextNode) {
+            prevEnd--;
+            nextEnd--;
+            if (i > prevEnd || i > nextEnd) {
+                break outer;
+            }
+            prevNode = prev[prevEnd];
+            nextNode = next[nextEnd];
+        }
+    }
+    if (i > prevEnd) {
+        if (i <= nextEnd) {
+            while (i <= nextEnd) {
+                liveList.insert(anyToCrdt(next[i]), i);
+                i++;
+            }
+        }
+    }
+    else if (i > nextEnd) {
+        while (i <= prevEnd) {
+            liveList.delete(i++);
+        }
+    }
+    else {
+        while (i <= prevEnd && i <= nextEnd) {
+            prevNode = prev[i];
+            nextNode = next[i];
+            const liveListNode = liveList.get(i);
+            if (liveListNode instanceof LiveObject &&
+                isPlainObject(prevNode) &&
+                isPlainObject(nextNode)) {
+                patchLiveObject(liveListNode, prevNode, nextNode);
+            }
+            else {
+                liveList.delete(i);
+                liveList.insert(anyToCrdt(nextNode), i);
+            }
+            i++;
+        }
+        while (i <= nextEnd) {
+            liveList.insert(anyToCrdt(next[i]), i);
+            i++;
+        }
+        while (i <= prevEnd) {
+            liveList.delete(i);
+            i++;
+        }
+    }
+}
+export function patchLiveObjectKey(liveObject, key, prev, next) {
+    const value = liveObject.get(key);
+    if (next === undefined) {
+        liveObject.delete(key);
+    }
+    else if (value === undefined) {
+        liveObject.set(key, anyToCrdt(next));
+    }
+    else if (prev === next) {
+        return;
+    }
+    else if (value instanceof LiveList &&
+        Array.isArray(prev) &&
+        Array.isArray(next)) {
+        patchLiveList(value, prev, next);
+    }
+    else if (value instanceof LiveObject &&
+        isPlainObject(prev) &&
+        isPlainObject(next)) {
+        patchLiveObject(value, prev, next);
+    }
+    else {
+        liveObject.set(key, anyToCrdt(next));
+    }
+}
+export function patchLiveObject(root, prev, next) {
+    const updates = {};
+    for (const key in next) {
+        patchLiveObjectKey(root, key, prev[key], next[key]);
+    }
+    for (const key in prev) {
+        if (next[key] === undefined) {
+            root.delete(key);
+        }
+    }
+    if (Object.keys(updates).length > 0) {
+        root.update(updates);
+    }
+}
+function getParentsPath(node) {
+    const path = [];
+    while (node._parentKey != null && node._parent != null) {
+        if (node._parent instanceof LiveList) {
+            path.push(node._parent._indexOfPosition(node._parentKey));
+        }
+        else {
+            path.push(node._parentKey);
+        }
+        node = node._parent;
+    }
+    return path;
+}
+export function patchImmutableObject(state, updates) {
+    return updates.reduce((state, update) => patchImmutableObjectWithUpdate(state, update), state);
+}
+function patchImmutableObjectWithUpdate(state, update) {
+    const path = getParentsPath(update.node);
+    return patchImmutableNode(state, path, update);
+}
+function patchImmutableNode(state, path, update) {
+    const pathItem = path.pop();
+    if (pathItem === undefined) {
+        switch (update.type) {
+            case "LiveObject": {
+                if (typeof state !== "object") {
+                    throw new Error("Internal: received update on LiveObject but state was not an object");
+                }
+                return liveObjectToJson(update.node);
+            }
+            case "LiveList": {
+                if (Array.isArray(state) === false) {
+                    throw new Error("Internal: received update on LiveList but state was not an array");
+                }
+                return liveListToJson(update.node);
+            }
+            case "LiveMap": {
+                if (typeof state !== "object") {
+                    throw new Error("Internal: received update on LiveMap but state was not an object");
+                }
+                return liveMapToJson(update.node);
+            }
+        }
+    }
+    if (Array.isArray(state)) {
+        const newArray = [...state];
+        newArray[pathItem] = patchImmutableNode(state[pathItem], path, update);
+        return newArray;
+    }
+    else {
+        return Object.assign(Object.assign({}, state), { [pathItem]: patchImmutableNode(state[pathItem], path, update) });
+    }
+}

package/lib/esm/index.d.ts

@@ -1,5 +1,5 @@
 export { LiveObject } from "./LiveObject";
 export { LiveMap } from "./LiveMap";
 export { LiveList } from "./LiveList";
-export type { Others, Presence, Room, Client, User } from "./types";
+export type { Others, Presence, Room, Client, User, BroadcastOptions, } from "./types";
 export { createClient } from "./client";

package/lib/esm/room.d.ts

@@ -1,4 +1,4 @@
-import { Others, Presence, ClientOptions, Room, MyPresenceCallback, OthersEventCallback, AuthEndpoint, EventCallback, User, Connection, ErrorCallback, AuthenticationToken, ConnectionCallback, StorageCallback, StorageUpdate } from "./types";
+import { Others, Presence, ClientOptions, Room, MyPresenceCallback, OthersEventCallback, AuthEndpoint, EventCallback, User, Connection, ErrorCallback, AuthenticationToken, ConnectionCallback, StorageCallback, StorageUpdate, BroadcastOptions } from "./types";
 import { ClientMessage, Op } from "./live";
 import { LiveMap } from "./LiveMap";
 import { LiveObject } from "./LiveObject";
@@ -118,7 +118,7 @@ export declare function makeStateMachine(state: State, context: Context, mockedE
     updatePresence: <T_4 extends Presence>(overrides: Partial<T_4>, options?: {
         addToHistory: boolean;
     } | undefined) => void;
-    broadcastEvent: (event: any) => void;
+    broadcastEvent: (event: any, options?: BroadcastOptions) => void;
     batch: (callback: () => void) => void;
     undo: () => void;
     redo: () => void;

package/lib/esm/room.js

@@ -36,6 +36,9 @@ function makeOthers(presenceMap) {
         get count() {
             return array.length;
         },
+        [Symbol.iterator]() {
+            return array[Symbol.iterator]();
+        },
         map(callback) {
             return array.map(callback);
         },
@@ -421,7 +424,9 @@ See v0.13 release notes for more information.
         state.socket = socket;
     }
     function authenticationFailure(error) {
-        console.error(error);
+        if (process.env.NODE_ENV !== "production") {
+            console.error("Call to authentication endpoint failed", error);
+        }
         updateConnection({ state: "unavailable" });
         state.numberOfRetry++;
         state.timeoutHandles.reconnect = effects.scheduleReconnect(getRetryDelay());
@@ -587,13 +592,20 @@ See v0.13 release notes for more information.
             updateConnection({ state: "failed" });
             const error = new LiveblocksError(event.reason, event.code);
             for (const listener of state.listeners.error) {
+                if (process.env.NODE_ENV !== "production") {
+                    console.error(`Connection to Liveblocks websocket server closed. Reason: ${error.message} (code: ${error.code})`);
+                }
                 listener(error);
             }
         }
         else if (event.wasClean === false) {
-            updateConnection({ state: "unavailable" });
             state.numberOfRetry++;
-            state.timeoutHandles.reconnect = effects.scheduleReconnect(getRetryDelay());
+            const delay = getRetryDelay();
+            if (process.env.NODE_ENV !== "production") {
+                console.warn(`Connection to Liveblocks websocket server closed (code: ${event.code}). Retrying in ${delay}ms.`);
+            }
+            updateConnection({ state: "unavailable" });
+            state.timeoutHandles.reconnect = effects.scheduleReconnect(delay);
         }
         else {
             updateConnection({ state: "closed" });
@@ -735,8 +747,10 @@ See v0.13 release notes for more information.
     function getOthers() {
         return state.others;
     }
-    function broadcastEvent(event) {
-        if (state.socket == null) {
+    function broadcastEvent(event, options = {
+        shouldQueueEventIfNotReady: false,
+    }) {
+        if (state.socket == null && options.shouldQueueEventIfNotReady == false) {
             return;
         }
         state.buffer.messages.push({
@@ -817,10 +831,14 @@ See v0.13 release notes for more information.
         }
         finally {
             state.isBatching = false;
-            addToUndoStack(state.batch.reverseOps);
+            if (state.batch.reverseOps.length > 0) {
+                addToUndoStack(state.batch.reverseOps);
+            }
             // Clear the redo stack because batch is always called from a local operation
             state.redoStack = [];
-            dispatch(state.batch.ops);
+            if (state.batch.ops.length > 0) {
+                dispatch(state.batch.ops);
+            }
             notify(state.batch.updates);
             state.batch = {
                 ops: [],

package/lib/esm/types.d.ts

@@ -28,6 +28,14 @@ export declare type LiveListUpdates<TItem = any> = {
     type: "LiveList";
     node: LiveList<TItem>;
 };
+export declare type BroadcastOptions = {
+    /**
+     * Whether or not event is queued if the connection is currently closed.
+     *
+     * ❗ We are not sure if we want to support this option in the future so it might be deprecated to be replaced by something else
+     */
+    shouldQueueEventIfNotReady: boolean;
+};
 export declare type StorageUpdate = LiveMapUpdates | LiveObjectUpdates | LiveListUpdates;
 export declare type StorageCallback = (updates: StorageUpdate[]) => void;
 export declare type Client = {
@@ -65,6 +73,10 @@ export interface Others<TPresence extends Presence = Presence> {
      * Number of other users in the room.
      */
     readonly count: number;
+    /**
+     * Returns a new Iterator object that contains the users.
+     */
+    [Symbol.iterator](): IterableIterator<User<TPresence>>;
     /**
      * Returns the array of connected users in room.
      */
@@ -277,25 +289,57 @@ export declare type Room = {
         }): () => void;
     };
     /**
-     * Room's history contains function that let you undo and redo operation made on by the current client on the presence and storage.
+     * Room's history contains functions that let you undo and redo operation made on by the current client on the presence and storage.
      */
     history: {
         /**
          * Undoes the last operation executed by the current client.
          * It does not impact operations made by other clients.
+         *
+         * @example
+         * room.updatePresence({ selectedId: "xxx" }, { addToHistory: true });
+         * room.updatePresence({ selectedId: "yyy" }, { addToHistory: true });
+         * room.history.undo();
+         * // room.getPresence() equals { selectedId: "xxx" }
          */
         undo: () => void;
         /**
          * Redoes the last operation executed by the current client.
          * It does not impact operations made by other clients.
+         *
+         * @example
+         * room.updatePresence({ selectedId: "xxx" }, { addToHistory: true });
+         * room.updatePresence({ selectedId: "yyy" }, { addToHistory: true });
+         * room.history.undo();
+         * // room.getPresence() equals { selectedId: "xxx" }
+         * room.history.redo();
+         * // room.getPresence() equals { selectedId: "yyy" }
          */
         redo: () => void;
         /**
          * All future modifications made on the Room will be merged together to create a single history item until resume is called.
+         *
+         * @example
+         * room.updatePresence({ cursor: { x: 0, y: 0 } }, { addToHistory: true });
+         * room.history.pause();
+         * room.updatePresence({ cursor: { x: 1, y: 1 } }, { addToHistory: true });
+         * room.updatePresence({ cursor: { x: 2, y: 2 } }, { addToHistory: true });
+         * room.history.resume();
+         * room.history.undo();
+         * // room.getPresence() equals { cursor: { x: 0, y: 0 } }
          */
         pause: () => void;
         /**
          * Resumes history. Modifications made on the Room are not merged into a single history item anymore.
+         *
+         * @example
+         * room.updatePresence({ cursor: { x: 0, y: 0 } }, { addToHistory: true });
+         * room.history.pause();
+         * room.updatePresence({ cursor: { x: 1, y: 1 } }, { addToHistory: true });
+         * room.updatePresence({ cursor: { x: 2, y: 2 } }, { addToHistory: true });
+         * room.history.resume();
+         * room.history.undo();
+         * // room.getPresence() equals { cursor: { x: 0, y: 0 } }
          */
         resume: () => void;
     };
@@ -391,7 +435,14 @@ export declare type Room = {
      *   }
      * });
      */
-    broadcastEvent: (event: any) => void;
+    broadcastEvent: (event: any, options?: BroadcastOptions) => void;
+    /**
+     * Get the room's storage asynchronously.
+     * The storage's root is a {@link LiveObject}.
+     *
+     * @example
+     * const { root } = await room.getStorage();
+     */
     getStorage: <TRoot>() => Promise<{
         root: LiveObject<TRoot>;
     }>;
@@ -400,6 +451,13 @@ export declare type Room = {
      * All the modifications are sent to other clients in a single message.
      * All the subscribers are called only after the batch is over.
      * All the modifications are merged in a single history item (undo/redo).
+     *
+     * @example
+     * const { root } = await room.getStorage();
+     * room.batch(() => {
+     *   root.set("x", 0);
+     *   room.updatePresence({ cursor: { x: 100, y: 100 }});
+     * });
      */
     batch: (fn: () => void) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/client",
-  "version": "0.13.0-beta.1",
+  "version": "0.13.3",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",