@pluv/client 1.0.1 → 1.0.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/client@1.0.1 build /home/runner/work/pluv/pluv/packages/client
+> @pluv/client@1.0.2 build /home/runner/work/pluv/pluv/packages/client
 > tsup src/index.ts --format esm,cjs --dts
 
 CLI Building entry: src/index.ts
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 58.07 KB
-CJS ⚡️ Build success in 125ms
-ESM dist/index.mjs 56.75 KB
-ESM ⚡️ Build success in 127ms
+ESM dist/index.mjs 57.31 KB
+ESM ⚡️ Build success in 126ms
+CJS dist/index.js 58.63 KB
+CJS ⚡️ Build success in 126ms
 DTS Build start
-DTS ⚡️ Build success in 3647ms
-DTS dist/index.d.mts 25.34 KB
-DTS dist/index.d.ts  25.34 KB
+DTS ⚡️ Build success in 3638ms
+DTS dist/index.d.mts 25.31 KB
+DTS dist/index.d.ts  25.31 KB

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @pluv/client
 
+## 1.0.2
+
+### Patch Changes
+
+- d87159c: Restored `@pluv/addon-indexeddb` functionality, and fixed `@pluv/addon-indexeddb` sometimes duplicating storage operations based on `initialStorage` values.
+  - @pluv/crdt@1.0.2
+  - @pluv/types@1.0.2
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -188,7 +188,6 @@ declare class PluvRoom<TIO extends IOLike<any, any>, TMetadata extends JsonObjec
     undo: () => void;
     updateMyPresence: (presence: UpdateMyPresenceAction<TPresence>) => void;
     private _addToStorageStore;
-    private _applyStorageStore;
     private _attachWindowListeners;
     private _attachWsListeners;
     private _clearInterval;

package/dist/index.d.ts

@@ -188,7 +188,6 @@ declare class PluvRoom<TIO extends IOLike<any, any>, TMetadata extends JsonObjec
     undo: () => void;
     updateMyPresence: (presence: UpdateMyPresenceAction<TPresence>) => void;
     private _addToStorageStore;
-    private _applyStorageStore;
     private _attachWindowListeners;
     private _attachWsListeners;
     private _clearInterval;

package/dist/index.js

@@ -136,14 +136,17 @@ var CrdtManager = class {
    * update. This unfortunately means updates can be dropped entirely
    * @date June 13, 2023
    */
-  applyUpdate(update, origin) {
+  applyUpdate(params) {
+    const { origin, update } = params;
     if (!this.initialized) return this;
     const updates = typeof update === "string" ? [update] : update;
     this._applyDocUpdates(this.doc, updates, origin);
     return this;
   }
   destroy() {
+    this.initialized = false;
     this.doc.destroy();
+    this.doc = this._docFactory.getEmpty();
   }
   get(key) {
     return this.doc.get(key);
@@ -152,7 +155,7 @@ var CrdtManager = class {
     return this._docFactory.getInitialized().getEncodedState();
   }
   initialize(params) {
-    const { onInitialized, origin, update } = params;
+    const { origin, update } = params;
     if (this.initialized) {
       console.warn("Attempted to initialize storage multiple times");
       return this;
@@ -172,9 +175,11 @@ var CrdtManager = class {
     ).rebuildStorage(reference);
     this.initialized = true;
     initialized.destroy();
-    onInitialized == null ? void 0 : onInitialized(this.doc.getEncodedState());
     return this;
   }
+  resolveEncodedState(updates) {
+    return this._docFactory.resolveEncodedState(updates);
+  }
   _applyDocUpdates(doc, updates, origin) {
     doc.transact(() => {
       doc.batchApplyEncodedState({ origin, updates });
@@ -734,7 +739,7 @@ var PluvRoom = class extends AbstractRoom {
         const shouldFlatten = yield this._storageStore.getShouldFlatten();
         if (!shouldFlatten) return;
         const updates = yield this._storageStore.getUpdates();
-        this._crdtManager.applyUpdate(updates, this);
+        this._crdtManager.applyUpdate({ update: updates, origin: this });
         const encodedState = this._crdtManager.doc.getEncodedState();
         yield this._storageStore.flatten(encodedState);
       }),
@@ -791,6 +796,7 @@ var PluvRoom = class extends AbstractRoom {
         oldState.connection.state = ConnectionState.Connecting;
         return oldState;
       });
+      yield this._storageStore.initialize();
       const wsEndpoint = this._getWsEndpoint(this.id, params);
       const url = new URL(wsEndpoint);
       let authToken = null;
@@ -855,20 +861,6 @@ var PluvRoom = class extends AbstractRoom {
       this._flattenStorageStore();
     });
   }
-  _applyStorageStore() {
-    return __async(this, null, function* () {
-      const updates = yield this._storageStore.getUpdates();
-      this._crdtManager.initialize({
-        onInitialized: () => {
-          this._stateNotifier.subjects["storage-loaded"].next(true);
-          this._observeCrdt();
-        },
-        origin: ORIGIN_INITIALIZED,
-        update: updates
-      });
-      this._emitSharedTypes();
-    });
-  }
   _attachWindowListeners() {
     if (typeof window === "undefined") return;
     if (typeof document === "undefined") return;
@@ -1059,33 +1051,35 @@ var PluvRoom = class extends AbstractRoom {
     this._stateNotifier.subjects.others.next(others);
   }
   _handleRegisteredMessage(message) {
-    var _a, _b;
-    const { connectionId } = message;
-    const user = message.user;
-    if (!connectionId) return;
-    if (!this._state.webSocket) throw new Error("Could not find WebSocket");
-    const data = message.data;
-    const state = data.state;
-    this._updateState((oldState) => {
-      oldState.connection.count += 1;
-      oldState.connection.id = connectionId;
-      oldState.authorization.user = user != null ? user : null;
-      return oldState;
-    });
-    const userInfo = {
-      connectionId,
-      presence: (_a = data.presence) != null ? _a : void 0,
-      user
-    };
-    this._usersManager.setMyself(userInfo);
-    const presence = this._usersManager.myPresence;
-    const myself = (_b = this._usersManager.myself) != null ? _b : null;
-    this._stateNotifier.subjects["my-presence"].next(presence);
-    this._stateNotifier.subjects.myself.next(myself);
-    const update = this._crdtManager.getInitialState();
-    this._sendMessage({
-      type: "$initializeSession",
-      data: { presence, update }
+    return __async(this, null, function* () {
+      var _a, _b, _c;
+      const { connectionId } = message;
+      const user = message.user;
+      if (!connectionId) return;
+      if (!this._state.webSocket) throw new Error("Could not find WebSocket");
+      const data = message.data;
+      const state = data.state;
+      this._updateState((oldState) => {
+        oldState.connection.count += 1;
+        oldState.connection.id = connectionId;
+        oldState.authorization.user = user != null ? user : null;
+        return oldState;
+      });
+      const userInfo = {
+        connectionId,
+        presence: (_a = data.presence) != null ? _a : void 0,
+        user
+      };
+      this._usersManager.setMyself(userInfo);
+      const presence = this._usersManager.myPresence;
+      const myself = (_b = this._usersManager.myself) != null ? _b : null;
+      this._stateNotifier.subjects["my-presence"].next(presence);
+      this._stateNotifier.subjects.myself.next(myself);
+      const update = !state ? (_c = this._crdtManager.resolveEncodedState(yield this._storageStore.getUpdates())) != null ? _c : this._crdtManager.getInitialState() : this._crdtManager.getInitialState();
+      this._sendMessage({
+        type: "$initializeSession",
+        data: { presence, update }
+      });
     });
   }
   _handleStorageReceivedMessage(message) {
@@ -1094,24 +1088,34 @@ var PluvRoom = class extends AbstractRoom {
       if (!connectionId) return;
       if (!this._state.webSocket) throw new Error("Could not find WebSocket");
       const data = message.data;
+      const changeKind = data.changeKind;
       const state = data.state;
-      this._crdtManager.initialize({
-        onInitialized: (update2) => __async(this, null, function* () {
-          yield this._addToStorageStore(update2);
-          this._emitSharedTypes();
-          this._observeCrdt();
-          this._stateNotifier.subjects["storage-loaded"].next(true);
-        }),
-        origin: ORIGIN_INITIALIZED,
-        update: state
-      });
+      const updates = yield this._storageStore.getUpdates();
+      const origin = ORIGIN_INITIALIZED;
+      const updateStorage = (update) => {
+        return this._crdtManager.initialized ? this._crdtManager.applyUpdate({ update, origin }) : this._crdtManager.initialize({ update, origin });
+      };
+      if (changeKind === "empty") {
+        this._crdtManager.destroy();
+        this._crdtManager.initialize({ origin, update: updates });
+      } else if (changeKind === "initialized") {
+        if (!!updates.length) updateStorage(updates);
+        else {
+          const encodedState2 = updateStorage(state).doc.getEncodedState();
+          this._addToStorageStore(encodedState2);
+        }
+      } else {
+        const encodedState2 = updateStorage(state).doc.getEncodedState();
+        if (!!updates.length) this._crdtManager.applyUpdate({ update: updates, origin });
+        yield this._addToStorageStore(encodedState2);
+      }
       const encodedState = this._crdtManager.doc.getEncodedState();
-      yield this._storageStore.addUpdate(encodedState);
       this._emitSharedTypes();
-      const update = this._crdtManager.doc.getEncodedState();
+      this._observeCrdt();
+      this._stateNotifier.subjects["storage-loaded"].next(true);
       this._sendMessage({
         type: "$updateStorage",
-        data: { origin: ORIGIN_INITIALIZED, update }
+        data: { origin, update: encodedState }
       });
     });
   }
@@ -1190,11 +1194,11 @@ var PluvRoom = class extends AbstractRoom {
     const unsubscribe = this._crdtManager.doc.subscribe((event) => {
       var _a2;
       const origin = (_a2 = event.origin) != null ? _a2 : null;
-      this._addToStorageStore(event.update);
       this._emitSharedTypes();
       if (origin === ORIGIN_INITIALIZED || origin === ORIGIN_STORAGE_UPDATED) {
         return;
       }
+      this._addToStorageStore(event.update);
       if (!this._state.webSocket) return;
       if (!this._state.connection.id) return;
       if (this._state.webSocket.readyState !== WebSocket.OPEN) return;

package/dist/index.mjs

@@ -105,14 +105,17 @@ var CrdtManager = class {
    * update. This unfortunately means updates can be dropped entirely
    * @date June 13, 2023
    */
-  applyUpdate(update, origin) {
+  applyUpdate(params) {
+    const { origin, update } = params;
     if (!this.initialized) return this;
     const updates = typeof update === "string" ? [update] : update;
     this._applyDocUpdates(this.doc, updates, origin);
     return this;
   }
   destroy() {
+    this.initialized = false;
     this.doc.destroy();
+    this.doc = this._docFactory.getEmpty();
   }
   get(key) {
     return this.doc.get(key);
@@ -121,7 +124,7 @@ var CrdtManager = class {
     return this._docFactory.getInitialized().getEncodedState();
   }
   initialize(params) {
-    const { onInitialized, origin, update } = params;
+    const { origin, update } = params;
     if (this.initialized) {
       console.warn("Attempted to initialize storage multiple times");
       return this;
@@ -141,9 +144,11 @@ var CrdtManager = class {
     ).rebuildStorage(reference);
     this.initialized = true;
     initialized.destroy();
-    onInitialized == null ? void 0 : onInitialized(this.doc.getEncodedState());
     return this;
   }
+  resolveEncodedState(updates) {
+    return this._docFactory.resolveEncodedState(updates);
+  }
   _applyDocUpdates(doc, updates, origin) {
     doc.transact(() => {
       doc.batchApplyEncodedState({ origin, updates });
@@ -703,7 +708,7 @@ var PluvRoom = class extends AbstractRoom {
         const shouldFlatten = yield this._storageStore.getShouldFlatten();
         if (!shouldFlatten) return;
         const updates = yield this._storageStore.getUpdates();
-        this._crdtManager.applyUpdate(updates, this);
+        this._crdtManager.applyUpdate({ update: updates, origin: this });
         const encodedState = this._crdtManager.doc.getEncodedState();
         yield this._storageStore.flatten(encodedState);
       }),
@@ -760,6 +765,7 @@ var PluvRoom = class extends AbstractRoom {
         oldState.connection.state = ConnectionState.Connecting;
         return oldState;
       });
+      yield this._storageStore.initialize();
       const wsEndpoint = this._getWsEndpoint(this.id, params);
       const url = new URL(wsEndpoint);
       let authToken = null;
@@ -824,20 +830,6 @@ var PluvRoom = class extends AbstractRoom {
       this._flattenStorageStore();
     });
   }
-  _applyStorageStore() {
-    return __async(this, null, function* () {
-      const updates = yield this._storageStore.getUpdates();
-      this._crdtManager.initialize({
-        onInitialized: () => {
-          this._stateNotifier.subjects["storage-loaded"].next(true);
-          this._observeCrdt();
-        },
-        origin: ORIGIN_INITIALIZED,
-        update: updates
-      });
-      this._emitSharedTypes();
-    });
-  }
   _attachWindowListeners() {
     if (typeof window === "undefined") return;
     if (typeof document === "undefined") return;
@@ -1028,33 +1020,35 @@ var PluvRoom = class extends AbstractRoom {
     this._stateNotifier.subjects.others.next(others);
   }
   _handleRegisteredMessage(message) {
-    var _a, _b;
-    const { connectionId } = message;
-    const user = message.user;
-    if (!connectionId) return;
-    if (!this._state.webSocket) throw new Error("Could not find WebSocket");
-    const data = message.data;
-    const state = data.state;
-    this._updateState((oldState) => {
-      oldState.connection.count += 1;
-      oldState.connection.id = connectionId;
-      oldState.authorization.user = user != null ? user : null;
-      return oldState;
-    });
-    const userInfo = {
-      connectionId,
-      presence: (_a = data.presence) != null ? _a : void 0,
-      user
-    };
-    this._usersManager.setMyself(userInfo);
-    const presence = this._usersManager.myPresence;
-    const myself = (_b = this._usersManager.myself) != null ? _b : null;
-    this._stateNotifier.subjects["my-presence"].next(presence);
-    this._stateNotifier.subjects.myself.next(myself);
-    const update = this._crdtManager.getInitialState();
-    this._sendMessage({
-      type: "$initializeSession",
-      data: { presence, update }
+    return __async(this, null, function* () {
+      var _a, _b, _c;
+      const { connectionId } = message;
+      const user = message.user;
+      if (!connectionId) return;
+      if (!this._state.webSocket) throw new Error("Could not find WebSocket");
+      const data = message.data;
+      const state = data.state;
+      this._updateState((oldState) => {
+        oldState.connection.count += 1;
+        oldState.connection.id = connectionId;
+        oldState.authorization.user = user != null ? user : null;
+        return oldState;
+      });
+      const userInfo = {
+        connectionId,
+        presence: (_a = data.presence) != null ? _a : void 0,
+        user
+      };
+      this._usersManager.setMyself(userInfo);
+      const presence = this._usersManager.myPresence;
+      const myself = (_b = this._usersManager.myself) != null ? _b : null;
+      this._stateNotifier.subjects["my-presence"].next(presence);
+      this._stateNotifier.subjects.myself.next(myself);
+      const update = !state ? (_c = this._crdtManager.resolveEncodedState(yield this._storageStore.getUpdates())) != null ? _c : this._crdtManager.getInitialState() : this._crdtManager.getInitialState();
+      this._sendMessage({
+        type: "$initializeSession",
+        data: { presence, update }
+      });
     });
   }
   _handleStorageReceivedMessage(message) {
@@ -1063,24 +1057,34 @@ var PluvRoom = class extends AbstractRoom {
       if (!connectionId) return;
       if (!this._state.webSocket) throw new Error("Could not find WebSocket");
       const data = message.data;
+      const changeKind = data.changeKind;
       const state = data.state;
-      this._crdtManager.initialize({
-        onInitialized: (update2) => __async(this, null, function* () {
-          yield this._addToStorageStore(update2);
-          this._emitSharedTypes();
-          this._observeCrdt();
-          this._stateNotifier.subjects["storage-loaded"].next(true);
-        }),
-        origin: ORIGIN_INITIALIZED,
-        update: state
-      });
+      const updates = yield this._storageStore.getUpdates();
+      const origin = ORIGIN_INITIALIZED;
+      const updateStorage = (update) => {
+        return this._crdtManager.initialized ? this._crdtManager.applyUpdate({ update, origin }) : this._crdtManager.initialize({ update, origin });
+      };
+      if (changeKind === "empty") {
+        this._crdtManager.destroy();
+        this._crdtManager.initialize({ origin, update: updates });
+      } else if (changeKind === "initialized") {
+        if (!!updates.length) updateStorage(updates);
+        else {
+          const encodedState2 = updateStorage(state).doc.getEncodedState();
+          this._addToStorageStore(encodedState2);
+        }
+      } else {
+        const encodedState2 = updateStorage(state).doc.getEncodedState();
+        if (!!updates.length) this._crdtManager.applyUpdate({ update: updates, origin });
+        yield this._addToStorageStore(encodedState2);
+      }
       const encodedState = this._crdtManager.doc.getEncodedState();
-      yield this._storageStore.addUpdate(encodedState);
       this._emitSharedTypes();
-      const update = this._crdtManager.doc.getEncodedState();
+      this._observeCrdt();
+      this._stateNotifier.subjects["storage-loaded"].next(true);
       this._sendMessage({
         type: "$updateStorage",
-        data: { origin: ORIGIN_INITIALIZED, update }
+        data: { origin, update: encodedState }
       });
     });
   }
@@ -1159,11 +1163,11 @@ var PluvRoom = class extends AbstractRoom {
     const unsubscribe = this._crdtManager.doc.subscribe((event) => {
       var _a2;
       const origin = (_a2 = event.origin) != null ? _a2 : null;
-      this._addToStorageStore(event.update);
       this._emitSharedTypes();
       if (origin === ORIGIN_INITIALIZED || origin === ORIGIN_STORAGE_UPDATED) {
         return;
       }
+      this._addToStorageStore(event.update);
       if (!this._state.webSocket) return;
       if (!this._state.connection.id) return;
       if (this._state.webSocket.readyState !== WebSocket.OPEN) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/client",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "@pluv/io frontend client",
   "author": "leedavidcs",
   "license": "MIT",
@@ -18,15 +18,15 @@
   },
   "dependencies": {
     "wonka": "^6.3.5",
-    "@pluv/crdt": "^1.0.1",
-    "@pluv/types": "^1.0.1"
+    "@pluv/crdt": "^1.0.2",
+    "@pluv/types": "^1.0.2"
   },
   "devDependencies": {
     "eslint": "^9.25.1",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "@pluv/tsconfig": "^1.0.1",
-    "eslint-config-pluv": "^1.0.1"
+    "@pluv/tsconfig": "^1.0.2",
+    "eslint-config-pluv": "^1.0.2"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",

package/src/CrdtManager.ts

@@ -5,11 +5,15 @@ export type CrdtManagerOptions<TStorage extends Record<string, CrdtType<any, any
     initialStorage?: AbstractCrdtDocFactory<TStorage>;
 };
 
-type CrdtManagerInitializeParams = {
-    onInitialized?: (state: string) => void;
+interface CrdtManagerInitializeParams {
     origin?: any;
     update: string | readonly string[];
-};
+}
+
+interface ApplyUpdateParams {
+    origin?: any;
+    update: string | readonly string[];
+}
 
 export class CrdtManager<TStorage extends Record<string, CrdtType<any, any>>> {
     public doc: AbstractCrdtDoc<TStorage>;
@@ -30,7 +34,9 @@ export class CrdtManager<TStorage extends Record<string, CrdtType<any, any>>> {
      * update. This unfortunately means updates can be dropped entirely
      * @date June 13, 2023
      */
-    public applyUpdate(update: string | readonly string[], origin?: any): this {
+    public applyUpdate(params: ApplyUpdateParams): this {
+        const { origin, update } = params;
+
         if (!this.initialized) return this;
 
         const updates: readonly string[] = typeof update === "string" ? [update] : update;
@@ -41,7 +47,9 @@ export class CrdtManager<TStorage extends Record<string, CrdtType<any, any>>> {
     }
 
     public destroy(): void {
+        this.initialized = false;
         this.doc.destroy();
+        this.doc = this._docFactory.getEmpty();
     }
 
     public get<TKey extends keyof TStorage>(key: TKey): TStorage[TKey] {
@@ -53,7 +61,7 @@ export class CrdtManager<TStorage extends Record<string, CrdtType<any, any>>> {
     }
 
     public initialize(params: CrdtManagerInitializeParams): this {
-        const { onInitialized, origin, update } = params;
+        const { origin, update } = params;
 
         /**
          * !HACK
@@ -94,11 +102,13 @@ export class CrdtManager<TStorage extends Record<string, CrdtType<any, any>>> {
         this.initialized = true;
         initialized.destroy();
 
-        onInitialized?.(this.doc.getEncodedState());
-
         return this;
     }
 
+    public resolveEncodedState(updates: string | string[] | readonly string[]): string | null {
+        return this._docFactory.resolveEncodedState(updates);
+    }
+
     private _applyDocUpdates(
         doc: AbstractCrdtDoc<TStorage>,
         updates: readonly string[],

package/src/PluvRoom.ts

@@ -389,8 +389,7 @@ export class PluvRoom<
             return oldState;
         });
 
-        // await this._storageStore.initialize();
-        // await this._applyStorageStore();
+        await this._storageStore.initialize();
 
         const wsEndpoint = this._getWsEndpoint(this.id, params);
         const url = new URL(wsEndpoint);
@@ -612,22 +611,6 @@ export class PluvRoom<
         this._flattenStorageStore();
     }
 
-    private async _applyStorageStore(): Promise<void> {
-        const updates = await this._storageStore.getUpdates();
-
-        this._crdtManager.initialize({
-            onInitialized: () => {
-                this._stateNotifier.subjects["storage-loaded"].next(true);
-
-                this._observeCrdt();
-            },
-            origin: ORIGIN_INITIALIZED,
-            update: updates,
-        });
-
-        this._emitSharedTypes();
-    }
-
     private _attachWindowListeners(): void {
         if (typeof window === "undefined") return;
         if (typeof document === "undefined") return;
@@ -738,7 +721,7 @@ export class PluvRoom<
 
             const updates = await this._storageStore.getUpdates();
 
-            this._crdtManager.applyUpdate(updates, this);
+            this._crdtManager.applyUpdate({ update: updates, origin: this });
 
             const encodedState = this._crdtManager.doc.getEncodedState();
 
@@ -941,7 +924,7 @@ export class PluvRoom<
         this._stateNotifier.subjects.others.next(others);
     }
 
-    private _handleRegisteredMessage(message: IOEventMessage<TIO>): void {
+    private async _handleRegisteredMessage(message: IOEventMessage<TIO>): Promise<void> {
         const { connectionId } = message;
         const user = message.user as Id<InferIOAuthorizeUser<InferIOAuthorize<TIO>>>;
 
@@ -950,11 +933,6 @@ export class PluvRoom<
         if (!this._state.webSocket) throw new Error("Could not find WebSocket");
 
         const data = message.data as BaseIOEventRecord<InferIOAuthorize<TIO>>["$registered"];
-        /**
-         * TODO
-         * @description Maybe we can use this to resolve storage initialization more efficiently
-         * @date May 7, 2025
-         */
         const state = data.state;
 
         this._updateState((oldState) => {
@@ -978,7 +956,10 @@ export class PluvRoom<
         this._stateNotifier.subjects["my-presence"].next(presence);
         this._stateNotifier.subjects.myself.next(myself);
 
-        const update = this._crdtManager.getInitialState();
+        const update = !state
+            ? (this._crdtManager.resolveEncodedState(await this._storageStore.getUpdates()) ??
+              this._crdtManager.getInitialState())
+            : this._crdtManager.getInitialState();
 
         this._sendMessage({
             type: "$initializeSession",
@@ -994,30 +975,45 @@ export class PluvRoom<
         if (!this._state.webSocket) throw new Error("Could not find WebSocket");
 
         const data = message.data as BaseIOEventRecord<InferIOAuthorize<TIO>>["$storageReceived"];
+        const changeKind = data.changeKind;
         const state = data.state;
 
-        this._crdtManager.initialize({
-            onInitialized: async (update) => {
-                await this._addToStorageStore(update);
-                this._emitSharedTypes();
-                this._observeCrdt();
-                this._stateNotifier.subjects["storage-loaded"].next(true);
-            },
-            origin: ORIGIN_INITIALIZED,
-            update: state,
-        });
+        const updates = await this._storageStore.getUpdates();
+        const origin = ORIGIN_INITIALIZED;
 
-        const encodedState = this._crdtManager.doc.getEncodedState();
+        const updateStorage = (update: string | readonly string[]) => {
+            return this._crdtManager.initialized
+                ? this._crdtManager.applyUpdate({ update, origin })
+                : this._crdtManager.initialize({ update, origin });
+        };
 
-        await this._storageStore.addUpdate(encodedState);
+        if (changeKind === "empty") {
+            this._crdtManager.destroy();
+            this._crdtManager.initialize({ origin, update: updates });
+        } else if (changeKind === "initialized") {
+            if (!!updates.length) updateStorage(updates);
+            else {
+                const encodedState = updateStorage(state).doc.getEncodedState();
 
-        this._emitSharedTypes();
+                this._addToStorageStore(encodedState);
+            }
+        } else {
+            const encodedState = updateStorage(state).doc.getEncodedState();
+
+            if (!!updates.length) this._crdtManager.applyUpdate({ update: updates, origin });
+
+            await this._addToStorageStore(encodedState);
+        }
+
+        const encodedState = this._crdtManager.doc.getEncodedState();
 
-        const update = this._crdtManager.doc.getEncodedState();
+        this._emitSharedTypes();
+        this._observeCrdt();
+        this._stateNotifier.subjects["storage-loaded"].next(true);
 
         this._sendMessage({
             type: "$updateStorage",
-            data: { origin: ORIGIN_INITIALIZED, update },
+            data: { origin, update: encodedState },
         });
     }
 
@@ -1135,13 +1131,14 @@ export class PluvRoom<
         const unsubscribe = this._crdtManager.doc.subscribe((event) => {
             const origin = event.origin ?? null;
 
-            this._addToStorageStore(event.update);
             this._emitSharedTypes();
 
             if (origin === ORIGIN_INITIALIZED || origin === ORIGIN_STORAGE_UPDATED) {
                 return;
             }
 
+            this._addToStorageStore(event.update);
+
             if (!this._state.webSocket) return;
             if (!this._state.connection.id) return;
             if (this._state.webSocket.readyState !== WebSocket.OPEN) return;