effect-start 0.18.0 → 0.20.0

package/dist/datastar/attributes/bind.js

@@ -0,0 +1,183 @@
+import { attribute } from "../engine.js";
+import { effect, getPath, mergePaths, } from "../engine.js";
+import { aliasify, modifyCasing, } from "../utils.js";
+const dataURIRegex = /^data:(?<mime>[^;]+);base64,(?<contents>.*)$/;
+const empty = Symbol("empty");
+const aliasedBind = aliasify("bind");
+attribute({
+    name: "bind",
+    requirement: "exclusive",
+    apply({ el, key, mods, value, error }) {
+        const signalName = key != null ? modifyCasing(key, mods) : value;
+        let get = (el, type) => type === "number" ? +el.value : el.value;
+        let set = (value) => {
+            ;
+            el.value = `${value}`;
+        };
+        if (el instanceof HTMLInputElement) {
+            switch (el.type) {
+                case "range":
+                case "number":
+                    get = (el, type) => type === "string" ? el.value : +el.value;
+                    break;
+                case "checkbox":
+                    get = (el, type) => {
+                        if (el.value !== "on") {
+                            if (type === "boolean") {
+                                return el.checked;
+                            }
+                            else {
+                                return el.checked ? el.value : "";
+                            }
+                        }
+                        else {
+                            if (type === "string") {
+                                return el.checked ? el.value : "";
+                            }
+                            else {
+                                return el.checked;
+                            }
+                        }
+                    };
+                    set = (value) => {
+                        el.checked = typeof value === "string" ? value === el.value : value;
+                    };
+                    break;
+                case "radio":
+                    if (!el.getAttribute("name")?.length) {
+                        el.setAttribute("name", signalName);
+                    }
+                    get = (el, type) => el.checked ? (type === "number" ? +el.value : el.value) : empty;
+                    set = (value) => {
+                        el.checked = value === (typeof value === "number"
+                            ? +el.value
+                            : el.value);
+                    };
+                    break;
+                case "file": {
+                    const syncSignal = () => {
+                        const files = [...(el.files || [])];
+                        const signalFiles = [];
+                        Promise
+                            .all(files.map((f) => new Promise((resolve) => {
+                            const reader = new FileReader();
+                            reader.onload = () => {
+                                if (typeof reader.result !== "string") {
+                                    throw error("InvalidFileResultType", {
+                                        resultType: typeof reader.result,
+                                    });
+                                }
+                                const match = reader.result.match(dataURIRegex);
+                                if (!match?.groups) {
+                                    throw error("InvalidDataUri", {
+                                        result: reader.result,
+                                    });
+                                }
+                                signalFiles.push({
+                                    name: f.name,
+                                    contents: match.groups.contents,
+                                    mime: match.groups.mime,
+                                });
+                            };
+                            reader.onloadend = () => resolve();
+                            reader.readAsDataURL(f);
+                        })))
+                            .then(() => {
+                            mergePaths([[signalName, signalFiles]]);
+                        });
+                    };
+                    el.addEventListener("change", syncSignal);
+                    el.addEventListener("input", syncSignal);
+                    return () => {
+                        el.removeEventListener("change", syncSignal);
+                        el.removeEventListener("input", syncSignal);
+                    };
+                }
+            }
+        }
+        else if (el instanceof HTMLSelectElement) {
+            if (el.multiple) {
+                const typeMap = new Map();
+                get = (el) => [...el.selectedOptions].map((option) => {
+                    const type = typeMap.get(option.value);
+                    return type === "string" || type == null
+                        ? option.value
+                        : +option.value;
+                });
+                set = (value) => {
+                    for (const option of el.options) {
+                        if (value.includes(option.value)) {
+                            typeMap.set(option.value, "string");
+                            option.selected = true;
+                        }
+                        else if (value.includes(+option.value)) {
+                            typeMap.set(option.value, "number");
+                            option.selected = true;
+                        }
+                        else {
+                            option.selected = false;
+                        }
+                    }
+                };
+            }
+        }
+        else if (el instanceof HTMLTextAreaElement) {
+            // default case
+        }
+        else {
+            // web component
+            get = (el) => "value" in el ? el.value : el.getAttribute("value");
+            set = (value) => {
+                if ("value" in el) {
+                    el.value = value;
+                }
+                else {
+                    el.setAttribute("value", value);
+                }
+            };
+        }
+        const initialValue = getPath(signalName);
+        const type = typeof initialValue;
+        let path = signalName;
+        if (Array.isArray(initialValue)
+            && !(el instanceof HTMLSelectElement && el.multiple)) {
+            const signalNameKebab = key ? key : value;
+            const inputs = document.querySelectorAll(`[${aliasedBind}\\:${CSS.escape(signalNameKebab)}],[${aliasedBind}="${CSS.escape(signalNameKebab)}"]`);
+            const paths = [];
+            let i = 0;
+            for (const input of inputs) {
+                paths.push([`${path}.${i}`, get(input, "none")]);
+                if (el === input) {
+                    break;
+                }
+                i++;
+            }
+            mergePaths(paths, { ifMissing: true });
+            path = `${path}.${i}`;
+        }
+        else {
+            mergePaths([[path, get(el, type)]], {
+                ifMissing: true,
+            });
+        }
+        const syncSignal = () => {
+            const signalValue = getPath(path);
+            if (signalValue != null) {
+                const value = get(el, typeof signalValue);
+                if (value !== empty) {
+                    mergePaths([[path, value]]);
+                }
+            }
+        };
+        el.addEventListener("input", syncSignal);
+        el.addEventListener("change", syncSignal);
+        const cleanup = effect(() => {
+            set(getPath(path));
+        });
+        return () => {
+            cleanup();
+            el.removeEventListener("input", syncSignal);
+            el.removeEventListener("change", syncSignal);
+        };
+    },
+});

package/dist/datastar/attributes/class.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/class.js

@@ -0,0 +1,50 @@
+import { attribute } from "../engine.js";
+import { effect } from "../engine.js";
+import { modifyCasing } from "../utils.js";
+attribute({
+    name: "class",
+    requirement: {
+        value: "must",
+    },
+    returnsValue: true,
+    apply({ key, el, mods, rx }) {
+        key &&= modifyCasing(key, mods, "kebab");
+        let classes;
+        const callback = () => {
+            observer.disconnect();
+            classes = key
+                ? { [key]: rx() }
+                : rx();
+            for (const k in classes) {
+                const classNames = k.split(/\s+/).filter((cn) => cn.length > 0);
+                if (classes[k]) {
+                    for (const name of classNames) {
+                        if (!el.classList.contains(name)) {
+                            el.classList.add(name);
+                        }
+                    }
+                }
+                else {
+                    for (const name of classNames) {
+                        if (el.classList.contains(name)) {
+                            el.classList.remove(name);
+                        }
+                    }
+                }
+            }
+            observer.observe(el, { attributeFilter: ["class"] });
+        };
+        const observer = new MutationObserver(callback);
+        const cleanup = effect(callback);
+        return () => {
+            observer.disconnect();
+            cleanup();
+            for (const k in classes) {
+                const classNames = k.split(/\s+/).filter((cn) => cn.length > 0);
+                for (const name of classNames) {
+                    el.classList.remove(name);
+                }
+            }
+        };
+    },
+});

package/dist/datastar/attributes/computed.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/computed.js

@@ -0,0 +1,27 @@
+import { attribute } from "../engine.js";
+import { computed, mergePatch, mergePaths, } from "../engine.js";
+import { modifyCasing, updateLeaves, } from "../utils.js";
+attribute({
+    name: "computed",
+    requirement: {
+        value: "must",
+    },
+    returnsValue: true,
+    apply({ key, mods, rx, error }) {
+        if (key) {
+            mergePaths([[modifyCasing(key, mods), computed(rx)]]);
+        }
+        else {
+            const patch = Object.assign({}, rx());
+            updateLeaves(patch, (old) => {
+                if (typeof old === "function") {
+                    return computed(old);
+                }
+                else {
+                    throw error("ComputedExpectedFunction");
+                }
+            });
+            mergePatch(patch);
+        }
+    },
+});

package/dist/datastar/attributes/effect.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/effect.js

@@ -0,0 +1,10 @@
+import { attribute } from "../engine.js";
+import { effect } from "../engine.js";
+attribute({
+    name: "effect",
+    requirement: {
+        key: "denied",
+        value: "must",
+    },
+    apply: ({ rx }) => effect(rx),
+});

package/dist/datastar/attributes/indicator.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/indicator.js

@@ -0,0 +1,32 @@
+import { DATASTAR_FETCH_EVENT } from "../engine.js";
+import { attribute } from "../engine.js";
+import { mergePaths } from "../engine.js";
+import { modifyCasing } from "../utils.js";
+import { FINISHED, STARTED, } from "../actions/fetch.js";
+attribute({
+    name: "indicator",
+    requirement: "exclusive",
+    apply({ el, key, mods, value }) {
+        const signalName = key != null ? modifyCasing(key, mods) : value;
+        mergePaths([[signalName, false]]);
+        const watcher = ((event) => {
+            const { type, el: elt } = event.detail;
+            if (elt !== el) {
+                return;
+            }
+            switch (type) {
+                case STARTED:
+                    mergePaths([[signalName, true]]);
+                    break;
+                case FINISHED:
+                    mergePaths([[signalName, false]]);
+                    break;
+            }
+        });
+        document.addEventListener(DATASTAR_FETCH_EVENT, watcher);
+        return () => {
+            mergePaths([[signalName, false]]);
+            document.removeEventListener(DATASTAR_FETCH_EVENT, watcher);
+        };
+    },
+});

package/dist/datastar/attributes/init.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/init.js

@@ -0,0 +1,27 @@
+import { attribute } from "../engine.js";
+import { beginBatch, endBatch, } from "../engine.js";
+import { delay, modifyViewTransition, tagToMs, } from "../utils.js";
+attribute({
+    name: "init",
+    requirement: {
+        key: "denied",
+        value: "must",
+    },
+    apply({ rx, mods }) {
+        let callback = () => {
+            beginBatch();
+            rx();
+            endBatch();
+        };
+        callback = modifyViewTransition(callback, mods);
+        let wait = 0;
+        const delayArgs = mods.get("delay");
+        if (delayArgs) {
+            wait = tagToMs(delayArgs);
+            if (wait > 0) {
+                callback = delay(callback, wait);
+            }
+        }
+        callback();
+    },
+});

package/dist/datastar/attributes/jsonSignals.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/jsonSignals.js

@@ -0,0 +1,31 @@
+import { attribute } from "../engine.js";
+import { effect, filtered, } from "../engine.js";
+import { jsStrToObject } from "../utils.js";
+attribute({
+    name: "json-signals",
+    requirement: {
+        key: "denied",
+    },
+    apply({ el, value, mods }) {
+        const spaces = mods.has("terse") ? 0 : 2;
+        let filters = {};
+        if (value) {
+            filters = jsStrToObject(value);
+        }
+        const callback = () => {
+            observer.disconnect();
+            el.textContent = JSON.stringify(filtered(filters), null, spaces);
+            observer.observe(el, {
+                childList: true,
+                characterData: true,
+                subtree: true,
+            });
+        };
+        const observer = new MutationObserver(callback);
+        const cleanup = effect(callback);
+        return () => {
+            observer.disconnect();
+            cleanup();
+        };
+    },
+});

package/dist/datastar/attributes/on.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/on.js

@@ -0,0 +1,59 @@
+import { DATASTAR_FETCH_EVENT, DATASTAR_SIGNAL_PATCH_EVENT, } from "../engine.js";
+import { attribute } from "../engine.js";
+import { beginBatch, endBatch, } from "../engine.js";
+import { modifyCasing, modifyTiming, modifyViewTransition, } from "../utils.js";
+attribute({
+    name: "on",
+    requirement: "must",
+    argNames: ["evt"],
+    apply({ el, key, mods, rx }) {
+        let target = el;
+        if (mods.has("window"))
+            target = window;
+        let callback = (evt) => {
+            if (evt) {
+                if (mods.has("prevent")) {
+                    evt.preventDefault();
+                }
+                if (mods.has("stop")) {
+                    evt.stopPropagation();
+                }
+            }
+            beginBatch();
+            rx(evt);
+            endBatch();
+        };
+        callback = modifyViewTransition(callback, mods);
+        callback = modifyTiming(callback, mods);
+        const evtListOpts = {
+            capture: mods.has("capture"),
+            passive: mods.has("passive"),
+            once: mods.has("once"),
+        };
+        if (mods.has("outside")) {
+            target = document;
+            const cb = callback;
+            callback = (evt) => {
+                if (!el.contains(evt?.target)) {
+                    cb(evt);
+                }
+            };
+        }
+        const eventName = modifyCasing(key, mods, "kebab");
+        if (eventName === DATASTAR_FETCH_EVENT
+            || eventName === DATASTAR_SIGNAL_PATCH_EVENT) {
+            target = document;
+        }
+        if (el instanceof HTMLFormElement && eventName === "submit") {
+            const cb = callback;
+            callback = (evt) => {
+                evt?.preventDefault();
+                cb(evt);
+            };
+        }
+        target.addEventListener(eventName, callback, evtListOpts);
+        return () => {
+            target.removeEventListener(eventName, callback);
+        };
+    },
+});

package/dist/datastar/attributes/onIntersect.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/onIntersect.js

@@ -0,0 +1,54 @@
+import { attribute } from "../engine.js";
+import { beginBatch, endBatch, } from "../engine.js";
+import { clamp, modifyTiming, modifyViewTransition, } from "../utils.js";
+const once = new WeakSet();
+attribute({
+    name: "on-intersect",
+    requirement: {
+        key: "denied",
+        value: "must",
+    },
+    apply({ el, mods, rx }) {
+        let callback = () => {
+            beginBatch();
+            rx();
+            endBatch();
+        };
+        callback = modifyViewTransition(callback, mods);
+        callback = modifyTiming(callback, mods);
+        const options = { threshold: 0 };
+        if (mods.has("full")) {
+            options.threshold = 1;
+        }
+        else if (mods.has("half")) {
+            options.threshold = 0.5;
+        }
+        else if (mods.get("threshold")) {
+            options.threshold = clamp(Number(mods.get("threshold")), 0, 100) / 100;
+        }
+        const exit = mods.has("exit");
+        let observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting !== exit) {
+                    callback();
+                    if (observer && once.has(el)) {
+                        observer.disconnect();
+                    }
+                }
+            }
+        }, options);
+        observer.observe(el);
+        if (mods.has("once")) {
+            once.add(el);
+        }
+        return () => {
+            if (!mods.has("once")) {
+                once.delete(el);
+            }
+            if (observer) {
+                observer.disconnect();
+                observer = null;
+            }
+        };
+    },
+});

package/dist/datastar/attributes/onInterval.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/onInterval.js

@@ -0,0 +1,31 @@
+import { attribute } from "../engine.js";
+import { beginBatch, endBatch, } from "../engine.js";
+import { modifyViewTransition, tagHas, tagToMs, } from "../utils.js";
+attribute({
+    name: "on-interval",
+    requirement: {
+        key: "denied",
+        value: "must",
+    },
+    apply({ mods, rx }) {
+        let callback = () => {
+            beginBatch();
+            rx();
+            endBatch();
+        };
+        callback = modifyViewTransition(callback, mods);
+        let duration = 1000;
+        const durationArgs = mods.get("duration");
+        if (durationArgs) {
+            duration = tagToMs(durationArgs);
+            const leading = tagHas(durationArgs, "leading", false);
+            if (leading) {
+                callback();
+            }
+        }
+        const intervalId = setInterval(callback, duration);
+        return () => {
+            clearInterval(intervalId);
+        };
+    },
+});

package/dist/datastar/attributes/onSignalPatch.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/onSignalPatch.js

@@ -0,0 +1,44 @@
+import { DATASTAR_SIGNAL_PATCH_EVENT } from "../engine.js";
+import { attribute } from "../engine.js";
+import { beginBatch, endBatch, filtered, } from "../engine.js";
+import { aliasify, isEmpty, jsStrToObject, modifyTiming, } from "../utils.js";
+attribute({
+    name: "on-signal-patch",
+    requirement: {
+        value: "must",
+    },
+    argNames: ["patch"],
+    returnsValue: true,
+    apply({ el, key, mods, rx, error }) {
+        if (!!key && key !== "filter") {
+            throw error("KeyNotAllowed");
+        }
+        const filterAttr = aliasify(`${this.name}-filter`);
+        const filtersRaw = el.getAttribute(filterAttr);
+        let filters = {};
+        if (filtersRaw) {
+            filters = jsStrToObject(filtersRaw);
+        }
+        let running = false;
+        const callback = modifyTiming((evt) => {
+            if (running)
+                return;
+            const watched = filtered(filters, evt.detail);
+            if (!isEmpty(watched)) {
+                running = true;
+                beginBatch();
+                try {
+                    rx(watched);
+                }
+                finally {
+                    endBatch();
+                    running = false;
+                }
+            }
+        }, mods);
+        document.addEventListener(DATASTAR_SIGNAL_PATCH_EVENT, callback);
+        return () => {
+            document.removeEventListener(DATASTAR_SIGNAL_PATCH_EVENT, callback);
+        };
+    },
+});

package/dist/datastar/attributes/ref.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/ref.js

@@ -0,0 +1,11 @@
+import { attribute } from "../engine.js";
+import { mergePaths } from "../engine.js";
+import { modifyCasing } from "../utils.js";
+attribute({
+    name: "ref",
+    requirement: "exclusive",
+    apply({ el, key, mods, value }) {
+        const signalName = key != null ? modifyCasing(key, mods) : value;
+        mergePaths([[signalName, el]]);
+    },
+});

package/dist/datastar/attributes/show.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/show.js

@@ -0,0 +1,32 @@
+import { attribute } from "../engine.js";
+import { effect } from "../engine.js";
+const NONE = "none";
+const DISPLAY = "display";
+attribute({
+    name: "show",
+    requirement: {
+        key: "denied",
+        value: "must",
+    },
+    returnsValue: true,
+    apply({ el, rx }) {
+        const update = () => {
+            observer.disconnect();
+            const shouldShow = rx();
+            if (shouldShow) {
+                if (el.style.display === NONE)
+                    el.style.removeProperty(DISPLAY);
+            }
+            else {
+                el.style.setProperty(DISPLAY, NONE);
+            }
+            observer.observe(el, { attributeFilter: ["style"] });
+        };
+        const observer = new MutationObserver(update);
+        const cleanup = effect(update);
+        return () => {
+            observer.disconnect();
+            cleanup();
+        };
+    },
+});

package/dist/datastar/attributes/signals.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/datastar/attributes/signals.js

@@ -0,0 +1,18 @@
+import { attribute } from "../engine.js";
+import { mergePatch, mergePaths, } from "../engine.js";
+import { modifyCasing } from "../utils.js";
+attribute({
+    name: "signals",
+    returnsValue: true,
+    apply({ key, mods, rx }) {
+        const ifMissing = mods.has("ifmissing");
+        if (key) {
+            key = modifyCasing(key, mods);
+            mergePaths([[key, rx?.()]], { ifMissing });
+        }
+        else {
+            const patch = Object.assign({}, rx?.());
+            mergePatch(patch, { ifMissing });
+        }
+    },
+});

package/dist/datastar/attributes/style.d.ts

@@ -0,0 +1 @@
+export {};