@liveblocks/client 0.14.4 → 0.15.0-alpha.3

package/lib/esm/immutable.js

@@ -0,0 +1,290 @@
+import { LiveList } from "./LiveList";
+import { LiveMap } from "./LiveMap";
+import { LiveObject } from "./LiveObject";
+import { LiveRegister } from "./LiveRegister";
+import { findNonSerializableValue } from "./utils";
+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);
+}
+export 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) {
+        let localI = i;
+        while (localI <= prevEnd) {
+            liveList.delete(i);
+            localI++;
+        }
+    }
+    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) {
+    if (process.env.NODE_ENV !== "production") {
+        const nonSerializableValue = findNonSerializableValue(next);
+        if (nonSerializableValue) {
+            console.error(`New state path: '${nonSerializableValue.path}' value: '${nonSerializableValue.value}' is not serializable.\nOnly serializable value can be synced with Liveblocks.`);
+            return;
+        }
+    }
+    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) {
+    var _a, _b, _c, _d;
+    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");
+                }
+                let newState = Object.assign({}, state);
+                for (const key in update.updates) {
+                    if (((_a = update.updates[key]) === null || _a === void 0 ? void 0 : _a.type) === "update") {
+                        newState[key] = liveNodeToJson(update.node.get(key));
+                    }
+                    else if (((_b = update.updates[key]) === null || _b === void 0 ? void 0 : _b.type) === "delete") {
+                        delete newState[key];
+                    }
+                }
+                return newState;
+            }
+            case "LiveList": {
+                if (Array.isArray(state) === false) {
+                    throw new Error("Internal: received update on LiveList but state was not an array");
+                }
+                let newState = state.map((x) => x);
+                for (const listUpdate of update.updates) {
+                    if (listUpdate.type === "insert") {
+                        if (listUpdate.index === newState.length) {
+                            newState.push(liveNodeToJson(listUpdate.item));
+                        }
+                        else {
+                            newState = [
+                                ...newState.slice(0, listUpdate.index),
+                                liveNodeToJson(listUpdate.item),
+                                ...newState.slice(listUpdate.index),
+                            ];
+                        }
+                    }
+                    else if (listUpdate.type === "delete") {
+                        newState.splice(listUpdate.index, 1);
+                    }
+                    else if (listUpdate.type === "move") {
+                        if (listUpdate.previousIndex > listUpdate.index) {
+                            newState = [
+                                ...newState.slice(0, listUpdate.index),
+                                liveNodeToJson(listUpdate.item),
+                                ...newState.slice(listUpdate.index, listUpdate.previousIndex),
+                                ...newState.slice(listUpdate.previousIndex + 1),
+                            ];
+                        }
+                        else {
+                            newState = [
+                                ...newState.slice(0, listUpdate.previousIndex),
+                                ...newState.slice(listUpdate.previousIndex + 1, listUpdate.index + 1),
+                                liveNodeToJson(listUpdate.item),
+                                ...newState.slice(listUpdate.index + 1),
+                            ];
+                        }
+                    }
+                }
+                return newState;
+            }
+            case "LiveMap": {
+                if (typeof state !== "object") {
+                    throw new Error("Internal: received update on LiveMap but state was not an object");
+                }
+                let newState = Object.assign({}, state);
+                for (const key in update.updates) {
+                    if (((_c = update.updates[key]) === null || _c === void 0 ? void 0 : _c.type) === "update") {
+                        newState[key] = liveNodeToJson(update.node.get(key));
+                    }
+                    else if (((_d = update.updates[key]) === null || _d === void 0 ? void 0 : _d.type) === "delete") {
+                        delete newState[key];
+                    }
+                }
+                return newState;
+            }
+        }
+    }
+    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

@@ -3,3 +3,4 @@ export { LiveMap } from "./LiveMap";
 export { LiveList } from "./LiveList";
 export type { Others, Presence, Room, Client, User, BroadcastOptions, } from "./types";
 export { createClient } from "./client";
+export { liveObjectToJson, liveNodeToJson, patchLiveList, patchImmutableObject, patchLiveObject, patchLiveObjectKey, } from "./immutable";

package/lib/esm/index.js

@@ -2,3 +2,4 @@ export { LiveObject } from "./LiveObject";
 export { LiveMap } from "./LiveMap";
 export { LiveList } from "./LiveList";
 export { createClient } from "./client";
+export { liveObjectToJson, liveNodeToJson, patchLiveList, patchImmutableObject, patchLiveObject, patchLiveObjectKey, } from "./immutable";

package/lib/esm/room.d.ts

@@ -60,7 +60,7 @@ export declare type State = {
         updates: {
             others: [];
             presence: boolean;
-            nodes: Set<AbstractCrdt>;
+            storageUpdates: Map<string, StorageUpdate>;
         };
     };
     offlineOperations: Map<string, Op>;

package/lib/esm/room.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { getTreesDiffOperations, isSameNodeOrChildOf, remove } from "./utils";
+import { getTreesDiffOperations, isSameNodeOrChildOf, remove, mergeStorageUpdates, } from "./utils";
 import { ClientMessageType, ServerMessageType, OpType, } from "./live";
 import { LiveMap } from "./LiveMap";
 import { LiveObject } from "./LiveObject";
@@ -189,22 +189,22 @@ export function makeStateMachine(state, context, mockedEffects) {
             state.undoStack.push(historyItem);
         }
     }
-    function storageDispatch(ops, reverse, modified) {
+    function storageDispatch(ops, reverse, storageUpdates) {
         if (state.isBatching) {
             state.batch.ops.push(...ops);
-            for (const item of modified) {
-                state.batch.updates.nodes.add(item);
-            }
+            storageUpdates.forEach((value, key) => {
+                state.batch.updates.storageUpdates.set(key, mergeStorageUpdates(state.batch.updates.storageUpdates.get(key), value));
+            });
             state.batch.reverseOps.push(...reverse);
         }
         else {
             addToUndoStack(reverse);
             state.redoStack = [];
             dispatch(ops);
-            notify({ nodes: new Set(modified) });
+            notify({ storageUpdates: storageUpdates });
         }
     }
-    function notify({ nodes = new Set(), presence = false, others = [], }) {
+    function notify({ storageUpdates = new Map(), presence = false, others = [], }) {
         if (others.length > 0) {
             state.others = makeOthers(state.users);
             for (const event of others) {
@@ -218,28 +218,9 @@ export function makeStateMachine(state, context, mockedEffects) {
                 listener(state.me);
             }
         }
-        if (nodes.size > 0) {
+        if (storageUpdates.size > 0) {
             for (const subscriber of state.listeners.storage) {
-                subscriber(Array.from(nodes).map((m) => {
-                    if (m instanceof LiveObject) {
-                        return {
-                            type: "LiveObject",
-                            node: m,
-                        };
-                    }
-                    else if (m instanceof LiveList) {
-                        return {
-                            type: "LiveList",
-                            node: m,
-                        };
-                    }
-                    else {
-                        return {
-                            type: "LiveMap",
-                            node: m,
-                        };
-                    }
-                }));
+                subscriber(Array.from(storageUpdates.values()));
             }
         }
     }
@@ -262,7 +243,10 @@ export function makeStateMachine(state, context, mockedEffects) {
     function apply(item, isLocal) {
         const result = {
             reverse: [],
-            updates: { nodes: new Set(), presence: false },
+            updates: {
+                storageUpdates: new Map(),
+                presence: false,
+            },
         };
         for (const op of item) {
             if (op.type === "presence") {
@@ -292,7 +276,7 @@ export function makeStateMachine(state, context, mockedEffects) {
                 }
                 const applyOpResult = applyOp(op, isLocal);
                 if (applyOpResult.modified) {
-                    result.updates.nodes.add(applyOpResult.modified);
+                    result.updates.storageUpdates.set(applyOpResult.modified.node._id, mergeStorageUpdates(result.updates.storageUpdates.get(applyOpResult.modified.node._id), applyOpResult.modified));
                     result.reverse.unshift(...applyOpResult.reverse);
                 }
             }
@@ -320,17 +304,12 @@ export function makeStateMachine(state, context, mockedEffects) {
                 }
                 if (item._parent instanceof LiveList) {
                     const previousKey = item._parentKey;
-                    item._parent._setChildKey(op.parentKey, item);
-                    return {
-                        reverse: [
-                            {
-                                type: OpType.SetParentKey,
-                                id: item._id,
-                                parentKey: previousKey,
-                            },
-                        ],
-                        modified: item._parent,
-                    };
+                    if (previousKey === op.parentKey) {
+                        return { modified: false };
+                    }
+                    else {
+                        return item._parent._setChildKey(op.parentKey, item, previousKey);
+                    }
                 }
                 return { modified: false };
             }
@@ -556,7 +535,7 @@ See v0.13 release notes for more information.
             subMessages.push(message);
         }
         const updates = {
-            nodes: new Set(),
+            storageUpdates: new Map(),
             others: [],
         };
         for (const subMessage of subMessages) {
@@ -592,9 +571,9 @@ See v0.13 release notes for more information.
                 }
                 case ServerMessageType.UpdateStorage: {
                     const applyResult = apply(subMessage.ops, false);
-                    for (const node of applyResult.updates.nodes) {
-                        updates.nodes.add(node);
-                    }
+                    applyResult.updates.storageUpdates.forEach((value, key) => {
+                        updates.storageUpdates.set(key, mergeStorageUpdates(updates.storageUpdates.get(key), value));
+                    });
                     break;
                 }
             }
@@ -661,11 +640,6 @@ See v0.13 release notes for more information.
         if (state.connection.state === "connecting") {
             updateConnection(Object.assign(Object.assign({}, state.connection), { state: "open" }));
             state.numberOfRetry = 0;
-            // Re-broadcast the user presence during a reconnect.
-            if (state.lastConnectionId !== undefined) {
-                state.buffer.presence = state.me;
-                tryFlushing();
-            }
             state.lastConnectionId = state.connection.id;
             if (state.root) {
                 state.buffer.messages.push({ type: ClientMessageType.FetchStorage });
@@ -893,8 +867,11 @@ See v0.13 release notes for more information.
             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 = [];
+            if (state.batch.ops.length > 0) {
+                // Only clear the redo stack if something has changed during a batch
+                // Clear the redo stack because batch is always called from a local operation
+                state.redoStack = [];
+            }
             if (state.batch.ops.length > 0) {
                 dispatch(state.batch.ops);
             }
@@ -904,7 +881,7 @@ See v0.13 release notes for more information.
                 reverseOps: [],
                 updates: {
                     others: [],
-                    nodes: new Set(),
+                    storageUpdates: new Map(),
                     presence: false,
                 },
             };
@@ -1015,7 +992,11 @@ export function defaultState(me, defaultStorageRoot) {
         isBatching: false,
         batch: {
             ops: [],
-            updates: { nodes: new Set(), presence: false, others: [] },
+            updates: {
+                storageUpdates: new Map(),
+                presence: false,
+                others: [],
+            },
             reverseOps: [],
         },
         offlineOperations: new Map(),
@@ -1025,7 +1006,6 @@ export function createRoom(options, context) {
     const state = defaultState(options.defaultPresence, options.defaultStorageRoot);
     const machine = makeStateMachine(state, context);
     const room = {
-        id: context.room,
         /////////////
         // Core    //
         /////////////

package/lib/esm/types.d.ts

@@ -1,3 +1,4 @@
+import { AbstractCrdt } from "./AbstractCrdt";
 import type { LiveList } from "./LiveList";
 import type { LiveMap } from "./LiveMap";
 import type { LiveObject } from "./LiveObject";
@@ -16,17 +17,41 @@ export declare type RoomEventCallbackMap = {
     error: ErrorCallback;
     connection: ConnectionCallback;
 };
+export declare type UpdateDelta = {
+    type: "update";
+} | {
+    type: "delete";
+};
 export declare type LiveMapUpdates<TKey extends string = string, TValue = any> = {
     type: "LiveMap";
     node: LiveMap<TKey, TValue>;
+    updates: Record<TKey, UpdateDelta>;
 };
+export declare type LiveObjectUpdateDelta<T> = Partial<{
+    [Property in keyof T]: UpdateDelta;
+}>;
 export declare type LiveObjectUpdates<TData = any> = {
     type: "LiveObject";
     node: LiveObject<TData>;
+    updates: LiveObjectUpdateDelta<TData>;
+};
+export declare type LiveListUpdateDelta = {
+    index: number;
+    item: AbstractCrdt;
+    type: "insert";
+} | {
+    index: number;
+    type: "delete";
+} | {
+    index: number;
+    previousIndex: number;
+    item: AbstractCrdt;
+    type: "move";
 };
 export declare type LiveListUpdates<TItem = any> = {
     type: "LiveList";
     node: LiveList<TItem>;
+    updates: LiveListUpdateDelta[];
 };
 export declare type BroadcastOptions = {
     /**
@@ -167,10 +192,6 @@ export declare type OthersEvent<T extends Presence = Presence> = {
     type: "reset";
 };
 export declare type Room = {
-    /**
-     * The id of the room.
-     */
-    readonly id: string;
     getConnectionState(): ConnectionState;
     subscribe: {
         /**

package/lib/esm/utils.d.ts

@@ -1,5 +1,6 @@
 import { AbstractCrdt, Doc } from "./AbstractCrdt";
 import { SerializedCrdtWithId, Op, SerializedCrdt } from "./live";
+import { StorageUpdate } from "./types";
 export declare function remove<T>(array: T[], item: T): void;
 export declare function isSameNodeOrChildOf(node: AbstractCrdt, parent: AbstractCrdt): boolean;
 export declare function deserialize(entry: SerializedCrdtWithId, parentToChildren: Map<string, SerializedCrdtWithId[]>, doc: Doc): AbstractCrdt;
@@ -7,3 +8,8 @@ export declare function isCrdt(obj: any): obj is AbstractCrdt;
 export declare function selfOrRegisterValue(obj: AbstractCrdt): any;
 export declare function selfOrRegister(obj: any): AbstractCrdt;
 export declare function getTreesDiffOperations(currentItems: Map<string, SerializedCrdt>, newItems: Map<string, SerializedCrdt>): Op[];
+export declare function mergeStorageUpdates(first: StorageUpdate | undefined, second: StorageUpdate): StorageUpdate;
+export declare function findNonSerializableValue(value: any, path?: string): {
+    path: string;
+    value: any;
+} | false;

package/lib/esm/utils.js

@@ -138,3 +138,76 @@ export function getTreesDiffOperations(currentItems, newItems) {
     });
     return ops;
 }
+export function mergeStorageUpdates(first, second) {
+    if (!first) {
+        return second;
+    }
+    if (second.type === "LiveObject") {
+        const updates = first.updates;
+        for (const [key, value] of Object.entries(second.updates)) {
+            updates[key] = value;
+        }
+        return Object.assign(Object.assign({}, second), { updates: updates });
+    }
+    else if (second.type === "LiveMap") {
+        const updates = first.updates;
+        for (const [key, value] of Object.entries(second.updates)) {
+            updates[key] = value;
+        }
+        return Object.assign(Object.assign({}, second), { updates: updates });
+    }
+    else if (second.type === "LiveList") {
+        const updates = first.updates;
+        return Object.assign(Object.assign({}, second), { updates: updates.concat(second.updates) });
+    }
+    return second;
+}
+function isPlain(value) {
+    const type = typeof value;
+    return (type === "undefined" ||
+        value === null ||
+        type === "string" ||
+        type === "boolean" ||
+        type === "number" ||
+        Array.isArray(value) ||
+        isPlainObject(value));
+}
+function isPlainObject(value) {
+    if (typeof value !== "object" || value === null)
+        return false;
+    let proto = Object.getPrototypeOf(value);
+    if (proto === null)
+        return true;
+    let baseProto = proto;
+    while (Object.getPrototypeOf(baseProto) !== null) {
+        baseProto = Object.getPrototypeOf(baseProto);
+    }
+    return proto === baseProto;
+}
+export function findNonSerializableValue(value, path = "") {
+    if (!isPlain) {
+        return {
+            path: path || "root",
+            value: value,
+        };
+    }
+    if (typeof value !== "object" || value === null) {
+        return false;
+    }
+    for (const [key, nestedValue] of Object.entries(value)) {
+        const nestedPath = path ? path + "." + key : key;
+        if (!isPlain(nestedValue)) {
+            return {
+                path: nestedPath,
+                value: nestedValue,
+            };
+        }
+        if (typeof nestedValue === "object") {
+            const nonSerializableNestedValue = findNonSerializableValue(nestedValue, nestedPath);
+            if (nonSerializableNestedValue) {
+                return nonSerializableNestedValue;
+            }
+        }
+    }
+    return false;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/client",
-  "version": "0.14.4",
+  "version": "0.15.0-alpha.3",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -33,6 +33,7 @@
     "@types/ws": "^8.2.2",
     "babel-jest": "^26.6.3",
     "jest": "^26.6.3",
+    "jest-each": "^27.5.1",
     "node-fetch": "2.6.7",
     "typescript": "^4.4.0",
     "ws": "^8.5.0"
@@ -42,4 +43,4 @@
     "url": "https://github.com/liveblocks/liveblocks.git",
     "directory": "packages/liveblocks"
   }
-}
+}