@liveblocks/client 0.18.1 → 0.18.3

package/.built-by-link-script

@@ -1 +1 @@
-19cb31b448a235c276f9eb3510d2dfa93f4af74e
+fb9811ab760d208663f68c35b2180d2133a5ef65

package/index.js

@@ -245,6 +245,9 @@ function isConnectionSelfAware(connection) {
   return connection.state === "open" || connection.state === "connecting";
 }
 function makeStateMachine(state, config, mockedEffects) {
+  var _a;
+  const doNotBatchUpdates = (cb) => cb();
+  const batchUpdates = (_a = config.unstable_batchedUpdates) != null ? _a : doNotBatchUpdates;
   const pool = {
     roomId: config.roomId,
     getNode: (id) => state.nodes.get(id),
@@ -267,10 +270,12 @@ function makeStateMachine(state, config, mockedEffects) {
         });
         activeBatch.reverseOps.push(...reverse);
       } else {
-        addToUndoStack(reverse);
-        state.redoStack = [];
-        dispatchOps(ops);
-        notify({ storageUpdates });
+        batchUpdates(() => {
+          addToUndoStack(reverse, doNotBatchUpdates);
+          state.redoStack = [];
+          dispatchOps(ops);
+          notify({ storageUpdates }, doNotBatchUpdates);
+        });
       }
     }
   };
@@ -335,12 +340,12 @@ function makeStateMachine(state, config, mockedEffects) {
       presence: me
     } : null
   );
-  function createOrUpdateRootFromMessage(message) {
+  function createOrUpdateRootFromMessage(message, batchedUpdatesWrapper) {
     if (message.items.length === 0) {
       throw new Error("Internal error: cannot load storage without items");
     }
     if (state.root) {
-      updateRoot(message.items);
+      updateRoot(message.items, batchedUpdatesWrapper);
     } else {
       state.root = load(message.items);
     }
@@ -371,7 +376,7 @@ function makeStateMachine(state, config, mockedEffects) {
     }
     return [root, parentToChildren];
   }
-  function updateRoot(items) {
+  function updateRoot(items, batchedUpdatesWrapper) {
     if (!state.root) {
       return;
     }
@@ -381,44 +386,46 @@ function makeStateMachine(state, config, mockedEffects) {
     });
     const ops = _chunkUV2F4F4Rjs.getTreesDiffOperations.call(void 0, currentItems, new Map(items));
     const result = apply(ops, false);
-    notify(result.updates);
+    notify(result.updates, batchedUpdatesWrapper);
   }
   function load(items) {
     const [root, parentToChildren] = buildRootAndParentToChildren(items);
     return _chunkUV2F4F4Rjs.LiveObject._deserialize(root, parentToChildren, pool);
   }
-  function _addToRealUndoStack(historyOps) {
+  function _addToRealUndoStack(historyOps, batchedUpdatesWrapper) {
     if (state.undoStack.length >= 50) {
       state.undoStack.shift();
     }
     state.undoStack.push(historyOps);
-    onHistoryChange();
+    onHistoryChange(batchedUpdatesWrapper);
   }
-  function addToUndoStack(historyOps) {
+  function addToUndoStack(historyOps, batchedUpdatesWrapper) {
     if (state.pausedHistory !== null) {
       state.pausedHistory.unshift(...historyOps);
     } else {
-      _addToRealUndoStack(historyOps);
+      _addToRealUndoStack(historyOps, batchedUpdatesWrapper);
     }
   }
   function notify({
     storageUpdates = /* @__PURE__ */ new Map(),
     presence = false,
     others: otherEvents = []
-  }) {
-    if (otherEvents.length > 0) {
-      const others = state.others.current;
-      for (const event of otherEvents) {
-        eventHub.others.notify({ others, event });
+  }, batchedUpdatesWrapper) {
+    batchedUpdatesWrapper(() => {
+      if (otherEvents.length > 0) {
+        const others = state.others.current;
+        for (const event of otherEvents) {
+          eventHub.others.notify({ others, event });
+        }
       }
-    }
-    if (presence) {
-      eventHub.me.notify(state.me.current);
-    }
-    if (storageUpdates.size > 0) {
-      const updates = Array.from(storageUpdates.values());
-      eventHub.storage.notify(updates);
-    }
+      if (presence) {
+        eventHub.me.notify(state.me.current);
+      }
+      if (storageUpdates.size > 0) {
+        const updates = Array.from(storageUpdates.values());
+        eventHub.storage.notify(updates);
+      }
+    });
   }
   function getConnectionId() {
     const conn = state.connection.current;
@@ -610,19 +617,19 @@ function makeStateMachine(state, config, mockedEffects) {
     return state.connection.current.state;
   }
   function connect() {
-    var _a, _b, _c, _d;
+    var _a2, _b, _c, _d;
     if (state.connection.current.state !== "closed" && state.connection.current.state !== "unavailable") {
       return null;
     }
     const auth = prepareAuthEndpoint(
       config.authentication,
-      (_b = (_a = config.polyfills) == null ? void 0 : _a.fetch) != null ? _b : config.fetchPolyfill
+      (_b = (_a2 = config.polyfills) == null ? void 0 : _a2.fetch) != null ? _b : config.fetchPolyfill
     );
     const createWebSocket = prepareCreateWebSocket(
       config.liveblocksServer,
       (_d = (_c = config.polyfills) == null ? void 0 : _c.WebSocket) != null ? _d : config.WebSocketPolyfill
     );
-    updateConnection({ state: "authenticating" });
+    updateConnection({ state: "authenticating" }, batchUpdates);
     effects.authenticate(auth, createWebSocket);
   }
   function updatePresence(patch, options) {
@@ -652,10 +659,15 @@ function makeStateMachine(state, config, mockedEffects) {
       state.activeBatch.updates.presence = true;
     } else {
       tryFlushing();
-      if (options == null ? void 0 : options.addToHistory) {
-        addToUndoStack([{ type: "presence", data: oldValues }]);
-      }
-      notify({ presence: true });
+      batchUpdates(() => {
+        if (options == null ? void 0 : options.addToHistory) {
+          addToUndoStack(
+            [{ type: "presence", data: oldValues }],
+            doNotBatchUpdates
+          );
+        }
+        notify({ presence: true }, doNotBatchUpdates);
+      });
     }
   }
   function authenticationSuccess(token, socket) {
@@ -663,12 +675,15 @@ function makeStateMachine(state, config, mockedEffects) {
     socket.addEventListener("open", onOpen);
     socket.addEventListener("close", onClose);
     socket.addEventListener("error", onError);
-    updateConnection({
-      state: "connecting",
-      id: token.actor,
-      userInfo: token.info,
-      userId: token.id
-    });
+    updateConnection(
+      {
+        state: "connecting",
+        id: token.actor,
+        userInfo: token.info,
+        userId: token.id
+      },
+      batchUpdates
+    );
     state.idFactory = makeIdFactory(token.actor);
     state.socket = socket;
   }
@@ -677,7 +692,7 @@ function makeStateMachine(state, config, mockedEffects) {
       console.error("Call to authentication endpoint failed", error);
     }
     state.token = null;
-    updateConnection({ state: "unavailable" });
+    updateConnection({ state: "unavailable" }, batchUpdates);
     state.numberOfRetry++;
     state.timeoutHandles.reconnect = effects.scheduleReconnect(getRetryDelay());
   }
@@ -731,8 +746,10 @@ function makeStateMachine(state, config, mockedEffects) {
       reconnect();
     }
   }
-  function onHistoryChange() {
-    eventHub.history.notify({ canUndo: canUndo(), canRedo: canRedo() });
+  function onHistoryChange(batchedUpdatesWrapper) {
+    batchedUpdatesWrapper(() => {
+      eventHub.history.notify({ canUndo: canUndo(), canRedo: canRedo() });
+    });
   }
   function onUserJoinedMessage(message) {
     state.others.setConnection(message.actor, message.id, message.info);
@@ -774,64 +791,66 @@ function makeStateMachine(state, config, mockedEffects) {
       storageUpdates: /* @__PURE__ */ new Map(),
       others: []
     };
-    for (const message of messages) {
-      switch (message.type) {
-        case 101 /* USER_JOINED */: {
-          const userJoinedUpdate = onUserJoinedMessage(message);
-          if (userJoinedUpdate) {
-            updates.others.push(userJoinedUpdate);
+    batchUpdates(() => {
+      for (const message of messages) {
+        switch (message.type) {
+          case 101 /* USER_JOINED */: {
+            const userJoinedUpdate = onUserJoinedMessage(message);
+            if (userJoinedUpdate) {
+              updates.others.push(userJoinedUpdate);
+            }
+            break;
           }
-          break;
-        }
-        case 100 /* UPDATE_PRESENCE */: {
-          const othersPresenceUpdate = onUpdatePresenceMessage(message);
-          if (othersPresenceUpdate) {
-            updates.others.push(othersPresenceUpdate);
+          case 100 /* UPDATE_PRESENCE */: {
+            const othersPresenceUpdate = onUpdatePresenceMessage(message);
+            if (othersPresenceUpdate) {
+              updates.others.push(othersPresenceUpdate);
+            }
+            break;
           }
-          break;
-        }
-        case 103 /* BROADCASTED_EVENT */: {
-          eventHub.customEvent.notify({
-            connectionId: message.actor,
-            event: message.event
-          });
-          break;
-        }
-        case 102 /* USER_LEFT */: {
-          const event2 = onUserLeftMessage(message);
-          if (event2) {
-            updates.others.push(event2);
+          case 103 /* BROADCASTED_EVENT */: {
+            eventHub.customEvent.notify({
+              connectionId: message.actor,
+              event: message.event
+            });
+            break;
+          }
+          case 102 /* USER_LEFT */: {
+            const event2 = onUserLeftMessage(message);
+            if (event2) {
+              updates.others.push(event2);
+            }
+            break;
+          }
+          case 104 /* ROOM_STATE */: {
+            updates.others.push(onRoomStateMessage(message));
+            break;
+          }
+          case 200 /* INITIAL_STORAGE_STATE */: {
+            const offlineOps = new Map(state.offlineOperations);
+            createOrUpdateRootFromMessage(message, doNotBatchUpdates);
+            applyAndSendOfflineOps(offlineOps, doNotBatchUpdates);
+            _getInitialStateResolver == null ? void 0 : _getInitialStateResolver();
+            eventHub.storageDidLoad.notify();
+            break;
+          }
+          case 201 /* UPDATE_STORAGE */: {
+            const applyResult = apply(message.ops, false);
+            applyResult.updates.storageUpdates.forEach((value, key) => {
+              updates.storageUpdates.set(
+                key,
+                _chunkUV2F4F4Rjs.mergeStorageUpdates.call(void 0, 
+                  updates.storageUpdates.get(key),
+                  value
+                )
+              );
+            });
+            break;
           }
-          break;
-        }
-        case 104 /* ROOM_STATE */: {
-          updates.others.push(onRoomStateMessage(message));
-          break;
-        }
-        case 200 /* INITIAL_STORAGE_STATE */: {
-          const offlineOps = new Map(state.offlineOperations);
-          createOrUpdateRootFromMessage(message);
-          applyAndSendOfflineOps(offlineOps);
-          _getInitialStateResolver == null ? void 0 : _getInitialStateResolver();
-          eventHub.storageDidLoad.notify();
-          break;
-        }
-        case 201 /* UPDATE_STORAGE */: {
-          const applyResult = apply(message.ops, false);
-          applyResult.updates.storageUpdates.forEach((value, key) => {
-            updates.storageUpdates.set(
-              key,
-              _chunkUV2F4F4Rjs.mergeStorageUpdates.call(void 0, 
-                updates.storageUpdates.get(key),
-                value
-              )
-            );
-          });
-          break;
         }
       }
-    }
-    notify(updates);
+      notify(updates, doNotBatchUpdates);
+    });
   }
   function onClose(event) {
     state.socket = null;
@@ -842,37 +861,41 @@ function makeStateMachine(state, config, mockedEffects) {
     }
     clearTimeout(state.timeoutHandles.reconnect);
     state.others.clearOthers();
-    notify({ others: [{ type: "reset" }] });
-    if (event.code >= 4e3 && event.code <= 4100) {
-      updateConnection({ state: "failed" });
-      const error = new LiveblocksError(event.reason, event.code);
-      eventHub.error.notify(error);
-      const delay = getRetryDelay(true);
-      state.numberOfRetry++;
-      if (process.env.NODE_ENV !== "production") {
-        console.error(
-          `Connection to Liveblocks websocket server closed. Reason: ${error.message} (code: ${error.code}). Retrying in ${delay}ms.`
-        );
-      }
-      updateConnection({ state: "unavailable" });
-      state.timeoutHandles.reconnect = effects.scheduleReconnect(delay);
-    } else if (event.code === 4999 /* CLOSE_WITHOUT_RETRY */) {
-      updateConnection({ state: "closed" });
-    } else {
-      const delay = getRetryDelay();
-      state.numberOfRetry++;
-      if (process.env.NODE_ENV !== "production") {
-        console.warn(
-          `Connection to Liveblocks websocket server closed (code: ${event.code}). Retrying in ${delay}ms.`
-        );
+    batchUpdates(() => {
+      notify({ others: [{ type: "reset" }] }, doNotBatchUpdates);
+      if (event.code >= 4e3 && event.code <= 4100) {
+        updateConnection({ state: "failed" }, doNotBatchUpdates);
+        const error = new LiveblocksError(event.reason, event.code);
+        eventHub.error.notify(error);
+        const delay = getRetryDelay(true);
+        state.numberOfRetry++;
+        if (process.env.NODE_ENV !== "production") {
+          console.error(
+            `Connection to Liveblocks websocket server closed. Reason: ${error.message} (code: ${error.code}). Retrying in ${delay}ms.`
+          );
+        }
+        updateConnection({ state: "unavailable" }, doNotBatchUpdates);
+        state.timeoutHandles.reconnect = effects.scheduleReconnect(delay);
+      } else if (event.code === 4999 /* CLOSE_WITHOUT_RETRY */) {
+        updateConnection({ state: "closed" }, doNotBatchUpdates);
+      } else {
+        const delay = getRetryDelay();
+        state.numberOfRetry++;
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            `Connection to Liveblocks websocket server closed (code: ${event.code}). Retrying in ${delay}ms.`
+          );
+        }
+        updateConnection({ state: "unavailable" }, doNotBatchUpdates);
+        state.timeoutHandles.reconnect = effects.scheduleReconnect(delay);
       }
-      updateConnection({ state: "unavailable" });
-      state.timeoutHandles.reconnect = effects.scheduleReconnect(delay);
-    }
+    });
   }
-  function updateConnection(connection) {
+  function updateConnection(connection, batchedUpdatesWrapper) {
     state.connection.set(connection);
-    eventHub.connection.notify(connection.state);
+    batchedUpdatesWrapper(() => {
+      eventHub.connection.notify(connection.state);
+    });
   }
   function getRetryDelay(slow = false) {
     if (slow) {
@@ -886,7 +909,10 @@ function makeStateMachine(state, config, mockedEffects) {
     clearInterval(state.intervalHandles.heartbeat);
     state.intervalHandles.heartbeat = effects.startHeartbeatInterval();
     if (state.connection.current.state === "connecting") {
-      updateConnection(_chunkUV2F4F4Rjs.__spreadProps.call(void 0, _chunkUV2F4F4Rjs.__spreadValues.call(void 0, {}, state.connection.current), { state: "open" }));
+      updateConnection(
+        _chunkUV2F4F4Rjs.__spreadProps.call(void 0, _chunkUV2F4F4Rjs.__spreadValues.call(void 0, {}, state.connection.current), { state: "open" }),
+        batchUpdates
+      );
       state.numberOfRetry = 0;
       if (state.lastConnectionId !== void 0) {
         state.buffer.me = {
@@ -926,7 +952,7 @@ function makeStateMachine(state, config, mockedEffects) {
       state.socket.close();
       state.socket = null;
     }
-    updateConnection({ state: "unavailable" });
+    updateConnection({ state: "unavailable" }, batchUpdates);
     clearTimeout(state.timeoutHandles.pongTimeout);
     if (state.timeoutHandles.flush) {
       clearTimeout(state.timeoutHandles.flush);
@@ -935,7 +961,7 @@ function makeStateMachine(state, config, mockedEffects) {
     clearInterval(state.intervalHandles.heartbeat);
     connect();
   }
-  function applyAndSendOfflineOps(offlineOps) {
+  function applyAndSendOfflineOps(offlineOps, batchedUpdatesWrapper) {
     if (offlineOps.size === 0) {
       return;
     }
@@ -946,7 +972,7 @@ function makeStateMachine(state, config, mockedEffects) {
       type: 201 /* UPDATE_STORAGE */,
       ops
     });
-    notify(result.updates);
+    notify(result.updates, batchedUpdatesWrapper);
     effects.send(messages);
   }
   function tryFlushing() {
@@ -1017,16 +1043,18 @@ function makeStateMachine(state, config, mockedEffects) {
       state.socket.close();
       state.socket = null;
     }
-    updateConnection({ state: "closed" });
-    if (state.timeoutHandles.flush) {
-      clearTimeout(state.timeoutHandles.flush);
-    }
-    clearTimeout(state.timeoutHandles.reconnect);
-    clearTimeout(state.timeoutHandles.pongTimeout);
-    clearInterval(state.intervalHandles.heartbeat);
-    state.others.clearOthers();
-    notify({ others: [{ type: "reset" }] });
-    Object.values(eventHub).forEach((eventSource) => eventSource.clear());
+    batchUpdates(() => {
+      updateConnection({ state: "closed" }, doNotBatchUpdates);
+      if (state.timeoutHandles.flush) {
+        clearTimeout(state.timeoutHandles.flush);
+      }
+      clearTimeout(state.timeoutHandles.reconnect);
+      clearTimeout(state.timeoutHandles.pongTimeout);
+      clearInterval(state.intervalHandles.heartbeat);
+      state.others.clearOthers();
+      notify({ others: [{ type: "reset" }] }, doNotBatchUpdates);
+      Object.values(eventHub).forEach((eventSource) => eventSource.clear());
+    });
   }
   function getPresence() {
     return state.me.current;
@@ -1094,9 +1122,11 @@ function makeStateMachine(state, config, mockedEffects) {
     }
     state.pausedHistory = null;
     const result = apply(historyOps, true);
-    notify(result.updates);
-    state.redoStack.push(result.reverse);
-    onHistoryChange();
+    batchUpdates(() => {
+      notify(result.updates, doNotBatchUpdates);
+      state.redoStack.push(result.reverse);
+      onHistoryChange(doNotBatchUpdates);
+    });
     for (const op of historyOps) {
       if (op.type !== "presence") {
         state.buffer.storageOperations.push(op);
@@ -1117,9 +1147,11 @@ function makeStateMachine(state, config, mockedEffects) {
     }
     state.pausedHistory = null;
     const result = apply(historyOps, true);
-    notify(result.updates);
-    state.undoStack.push(result.reverse);
-    onHistoryChange();
+    batchUpdates(() => {
+      notify(result.updates, doNotBatchUpdates);
+      state.undoStack.push(result.reverse);
+      onHistoryChange(doNotBatchUpdates);
+    });
     for (const op of historyOps) {
       if (op.type !== "presence") {
         state.buffer.storageOperations.push(op);
@@ -1134,32 +1166,36 @@ function makeStateMachine(state, config, mockedEffects) {
     if (state.activeBatch) {
       return callback();
     }
-    state.activeBatch = {
-      ops: [],
-      updates: {
-        storageUpdates: /* @__PURE__ */ new Map(),
-        presence: false,
-        others: []
-      },
-      reverseOps: []
-    };
-    try {
-      return callback();
-    } finally {
-      const currentBatch = state.activeBatch;
-      state.activeBatch = null;
-      if (currentBatch.reverseOps.length > 0) {
-        addToUndoStack(currentBatch.reverseOps);
-      }
-      if (currentBatch.ops.length > 0) {
-        state.redoStack = [];
-      }
-      if (currentBatch.ops.length > 0) {
-        dispatchOps(currentBatch.ops);
+    let rv = void 0;
+    batchUpdates(() => {
+      state.activeBatch = {
+        ops: [],
+        updates: {
+          storageUpdates: /* @__PURE__ */ new Map(),
+          presence: false,
+          others: []
+        },
+        reverseOps: []
+      };
+      try {
+        rv = callback();
+      } finally {
+        const currentBatch = state.activeBatch;
+        state.activeBatch = null;
+        if (currentBatch.reverseOps.length > 0) {
+          addToUndoStack(currentBatch.reverseOps, doNotBatchUpdates);
+        }
+        if (currentBatch.ops.length > 0) {
+          state.redoStack = [];
+        }
+        if (currentBatch.ops.length > 0) {
+          dispatchOps(currentBatch.ops);
+        }
+        notify(currentBatch.updates, doNotBatchUpdates);
+        tryFlushing();
       }
-      notify(currentBatch.updates);
-      tryFlushing();
-    }
+    });
+    return rv;
   }
   function pauseHistory() {
     state.pausedHistory = [];
@@ -1168,7 +1204,7 @@ function makeStateMachine(state, config, mockedEffects) {
     const historyOps = state.pausedHistory;
     state.pausedHistory = null;
     if (historyOps !== null && historyOps.length > 0) {
-      _addToRealUndoStack(historyOps);
+      _addToRealUndoStack(historyOps, batchUpdates);
     }
   }
   function simulateSocketClose() {
@@ -1322,7 +1358,7 @@ function prepareCreateWebSocket(liveblocksServer, WebSocketPolyfill) {
   const ws = WebSocketPolyfill || WebSocket;
   return (token) => {
     return new ws(
-      `${liveblocksServer}/?token=${token}&version=${true ? "0.18.1" : "dev"}`
+      `${liveblocksServer}/?token=${token}&version=${true ? "0.18.3" : "dev"}`
     );
   };
 }
@@ -1430,6 +1466,7 @@ function createClient(options) {
         polyfills: clientOptions.polyfills,
         WebSocketPolyfill: clientOptions.WebSocketPolyfill,
         fetchPolyfill: clientOptions.fetchPolyfill,
+        unstable_batchedUpdates: options2 == null ? void 0 : options2.unstable_batchedUpdates,
         liveblocksServer: (clientOptions == null ? void 0 : clientOptions.liveblocksServer) || "wss://api.liveblocks.io/v6",
         authentication: prepareAuthentication(clientOptions, roomId)
       }

package/package.json

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