@pluv/client 2.0.2 → 2.1.0

package/dist/index.mjs

@@ -200,35 +200,6 @@ var EventNotifier = class {
   }
 };
 
-// src/OtherNotifier.ts
-import { makeSubject as makeSubject3, subscribe as subscribe3 } from "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 = makeSubject3();
-    this._subjects.set(clientId, newSubject);
-    return newSubject;
-  }
-  subscribe(clientId, callback) {
-    const source = this.subject(clientId).source;
-    return subscribe3(callback)(source).unsubscribe;
-  }
-};
-
 // src/PluvRouter.ts
 var PluvRouter = class _PluvRouter {
   constructor(events) {
@@ -257,22 +228,22 @@ var PluvRouter = class _PluvRouter {
 };
 
 // src/StateNotifier.ts
-import { makeSubject as makeSubject4, subscribe as subscribe4 } from "wonka";
+import { makeSubject as makeSubject3, subscribe as subscribe3 } from "wonka";
 var StateNotifier = class {
   constructor() {
     this.subjects = {
-      connection: makeSubject4(),
-      "my-presence": makeSubject4(),
-      myself: makeSubject4(),
-      others: makeSubject4(),
-      "storage-loaded": makeSubject4()
+      connection: makeSubject3(),
+      "my-presence": makeSubject3(),
+      myself: makeSubject3(),
+      others: makeSubject3(),
+      "storage-loaded": makeSubject3()
     };
   }
   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 subscribe4(callback)(source).unsubscribe;
+    return subscribe3(callback)(source).unsubscribe;
   }
 };
 
@@ -522,6 +493,43 @@ var UsersManager = class {
   }
 };
 
+// src/UsersNotifier.ts
+import { makeSubject as makeSubject4, subscribe as subscribe4 } from "wonka";
+var UsersNotifier = class {
+  constructor() {
+    this.others = makeSubject4();
+    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 = makeSubject4();
+    this._otherSubjects.set(clientId, newSubject);
+    return newSubject;
+  }
+  subscribeOther(clientId, callback) {
+    const source = this.other(clientId).source;
+    const subscription = subscribe4(callback)(source);
+    return subscription.unsubscribe;
+  }
+  subscribeOthers(callback) {
+    const subscription = subscribe4(
+      ({ 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 +549,6 @@ var PluvRoom = class {
     this._intervals = {
       heartbeat: null
     };
-    this._otherNotifier = new OtherNotifier();
     this._publicKey = null;
     this._stateNotifier = new StateNotifier();
     this._subscriptions = {
@@ -551,6 +558,7 @@ var PluvRoom = class {
       pong: null,
       reconnect: null
     };
+    this._usersNotifier = new UsersNotifier();
     this._lastMetadata = null;
     this._state = {
       authorization: {
@@ -605,6 +613,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 +647,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;
@@ -863,9 +928,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 +1022,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 +1050,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 +1091,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* () {
@@ -1109,6 +1200,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 +1227,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);
@@ -1507,7 +1607,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,
@@ -1594,20 +1694,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/client",
-  "version": "2.0.2",
+  "version": "2.1.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.1.0",
+    "@pluv/types": "^2.1.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.1.0",
+    "eslint-config-pluv": "^2.1.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",

package/src/CrdtNotifier.ts

@@ -1,4 +1,5 @@
 import type { CrdtType, InferCrdtJson } from "@pluv/crdt";
+import type { StorageSubscriptionCallback } from "@pluv/types";
 import type { Subject } from "wonka";
 import { makeSubject, subscribe } from "wonka";
 
@@ -36,7 +37,7 @@ export class CrdtNotifier<TStorage extends Record<string, CrdtType<any, any>>> {
 
     public subscribe<TKey extends keyof TStorage>(
         key: TKey,
-        callback: (value: InferCrdtJson<TStorage[TKey]>) => void,
+        callback: StorageSubscriptionCallback<TStorage, TKey>,
     ): () => void {
         const subject = this.subject(key);
 

package/src/MockedRoom.ts

@@ -1,15 +1,24 @@
-import type { AbstractCrdtDocFactory, CrdtType, InferCrdtJson, InferStorage } from "@pluv/crdt";
+import type { AbstractCrdtDocFactory, InferCrdtJson, InferStorage } from "@pluv/crdt";
 import type {
+    BroadcastProxy,
     CrdtDocLike,
     EventNotifierSubscriptionCallback,
+    EventProxy,
     IOLike,
     Id,
     InferIOInput,
     InferIOOutput,
     JsonObject,
     MergeEvents,
-    OtherNotifierSubscriptionCallback,
+    OtherSubscriptionCallback,
+    OthersSubscriptionCallback,
     RoomLike,
+    StateNotifierSubjects,
+    StorageProxy,
+    StorageRootSubscriptionCallback,
+    StorageSubscriptionCallback,
+    SubscribeProxy,
+    SubscriptionCallback,
     UpdateMyPresenceAction,
     UserInfo,
     WebSocketState,
@@ -19,14 +28,13 @@ import type { CrdtManagerOptions } from "./CrdtManager";
 import { CrdtManager } from "./CrdtManager";
 import { CrdtNotifier } from "./CrdtNotifier";
 import { EventNotifier } from "./EventNotifier";
-import { OtherNotifier } from "./OtherNotifier";
 import { PluvProcedure } from "./PluvProcedure";
 import type { PluvRouterEventConfig } from "./PluvRouter";
 import { PluvRouter } from "./PluvRouter";
-import type { StateNotifierSubjects, SubscriptionCallback } from "./StateNotifier";
 import { StateNotifier } from "./StateNotifier";
 import type { UsersManagerConfig } from "./UsersManager";
 import { UsersManager } from "./UsersManager";
+import { UsersNotifier } from "./UsersNotifier";
 import { MAX_PRESENCE_SIZE_BYTES } from "./constants";
 import type {
     EventResolver,
@@ -66,7 +74,7 @@ export class MockedRoom<
     private readonly _eventNotifier = new EventNotifier<MergeEvents<TEvents, TIO>>();
     private readonly _events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
     private readonly _limits: PluvClientLimits;
-    private readonly _otherNotifier = new OtherNotifier<TIO, TPresence>();
+    private readonly _usersNotifier = new UsersNotifier<TIO, TPresence>();
     private readonly _router: PluvRouter<TIO, TPresence, InferStorage<TCrdt>, TEvents>;
     private _state: WebSocketState<TIO> = {
         authorization: {
@@ -176,12 +184,7 @@ export class MockedRoom<
                 };
             },
         },
-    ) as (<TEvent extends keyof InferIOInput<MergeEvents<TEvents, TIO>>>(
-        event: TEvent,
-        data: Id<InferIOInput<MergeEvents<TEvents, TIO>>[TEvent]>,
-    ) => Promise<void>) & {
-        [event in keyof InferIOInput<TIO>]: (data: Id<InferIOInput<TIO>[event]>) => Promise<void>;
-    };
+    ) as BroadcastProxy<TIO, TEvents>;
 
     public canRedo = (): boolean => {
         return !!this._crdtManager.doc.canRedo();
@@ -203,14 +206,7 @@ export class MockedRoom<
                 ): (() => void) => fn(prop as any, callback);
             },
         },
-    ) as (<TEvent extends keyof InferIOOutput<MergeEvents<TEvents, TIO>>>(
-        event: TEvent,
-        callback: EventNotifierSubscriptionCallback<MergeEvents<TEvents, TIO>, TEvent>,
-    ) => () => void) & {
-        [event in keyof InferIOOutput<MergeEvents<TEvents, TIO>>]: (
-            callback: EventNotifierSubscriptionCallback<MergeEvents<TEvents, TIO>, any>,
-        ) => () => void;
-    };
+    ) as EventProxy<TIO, TEvents>;
 
     public getConnection = (): WebSocketConnection => {
         // Create a read-only clone of the connection state
@@ -261,25 +257,40 @@ export class MockedRoom<
 
     public other = (
         connectionId: string,
-        callback: OtherNotifierSubscriptionCallback<TIO, TPresence>,
+        callback: OtherSubscriptionCallback<TIO, TPresence>,
     ): (() => void) => {
         const clientId = this._usersManager.getClientId(connectionId);
 
         if (!clientId) return () => undefined;
 
-        return this._otherNotifier.subscribe(clientId, callback);
+        return this._usersNotifier.subscribeOther(clientId, callback);
     };
 
     public redo = (): void => {
         this._crdtManager.doc.redo();
     };
 
-    public storage = <TKey extends keyof InferStorage<TCrdt>>(
-        key: TKey,
-        fn: (value: InferCrdtJson<InferStorage<TCrdt>[TKey]>) => void,
-    ): (() => void) => {
-        return this._crdtNotifier.subscribe(key, fn);
-    };
+    public storage = new Proxy(
+        <TKey extends keyof InferStorage<TCrdt>>(
+            key: TKey,
+            callback: StorageSubscriptionCallback<InferStorage<TCrdt>, TKey>,
+        ): (() => void) => this._crdtNotifier.subscribe(key, callback),
+        {
+            get: (fn, prop) => {
+                type _Storage = InferStorage<TCrdt>;
+
+                if (!!prop) {
+                    return (callback: StorageRootSubscriptionCallback<_Storage>) => {
+                        return this._crdtNotifier.subcribeRoot(callback);
+                    };
+                }
+
+                return (callback: StorageSubscriptionCallback<_Storage, keyof _Storage>) => {
+                    return fn(prop as keyof InferStorage<TCrdt>, callback);
+                };
+            },
+        },
+    ) as StorageProxy<InferStorage<TCrdt>>;
 
     public storageRoot = (
         fn: (value: {
@@ -289,12 +300,51 @@ export class MockedRoom<
         return this._crdtNotifier.subcribeRoot(fn);
     };
 
-    public subscribe = <TSubject extends keyof StateNotifierSubjects<TIO, TPresence>>(
-        name: TSubject,
-        callback: SubscriptionCallback<TIO, TPresence, TSubject>,
-    ): (() => void) => {
-        return this._stateNotifier.subscribe(name, callback);
-    };
+    public subscribe = new Proxy(
+        <TSubject extends keyof StateNotifierSubjects<TIO, TPresence>>(
+            name: TSubject,
+            callback: SubscriptionCallback<TIO, TPresence, TSubject>,
+        ): (() => void) => {
+            return this._stateNotifier.subscribe(name, callback);
+        },
+        {
+            get: (fn, prop) => {
+                if (prop === "connection") {
+                    return (callback: SubscriptionCallback<TIO, TPresence, "connection">) => {
+                        return fn("connection", callback);
+                    };
+                }
+
+                if (prop === "myPresence") {
+                    return (callback: SubscriptionCallback<TIO, TPresence, "my-presence">) => {
+                        return fn("my-presence", callback);
+                    };
+                }
+
+                if (prop === "myself") {
+                    return (callback: SubscriptionCallback<TIO, TPresence, "myself">) => {
+                        return fn("myself", callback);
+                    };
+                }
+
+                if (prop === "others") {
+                    return (callback: OthersSubscriptionCallback<TIO, TPresence>) => {
+                        return this._usersNotifier.subscribeOthers(callback);
+                    };
+                }
+
+                if (prop === "storageLoaded") {
+                    return (callback: SubscriptionCallback<TIO, TPresence, "storage-loaded">) => {
+                        return fn("storage-loaded", callback);
+                    };
+                }
+
+                if (prop === "event") return this.event;
+                if (prop === "other") return this.other;
+                if (prop === "storage") return this.storage;
+            },
+        },
+    ) as SubscribeProxy<TIO, TPresence, InferStorage<TCrdt>, TEvents>;
 
     public transact = (fn: (storage: InferStorage<TCrdt>) => void, origin?: string): void => {
         const _origin = origin ?? this._state.connection.id;