@pluv/client 0.6.3 → 0.6.5

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/client@0.6.3 build /home/runner/work/pluv/pluv/packages/client
+> @pluv/client@0.6.5 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
-ESM dist/index.mjs 32.97 KB
-ESM ⚡️ Build success in 85ms
-CJS dist/index.js 34.11 KB
-CJS ⚡️ Build success in 85ms
+ESM dist/index.mjs 34.41 KB
+ESM ⚡️ Build success in 95ms
+CJS dist/index.js 35.55 KB
+CJS ⚡️ Build success in 96ms
 DTS Build start
-DTS ⚡️ Build success in 2970ms
-DTS dist/index.d.ts 11.50 KB
+DTS ⚡️ Build success in 3764ms
+DTS dist/index.d.ts 11.68 KB

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @pluv/client
 
+## 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
+
+- 78fd644: updated readmes with links to the documentation website
+- Updated dependencies [78fd644]
+  - @pluv/crdt-yjs@0.3.6
+
 ## 0.6.3
 
 ### Patch Changes

package/README.md

@@ -23,7 +23,6 @@
   <a href="https://commitizen.github.io/cz-cli/">
     <img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="Commitizen friendly" />
   </a>
-  <img src="https://img.shields.io/badge/docs-coming%20soon!-blue" alt="Docs coming soon!" />
 </p>
 
 <p align="center">
@@ -34,6 +33,8 @@
 
 > Framework agnostic frontend client for [@pluv/io](https://www.npmjs.com/package/@pluv/io)
 
+**👉 See full documentation on [pluv.io](https://pluv.io/docs/introduction). 👈**
+
 ## Installation
 
 ```bash

package/dist/index.d.ts

@@ -60,6 +60,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 +134,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,10 +190,10 @@ 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;
 }
 
@@ -225,6 +227,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

@@ -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);
@@ -267,6 +270,15 @@ var UsersManager = class {
       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
@@ -343,6 +355,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 +454,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 +529,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 +542,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 +616,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 +627,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);
@@ -637,7 +661,7 @@ var PluvRoom = class extends AbstractRoom {
     this._stateNotifier.subjects["others"].next(others);
   }
   _handleRegisteredMessage(message) {
-    var _a, _b, _c;
+    var _a;
     const { connectionId, user } = message;
     if (!connectionId)
       return;
@@ -652,8 +676,8 @@ 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;
+    const myPresence = this._usersManager.myPresence;
+    const myself = (_a = this._usersManager.myself) != null ? _a : null;
     this._stateNotifier.subjects["my-presence"].next(myPresence);
     this._stateNotifier.subjects["myself"].next(myself);
     this._sendMessage({ type: "$GET_OTHERS", data: {} });
@@ -758,6 +782,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 }
@@ -1069,6 +1100,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 +1151,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

@@ -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);
@@ -242,6 +245,15 @@ var UsersManager = class {
       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
@@ -318,6 +330,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 +429,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 +504,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 +517,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 +591,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 +602,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);
@@ -612,7 +636,7 @@ var PluvRoom = class extends AbstractRoom {
     this._stateNotifier.subjects["others"].next(others);
   }
   _handleRegisteredMessage(message) {
-    var _a, _b, _c;
+    var _a;
     const { connectionId, user } = message;
     if (!connectionId)
       return;
@@ -627,8 +651,8 @@ 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;
+    const myPresence = this._usersManager.myPresence;
+    const myself = (_a = this._usersManager.myself) != null ? _a : null;
     this._stateNotifier.subjects["my-presence"].next(myPresence);
     this._stateNotifier.subjects["myself"].next(myself);
     this._sendMessage({ type: "$GET_OTHERS", data: {} });
@@ -733,6 +757,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 }
@@ -1044,6 +1075,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 +1126,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.3",
+  "version": "0.6.5",
   "description": "@pluv/io frontend client",
   "author": "leedavidcs",
   "license": "MIT",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "wonka": "^6.3.1",
-    "@pluv/crdt-yjs": "^0.3.5",
+    "@pluv/crdt-yjs": "^0.3.6",
     "@pluv/types": "^0.1.6"
   },
   "peerDependencies": {
@@ -28,7 +28,7 @@
     "tsup": "^6.7.0",
     "typescript": "^5.0.4",
     "yjs": "^13.5.52",
-    "@pluv/tsconfig": "^0.1.5",
+    "@pluv/tsconfig": "^0.1.6",
     "eslint-config-pluv": "^0.1.10"
   },
   "scripts": {

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/MockedRoom.ts

@@ -177,6 +177,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 +201,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

@@ -279,9 +279,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 +356,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 +435,6 @@ export class PluvRoom<
 
         this._subscriptions.observeCrdt?.();
 
-        this._clearInterval(this._intervals.heartbeat);
         this._clearTimeout(this._timeouts.pong);
         this._clearTimeout(this._timeouts.reconnect);
 
@@ -431,7 +449,6 @@ export class PluvRoom<
 
         this._detachWsListeners();
 
-        this._stateNotifier.subjects["my-presence"].next(null);
         this._stateNotifier.subjects["myself"].next(null);
     }
 
@@ -537,7 +554,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) {
@@ -605,7 +622,7 @@ export class PluvRoom<
             user as Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>
         );
 
-        const myPresence = this._usersManager.myself?.presence ?? null;
+        const myPresence = this._usersManager.myPresence;
         const myself = this._usersManager.myself ?? null;
 
         this._stateNotifier.subjects["my-presence"].next(myPresence);
@@ -739,6 +756,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 },

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;
         }
@@ -125,4 +142,15 @@ export class UsersManager<
             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;
+    }
 }