@liveblocks/client 0.17.7 → 0.17.8

package/index.js

@@ -161,7 +161,7 @@ function makeStateMachine(state, context, mockedEffects) {
           _state$pausedHistory,
           historyItem
         )
-      : state.undoStack.push(historyItem);
+      : (state.undoStack.push(historyItem), onHistoryChange());
   }
   function storageDispatch(ops, reverse, storageUpdates) {
     var _state$batch$ops, _state$batch$reverseO;
@@ -414,7 +414,7 @@ function makeStateMachine(state, context, mockedEffects) {
         var ws = WebSocketPolyfill || WebSocket;
         return function (token) {
           return new ws(
-            liveblocksServer + "/?token=" + token + "&version=0.17.7"
+            liveblocksServer + "/?token=" + token + "&version=0.17.8"
           );
         };
       })(
@@ -514,6 +514,18 @@ function makeStateMachine(state, context, mockedEffects) {
       (0, _step8.value)({ connectionId: message.actor, event: message.event });
     }
   }
+  function onHistoryChange() {
+    for (
+      var _step9,
+        _iterator9 = Json._createForOfIteratorHelperLoose(
+          state.listeners.history
+        );
+      !(_step9 = _iterator9()).done;
+
+    ) {
+      (0, _step9.value)({ canUndo: canUndo(), canRedo: canRedo() });
+    }
+  }
   function onUserJoinedMessage(message) {
     return (
       (state.users[message.actor] = {
@@ -552,13 +564,13 @@ function makeStateMachine(state, context, mockedEffects) {
             : Json.compact([parseServerMessage(data)]));
       if (null !== messages && 0 !== messages.length) {
         for (
-          var _step9,
+          var _step10,
             updates = { storageUpdates: new Map(), others: [] },
-            _iterator9 = Json._createForOfIteratorHelperLoose(messages);
-          !(_step9 = _iterator9()).done;
+            _iterator10 = Json._createForOfIteratorHelperLoose(messages);
+          !(_step10 = _iterator10()).done;
 
         ) {
-          var message = _step9.value;
+          var message = _step10.value;
           switch (message.type) {
             case Json.ServerMsgCode.USER_JOINED:
               updates.others.push(onUserJoinedMessage(message));
@@ -615,15 +627,15 @@ function makeStateMachine(state, context, mockedEffects) {
     ) {
       updateConnection({ state: "failed" });
       for (
-        var _step10,
+        var _step11,
           error = new LiveblocksError(event.reason, event.code),
-          _iterator10 = Json._createForOfIteratorHelperLoose(
+          _iterator11 = Json._createForOfIteratorHelperLoose(
             state.listeners.error
           );
-        !(_step10 = _iterator10()).done;
+        !(_step11 = _iterator11()).done;
 
       ) {
-        (0, _step10.value)(error);
+        (0, _step11.value)(error);
       }
       var _delay = getRetryDelay(!0);
       state.numberOfRetry++,
@@ -659,14 +671,14 @@ function makeStateMachine(state, context, mockedEffects) {
   function updateConnection(connection) {
     state.connection = connection;
     for (
-      var _step11,
-        _iterator11 = Json._createForOfIteratorHelperLoose(
+      var _step12,
+        _iterator12 = Json._createForOfIteratorHelperLoose(
           state.listeners.connection
         );
-      !(_step11 = _iterator11()).done;
+      !(_step12 = _iterator12()).done;
 
     ) {
-      (0, _step11.value)(connection.state);
+      (0, _step12.value)(connection.state);
     }
   }
   function getRetryDelay(slow) {
@@ -757,14 +769,14 @@ function makeStateMachine(state, context, mockedEffects) {
               data: state.buffer.presence,
             });
           for (
-            var _step12,
-              _iterator12 = Json._createForOfIteratorHelperLoose(
+            var _step13,
+              _iterator13 = Json._createForOfIteratorHelperLoose(
                 state.buffer.messages
               );
-            !(_step12 = _iterator12()).done;
+            !(_step13 = _iterator13()).done;
 
           ) {
-            var _event3 = _step12.value;
+            var _event3 = _step13.value;
             messages.push(_event3);
           }
           state.buffer.storageOperations.length > 0 &&
@@ -803,6 +815,12 @@ function makeStateMachine(state, context, mockedEffects) {
   }
   var _getInitialStatePromise = null,
     _getInitialStateResolver = null;
+  function canUndo() {
+    return state.undoStack.length > 0;
+  }
+  function canRedo() {
+    return state.redoStack.length > 0;
+  }
   return {
     onClose: onClose,
     onMessage: onMessage,
@@ -953,14 +971,16 @@ function makeStateMachine(state, context, mockedEffects) {
       if (null != historyItem) {
         state.isHistoryPaused = !1;
         var result = apply(historyItem, !0);
-        notify(result.updates), state.redoStack.push(result.reverse);
+        notify(result.updates),
+          state.redoStack.push(result.reverse),
+          onHistoryChange();
         for (
-          var _step13,
-            _iterator13 = Json._createForOfIteratorHelperLoose(historyItem);
-          !(_step13 = _iterator13()).done;
+          var _step14,
+            _iterator14 = Json._createForOfIteratorHelperLoose(historyItem);
+          !(_step14 = _iterator14()).done;
 
         ) {
-          var op = _step13.value;
+          var op = _step14.value;
           "presence" !== op.type && state.buffer.storageOperations.push(op);
         }
         tryFlushing();
@@ -973,19 +993,23 @@ function makeStateMachine(state, context, mockedEffects) {
       if (null != historyItem) {
         state.isHistoryPaused = !1;
         var result = apply(historyItem, !0);
-        notify(result.updates), state.undoStack.push(result.reverse);
+        notify(result.updates),
+          state.undoStack.push(result.reverse),
+          onHistoryChange();
         for (
-          var _step14,
-            _iterator14 = Json._createForOfIteratorHelperLoose(historyItem);
-          !(_step14 = _iterator14()).done;
+          var _step15,
+            _iterator15 = Json._createForOfIteratorHelperLoose(historyItem);
+          !(_step15 = _iterator15()).done;
 
         ) {
-          var op = _step14.value;
+          var op = _step15.value;
           "presence" !== op.type && state.buffer.storageOperations.push(op);
         }
         tryFlushing();
       }
     },
+    canUndo: canUndo,
+    canRedo: canRedo,
     pauseHistory: function () {
       (state.pausedHistory = []), (state.isHistoryPaused = !0);
     },
@@ -1058,6 +1082,7 @@ function createRoom(options, context) {
             error: [],
             connection: [],
             storage: [],
+            history: [],
           },
           numberOfRetry: 0,
           lastFlushTime: 0,
@@ -1113,6 +1138,8 @@ function createRoom(options, context) {
       history: {
         undo: machine.undo,
         redo: machine.redo,
+        canUndo: machine.canUndo,
+        canRedo: machine.canRedo,
         pause: machine.pauseHistory,
         resume: machine.resumeHistory,
       },

package/index.mjs

@@ -141,7 +141,7 @@ function makeStateMachine(state, context, mockedEffects) {
     state.undoStack.length >= 50 && state.undoStack.shift(),
       state.isHistoryPaused
         ? state.pausedHistory.unshift(...historyItem)
-        : state.undoStack.push(historyItem);
+        : (state.undoStack.push(historyItem), onHistoryChange());
   }
   function storageDispatch(ops, reverse, storageUpdates) {
     state.isBatching
@@ -337,7 +337,7 @@ function makeStateMachine(state, context, mockedEffects) {
           );
         const ws = WebSocketPolyfill || WebSocket;
         return (token) =>
-          new ws(`${liveblocksServer}/?token=${token}&version=0.17.7`);
+          new ws(`${liveblocksServer}/?token=${token}&version=0.17.8`);
       })(
         context.liveblocksServer,
         null !==
@@ -427,6 +427,10 @@ function makeStateMachine(state, context, mockedEffects) {
     for (const listener of state.listeners.event)
       listener({ connectionId: message.actor, event: message.event });
   }
+  function onHistoryChange() {
+    for (const listener of state.listeners.history)
+      listener({ canUndo: canUndo(), canRedo: canRedo() });
+  }
   function onUserJoinedMessage(message) {
     return (
       (state.users[message.actor] = {
@@ -655,6 +659,12 @@ function makeStateMachine(state, context, mockedEffects) {
   }
   let _getInitialStatePromise = null,
     _getInitialStateResolver = null;
+  function canUndo() {
+    return state.undoStack.length > 0;
+  }
+  function canRedo() {
+    return state.redoStack.length > 0;
+  }
   return {
     onClose: onClose,
     onMessage: onMessage,
@@ -795,7 +805,9 @@ function makeStateMachine(state, context, mockedEffects) {
       if (null == historyItem) return;
       state.isHistoryPaused = !1;
       const result = apply(historyItem, !0);
-      notify(result.updates), state.redoStack.push(result.reverse);
+      notify(result.updates),
+        state.redoStack.push(result.reverse),
+        onHistoryChange();
       for (const op of historyItem)
         "presence" !== op.type && state.buffer.storageOperations.push(op);
       tryFlushing();
@@ -807,11 +819,15 @@ function makeStateMachine(state, context, mockedEffects) {
       if (null == historyItem) return;
       state.isHistoryPaused = !1;
       const result = apply(historyItem, !0);
-      notify(result.updates), state.undoStack.push(result.reverse);
+      notify(result.updates),
+        state.undoStack.push(result.reverse),
+        onHistoryChange();
       for (const op of historyItem)
         "presence" !== op.type && state.buffer.storageOperations.push(op);
       tryFlushing();
     },
+    canUndo: canUndo,
+    canRedo: canRedo,
     pauseHistory: function () {
       (state.pausedHistory = []), (state.isHistoryPaused = !0);
     },
@@ -877,6 +893,7 @@ function createRoom(options, context) {
             error: [],
             connection: [],
             storage: [],
+            history: [],
           },
           numberOfRetry: 0,
           lastFlushTime: 0,
@@ -932,6 +949,8 @@ function createRoom(options, context) {
       history: {
         undo: machine.undo,
         redo: machine.redo,
+        canUndo: machine.canUndo,
+        canRedo: machine.canRedo,
         pause: machine.pauseHistory,
         resume: machine.resumeHistory,
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/client",
-  "version": "0.17.7",
+  "version": "0.17.8",
   "description": "A client that lets you interact with Liveblocks servers.",
   "main": "./index.js",
   "module": "./index.mjs",

package/shared.d.ts

@@ -312,6 +312,7 @@ declare type EventCallback<TRoomEvent extends Json> = ({
 }) => void;
 declare type ErrorCallback = (error: Error) => void;
 declare type ConnectionCallback = (state: ConnectionState) => void;
+declare type HistoryCallback = (event: HistoryEvent) => void;
 declare type UpdateDelta =
   | {
       type: "update";
@@ -604,6 +605,27 @@ interface History {
    * // room.getPresence() equals { selectedId: "yy" }
    */
   redo: () => void;
+  /**
+   * Returns whether there are any operations to undo.
+   *
+   * @example
+   * room.updatePresence({ selectedId: "xx" }, { addToHistory: true });
+   * // room.history.canUndo() is true
+   * room.history.undo();
+   * // room.history.canUndo() is false
+   */
+  canUndo: () => boolean;
+  /**
+   * Returns whether there are any operations to redo.
+   *
+   * @example
+   * room.updatePresence({ selectedId: "xx" }, { addToHistory: true });
+   * room.history.undo();
+   * // room.history.canRedo() is true
+   * room.history.redo();
+   * // room.history.canRedo() is false
+   */
+  canRedo: () => boolean;
   /**
    * All future modifications made on the Room will be merged together to create a single history item until resume is called.
    *
@@ -631,6 +653,10 @@ interface History {
    */
   resume: () => void;
 }
+interface HistoryEvent {
+  canUndo: boolean;
+  canRedo: boolean;
+}
 declare type Room<
   TPresence extends JsonObject,
   TStorage extends LsonObject,
@@ -648,6 +674,8 @@ declare type Room<
      *
      * @param listener the callback that is called every time the current user presence is updated with {@link Room.updatePresence}.
      *
+     * @returns Unsubscribe function.
+     *
      * @example
      * room.subscribe("my-presence", (presence) => {
      *   // Do something
@@ -659,6 +687,8 @@ declare type Room<
      *
      * @param listener the callback that is called when a user enters or leaves the room or when a user update its presence.
      *
+     * @returns Unsubscribe function.
+     *
      * @example
      * room.subscribe("others", (others) => {
      *   // Do something
@@ -673,6 +703,8 @@ declare type Room<
      *
      * @param listener the callback that is called when a user calls {@link Room.broadcastEvent}
      *
+     * @returns Unsubscribe function.
+     *
      * @example
      * room.subscribe("event", ({ event, connectionId }) => {
      *   // Do something
@@ -681,10 +713,14 @@ declare type Room<
     (type: "event", listener: EventCallback<TRoomEvent>): () => void;
     /**
      * Subscribe to errors thrown in the room.
+     *
+     * @returns Unsubscribe function.
      */
     (type: "error", listener: ErrorCallback): () => void;
     /**
      * Subscribe to connection state updates.
+     *
+     * @returns Unsubscribe function.
      */
     (type: "connection", listener: ConnectionCallback): () => void;
     /**
@@ -726,6 +762,17 @@ declare type Room<
         isDeep: true;
       }
     ): () => void;
+    /**
+     * Subscribe to the current user's history changes.
+     *
+     * @returns Unsubscribe function.
+     *
+     * @example
+     * room.subscribe("history", ({ canUndo, canRedo }) => {
+     *   // Do something
+     * });
+     */
+    (type: "history", listener: HistoryCallback): () => void;
   };
   /**
    * Room's history contains functions that let you undo and redo operation made on by the current client on the presence and storage.

package/shared.js

@@ -2565,7 +2565,8 @@ function isJsonArray(data) {
       "others" === value ||
       "event" === value ||
       "error" === value ||
-      "connection" === value
+      "connection" === value ||
+      "history" === value
     );
   }),
   (exports.isRootCrdt = function (crdt) {

package/shared.mjs

@@ -66,7 +66,8 @@ function isRoomEventName(value) {
     "others" === value ||
     "event" === value ||
     "error" === value ||
-    "connection" === value
+    "connection" === value ||
+    "history" === value
   );
 }
 function HasParent(node, key) {