diff --git a/packages/runed/src/lib/utilities/PersistedState/PersistedState.svelte.ts b/packages/runed/src/lib/utilities/PersistedState/PersistedState.svelte.ts index 34896e77..44634aef 100644 --- a/packages/runed/src/lib/utilities/PersistedState/PersistedState.svelte.ts +++ b/packages/runed/src/lib/utilities/PersistedState/PersistedState.svelte.ts @@ -115,8 +115,10 @@ type StorageType = "local" | "session"; type PersistedStateOptions = { /** The storage type to use. Defaults to `local`. */ storage?: StorageType | StorageAdapter; - /** Whether to sync with the state changes from other tabs. Defaults to `true`. */ - syncTabs?: boolean; + /** + * Whether to synchronize the state with changes detected via the `subscribe` callback. This allows the state to be updated in response to changes originating from various sources, including other browser tabs or sessions when using web storage like localStorage or sessionStorage. Defaults to `true`. + */ + syncChanges?: boolean; }; /** @@ -135,7 +137,7 @@ export class Persisted { #storageAdapter: StorageAdapter | null; constructor(key: string, initialValue: T, options: PersistedStateOptions = {}) { - const { storage = "local", syncTabs = true } = options; + const { storage = "local", syncChanges = true } = options; this.#key = key; this.#initialValue = initialValue; @@ -154,7 +156,7 @@ export class Persisted { }); }); - if (syncTabs) { + if (syncChanges) { $effect(() => { return untrack(() => { if (!this.#storageAdapter?.subscribe) { @@ -185,11 +187,8 @@ export class Persisted { } const valueFromStorage = await this.#storageAdapter.getItem(this.#key); - if (!valueFromStorage.found) { - return; - } - this.#current = valueFromStorage.value; + this.#current = valueFromStorage.found ? valueFromStorage.value : this.#initialValue; this.#isInitialized = true; } diff --git a/packages/runed/src/lib/utilities/PersistedState/PersistedState.test.svelte.ts b/packages/runed/src/lib/utilities/PersistedState/PersistedState.test.svelte.ts index 132d40ea..f2edf143 100644 --- a/packages/runed/src/lib/utilities/PersistedState/PersistedState.test.svelte.ts +++ b/packages/runed/src/lib/utilities/PersistedState/PersistedState.test.svelte.ts @@ -1,6 +1,6 @@ import { describe, expect } from "vitest"; -import { Persisted } from "./index.js"; +import { Persisted, WebStorageAdapter } from "./index.js"; import { testWithEffect } from "$lib/test/util.svelte.js"; const key = "test-key"; @@ -65,10 +65,21 @@ describe("PersistedState", () => { const date = new Date(isoDate); const serializer = { - serialize: (value: Date) => value.toISOString(), - deserialize: (value: string) => new Date(value), + serialize: (value: Date) => { + return value.toISOString(); + }, + deserialize: (value: string) => { + return new Date(value); + }, }; - const persistedState = new Persisted(key, date, { serializer }); + const persistedState = new Persisted(key, date, { + storage: new WebStorageAdapter({ + storage: localStorage, + serializer, + }), + }); + // persistedState.current = date; + // await new Promise((resolve) => setTimeout(resolve, 50)); expect(persistedState.current).toBe(date); await new Promise((resolve) => setTimeout(resolve, 0)); @@ -91,7 +102,7 @@ describe("PersistedState", () => { testWithEffect( "does not update persisted value when local storage changes independently if syncTabs is false", async () => { - const persistedState = new Persisted(key, initialValue, { syncTabs: false }); + const persistedState = new Persisted(key, initialValue, { syncChanges: false }); localStorage.setItem(key, JSON.stringify("new-value")); await new Promise((resolve) => setTimeout(resolve, 0)); expect(persistedState.current).toBe(initialValue);