chore: Clean up persisted state utility

Author: hhvrc

src/lib/state/classes/local-storage-state.svelte.ts

@@ -0,0 +1,77 @@
+import { browser } from '$app/environment';
+
+export type StorageType = 'local' | 'session';
+
+export interface LocalStorageStateOptions {
+  /** Which Web Storage area to persist to. Defaults to `'local'`. */
+  storage?: StorageType;
+}
+
+const mockStorage: Storage = {
+  length: 0,
+  clear: () => {},
+  getItem: () => null,
+  key: () => null,
+  removeItem: () => {},
+  setItem: () => {},
+};
+
+export class PersistedState<T> {
+  readonly #key: string;
+  readonly defaultValue: T;
+  readonly #storage: Storage;
+  #value: T;
+
+  constructor(key: string, defaultValue: T, options: LocalStorageStateOptions = {}) {
+    this.#key = key;
+    this.defaultValue = defaultValue;
+    this.#storage = browser
+      ? options.storage === 'session'
+        ? sessionStorage
+        : localStorage
+      : mockStorage;
+
+    this.#value = $state<T>(this.deserialize(this.#storage.getItem(key)));
+
+    // Only localStorage fires storage events across tabs; sessionStorage is tab-scoped.
+    if (browser && options.storage !== 'session') {
+      window.addEventListener('storage', this.#onStorage);
+    }
+  }
+
+  #onStorage = (event: StorageEvent) => {
+    if (event.storageArea !== this.#storage) return;
+    if (event.key !== this.#key) return;
+    this.#update(this.deserialize(event.newValue));
+  };
+
+  #update(value: T) {
+    this.#value = value;
+    this.onChange(value);
+  }
+
+  get value() {
+    return this.#value;
+  }
+  set value(value: T) {
+    this.#update(value);
+    this.#storage.setItem(this.#key, this.serialize(value));
+  }
+
+  reset() {
+    this.#update(this.defaultValue);
+    this.#storage.removeItem(this.#key);
+  }
+
+  /** Hook called whenever the value changes, regardless of source (setter, reset, or storage event). */
+  protected onChange(_value: T): void {}
+
+  protected serialize(value: T): string {
+    return JSON.stringify(value);
+  }
+
+  protected deserialize(raw: string | null): T {
+    if (raw === null) return this.defaultValue;
+    return JSON.parse(raw) as T;
+  }
+}

src/lib/state/classes/persisted-state.svelte.ts

@@ -1,5 +1,5 @@
 import { isString } from '$lib/typeguards';
-import { LocalStorageState } from './classes/local-storage-state.svelte';
+import { PersistedState } from './classes/persisted-state.svelte';
 
 export enum ColorScheme {
   Dark = 'dark',
@@ -50,21 +50,16 @@ function setDarkMode(preference: ColorScheme) {
   document.documentElement.classList.toggle('dark', resolveDarkMode(preference));
 }
 
-class ColorSchemeState extends LocalStorageState<ColorScheme> {
+class ColorSchemeState extends PersistedState<ColorScheme> {
   constructor() {
     super('theme', ColorScheme.System);
   }
 
-  override set value(v: ColorScheme) {
-    super.value = v;
-    setDarkMode(v);
+  protected override onChange(v: ColorScheme) {
+    setDarkMode(isColorSchemeEnum(v) ? v : this.defaultValue);
   }
 
-  override get value() {
-    return super.value;
-  }
-
-  protected override deserialize(raw: string): ColorScheme {
+  protected override deserialize(raw: string | null): ColorScheme {
     return isColorSchemeEnum(raw) ? raw : this.defaultValue;
   }
 
@@ -88,10 +83,4 @@ export function initializeColorScheme() {
   window
     .matchMedia('(prefers-color-scheme: dark)')
     .addEventListener('change', handleMediaQueryChange);
-
-  window.addEventListener('storage', (event) => {
-    if (event.key !== 'theme') return;
-
-    setDarkMode(isColorSchemeEnum(event.newValue) ? event.newValue : ColorScheme.System);
-  });
 }

src/lib/state/color-scheme-state.svelte.ts

@@ -11,7 +11,7 @@
   import Sidebar from './Sidebar.svelte';
   import '../app.css';
   import { IsMobile } from '$lib/hooks/is-mobile.svelte';
-  import { LocalStorageState } from '$lib/state/classes/local-storage-state.svelte';
+  import { PersistedState } from '$lib/state/classes/persisted-state.svelte';
   import DialogManager from '$lib/components/dialog-manager/dialog-manager.svelte';
 
   interface Props {
@@ -23,7 +23,7 @@
   let meta = $derived(buildMetaData(page.url));
 
   const mobile = new IsMobile();
-  const sidebarOpen = new LocalStorageState('sidebarOpen', false);
+  const sidebarOpen = new PersistedState('sidebarOpen', false);
   const isOpen = $derived(mobile.current ? false : sidebarOpen.value);
 </script>