@tempots/dom 7.0.0 → 7.1.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@tempots/dom",
   "main": "index.js",
   "types": "index.d.ts",
-  "version": "7.0.0",
+  "version": "7.1.1",
   "scripts": {
     "watch": "tsc --watch",
     "build": "tsc",

package/prop.d.ts

@@ -35,6 +35,12 @@ export declare class Signal<T> {
 export declare class Prop<T> extends Signal<T> {
     static isProp<T = unknown>(x: unknown): x is Prop<T>;
     static of<T>(value: T): Prop<T>;
+    static ofStorage<T>(key: string, defaultValue: T, store: {
+        getItem: (key: string) => string | null;
+        setItem: (key: string, value: string) => void;
+    }, serialize?: (v: T) => string, deserilize?: (v: string) => T): Prop<T>;
+    static ofLocalStorage<T>(key: string, defaultValue: T, serialize?: (v: T) => string, deserilize?: (v: string) => T): Prop<T>;
+    static ofSessionStorage<T>(key: string, defaultValue: T, serialize?: (v: T) => string, deserilize?: (v: string) => T): Prop<T>;
     readonly [$isProp] = true;
     readonly set: (value: T) => void;
     readonly update: (f: (value: T) => T) => void;

package/prop.js

@@ -188,6 +188,20 @@ export class Prop extends Signal {
     static of(value) {
         return new Prop(value);
     }
+    static ofStorage(key, defaultValue, store, serialize = JSON.stringify, deserilize = JSON.parse) {
+        const initialValue = store.getItem(key);
+        const prop = new Prop(initialValue !== null ? deserilize(initialValue) : defaultValue);
+        prop.subscribe((value) => {
+            store.setItem(key, serialize(value));
+        });
+        return prop;
+    }
+    static ofLocalStorage(key, defaultValue, serialize = JSON.stringify, deserilize = JSON.parse) {
+        return Prop.ofStorage(key, defaultValue, window.localStorage, serialize, deserilize);
+    }
+    static ofSessionStorage(key, defaultValue, serialize = JSON.stringify, deserilize = JSON.parse) {
+        return Prop.ofStorage(key, defaultValue, window.sessionStorage, serialize, deserilize);
+    }
     [$isProp] = true;
     set = (value) => {
         if (this._value === value)