website: snapshot

website/scripts/utils/persisted.js

@@ -0,0 +1,72 @@
+import { readParam, writeParam } from "./url.js";
+import { readStored, writeToStorage } from "./storage.js";
+import { debounce } from "./timing.js";
+
+/**
+ * @template T
+ * @param {Object} args
+ * @param {T} args.defaultValue
+ * @param {string} [args.storageKey]
+ * @param {string} [args.urlKey]
+ * @param {(v: T) => string} args.serialize
+ * @param {(s: string) => T} args.deserialize
+ * @param {boolean} [args.saveDefaultValue]
+ */
+export function createPersistedValue({
+  defaultValue,
+  storageKey,
+  urlKey,
+  serialize,
+  deserialize,
+  saveDefaultValue = false,
+}) {
+  const defaultSerialized = serialize(defaultValue);
+
+  // Read: URL > localStorage > default
+  let serialized = urlKey ? readParam(urlKey) : null;
+  if (serialized === null && storageKey) {
+    serialized = readStored(storageKey);
+  }
+  let value = serialized !== null ? deserialize(serialized) : defaultValue;
+
+  /** @param {T} v */
+  const write = (v) => {
+    const s = serialize(v);
+    const isDefault = s === defaultSerialized;
+
+    if (storageKey) {
+      if (!isDefault || saveDefaultValue) {
+        writeToStorage(storageKey, s);
+      } else {
+        writeToStorage(storageKey, null);
+      }
+    }
+
+    if (urlKey) {
+      writeParam(urlKey, !isDefault || saveDefaultValue ? s : null);
+    }
+  };
+
+  const debouncedWrite = debounce(write, 250);
+
+  // Write initial value
+  write(value);
+
+  return {
+    get value() {
+      return value;
+    },
+    /** @param {T} v */
+    set(v) {
+      value = v;
+      debouncedWrite(v);
+    },
+    /** @param {T} v */
+    setImmediate(v) {
+      value = v;
+      write(v);
+    },
+  };
+}
+
+/** @typedef {ReturnType<typeof createPersistedValue>} PersistedValue */