@liveblocks/client 0.15.11 → 0.16.2

package/README.md

@@ -18,6 +18,8 @@
   </a>
 </p>
 
+A client that lets you interact with [Liveblocks](https://liveblocks.io) servers.
+
 ## Installation
 
 ```

package/{lib/esm → esm}/index.js

@@ -206,7 +206,7 @@ class LiveRegister extends AbstractCrdt {
   get data() {
     return this._data;
   }
-  static _deserialize([id, item], parentToChildren, doc) {
+  static _deserialize([id, item], _parentToChildren, doc) {
     if (item.type !== CrdtType.Register) {
       throw new Error(`Tried to deserialize a map but item type is "${item.type}"`);
     }
@@ -214,7 +214,7 @@ class LiveRegister extends AbstractCrdt {
     register._attach(id, doc);
     return register;
   }
-  _serialize(parentId, parentKey, doc) {
+  _serialize(parentId, parentKey, doc, intent) {
     if (this._id == null || parentId == null || parentKey == null) {
       throw new Error("Cannot serialize register if parentId or parentKey is undefined");
     }
@@ -223,6 +223,7 @@ class LiveRegister extends AbstractCrdt {
         type: OpType.CreateRegister,
         opId: doc == null ? void 0 : doc.generateOpId(),
         id: this._id,
+        intent,
         parentId,
         parentKey,
         data: this.data
@@ -238,7 +239,7 @@ class LiveRegister extends AbstractCrdt {
       data: this.data
     };
   }
-  _attachChild(_id, _key, _crdt, _opId, _isLocal) {
+  _attachChild(_op, _isLocal) {
     throw new Error("Method not implemented.");
   }
   _detachChild(_crdt) {
@@ -276,7 +277,7 @@ class LiveList extends AbstractCrdt {
     }
     return list;
   }
-  _serialize(parentId, parentKey, doc) {
+  _serialize(parentId, parentKey, doc, intent) {
     if (this._id == null) {
       throw new Error("Cannot serialize item is not attached");
     }
@@ -287,6 +288,7 @@ class LiveList extends AbstractCrdt {
     const op = {
       id: this._id,
       opId: doc == null ? void 0 : doc.generateOpId(),
+      intent,
       type: OpType.CreateList,
       parentId,
       parentKey
@@ -312,11 +314,14 @@ class LiveList extends AbstractCrdt {
       value._detach();
     }
   }
-  _attachChild(id, key, child, _opId, isLocal) {
+  _attachChild(op, isLocal) {
     var _a;
     if (this._doc == null) {
       throw new Error("Can't attach child if doc is not present");
     }
+    const { id, parentKey, intent } = op;
+    const key = parentKey;
+    const child = creationOpToLiveStructure(op);
     if (this._doc.getItem(id) !== void 0) {
       return { modified: false };
     }
@@ -325,9 +330,28 @@ class LiveList extends AbstractCrdt {
     const index = this._items.findIndex((entry) => entry[1] === key);
     let newKey = key;
     if (index !== -1) {
-      if (isLocal) {
-        let before = this._items[index] ? this._items[index][1] : void 0;
-        let after = this._items[index + 1] ? this._items[index + 1][1] : void 0;
+      if (intent === "set") {
+        const existingItem = this._items[index][0];
+        existingItem._detach();
+        const storageUpdate = {
+          node: this,
+          type: "LiveList",
+          updates: [
+            {
+              index,
+              type: "set",
+              item: child instanceof LiveRegister ? child.data : child
+            }
+          ]
+        };
+        this._items[index][0] = child;
+        return {
+          modified: storageUpdate,
+          reverse: existingItem._serialize(this._id, key, this._doc, "set")
+        };
+      } else if (isLocal) {
+        const before = this._items[index] ? this._items[index][1] : void 0;
+        const after = this._items[index + 1] ? this._items[index + 1][1] : void 0;
         newKey = makePosition(before, after);
         child._setParentLink(this, newKey);
       } else {
@@ -567,6 +591,33 @@ class LiveList extends AbstractCrdt {
       this._items = [];
     }
   }
+  set(index, item) {
+    if (index < 0 || index >= this._items.length) {
+      throw new Error(`Cannot set list item at index "${index}". index should be between 0 and ${this._items.length - 1}`);
+    }
+    const [existingItem, position] = this._items[index];
+    existingItem._detach();
+    const value = selfOrRegister(item);
+    value._setParentLink(this, position);
+    this._items[index][0] = value;
+    if (this._doc && this._id) {
+      const id = this._doc.generateId();
+      value._attach(id, this._doc);
+      const storageUpdates = /* @__PURE__ */ new Map();
+      storageUpdates.set(this._id, {
+        node: this,
+        type: "LiveList",
+        updates: [
+          {
+            index,
+            item: value instanceof LiveRegister ? value.data : value,
+            type: "set"
+          }
+        ]
+      });
+      this._doc.dispatch(value._serialize(this._id, position, this._doc, "set"), existingItem._serialize(this._id, position, void 0, "set"), storageUpdates);
+    }
+  }
   toArray() {
     return this._items.map((entry) => selfOrRegisterValue(entry[0]));
   }
@@ -643,7 +694,7 @@ class LiveMap extends AbstractCrdt {
       this._map = /* @__PURE__ */ new Map();
     }
   }
-  _serialize(parentId, parentKey, doc) {
+  _serialize(parentId, parentKey, doc, intent) {
     if (this._id == null) {
       throw new Error("Cannot serialize item is not attached");
     }
@@ -655,6 +706,7 @@ class LiveMap extends AbstractCrdt {
       id: this._id,
       opId: doc == null ? void 0 : doc.generateOpId(),
       type: OpType.CreateMap,
+      intent,
       parentId,
       parentKey
     };
@@ -693,10 +745,13 @@ class LiveMap extends AbstractCrdt {
       }
     }
   }
-  _attachChild(id, key, child, _opId, _isLocal) {
+  _attachChild(op, _isLocal) {
     if (this._doc == null) {
       throw new Error("Can't attach child if doc is not present");
     }
+    const { id, parentKey } = op;
+    const key = parentKey;
+    const child = creationOpToLiveStructure(op);
     if (this._doc.getItem(id) !== void 0) {
       return { modified: false };
     }
@@ -860,6 +915,20 @@ class LiveMap extends AbstractCrdt {
   }
 }
 
+function parseJson(rawMessage) {
+  try {
+    return JSON.parse(rawMessage);
+  } catch (e) {
+    return void 0;
+  }
+}
+function isJsonArray(data) {
+  return Array.isArray(data);
+}
+function isJsonObject(data) {
+  return data !== null && typeof data === "object" && !isJsonArray(data);
+}
+
 var __defProp$2 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
 var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
@@ -887,6 +956,21 @@ function remove(array, item) {
     }
   }
 }
+function compact(items) {
+  return items.filter((item) => item != null);
+}
+function creationOpToLiveStructure(op) {
+  switch (op.type) {
+    case OpType.CreateRegister:
+      return new LiveRegister(op.data);
+    case OpType.CreateObject:
+      return new LiveObject(op.data);
+    case OpType.CreateMap:
+      return new LiveMap();
+    case OpType.CreateList:
+      return new LiveList();
+  }
+}
 function isSameNodeOrChildOf(node, parent) {
   if (node === parent) {
     return true;
@@ -1003,32 +1087,41 @@ function getTreesDiffOperations(currentItems, newItems) {
   });
   return ops;
 }
+function mergeObjectStorageUpdates(first, second) {
+  const updates = first.updates;
+  for (const [key, value] of entries(second.updates)) {
+    updates[key] = value;
+  }
+  return __spreadProps$2(__spreadValues$2({}, second), {
+    updates
+  });
+}
+function mergeMapStorageUpdates(first, second) {
+  const updates = first.updates;
+  for (const [key, value] of entries(second.updates)) {
+    updates[key] = value;
+  }
+  return __spreadProps$2(__spreadValues$2({}, second), {
+    updates
+  });
+}
+function mergeListStorageUpdates(first, second) {
+  const updates = first.updates;
+  return __spreadProps$2(__spreadValues$2({}, second), {
+    updates: updates.concat(second.updates)
+  });
+}
 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 __spreadProps$2(__spreadValues$2({}, second), {
-      updates
-    });
-  } else if (second.type === "LiveMap") {
-    const updates = first.updates;
-    for (const [key, value] of Object.entries(second.updates)) {
-      updates[key] = value;
-    }
-    return __spreadProps$2(__spreadValues$2({}, second), {
-      updates
-    });
-  } else if (second.type === "LiveList") {
-    const updates = first.updates;
-    return __spreadProps$2(__spreadValues$2({}, second), {
-      updates: updates.concat(second.updates)
-    });
-  }
+  if (first.type === "LiveObject" && second.type === "LiveObject") {
+    return mergeObjectStorageUpdates(first, second);
+  } else if (first.type === "LiveMap" && second.type === "LiveMap") {
+    return mergeMapStorageUpdates(first, second);
+  } else if (first.type === "LiveList" && second.type === "LiveList") {
+    return mergeListStorageUpdates(first, second);
+  } else ;
   return second;
 }
 function isPlain(value) {
@@ -1075,15 +1168,12 @@ function findNonSerializableValue(value, path = "") {
   return false;
 }
 function isTokenValid(token) {
-  if (token === null) {
-    return false;
-  }
   const tokenParts = token.split(".");
   if (tokenParts.length !== 3) {
     return false;
   }
-  const data = JSON.parse(atob(tokenParts[1]));
-  if (typeof data.exp !== "number") {
+  const data = parseJson(atob(tokenParts[1]));
+  if (data === void 0 || !isJsonObject(data) || typeof data.exp !== "number") {
     return false;
   }
   const now = Date.now();
@@ -1092,6 +1182,9 @@ function isTokenValid(token) {
   }
   return true;
 }
+function entries(obj) {
+  return Object.entries(obj);
+}
 
 class LiveObject extends AbstractCrdt {
   constructor(object = {}) {
@@ -1105,7 +1198,7 @@ class LiveObject extends AbstractCrdt {
     }
     this._map = new Map(Object.entries(object));
   }
-  _serialize(parentId, parentKey, doc) {
+  _serialize(parentId, parentKey, doc, intent) {
     if (this._id == null) {
       throw new Error("Cannot serialize item is not attached");
     }
@@ -1113,6 +1206,7 @@ class LiveObject extends AbstractCrdt {
     const op = {
       id: this._id,
       opId: doc == null ? void 0 : doc.generateOpId(),
+      intent,
       type: OpType.CreateObject,
       parentId,
       parentKey,
@@ -1160,10 +1254,13 @@ class LiveObject extends AbstractCrdt {
       }
     }
   }
-  _attachChild(id, key, child, opId, isLocal) {
+  _attachChild(op, isLocal) {
     if (this._doc == null) {
       throw new Error("Can't attach child if doc is not present");
     }
+    const { id, parentKey, opId } = op;
+    const key = parentKey;
+    const child = creationOpToLiveStructure(op);
     if (this._doc.getItem(id) !== void 0) {
       if (this._propToLastUpdate.get(key) === opId) {
         this._propToLastUpdate.delete(key);
@@ -1538,19 +1635,20 @@ function makeOthers(userMap) {
 function makeStateMachine(state, context, mockedEffects) {
   const effects = mockedEffects || {
     authenticate(auth, createWebSocket) {
-      if (isTokenValid(state.token)) {
-        const parsedToken = parseToken(state.token);
-        const socket = createWebSocket(state.token);
+      const token = state.token;
+      if (token && isTokenValid(token)) {
+        const parsedToken = parseToken(token);
+        const socket = createWebSocket(token);
         authenticationSuccess(parsedToken, socket);
       } else {
-        return auth(context.room).then(({ token }) => {
+        return auth(context.roomId).then(({ token: token2 }) => {
           if (state.connection.state !== "authenticating") {
             return;
           }
-          const parsedToken = parseToken(token);
-          const socket = createWebSocket(token);
+          const parsedToken = parseToken(token2);
+          const socket = createWebSocket(token2);
           authenticationSuccess(parsedToken, socket);
-          state.token = token;
+          state.token = token2;
         }).catch((er) => authenticationFailure(er));
       }
     },
@@ -1650,7 +1748,7 @@ function makeStateMachine(state, context, mockedEffects) {
       generateId,
       generateOpId,
       dispatch: storageDispatch,
-      roomId: context.room
+      roomId: context.roomId
     });
   }
   function addItem(id, item) {
@@ -1793,33 +1891,15 @@ function makeStateMachine(state, context, mockedEffects) {
         }
         return { modified: false };
       }
-      case OpType.CreateObject: {
-        const parent = state.items.get(op.parentId);
-        if (parent == null) {
-          return { modified: false };
-        }
-        return parent._attachChild(op.id, op.parentKey, new LiveObject(op.data), op.opId, isLocal);
-      }
-      case OpType.CreateList: {
-        const parent = state.items.get(op.parentId);
-        if (parent == null) {
-          return { modified: false };
-        }
-        return parent._attachChild(op.id, op.parentKey, new LiveList(), op.opId, isLocal);
-      }
+      case OpType.CreateObject:
+      case OpType.CreateList:
+      case OpType.CreateMap:
       case OpType.CreateRegister: {
         const parent = state.items.get(op.parentId);
         if (parent == null) {
           return { modified: false };
         }
-        return parent._attachChild(op.id, op.parentKey, new LiveRegister(op.data), op.opId, isLocal);
-      }
-      case OpType.CreateMap: {
-        const parent = state.items.get(op.parentId);
-        if (parent == null) {
-          return { modified: false };
-        }
-        return parent._attachChild(op.id, op.parentKey, new LiveMap(), op.opId, isLocal);
+        return parent._attachChild(op, isLocal);
       }
     }
     return { modified: false };
@@ -1996,59 +2076,72 @@ See v0.13 release notes for more information.
     }
     return { type: "enter", user: state.users[message.actor] };
   }
+  function parseServerMessage(data) {
+    if (!isJsonObject(data)) {
+      return null;
+    }
+    return data;
+  }
+  function parseServerMessages(text) {
+    const data = parseJson(text);
+    if (data === void 0) {
+      return null;
+    } else if (isJsonArray(data)) {
+      return compact(data.map((item) => parseServerMessage(item)));
+    } else {
+      return compact([parseServerMessage(data)]);
+    }
+  }
   function onMessage(event) {
     if (event.data === "pong") {
       clearTimeout(state.timeoutHandles.pongTimeout);
       return;
     }
-    const message = JSON.parse(event.data);
-    let subMessages = [];
-    if (Array.isArray(message)) {
-      subMessages = message;
-    } else {
-      subMessages.push(message);
+    const messages = parseServerMessages(event.data);
+    if (messages === null || messages.length === 0) {
+      return;
     }
     const updates = {
       storageUpdates: /* @__PURE__ */ new Map(),
       others: []
     };
-    for (const subMessage of subMessages) {
-      switch (subMessage.type) {
+    for (const message of messages) {
+      switch (message.type) {
         case ServerMessageType.UserJoined: {
           updates.others.push(onUserJoinedMessage(message));
           break;
         }
         case ServerMessageType.UpdatePresence: {
-          const othersPresenceUpdate = onUpdatePresenceMessage(subMessage);
+          const othersPresenceUpdate = onUpdatePresenceMessage(message);
           if (othersPresenceUpdate) {
             updates.others.push(othersPresenceUpdate);
           }
           break;
         }
         case ServerMessageType.Event: {
-          onEvent(subMessage);
+          onEvent(message);
           break;
         }
         case ServerMessageType.UserLeft: {
-          const event2 = onUserLeftMessage(subMessage);
+          const event2 = onUserLeftMessage(message);
           if (event2) {
             updates.others.push(event2);
           }
           break;
         }
         case ServerMessageType.RoomState: {
-          updates.others.push(onRoomStateMessage(subMessage));
+          updates.others.push(onRoomStateMessage(message));
           break;
         }
         case ServerMessageType.InitialStorageState: {
           const offlineOps = new Map(state.offlineOperations);
-          createOrUpdateRootFromMessage(subMessage);
+          createOrUpdateRootFromMessage(message);
           applyAndSendOfflineOps(offlineOps);
           _getInitialStateResolver == null ? void 0 : _getInitialStateResolver();
           break;
         }
         case ServerMessageType.UpdateStorage: {
-          const applyResult = apply(subMessage.ops, false);
+          const applyResult = apply(message.ops, false);
           applyResult.updates.storageUpdates.forEach((value, key) => {
             updates.storageUpdates.set(key, mergeStorageUpdates(updates.storageUpdates.get(key), value));
           });
@@ -2466,7 +2559,7 @@ function createRoom(options, context) {
   const state = defaultState(options.defaultPresence, options.defaultStorageRoot);
   const machine = makeStateMachine(state, context);
   const room = {
-    id: context.room,
+    id: context.roomId,
     getConnectionState: machine.selectors.getConnectionState,
     getSelf: machine.selectors.getSelf,
     subscribe: machine.subscribe,
@@ -2507,11 +2600,15 @@ function parseToken(token) {
   if (tokenParts.length !== 3) {
     throw new Error(`Authentication error. Liveblocks could not parse the response of your authentication endpoint`);
   }
-  const data = JSON.parse(atob(tokenParts[1]));
-  if (typeof data.actor !== "number") {
-    throw new Error(`Authentication error. Liveblocks could not parse the response of your authentication endpoint`);
+  const data = parseJson(atob(tokenParts[1]));
+  if (data !== void 0 && isJsonObject(data) && typeof data.actor === "number" && (data.id === void 0 || typeof data.id === "string")) {
+    return {
+      actor: data.actor,
+      id: data.id,
+      info: data.info
+    };
   }
-  return data;
+  throw new Error(`Authentication error. Liveblocks could not parse the response of your authentication endpoint`);
 }
 function prepareCreateWebSocket(liveblocksServer, WebSocketPolyfill) {
   if (typeof window === "undefined" && WebSocketPolyfill == null) {
@@ -2589,7 +2686,7 @@ function createClient(options) {
       defaultPresence: options2.defaultPresence,
       defaultStorageRoot: options2.defaultStorageRoot
     }, {
-      room: roomId,
+      roomId,
       throttleDelay,
       WebSocketPolyfill: clientOptions.WebSocketPolyfill,
       fetchPolyfill: clientOptions.fetchPolyfill,
@@ -2678,26 +2775,33 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-function liveObjectToJson(liveObject) {
+function lsonObjectToJson(obj) {
   const result = {};
-  const obj = liveObject.toObject();
   for (const key in obj) {
-    result[key] = liveNodeToJson(obj[key]);
+    const val = obj[key];
+    if (val !== void 0) {
+      result[key] = lsonToJson(val);
+    }
   }
   return result;
 }
+function liveObjectToJson(liveObject) {
+  return lsonObjectToJson(liveObject.toObject());
+}
 function liveMapToJson(map) {
   const result = {};
-  const obj = Object.fromEntries(map);
-  for (const key in obj) {
-    result[key] = liveNodeToJson(obj[key]);
+  for (const [key, value] of map.entries()) {
+    result[key] = lsonToJson(value);
   }
   return result;
 }
+function lsonListToJson(value) {
+  return value.map(lsonToJson);
+}
 function liveListToJson(value) {
-  return value.toArray().map(liveNodeToJson);
+  return lsonListToJson(value.toArray());
 }
-function liveNodeToJson(value) {
+function lsonToJson(value) {
   if (value instanceof LiveObject) {
     return liveObjectToJson(value);
   } else if (value instanceof LiveList) {
@@ -2706,11 +2810,18 @@ function liveNodeToJson(value) {
     return liveMapToJson(value);
   } else if (value instanceof LiveRegister) {
     return value.data;
+  } else if (value instanceof AbstractCrdt) {
+    throw new Error("Unhandled subclass of AbstractCrdt encountered");
+  }
+  if (Array.isArray(value)) {
+    return lsonListToJson(value);
+  } else if (isPlainObject(value)) {
+    return lsonObjectToJson(value);
   }
   return value;
 }
 function isPlainObject(obj) {
-  return Object.prototype.toString.call(obj) === "[object Object]";
+  return obj !== null && Object.prototype.toString.call(obj) === "[object Object]";
 }
 function anyToCrdt(obj) {
   if (obj == null) {
@@ -2776,8 +2887,7 @@ function patchLiveList(liveList, prev, next) {
       if (liveListNode instanceof LiveObject && isPlainObject(prevNode) && isPlainObject(nextNode)) {
         patchLiveObject(liveListNode, prevNode, nextNode);
       } else {
-        liveList.delete(i);
-        liveList.insert(anyToCrdt(nextNode), i);
+        liveList.set(i, anyToCrdt(nextNode));
       }
       i++;
     }
@@ -2785,9 +2895,10 @@ function patchLiveList(liveList, prev, next) {
       liveList.insert(anyToCrdt(next[i]), i);
       i++;
     }
-    while (i <= prevEnd) {
+    let localI = i;
+    while (localI <= prevEnd) {
       liveList.delete(i);
-      i++;
+      localI++;
     }
   }
 }
@@ -2860,7 +2971,10 @@ function patchImmutableNode(state, path, update) {
         const newState = Object.assign({}, state);
         for (const key in update.updates) {
           if (((_a = update.updates[key]) == null ? void 0 : _a.type) === "update") {
-            newState[key] = liveNodeToJson(update.node.get(key));
+            const val = update.node.get(key);
+            if (val !== void 0) {
+              newState[key] = lsonToJson(val);
+            }
           } else if (((_b = update.updates[key]) == null ? void 0 : _b.type) === "delete") {
             delete newState[key];
           }
@@ -2873,13 +2987,15 @@ function patchImmutableNode(state, path, update) {
         }
         let newState = state.map((x) => x);
         for (const listUpdate of update.updates) {
-          if (listUpdate.type === "insert") {
+          if (listUpdate.type === "set") {
+            newState = newState.map((item, index) => index === listUpdate.index ? listUpdate.item : item);
+          } else if (listUpdate.type === "insert") {
             if (listUpdate.index === newState.length) {
-              newState.push(liveNodeToJson(listUpdate.item));
+              newState.push(lsonToJson(listUpdate.item));
             } else {
               newState = [
                 ...newState.slice(0, listUpdate.index),
-                liveNodeToJson(listUpdate.item),
+                lsonToJson(listUpdate.item),
                 ...newState.slice(listUpdate.index)
               ];
             }
@@ -2889,7 +3005,7 @@ function patchImmutableNode(state, path, update) {
             if (listUpdate.previousIndex > listUpdate.index) {
               newState = [
                 ...newState.slice(0, listUpdate.index),
-                liveNodeToJson(listUpdate.item),
+                lsonToJson(listUpdate.item),
                 ...newState.slice(listUpdate.index, listUpdate.previousIndex),
                 ...newState.slice(listUpdate.previousIndex + 1)
               ];
@@ -2897,7 +3013,7 @@ function patchImmutableNode(state, path, update) {
               newState = [
                 ...newState.slice(0, listUpdate.previousIndex),
                 ...newState.slice(listUpdate.previousIndex + 1, listUpdate.index + 1),
-                liveNodeToJson(listUpdate.item),
+                lsonToJson(listUpdate.item),
                 ...newState.slice(listUpdate.index + 1)
               ];
             }
@@ -2912,7 +3028,7 @@ function patchImmutableNode(state, path, update) {
         const newState = Object.assign({}, state);
         for (const key in update.updates) {
           if (((_c = update.updates[key]) == null ? void 0 : _c.type) === "update") {
-            newState[key] = liveNodeToJson(update.node.get(key));
+            newState[key] = lsonToJson(update.node.get(key));
           } else if (((_d = update.updates[key]) == null ? void 0 : _d.type) === "delete") {
             delete newState[key];
           }
@@ -2934,7 +3050,7 @@ function patchImmutableNode(state, path, update) {
 
 const internals = {
   liveObjectToJson,
-  liveNodeToJson,
+  lsonToJson,
   patchLiveList,
   patchImmutableObject,
   patchLiveObject,