@liveblocks/client 0.13.3 → 0.15.0-alpha.2

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 { isSameNodeOrChildOf, remove } from "./utils";
+import { getTreesDiffOperations, isSameNodeOrChildOf, remove, mergeStorageUpdates, } from "./utils";
 import auth, { parseToken } from "./authentication";
 import { ClientMessageType, ServerMessageType, OpType, } from "./live";
 import { LiveMap } from "./LiveMap";
@@ -110,18 +110,23 @@ export function makeStateMachine(state, context, mockedEffects) {
         };
         return genericSubscribe(cb);
     }
-    function createRootFromMessage(message) {
-        state.root = load(message.items);
+    function createOrUpdateRootFromMessage(message) {
+        if (message.items.length === 0) {
+            throw new Error("Internal error: cannot load storage without items");
+        }
+        if (state.root) {
+            updateRoot(message.items);
+        }
+        else {
+            state.root = load(message.items);
+        }
         for (const key in state.defaultStorageRoot) {
             if (state.root.get(key) == null) {
                 state.root.set(key, state.defaultStorageRoot[key]);
             }
         }
     }
-    function load(items) {
-        if (items.length === 0) {
-            throw new Error("Internal error: cannot load storage without items");
-        }
+    function buildRootAndParentToChildren(items) {
         const parentToChildren = new Map();
         let root = null;
         for (const tuple of items) {
@@ -142,6 +147,23 @@ export function makeStateMachine(state, context, mockedEffects) {
         if (root == null) {
             throw new Error("Root can't be null");
         }
+        return [root, parentToChildren];
+    }
+    function updateRoot(items) {
+        if (!state.root) {
+            return;
+        }
+        const currentItems = new Map();
+        state.items.forEach((liveCrdt, id) => {
+            currentItems.set(id, liveCrdt._toSerializedCrdt());
+        });
+        // Get operations that represent the diff between 2 states.
+        const ops = getTreesDiffOperations(currentItems, new Map(items));
+        const result = apply(ops, false);
+        notify(result.updates);
+    }
+    function load(items) {
+        const [root, parentToChildren] = buildRootAndParentToChildren(items);
         return LiveObject._deserialize(root, parentToChildren, {
             addItem,
             deleteItem,
@@ -171,22 +193,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) {
@@ -200,28 +222,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()));
             }
         }
     }
@@ -230,7 +233,10 @@ export function makeStateMachine(state, context, mockedEffects) {
             state.connection.state === "connecting") {
             return state.connection.id;
         }
-        throw new Error("Internal. Tried to get connection id but connection is not open");
+        else if (state.lastConnectionId !== null) {
+            return state.lastConnectionId;
+        }
+        throw new Error("Internal. Tried to get connection id but connection was never open");
     }
     function generateId() {
         return `${getConnectionId()}:${state.clock++}`;
@@ -238,10 +244,13 @@ export function makeStateMachine(state, context, mockedEffects) {
     function generateOpId() {
         return `${getConnectionId()}:${state.opClock++}`;
     }
-    function apply(item) {
+    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") {
@@ -265,16 +274,23 @@ export function makeStateMachine(state, context, mockedEffects) {
                 result.updates.presence = true;
             }
             else {
-                const applyOpResult = applyOp(op);
+                // Ops applied after undo/redo don't have an opId.
+                if (isLocal && !op.opId) {
+                    op.opId = generateOpId();
+                }
+                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);
                 }
             }
         }
         return result;
     }
-    function applyOp(op) {
+    function applyOp(op, isLocal) {
+        if (op.opId) {
+            state.offlineOperations.delete(op.opId);
+        }
         switch (op.type) {
             case OpType.DeleteObjectKey:
             case OpType.UpdateObject:
@@ -283,7 +299,7 @@ export function makeStateMachine(state, context, mockedEffects) {
                 if (item == null) {
                     return { modified: false };
                 }
-                return item._apply(op);
+                return item._apply(op, isLocal);
             }
             case OpType.SetParentKey: {
                 const item = state.items.get(op.id);
@@ -292,17 +308,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 };
             }
@@ -311,28 +322,28 @@ export function makeStateMachine(state, context, mockedEffects) {
                 if (parent == null || getItem(op.id) != null) {
                     return { modified: false };
                 }
-                return parent._attachChild(op.id, op.parentKey, new LiveObject(op.data));
+                return parent._attachChild(op.id, op.parentKey, new LiveObject(op.data), isLocal);
             }
             case OpType.CreateList: {
                 const parent = state.items.get(op.parentId);
                 if (parent == null || getItem(op.id) != null) {
                     return { modified: false };
                 }
-                return parent._attachChild(op.id, op.parentKey, new LiveList());
+                return parent._attachChild(op.id, op.parentKey, new LiveList(), isLocal);
             }
             case OpType.CreateRegister: {
                 const parent = state.items.get(op.parentId);
                 if (parent == null || getItem(op.id) != null) {
                     return { modified: false };
                 }
-                return parent._attachChild(op.id, op.parentKey, new LiveRegister(op.data));
+                return parent._attachChild(op.id, op.parentKey, new LiveRegister(op.data), isLocal);
             }
             case OpType.CreateMap: {
                 const parent = state.items.get(op.parentId);
                 if (parent == null || getItem(op.id) != null) {
                     return { modified: false };
                 }
-                return parent._attachChild(op.id, op.parentKey, new LiveMap());
+                return parent._attachChild(op.id, op.parentKey, new LiveMap(), isLocal);
             }
         }
         return { modified: false };
@@ -525,7 +536,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) {
@@ -554,15 +565,16 @@ See v0.13 release notes for more information.
                     break;
                 }
                 case ServerMessageType.InitialStorageState: {
-                    createRootFromMessage(subMessage);
+                    createOrUpdateRootFromMessage(subMessage);
+                    applyAndSendOfflineOps();
                     _getInitialStateResolver === null || _getInitialStateResolver === void 0 ? void 0 : _getInitialStateResolver();
                     break;
                 }
                 case ServerMessageType.UpdateStorage: {
-                    const applyResult = apply(subMessage.ops);
-                    for (const node of applyResult.updates.nodes) {
-                        updates.nodes.add(node);
-                    }
+                    const applyResult = apply(subMessage.ops, false);
+                    applyResult.updates.storageUpdates.forEach((value, key) => {
+                        updates.storageUpdates.set(key, mergeStorageUpdates(updates.storageUpdates.get(key), value));
+                    });
                     break;
                 }
             }
@@ -629,6 +641,10 @@ 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;
+            state.lastConnectionId = state.connection.id;
+            if (state.root) {
+                state.buffer.messages.push({ type: ClientMessageType.FetchStorage });
+            }
             tryFlushing();
         }
         else {
@@ -668,11 +684,29 @@ See v0.13 release notes for more information.
         clearInterval(state.intervalHandles.heartbeat);
         connect();
     }
-    function tryFlushing() {
-        if (state.socket == null) {
+    function applyAndSendOfflineOps() {
+        if (state.offlineOperations.size === 0) {
             return;
         }
-        if (state.socket.readyState !== WebSocket.OPEN) {
+        const messages = [];
+        const ops = Array.from(state.offlineOperations.values());
+        const result = apply(ops, true);
+        messages.push({
+            type: ClientMessageType.UpdateStorage,
+            ops: ops,
+        });
+        notify(result.updates);
+        effects.send(messages);
+    }
+    function tryFlushing() {
+        const storageOps = state.buffer.storageOperations;
+        if (storageOps.length > 0) {
+            storageOps.forEach((op) => {
+                state.offlineOperations.set(op.opId, op);
+            });
+        }
+        if (state.socket == null || state.socket.readyState !== WebSocket.OPEN) {
+            state.buffer.storageOperations = [];
             return;
         }
         const now = Date.now();
@@ -792,7 +826,7 @@ See v0.13 release notes for more information.
             return;
         }
         state.isHistoryPaused = false;
-        const result = apply(historyItem);
+        const result = apply(historyItem, true);
         notify(result.updates);
         state.redoStack.push(result.reverse);
         for (const op of historyItem) {
@@ -811,7 +845,7 @@ See v0.13 release notes for more information.
             return;
         }
         state.isHistoryPaused = false;
-        const result = apply(historyItem);
+        const result = apply(historyItem, true);
         notify(result.updates);
         state.undoStack.push(result.reverse);
         for (const op of historyItem) {
@@ -834,8 +868,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);
             }
@@ -845,7 +882,7 @@ See v0.13 release notes for more information.
                 reverseOps: [],
                 updates: {
                     others: [],
-                    nodes: new Set(),
+                    storageUpdates: new Map(),
                     presence: false,
                 },
             };
@@ -863,6 +900,16 @@ See v0.13 release notes for more information.
         }
         state.pausedHistory = [];
     }
+    function simulateSocketClose() {
+        if (state.socket) {
+            state.socket.close();
+        }
+    }
+    function simulateSendCloseEvent(event) {
+        if (state.socket) {
+            onClose(event);
+        }
+    }
     return {
         // Internal
         onOpen,
@@ -871,6 +918,9 @@ See v0.13 release notes for more information.
         authenticationSuccess,
         heartbeat,
         onNavigatorOnline,
+        // Internal dev tools
+        simulateSocketClose,
+        simulateSendCloseEvent,
         // onWakeUp,
         onVisibilityChange,
         getUndoStack: () => state.undoStack,
@@ -902,6 +952,7 @@ See v0.13 release notes for more information.
 export function defaultState(me, defaultStorageRoot) {
     return {
         connection: { state: "closed" },
+        lastConnectionId: null,
         socket: null,
         listeners: {
             event: [],
@@ -943,9 +994,14 @@ 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(),
     };
 }
 export function createRoom(name, options) {
@@ -991,6 +1047,11 @@ export function createRoom(name, options) {
             pause: machine.pauseHistory,
             resume: machine.resumeHistory,
         },
+        // @ts-ignore
+        internalDevTools: {
+            closeWebsocket: machine.simulateSocketClose,
+            sendCloseEvent: machine.simulateSendCloseEvent,
+        },
     };
     return {
         connect: machine.connect,

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 = {
     /**

package/lib/esm/utils.d.ts

@@ -1,8 +1,11 @@
 import { AbstractCrdt, Doc } from "./AbstractCrdt";
-import { SerializedCrdtWithId } from "./live";
+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;
 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;

package/lib/esm/utils.js

@@ -1,4 +1,4 @@
-import { CrdtType, } from "./live";
+import { CrdtType, OpType, } from "./live";
 import { LiveList } from "./LiveList";
 import { LiveMap } from "./LiveMap";
 import { LiveObject } from "./LiveObject";
@@ -64,3 +64,101 @@ export function selfOrRegister(obj) {
         return new LiveRegister(obj);
     }
 }
+export function getTreesDiffOperations(currentItems, newItems) {
+    const ops = [];
+    currentItems.forEach((_, id) => {
+        if (!newItems.get(id)) {
+            // Delete crdt
+            ops.push({
+                type: OpType.DeleteCrdt,
+                id: id,
+            });
+        }
+    });
+    newItems.forEach((crdt, id) => {
+        const currentCrdt = currentItems.get(id);
+        if (currentCrdt) {
+            if (crdt.type === CrdtType.Object) {
+                if (JSON.stringify(crdt.data) !==
+                    JSON.stringify(currentCrdt.data)) {
+                    ops.push({
+                        type: OpType.UpdateObject,
+                        id: id,
+                        data: crdt.data,
+                    });
+                }
+            }
+            if (crdt.parentKey !== currentCrdt.parentKey) {
+                ops.push({
+                    type: OpType.SetParentKey,
+                    id: id,
+                    parentKey: crdt.parentKey,
+                });
+            }
+        }
+        else {
+            // new Crdt
+            switch (crdt.type) {
+                case CrdtType.Register:
+                    ops.push({
+                        type: OpType.CreateRegister,
+                        id: id,
+                        parentId: crdt.parentId,
+                        parentKey: crdt.parentKey,
+                        data: crdt.data,
+                    });
+                    break;
+                case CrdtType.List:
+                    ops.push({
+                        type: OpType.CreateList,
+                        id: id,
+                        parentId: crdt.parentId,
+                        parentKey: crdt.parentKey,
+                    });
+                    break;
+                case CrdtType.Object:
+                    ops.push({
+                        type: OpType.CreateObject,
+                        id: id,
+                        parentId: crdt.parentId,
+                        parentKey: crdt.parentKey,
+                        data: crdt.data,
+                    });
+                    break;
+                case CrdtType.Map:
+                    ops.push({
+                        type: OpType.CreateMap,
+                        id: id,
+                        parentId: crdt.parentId,
+                        parentKey: crdt.parentKey,
+                    });
+                    break;
+            }
+        }
+    });
+    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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/client",
-  "version": "0.13.3",
+  "version": "0.15.0-alpha.2",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -38,4 +38,4 @@
     "url": "https://github.com/liveblocks/liveblocks.git",
     "directory": "packages/liveblocks"
   }
-}
+}

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

@@ -1,7 +0,0 @@
-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;