@liveblocks/core 2.11.1 → 2.12.0

package/dist/index.js

@@ -6,7 +6,7 @@ var __export = (target, all) => {
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/core";
-var PKG_VERSION = "2.11.1";
+var PKG_VERSION = "2.12.0";
 var PKG_FORMAT = "cjs";
 
 // src/dupe-detection.ts
@@ -2444,6 +2444,84 @@ function createNotificationsApi({
   };
 }
 
+// src/lib/freeze.ts
+var freeze = process.env.NODE_ENV === "production" ? (
+  /* istanbul ignore next */
+  (x) => x
+) : Object.freeze;
+
+// src/refs/ImmutableRef.ts
+function merge(target, patch) {
+  let updated = false;
+  const newValue = { ...target };
+  Object.keys(patch).forEach((k) => {
+    const key = k;
+    const val = patch[key];
+    if (newValue[key] !== val) {
+      if (val === void 0) {
+        delete newValue[key];
+      } else {
+        newValue[key] = val;
+      }
+      updated = true;
+    }
+  });
+  return updated ? newValue : target;
+}
+var ImmutableRef = class {
+  constructor() {
+    this._ev = makeEventSource();
+  }
+  get didInvalidate() {
+    return this._ev.observable;
+  }
+  invalidate() {
+    if (this._cache !== null) {
+      this._cache = null;
+      this._ev.notify();
+    }
+  }
+  get current() {
+    return _nullishCoalesce(this._cache, () => ( (this._cache = this._toImmutable())));
+  }
+};
+
+// src/refs/ValueRef.ts
+var ValueRef = class extends ImmutableRef {
+  constructor(initialValue) {
+    super();
+    this._value = freeze(initialValue);
+  }
+  /** @internal */
+  _toImmutable() {
+    return this._value;
+  }
+  set(newValue) {
+    if (this._value !== newValue) {
+      this._value = freeze(newValue);
+      this.invalidate();
+    }
+  }
+};
+var DerivedRef = class extends ImmutableRef {
+  constructor(...args) {
+    super();
+    const transformFn = args.pop();
+    const otherRefs = args;
+    this._refs = otherRefs;
+    this._refs.forEach((ref) => {
+      ref.didInvalidate.subscribe(() => this.invalidate());
+    });
+    this._transform = transformFn;
+  }
+  /** @internal */
+  _toImmutable() {
+    return this._transform(
+      ...this._refs.map((ref) => ref.current)
+    );
+  }
+};
+
 // src/lib/position.ts
 var MIN_CODE = 32;
 var MAX_CODE = 126;
@@ -3878,12 +3956,6 @@ function HACK_addIntentAndDeletedIdToOperation(ops, deletedId) {
   });
 }
 
-// src/lib/freeze.ts
-var freeze = process.env.NODE_ENV === "production" ? (
-  /* istanbul ignore next */
-  (x) => x
-) : Object.freeze;
-
 // src/crdts/LiveMap.ts
 var LiveMap = class _LiveMap extends AbstractCrdt {
   constructor(entries2) {
@@ -5172,42 +5244,6 @@ var ClientMsgCode = /* @__PURE__ */ ((ClientMsgCode2) => {
   return ClientMsgCode2;
 })(ClientMsgCode || {});
 
-// src/refs/ImmutableRef.ts
-function merge(target, patch) {
-  let updated = false;
-  const newValue = { ...target };
-  Object.keys(patch).forEach((k) => {
-    const key = k;
-    const val = patch[key];
-    if (newValue[key] !== val) {
-      if (val === void 0) {
-        delete newValue[key];
-      } else {
-        newValue[key] = val;
-      }
-      updated = true;
-    }
-  });
-  return updated ? newValue : target;
-}
-var ImmutableRef = class {
-  constructor() {
-    this._ev = makeEventSource();
-  }
-  get didInvalidate() {
-    return this._ev.observable;
-  }
-  invalidate() {
-    if (this._cache !== void 0) {
-      this._cache = void 0;
-      this._ev.notify();
-    }
-  }
-  get current() {
-    return _nullishCoalesce(this._cache, () => ( (this._cache = this._toImmutable())));
-  }
-};
-
 // src/refs/OthersRef.ts
 function makeUser(conn, presence) {
   const { connectionId, id, info } = conn;
@@ -5359,40 +5395,6 @@ var PatchableRef = class extends ImmutableRef {
   }
 };
 
-// src/refs/ValueRef.ts
-var ValueRef = class extends ImmutableRef {
-  constructor(initialValue) {
-    super();
-    this._value = freeze(initialValue);
-  }
-  /** @internal */
-  _toImmutable() {
-    return this._value;
-  }
-  set(newValue) {
-    this._value = freeze(newValue);
-    this.invalidate();
-  }
-};
-var DerivedRef = class extends ImmutableRef {
-  constructor(...args) {
-    super();
-    const transformFn = args.pop();
-    const otherRefs = args;
-    this._refs = otherRefs;
-    this._refs.forEach((ref) => {
-      ref.didInvalidate.subscribe(() => this.invalidate());
-    });
-    this._transform = transformFn;
-  }
-  /** @internal */
-  _toImmutable() {
-    return this._transform(
-      ...this._refs.map((ref) => ref.current)
-    );
-  }
-};
-
 // src/room.ts
 var MAX_SOCKET_MESSAGE_SIZE = 1024 * 1024 - 1024;
 function makeIdFactory(connectionId) {
@@ -5500,9 +5502,9 @@ function createRoom(options, config) {
     others: new OthersRef(),
     initialStorage,
     idFactory: null,
-    // Y.js
-    provider: void 0,
-    onProviderUpdate: makeEventSource(),
+    // The Yjs provider associated to this room
+    yjsProvider: void 0,
+    yjsProviderDidChange: makeEventSource(),
     // Storage
     clock: 0,
     opClock: 0,
@@ -6516,6 +6518,7 @@ ${Array.from(traces).join("\n\n")}`
       _addToRealUndoStack(historyOps, batchUpdates);
     }
   }
+  const syncSourceForStorage = config.createSyncSource();
   function getStorageStatus() {
     if (context.root === void 0) {
       return _getStorage$ === null ? "not-loaded" : "loading";
@@ -6530,6 +6533,9 @@ ${Array.from(traces).join("\n\n")}`
       _lastStorageStatus = storageStatus;
       eventHub.storageStatus.notify(storageStatus);
     }
+    syncSourceForStorage.setSyncStatus(
+      storageStatus === "synchronizing" ? "synchronizing" : "synchronized"
+    );
   }
   function isPresenceReady() {
     return self.current !== null;
@@ -6919,6 +6925,12 @@ ${Array.from(traces).join("\n\n")}`
   async function markInboxNotificationAsRead(inboxNotificationId) {
     await batchedMarkInboxNotificationsAsRead.get(inboxNotificationId);
   }
+  const syncSourceForYjs = config.createSyncSource();
+  function yjsStatusDidChange(status) {
+    return syncSourceForYjs.setSyncStatus(
+      status === "synchronizing" ? "synchronizing" : "synchronized"
+    );
+  }
   return Object.defineProperty(
     {
       [kInternal]: {
@@ -6934,14 +6946,16 @@ ${Array.from(traces).join("\n\n")}`
           return context.nodes.size;
         },
         // prettier-ignore
-        getProvider() {
-          return context.provider;
+        getYjsProvider() {
+          return context.yjsProvider;
         },
-        setProvider(provider) {
-          context.provider = provider;
-          context.onProviderUpdate.notify();
+        setYjsProvider(newProvider) {
+          _optionalChain([context, 'access', _155 => _155.yjsProvider, 'optionalAccess', _156 => _156.off, 'call', _157 => _157("status", yjsStatusDidChange)]);
+          context.yjsProvider = newProvider;
+          _optionalChain([newProvider, 'optionalAccess', _158 => _158.on, 'call', _159 => _159("status", yjsStatusDidChange)]);
+          context.yjsProviderDidChange.notify();
         },
-        onProviderUpdate: context.onProviderUpdate.observable,
+        yjsProviderDidChange: context.yjsProviderDidChange.observable,
         // send metadata when using a text editor
         reportTextEditor,
         // create a text mention when using a text editor
@@ -6973,6 +6987,9 @@ ${Array.from(traces).join("\n\n")}`
       reconnect: () => managedSocket.reconnect(),
       disconnect: () => managedSocket.disconnect(),
       destroy: () => {
+        syncSourceForStorage.destroy();
+        _optionalChain([context, 'access', _160 => _160.yjsProvider, 'optionalAccess', _161 => _161.off, 'call', _162 => _162("status", yjsStatusDidChange)]);
+        syncSourceForYjs.destroy();
         uninstallBgTabSpy();
         managedSocket.destroy();
       },
@@ -7109,7 +7126,7 @@ function makeClassicSubscribeFn(events) {
     }
     if (isLiveNode(first)) {
       const node = first;
-      if (_optionalChain([options, 'optionalAccess', _155 => _155.isDeep])) {
+      if (_optionalChain([options, 'optionalAccess', _163 => _163.isDeep])) {
         const storageCallback = second;
         return subscribeToLiveStructureDeeply(node, storageCallback);
       } else {
@@ -7229,15 +7246,16 @@ function createClient(options) {
           createSocket: makeCreateSocketDelegateForRoom(
             roomId,
             baseUrl,
-            _optionalChain([clientOptions, 'access', _156 => _156.polyfills, 'optionalAccess', _157 => _157.WebSocket])
+            _optionalChain([clientOptions, 'access', _164 => _164.polyfills, 'optionalAccess', _165 => _165.WebSocket])
           ),
           authenticate: makeAuthDelegateForRoom(roomId, authManager)
         })),
         enableDebugLogging: clientOptions.enableDebugLogging,
-        unstable_batchedUpdates: _optionalChain([options2, 'optionalAccess', _158 => _158.unstable_batchedUpdates]),
+        unstable_batchedUpdates: _optionalChain([options2, 'optionalAccess', _166 => _166.unstable_batchedUpdates]),
         baseUrl,
         unstable_fallbackToHTTP: !!clientOptions.unstable_fallbackToHTTP,
-        unstable_streamData: !!clientOptions.unstable_streamData
+        unstable_streamData: !!clientOptions.unstable_streamData,
+        createSyncSource
       }
     );
     const newRoomDetails = {
@@ -7250,7 +7268,7 @@ function createClient(options) {
     const shouldConnect = _nullishCoalesce(options2.autoConnect, () => ( true));
     if (shouldConnect) {
       if (typeof atob === "undefined") {
-        if (_optionalChain([clientOptions, 'access', _159 => _159.polyfills, 'optionalAccess', _160 => _160.atob]) === void 0) {
+        if (_optionalChain([clientOptions, 'access', _167 => _167.polyfills, 'optionalAccess', _168 => _168.atob]) === void 0) {
           throw new Error(
             "You need to polyfill atob to use the client in your environment. Please follow the instructions at https://liveblocks.io/docs/errors/liveblocks-client/atob-polyfill"
           );
@@ -7262,7 +7280,7 @@ function createClient(options) {
     return leaseRoom(newRoomDetails);
   }
   function getRoom(roomId) {
-    const room = _optionalChain([roomsById, 'access', _161 => _161.get, 'call', _162 => _162(roomId), 'optionalAccess', _163 => _163.room]);
+    const room = _optionalChain([roomsById, 'access', _169 => _169.get, 'call', _170 => _170(roomId), 'optionalAccess', _171 => _171.room]);
     return room ? room : null;
   }
   function logout() {
@@ -7274,8 +7292,8 @@ function createClient(options) {
     }
   }
   const currentUserIdStore = createStore(null);
-  const fetchPolyfill = _optionalChain([clientOptions, 'access', _164 => _164.polyfills, 'optionalAccess', _165 => _165.fetch]) || /* istanbul ignore next */
-  _optionalChain([globalThis, 'access', _166 => _166.fetch, 'optionalAccess', _167 => _167.bind, 'call', _168 => _168(globalThis)]);
+  const fetchPolyfill = _optionalChain([clientOptions, 'access', _172 => _172.polyfills, 'optionalAccess', _173 => _173.fetch]) || /* istanbul ignore next */
+  _optionalChain([globalThis, 'access', _174 => _174.fetch, 'optionalAccess', _175 => _175.bind, 'call', _176 => _176(globalThis)]);
   const notificationsAPI = createNotificationsApi({
     baseUrl,
     fetchPolyfill,
@@ -7290,7 +7308,7 @@ function createClient(options) {
   const batchedResolveUsers = new Batch(
     async (batchedUserIds) => {
       const userIds = batchedUserIds.flat();
-      const users = await _optionalChain([resolveUsers, 'optionalCall', _169 => _169({ userIds })]);
+      const users = await _optionalChain([resolveUsers, 'optionalCall', _177 => _177({ userIds })]);
       warnIfNoResolveUsers();
       return _nullishCoalesce(users, () => ( userIds.map(() => void 0)));
     },
@@ -7308,7 +7326,7 @@ function createClient(options) {
   const batchedResolveRoomsInfo = new Batch(
     async (batchedRoomIds) => {
       const roomIds = batchedRoomIds.flat();
-      const roomsInfo = await _optionalChain([resolveRoomsInfo, 'optionalCall', _170 => _170({ roomIds })]);
+      const roomsInfo = await _optionalChain([resolveRoomsInfo, 'optionalCall', _178 => _178({ roomIds })]);
       warnIfNoResolveRoomsInfo();
       return _nullishCoalesce(roomsInfo, () => ( roomIds.map(() => void 0)));
     },
@@ -7322,6 +7340,46 @@ function createClient(options) {
   function invalidateResolvedMentionSuggestions() {
     mentionSuggestionsCache.clear();
   }
+  const syncStatusSources = [];
+  const syncStatusRef = new ValueRef("synchronized");
+  function getSyncStatus() {
+    const status = syncStatusRef.current;
+    return status === "synchronizing" ? status : "synchronized";
+  }
+  function recompute() {
+    syncStatusRef.set(
+      syncStatusSources.some((src) => src.current === "synchronizing") ? "synchronizing" : syncStatusSources.some((src) => src.current === "has-local-changes") ? "has-local-changes" : "synchronized"
+    );
+  }
+  function createSyncSource() {
+    const source = new ValueRef("synchronized");
+    syncStatusSources.push(source);
+    const unsub = source.didInvalidate.subscribe(() => recompute());
+    function setSyncStatus(status) {
+      source.set(status);
+    }
+    function destroy() {
+      unsub();
+      const index = syncStatusSources.findIndex((item) => item === source);
+      if (index > -1) {
+        const [ref] = syncStatusSources.splice(index, 1);
+        const wasStillPending = ref.current !== "synchronized";
+        if (wasStillPending) {
+          recompute();
+        }
+      }
+    }
+    return { setSyncStatus, destroy };
+  }
+  {
+    const maybePreventClose = (e) => {
+      if (clientOptions.preventUnsavedChanges && syncStatusRef.current !== "synchronized") {
+        e.preventDefault();
+      }
+    };
+    const win = typeof window !== "undefined" ? window : void 0;
+    _optionalChain([win, 'optionalAccess', _179 => _179.addEventListener, 'call', _180 => _180("beforeunload", maybePreventClose)]);
+  }
   const client = Object.defineProperty(
     {
       enterRoom,
@@ -7334,6 +7392,10 @@ function createClient(options) {
         invalidateRoomsInfo: invalidateResolvedRoomsInfo,
         invalidateMentionSuggestions: invalidateResolvedMentionSuggestions
       },
+      getSyncStatus,
+      events: {
+        syncStatus: syncStatusRef.didInvalidate
+      },
       // Internal
       [kInternal]: {
         currentUserIdStore,
@@ -7348,7 +7410,8 @@ function createClient(options) {
         getUserThreads_experimental: notificationsAPI.getUserThreads_experimental,
         getUserThreadsSince_experimental: notificationsAPI.getUserThreadsSince_experimental,
         // Type-level helper only, it's effectively only an identity-function at runtime
-        as: () => client
+        as: () => client,
+        createSyncSource
       }
     },
     kInternal,
@@ -7427,7 +7490,7 @@ var commentBodyElementsTypes = {
   mention: "inline"
 };
 function traverseCommentBody(body, elementOrVisitor, possiblyVisitor) {
-  if (!body || !_optionalChain([body, 'optionalAccess', _171 => _171.content])) {
+  if (!body || !_optionalChain([body, 'optionalAccess', _181 => _181.content])) {
     return;
   }
   const element = typeof elementOrVisitor === "string" ? elementOrVisitor : void 0;
@@ -7437,13 +7500,13 @@ function traverseCommentBody(body, elementOrVisitor, possiblyVisitor) {
   for (const block of body.content) {
     if (type === "all" || type === "block") {
       if (guard(block)) {
-        _optionalChain([visitor, 'optionalCall', _172 => _172(block)]);
+        _optionalChain([visitor, 'optionalCall', _182 => _182(block)]);
       }
     }
     if (type === "all" || type === "inline") {
       for (const inline of block.children) {
         if (guard(inline)) {
-          _optionalChain([visitor, 'optionalCall', _173 => _173(inline)]);
+          _optionalChain([visitor, 'optionalCall', _183 => _183(inline)]);
         }
       }
     }
@@ -7468,7 +7531,7 @@ async function resolveUsersInCommentBody(body, resolveUsers) {
     userIds
   });
   for (const [index, userId] of userIds.entries()) {
-    const user = _optionalChain([users, 'optionalAccess', _174 => _174[index]]);
+    const user = _optionalChain([users, 'optionalAccess', _184 => _184[index]]);
     if (user) {
       resolvedUsers.set(userId, user);
     }
@@ -7591,7 +7654,7 @@ var stringifyCommentBodyPlainElements = {
   text: ({ element }) => element.text,
   link: ({ element }) => _nullishCoalesce(element.text, () => ( element.url)),
   mention: ({ element, user }) => {
-    return `@${_nullishCoalesce(_optionalChain([user, 'optionalAccess', _175 => _175.name]), () => ( element.id))}`;
+    return `@${_nullishCoalesce(_optionalChain([user, 'optionalAccess', _185 => _185.name]), () => ( element.id))}`;
   }
 };
 var stringifyCommentBodyHtmlElements = {
@@ -7621,7 +7684,7 @@ var stringifyCommentBodyHtmlElements = {
     return html`<a href="${href}" target="_blank" rel="noopener noreferrer">${_nullishCoalesce(element.text, () => ( element.url))}</a>`;
   },
   mention: ({ element, user }) => {
-    return html`<span data-mention>@${_nullishCoalesce(_optionalChain([user, 'optionalAccess', _176 => _176.name]), () => ( element.id))}</span>`;
+    return html`<span data-mention>@${_nullishCoalesce(_optionalChain([user, 'optionalAccess', _186 => _186.name]), () => ( element.id))}</span>`;
   }
 };
 var stringifyCommentBodyMarkdownElements = {
@@ -7651,19 +7714,19 @@ var stringifyCommentBodyMarkdownElements = {
     return markdown`[${_nullishCoalesce(element.text, () => ( element.url))}](${href})`;
   },
   mention: ({ element, user }) => {
-    return markdown`@${_nullishCoalesce(_optionalChain([user, 'optionalAccess', _177 => _177.name]), () => ( element.id))}`;
+    return markdown`@${_nullishCoalesce(_optionalChain([user, 'optionalAccess', _187 => _187.name]), () => ( element.id))}`;
   }
 };
 async function stringifyCommentBody(body, options) {
-  const format = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _178 => _178.format]), () => ( "plain"));
-  const separator = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _179 => _179.separator]), () => ( (format === "markdown" ? "\n\n" : "\n")));
+  const format = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _188 => _188.format]), () => ( "plain"));
+  const separator = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _189 => _189.separator]), () => ( (format === "markdown" ? "\n\n" : "\n")));
   const elements = {
     ...format === "html" ? stringifyCommentBodyHtmlElements : format === "markdown" ? stringifyCommentBodyMarkdownElements : stringifyCommentBodyPlainElements,
-    ..._optionalChain([options, 'optionalAccess', _180 => _180.elements])
+    ..._optionalChain([options, 'optionalAccess', _190 => _190.elements])
   };
   const resolvedUsers = await resolveUsersInCommentBody(
     body,
-    _optionalChain([options, 'optionalAccess', _181 => _181.resolveUsers])
+    _optionalChain([options, 'optionalAccess', _191 => _191.resolveUsers])
   );
   const blocks = body.content.flatMap((block, blockIndex) => {
     switch (block.type) {
@@ -7954,12 +8017,12 @@ function legacy_patchImmutableNode(state, path, update) {
         }
         const newState = Object.assign({}, state);
         for (const key in update.updates) {
-          if (_optionalChain([update, 'access', _182 => _182.updates, 'access', _183 => _183[key], 'optionalAccess', _184 => _184.type]) === "update") {
+          if (_optionalChain([update, 'access', _192 => _192.updates, 'access', _193 => _193[key], 'optionalAccess', _194 => _194.type]) === "update") {
             const val = update.node.get(key);
             if (val !== void 0) {
               newState[key] = lsonToJson(val);
             }
-          } else if (_optionalChain([update, 'access', _185 => _185.updates, 'access', _186 => _186[key], 'optionalAccess', _187 => _187.type]) === "delete") {
+          } else if (_optionalChain([update, 'access', _195 => _195.updates, 'access', _196 => _196[key], 'optionalAccess', _197 => _197.type]) === "delete") {
             delete newState[key];
           }
         }
@@ -8020,12 +8083,12 @@ function legacy_patchImmutableNode(state, path, update) {
         }
         const newState = Object.assign({}, state);
         for (const key in update.updates) {
-          if (_optionalChain([update, 'access', _188 => _188.updates, 'access', _189 => _189[key], 'optionalAccess', _190 => _190.type]) === "update") {
+          if (_optionalChain([update, 'access', _198 => _198.updates, 'access', _199 => _199[key], 'optionalAccess', _200 => _200.type]) === "update") {
             const value = update.node.get(key);
             if (value !== void 0) {
               newState[key] = lsonToJson(value);
             }
-          } else if (_optionalChain([update, 'access', _191 => _191.updates, 'access', _192 => _192[key], 'optionalAccess', _193 => _193.type]) === "delete") {
+          } else if (_optionalChain([update, 'access', _201 => _201.updates, 'access', _202 => _202[key], 'optionalAccess', _203 => _203.type]) === "delete") {
             delete newState[key];
           }
         }
@@ -8096,9 +8159,9 @@ function makePoller(callback, intervalMs, options) {
   const startTime = performance.now();
   const doc = typeof document !== "undefined" ? document : void 0;
   const win = typeof window !== "undefined" ? window : void 0;
-  const maxStaleTimeMs = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _194 => _194.maxStaleTimeMs]), () => ( Number.POSITIVE_INFINITY));
+  const maxStaleTimeMs = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _204 => _204.maxStaleTimeMs]), () => ( Number.POSITIVE_INFINITY));
   const context = {
-    inForeground: _optionalChain([doc, 'optionalAccess', _195 => _195.visibilityState]) !== "hidden",
+    inForeground: _optionalChain([doc, 'optionalAccess', _205 => _205.visibilityState]) !== "hidden",
     lastSuccessfulPollAt: startTime,
     count: 0,
     backoff: 0
@@ -8176,10 +8239,10 @@ function makePoller(callback, intervalMs, options) {
     pollNowIfStale();
   }
   function onVisibilityChange() {
-    setInForeground(_optionalChain([doc, 'optionalAccess', _196 => _196.visibilityState]) !== "hidden");
+    setInForeground(_optionalChain([doc, 'optionalAccess', _206 => _206.visibilityState]) !== "hidden");
   }
-  _optionalChain([doc, 'optionalAccess', _197 => _197.addEventListener, 'call', _198 => _198("visibilitychange", onVisibilityChange)]);
-  _optionalChain([win, 'optionalAccess', _199 => _199.addEventListener, 'call', _200 => _200("online", onVisibilityChange)]);
+  _optionalChain([doc, 'optionalAccess', _207 => _207.addEventListener, 'call', _208 => _208("visibilitychange", onVisibilityChange)]);
+  _optionalChain([win, 'optionalAccess', _209 => _209.addEventListener, 'call', _210 => _210("online", onVisibilityChange)]);
   fsm.start();
   return {
     inc,