@pluv/client 0.8.1 → 0.9.0

package/dist/index.mjs

@@ -49,10 +49,18 @@ var AbstractRoom = class {
   }
 };
 
+// src/AbstractStorageStore.ts
+var AbstractStorageStore = class {
+  constructor(room) {
+    this.room = room;
+  }
+};
+
 // src/CrdtManager.ts
 import { doc } from "@pluv/crdt-yjs";
 var CrdtManager = class {
   constructor(options = {}) {
+    this.initialized = false;
     const { encodedState, initialStorage } = options;
     const _doc = encodedState ? doc().applyUpdate(encodedState) : null;
     if (_doc && !!Object.keys(_doc.toJSON()).length) {
@@ -62,12 +70,50 @@ var CrdtManager = class {
     _doc == null ? void 0 : _doc.destroy();
     this.doc = 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(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
@@ -151,6 +197,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";
@@ -256,13 +327,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,
@@ -272,10 +370,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
     };
@@ -342,6 +438,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 = {
@@ -358,8 +475,7 @@ var PluvRoom = class extends AbstractRoom {
       initialPresence,
       presence
     });
-    if (initialStorage)
-      this._initialStorage = initialStorage;
+    this._crdtManager = new CrdtManager({ initialStorage });
   }
   get webSocket() {
     return this._state.webSocket;
@@ -388,19 +504,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;
       }
@@ -414,27 +528,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() {
@@ -442,6 +553,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;
@@ -514,7 +644,6 @@ var PluvRoom = class extends AbstractRoom {
     if (canClose)
       this._state.webSocket.close();
     this._detachWsListeners();
-    this._stateNotifier.subjects["myself"].next(null);
   }
   _detachWindowListeners() {
     if (!this._windowListeners)
@@ -554,23 +683,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) {
@@ -591,6 +708,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":
@@ -686,28 +822,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) {
@@ -721,14 +857,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) {
@@ -776,7 +909,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;
@@ -786,13 +921,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 }
@@ -817,14 +945,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;
+      });
     });
   }
   /**
@@ -997,6 +1129,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,
@@ -1025,14 +1158,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;
@@ -1178,6 +1311,7 @@ __export(y_exports, {
 import { array, map, text, object } from "@pluv/crdt-yjs";
 export {
   AbstractRoom,
+  AbstractStorageStore,
   ConnectionState,
   MockedRoom,
   PluvClient,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/client",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "@pluv/io frontend client",
   "author": "leedavidcs",
   "license": "MIT",
@@ -17,19 +17,21 @@
     "access": "public"
   },
   "dependencies": {
+    "@playwright/test": "^1.35.1",
+    "@types/react": "^18.2.13",
     "wonka": "^6.3.2",
-    "@pluv/crdt-yjs": "^0.3.8",
-    "@pluv/types": "^0.2.0"
+    "@pluv/crdt-yjs": "^0.4.0",
+    "@pluv/types": "^0.2.1"
   },
   "peerDependencies": {
     "yjs": "^13.0.0"
   },
   "devDependencies": {
-    "tsup": "^6.7.0",
-    "typescript": "^5.0.4",
-    "yjs": "^13.6.1",
-    "@pluv/tsconfig": "^0.1.6",
-    "eslint-config-pluv": "^0.1.12"
+    "tsup": "^7.0.0",
+    "typescript": "^5.1.3",
+    "yjs": "^13.6.4",
+    "@pluv/tsconfig": "^0.1.7",
+    "eslint-config-pluv": "^0.1.13"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",

package/src/AbstractStorageStore.ts

@@ -0,0 +1,21 @@
+import { MaybePromise } from "@pluv/types";
+
+export abstract class AbstractStorageStore {
+    public room: string;
+
+    constructor(room: string) {
+        this.room = room;
+    }
+
+    public abstract addUpdate(update: string): Promise<void>;
+
+    public abstract destroy(): Promise<void>;
+
+    public abstract flatten(encodedState: string): Promise<void>;
+
+    public abstract getShouldFlatten(): Promise<boolean>;
+
+    public abstract getUpdates(start?: number): Promise<readonly string[]>;
+
+    public abstract initialize(): Promise<void>;
+}

package/src/CrdtManager.ts

@@ -9,8 +9,15 @@ export interface CrdtManagerOptions<
     initialStorage?: () => TStorage;
 }
 
+interface CrdtManagerInitializeParams {
+    onInitialized?: () => void;
+    origin?: any;
+    update: string | readonly string[];
+}
+
 export class CrdtManager<TStorage extends Record<string, AbstractType<any>>> {
     public doc: YjsDoc<TStorage>;
+    public initialized: boolean = false;
 
     constructor(options: CrdtManagerOptions<TStorage> = {}) {
         const { encodedState, initialStorage } = options;
@@ -30,6 +37,23 @@ export class CrdtManager<TStorage extends Record<string, AbstractType<any>>> {
         this.doc = doc<TStorage>(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
+     */
+    public applyUpdate(update: string | readonly string[], origin?: any): this {
+        if (!this.initialized) return this;
+
+        const updates: readonly string[] =
+            typeof update === "string" ? [update] : update;
+
+        this._applyDocUpdates(this.doc, updates, origin);
+
+        return this;
+    }
+
     public destroy(): void {
         this.doc.destroy();
     }
@@ -37,4 +61,44 @@ export class CrdtManager<TStorage extends Record<string, AbstractType<any>>> {
     public get<TKey extends keyof TStorage>(key: TKey): TStorage[TKey] {
         return this.doc.get(key);
     }
+
+    public initialize(params: CrdtManagerInitializeParams): this {
+        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(doc<TStorage>(), updates, origin);
+
+        this.initialized = true;
+
+        if (!!Object.keys(_doc.toJSON()).length) {
+            this.doc = _doc;
+        } else {
+            _doc.destroy();
+        }
+
+        onInitialized?.();
+
+        return this;
+    }
+
+    private _applyDocUpdates(
+        yjsDoc: YjsDoc<TStorage>,
+        updates: readonly string[],
+        origin?: string
+    ): YjsDoc<TStorage> {
+        yjsDoc.transact(() => {
+            updates.reduce((acc, _update) => acc.applyUpdate(_update), yjsDoc);
+        }, origin);
+
+        return yjsDoc;
+    }
 }

package/src/PluvClient.ts

@@ -1,13 +1,13 @@
 import type { IOLike, JsonObject } from "@pluv/types";
 import { AbstractType } from "yjs";
-import type {
+import {
     AuthEndpoint,
-    RoomEndpoints,
+    PluvRoom,
     PluvRoomOptions,
-    WsEndpoint,
     RoomConfig,
+    RoomEndpoints,
+    WsEndpoint,
 } from "./PluvRoom";
-import { PluvRoom } from "./PluvRoom";
 
 export type PluvClientOptions<TIO extends IOLike> = RoomEndpoints<TIO> & {
     debug?: boolean;
@@ -40,6 +40,7 @@ export class PluvClient<TIO extends IOLike = IOLike> {
         if (oldRoom) return oldRoom;
 
         const newRoom = new PluvRoom<TIO, TPresence, TStorage>(room, {
+            addons: options.addons,
             authEndpoint: this._authEndpoint,
             debug: options.debug,
             initialPresence: options.initialPresence,
@@ -90,12 +91,14 @@ export class PluvClient<TIO extends IOLike = IOLike> {
         return Array.from(this._rooms.values());
     };
 
-    public leave = (room: string | PluvRoom<TIO, any, any>): void => {
+    public leave = async (
+        room: string | PluvRoom<TIO, any, any>
+    ): Promise<void> => {
         const toLeave = typeof room === "string" ? this.getRoom(room) : room;
 
         if (!toLeave) return;
 
-        toLeave.disconnect();
+        await toLeave.disconnect();
 
         this._rooms.delete(toLeave.id);