@pluv/client 2.0.2 → 2.2.0

package/dist/index.js

@@ -78,6 +78,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 {
@@ -124,7 +125,7 @@ var CrdtManager = class {
     this.initialized = false;
     const { initialStorage = import_crdt.noop.doc({}) } = options;
     this._docFactory = initialStorage;
-    this.doc = initialStorage.getEmpty();
+    this.doc = this._docFactory.getEmpty();
   }
   /**
    * !HACK
@@ -164,11 +165,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;
@@ -228,31 +225,21 @@ var EventNotifier = class {
   }
 };
 
-// src/OtherNotifier.ts
+// src/ListenerManager.ts
 var import_wonka3 = require("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 = (0, import_wonka3.makeSubject)();
-    this._subjects.set(clientId, newSubject);
-    return newSubject;
+    this.subjects = {
+      close: (0, import_wonka3.makeSubject)(),
+      error: (0, import_wonka3.makeSubject)(),
+      message: (0, import_wonka3.makeSubject)(),
+      open: (0, import_wonka3.makeSubject)()
+    };
   }
-  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 (0, import_wonka3.subscribe)(callback)(source).unsubscribe;
   }
 };
@@ -473,6 +460,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;
   }
@@ -550,6 +540,43 @@ var UsersManager = class {
   }
 };
 
+// src/UsersNotifier.ts
+var import_wonka5 = require("wonka");
+var UsersNotifier = class {
+  constructor() {
+    this.others = (0, import_wonka5.makeSubject)();
+    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 = (0, import_wonka5.makeSubject)();
+    this._otherSubjects.set(clientId, newSubject);
+    return newSubject;
+  }
+  subscribeOther(clientId, callback) {
+    const source = this.other(clientId).source;
+    const subscription = (0, import_wonka5.subscribe)(callback)(source);
+    return subscription.unsubscribe;
+  }
+  subscribeOthers(callback) {
+    const subscription = (0, import_wonka5.subscribe)(
+      ({ 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;
@@ -569,7 +596,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 = {
@@ -579,6 +606,7 @@ var PluvRoom = class {
       pong: null,
       reconnect: null
     };
+    this._usersNotifier = new UsersNotifier();
     this._lastMetadata = null;
     this._state = {
       authorization: {
@@ -587,10 +615,12 @@ var PluvRoom = class {
       },
       connection: {
         attempts: 0,
-        count: 0,
         id: null,
         state: import_types.ConnectionState.Untouched
       },
+      storage: {
+        state: import_types.StorageState.Unavailable
+      },
       webSocket: null
     };
     this._windowListeners = null;
@@ -633,6 +663,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),
       {
@@ -664,23 +697,80 @@ var PluvRoom = class {
       if (typeof sharedType === "undefined") return null;
       return sharedType;
     };
+    this.getStorageLoaded = () => {
+      return this._state.storage.state === import_types.StorageState.Offline || this._state.storage.state === import_types.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;
@@ -760,12 +850,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;
@@ -807,6 +903,7 @@ var PluvRoom = class {
       this._updateState((oldState) => {
         oldState.connection.attempts = 0;
         oldState.authorization.token = authToken;
+        oldState.storage.state = import_types.StorageState.Loading;
         oldState.webSocket = webSocket;
         return oldState;
       });
@@ -827,6 +924,7 @@ var PluvRoom = class {
       this._updateState((oldState) => {
         oldState.authorization.token = null;
         oldState.connection.state = import_types.ConnectionState.Closed;
+        oldState.storage.state = oldState.storage.state === import_types.StorageState.Synced ? import_types.StorageState.Offline : import_types.StorageState.Unavailable;
         oldState.webSocket = null;
         return oldState;
       });
@@ -891,9 +989,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();
   }
@@ -984,7 +1083,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;
@@ -1003,19 +1111,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;
@@ -1032,10 +1152,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* () {
@@ -1047,7 +1171,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;
@@ -1099,6 +1222,10 @@ var PluvRoom = class {
       const encodedState = this._crdtManager.doc.getEncodedState();
       this._emitSharedTypes();
       this._observeCrdt();
+      this._updateState((oldState) => {
+        oldState.storage.state = import_types.StorageState.Synced;
+        return oldState;
+      });
       this._stateNotifier.subjects["storage-loaded"].next(true);
       this._sendMessage({
         type: "$updateStorage",
@@ -1137,6 +1264,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);
@@ -1159,8 +1291,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);
@@ -1202,11 +1338,13 @@ var PluvRoom = class {
     this._listeners.onAuthorizationFail(authError);
     this._updateState((oldState) => {
       oldState.connection.state = import_types.ConnectionState.Unavailable;
+      oldState.storage.state = import_types.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 = [
@@ -1234,6 +1372,7 @@ var PluvRoom = class {
            */
           import_types.ConnectionState.Closed
         );
+        oldState.storage.state = oldState.storage.state === import_types.StorageState.Synced ? import_types.StorageState.Offline : import_types.StorageState.Unavailable;
         oldState.webSocket = null;
         return oldState;
       });
@@ -1250,9 +1389,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);
@@ -1300,7 +1441,8 @@ var PluvRoom = class {
       default:
     }
   }
-  _onOpen() {
+  _onOpen(event) {
+    this._listenerManager.subjects.open.next(event);
     if (this._state.connection.state !== import_types.ConnectionState.Connecting) return;
     this._logDebug("WebSocket connected");
     this._updateState((oldState) => {
@@ -1318,6 +1460,7 @@ var PluvRoom = class {
       if (this._state.connection.state === import_types.ConnectionState.Closed) return;
       this._updateState((oldState) => {
         oldState.connection.state = import_types.ConnectionState.Unavailable;
+        oldState.storage.state = oldState.storage.state === import_types.StorageState.Synced ? import_types.StorageState.Offline : import_types.StorageState.Unavailable;
         return oldState;
       });
     });
@@ -1417,6 +1560,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);
@@ -1533,9 +1677,13 @@ var infer = (callback) => callback;
 var import_types2 = require("@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,
@@ -1543,10 +1691,12 @@ var MockedRoom = class {
       },
       connection: {
         attempts: 0,
-        count: 1,
         id: null,
         state: import_types2.ConnectionState.Untouched
       },
+      storage: {
+        state: import_types2.StorageState.Unavailable
+      },
       webSocket: null
     };
     this._stateNotifier = new StateNotifier();
@@ -1622,20 +1772,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;
@@ -1675,8 +1871,8 @@ var MockedRoom = class {
     });
     this._observeCrdt();
   }
-  get storageLoaded() {
-    return true;
+  addEventListener(kind, handler) {
+    return () => void 0;
   }
   getDoc() {
     return this._crdtManager.doc;
@@ -1686,6 +1882,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);