@liveblocks/client 0.13.2 → 0.14.0-beta.1

package/lib/esm/LiveObject.d.ts

@@ -1,5 +1,5 @@
 import { AbstractCrdt, Doc, ApplyResult } from "./AbstractCrdt";
-import { Op, SerializedCrdtWithId } from "./live";
+import { Op, SerializedCrdt, SerializedCrdtWithId } from "./live";
 /**
  * The LiveObject class is similar to a JavaScript object that is synchronized on all clients.
  * Keys should be a string, and values should be serializable to JSON.
@@ -11,13 +11,15 @@ export declare class LiveObject<T extends Record<string, any> = Record<string, a
     /**
      * INTERNAL
      */
-    _serialize(parentId?: string, parentKey?: string): Op[];
+    _serialize(parentId?: string, parentKey?: string, doc?: Doc): Op[];
     /**
      * INTERNAL
      */
-    static _deserialize([id, item]: SerializedCrdtWithId, parentToChildren: Map<string, SerializedCrdtWithId[]>, doc: Doc): LiveObject<{
-        [key: string]: any;
-    }>;
+    static _deserialize([id, item]: SerializedCrdtWithId, parentToChildren: Map<string, SerializedCrdtWithId[]>, doc: Doc): LiveObject<Record<string, any>>;
+    /**
+     * INTERNAL
+     */
+    static _deserializeChildren(object: LiveObject, parentToChildren: Map<string, SerializedCrdtWithId[]>, doc: Doc): LiveObject<Record<string, any>>;
     /**
      * INTERNAL
      */
@@ -25,11 +27,15 @@ export declare class LiveObject<T extends Record<string, any> = Record<string, a
     /**
      * INTERNAL
      */
-    _attachChild(id: string, key: keyof T, child: AbstractCrdt): ApplyResult;
+    _attachChild(id: string, key: keyof T, child: AbstractCrdt, isLocal: boolean): ApplyResult;
     /**
      * INTERNAL
      */
     _detachChild(child: AbstractCrdt): void;
+    /**
+     * INTERNAL
+     */
+    _detachChildren(): void;
     /**
      * INTERNAL
      */
@@ -37,7 +43,11 @@ export declare class LiveObject<T extends Record<string, any> = Record<string, a
     /**
      * INTERNAL
      */
-    _apply(op: Op): ApplyResult;
+    _apply(op: Op, isLocal: boolean): ApplyResult;
+    /**
+     * INTERNAL
+     */
+    _toSerializedCrdt(): SerializedCrdt;
     /**
      * Transform the LiveObject into a javascript object
      */

package/lib/esm/LiveObject.js

@@ -35,13 +35,14 @@ export class LiveObject extends AbstractCrdt {
     /**
      * INTERNAL
      */
-    _serialize(parentId, parentKey) {
+    _serialize(parentId, parentKey, doc) {
         if (this._id == null) {
             throw new Error("Cannot serialize item is not attached");
         }
         const ops = [];
         const op = {
             id: this._id,
+            opId: doc === null || doc === void 0 ? void 0 : doc.generateOpId(),
             type: OpType.CreateObject,
             parentId,
             parentKey,
@@ -50,7 +51,7 @@ export class LiveObject extends AbstractCrdt {
         ops.push(op);
         for (const [key, value] of __classPrivateFieldGet(this, _LiveObject_map, "f")) {
             if (value instanceof AbstractCrdt) {
-                ops.push(...value._serialize(this._id, key));
+                ops.push(...value._serialize(this._id, key, doc));
             }
             else {
                 op.data[key] = value;
@@ -67,7 +68,13 @@ export class LiveObject extends AbstractCrdt {
         }
         const object = new LiveObject(item.data);
         object._attach(id, doc);
-        const children = parentToChildren.get(id);
+        return this._deserializeChildren(object, parentToChildren, doc);
+    }
+    /**
+     * INTERNAL
+     */
+    static _deserializeChildren(object, parentToChildren, doc) {
+        const children = parentToChildren.get(object._id);
         if (children == null) {
             return object;
         }
@@ -96,7 +103,7 @@ export class LiveObject extends AbstractCrdt {
     /**
      * INTERNAL
      */
-    _attachChild(id, key, child) {
+    _attachChild(id, key, child, isLocal) {
         if (this._doc == null) {
             throw new Error("Can't attach child if doc is not present");
         }
@@ -138,6 +145,15 @@ export class LiveObject extends AbstractCrdt {
             child._detach();
         }
     }
+    /**
+     * INTERNAL
+     */
+    _detachChildren() {
+        for (const [key, value] of __classPrivateFieldGet(this, _LiveObject_map, "f")) {
+            __classPrivateFieldGet(this, _LiveObject_map, "f").delete(key);
+            value._detach();
+        }
+    }
     /**
      * INTERNAL
      */
@@ -152,14 +168,26 @@ export class LiveObject extends AbstractCrdt {
     /**
      * INTERNAL
      */
-    _apply(op) {
+    _apply(op, isLocal) {
         if (op.type === OpType.UpdateObject) {
-            return __classPrivateFieldGet(this, _LiveObject_instances, "m", _LiveObject_applyUpdate).call(this, op);
+            return __classPrivateFieldGet(this, _LiveObject_instances, "m", _LiveObject_applyUpdate).call(this, op, isLocal);
         }
         else if (op.type === OpType.DeleteObjectKey) {
             return __classPrivateFieldGet(this, _LiveObject_instances, "m", _LiveObject_applyDeleteObjectKey).call(this, op);
         }
-        return super._apply(op);
+        return super._apply(op, isLocal);
+    }
+    /**
+     * INTERNAL
+     */
+    _toSerializedCrdt() {
+        var _a;
+        return {
+            type: CrdtType.Object,
+            parentId: (_a = this._parent) === null || _a === void 0 ? void 0 : _a._id,
+            parentKey: this._parentKey,
+            data: this.toObject(),
+        };
     }
     /**
      * Transform the LiveObject into a javascript object
@@ -215,7 +243,14 @@ export class LiveObject extends AbstractCrdt {
             ];
         }
         __classPrivateFieldGet(this, _LiveObject_map, "f").delete(keyAsString);
-        this._doc.dispatch([{ type: OpType.DeleteObjectKey, key: keyAsString, id: this._id }], reverse, [this]);
+        this._doc.dispatch([
+            {
+                type: OpType.DeleteObjectKey,
+                key: keyAsString,
+                id: this._id,
+                opId: this._doc.generateOpId(),
+            },
+        ], reverse, [this]);
     }
     /**
      * Adds or updates multiple properties at once with an object.
@@ -262,7 +297,7 @@ export class LiveObject extends AbstractCrdt {
             if (newValue instanceof AbstractCrdt) {
                 newValue._setParentLink(this, key);
                 newValue._attach(this._doc.generateId(), this._doc);
-                ops.push(...newValue._serialize(this._id, key));
+                ops.push(...newValue._serialize(this._id, key, this._doc));
             }
             else {
                 updatedProps[key] = newValue;
@@ -283,7 +318,7 @@ export class LiveObject extends AbstractCrdt {
         this._doc.dispatch(ops, reverseOps, [this]);
     }
 }
-_LiveObject_map = new WeakMap(), _LiveObject_propToLastUpdate = new WeakMap(), _LiveObject_instances = new WeakSet(), _LiveObject_applyUpdate = function _LiveObject_applyUpdate(op) {
+_LiveObject_map = new WeakMap(), _LiveObject_propToLastUpdate = new WeakMap(), _LiveObject_instances = new WeakSet(), _LiveObject_applyUpdate = function _LiveObject_applyUpdate(op, isLocal) {
     let isModified = false;
     const reverse = [];
     const reverseUpdate = {
@@ -305,11 +340,6 @@ _LiveObject_map = new WeakMap(), _LiveObject_propToLastUpdate = new WeakMap(), _
             reverse.push({ type: OpType.DeleteObjectKey, id: this._id, key });
         }
     }
-    let isLocal = false;
-    if (op.opId == null) {
-        isLocal = true;
-        op.opId = this._doc.generateOpId();
-    }
     for (const key in op.data) {
         if (isLocal) {
             __classPrivateFieldGet(this, _LiveObject_propToLastUpdate, "f").set(key, op.opId);

package/lib/esm/LiveRegister.d.ts

@@ -1,5 +1,5 @@
 import { AbstractCrdt, Doc, ApplyResult } from "./AbstractCrdt";
-import { SerializedCrdtWithId, Op } from "./live";
+import { SerializedCrdtWithId, Op, SerializedCrdt } from "./live";
 /**
  * INTERNAL
  */
@@ -14,8 +14,12 @@ export declare class LiveRegister<TValue = any> extends AbstractCrdt {
     /**
      * INTERNAL
      */
-    _serialize(parentId: string, parentKey: string): Op[];
-    _attachChild(id: string, key: string, crdt: AbstractCrdt): ApplyResult;
+    _serialize(parentId: string, parentKey: string, doc?: Doc): Op[];
+    /**
+     * INTERNAL
+     */
+    _toSerializedCrdt(): SerializedCrdt;
+    _attachChild(id: string, key: string, crdt: AbstractCrdt, isLocal: boolean): ApplyResult;
     _detachChild(crdt: AbstractCrdt): void;
-    _apply(op: Op): ApplyResult;
+    _apply(op: Op, isLocal: boolean): ApplyResult;
 }

package/lib/esm/LiveRegister.js

@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _LiveRegister_data;
 import { AbstractCrdt } from "./AbstractCrdt";
-import { CrdtType, OpType } from "./live";
+import { CrdtType, OpType, } from "./live";
 /**
  * INTERNAL
  */
@@ -38,13 +38,14 @@ export class LiveRegister extends AbstractCrdt {
     /**
      * INTERNAL
      */
-    _serialize(parentId, parentKey) {
+    _serialize(parentId, parentKey, doc) {
         if (this._id == null || parentId == null || parentKey == null) {
             throw new Error("Cannot serialize register if parentId or parentKey is undefined");
         }
         return [
             {
                 type: OpType.CreateRegister,
+                opId: doc === null || doc === void 0 ? void 0 : doc.generateOpId(),
                 id: this._id,
                 parentId,
                 parentKey,
@@ -52,14 +53,26 @@ export class LiveRegister extends AbstractCrdt {
             },
         ];
     }
-    _attachChild(id, key, crdt) {
+    /**
+     * INTERNAL
+     */
+    _toSerializedCrdt() {
+        var _a;
+        return {
+            type: CrdtType.Register,
+            parentId: (_a = this._parent) === null || _a === void 0 ? void 0 : _a._id,
+            parentKey: this._parentKey,
+            data: this.data,
+        };
+    }
+    _attachChild(id, key, crdt, isLocal) {
         throw new Error("Method not implemented.");
     }
     _detachChild(crdt) {
         throw new Error("Method not implemented.");
     }
-    _apply(op) {
-        return super._apply(op);
+    _apply(op, isLocal) {
+        return super._apply(op, isLocal);
     }
 }
 _LiveRegister_data = new WeakMap();

package/lib/esm/live.d.ts

@@ -122,6 +122,7 @@ export declare type UpdateObjectOp = {
     };
 };
 export declare type CreateObjectOp = {
+    opId?: string;
     id: string;
     type: OpType.CreateObject;
     parentId?: string;
@@ -131,18 +132,21 @@ export declare type CreateObjectOp = {
     };
 };
 export declare type CreateListOp = {
+    opId?: string;
     id: string;
     type: OpType.CreateList;
     parentId: string;
     parentKey: string;
 };
 export declare type CreateMapOp = {
+    opId?: string;
     id: string;
     type: OpType.CreateMap;
     parentId: string;
     parentKey: string;
 };
 export declare type CreateRegisterOp = {
+    opId?: string;
     id: string;
     type: OpType.CreateRegister;
     parentId: string;
@@ -150,15 +154,18 @@ export declare type CreateRegisterOp = {
     data: any;
 };
 export declare type DeleteCrdtOp = {
+    opId?: string;
     id: string;
     type: OpType.DeleteCrdt;
 };
 export declare type SetParentKeyOp = {
+    opId?: string;
     id: string;
     type: OpType.SetParentKey;
     parentKey: string;
 };
 export declare type DeleteObjectKeyOp = {
+    opId?: string;
     id: string;
     type: OpType.DeleteObjectKey;
     key: string;

package/lib/esm/room.d.ts

@@ -11,6 +11,7 @@ declare type HistoryItem = Array<Op | {
 declare type IdFactory = () => string;
 export declare type State = {
     connection: Connection;
+    lastConnectionId: number | null;
     socket: WebSocket | null;
     lastFlushTime: number;
     buffer: {
@@ -62,6 +63,7 @@ export declare type State = {
             nodes: Set<AbstractCrdt>;
         };
     };
+    offlineOperations: Map<string, Op>;
 };
 export declare type Effects = {
     authenticate(): void;
@@ -89,6 +91,12 @@ export declare function makeStateMachine(state: State, context: Context, mockedE
     authenticationSuccess: (token: AuthenticationToken, socket: WebSocket) => void;
     heartbeat: () => void;
     onNavigatorOnline: () => void;
+    simulateSocketClose: () => void;
+    simulateSendCloseEvent: (event: {
+        code: number;
+        wasClean: boolean;
+        reason: any;
+    }) => void;
     onVisibilityChange: (visibilityState: VisibilityState) => void;
     getUndoStack: () => HistoryItem[];
     getItemsCount: () => number;

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 } from "./utils";
 import auth, { parseToken } from "./authentication";
 import { ClientMessageType, ServerMessageType, OpType, } from "./live";
 import { LiveMap } from "./LiveMap";
@@ -107,18 +107,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) {
@@ -139,6 +144,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,
@@ -227,7 +249,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++}`;
@@ -235,7 +260,7 @@ 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 },
@@ -262,7 +287,11 @@ 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.reverse.unshift(...applyOpResult.reverse);
@@ -271,7 +300,10 @@ export function makeStateMachine(state, context, mockedEffects) {
         }
         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:
@@ -280,7 +312,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);
@@ -308,28 +340,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 };
@@ -549,12 +581,13 @@ 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);
+                    const applyResult = apply(subMessage.ops, false);
                     for (const node of applyResult.updates.nodes) {
                         updates.nodes.add(node);
                     }
@@ -618,6 +651,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 {
@@ -657,11 +694,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();
@@ -779,7 +834,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) {
@@ -798,7 +853,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) {
@@ -850,6 +905,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,
@@ -858,6 +923,9 @@ See v0.13 release notes for more information.
         authenticationSuccess,
         heartbeat,
         onNavigatorOnline,
+        // Internal dev tools
+        simulateSocketClose,
+        simulateSendCloseEvent,
         // onWakeUp,
         onVisibilityChange,
         getUndoStack: () => state.undoStack,
@@ -889,6 +957,7 @@ See v0.13 release notes for more information.
 export function defaultState(me, defaultStorageRoot) {
     return {
         connection: { state: "closed" },
+        lastConnectionId: null,
         socket: null,
         listeners: {
             event: [],
@@ -933,6 +1002,7 @@ export function defaultState(me, defaultStorageRoot) {
             updates: { nodes: new Set(), presence: false, others: [] },
             reverseOps: [],
         },
+        offlineOperations: new Map(),
     };
 }
 export function createRoom(name, options) {
@@ -978,6 +1048,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/utils.d.ts

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