@pluv/client 2.0.1 → 2.1.0

package/dist/index.js

@@ -228,35 +228,6 @@ var EventNotifier = class {
   }
 };
 
-// src/OtherNotifier.ts
-var import_wonka3 = require("wonka");
-var OtherNotifier = 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;
-  }
-  subscribe(clientId, callback) {
-    const source = this.subject(clientId).source;
-    return (0, import_wonka3.subscribe)(callback)(source).unsubscribe;
-  }
-};
-
 // src/PluvRouter.ts
 var PluvRouter = class _PluvRouter {
   constructor(events) {
@@ -285,22 +256,22 @@ var PluvRouter = class _PluvRouter {
 };
 
 // src/StateNotifier.ts
-var import_wonka4 = require("wonka");
+var import_wonka3 = require("wonka");
 var StateNotifier = class {
   constructor() {
     this.subjects = {
-      connection: (0, import_wonka4.makeSubject)(),
-      "my-presence": (0, import_wonka4.makeSubject)(),
-      myself: (0, import_wonka4.makeSubject)(),
-      others: (0, import_wonka4.makeSubject)(),
-      "storage-loaded": (0, import_wonka4.makeSubject)()
+      connection: (0, import_wonka3.makeSubject)(),
+      "my-presence": (0, import_wonka3.makeSubject)(),
+      myself: (0, import_wonka3.makeSubject)(),
+      others: (0, import_wonka3.makeSubject)(),
+      "storage-loaded": (0, import_wonka3.makeSubject)()
     };
   }
   subscribe(name, callback) {
     var _a;
     const source = (_a = this.subjects[name]) == null ? void 0 : _a.source;
     if (!source) throw new Error(`Could not subscribe to source: ${name}`);
-    return (0, import_wonka4.subscribe)(callback)(source).unsubscribe;
+    return (0, import_wonka3.subscribe)(callback)(source).unsubscribe;
   }
 };
 
@@ -550,6 +521,43 @@ var UsersManager = class {
   }
 };
 
+// src/UsersNotifier.ts
+var import_wonka4 = require("wonka");
+var UsersNotifier = class {
+  constructor() {
+    this.others = (0, import_wonka4.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_wonka4.makeSubject)();
+    this._otherSubjects.set(clientId, newSubject);
+    return newSubject;
+  }
+  subscribeOther(clientId, callback) {
+    const source = this.other(clientId).source;
+    const subscription = (0, import_wonka4.subscribe)(callback)(source);
+    return subscription.unsubscribe;
+  }
+  subscribeOthers(callback) {
+    const subscription = (0, import_wonka4.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 +577,6 @@ var PluvRoom = class {
     this._intervals = {
       heartbeat: null
     };
-    this._otherNotifier = new OtherNotifier();
     this._publicKey = null;
     this._stateNotifier = new StateNotifier();
     this._subscriptions = {
@@ -579,6 +586,7 @@ var PluvRoom = class {
       pong: null,
       reconnect: null
     };
+    this._usersNotifier = new UsersNotifier();
     this._lastMetadata = null;
     this._state = {
       authorization: {
@@ -633,6 +641,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 +675,77 @@ var PluvRoom = class {
       if (typeof sharedType === "undefined") return null;
       return sharedType;
     };
+    /**
+     * @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. 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;
@@ -891,9 +956,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 +1050,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 +1078,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 +1119,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* () {
@@ -1137,6 +1228,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 +1255,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);
@@ -1535,7 +1635,7 @@ var MockedRoom = class {
   constructor(room, options) {
     this._crdtNotifier = new CrdtNotifier();
     this._eventNotifier = new EventNotifier();
-    this._otherNotifier = new OtherNotifier();
+    this._usersNotifier = new UsersNotifier();
     this._state = {
       authorization: {
         token: null,
@@ -1622,20 +1722,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;