@liveblocks/client 0.13.0-beta.1 → 0.13.3

package/lib/cjs/room.js

@@ -58,6 +58,9 @@ function makeOthers(presenceMap) {
         get count() {
             return array.length;
         },
+        [Symbol.iterator]() {
+            return array[Symbol.iterator]();
+        },
         map(callback) {
             return array.map(callback);
         },
@@ -443,7 +446,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());
@@ -609,13 +614,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" });
@@ -757,8 +769,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({
@@ -839,10 +853,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/cjs/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/lib/esm/LiveList.d.ts

@@ -64,6 +64,7 @@ export declare class LiveList<T> extends AbstractCrdt {
      * @param index The index of the element to delete
      */
     delete(index: number): void;
+    clear(): void;
     /**
      * Returns an Array of all the elements in the LiveList.
      */

package/lib/esm/LiveList.js

@@ -253,6 +253,28 @@ export class LiveList extends AbstractCrdt {
             }
         }
     }
+    clear() {
+        if (this._doc) {
+            let ops = [];
+            let reverseOps = [];
+            for (const item of __classPrivateFieldGet(this, _LiveList_items, "f")) {
+                item[0]._detach();
+                const childId = item[0]._id;
+                if (childId) {
+                    ops.push({ id: childId, type: OpType.DeleteCrdt });
+                    reverseOps.push(...item[0]._serialize(this._id, item[1]));
+                }
+            }
+            __classPrivateFieldSet(this, _LiveList_items, [], "f");
+            this._doc.dispatch(ops, reverseOps, [this]);
+        }
+        else {
+            for (const item of __classPrivateFieldGet(this, _LiveList_items, "f")) {
+                item[0]._detach();
+            }
+            __classPrivateFieldSet(this, _LiveList_items, [], "f");
+        }
+    }
     /**
      * Returns an Array of all the elements in the LiveList.
      */

package/lib/esm/LiveObject.d.ts

@@ -53,6 +53,11 @@ export declare class LiveObject<T extends Record<string, any> = Record<string, a
      * @param key The key of the property to get
      */
     get<TKey extends keyof T>(key: TKey): T[TKey];
+    /**
+     * Deletes a key from the LiveObject
+     * @param key The key of the property to delete
+     */
+    delete(key: keyof T): void;
     /**
      * Adds or updates multiple properties at once with an object.
      * @param overrides The object used to overrides properties

package/lib/esm/LiveObject.js

@@ -183,6 +183,40 @@ export class LiveObject extends AbstractCrdt {
     get(key) {
         return __classPrivateFieldGet(this, _LiveObject_map, "f").get(key);
     }
+    /**
+     * Deletes a key from the LiveObject
+     * @param key The key of the property to delete
+     */
+    delete(key) {
+        const keyAsString = key;
+        const oldValue = __classPrivateFieldGet(this, _LiveObject_map, "f").get(keyAsString);
+        if (oldValue === undefined) {
+            return;
+        }
+        if (this._doc == null || this._id == null) {
+            if (oldValue instanceof AbstractCrdt) {
+                oldValue._detach();
+            }
+            __classPrivateFieldGet(this, _LiveObject_map, "f").delete(keyAsString);
+            return;
+        }
+        let reverse;
+        if (oldValue instanceof AbstractCrdt) {
+            oldValue._detach();
+            reverse = oldValue._serialize(this._id, keyAsString);
+        }
+        else {
+            reverse = [
+                {
+                    type: OpType.UpdateObject,
+                    data: { [keyAsString]: oldValue },
+                    id: this._id,
+                },
+            ];
+        }
+        __classPrivateFieldGet(this, _LiveObject_map, "f").delete(keyAsString);
+        this._doc.dispatch([{ type: OpType.DeleteObjectKey, key: keyAsString, id: this._id }], reverse, [this]);
+    }
     /**
      * Adds or updates multiple properties at once with an object.
      * @param overrides The object used to overrides properties
@@ -306,6 +340,10 @@ _LiveObject_map = new WeakMap(), _LiveObject_propToLastUpdate = new WeakMap(), _
     return isModified ? { modified: this, reverse } : { modified: false };
 }, _LiveObject_applyDeleteObjectKey = function _LiveObject_applyDeleteObjectKey(op) {
     const key = op.key;
+    // If property does not exist, exit without notifying
+    if (__classPrivateFieldGet(this, _LiveObject_map, "f").has(key) === false) {
+        return { modified: false };
+    }
     const oldValue = __classPrivateFieldGet(this, _LiveObject_map, "f").get(key);
     let reverse = [];
     if (isCrdt(oldValue)) {

package/lib/esm/immutable/index.d.ts

@@ -0,0 +1,7 @@
+import { LiveList } from "../LiveList";
+import { LiveObject } from "../LiveObject";
+import { StorageUpdate } from "../types";
+export declare function liveObjectToJson(liveObject: LiveObject<any>): any;
+export declare function patchLiveList<T>(liveList: LiveList<T>, prev: Array<T>, next: Array<T>): void;
+export declare function patchLiveObject<T extends Record<string, any>>(root: LiveObject<T>, prev: T, next: T): void;
+export declare function patchImmutableObject<T>(state: T, updates: StorageUpdate[]): T;

package/lib/esm/immutable/index.js

@@ -0,0 +1,207 @@
+import { LiveList } from "../LiveList";
+import { LiveMap } from "../LiveMap";
+import { LiveObject } from "../LiveObject";
+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);
+    }
+    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 patchLiveObject(root, prev, next) {
+    const updates = {};
+    for (const key in next) {
+        if (prev[key] === next[key]) {
+            continue;
+        }
+        else if (Array.isArray(prev[key]) && Array.isArray(next[key])) {
+            patchLiveList(root.get(key), prev[key], next[key]);
+        }
+        else if (isPlainObject(prev[key]) && isPlainObject(next[key])) {
+            patchLiveObject(root.get(key), prev[key], next[key]);
+        }
+        else {
+            updates[key] = anyToCrdt(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/immutable.d.ts

@@ -0,0 +1,8 @@
+import { LiveList } from "./LiveList";
+import { LiveObject } from "./LiveObject";
+import { StorageUpdate } from "./types";
+export declare function liveObjectToJson(liveObject: LiveObject<any>): any;
+export declare function patchLiveList<T>(liveList: LiveList<T>, prev: Array<T>, next: Array<T>): void;
+export declare function patchLiveObjectKey<T>(liveObject: LiveObject<T>, key: keyof T, prev: any, next: any): void;
+export declare function patchLiveObject<T extends Record<string, any>>(root: LiveObject<T>, prev: T, next: T): void;
+export declare function patchImmutableObject<T>(state: T, updates: StorageUpdate[]): T;