fix: only listen for the 'storage' event if using 'local' storage (#159)

Co-authored-by: Hunter Johnston <[email protected]>
Co-authored-by: Hunter Johnston <[email protected]>

.changeset/two-pianos-beg.md

@@ -0,0 +1,5 @@
+---
+"runed": patch
+---
+
+fix: `PersistedState` - only listen for the `'storage'` event if using `'local'` storage

packages/runed/src/lib/internal/utils/sleep.ts

@@ -1,3 +1,3 @@
-export async function sleep(ms: number): Promise<void> {
+export async function sleep(ms = 0): Promise<void> {
 	return new Promise((resolve) => setTimeout(resolve, ms));
 }

packages/runed/src/lib/utilities/PersistedState/PersistedState.svelte.ts

@@ -128,7 +128,8 @@ export class PersistedState<T> {
 		});
 
 		$effect(() => {
-			if (!syncTabs) return;
+			if (!syncTabs || storageType !== "local") return;
+
 			return addEventListener(window, "storage", this.#handleStorageEvent.bind(this));
 		});
 	}

packages/runed/src/lib/utilities/PersistedState/PersistedState.test.svelte.ts

@@ -1,7 +1,8 @@
 import { describe, expect } from "vitest";
 
-import { PersistedState } from "./index.js";
+import { sleep } from "$lib/internal/utils/sleep.js";
 import { testWithEffect } from "$lib/test/util.svelte.js";
+import { PersistedState } from "./PersistedState.svelte.js";
 
 const key = "test-key";
 const initialValue = "test-value";
@@ -77,25 +78,54 @@ describe("PersistedState", () => {
 		});
 	});
 
-	describe.skip("syncTabs", () => {
+	describe("syncTabs", () => {
 		testWithEffect("updates persisted value when local storage changes independently", async () => {
-			// TODO: figure out why this test is failing even though it works in the browser. maybe jsdom doesn't emit storage events?
-			// expect(true).toBe(true);
-			// const persistedState = new PersistedState(key, initialValue);
-			// localStorage.setItem(key, JSON.stringify("new-value"));
-			// await new Promise((resolve) => setTimeout(resolve, 0));
-			// expect(persistedState.current).toBe("new-value");
+			const persistedState = new PersistedState(key, initialValue);
+			await sleep();
+			expect(persistedState.current).toBe(initialValue);
+			const newValue = "new-value";
+			localStorage.setItem(key, JSON.stringify(newValue));
+			const event = new StorageEvent("storage", {
+				key,
+				oldValue: initialValue,
+				newValue: JSON.stringify(newValue),
+			});
+			window.dispatchEvent(event);
+			await sleep();
+			expect(persistedState.current).toBe(newValue);
 		});
 
-		// TODO: this test passes, but likely only because the storage event is not being emitted either way from jsdom
 		testWithEffect(
 			"does not update persisted value when local storage changes independently if syncTabs is false",
 			async () => {
 				const persistedState = new PersistedState(key, initialValue, { syncTabs: false });
-				localStorage.setItem(key, JSON.stringify("new-value"));
-				await new Promise((resolve) => setTimeout(resolve, 0));
+				await sleep();
+				const newValue = "new-value";
+				localStorage.setItem(key, JSON.stringify(newValue));
+				const event = new StorageEvent("storage", {
+					key,
+					oldValue: initialValue,
+					newValue: JSON.stringify(newValue),
+				});
+				window.dispatchEvent(event);
+				await sleep();
 				expect(persistedState.current).toBe(initialValue);
 			}
 		);
+
+		testWithEffect("does not handle the storage event when 'session' storage is used", async () => {
+			const persistedState = new PersistedState(key, initialValue, { storage: "session" });
+			await sleep();
+			const newValue = "new-value";
+			localStorage.setItem(key, JSON.stringify(newValue));
+			const event = new StorageEvent("storage", {
+				key,
+				oldValue: initialValue,
+				newValue: JSON.stringify(newValue),
+			});
+			window.dispatchEvent(event);
+			await sleep();
+			expect(persistedState.current).toBe(initialValue);
+		});
 	});
 });