pinia-plugin-persist-state 0.1.2-beta.0 → 0.1.2-beta.1

package/CHANGELOG.md

@@ -5,13 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.1.2-beta.0]
+## [0.1.2]
 
 ### Added
 - Added an object-based `createPersistStatePlugin` configuration to explicitly select `storage`, `databaseName`, `objectStoreName`, and `cryptKey`.
 - Added `persistenceKey` to persist a store under a stable or application-specific record key instead of its Pinia `$id`.
 - Added opt-in cache metadata and restore policies through `cache`, including `maxAge`, schema `version`, and expiration/version-mismatch actions.
 - Added `debounceMs` for trailing, per-store automatic persistence; automatic writes use a 200 ms delay by default.
+- Added `restoreOnHydrate` to restore state store on client hydration.
 - Added `flushPersistedState()` to immediately write the latest store state and cancel a pending debounced write.
 - Added `transformState` to convert a filtered snapshot into an application-defined persistent representation before it is stored.
 - Added `fake-indexeddb` integration tests for real IndexedDB updates, connection reuse, selective deletion, database isolation, and transaction errors.

package/README.md

@@ -112,6 +112,7 @@ Fields available when setting `storeOptions`:
 - `transformState?: (state) => state` — Optional synchronous transformer applied to the filtered snapshot after selected properties are encrypted and before storage. Use it to convert application-specific values into a persistent representation.
 - `watchMutation?: boolean` — When `true`, plugin watches store mutations and automatically persists changes.
 - `debounceMs?: number` — Delay in milliseconds before an automatic persistence is written. Defaults to `200`; use `0` to persist each mutation immediately.
+- `restoreOnHydrate?: boolean` - Set it to true, and the persisted state will be restored to the store.
 
 `CacheOptions` supports `maxAge?: number`, `version?: number`, `onExpired?: 'ignore' | 'remove' | 'restore'`, and `onVersionMismatch?: 'ignore' | 'remove' | 'restore'`. Cache metadata is written only when `cache` is configured.
 

package/dist/pinia-plugin-persist-state.js

@@ -1,6 +1,6 @@
 import { Store as f, isEmpty as u, CustomConsole as _, PluginSubscriber as w } from "pinia-plugin-subscription";
 import { toRaw as P, nextTick as v } from "vue";
-class T {
+class E {
   _storage;
   constructor(t) {
     this._storage = t === "localStorage" ? localStorage : sessionStorage;
@@ -104,7 +104,7 @@ class m {
   }
   defineDb() {
     const { databaseName: t, keyPath: e, name: s, objectStoreName: r, storage: a } = this._db_options, o = a ?? (s === "localStorage" || s === "sessionStorage" ? s : "indexedDB");
-    return o === "localStorage" || o === "sessionStorage" ? new T(o) : new l(t ?? s, r ?? "persistedStore", { keyPath: e });
+    return o === "localStorage" || o === "sessionStorage" ? new E(o) : new l(t ?? s, r ?? "persistedStore", { keyPath: e });
   }
   async getItem(t) {
     return this._db.getItem(t);
@@ -116,7 +116,7 @@ class m {
     this._db instanceof l ? await this._db.setItem({ storeName: t, ...e }) : await this._db.setItem(e, t);
   }
 }
-class E {
+class T {
   _store = /* @__PURE__ */ new Map();
   async clear() {
     this._store.clear();
@@ -159,7 +159,7 @@ const N = {
 };
 class I extends m {
   defineDb() {
-    return this.dbName === "localStorage" || this.dbName === "sessionStorage" ? N : new E();
+    return this.dbName === "localStorage" || this.dbName === "sessionStorage" ? N : new T();
   }
 }
 class h {
@@ -278,18 +278,12 @@ class g extends f {
       options: e
     }), this.toBeWatched() && (this._watchedStore.add(this.store.$id), this.storeSubscribe = this.storeSubscription.bind(this));
   }
-  hydrate() {
-    return typeof window > "u" ? Promise.resolve() : this.remember();
-  }
   augmentStore() {
     const { isEncrypted: t, persistedPropertiesToEncrypt: e, watchMutation: s } = this.options;
     t === void 0 && (this.options.isEncrypted = !1), e === void 0 && (this.options.persistedPropertiesToEncrypt = []), s === void 0 && (this.options.watchMutation = !1), this.stateHas("isLoading") || this.addToState("isLoading", !1), this.store.persistState = async () => await this.persist(), this.store.flushPersistedState = async () => await this.flushPersistedState(), this.store.remember = async () => await this.remember(), this.store.removePersistedState = this.removePersistedState.bind(this), this.store.watch = this.watch.bind(this), this.store.stopWatch = this.stopWatch.bind(this), this.store.hydrate = this.hydrate.bind(this);
   }
-  async decryptProperty(t, e) {
-    return t.decrypt(e);
-  }
-  async encryptProperty(t, e) {
-    return t.encrypt(e);
+  cancelScheduledPersist() {
+    this._persistTimer && (clearTimeout(this._persistTimer), this._persistTimer = void 0);
   }
   async cryptState(t, e = !1) {
     return await new Promise(async (s) => {
@@ -312,6 +306,9 @@ class g extends f {
   static customizeStore(t, e, s, r) {
     return !e.storeOptions?.persist && e.storeOptions?.watchMutation && (e.storeOptions.persist = !0), super.customizeStore(t, e, s, r);
   }
+  async decryptProperty(t, e) {
+    return t.decrypt(e);
+  }
   definePersister(t) {
     const e = this.getPersistedStoreOptions();
     if (!e.storage || e.storage === e.storageOptions?.storage) {
@@ -327,8 +324,11 @@ class g extends f {
       keyPath: "storeName"
     });
   }
-  isEncrypted() {
-    return this.options.isEncrypted;
+  async encryptProperty(t, e) {
+    return t.encrypt(e);
+  }
+  async flushPersistedState() {
+    this.cancelScheduledPersist(), await this.persist();
   }
   getPropertiesToEncrypt() {
     return this.options?.persistedPropertiesToEncrypt ?? [];
@@ -336,12 +336,12 @@ class g extends f {
   getPersistenceKey() {
     return this.getPersistedStoreOptions().persistenceKey ?? this.store.$id;
   }
+  getCachedState(t) {
+    return this.getCacheOptions() && t && "state" in t && "metadata" in t ? t : void 0;
+  }
   getCacheOptions() {
     return this.getPersistedStoreOptions().cache;
   }
-  transformState(t) {
-    return this.getPersistedStoreOptions().transformState?.(t) ?? t;
-  }
   getPersistedStoreOptions() {
     return this.options;
   }
@@ -360,13 +360,6 @@ class g extends f {
       this.logError("getPersistedState()", { persistenceKey: e, e: s });
     }
   }
-  getCachedState(t) {
-    return this.getCacheOptions() && t && "state" in t && "metadata" in t ? t : void 0;
-  }
-  async shouldIgnoreCachedState(t, e) {
-    const s = this.getCacheOptions(), r = s.maxAge !== void 0 && t.metadata.cachedAt + s.maxAge < Date.now(), a = s.version !== void 0 && s.version !== t.metadata.version, o = r ? s.onExpired : a ? s.onVersionMismatch : void 0;
-    return !o || o === "restore" ? !1 : (o === "remove" && await this._persister.removeItem(e), !0);
-  }
   async getStateToPersist() {
     const t = this._excludedKeys, e = this.state, s = this._propertiesToEncrypt.size > 0, r = this._crypt;
     s && await r.init();
@@ -387,12 +380,18 @@ class g extends f {
   static hasRequiredKeys(t) {
     return !!t?.persist || !!t?.watchMutation;
   }
+  hydrate() {
+    return typeof window > "u" || !this.shouldRestoreOnHydrate() ? Promise.resolve() : this.remember();
+  }
   initExcludedKeys() {
     return /* @__PURE__ */ new Set([
       ...O,
       ...this.options.excludedKeys ?? []
     ]);
   }
+  isEncrypted() {
+    return this.options.isEncrypted;
+  }
   async persist() {
     const t = ++this._persistenceVersion, e = await this.getStateToPersist();
     if (this.debugLog(`persist() ${this.store.$id} - stateToPersist:`, { state: e }), !u(e)) {
@@ -403,14 +402,16 @@ class g extends f {
       }), await a;
     }
   }
-  propertyShouldBePersisted(t) {
-    return !this._excludedKeys.has(t);
-  }
   async remember() {
-    return this.state.isLoading = !0, new Promise(async (t) => {
-      let e = await this.getPersistedState();
-      return e && !u(e) && this.store.$patch(e), this.state.isLoading = !1, t();
-    });
+    this.state.isLoading = !0;
+    try {
+      let t = await this.getPersistedState();
+      t && !u(t) && this.store.$patch(t);
+    } catch (t) {
+      this.logError("remember()", { error: t, storeName: this.store.$id });
+    } finally {
+      this.state.isLoading = !1;
+    }
   }
   async removePersistedState() {
     this.cancelScheduledPersist(), ++this._persistenceVersion;
@@ -420,6 +421,18 @@ class g extends f {
     this._writeQueue = t.catch(() => {
     }), await t;
   }
+  schedulePersist(t) {
+    this.cancelScheduledPersist(), this._persistTimer = setTimeout(() => {
+      this._persistTimer = void 0, this.persist().then(() => this.store.mutationCallback?.(this.state, t)).catch((e) => this.logError("persist()", { error: e, storeName: this.store.$id }));
+    }, this.getDebounceMs());
+  }
+  async shouldIgnoreCachedState(t, e) {
+    const s = this.getCacheOptions(), r = s.maxAge !== void 0 && t.metadata.cachedAt + s.maxAge < Date.now(), a = s.version !== void 0 && s.version !== t.metadata.version, o = r ? s.onExpired : a ? s.onVersionMismatch : void 0;
+    return !o || o === "restore" ? !1 : (o === "remove" && await this._persister.removeItem(e), !0);
+  }
+  shouldRestoreOnHydrate() {
+    return this.options.restoreOnHydrate === !0;
+  }
   stopWatch() {
     this.options?.watchMutation && (this.options && (this.options.watchMutation = !1), this._watchedStore.delete(this.store.$id));
   }
@@ -437,33 +450,25 @@ class g extends f {
       this.store
     ]), t.type !== "patch object" && this.getWatchMutation() && this.schedulePersist(t);
   }
-  cancelScheduledPersist() {
-    this._persistTimer && (clearTimeout(this._persistTimer), this._persistTimer = void 0);
-  }
-  schedulePersist(t) {
-    this.cancelScheduledPersist(), this._persistTimer = setTimeout(() => {
-      this._persistTimer = void 0, this.persist().then(() => this.store.mutationCallback?.(this.state, t)).catch((e) => this.logError("persist()", { error: e, storeName: this.store.$id }));
-    }, this.getDebounceMs());
-  }
-  async flushPersistedState() {
-    this.cancelScheduledPersist(), await this.persist();
-  }
   toBeCrypted() {
     return !!(this._crypt && this.getPropertiesToEncrypt());
   }
   toBeWatched() {
     return !this._watchedStore.has(this.store.$id);
   }
+  transformState(t) {
+    return this.getPersistedStoreOptions().transformState?.(t) ?? t;
+  }
   watch() {
     this.toBeWatched() && (this.options && (this.options.watchMutation = !0), this.storeSubscribe = this.storeSubscription.bind(this));
   }
 }
 const b = "pinia-plugin-persist-state";
-class x extends _ {
+class C extends _ {
   _pluginName = b;
 }
-const S = new x();
-class C extends w {
+const S = new C();
+class x extends w {
   _resetStoreCallback = (t) => {
     const { removePersistedState: e } = t;
     typeof e == "function" && e();
@@ -487,13 +492,13 @@ class C extends w {
     });
   }
 }
-const y = new C(), K = ["localStorage", "sessionStorage"];
+const y = new x(), A = ["localStorage", "sessionStorage"];
 function L(i, t) {
-  const e = A(i, t);
+  const e = K(i, t);
   return y.pluginOptions = D(e), y;
 }
-function A(i, t) {
-  return typeof i != "string" ? i : K.includes(i) ? { storage: i, cryptKey: t } : {
+function K(i, t) {
+  return typeof i != "string" ? i : A.includes(i) ? { storage: i, cryptKey: t } : {
     storage: "indexedDB",
     databaseName: i,
     objectStoreName: "persistedStore",

package/dist/types/store.d.ts

@@ -35,6 +35,7 @@ export interface PersistedStoreOptions {
     persist?: boolean;
     persistenceKey?: string;
     persistedPropertiesToEncrypt?: string[];
+    restoreOnHydrate?: boolean;
     storage?: PersistStorage;
     transformState?: PersistedStateTransformer;
     watchMutation?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pinia-plugin-persist-state",
   "description": "Pinia plugin for persisting store state",
-  "version": "0.1.2-beta.0",
+  "version": "0.1.2-beta.1",
   "type": "module",
   "author": "Alexandre Bidaud <alexbidaud85@gmail.com> (https://github.com/AlxBDo)",
   "license": "MIT",