@liveblocks/client 0.12.3 → 0.13.2

package/lib/esm/room.js

@@ -7,10 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { remove } from "./utils";
+import { isSameNodeOrChildOf, remove } from "./utils";
 import auth, { parseToken } from "./authentication";
-import { ClientMessageType, ServerMessageType, } from "./live";
-import Storage from "./storage";
+import { ClientMessageType, ServerMessageType, OpType, } from "./live";
+import { LiveMap } from "./LiveMap";
+import { LiveObject } from "./LiveObject";
+import { LiveList } from "./LiveList";
+import { AbstractCrdt } from "./AbstractCrdt";
+import { LiveRegister } from "./LiveRegister";
 const BACKOFF_RETRY_DELAYS = [250, 500, 1000, 2000, 4000, 8000, 10000];
 const HEARTBEAT_INTERVAL = 30000;
 // const WAKE_UP_CHECK_INTERVAL = 2000;
@@ -82,13 +86,275 @@ export function makeStateMachine(state, context, mockedEffects) {
             return setTimeout(connect, delay);
         },
     };
-    function subscribe(type, listener) {
-        if (!isValidRoomEventType(type)) {
-            throw new Error(`"${type}" is not a valid event name`);
+    function genericSubscribe(callback) {
+        state.listeners.storage.push(callback);
+        return () => remove(state.listeners.storage, callback);
+    }
+    function crdtSubscribe(crdt, innerCallback, options) {
+        const cb = (updates) => {
+            const relatedUpdates = [];
+            for (const update of updates) {
+                if ((options === null || options === void 0 ? void 0 : options.isDeep) && isSameNodeOrChildOf(update.node, crdt)) {
+                    relatedUpdates.push(update);
+                }
+                else if (update.node._id === crdt._id) {
+                    innerCallback(update.node);
+                }
+            }
+            if ((options === null || options === void 0 ? void 0 : options.isDeep) && relatedUpdates.length > 0) {
+                innerCallback(relatedUpdates);
+            }
+        };
+        return genericSubscribe(cb);
+    }
+    function createRootFromMessage(message) {
+        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");
+        }
+        const parentToChildren = new Map();
+        let root = null;
+        for (const tuple of items) {
+            const parentId = tuple[1].parentId;
+            if (parentId == null) {
+                root = tuple;
+            }
+            else {
+                const children = parentToChildren.get(parentId);
+                if (children != null) {
+                    children.push(tuple);
+                }
+                else {
+                    parentToChildren.set(parentId, [tuple]);
+                }
+            }
+        }
+        if (root == null) {
+            throw new Error("Root can't be null");
+        }
+        return LiveObject._deserialize(root, parentToChildren, {
+            addItem,
+            deleteItem,
+            generateId,
+            generateOpId,
+            dispatch: storageDispatch,
+        });
+    }
+    function addItem(id, item) {
+        state.items.set(id, item);
+    }
+    function deleteItem(id) {
+        state.items.delete(id);
+    }
+    function getItem(id) {
+        return state.items.get(id);
+    }
+    function addToUndoStack(historyItem) {
+        // If undo stack is too large, we remove the older item
+        if (state.undoStack.length >= 50) {
+            state.undoStack.shift();
+        }
+        if (state.isHistoryPaused) {
+            state.pausedHistory.unshift(...historyItem);
+        }
+        else {
+            state.undoStack.push(historyItem);
+        }
+    }
+    function storageDispatch(ops, reverse, modified) {
+        if (state.isBatching) {
+            state.batch.ops.push(...ops);
+            for (const item of modified) {
+                state.batch.updates.nodes.add(item);
+            }
+            state.batch.reverseOps.push(...reverse);
+        }
+        else {
+            addToUndoStack(reverse);
+            state.redoStack = [];
+            dispatch(ops);
+            notify({ nodes: new Set(modified) });
+        }
+    }
+    function notify({ nodes = new Set(), presence = false, others = [], }) {
+        if (others.length > 0) {
+            state.others = makeOthers(state.users);
+            for (const event of others) {
+                for (const listener of state.listeners["others"]) {
+                    listener(state.others, event);
+                }
+            }
+        }
+        if (presence) {
+            for (const listener of state.listeners["my-presence"]) {
+                listener(state.me);
+            }
+        }
+        if (nodes.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,
+                        };
+                    }
+                }));
+            }
+        }
+    }
+    function getConnectionId() {
+        if (state.connection.state === "open" ||
+            state.connection.state === "connecting") {
+            return state.connection.id;
+        }
+        throw new Error("Internal. Tried to get connection id but connection is not open");
+    }
+    function generateId() {
+        return `${getConnectionId()}:${state.clock++}`;
+    }
+    function generateOpId() {
+        return `${getConnectionId()}:${state.opClock++}`;
+    }
+    function apply(item) {
+        const result = {
+            reverse: [],
+            updates: { nodes: new Set(), presence: false },
+        };
+        for (const op of item) {
+            if (op.type === "presence") {
+                const reverse = {
+                    type: "presence",
+                    data: {},
+                };
+                for (const key in op.data) {
+                    reverse.data[key] = state.me[key];
+                }
+                state.me = Object.assign(Object.assign({}, state.me), op.data);
+                if (state.buffer.presence == null) {
+                    state.buffer.presence = op.data;
+                }
+                else {
+                    for (const key in op.data) {
+                        state.buffer.presence[key] = op.data;
+                    }
+                }
+                result.reverse.unshift(reverse);
+                result.updates.presence = true;
+            }
+            else {
+                const applyOpResult = applyOp(op);
+                if (applyOpResult.modified) {
+                    result.updates.nodes.add(applyOpResult.modified);
+                    result.reverse.unshift(...applyOpResult.reverse);
+                }
+            }
+        }
+        return result;
+    }
+    function applyOp(op) {
+        switch (op.type) {
+            case OpType.DeleteObjectKey:
+            case OpType.UpdateObject:
+            case OpType.DeleteCrdt: {
+                const item = state.items.get(op.id);
+                if (item == null) {
+                    return { modified: false };
+                }
+                return item._apply(op);
+            }
+            case OpType.SetParentKey: {
+                const item = state.items.get(op.id);
+                if (item == null) {
+                    return { modified: false };
+                }
+                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,
+                    };
+                }
+                return { modified: false };
+            }
+            case OpType.CreateObject: {
+                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 LiveObject(op.data));
+            }
+            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());
+            }
+            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));
+            }
+            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());
+            }
         }
-        state.listeners[type].push(listener);
+        return { modified: false };
+    }
+    function subscribe(firstParam, listener, options) {
+        if (firstParam instanceof AbstractCrdt) {
+            return crdtSubscribe(firstParam, listener, options);
+        }
+        else if (typeof firstParam === "function") {
+            return genericSubscribe(firstParam);
+        }
+        else if (!isValidRoomEventType(firstParam)) {
+            throw new Error(`"${firstParam}" is not a valid event name`);
+        }
+        state.listeners[firstParam].push(listener);
+        return () => {
+            const callbacks = state.listeners[firstParam];
+            remove(callbacks, listener);
+        };
     }
     function unsubscribe(event, callback) {
+        console.warn(`unsubscribe is depreacted and will be removed in a future version.
+use the callback returned by subscribe instead.
+See v0.13 release notes for more information.
+`);
         if (!isValidRoomEventType(event)) {
             throw new Error(`"${event}" is not a valid event name`);
         }
@@ -120,20 +386,28 @@ export function makeStateMachine(state, context, mockedEffects) {
         updateConnection({ state: "authenticating" });
         effects.authenticate();
     }
-    function updatePresence(overrides) {
-        const newPresence = Object.assign(Object.assign({}, state.me), overrides);
-        if (state.flushData.presence == null) {
-            state.flushData.presence = overrides;
+    function updatePresence(overrides, options) {
+        const oldValues = {};
+        if (state.buffer.presence == null) {
+            state.buffer.presence = {};
         }
-        else {
-            for (const key in overrides) {
-                state.flushData.presence[key] = overrides[key];
+        for (const key in overrides) {
+            state.buffer.presence[key] = overrides[key];
+            oldValues[key] = state.me[key];
+        }
+        state.me = Object.assign(Object.assign({}, state.me), overrides);
+        if (state.isBatching) {
+            if (options === null || options === void 0 ? void 0 : options.addToHistory) {
+                state.batch.reverseOps.push({ type: "presence", data: oldValues });
             }
+            state.batch.updates.presence = true;
         }
-        state.me = newPresence;
-        tryFlushing();
-        for (const listener of state.listeners["my-presence"]) {
-            listener(state.me);
+        else {
+            tryFlushing();
+            if (options === null || options === void 0 ? void 0 : options.addToHistory) {
+                addToUndoStack([{ type: "presence", data: oldValues }]);
+            }
+            notify({ presence: true });
         }
     }
     function authenticationSuccess(token, socket) {
@@ -174,25 +448,20 @@ export function makeStateMachine(state, context, mockedEffects) {
                 presence: Object.assign(Object.assign({}, user.presence), message.data),
             };
         }
-        updateUsers({
+        return {
             type: "update",
             updates: message.data,
             user: state.users[message.actor],
-        });
-    }
-    function updateUsers(event) {
-        state.others = makeOthers(state.users);
-        for (const listener of state.listeners["others"]) {
-            listener(state.others, event);
-        }
+        };
     }
     function onUserLeftMessage(message) {
         const userLeftMessage = message;
         const user = state.users[userLeftMessage.actor];
         if (user) {
             delete state.users[userLeftMessage.actor];
-            updateUsers({ type: "leave", user });
+            return { type: "leave", user };
         }
+        return null;
     }
     function onRoomStateMessage(message) {
         const newUsers = {};
@@ -206,7 +475,7 @@ export function makeStateMachine(state, context, mockedEffects) {
             };
         }
         state.users = newUsers;
-        updateUsers({ type: "reset" });
+        return { type: "reset" };
     }
     function onNavigatorOnline() {
         if (state.connection.state === "unavailable") {
@@ -225,17 +494,17 @@ export function makeStateMachine(state, context, mockedEffects) {
             info: message.info,
             id: message.id,
         };
-        updateUsers({ type: "enter", user: state.users[message.actor] });
         if (state.me) {
             // Send current presence to new user
             // TODO: Consider storing it on the backend
-            state.flushData.messages.push({
+            state.buffer.messages.push({
                 type: ClientMessageType.UpdatePresence,
                 data: state.me,
                 targetActor: message.actor,
             });
             tryFlushing();
         }
+        return { type: "enter", user: state.users[message.actor] };
     }
     function onMessage(event) {
         if (event.data === "pong") {
@@ -243,29 +512,57 @@ export function makeStateMachine(state, context, mockedEffects) {
             return;
         }
         const message = JSON.parse(event.data);
-        switch (message.type) {
-            case ServerMessageType.UserJoined: {
-                onUserJoinedMessage(message);
-                break;
-            }
-            case ServerMessageType.UpdatePresence: {
-                onUpdatePresenceMessage(message);
-                break;
-            }
-            case ServerMessageType.Event: {
-                onEvent(message);
-                break;
-            }
-            case ServerMessageType.UserLeft: {
-                onUserLeftMessage(message);
-                break;
-            }
-            case ServerMessageType.RoomState: {
-                onRoomStateMessage(message);
-                break;
+        let subMessages = [];
+        if (Array.isArray(message)) {
+            subMessages = message;
+        }
+        else {
+            subMessages.push(message);
+        }
+        const updates = {
+            nodes: new Set(),
+            others: [],
+        };
+        for (const subMessage of subMessages) {
+            switch (subMessage.type) {
+                case ServerMessageType.UserJoined: {
+                    updates.others.push(onUserJoinedMessage(message));
+                    break;
+                }
+                case ServerMessageType.UpdatePresence: {
+                    updates.others.push(onUpdatePresenceMessage(subMessage));
+                    break;
+                }
+                case ServerMessageType.Event: {
+                    onEvent(subMessage);
+                    break;
+                }
+                case ServerMessageType.UserLeft: {
+                    const event = onUserLeftMessage(subMessage);
+                    if (event) {
+                        updates.others.push(event);
+                    }
+                    break;
+                }
+                case ServerMessageType.RoomState: {
+                    updates.others.push(onRoomStateMessage(subMessage));
+                    break;
+                }
+                case ServerMessageType.InitialStorageState: {
+                    createRootFromMessage(subMessage);
+                    _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);
+                    }
+                    break;
+                }
             }
         }
-        storage.onMessage(message);
+        notify(updates);
     }
     // function onWakeUp() {
     //   // Sometimes, the browser can put the webpage on pause (computer is on sleep mode for example)
@@ -285,11 +582,12 @@ export function makeStateMachine(state, context, mockedEffects) {
         }
         clearTimeout(state.timeoutHandles.reconnect);
         state.users = {};
-        updateUsers({ type: "reset" });
+        notify({ others: [{ type: "reset" }] });
         if (event.code >= 4000 && event.code <= 4100) {
             updateConnection({ state: "failed" });
             const error = new LiveblocksError(event.reason, event.code);
             for (const listener of state.listeners.error) {
+                console.error(`Liveblocks WebSocket connection closed. Reason: ${error.message} (code: ${error.code})`);
                 listener(error);
             }
         }
@@ -374,7 +672,7 @@ export function makeStateMachine(state, context, mockedEffects) {
                 return;
             }
             effects.send(messages);
-            state.flushData = {
+            state.buffer = {
                 messages: [],
                 storageOperations: [],
                 presence: null,
@@ -390,19 +688,19 @@ export function makeStateMachine(state, context, mockedEffects) {
     }
     function flushDataToMessages(state) {
         const messages = [];
-        if (state.flushData.presence) {
+        if (state.buffer.presence) {
             messages.push({
                 type: ClientMessageType.UpdatePresence,
-                data: state.flushData.presence,
+                data: state.buffer.presence,
             });
         }
-        for (const event of state.flushData.messages) {
+        for (const event of state.buffer.messages) {
             messages.push(event);
         }
-        if (state.flushData.storageOperations.length > 0) {
+        if (state.buffer.storageOperations.length > 0) {
             messages.push({
                 type: ClientMessageType.UpdateStorage,
-                ops: state.flushData.storageOperations,
+                ops: state.buffer.storageOperations,
             });
         }
         return messages;
@@ -424,7 +722,7 @@ export function makeStateMachine(state, context, mockedEffects) {
         clearTimeout(state.timeoutHandles.pongTimeout);
         clearInterval(state.intervalHandles.heartbeat);
         state.users = {};
-        updateUsers({ type: "reset" });
+        notify({ others: [{ type: "reset" }] });
         clearListeners();
     }
     function clearListeners() {
@@ -442,44 +740,115 @@ export function makeStateMachine(state, context, mockedEffects) {
         if (state.socket == null) {
             return;
         }
-        state.flushData.messages.push({
+        state.buffer.messages.push({
             type: ClientMessageType.ClientEvent,
             event,
         });
         tryFlushing();
     }
     function dispatch(ops) {
-        state.flushData.storageOperations.push(...ops);
+        state.buffer.storageOperations.push(...ops);
         tryFlushing();
     }
-    const storage = new Storage({
-        fetchStorage: () => {
-            state.flushData.messages.push({ type: ClientMessageType.FetchStorage });
-            tryFlushing();
-        },
-        dispatch,
-        getConnectionId: () => {
-            const me = getSelf();
-            if (me) {
-                return me.connectionId;
-            }
-            throw new Error("Unexpected");
-        },
-        defaultRoot: state.defaultStorageRoot,
-    });
+    let _getInitialStatePromise = null;
+    let _getInitialStateResolver = null;
     function getStorage() {
         return __awaiter(this, void 0, void 0, function* () {
-            const doc = yield storage.getDocument();
+            if (state.root) {
+                return {
+                    root: state.root,
+                };
+            }
+            if (_getInitialStatePromise == null) {
+                state.buffer.messages.push({ type: ClientMessageType.FetchStorage });
+                tryFlushing();
+                _getInitialStatePromise = new Promise((resolve) => (_getInitialStateResolver = resolve));
+            }
+            yield _getInitialStatePromise;
             return {
-                root: doc.root,
+                root: state.root,
             };
         });
     }
     function undo() {
-        storage.undo();
+        if (state.isBatching) {
+            throw new Error("undo is not allowed during a batch");
+        }
+        const historyItem = state.undoStack.pop();
+        if (historyItem == null) {
+            return;
+        }
+        state.isHistoryPaused = false;
+        const result = apply(historyItem);
+        notify(result.updates);
+        state.redoStack.push(result.reverse);
+        for (const op of historyItem) {
+            if (op.type !== "presence") {
+                state.buffer.storageOperations.push(op);
+            }
+        }
+        tryFlushing();
     }
     function redo() {
-        storage.redo();
+        if (state.isBatching) {
+            throw new Error("redo is not allowed during a batch");
+        }
+        const historyItem = state.redoStack.pop();
+        if (historyItem == null) {
+            return;
+        }
+        state.isHistoryPaused = false;
+        const result = apply(historyItem);
+        notify(result.updates);
+        state.undoStack.push(result.reverse);
+        for (const op of historyItem) {
+            if (op.type !== "presence") {
+                state.buffer.storageOperations.push(op);
+            }
+        }
+        tryFlushing();
+    }
+    function batch(callback) {
+        if (state.isBatching) {
+            throw new Error("batch should not be called during a batch");
+        }
+        state.isBatching = true;
+        try {
+            callback();
+        }
+        finally {
+            state.isBatching = false;
+            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) {
+                dispatch(state.batch.ops);
+            }
+            notify(state.batch.updates);
+            state.batch = {
+                ops: [],
+                reverseOps: [],
+                updates: {
+                    others: [],
+                    nodes: new Set(),
+                    presence: false,
+                },
+            };
+            tryFlushing();
+        }
+    }
+    function pauseHistory() {
+        state.pausedHistory = [];
+        state.isHistoryPaused = true;
+    }
+    function resumeHistory() {
+        state.isHistoryPaused = false;
+        if (state.pausedHistory.length > 0) {
+            addToUndoStack(state.pausedHistory);
+        }
+        state.pausedHistory = [];
     }
     return {
         // Internal
@@ -491,6 +860,8 @@ export function makeStateMachine(state, context, mockedEffects) {
         onNavigatorOnline,
         // onWakeUp,
         onVisibilityChange,
+        getUndoStack: () => state.undoStack,
+        getItemsCount: () => state.items.size,
         // Core
         connect,
         disconnect,
@@ -499,8 +870,11 @@ export function makeStateMachine(state, context, mockedEffects) {
         // Presence
         updatePresence,
         broadcastEvent,
+        batch,
         undo,
         redo,
+        pauseHistory,
+        resumeHistory,
         getStorage,
         selectors: {
             // Core
@@ -522,6 +896,7 @@ export function defaultState(me, defaultStorageRoot) {
             "my-presence": [],
             error: [],
             connection: [],
+            storage: [],
         },
         numberOfRetry: 0,
         lastFlushTime: 0,
@@ -530,7 +905,7 @@ export function defaultState(me, defaultStorageRoot) {
             reconnect: 0,
             pongTimeout: 0,
         },
-        flushData: {
+        buffer: {
             presence: me == null ? {} : me,
             messages: [],
             storageOperations: [],
@@ -543,11 +918,26 @@ export function defaultState(me, defaultStorageRoot) {
         others: makeOthers({}),
         defaultStorageRoot,
         idFactory: null,
+        // Storage
+        clock: 0,
+        opClock: 0,
+        items: new Map(),
+        root: undefined,
+        undoStack: [],
+        redoStack: [],
+        isHistoryPaused: false,
+        pausedHistory: [],
+        isBatching: false,
+        batch: {
+            ops: [],
+            updates: { nodes: new Set(), presence: false, others: [] },
+            reverseOps: [],
+        },
     };
 }
 export function createRoom(name, options) {
     const throttleDelay = options.throttle || 100;
-    const liveblocksServer = options.liveblocksServer || "wss://liveblocks.net/v4";
+    const liveblocksServer = options.liveblocksServer || "wss://liveblocks.net/v5";
     let authEndpoint;
     if (options.authEndpoint) {
         authEndpoint = options.authEndpoint;
@@ -581,8 +971,13 @@ export function createRoom(name, options) {
         getOthers: machine.selectors.getOthers,
         broadcastEvent: machine.broadcastEvent,
         getStorage: machine.getStorage,
-        undo: machine.undo,
-        redo: machine.redo,
+        batch: machine.batch,
+        history: {
+            undo: machine.undo,
+            redo: machine.redo,
+            pause: machine.pauseHistory,
+            resume: machine.resumeHistory,
+        },
     };
     return {
         connect: machine.connect,