refactor: theme manager (#17976)

web/src/lib/utils/persisted.ts

@@ -0,0 +1,81 @@
+import { browser } from '$app/environment';
+import { createSubscriber } from 'svelte/reactivity';
+
+type PersistedBaseOptions<T> = {
+  read: (key: string) => T | undefined;
+  write: (key: string, value: T) => void;
+};
+
+class PersistedBase<T> {
+  #value: T;
+  #subscribe: () => void;
+  #update = () => {};
+
+  #write: (value: T) => void;
+
+  get current() {
+    this.#subscribe();
+    return this.#value as T;
+  }
+
+  set current(value: T) {
+    this.#write(value);
+    this.#update();
+    this.#value = value;
+  }
+
+  constructor(key: string, defaultValue: T, options: PersistedBaseOptions<T>) {
+    const value = options.read(key);
+
+    this.#value = value === undefined ? defaultValue : value;
+    this.#write = (value: T) => options.write(key, value);
+
+    this.#subscribe = createSubscriber((update) => {
+      this.#update = update;
+
+      return () => {
+        this.#update = () => {};
+      };
+    });
+  }
+}
+
+type PersistedLocalStorageOptions<T> = {
+  serializer?: {
+    stringify(value: T): string;
+    parse(text: string): T;
+  };
+  valid?: (value: T | unknown) => value is T;
+};
+
+export class PersistedLocalStorage<T> extends PersistedBase<T> {
+  constructor(key: string, defaultValue: T, options: PersistedLocalStorageOptions<T> = {}) {
+    const valid = options.valid || (() => true);
+    const serializer = options.serializer || JSON;
+
+    super(key, defaultValue, {
+      read: (key: string) => {
+        if (!browser) {
+          return;
+        }
+
+        const item = localStorage.getItem(key) ?? undefined;
+        if (item === undefined) {
+          return;
+        }
+
+        const parsed = serializer.parse(item);
+        if (!valid(parsed)) {
+          return;
+        }
+
+        return parsed;
+      },
+      write: (key: string, value: T) => {
+        if (browser) {
+          localStorage.setItem(key, serializer.stringify(value));
+        }
+      },
+    });
+  }
+}