@pippenly/ts-utils 1.0.0 → 1.0.1

package/README.md

@@ -13,22 +13,55 @@ const numberElment = document.getElementById("number")!; // HTMLElement
 const otherNumberElement = document.getElementById("other-number")!; // HTMLElement
 const binding = bind(number, numberElment); // BoundResin<T>
 const complexBinding = bind(number, otherNumberElement, {
-    type: "innerText",
+    bindTo: "innerText",
     map: (n) => n * 2,
+    tap: (n, el) => { ... },
     if: (n) => n > 5,
     class: {
-        "red": (_, n) => n > 10,
-        "blue": (_, n) => n <= 10
+        "red": (n, el) => n > 10,
+        "blue": (n, el) => n <= 10
     },
     attr: {
-        "data-value": (_, n) => String(n)
+        "data-value": (n, el) => String(n)
     }
 });
 
-binding.value = 15; // Updates number.value, which triggers the effect to update numberElement's innerText
-complexBinding.value = 15;
+number.value = 15; // Updates number.value, which triggers the effect to update innerText
+
+setTimeout(() => {
+    console.log("Stop receiving updates for counter binding");
+    binding.dispose();
+}, 5000);
+```
+
+## Two-way binding
+For two way binding, `model(sourceResin, element, options?)` exists, where element is
+`type ModelElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement`. Provides
+throttle / debounce options and custom get/set if needed.
+
+```ts
+const name = resin("");
+const m = model(name, document.querySelector<HTMLInputElement>("#name")!, {
+    debounce: 300
+});
+
+const checked = resin(false);
+const checkedModel = model(checked, document.querySelector<HTMLInputElement>("#check")!, {
+    event: 'change',
+    get: (el) => el.checked,
+    set: (v, el) => { el.checked = v; }
+});
+
+const age = resin(0);
+const ageModel = model(age, document.querySelector<HTMLInputElement>("#age")!, {
+    get: (el) => el.valueAsNumber,
+    set: (v, el) => { el.valueAsNumber = v; }
+});
 ```
 
+
+## Utilities
+
 # Result
 Small utility library so I can work with error as values and explict Error type declaration
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pippenly/ts-utils",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "type": "module",
   "main": "./dist/index.js",
@@ -33,13 +33,25 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && tsc-alias",
-    "prebuild": "rm -rf dist",
-    "clean": "rm -rf dist",
+    "prebuild": "rimraf dist",
+    "clean": "rimraf dist",
     "typecheck": "tsc --noEmit",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
     "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch --passWithNoTests"
   },
-  "keywords": [],
+  "keywords": [
+    "utility",
+    "typescript",
+    "ts",
+    "result",
+    "error-as-value",
+    "dom",
+    "reactivity",
+    "reactive",
+    "binding",
+    "dom-utils",
+    "util"
+  ],
   "author": "",
   "license": "ISC",
   "devDependencies": {

package/src/dom/index.ts

@@ -1,189 +1 @@
-import { Err, Ok, type Result } from "@/result/index.js";
-
-type State<T> = { value: T };
-
-type Resin<T> = State<T> & { bound: false };
-
-type BoundState<E extends HTMLElement> = {
-    bound: true;
-    element: E;
-    dispose: () => Result<void, string>;
-} & Pick<HTMLElement, "addEventListener" | "removeEventListener">;
-
-type BoundResin<T> = State<T> & BoundState<HTMLElement>;
-
-type ElementBindOptions<T, E extends HTMLElement, R = T> = {
-    map?: (value: T) => R;
-    if?: (value: R) => boolean;
-    filter?: (value: R) => boolean;
-    class?: {
-        [className: string]: (element: E, value: R) => boolean;
-    },
-    attr?: {
-        [attrName: string]: (element: E, value: R) => string | null;
-    }
-}
-
-type TextElementTypes =
-    | HTMLParagraphElement
-    | HTMLSpanElement
-    | HTMLDivElement
-    | HTMLHeadingElement
-    | HTMLAnchorElement
-    | HTMLButtonElement
-    | HTMLLabelElement
-    | HTMLOptionElement
-    | HTMLTableCellElement;
-
-type TextBindOptions<T, E extends TextElementTypes> = ElementBindOptions<T, E> & {
-    type: 'innerText' | 'textContent' | 'innerHTML';
-    truncate?: number;
-    mask?: string;
-}
-
-type ValueBindOptions<T, E extends HTMLElement> = ElementBindOptions<T, E> & {
-    type: 'value';
-}
-
-type BindOptions<T, E extends HTMLElement> =
-    | TextBindOptions<T, E>
-    | ValueBindOptions<T, E>;
-
-export function resin<T>(initialValue: T): Resin<T> {
-    return { value: initialValue, bound: false };
-}
-
-export function bind<T, E extends TextElementTypes>(resin: Resin<T>, element: E, options?: TextBindOptions<T, E>): BoundResin<T>;
-export function bind<T, E extends HTMLElement>(resin: Resin<T>, element: E, options?: ValueBindOptions<T, E>): BoundResin<T>;
-export function bind<T, E extends HTMLElement>(resin: Resin<T>, element: E, options?: BindOptions<T, E>): BoundResin<T> {
-    const subscribers = new Set<Effect>();
-    let disposed = false;
-    let _value = resin.value;
-
-    const notify = () => {
-        if (disposed) {
-            return;
-        }
-
-        subscribers.forEach(fn => fn());
-    };
-
-    const getValue = (): T => {
-        const currentEffect = stack[stack.length - 1];
-        if (currentEffect) {
-            subscribers.add(currentEffect);
-        }
-        return _value;
-    };
-
-    const domEffect = () => {
-        const value = getValue();
-        const mappedValue = options?.map ? options.map(value) : value;
-
-        if (options?.filter && !options.filter(mappedValue)) {
-            return;
-        }
-
-        if (options?.if) {
-            if (!options.if(mappedValue as ReturnType<NonNullable<typeof options.map>>)) {
-                element.style.display = "none";
-                return;
-            } else {
-                element.style.display = element.style.display || "";
-            }
-        }
-
-        if (options?.class) {
-            for (const [className, fn] of Object.entries(options.class)) {
-                if (fn(element, mappedValue)) {
-                    element.classList.add(className);
-                } else {
-                    element.classList.remove(className);
-                }
-            }
-        }
-
-        if (options?.attr) {
-            for (const [attrName, fn] of Object.entries(options.attr)) {
-                const attrValue = fn(element, mappedValue);
-                if (attrValue === null) {
-                    element.removeAttribute(attrName);
-                } else {
-                    element.setAttribute(attrName, attrValue);
-                }
-            }
-        }
-
-        let valueStr = String(mappedValue);
-        if (options?.type === 'innerText' || options?.type === 'textContent') {
-            if (options?.truncate !== undefined) {
-                valueStr = valueStr.slice(0, options.truncate);
-            }
-            if (options?.mask !== undefined) {
-                valueStr = valueStr.replace(/./g, options.mask);
-            }
-        }
-
-        if (options?.type === "innerText") {
-            element.innerText = valueStr;
-        } else if (options?.type === "textContent") {
-            element.textContent = valueStr;
-        } else if (options?.type === "innerHTML") {
-            element.innerHTML = valueStr;
-        } else if (options?.type === "value") {
-            if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
-                element.value = valueStr;
-            } else {
-                throw new Error("Value binding is only supported on input, textarea, and select elements");
-            }
-        }
-    };
-
-    watchEffect(domEffect);
-
-    return {
-        ...resin,
-        bound: true,
-        element,
-        addEventListener: element.addEventListener.bind(element),
-        removeEventListener: element.removeEventListener.bind(element),
-        get value(): T {
-            if (disposed) {
-                throw new Error("Cannot get value of a disposed resin");
-            }
-
-            return getValue();
-        },
-        set value(newValue: T) {
-            if (disposed) {
-                throw new Error("Cannot set value of a disposed resin");
-            }
-
-            if (_value === newValue) {
-                return;
-            }
-
-            _value = newValue;
-            notify();
-        },
-        dispose: () => {
-            if (disposed) {
-                return Err("Resin is already disposed");
-            }
-
-            subscribers.delete(domEffect);
-            disposed = true;
-            return Ok(undefined);
-        }
-    }
-}
-
-type Effect = () => void;
-
-const stack: Effect[] = [];
-
-export function watchEffect(fn: Effect): void {
-    stack.push(fn);
-    fn();
-    stack.pop();
-}
+export * from "./resin.js";

package/src/dom/resin.ts

@@ -0,0 +1,287 @@
+type Effect = () => void;
+
+type Resin<T> = {
+    value: T;
+    dispose: () => void;
+}
+
+type BoundResin<T, E extends HTMLElement> = Resin<T>
+    & Pick<HTMLElement, "addEventListener" | "removeEventListener">
+    & {
+        element: E;
+    }
+
+type BindingOptions<T, E extends HTMLElement, Mapped = T> = {
+    bindTo?: 'innerText' | 'textContent' | 'innerHTML' | 'value';
+    map?: (value: T) => Mapped;
+    tap?: (value: Mapped, element: E) => void;
+    if?: (value: Mapped) => boolean;
+    filter?: (value: Mapped) => boolean;
+    class?: {
+        [className: string]: (value: Mapped, element: E) => boolean;
+    },
+    attr?: {
+        [attrName: string]: (value: Mapped, element: E) => string | null;
+    }
+}
+
+export function resin<T>(initialValue: T): Resin<T> {
+    let value = initialValue;
+    let disposed = false;
+
+    const subscribers = new Set<Effect>();
+
+    const notify = () => {
+        if (disposed) {
+            return;
+        }
+        if (currentDepth > 0) {
+            for (const effect of subscribers) {
+                pending.add(effect);
+            }
+        } else {
+            for (const effect of subscribers) {
+                effect();
+            }
+        }
+    }
+
+    const getValue = (): T => {
+        if (stack.length > 0) {
+            const effect = stack[stack.length - 1]!;
+            subscribers.add(effect);
+            effectCleanups.get(effect)?.add(subscribers);
+        }
+        return value;
+    }
+
+    return {
+        get value() {
+            return getValue();
+        },
+
+        set value(newValue: T) {
+            if (disposed) return;
+            value = newValue;
+            notify();
+        },
+
+        dispose() {
+            disposed = true;
+            subscribers.clear();
+        }
+    };
+}
+
+export function bind<T, E extends HTMLElement>(resin: Resin<T>, element: E, options?: BindingOptions<T, E>): BoundResin<T, E> {
+    let bindingDisposed = false;
+
+    const mainEffect = () => {
+        if (bindingDisposed) return;
+        const value = resin.value;
+        const mappedValue = options?.map ? options.map(value) : value;
+
+        if (options?.filter && !options.filter(mappedValue)) {
+            return;
+        }
+
+        if (options?.if) {
+            if (!options.if(mappedValue)) {
+                element.style.display = "none";
+                return;
+            } else {
+                element.style.display = "";
+            }
+        }
+
+        if (options?.class) {
+            for (const [className, fn] of Object.entries(options.class)) {
+                if (fn(mappedValue, element)) {
+                    element.classList.add(className);
+                } else {
+                    element.classList.remove(className);
+                }
+            }
+        }
+
+        if (options?.attr) {
+            for (const [attrName, fn] of Object.entries(options.attr)) {
+                const attrValue = fn(mappedValue, element);
+                if (attrValue === null) {
+                    element.removeAttribute(attrName);
+                } else {
+                    element.setAttribute(attrName, attrValue);
+                }
+            }
+        }
+
+        if (options?.tap) {
+            options.tap(mappedValue, element);
+        }
+
+        if (options?.bindTo) {
+            switch (options.bindTo) {
+                case "innerText":
+                    element.innerText = String(mappedValue);
+                    break;
+                case "textContent":
+                    element.textContent = String(mappedValue);
+                    break;
+                case "innerHTML":
+                    element.innerHTML = String(mappedValue);
+                    break;
+                case "value":
+                    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+                        element.value = String(mappedValue);
+                    } else {
+                        console.warn("bindTo 'value' is only applicable to input, textarea, and select elements.");
+                    }
+                    break;
+            }
+        }
+    }
+
+    const stopEffect = watchEffect(mainEffect);
+
+    return {
+        get value() {
+            return resin.value;
+        },
+        set value(newValue: T) {
+            resin.value = newValue;
+        },
+        addEventListener: element.addEventListener.bind(element),
+        removeEventListener: element.removeEventListener.bind(element),
+        element,
+        dispose() {
+            bindingDisposed = true;
+            stopEffect();
+        }
+    };
+}
+
+const stack: Effect[] = [];
+const pending: Set<Effect> = new Set();
+const effectCleanups = new Map<Effect, Set<Set<Effect>>>();
+let currentDepth = 0;
+
+export function watchEffect(fn: Effect): () => void {
+    const cleanups = new Set<Set<Effect>>();
+    effectCleanups.set(fn, cleanups);
+
+    stack.push(fn);
+    fn();
+    stack.pop();
+
+    return () => {
+        for (const set of cleanups) {
+            set.delete(fn);
+        }
+        cleanups.clear();
+        effectCleanups.delete(fn);
+    };
+}
+
+export function computed<T>(fn: () => T): Resin<T> {
+    const result = resin(fn());
+    const stop = watchEffect(() => {
+        result.value = fn();
+    });
+    const originalDispose = result.dispose;
+    result.dispose = () => {
+        stop();
+        originalDispose();
+    };
+    return result;
+}
+
+export function batch(fn: Effect): void {
+    currentDepth++;
+    try {
+        fn();
+    } finally {
+        currentDepth--;
+        if (currentDepth === 0) {
+            for (const effect of pending) {
+                effect();
+            }
+            pending.clear();
+        }
+    }
+}
+
+type ModelElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+type ModelOptions<T, E extends ModelElement> = {
+    event?: string;
+    set?: (value: T, element: E) => void;
+    get?: (element: E) => T;
+    throttle?: number;
+    debounce?: number;
+}
+
+type ModelResin<T, E extends ModelElement> = {
+    value: T;
+    element: E;
+    dispose: () => void;
+}
+
+export function model<T, E extends ModelElement>(
+    source: Resin<T>,
+    element: E,
+    options?: ModelOptions<T, E>
+): ModelResin<T, E> {
+    let disposed = false;
+    const eventName = options?.event ?? 'input';
+
+    const setElement = options?.set ?? ((value: T, el: E) => { el.value = String(value); });
+    const getElement = options?.get ?? ((el: E) => el.value as T);
+
+    const stopEffect = watchEffect(() => {
+        if (disposed) return;
+        setElement(source.value, element);
+    });
+
+    let listener = () => {
+        if (disposed) return;
+        source.value = getElement(element);
+    };
+
+    if (options?.throttle) {
+        let lastCall = 0;
+        listener = () => {
+            const now = Date.now();
+            if (now - lastCall >= options.throttle!) {
+                lastCall = now;
+                source.value = getElement(element);
+            }
+        };
+    }
+
+    if (options?.debounce) {
+        let timeout: ReturnType<typeof setTimeout> | null = null;
+        listener = () => {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+
+            timeout = setTimeout(() => {
+                source.value = getElement(element);
+                timeout = null;
+            }, options.debounce);
+        };
+    }
+
+    element.addEventListener(eventName, listener);
+
+    return {
+        get value() { return source.value; },
+        set value(v: T) { source.value = v; },
+        element,
+        dispose() {
+            disposed = true;
+            element.removeEventListener(eventName, listener);
+            stopEffect();
+        }
+    };
+}