@pluv/client 2.0.2 → 2.2.0

package/dist/index.mjs

@@ -50,6 +50,7 @@ var AbstractStorageStore = class {
 
 // src/constants.ts
 var MAX_PRESENCE_SIZE_BYTES = 512;
+var PLUV_PRESENCE_META_KEY = "__pluv";
 
 // src/PluvProcedure.ts
 var PluvProcedure = class _PluvProcedure {
@@ -87,7 +88,7 @@ var PluvProcedure = class _PluvProcedure {
 };
 
 // src/PluvRoom.ts
-import { ConnectionState } from "@pluv/types";
+import { ConnectionState, StorageState } from "@pluv/types";
 
 // src/CrdtManager.ts
 import { noop } from "@pluv/crdt";
@@ -96,7 +97,7 @@ var CrdtManager = class {
     this.initialized = false;
     const { initialStorage = noop.doc({}) } = options;
     this._docFactory = initialStorage;
-    this.doc = initialStorage.getEmpty();
+    this.doc = this._docFactory.getEmpty();
   }
   /**
    * !HACK
@@ -136,11 +137,7 @@ var CrdtManager = class {
     if (!updates.length) return this;
     const initialized = this._docFactory.getInitialized();
     const reference = initialized.get();
-    this.doc = this._applyDocUpdates(
-      this._docFactory.getEmpty(),
-      updates,
-      origin
-    ).rebuildStorage(reference);
+    this.doc = this._applyDocUpdates(this.doc, updates, origin).rebuildStorage(reference);
     this.initialized = true;
     initialized.destroy();
     return this;
@@ -200,31 +197,21 @@ var EventNotifier = class {
   }
 };
 
-// src/OtherNotifier.ts
+// src/ListenerManager.ts
 import { makeSubject as makeSubject3, subscribe as subscribe3 } from "wonka";
-var OtherNotifier = class {
+var ListenerManager = class {
   constructor() {
-    this._subjects = /* @__PURE__ */ new Map();
-  }
-  clear() {
-    this._subjects.forEach((subject) => {
-      subject.next(null);
-    });
-    this._subjects.clear();
-  }
-  delete(clientId) {
-    this.subject(clientId).next(null);
-    this._subjects.delete(clientId);
-  }
-  subject(clientId) {
-    const subject = this._subjects.get(clientId);
-    if (subject) return subject;
-    const newSubject = makeSubject3();
-    this._subjects.set(clientId, newSubject);
-    return newSubject;
+    this.subjects = {
+      close: makeSubject3(),
+      error: makeSubject3(),
+      message: makeSubject3(),
+      open: makeSubject3()
+    };
   }
-  subscribe(clientId, callback) {
-    const source = this.subject(clientId).source;
+  subscribe(kind, callback) {
+    var _a;
+    const source = (_a = this.subjects[kind]) == null ? void 0 : _a.source;
+    if (!source) return () => void 0;
     return subscribe3(callback)(source).unsubscribe;
   }
 };
@@ -445,6 +432,9 @@ var UsersManager = class {
     );
     const presence = __spreadValues(__spreadValues(__spreadValues({}, this.initialPresence), cleanedPresence), cleanedPatch);
     const validated = this._presence ? this._presence.parse(presence) : presence;
+    if (!!presence[PLUV_PRESENCE_META_KEY]) {
+      validated[PLUV_PRESENCE_META_KEY] = presence[PLUV_PRESENCE_META_KEY];
+    }
     this._others.set(clientId, __spreadProps(__spreadValues({}, other), { presence: validated }));
     return validated;
   }
@@ -522,6 +512,43 @@ var UsersManager = class {
   }
 };
 
+// src/UsersNotifier.ts
+import { makeSubject as makeSubject5, subscribe as subscribe5 } from "wonka";
+var UsersNotifier = class {
+  constructor() {
+    this.others = makeSubject5();
+    this._otherSubjects = /* @__PURE__ */ new Map();
+  }
+  clear() {
+    this._otherSubjects.forEach((subject) => {
+      subject.next(null);
+    });
+    this._otherSubjects.clear();
+  }
+  delete(clientId) {
+    this.other(clientId).next(null);
+    this._otherSubjects.delete(clientId);
+  }
+  other(clientId) {
+    const subject = this._otherSubjects.get(clientId);
+    if (subject) return subject;
+    const newSubject = makeSubject5();
+    this._otherSubjects.set(clientId, newSubject);
+    return newSubject;
+  }
+  subscribeOther(clientId, callback) {
+    const source = this.other(clientId).source;
+    const subscription = subscribe5(callback)(source);
+    return subscription.unsubscribe;
+  }
+  subscribeOthers(callback) {
+    const subscription = subscribe5(
+      ({ others, event }) => callback(others, event)
+    )(this.others.source);
+    return subscription.unsubscribe;
+  }
+};
+
 // src/PluvRoom.ts
 var ADD_TO_STORAGE_STATE_DEBOUNCE_MS = 1e3;
 var HEARTBEAT_INTERVAL_MS = 1e4;
@@ -541,7 +568,7 @@ var PluvRoom = class {
     this._intervals = {
       heartbeat: null
     };
-    this._otherNotifier = new OtherNotifier();
+    this._listenerManager = new ListenerManager();
     this._publicKey = null;
     this._stateNotifier = new StateNotifier();
     this._subscriptions = {
@@ -551,6 +578,7 @@ var PluvRoom = class {
       pong: null,
       reconnect: null
     };
+    this._usersNotifier = new UsersNotifier();
     this._lastMetadata = null;
     this._state = {
       authorization: {
@@ -559,10 +587,12 @@ var PluvRoom = class {
       },
       connection: {
         attempts: 0,
-        count: 0,
         id: null,
         state: ConnectionState.Untouched
       },
+      storage: {
+        state: StorageState.Unavailable
+      },
       webSocket: null
     };
     this._windowListeners = null;
@@ -605,6 +635,9 @@ var PluvRoom = class {
     this.canUndo = () => {
       return !!this._crdtManager.doc.canUndo();
     };
+    /**
+     * @deprecated To be removed in v3. Use PluvRoom.subscribe.event instead
+     */
     this.event = new Proxy(
       (event, callback) => this._eventNotifier.subscribe(event, callback),
       {
@@ -636,23 +669,80 @@ var PluvRoom = class {
       if (typeof sharedType === "undefined") return null;
       return sharedType;
     };
+    this.getStorageLoaded = () => {
+      return this._state.storage.state === StorageState.Offline || this._state.storage.state === StorageState.Synced;
+    };
+    /**
+     * @deprecated To be removed in v3. Use PluvRoom.subscribe.other instead
+     */
     this.other = (connectionId, callback) => {
       const clientId = this._usersManager.getClientId(connectionId);
       if (!clientId) return () => void 0;
-      return this._otherNotifier.subscribe(clientId, callback);
+      return this._usersNotifier.subscribeOther(clientId, callback);
     };
     this.redo = () => {
       this._crdtManager.doc.redo();
     };
-    this.storage = (key, fn) => {
-      return this._crdtNotifier.subscribe(key, fn);
-    };
-    this.storageRoot = (fn) => {
-      return this._crdtNotifier.subcribeRoot(fn);
-    };
-    this.subscribe = (name, callback) => {
-      return this._stateNotifier.subscribe(name, callback);
+    /**
+     * @deprecated To be removed in v3. Use PluvRoom.subscribe.storage instead
+     */
+    this.storage = new Proxy(
+      (key, callback) => this._crdtNotifier.subscribe(key, callback),
+      {
+        get: (fn, prop) => {
+          if (!!prop) {
+            return (callback) => {
+              return this._crdtNotifier.subcribeRoot(callback);
+            };
+          }
+          return (callback) => {
+            return fn(prop, callback);
+          };
+        }
+      }
+    );
+    /**
+     * @deprecated To be removed in v3. Use PluvRoom.subscribe.storage instead
+     * @description Subscribes to the root storage object (serialized)
+     */
+    this.storageRoot = (callback) => {
+      return this._crdtNotifier.subcribeRoot(callback);
     };
+    this.subscribe = new Proxy(
+      (name, callback) => this._stateNotifier.subscribe(name, callback),
+      {
+        get: (fn, prop) => {
+          if (prop === "connection") {
+            return (callback) => {
+              return fn("connection", callback);
+            };
+          }
+          if (prop === "myPresence") {
+            return (callback) => {
+              return fn("my-presence", callback);
+            };
+          }
+          if (prop === "myself") {
+            return (callback) => {
+              return fn("myself", callback);
+            };
+          }
+          if (prop === "others") {
+            return (callback) => {
+              return this._usersNotifier.subscribeOthers(callback);
+            };
+          }
+          if (prop === "storageLoaded") {
+            return (callback) => {
+              return fn("storage-loaded", callback);
+            };
+          }
+          if (prop === "event") return this.event;
+          if (prop === "other") return this.other;
+          if (prop === "storage") return this.storage;
+        }
+      }
+    );
     this.transact = (fn, origin) => {
       const _origin = origin != null ? origin : this._state.connection.id;
       if (typeof _origin !== "string") return;
@@ -732,12 +822,18 @@ var PluvRoom = class {
     });
     this._crdtManager = new CrdtManager({ initialStorage });
   }
+  /**
+   * @deprecated To be removed in v3. Use `getStorageLoaded` instead.
+   */
   get storageLoaded() {
-    return this._crdtManager.initialized;
+    return this.getStorageLoaded();
   }
   get webSocket() {
     return this._state.webSocket;
   }
+  addEventListener(kind, handler) {
+    return this._listenerManager.subscribe(kind, handler);
+  }
   connect(...args) {
     return __async(this, null, function* () {
       var _a;
@@ -779,6 +875,7 @@ var PluvRoom = class {
       this._updateState((oldState) => {
         oldState.connection.attempts = 0;
         oldState.authorization.token = authToken;
+        oldState.storage.state = StorageState.Loading;
         oldState.webSocket = webSocket;
         return oldState;
       });
@@ -799,6 +896,7 @@ var PluvRoom = class {
       this._updateState((oldState) => {
         oldState.authorization.token = null;
         oldState.connection.state = ConnectionState.Closed;
+        oldState.storage.state = oldState.storage.state === StorageState.Synced ? StorageState.Offline : StorageState.Unavailable;
         oldState.webSocket = null;
         return oldState;
       });
@@ -863,9 +961,10 @@ var PluvRoom = class {
     this._detachWindowListeners();
     this._usersManager.removeMyself();
     this._usersManager.clearConnections();
-    this._otherNotifier.clear();
+    this._usersNotifier.clear();
     this._stateNotifier.subjects.myself.next(null);
     this._stateNotifier.subjects.others.next([]);
+    this._usersNotifier.others.next({ others: [], event: { kind: "clear" } });
     (_c = this._state.webSocket) == null ? void 0 : _c.close();
     this._detachWsListeners();
   }
@@ -956,7 +1055,16 @@ var PluvRoom = class {
     const deleted = this._usersManager.deleteConnection(connectionId);
     const others = this._usersManager.getOthers();
     this._stateNotifier.subjects.others.next(others);
-    if (!(deleted == null ? void 0 : deleted.remaining) && !!clientId) this._otherNotifier.delete(clientId);
+    if (!deleted) {
+      console.warn("Could not identify exited connection");
+      return;
+    }
+    const { data: user, remaining } = deleted;
+    this._usersNotifier.others.next({
+      others,
+      event: { kind: "leave", user }
+    });
+    if (!remaining && !!clientId) this._usersNotifier.delete(clientId);
   }
   _handlePresenceUpdatedMessage(message) {
     var _a;
@@ -975,19 +1083,31 @@ var PluvRoom = class {
       return;
     }
     if (!!clientId) {
-      const other = this._usersManager.getOther(connectionId);
-      this._otherNotifier.subject(clientId).next(other);
-    } else {
-      const added = this._usersManager.addConnection({
-        connectionId,
-        presence: data.presence,
-        user: message.user
-      });
-      const other = this._usersManager.getOther(connectionId);
-      this._otherNotifier.subject(added.clientId).next(other);
+      const other2 = this._usersManager.getOther(connectionId);
+      const others2 = this._usersManager.getOthers();
+      this._usersNotifier.other(clientId).next(other2);
+      this._stateNotifier.subjects.others.next(others2);
+      if (!!other2) {
+        this._usersNotifier.others.next({
+          others: others2,
+          event: { kind: "update", user: other2 }
+        });
+      }
+      return;
     }
+    const added = this._usersManager.addConnection({
+      connectionId,
+      presence: data.presence,
+      user: message.user
+    });
+    const other = this._usersManager.getOther(connectionId);
     const others = this._usersManager.getOthers();
+    this._usersNotifier.other(added.clientId).next(other);
     this._stateNotifier.subjects.others.next(others);
+    this._usersNotifier.others.next({
+      others,
+      event: { kind: "update", user: added.data }
+    });
   }
   _handleReceiveOthers(message) {
     if (!message.connectionId) return;
@@ -1004,10 +1124,14 @@ var PluvRoom = class {
       if (result.isMyself) return;
       const clientId = result.clientId;
       const other = this._usersManager.getOther(connectionId);
-      this._otherNotifier.subject(clientId).next(other);
+      this._usersNotifier.other(clientId).next(other);
     });
     const others = this._usersManager.getOthers();
     this._stateNotifier.subjects.others.next(others);
+    this._usersNotifier.others.next({
+      others,
+      event: { kind: "sync", users: others }
+    });
   }
   _handleRegisteredMessage(message) {
     return __async(this, null, function* () {
@@ -1019,7 +1143,6 @@ var PluvRoom = class {
       const data = message.data;
       const state = data.state;
       this._updateState((oldState) => {
-        oldState.connection.count += 1;
         oldState.connection.id = connectionId;
         oldState.authorization.user = user != null ? user : null;
         return oldState;
@@ -1071,6 +1194,10 @@ var PluvRoom = class {
       const encodedState = this._crdtManager.doc.getEncodedState();
       this._emitSharedTypes();
       this._observeCrdt();
+      this._updateState((oldState) => {
+        oldState.storage.state = StorageState.Synced;
+        return oldState;
+      });
       this._stateNotifier.subjects["storage-loaded"].next(true);
       this._sendMessage({
         type: "$updateStorage",
@@ -1109,6 +1236,11 @@ var PluvRoom = class {
     const quitters = this._usersManager.getOthers().filter((other) => !active.has(other.connectionId));
     quitters.forEach((quitter) => {
       this._usersManager.deleteConnection(quitter.connectionId);
+      const remaining2 = this._usersManager.getOthers();
+      this._usersNotifier.others.next({
+        others: remaining2,
+        event: { kind: "leave", user: quitter }
+      });
     });
     const remaining = this._usersManager.getOthers();
     this._stateNotifier.subjects.others.next(remaining);
@@ -1131,8 +1263,12 @@ var PluvRoom = class {
     });
     const other = this._usersManager.getOther(connectionId);
     const others = this._usersManager.getOthers();
-    this._otherNotifier.subject(added.clientId).next(other);
+    this._usersNotifier.other(added.clientId).next(other);
     this._stateNotifier.subjects.others.next(others);
+    this._usersNotifier.others.next({
+      others,
+      event: { kind: "enter", user: added.data }
+    });
   }
   _heartbeat() {
     this._clearTimeout(this._timeouts.pong);
@@ -1174,11 +1310,13 @@ var PluvRoom = class {
     this._listeners.onAuthorizationFail(authError);
     this._updateState((oldState) => {
       oldState.connection.state = ConnectionState.Unavailable;
+      oldState.storage.state = StorageState.Unavailable;
       return oldState;
     });
   }
   _onClose(event) {
     return __async(this, null, function* () {
+      this._listenerManager.subjects.close.next(event);
       this._logDebug("WebSocket closed");
       if (!!event.reason) this._logDebug(event.reason);
       const shouldRetry = [
@@ -1206,6 +1344,7 @@ var PluvRoom = class {
            */
           ConnectionState.Closed
         );
+        oldState.storage.state = oldState.storage.state === StorageState.Synced ? StorageState.Offline : StorageState.Unavailable;
         oldState.webSocket = null;
         return oldState;
       });
@@ -1222,9 +1361,11 @@ var PluvRoom = class {
    * @description Handle websocket errors in a meaningful way, should they occur
    * @date August 19, 2022
    */
-  _onError() {
+  _onError(event) {
+    this._listenerManager.subjects.error.next(event);
   }
   _onMessage(event) {
+    this._listenerManager.subjects.message.next(event);
     const message = this._parseMessage(event);
     if (!message) return;
     const shouldLog = typeof this._debug === "boolean" ? this._debug : this._debug.output.find((value) => value === message.type);
@@ -1272,7 +1413,8 @@ var PluvRoom = class {
       default:
     }
   }
-  _onOpen() {
+  _onOpen(event) {
+    this._listenerManager.subjects.open.next(event);
     if (this._state.connection.state !== ConnectionState.Connecting) return;
     this._logDebug("WebSocket connected");
     this._updateState((oldState) => {
@@ -1290,6 +1432,7 @@ var PluvRoom = class {
       if (this._state.connection.state === ConnectionState.Closed) return;
       this._updateState((oldState) => {
         oldState.connection.state = ConnectionState.Unavailable;
+        oldState.storage.state = oldState.storage.state === StorageState.Synced ? StorageState.Offline : StorageState.Unavailable;
         return oldState;
       });
     });
@@ -1389,6 +1532,7 @@ var PluvRoom = class {
     const oldState = __spreadProps(__spreadValues({}, this._state), {
       authorization,
       connection: JSON.parse(JSON.stringify(this._state.connection)),
+      storage: JSON.parse(JSON.stringify(this._state.storage)),
       webSocket: this._state.webSocket
     });
     const newState = updater(oldState);
@@ -1502,12 +1646,16 @@ var createClient = (options) => {
 var infer = (callback) => callback;
 
 // src/MockedRoom.ts
-import { ConnectionState as ConnectionState2 } from "@pluv/types";
+import { ConnectionState as ConnectionState2, StorageState as StorageState2 } from "@pluv/types";
 var MockedRoom = class {
   constructor(room, options) {
+    /**
+     * @deprecated To be removed in v3. Use `getStorageLoaded` instead.
+     */
+    this.storageLoaded = true;
     this._crdtNotifier = new CrdtNotifier();
     this._eventNotifier = new EventNotifier();
-    this._otherNotifier = new OtherNotifier();
+    this._usersNotifier = new UsersNotifier();
     this._state = {
       authorization: {
         token: null,
@@ -1515,10 +1663,12 @@ var MockedRoom = class {
       },
       connection: {
         attempts: 0,
-        count: 1,
         id: null,
         state: ConnectionState2.Untouched
       },
+      storage: {
+        state: StorageState2.Unavailable
+      },
       webSocket: null
     };
     this._stateNotifier = new StateNotifier();
@@ -1594,20 +1744,66 @@ var MockedRoom = class {
     this.other = (connectionId, callback) => {
       const clientId = this._usersManager.getClientId(connectionId);
       if (!clientId) return () => void 0;
-      return this._otherNotifier.subscribe(clientId, callback);
+      return this._usersNotifier.subscribeOther(clientId, callback);
     };
     this.redo = () => {
       this._crdtManager.doc.redo();
     };
-    this.storage = (key, fn) => {
-      return this._crdtNotifier.subscribe(key, fn);
-    };
+    this.storage = new Proxy(
+      (key, callback) => this._crdtNotifier.subscribe(key, callback),
+      {
+        get: (fn, prop) => {
+          if (!!prop) {
+            return (callback) => {
+              return this._crdtNotifier.subcribeRoot(callback);
+            };
+          }
+          return (callback) => {
+            return fn(prop, callback);
+          };
+        }
+      }
+    );
     this.storageRoot = (fn) => {
       return this._crdtNotifier.subcribeRoot(fn);
     };
-    this.subscribe = (name, callback) => {
-      return this._stateNotifier.subscribe(name, callback);
-    };
+    this.subscribe = new Proxy(
+      (name, callback) => {
+        return this._stateNotifier.subscribe(name, callback);
+      },
+      {
+        get: (fn, prop) => {
+          if (prop === "connection") {
+            return (callback) => {
+              return fn("connection", callback);
+            };
+          }
+          if (prop === "myPresence") {
+            return (callback) => {
+              return fn("my-presence", callback);
+            };
+          }
+          if (prop === "myself") {
+            return (callback) => {
+              return fn("myself", callback);
+            };
+          }
+          if (prop === "others") {
+            return (callback) => {
+              return this._usersNotifier.subscribeOthers(callback);
+            };
+          }
+          if (prop === "storageLoaded") {
+            return (callback) => {
+              return fn("storage-loaded", callback);
+            };
+          }
+          if (prop === "event") return this.event;
+          if (prop === "other") return this.other;
+          if (prop === "storage") return this.storage;
+        }
+      }
+    );
     this.transact = (fn, origin) => {
       const _origin = origin != null ? origin : this._state.connection.id;
       const crdtManager = this._crdtManager;
@@ -1647,8 +1843,8 @@ var MockedRoom = class {
     });
     this._observeCrdt();
   }
-  get storageLoaded() {
-    return true;
+  addEventListener(kind, handler) {
+    return () => void 0;
   }
   getDoc() {
     return this._crdtManager.doc;
@@ -1658,6 +1854,9 @@ var MockedRoom = class {
     if (typeof type === "undefined") return this._crdtManager.doc.toJson();
     return this._crdtManager.doc.toJson(type);
   }
+  getStorageLoaded() {
+    return true;
+  }
   _observeCrdt() {
     var _a, _b;
     (_b = (_a = this._subscriptions).observeCrdt) == null ? void 0 : _b.call(_a);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/client",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "description": "@pluv/io frontend client",
   "author": "leedavidcs",
   "license": "MIT",
@@ -18,15 +18,15 @@
   },
   "dependencies": {
     "wonka": "^6.3.5",
-    "@pluv/crdt": "^2.0.2",
-    "@pluv/types": "^2.0.2"
+    "@pluv/crdt": "^2.2.0",
+    "@pluv/types": "^2.2.0"
   },
   "devDependencies": {
     "eslint": "^9.26.0",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "@pluv/tsconfig": "^2.0.2",
-    "eslint-config-pluv": "^2.0.2"
+    "@pluv/tsconfig": "^2.2.0",
+    "eslint-config-pluv": "^2.2.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",