@pluv/client 0.6.4 → 0.7.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/client@0.6.4 build /home/runner/work/pluv/pluv/packages/client
+> @pluv/client@0.7.0 build /home/runner/work/pluv/pluv/packages/client
 > tsup src/index.ts --format esm,cjs --dts
 
 CLI Building entry: src/index.ts
@@ -8,10 +8,10 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 34.11 KB
-CJS ⚡️ Build success in 106ms
-ESM dist/index.mjs 32.97 KB
-ESM ⚡️ Build success in 107ms
+ESM dist/index.mjs 34.72 KB
+ESM ⚡️ Build success in 138ms
+CJS dist/index.js 35.86 KB
+CJS ⚡️ Build success in 138ms
 DTS Build start
-DTS ⚡️ Build success in 3699ms
-DTS dist/index.d.ts 11.50 KB
+DTS ⚡️ Build success in 5111ms
+DTS dist/index.d.ts 11.71 KB

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @pluv/client
 
+## 0.7.0
+
+### Minor Changes
+
+- ae679a8: updated offline presence to be set when reconnecting to a room
+
+### Patch Changes
+
+- 0dd847e: updated storage to be synced when reconnected to the room
+- bb2886b: fixed not reconnecting during heartbeat
+- 3518a83: bumped dependencies
+- Updated dependencies [0dd847e]
+- Updated dependencies [bb2886b]
+- Updated dependencies [ae679a8]
+- Updated dependencies [3518a83]
+  - @pluv/crdt-yjs@0.3.7
+  - @pluv/types@0.2.0
+
+## 0.6.5
+
+### Patch Changes
+
+- 7ad4967: fixed user's presence not updating locally while offline
+- 4535687: fix local yjs doc not updating while disconnected
+  - @pluv/crdt-yjs@0.3.6
+  - @pluv/types@0.1.6
+
 ## 0.6.4
 
 ### Patch Changes

package/dist/index.d.ts

@@ -21,6 +21,7 @@ declare enum ConnectionState {
     Untouched = "Untouched"
 }
 interface WebSocketConnection {
+    count: number;
     id: string | null;
     state: ConnectionState;
 }
@@ -60,6 +61,7 @@ declare abstract class AbstractRoom<TIO extends IOLike, TPresence extends JsonOb
     abstract other(connectionId: string, callback: OtherNotifierSubscriptionCallback<TIO>): () => void;
     abstract storage<TKey extends keyof TStorage>(key: TKey, fn: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void): () => void;
     abstract subscribe<TSubject extends keyof StateNotifierSubjects<TIO, TPresence>>(name: TSubject, callback: SubscriptionCallback<TIO, TPresence, TSubject>): () => void;
+    abstract updateMyPresence(presence: Partial<TPresence>): void;
 }
 
 interface CrdtManagerOptions<TStorage extends Record<string, AbstractType<any>> = {}> {
@@ -133,6 +135,7 @@ declare class PluvRoom<TIO extends IOLike, TPresence extends JsonObject = {}, TS
     other: (connectionId: string, callback: OtherNotifierSubscriptionCallback<TIO>) => (() => void);
     storage: <TKey extends keyof TStorage>(key: TKey, fn: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void) => (() => void);
     subscribe: <TSubject extends keyof StateNotifierSubjects<TIO, TPresence>>(name: TSubject, callback: SubscriptionCallback<TIO, TPresence, TSubject>) => (() => void);
+    updateMyPresence: (presence: Partial<TPresence>) => void;
     private _attachWindowListeners;
     private _attachWsListeners;
     private _clearInterval;
@@ -188,14 +191,14 @@ declare class PluvClient<TIO extends IOLike = IOLike> {
     private _rooms;
     constructor(options: PluvClientOptions<TIO>);
     createRoom: <TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}>(room: string, options?: PluvRoomOptions<TIO, TPresence, TStorage>) => PluvRoom<TIO, TPresence, TStorage>;
-    enter: (room: string | PluvRoom<TIO, JsonObject, any>) => Promise<PluvRoom<TIO, JsonObject, any>>;
+    enter: (room: string | PluvRoom<TIO, any, any>) => Promise<PluvRoom<TIO, JsonObject, any>>;
     getRoom: <TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractType<any>> = {}>(room: string) => PluvRoom<TIO, TPresence, TStorage> | null;
     getRooms: () => readonly PluvRoom<TIO, JsonObject, any>[];
-    leave: (room: string | PluvRoom<TIO, JsonObject, any>) => void;
+    leave: (room: string | PluvRoom<TIO, any, any>) => void;
     private _logDebug;
 }
 
-declare const createClient: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}> = IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}>>(options: PluvClientOptions<TIO>) => PluvClient<TIO>;
+declare const createClient: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}, {}, {}> = IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}, {}, {}>>(options: PluvClientOptions<TIO>) => PluvClient<TIO>;
 
 type MockedRoomEvents<TIO extends IOLike> = Partial<{
     [P in keyof InferIOInput<TIO>]: (data: Id<InferIOInput<TIO>[P]>) => Partial<InferIOOutput<TIO>>;
@@ -225,6 +228,7 @@ declare class MockedRoom<TIO extends IOLike, TPresence extends JsonObject = {},
     other: (connectionId: string, callback: OtherNotifierSubscriptionCallback<TIO>) => (() => void);
     storage: <TKey extends keyof TStorage>(key: TKey, fn: (value: InferYjsSharedTypeJson<TStorage[TKey]>) => void) => (() => void);
     subscribe: <TSubject extends keyof StateNotifierSubjects<TIO, TPresence>>(name: TSubject, callback: SubscriptionCallback<TIO, TPresence, TSubject>) => (() => void);
+    updateMyPresence: (presence: Partial<TPresence>) => void;
     private _observeCrdt;
 }
 

package/dist/index.js

@@ -79,12 +79,12 @@ var import_crdt_yjs = require("@pluv/crdt-yjs");
 var CrdtManager = class {
   constructor(options = {}) {
     const { encodedState, initialStorage } = options;
-    const doc1 = encodedState ? (0, import_crdt_yjs.doc)().applyUpdate(encodedState) : null;
-    if (doc1 && !!Object.keys(doc1.toJSON()).length) {
-      this.doc = doc1;
+    const _doc = encodedState ? (0, import_crdt_yjs.doc)().applyUpdate(encodedState) : null;
+    if (_doc && !!Object.keys(_doc.toJSON()).length) {
+      this.doc = _doc;
       return;
     }
-    doc1 == null ? void 0 : doc1.destroy();
+    _doc == null ? void 0 : _doc.destroy();
     this.doc = (0, import_crdt_yjs.doc)(initialStorage == null ? void 0 : initialStorage());
   }
   destroy() {
@@ -189,13 +189,20 @@ var ConnectionState = /* @__PURE__ */ ((ConnectionState2) => {
 // src/UsersManager.ts
 var UsersManager = class {
   constructor(config) {
+    /**
+     * @description This is only set when the user is connected.
+     */
     this._myself = null;
     this._others = /* @__PURE__ */ new Map();
     this._presence = null;
     const { initialPresence, presence = null } = config;
     this._initialPresence = initialPresence;
+    this._myPresence = initialPresence;
     this._presence = presence;
   }
+  get myPresence() {
+    return this._myPresence;
+  }
   get myself() {
     return this._myself;
   }
@@ -212,21 +219,15 @@ var UsersManager = class {
   patchPresence(connectionId, patch) {
     var _a, _b;
     if (((_a = this._myself) == null ? void 0 : _a.connectionId) === connectionId) {
-      this._myself.presence = Object.assign(
-        /* @__PURE__ */ Object.create(null),
-        this._myself.presence,
-        patch
-      );
+      const presence2 = __spreadValues(__spreadValues({}, this._myPresence), patch);
+      this._myself.presence = presence2;
+      this._myPresence = presence2;
       return;
     }
     const other = this._others.get(connectionId);
     if (!other)
       return;
-    const presence = Object.assign(
-      /* @__PURE__ */ Object.create(null),
-      other.presence,
-      patch
-    );
+    const presence = __spreadValues(__spreadValues({}, other.presence), patch);
     (_b = this._presence) == null ? void 0 : _b.parse(presence);
     this._others.set(connectionId, __spreadProps(__spreadValues({}, other), { presence }));
   }
@@ -242,11 +243,13 @@ var UsersManager = class {
       presence: this._initialPresence,
       user
     };
+    this._myPresence = this._initialPresence;
   }
   setPresence(connectionId, presence) {
     var _a;
     if (((_a = this._myself) == null ? void 0 : _a.connectionId) === connectionId) {
       this._myself.presence = presence;
+      this._myPresence = presence;
       return;
     }
     const other = this._others.get(connectionId);
@@ -254,7 +257,7 @@ var UsersManager = class {
       return;
     this._others.set(connectionId, __spreadProps(__spreadValues({}, other), { presence }));
   }
-  setUser(connectionId, user) {
+  setUser(connectionId, user, presence) {
     var _a;
     if (((_a = this._myself) == null ? void 0 : _a.connectionId) === connectionId)
       return;
@@ -263,10 +266,19 @@ var UsersManager = class {
       return;
     this._others.set(connectionId, {
       connectionId,
-      presence: this._initialPresence,
+      presence: presence != null ? presence : this._initialPresence,
       user
     });
   }
+  /**
+   * @description This method need not care about being connected.
+   */
+  updateMyPresence(presence) {
+    this._myPresence = __spreadValues(__spreadValues({}, this._myPresence), presence);
+    if (!this._myself)
+      return;
+    this._myself.presence = this._myPresence;
+  }
 };
 
 // src/PluvRoom.ts
@@ -299,6 +311,7 @@ var PluvRoom = class extends AbstractRoom {
         user: null
       },
       connection: {
+        count: 0,
         id: null,
         state: "Untouched" /* Untouched */
       },
@@ -343,6 +356,18 @@ var PluvRoom = class extends AbstractRoom {
     this.subscribe = (name, callback) => {
       return this._stateNotifier.subscribe(name, callback);
     };
+    this.updateMyPresence = (presence) => {
+      var _a;
+      this._usersManager.updateMyPresence(presence);
+      const myPresence = this._usersManager.myPresence;
+      const myself = (_a = this._usersManager.myself) != null ? _a : null;
+      this._stateNotifier.subjects["my-presence"].next(myPresence);
+      !!myself && this._stateNotifier.subjects["myself"].next(myself);
+      this.broadcast(
+        "$UPDATE_PRESENCE",
+        { presence }
+      );
+    };
     this._debug = debug;
     this._endpoints = {
       authEndpoint,
@@ -430,8 +455,10 @@ var PluvRoom = class extends AbstractRoom {
     ].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 */;
@@ -503,7 +530,6 @@ var PluvRoom = class extends AbstractRoom {
     if (!this._state.webSocket)
       return;
     (_b = (_a = this._subscriptions).observeCrdt) == null ? void 0 : _b.call(_a);
-    this._clearInterval(this._intervals.heartbeat);
     this._clearTimeout(this._timeouts.pong);
     this._clearTimeout(this._timeouts.reconnect);
     this._detachWindowListeners();
@@ -517,7 +543,6 @@ var PluvRoom = class extends AbstractRoom {
     if (canClose)
       this._state.webSocket.close();
     this._detachWsListeners();
-    this._stateNotifier.subjects["my-presence"].next(null);
     this._stateNotifier.subjects["myself"].next(null);
   }
   _detachWindowListeners() {
@@ -592,7 +617,7 @@ var PluvRoom = class extends AbstractRoom {
     this._otherNotifier.subjects.delete(connectionId);
   }
   _handlePresenceUpdatedMessage(message) {
-    var _a, _b, _c;
+    var _a;
     const { connectionId } = message;
     if (!connectionId)
       return;
@@ -603,8 +628,8 @@ var PluvRoom = class extends AbstractRoom {
       connectionId,
       data.presence
     );
-    const myPresence = (_b = (_a = this._usersManager.myself) == null ? void 0 : _a.presence) != null ? _b : null;
-    const myself = (_c = this._usersManager.myself) != null ? _c : null;
+    const myPresence = this._usersManager.myPresence;
+    const myself = (_a = this._usersManager.myself) != null ? _a : null;
     if ((myself == null ? void 0 : myself.connectionId) === connectionId) {
       this._stateNotifier.subjects["my-presence"].next(myPresence);
       this._stateNotifier.subjects["myself"].next(myself);
@@ -644,6 +669,7 @@ var PluvRoom = class extends AbstractRoom {
     if (!this._state.webSocket)
       throw new Error("Could not find WebSocket");
     this._updateState((oldState) => {
+      oldState.connection.count += 1;
       oldState.connection.id = connectionId;
       oldState.authorization.user = user;
       return oldState;
@@ -652,11 +678,15 @@ var PluvRoom = class extends AbstractRoom {
       connectionId,
       user
     );
-    const myPresence = (_b = (_a = this._usersManager.myself) == null ? void 0 : _a.presence) != null ? _b : null;
-    const myself = (_c = this._usersManager.myself) != null ? _c : null;
-    this._stateNotifier.subjects["my-presence"].next(myPresence);
+    const presence = this._usersManager.myPresence;
+    const myself = (_a = this._usersManager.myself) != null ? _a : null;
+    this._stateNotifier.subjects["my-presence"].next(presence);
     this._stateNotifier.subjects["myself"].next(myself);
-    this._sendMessage({ type: "$GET_OTHERS", data: {} });
+    const update = this._state.connection.count > 1 ? (_c = (_b = this._crdtManager) == null ? void 0 : _b.doc.encodeStateAsUpdate()) != null ? _c : null : null;
+    this._sendMessage({
+      type: "$INITIALIZE_SESSION",
+      data: { presence, update }
+    });
   }
   _handleStorageReceivedMessage(message) {
     var _a;
@@ -713,20 +743,21 @@ var PluvRoom = class extends AbstractRoom {
     if (!this._usersManager.myself)
       return;
     const data = message.data;
-    this._usersManager.setUser(connectionId, data.user);
+    const myself = this._usersManager.myself;
+    if (myself.connectionId === connectionId) {
+      this._sendMessage({ type: "$GET_OTHERS", data: {} });
+    }
+    this._usersManager.setUser(
+      connectionId,
+      data.user,
+      data.presence
+    );
     const other = this._usersManager.getOther(connectionId);
     const others = this._usersManager.getOthers();
     this._otherNotifier.subject(connectionId).next(other);
     this._stateNotifier.subjects["others"].next(others);
   }
   _heartbeat() {
-    if (!this._state.webSocket)
-      return;
-    if (!this._state.connection.id)
-      return;
-    if (this._state.webSocket.readyState !== this._state.webSocket.OPEN) {
-      return;
-    }
     this._clearTimeout(this._timeouts.pong);
     this._timeouts.pong = setTimeout(
       this._reconnect.bind(this),
@@ -758,6 +789,13 @@ 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 }
@@ -914,7 +952,7 @@ var PluvRoom = class extends AbstractRoom {
       this._closeWs();
       this._updateState((oldState) => {
         oldState.authorization.token = null;
-        oldState.connection.state = "Unavailable" /* Unavailable */;
+        oldState.connection.state = "Closed" /* Closed */;
         oldState.webSocket = null;
         return oldState;
       });
@@ -1031,6 +1069,7 @@ var MockedRoom = class extends AbstractRoom {
         user: null
       },
       connection: {
+        count: 1,
         id: null,
         state: "Untouched" /* Untouched */
       },
@@ -1069,6 +1108,14 @@ var MockedRoom = class extends AbstractRoom {
     this.subscribe = (name, callback) => {
       return this._stateNotifier.subscribe(name, callback);
     };
+    this.updateMyPresence = (presence) => {
+      var _a;
+      this._usersManager.updateMyPresence(presence);
+      const myPresence = this._usersManager.myPresence;
+      const myself = (_a = this._usersManager.myself) != null ? _a : null;
+      this._stateNotifier.subjects["my-presence"].next(myPresence);
+      !!myself && this._stateNotifier.subjects["myself"].next(myself);
+    };
     this._events = events;
     this._usersManager = new UsersManager({
       initialPresence,
@@ -1112,14 +1159,11 @@ var MockedRoom = class extends AbstractRoom {
         if (origin === "$STORAGE_UPDATED")
           return;
         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);
         });
       }
     );

package/dist/index.mjs

@@ -54,12 +54,12 @@ import { doc } from "@pluv/crdt-yjs";
 var CrdtManager = class {
   constructor(options = {}) {
     const { encodedState, initialStorage } = options;
-    const doc1 = encodedState ? doc().applyUpdate(encodedState) : null;
-    if (doc1 && !!Object.keys(doc1.toJSON()).length) {
-      this.doc = doc1;
+    const _doc = encodedState ? doc().applyUpdate(encodedState) : null;
+    if (_doc && !!Object.keys(_doc.toJSON()).length) {
+      this.doc = _doc;
       return;
     }
-    doc1 == null ? void 0 : doc1.destroy();
+    _doc == null ? void 0 : _doc.destroy();
     this.doc = doc(initialStorage == null ? void 0 : initialStorage());
   }
   destroy() {
@@ -164,13 +164,20 @@ var ConnectionState = /* @__PURE__ */ ((ConnectionState2) => {
 // src/UsersManager.ts
 var UsersManager = class {
   constructor(config) {
+    /**
+     * @description This is only set when the user is connected.
+     */
     this._myself = null;
     this._others = /* @__PURE__ */ new Map();
     this._presence = null;
     const { initialPresence, presence = null } = config;
     this._initialPresence = initialPresence;
+    this._myPresence = initialPresence;
     this._presence = presence;
   }
+  get myPresence() {
+    return this._myPresence;
+  }
   get myself() {
     return this._myself;
   }
@@ -187,21 +194,15 @@ var UsersManager = class {
   patchPresence(connectionId, patch) {
     var _a, _b;
     if (((_a = this._myself) == null ? void 0 : _a.connectionId) === connectionId) {
-      this._myself.presence = Object.assign(
-        /* @__PURE__ */ Object.create(null),
-        this._myself.presence,
-        patch
-      );
+      const presence2 = __spreadValues(__spreadValues({}, this._myPresence), patch);
+      this._myself.presence = presence2;
+      this._myPresence = presence2;
       return;
     }
     const other = this._others.get(connectionId);
     if (!other)
       return;
-    const presence = Object.assign(
-      /* @__PURE__ */ Object.create(null),
-      other.presence,
-      patch
-    );
+    const presence = __spreadValues(__spreadValues({}, other.presence), patch);
     (_b = this._presence) == null ? void 0 : _b.parse(presence);
     this._others.set(connectionId, __spreadProps(__spreadValues({}, other), { presence }));
   }
@@ -217,11 +218,13 @@ var UsersManager = class {
       presence: this._initialPresence,
       user
     };
+    this._myPresence = this._initialPresence;
   }
   setPresence(connectionId, presence) {
     var _a;
     if (((_a = this._myself) == null ? void 0 : _a.connectionId) === connectionId) {
       this._myself.presence = presence;
+      this._myPresence = presence;
       return;
     }
     const other = this._others.get(connectionId);
@@ -229,7 +232,7 @@ var UsersManager = class {
       return;
     this._others.set(connectionId, __spreadProps(__spreadValues({}, other), { presence }));
   }
-  setUser(connectionId, user) {
+  setUser(connectionId, user, presence) {
     var _a;
     if (((_a = this._myself) == null ? void 0 : _a.connectionId) === connectionId)
       return;
@@ -238,10 +241,19 @@ var UsersManager = class {
       return;
     this._others.set(connectionId, {
       connectionId,
-      presence: this._initialPresence,
+      presence: presence != null ? presence : this._initialPresence,
       user
     });
   }
+  /**
+   * @description This method need not care about being connected.
+   */
+  updateMyPresence(presence) {
+    this._myPresence = __spreadValues(__spreadValues({}, this._myPresence), presence);
+    if (!this._myself)
+      return;
+    this._myself.presence = this._myPresence;
+  }
 };
 
 // src/PluvRoom.ts
@@ -274,6 +286,7 @@ var PluvRoom = class extends AbstractRoom {
         user: null
       },
       connection: {
+        count: 0,
         id: null,
         state: "Untouched" /* Untouched */
       },
@@ -318,6 +331,18 @@ var PluvRoom = class extends AbstractRoom {
     this.subscribe = (name, callback) => {
       return this._stateNotifier.subscribe(name, callback);
     };
+    this.updateMyPresence = (presence) => {
+      var _a;
+      this._usersManager.updateMyPresence(presence);
+      const myPresence = this._usersManager.myPresence;
+      const myself = (_a = this._usersManager.myself) != null ? _a : null;
+      this._stateNotifier.subjects["my-presence"].next(myPresence);
+      !!myself && this._stateNotifier.subjects["myself"].next(myself);
+      this.broadcast(
+        "$UPDATE_PRESENCE",
+        { presence }
+      );
+    };
     this._debug = debug;
     this._endpoints = {
       authEndpoint,
@@ -405,8 +430,10 @@ var PluvRoom = class extends AbstractRoom {
     ].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 */;
@@ -478,7 +505,6 @@ var PluvRoom = class extends AbstractRoom {
     if (!this._state.webSocket)
       return;
     (_b = (_a = this._subscriptions).observeCrdt) == null ? void 0 : _b.call(_a);
-    this._clearInterval(this._intervals.heartbeat);
     this._clearTimeout(this._timeouts.pong);
     this._clearTimeout(this._timeouts.reconnect);
     this._detachWindowListeners();
@@ -492,7 +518,6 @@ var PluvRoom = class extends AbstractRoom {
     if (canClose)
       this._state.webSocket.close();
     this._detachWsListeners();
-    this._stateNotifier.subjects["my-presence"].next(null);
     this._stateNotifier.subjects["myself"].next(null);
   }
   _detachWindowListeners() {
@@ -567,7 +592,7 @@ var PluvRoom = class extends AbstractRoom {
     this._otherNotifier.subjects.delete(connectionId);
   }
   _handlePresenceUpdatedMessage(message) {
-    var _a, _b, _c;
+    var _a;
     const { connectionId } = message;
     if (!connectionId)
       return;
@@ -578,8 +603,8 @@ var PluvRoom = class extends AbstractRoom {
       connectionId,
       data.presence
     );
-    const myPresence = (_b = (_a = this._usersManager.myself) == null ? void 0 : _a.presence) != null ? _b : null;
-    const myself = (_c = this._usersManager.myself) != null ? _c : null;
+    const myPresence = this._usersManager.myPresence;
+    const myself = (_a = this._usersManager.myself) != null ? _a : null;
     if ((myself == null ? void 0 : myself.connectionId) === connectionId) {
       this._stateNotifier.subjects["my-presence"].next(myPresence);
       this._stateNotifier.subjects["myself"].next(myself);
@@ -619,6 +644,7 @@ var PluvRoom = class extends AbstractRoom {
     if (!this._state.webSocket)
       throw new Error("Could not find WebSocket");
     this._updateState((oldState) => {
+      oldState.connection.count += 1;
       oldState.connection.id = connectionId;
       oldState.authorization.user = user;
       return oldState;
@@ -627,11 +653,15 @@ var PluvRoom = class extends AbstractRoom {
       connectionId,
       user
     );
-    const myPresence = (_b = (_a = this._usersManager.myself) == null ? void 0 : _a.presence) != null ? _b : null;
-    const myself = (_c = this._usersManager.myself) != null ? _c : null;
-    this._stateNotifier.subjects["my-presence"].next(myPresence);
+    const presence = this._usersManager.myPresence;
+    const myself = (_a = this._usersManager.myself) != null ? _a : null;
+    this._stateNotifier.subjects["my-presence"].next(presence);
     this._stateNotifier.subjects["myself"].next(myself);
-    this._sendMessage({ type: "$GET_OTHERS", data: {} });
+    const update = this._state.connection.count > 1 ? (_c = (_b = this._crdtManager) == null ? void 0 : _b.doc.encodeStateAsUpdate()) != null ? _c : null : null;
+    this._sendMessage({
+      type: "$INITIALIZE_SESSION",
+      data: { presence, update }
+    });
   }
   _handleStorageReceivedMessage(message) {
     var _a;
@@ -688,20 +718,21 @@ var PluvRoom = class extends AbstractRoom {
     if (!this._usersManager.myself)
       return;
     const data = message.data;
-    this._usersManager.setUser(connectionId, data.user);
+    const myself = this._usersManager.myself;
+    if (myself.connectionId === connectionId) {
+      this._sendMessage({ type: "$GET_OTHERS", data: {} });
+    }
+    this._usersManager.setUser(
+      connectionId,
+      data.user,
+      data.presence
+    );
     const other = this._usersManager.getOther(connectionId);
     const others = this._usersManager.getOthers();
     this._otherNotifier.subject(connectionId).next(other);
     this._stateNotifier.subjects["others"].next(others);
   }
   _heartbeat() {
-    if (!this._state.webSocket)
-      return;
-    if (!this._state.connection.id)
-      return;
-    if (this._state.webSocket.readyState !== this._state.webSocket.OPEN) {
-      return;
-    }
     this._clearTimeout(this._timeouts.pong);
     this._timeouts.pong = setTimeout(
       this._reconnect.bind(this),
@@ -733,6 +764,13 @@ 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 }
@@ -889,7 +927,7 @@ var PluvRoom = class extends AbstractRoom {
       this._closeWs();
       this._updateState((oldState) => {
         oldState.authorization.token = null;
-        oldState.connection.state = "Unavailable" /* Unavailable */;
+        oldState.connection.state = "Closed" /* Closed */;
         oldState.webSocket = null;
         return oldState;
       });
@@ -1006,6 +1044,7 @@ var MockedRoom = class extends AbstractRoom {
         user: null
       },
       connection: {
+        count: 1,
         id: null,
         state: "Untouched" /* Untouched */
       },
@@ -1044,6 +1083,14 @@ var MockedRoom = class extends AbstractRoom {
     this.subscribe = (name, callback) => {
       return this._stateNotifier.subscribe(name, callback);
     };
+    this.updateMyPresence = (presence) => {
+      var _a;
+      this._usersManager.updateMyPresence(presence);
+      const myPresence = this._usersManager.myPresence;
+      const myself = (_a = this._usersManager.myself) != null ? _a : null;
+      this._stateNotifier.subjects["my-presence"].next(myPresence);
+      !!myself && this._stateNotifier.subjects["myself"].next(myself);
+    };
     this._events = events;
     this._usersManager = new UsersManager({
       initialPresence,
@@ -1087,14 +1134,11 @@ var MockedRoom = class extends AbstractRoom {
         if (origin === "$STORAGE_UPDATED")
           return;
         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);
         });
       }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/client",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "@pluv/io frontend client",
   "author": "leedavidcs",
   "license": "MIT",
@@ -17,9 +17,9 @@
     "access": "public"
   },
   "dependencies": {
-    "wonka": "^6.3.1",
-    "@pluv/crdt-yjs": "^0.3.6",
-    "@pluv/types": "^0.1.6"
+    "wonka": "^6.3.2",
+    "@pluv/crdt-yjs": "^0.3.7",
+    "@pluv/types": "^0.2.0"
   },
   "peerDependencies": {
     "yjs": "^13.0.0"
@@ -27,9 +27,9 @@
   "devDependencies": {
     "tsup": "^6.7.0",
     "typescript": "^5.0.4",
-    "yjs": "^13.5.52",
-    "@pluv/tsconfig": "^0.1.5",
-    "eslint-config-pluv": "^0.1.10"
+    "yjs": "^13.6.0",
+    "@pluv/tsconfig": "^0.1.6",
+    "eslint-config-pluv": "^0.1.11"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",

package/src/AbstractRoom.ts

@@ -68,4 +68,6 @@ export abstract class AbstractRoom<
         name: TSubject,
         callback: SubscriptionCallback<TIO, TPresence, TSubject>
     ): () => void;
+
+    public abstract updateMyPresence(presence: Partial<TPresence>): void;
 }

package/src/CrdtManager.ts

@@ -15,17 +15,17 @@ export class CrdtManager<TStorage extends Record<string, AbstractType<any>>> {
     constructor(options: CrdtManagerOptions<TStorage> = {}) {
         const { encodedState, initialStorage } = options;
 
-        const doc1 = encodedState
+        const _doc = encodedState
             ? doc<TStorage>().applyUpdate(encodedState)
             : null;
 
-        if (doc1 && !!Object.keys(doc1.toJSON()).length) {
-            this.doc = doc1;
+        if (_doc && !!Object.keys(_doc.toJSON()).length) {
+            this.doc = _doc;
 
             return;
         }
 
-        doc1?.destroy();
+        _doc?.destroy();
 
         this.doc = doc<TStorage>(initialStorage?.());
     }

package/src/MockedRoom.ts

@@ -61,6 +61,7 @@ export class MockedRoom<
             user: null,
         },
         connection: {
+            count: 1,
             id: null,
             state: ConnectionState.Untouched,
         },
@@ -177,6 +178,16 @@ export class MockedRoom<
         return this._stateNotifier.subscribe(name, callback);
     };
 
+    public updateMyPresence = (presence: Partial<TPresence>): void => {
+        this._usersManager.updateMyPresence(presence);
+
+        const myPresence = this._usersManager.myPresence;
+        const myself = this._usersManager.myself ?? null;
+
+        this._stateNotifier.subjects["my-presence"].next(myPresence);
+        !!myself && this._stateNotifier.subjects["myself"].next(myself);
+    };
+
     private _observeCrdt(): void {
         this._subscriptions.observeCrdt?.();
 
@@ -191,16 +202,12 @@ export class MockedRoom<
 
                 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);
                 });
             }
         );

package/src/PluvClient.ts

@@ -17,7 +17,7 @@ export class PluvClient<TIO extends IOLike = IOLike> {
     private _debug: boolean;
     private _wsEndpoint: WsEndpoint;
 
-    private _rooms = new Map<string, PluvRoom<TIO, JsonObject, any>>();
+    private _rooms = new Map<string, PluvRoom<TIO, any, any>>();
 
     constructor(options: PluvClientOptions<TIO>) {
         const { authEndpoint, debug = false, wsEndpoint } = options;
@@ -55,7 +55,7 @@ export class PluvClient<TIO extends IOLike = IOLike> {
     };
 
     public enter = async (
-        room: string | PluvRoom<TIO, JsonObject, any>
+        room: string | PluvRoom<TIO, any, any>
     ): Promise<PluvRoom<TIO, JsonObject, any>> => {
         const toEnter = typeof room === "string" ? this.getRoom(room) : room;
 
@@ -89,7 +89,7 @@ export class PluvClient<TIO extends IOLike = IOLike> {
         return Array.from(this._rooms.values());
     };
 
-    public leave = (room: string | PluvRoom<TIO, JsonObject, any>): void => {
+    public leave = (room: string | PluvRoom<TIO, any, any>): void => {
         const toLeave = typeof room === "string" ? this.getRoom(room) : room;
 
         if (!toLeave) return;

package/src/PluvRoom.ts

@@ -134,6 +134,7 @@ export class PluvRoom<
             user: null,
         },
         connection: {
+            count: 0,
             id: null,
             state: ConnectionState.Untouched,
         },
@@ -279,9 +280,13 @@ export class PluvRoom<
 
         if (!canDisconnect) return;
 
+        this._clearInterval(this._intervals.heartbeat);
+
         this._closeWs();
         this._crdtManager?.destroy();
 
+        this._stateNotifier.subjects["my-presence"].next(null);
+
         this._updateState((oldState) => {
             oldState.authorization.token = null;
             oldState.connection.state = ConnectionState.Closed;
@@ -352,6 +357,21 @@ export class PluvRoom<
         return this._stateNotifier.subscribe(name, callback);
     };
 
+    public updateMyPresence = (presence: Partial<TPresence>): void => {
+        this._usersManager.updateMyPresence(presence);
+
+        const myPresence = this._usersManager.myPresence;
+        const myself = this._usersManager.myself ?? null;
+
+        this._stateNotifier.subjects["my-presence"].next(myPresence);
+        !!myself && this._stateNotifier.subjects["myself"].next(myself);
+
+        this.broadcast(
+            "$UPDATE_PRESENCE" as keyof InferIOInput<TIO>,
+            { presence } as any
+        );
+    };
+
     private _attachWindowListeners(): void {
         if (typeof window === "undefined") return;
         if (typeof document === "undefined") return;
@@ -416,7 +436,6 @@ export class PluvRoom<
 
         this._subscriptions.observeCrdt?.();
 
-        this._clearInterval(this._intervals.heartbeat);
         this._clearTimeout(this._timeouts.pong);
         this._clearTimeout(this._timeouts.reconnect);
 
@@ -431,7 +450,6 @@ export class PluvRoom<
 
         this._detachWsListeners();
 
-        this._stateNotifier.subjects["my-presence"].next(null);
         this._stateNotifier.subjects["myself"].next(null);
     }
 
@@ -537,7 +555,7 @@ export class PluvRoom<
             data.presence as TPresence
         );
 
-        const myPresence = this._usersManager.myself?.presence ?? null;
+        const myPresence = this._usersManager.myPresence;
         const myself = this._usersManager.myself ?? null;
 
         if (myself?.connectionId === connectionId) {
@@ -594,6 +612,7 @@ export class PluvRoom<
         if (!this._state.webSocket) throw new Error("Could not find WebSocket");
 
         this._updateState((oldState) => {
+            oldState.connection.count += 1;
             oldState.connection.id = connectionId;
             oldState.authorization.user = user;
 
@@ -605,13 +624,21 @@ export class PluvRoom<
             user as Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>
         );
 
-        const myPresence = this._usersManager.myself?.presence ?? null;
+        const presence = this._usersManager.myPresence;
         const myself = this._usersManager.myself ?? null;
 
-        this._stateNotifier.subjects["my-presence"].next(myPresence);
+        this._stateNotifier.subjects["my-presence"].next(presence);
         this._stateNotifier.subjects["myself"].next(myself);
 
-        this._sendMessage({ type: "$GET_OTHERS", data: {} });
+        const update =
+            this._state.connection.count > 1
+                ? this._crdtManager?.doc.encodeStateAsUpdate() ?? null
+                : null;
+
+        this._sendMessage({
+            type: "$INITIALIZE_SESSION",
+            data: { presence, update },
+        });
     }
 
     private _handleStorageReceivedMessage(message: IOEventMessage<TIO>): void {
@@ -691,7 +718,17 @@ export class PluvRoom<
             InferIOAuthorize<TIO>
         >["$USER_JOINED"];
 
-        this._usersManager.setUser(connectionId, data.user);
+        const myself = this._usersManager.myself;
+
+        if (myself.connectionId === connectionId) {
+            this._sendMessage({ type: "$GET_OTHERS", data: {} });
+        }
+
+        this._usersManager.setUser(
+            connectionId,
+            data.user,
+            data.presence as TPresence
+        );
 
         const other = this._usersManager.getOther(connectionId);
         const others = this._usersManager.getOthers();
@@ -701,12 +738,6 @@ export class PluvRoom<
     }
 
     private _heartbeat(): void {
-        if (!this._state.webSocket) return;
-        if (!this._state.connection.id) return;
-        if (this._state.webSocket.readyState !== this._state.webSocket.OPEN) {
-            return;
-        }
-
         this._clearTimeout(this._timeouts.pong);
         this._timeouts.pong = setTimeout(
             this._reconnect.bind(this),
@@ -739,6 +770,16 @@ export class PluvRoom<
 
                 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 },
@@ -930,7 +971,7 @@ export class PluvRoom<
 
         this._updateState((oldState) => {
             oldState.authorization.token = null;
-            oldState.connection.state = ConnectionState.Unavailable;
+            oldState.connection.state = ConnectionState.Closed;
             oldState.webSocket = null;
 
             return oldState;

package/src/UsersManager.ts

@@ -20,6 +20,14 @@ export class UsersManager<
     TPresence extends JsonObject = {}
 > {
     private _initialPresence: TPresence;
+    /**
+     * @description This presence can be updated while the user is not
+     * connected.
+     */
+    private _myPresence: TPresence;
+    /**
+     * @description This is only set when the user is connected.
+     */
     private _myself: UserInfo<TIO, TPresence> | null = null;
     private _others = new Map<string, UserInfo<TIO, TPresence>>();
     private _presence: InputZodLike<TPresence> | null = null;
@@ -28,9 +36,14 @@ export class UsersManager<
         const { initialPresence, presence = null } = config;
 
         this._initialPresence = initialPresence as TPresence;
+        this._myPresence = initialPresence as TPresence;
         this._presence = presence;
     }
 
+    public get myPresence(): TPresence {
+        return this._myPresence;
+    }
+
     public get myself(): UserInfo<TIO, TPresence> | null {
         return this._myself;
     }
@@ -52,11 +65,13 @@ export class UsersManager<
         patch: Partial<TPresence>
     ): void {
         if (this._myself?.connectionId === connectionId) {
-            this._myself.presence = Object.assign(
-                Object.create(null),
-                this._myself.presence,
-                patch
-            ) as TPresence;
+            const presence = {
+                ...this._myPresence,
+                ...patch,
+            } as TPresence;
+
+            this._myself.presence = presence;
+            this._myPresence = presence;
 
             return;
         }
@@ -65,11 +80,10 @@ export class UsersManager<
 
         if (!other) return;
 
-        const presence = Object.assign(
-            Object.create(null),
-            other.presence,
-            patch
-        ) as TPresence;
+        const presence = {
+            ...other.presence,
+            ...patch,
+        } as TPresence;
 
         this._presence?.parse(presence);
 
@@ -93,11 +107,14 @@ export class UsersManager<
             presence: this._initialPresence,
             user,
         };
+
+        this._myPresence = this._initialPresence;
     }
 
     public setPresence(connectionId: string, presence: TPresence): void {
         if (this._myself?.connectionId === connectionId) {
             this._myself.presence = presence;
+            this._myPresence = presence;
 
             return;
         }
@@ -111,7 +128,8 @@ export class UsersManager<
 
     public setUser(
         connectionId: string,
-        user: Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>
+        user: Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>,
+        presence?: TPresence
     ): void {
         if (this._myself?.connectionId === connectionId) return;
 
@@ -121,8 +139,19 @@ export class UsersManager<
 
         this._others.set(connectionId, {
             connectionId,
-            presence: this._initialPresence,
+            presence: presence ?? this._initialPresence,
             user,
         });
     }
+
+    /**
+     * @description This method need not care about being connected.
+     */
+    public updateMyPresence(presence: Partial<TPresence>): void {
+        this._myPresence = { ...this._myPresence, ...presence };
+
+        if (!this._myself) return;
+
+        this._myself.presence = this._myPresence;
+    }
 }

package/src/types.ts

@@ -24,6 +24,7 @@ export interface InternalSubscriptions {
 }
 
 export interface WebSocketConnection {
+    count: number;
     id: string | null;
     state: ConnectionState;
 }