@pluv/client 0.8.1 → 0.9.1

package/dist/index.js

@@ -58,6 +58,7 @@ var __async = (__this, __arguments, generator) => {
 var src_exports = {};
 __export(src_exports, {
   AbstractRoom: () => AbstractRoom,
+  AbstractStorageStore: () => AbstractStorageStore,
   ConnectionState: () => ConnectionState,
   MockedRoom: () => MockedRoom,
   PluvClient: () => PluvClient,
@@ -74,10 +75,18 @@ var AbstractRoom = class {
   }
 };
 
+// src/AbstractStorageStore.ts
+var AbstractStorageStore = class {
+  constructor(room) {
+    this.room = room;
+  }
+};
+
 // src/CrdtManager.ts
 var import_crdt_yjs = require("@pluv/crdt-yjs");
 var CrdtManager = class {
   constructor(options = {}) {
+    this.initialized = false;
     const { encodedState, initialStorage } = options;
     const _doc = encodedState ? (0, import_crdt_yjs.doc)().applyUpdate(encodedState) : null;
     if (_doc && !!Object.keys(_doc.toJSON()).length) {
@@ -87,12 +96,50 @@ var CrdtManager = class {
     _doc == null ? void 0 : _doc.destroy();
     this.doc = (0, import_crdt_yjs.doc)(initialStorage == null ? void 0 : initialStorage());
   }
+  /**
+   * !HACK
+   * @description If this is called before the doc is initialized. Omit the
+   * update. This unfortunately means updates can be dropped entirely
+   * @date June 13, 2023
+   */
+  applyUpdate(update, origin) {
+    if (!this.initialized)
+      return this;
+    const updates = typeof update === "string" ? [update] : update;
+    this._applyDocUpdates(this.doc, updates, origin);
+    return this;
+  }
   destroy() {
     this.doc.destroy();
   }
   get(key) {
     return this.doc.get(key);
   }
+  initialize(params) {
+    const { onInitialized, origin, update } = params;
+    const updates = typeof update === "string" ? [update] : update;
+    if (!updates.length)
+      return this;
+    if (this.initialized) {
+      this._applyDocUpdates(this.doc, updates, origin);
+      return this;
+    }
+    const _doc = this._applyDocUpdates((0, import_crdt_yjs.doc)(), updates, origin);
+    this.initialized = true;
+    if (!!Object.keys(_doc.toJSON()).length) {
+      this.doc = _doc;
+    } else {
+      _doc.destroy();
+    }
+    onInitialized == null ? void 0 : onInitialized();
+    return this;
+  }
+  _applyDocUpdates(yjsDoc, updates, origin) {
+    yjsDoc.transact(() => {
+      updates.reduce((acc, _update) => acc.applyUpdate(_update), yjsDoc);
+    }, origin);
+    return yjsDoc;
+  }
 };
 
 // src/CrdtNotifier.ts
@@ -176,6 +223,31 @@ var StateNotifier = class {
   }
 };
 
+// src/StorageStore.ts
+var StorageStore = class extends AbstractStorageStore {
+  addUpdate() {
+    return Promise.resolve();
+  }
+  applyUpdates() {
+    return Promise.resolve();
+  }
+  destroy() {
+    return Promise.resolve();
+  }
+  flatten() {
+    return Promise.resolve();
+  }
+  getShouldFlatten() {
+    return Promise.resolve(false);
+  }
+  getUpdates() {
+    return Promise.resolve([]);
+  }
+  initialize() {
+    return Promise.resolve();
+  }
+};
+
 // src/types.ts
 var ConnectionState = /* @__PURE__ */ ((ConnectionState2) => {
   ConnectionState2["Closed"] = "Closed";
@@ -281,13 +353,40 @@ var UsersManager = class {
   }
 };
 
+// src/utils/debounce.ts
+var debounce = (fn, options) => {
+  const { wait, immediate = false } = options != null ? options : {};
+  let prevResult;
+  let timeout = null;
+  return (...args) => {
+    if (typeof timeout === "number")
+      clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      timeout = null;
+      if (!immediate)
+        prevResult = fn(args);
+    }, wait);
+    if (immediate && !timeout) {
+      fn(args);
+      return;
+    }
+    return prevResult;
+  };
+};
+
 // src/PluvRoom.ts
+var ADD_TO_STORAGE_STATE_DEBOUNCE_MS = 1e3;
 var HEARTBEAT_INTERVAL_MS = 1e4;
 var PONG_TIMEOUT_MS = 2e3;
 var RECONNECT_TIMEOUT_MS = 3e4;
+var Y_ORIGIN_INITIALIZED = "$INITIALIZED";
+var DEFAULT_PLUV_CLIENT_ADDON = (input) => ({
+  storage: new StorageStore(input.room.id)
+});
 var PluvRoom = class extends AbstractRoom {
   constructor(room, options) {
     const {
+      addons = [],
       authEndpoint,
       debug = false,
       initialPresence,
@@ -297,10 +396,8 @@ var PluvRoom = class extends AbstractRoom {
       wsEndpoint
     } = options;
     super(room);
-    this._crdtManager = null;
     this._crdtNotifier = new CrdtNotifier();
     this._eventNotifier = new EventNotifier();
-    this._initialStorage = null;
     this._intervals = {
       heartbeat: null
     };
@@ -367,6 +464,27 @@ var PluvRoom = class extends AbstractRoom {
         { presence }
       );
     };
+    this._flattenStorageStore = debounce(
+      () => __async(this, null, function* () {
+        const shouldFlatten = yield this._storageStore.getShouldFlatten();
+        if (!shouldFlatten)
+          return;
+        const updates = yield this._storageStore.getUpdates();
+        this._crdtManager.applyUpdate(updates, this);
+        const encodedState = this._crdtManager.doc.encodeStateAsUpdate();
+        yield this._storageStore.flatten(encodedState);
+      }),
+      { wait: ADD_TO_STORAGE_STATE_DEBOUNCE_MS }
+    );
+    this._getAddon = (addons) => {
+      return addons.reduce(
+        (acc, addon) => () => __spreadValues(__spreadValues({}, acc({ room: this })), addon({ room: this })),
+        DEFAULT_PLUV_CLIENT_ADDON
+      );
+    };
+    const addon = this._getAddon(addons);
+    const { storage } = __spreadValues(__spreadValues({}, DEFAULT_PLUV_CLIENT_ADDON({ room: this })), addon({ room: this }));
+    this._storageStore = storage;
     this._debug = debug;
     this._endpoints = { authEndpoint, wsEndpoint };
     this._listeners = {
@@ -383,8 +501,7 @@ var PluvRoom = class extends AbstractRoom {
       initialPresence,
       presence
     });
-    if (initialStorage)
-      this._initialStorage = initialStorage;
+    this._crdtManager = new CrdtManager({ initialStorage });
   }
   get webSocket() {
     return this._state.webSocket;
@@ -413,19 +530,17 @@ var PluvRoom = class extends AbstractRoom {
         oldState.connection.state = "Connecting" /* Connecting */;
         return oldState;
       });
+      yield this._storageStore.initialize();
+      yield this._applyStorageStore();
       const url = new URL(this._getWsEndpoint(this.id));
       let authToken = null;
-      try {
-        authToken = yield this._getAuthorization(this.id);
-      } catch (err) {
-        this._onAuthorizationFail(err);
-        return;
-      }
-      authToken && url.searchParams.set("token", encodeURIComponent(authToken));
       let webSocket;
       try {
+        authToken = yield this._getAuthorization(this.id);
+        authToken && url.searchParams.set("token", encodeURIComponent(authToken));
         webSocket = new WebSocket(url.toString());
       } catch (err) {
+        yield this._storageStore.destroy();
         this._onAuthorizationFail(err);
         return;
       }
@@ -439,27 +554,24 @@ var PluvRoom = class extends AbstractRoom {
     });
   }
   disconnect() {
-    var _a;
-    if (!this._endpoints.wsEndpoint) {
-      throw new Error("Must provide an wsEndpoint.");
-    }
-    if (!this._state.webSocket)
-      return;
-    const canDisconnect = [
-      "Connecting" /* Connecting */,
-      "Open" /* Open */
-    ].some((state) => this._state.connection.state === state);
-    if (!canDisconnect)
-      return;
-    this._clearInterval(this._intervals.heartbeat);
-    this._closeWs();
-    (_a = this._crdtManager) == null ? void 0 : _a.destroy();
-    this._stateNotifier.subjects["my-presence"].next(null);
-    this._updateState((oldState) => {
-      oldState.authorization.token = null;
-      oldState.connection.state = "Closed" /* Closed */;
-      oldState.webSocket = null;
-      return oldState;
+    return __async(this, null, function* () {
+      var _a;
+      if (!this._endpoints.wsEndpoint) {
+        throw new Error("Must provide an wsEndpoint.");
+      }
+      if (!this._state.webSocket)
+        return;
+      const canDisconnect = [
+        "Connecting" /* Connecting */,
+        "Open" /* Open */
+      ].some((state) => this._state.connection.state === state);
+      if (!canDisconnect)
+        return;
+      this._clearInterval(this._intervals.heartbeat);
+      this._closeWs();
+      yield this._storageStore.destroy();
+      (_a = this._crdtManager) == null ? void 0 : _a.destroy();
+      this._stateNotifier.subjects["my-presence"].next(null);
     });
   }
   getConnection() {
@@ -467,6 +579,25 @@ var PluvRoom = class extends AbstractRoom {
       JSON.parse(JSON.stringify(this._state.connection))
     );
   }
+  _addToStorageStore(update) {
+    return __async(this, null, function* () {
+      yield this._storageStore.addUpdate(update);
+      this._flattenStorageStore();
+    });
+  }
+  _applyStorageStore() {
+    return __async(this, null, function* () {
+      const updates = yield this._storageStore.getUpdates();
+      this._crdtManager.initialize({
+        onInitialized: () => {
+          this._observeCrdt();
+        },
+        origin: Y_ORIGIN_INITIALIZED,
+        update: updates
+      });
+      this._emitSharedTypes();
+    });
+  }
   _attachWindowListeners() {
     if (typeof window === "undefined")
       return;
@@ -539,7 +670,6 @@ var PluvRoom = class extends AbstractRoom {
     if (canClose)
       this._state.webSocket.close();
     this._detachWsListeners();
-    this._stateNotifier.subjects["myself"].next(null);
   }
   _detachWindowListeners() {
     if (!this._windowListeners)
@@ -579,23 +709,11 @@ var PluvRoom = class extends AbstractRoom {
     );
     this._wsListeners = null;
   }
-  _getAuthorization(room) {
-    return __async(this, null, function* () {
-      const fetchOptions = this._getAuthFetchOptions(room);
-      if (!fetchOptions)
-        return null;
-      const { url, options } = fetchOptions;
-      const res = yield fetch(url, options);
-      if (!res.ok || res.status !== 200) {
-        throw new Error("Room is unauthorized");
-      }
-      try {
-        return yield res.text().then((text2) => text2.trim());
-      } catch (err) {
-        throw new Error(
-          err instanceof Error ? err.message : "Room is unauthorized"
-        );
-      }
+  _emitSharedTypes() {
+    const sharedTypes = this._crdtManager.doc.getSharedTypes();
+    Object.entries(sharedTypes).forEach(([prop, sharedType]) => {
+      const serialized = sharedType.toJSON();
+      this._crdtNotifier.subject(prop).next(serialized);
     });
   }
   _getAuthFetchOptions(room) {
@@ -616,6 +734,25 @@ var PluvRoom = class extends AbstractRoom {
     const result = this._endpoints.authEndpoint(room);
     return typeof result === "string" ? { url: result, options: {} } : result;
   }
+  _getAuthorization(room) {
+    return __async(this, null, function* () {
+      const fetchOptions = this._getAuthFetchOptions(room);
+      if (!fetchOptions)
+        return null;
+      const { url, options } = fetchOptions;
+      const res = yield fetch(url, options);
+      if (!res.ok || res.status !== 200) {
+        throw new Error("Room is unauthorized");
+      }
+      try {
+        return yield res.text().then((text2) => text2.trim());
+      } catch (err) {
+        throw new Error(
+          err instanceof Error ? err.message : "Room is unauthorized"
+        );
+      }
+    });
+  }
   _getWsEndpoint(room) {
     switch (typeof this._endpoints.wsEndpoint) {
       case "undefined":
@@ -711,28 +848,28 @@ var PluvRoom = class extends AbstractRoom {
     });
   }
   _handleStorageReceivedMessage(message) {
-    var _a;
-    const { connectionId } = message;
-    if (!connectionId)
-      return;
-    if (!this._state.webSocket)
-      throw new Error("Could not find WebSocket");
-    const data = message.data;
-    this._crdtManager = new CrdtManager({
-      encodedState: data.state,
-      initialStorage: (_a = this._initialStorage) != null ? _a : void 0
-    });
-    this._observeCrdt();
-    const sharedTypes = this._crdtManager.doc.getSharedTypes();
-    Object.keys(sharedTypes).forEach((key) => {
-      const sharedType = sharedTypes[key];
-      const serialized = sharedType.toJSON();
-      this._crdtNotifier.subject(key).next(serialized);
-    });
-    const update = this._crdtManager.doc.encodeStateAsUpdate();
-    this._sendMessage({
-      type: "$UPDATE_STORAGE",
-      data: { origin: "$STORAGE_RECEIVED", update }
+    return __async(this, null, function* () {
+      const { connectionId } = message;
+      if (!connectionId)
+        return;
+      if (!this._state.webSocket)
+        throw new Error("Could not find WebSocket");
+      const data = message.data;
+      this._crdtManager.initialize({
+        onInitialized: () => __async(this, null, function* () {
+          this._observeCrdt();
+        }),
+        origin: Y_ORIGIN_INITIALIZED,
+        update: data.state
+      });
+      const encodedState = this._crdtManager.doc.encodeStateAsUpdate();
+      yield this._storageStore.addUpdate(encodedState);
+      this._emitSharedTypes();
+      const update = this._crdtManager.doc.encodeStateAsUpdate();
+      this._sendMessage({
+        type: "$UPDATE_STORAGE",
+        data: { origin: Y_ORIGIN_INITIALIZED, update }
+      });
     });
   }
   _handleStorageUpdatedMessage(message) {
@@ -746,14 +883,11 @@ var PluvRoom = class extends AbstractRoom {
       return;
     this._crdtManager.doc.applyUpdate(data.state, "$STORAGE_UPDATED");
     const sharedTypes = this._crdtManager.doc.getSharedTypes();
-    Object.keys(sharedTypes).forEach((key) => {
+    Object.entries(sharedTypes).forEach(([prop, sharedType]) => {
       if (!this._crdtManager)
         return;
-      const sharedType = sharedTypes[key];
-      if (!sharedType)
-        return;
       const serialized = sharedType.toJSON();
-      this._crdtNotifier.subject(key).next(serialized);
+      this._crdtNotifier.subject(prop).next(serialized);
     });
   }
   _handleUserJoinedMessage(message) {
@@ -801,7 +935,9 @@ var PluvRoom = class extends AbstractRoom {
     const unsubscribe = this._crdtManager.doc.subscribe(
       (update, _origin) => {
         const origin = _origin != null ? _origin : null;
-        if (!this._crdtManager)
+        this._addToStorageStore(update);
+        this._emitSharedTypes();
+        if (origin === Y_ORIGIN_INITIALIZED || origin === this)
           return;
         if (!this._state.webSocket)
           return;
@@ -811,13 +947,6 @@ var PluvRoom = class extends AbstractRoom {
           return;
         if (origin === "$STORAGE_UPDATED")
           return;
-        const sharedTypes = this._crdtManager.doc.getSharedTypes();
-        Object.entries(sharedTypes).forEach(([prop, sharedType]) => {
-          if (!this._crdtManager)
-            return;
-          const serialized = sharedType.toJSON();
-          this._crdtNotifier.subject(prop).next(serialized);
-        });
         this._sendMessage({
           type: "$UPDATE_STORAGE",
           data: { origin, update }
@@ -842,14 +971,18 @@ var PluvRoom = class extends AbstractRoom {
    * @date August 19, 2022
    */
   _onClose(event) {
-    this._logDebug("WebSocket closed");
-    !!event.reason && this._logDebug(event.reason);
-    this._clearInterval(this._intervals.heartbeat);
-    this._clearTimeout(this._timeouts.pong);
-    this._updateState((oldState) => {
-      oldState.connection.state = "Closed" /* Closed */;
-      oldState.webSocket = null;
-      return oldState;
+    return __async(this, null, function* () {
+      this._logDebug("WebSocket closed");
+      !!event.reason && this._logDebug(event.reason);
+      this._clearInterval(this._intervals.heartbeat);
+      this._clearTimeout(this._timeouts.pong);
+      this._stateNotifier.subjects["myself"].next(null);
+      this._updateState((oldState) => {
+        oldState.authorization.token = null;
+        oldState.connection.state = "Closed" /* Closed */;
+        oldState.webSocket = null;
+        return oldState;
+      });
     });
   }
   /**
@@ -1022,6 +1155,7 @@ var PluvClient = class {
       if (oldRoom)
         return oldRoom;
       const newRoom = new PluvRoom(room, {
+        addons: options.addons,
         authEndpoint: this._authEndpoint,
         debug: options.debug,
         initialPresence: options.initialPresence,
@@ -1050,14 +1184,14 @@ var PluvClient = class {
     this.getRooms = () => {
       return Array.from(this._rooms.values());
     };
-    this.leave = (room) => {
+    this.leave = (room) => __async(this, null, function* () {
       const toLeave = typeof room === "string" ? this.getRoom(room) : room;
       if (!toLeave)
         return;
-      toLeave.disconnect();
+      yield toLeave.disconnect();
       this._rooms.delete(toLeave.id);
       this._logDebug(`Left and deleted room: ${room}`);
-    };
+    });
     const { authEndpoint, debug = false, wsEndpoint } = options;
     this._authEndpoint = authEndpoint;
     this._debug = debug;
@@ -1204,6 +1338,7 @@ var import_crdt_yjs2 = require("@pluv/crdt-yjs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AbstractRoom,
+  AbstractStorageStore,
   ConnectionState,
   MockedRoom,
   PluvClient,