@thyn/core 0.0.39 → 0.0.41

package/dist/element.js

@@ -244,6 +244,15 @@ export function list(props, terminal = false) {
         }
         const childNodes = Array.from(parent.childNodes);
         const offset = childNodes.indexOf(startBookend) + 1;
+        if (start < 0) {
+            for (let i = nextItems.length; i < oldLength; i++) {
+                const e = childNodes[offset + --oldLength];
+                teardown(e);
+                remove(e);
+            }
+            prevItems = nextItems;
+            return;
+        }
         if (start >= newLength) {
             while (start < oldLength) {
                 const e = childNodes[offset + --oldLength];

package/dist/src/element.d.ts

@@ -0,0 +1,14 @@
+export declare function mount(app: any, parent: any): void;
+export declare let currentEffects: any | undefined;
+export declare function createReactiveTextNode(v: any): any;
+export declare function component(name: any, props?: any): any;
+export declare function setAttribute(el: any, key: any, val: any): any;
+export declare function setProperty(el: any, key: any, val: any): any;
+export declare function setReactiveAttribute(el: any, key: any, val: any): any;
+export declare function setReactiveProperty(el: any, key: any, val: any): any;
+export declare function addChildren(e: any, children: any): any;
+export declare function markAsReactive(el: any): any;
+export declare function addEffect(el: any, ef: any): any;
+export declare function show(props: any): Element | Comment;
+export declare function terminalList(props: any): DocumentFragment;
+export declare function list(props: any, terminal?: boolean): DocumentFragment;

package/dist/src/element.js

@@ -0,0 +1,365 @@
+import { $effect, cleanup } from "./signals";
+export function mount(app, parent) {
+    parent.appendChild(app());
+}
+const effects = new Map();
+export let currentEffects;
+export function createReactiveTextNode(v) {
+    let n;
+    $effect(() => {
+        if (n) {
+            n.nodeValue = v();
+        }
+        else {
+            n = document.createTextNode(v());
+        }
+    });
+    return n;
+}
+export function component(name, props) {
+    const prevEffects = currentEffects;
+    currentEffects = [];
+    const e = name(props);
+    const existing = effects.get(e);
+    if (existing) {
+        existing.push(...currentEffects);
+    }
+    else {
+        effects.set(e, currentEffects);
+    }
+    currentEffects = prevEffects;
+    return e;
+}
+export function setAttribute(el, key, val) {
+    if (val)
+        el.setAttribute(key, val);
+    return el;
+}
+export function setProperty(el, key, val) {
+    if (val)
+        el[key] = val;
+    return el;
+}
+export function setReactiveAttribute(el, key, val) {
+    let first = true;
+    addEffect(el, $effect(() => {
+        const v = val();
+        if (first) {
+            if (v !== undefined)
+                el.setAttribute(key, val());
+            first = false;
+            return;
+        }
+        if (v === undefined)
+            el.removeAttribute(key);
+        else
+            el.setAttribute(key, v);
+    }));
+    return el;
+}
+export function setReactiveProperty(el, key, val) {
+    let first = true;
+    addEffect(el, $effect(() => {
+        const v = val();
+        if (first) {
+            if (v !== undefined)
+                el[key] = v;
+            first = false;
+            return;
+        }
+        if (v === undefined)
+            delete el[key];
+        else
+            el[key] = v;
+    }));
+    return el;
+}
+export function addChildren(e, children) {
+    for (const ch of children) {
+        e.appendChild(ch);
+    }
+    return e;
+}
+export function markAsReactive(el) {
+    if (!effects.has(el))
+        effects.set(el, []);
+    return el;
+}
+export function addEffect(el, ef) {
+    if (effects.has(el)) {
+        effects.get(el).push(ef);
+    }
+    else {
+        effects.set(el, [ef]);
+    }
+    return el;
+}
+function teardown(elem, iterating = false) {
+    let end;
+    let start;
+    if (elem.nodeType === 8) { // COMMENT_NODE
+        const bookends = fragments.get(elem);
+        if (!bookends) {
+            return;
+        }
+        fragments.delete(elem);
+        start = elem;
+        [elem, end] = bookends;
+    }
+    const fx = effects.get(elem);
+    if (fx) {
+        for (const eff of fx) {
+            cleanup(eff);
+        }
+        effects.delete(elem);
+        if (end && elem.nodeType === 11) { // DOCUMENT_FRAGMENT_NODE
+            if (iterating)
+                return;
+            while (end.previousSibling !== start) {
+                teardown(end.previousSibling);
+                end = end.previousSibling;
+            }
+        }
+        else {
+            for (const ch of elem.childNodes) {
+                teardown(ch, true);
+            }
+        }
+    }
+}
+function remove(elem) {
+    if (!elem.parentNode) {
+        const [, end] = fragments.get(elem);
+        if (!elem.previousSibling && !end.nextSibling) {
+            elem.parentNode.textContent = "";
+            return;
+        }
+        while (end.previousSibling !== elem) {
+            end.previousSibling.remove();
+        }
+        end.remove();
+    }
+    elem.remove();
+}
+export function show(props) {
+    let prevIndex = -1;
+    let prevElem;
+    const eff = $effect(() => {
+        const currIndex = props.findIndex((c) => !c.if || c.if());
+        if (currIndex === prevIndex) {
+            if (!prevElem) {
+                prevElem = document.createComment("");
+            }
+            return;
+        }
+        const newElem = currIndex < 0
+            ? document.createComment("")
+            : props[currIndex].then();
+        if (prevElem) {
+            const prevFx = effects.get(prevElem);
+            if (prevFx) {
+                effects.set(prevElem, prevFx.filter((f) => f !== eff));
+            }
+            const fx = effects.get(newElem);
+            if (fx) {
+                fx.push(eff);
+            }
+            else {
+                effects.set(newElem, [eff]);
+            }
+            let td = prevElem;
+            queueMicrotask(() => {
+                teardown(td);
+                td.replaceWith(newElem);
+                td = null;
+            });
+        }
+        prevElem = newElem;
+        prevIndex = currIndex;
+    });
+    return prevElem;
+}
+const replaceWith = (nextItem, prevElement, render) => {
+    teardown(prevElement);
+    prevElement.replaceWith(render(nextItem));
+};
+const fragments = new Map();
+export function terminalList(props) {
+    return list(props, true);
+}
+export function list(props, terminal = false) {
+    let prevItems;
+    let outlet = document.createDocumentFragment();
+    const startBookend = document.createComment("");
+    const endBookend = document.createComment("");
+    const render = props.render;
+    const keyMap = new Map();
+    let isolated = false;
+    $effect(() => {
+        const parent = startBookend.parentNode;
+        if (!parent) {
+            prevItems = props.items();
+            for (const i of prevItems) {
+                outlet.appendChild(render(i));
+            }
+            return;
+        }
+        let nextItems = props.items();
+        let newLength = nextItems.length;
+        let oldLength = prevItems.length;
+        if (!oldLength && newLength) {
+            for (const i of nextItems) {
+                parent.insertBefore(render(i), endBookend);
+            }
+            prevItems = nextItems;
+            return;
+        }
+        if (!newLength && isolated) {
+            const end = parent.childNodes.length - 1;
+            if (terminal) {
+                for (let i = 1; i < end; i++) {
+                    const ch = parent.childNodes[i];
+                    for (const f of effects.get(ch))
+                        cleanup(f);
+                    effects.delete(ch);
+                }
+            }
+            else {
+                for (let i = 1; i < parent.childNodes.length - 1; i++) {
+                    teardown(parent.childNodes[i]);
+                }
+            }
+            parent.textContent = "";
+            parent.append(startBookend, endBookend);
+            prevItems = nextItems;
+            return;
+        }
+        let start = nextItems.findIndex((item, index) => prevItems[index] !== item);
+        if (start === oldLength) {
+            for (let i = start; i < newLength; i++) {
+                parent.insertBefore(render(nextItems[i]), endBookend);
+            }
+            prevItems = nextItems;
+            return;
+        }
+        const childNodes = Array.from(parent.childNodes);
+        const offset = childNodes.indexOf(startBookend) + 1;
+        if (start < 0) {
+            for (let i = nextItems.length; i < oldLength; i++) {
+                const e = childNodes[offset + --oldLength];
+                teardown(e);
+                remove(e);
+            }
+            prevItems = nextItems;
+            return;
+        }
+        if (start >= newLength) {
+            while (start < oldLength) {
+                const e = childNodes[offset + --oldLength];
+                teardown(e);
+                remove(e);
+            }
+            prevItems = nextItems;
+            return;
+        }
+        // suffix
+        oldLength--;
+        newLength--;
+        while (newLength > start &&
+            oldLength >= start &&
+            (nextItems[newLength] === prevItems[oldLength])) {
+            oldLength--;
+            newLength--;
+        }
+        const nextKeys = new Set(nextItems);
+        let rem = [];
+        for (let i = start; i <= oldLength; i++) {
+            if (!nextKeys.has(prevItems[i])) {
+                const ch = childNodes[i + offset];
+                if (terminal) {
+                    for (const f of effects.get(ch))
+                        cleanup(f);
+                    effects.delete(ch);
+                }
+                else {
+                    teardown(ch);
+                }
+                rem.push(ch);
+                childNodes[i + offset] = null;
+            }
+        }
+        if (isolated && rem.length === prevItems.length) {
+            parent.textContent = "";
+            parent.appendChild(startBookend);
+            for (const i of nextItems) {
+                parent.appendChild(render(i));
+            }
+            parent.appendChild(endBookend);
+            prevItems = nextItems;
+            rem = null;
+            return;
+        }
+        for (const e of rem) {
+            remove(e);
+        }
+        rem = null;
+        for (let i = start; i <= oldLength; i++) {
+            if (childNodes[i + offset] &&
+                (!nextItems[i] ||
+                    prevItems[i] !== nextItems[i])) {
+                keyMap.set(prevItems[i], {
+                    element: childNodes[i + offset],
+                    item: prevItems[i],
+                });
+            }
+        }
+        if (newLength === oldLength && keyMap.size > (newLength - start + 1) / 2) {
+            const lastOrdered = childNodes[start + offset - 1];
+            const set = [];
+            for (let i = start; i <= newLength; i++) {
+                set.push(keyMap.get(nextItems[i])?.element ?? childNodes[i + offset]);
+            }
+            lastOrdered.after(...set);
+            prevItems = nextItems;
+            keyMap.clear();
+            return;
+        }
+        while (start <= newLength) {
+            const newChd = nextItems[start];
+            const oldChd = prevItems[start];
+            const oldDom = parent.childNodes[start + offset];
+            const mappedOld = keyMap.get(newChd);
+            if (oldChd === undefined) {
+                endBookend.before(render(newChd));
+            }
+            else if (mappedOld) {
+                if (oldDom !== mappedOld.element) {
+                    const tmp = mappedOld.element.nextSibling;
+                    parent.insertBefore(mappedOld.element, oldDom);
+                    parent.insertBefore(oldDom, tmp);
+                }
+                if (mappedOld.item !== newChd) {
+                    replaceWith(newChd, mappedOld.element, render);
+                }
+                keyMap.delete(newChd);
+            }
+            else if (oldChd !== newChd) {
+                parent.insertBefore(render(newChd), oldDom);
+            }
+            start++;
+        }
+        for (const v of keyMap.values()) {
+            const el = v.element;
+            teardown(el);
+            remove(el);
+        }
+        keyMap.clear();
+        prevItems = nextItems;
+        nextItems = null;
+    });
+    outlet.prepend(startBookend);
+    outlet.append(endBookend);
+    fragments.set(startBookend, [outlet, endBookend]);
+    isolated = !startBookend.previousSibling && !endBookend.nextSibling;
+    return outlet;
+}

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export { addChildren, addEffect, component, createReactiveTextNode, list, markAsReactive, mount, setAttribute, setProperty, setReactiveAttribute, setReactiveProperty, show, terminalList, } from "./element";
+export { $compare, $effect, $signal, type Signal } from "./signals";

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export { addChildren, addEffect, component, createReactiveTextNode, list, markAsReactive, mount, setAttribute, setProperty, setReactiveAttribute, setReactiveProperty, show, terminalList, } from "./element";
+export { $compare, $effect, $signal } from "./signals";

package/dist/src/router.d.ts

@@ -0,0 +1,8 @@
+export declare const pathname: import("./signals.js").Signal<string>;
+export declare function Router({ routes }: {
+    routes: any;
+}): any;
+export declare function Link({ slot, to }: {
+    slot: any;
+    to: any;
+}): HTMLAnchorElement;

package/dist/src/router.js

@@ -0,0 +1,26 @@
+import { component, show } from "./element.js";
+import { $signal } from "./signals.js";
+export const pathname = $signal(location.pathname);
+export function Router({ routes }) {
+    return component(show, routes.map((r) => ({
+        if: () => r.path === pathname(),
+        then: r.component,
+    })));
+}
+export function Link({ slot, to }) {
+    const a = document.createElement("a");
+    a.href = to;
+    for (const ch of slot) {
+        a.appendChild(ch);
+    }
+    a.onclick = (e) => {
+        if (!e.defaultPrevented &&
+            e.button === 0 &&
+            !(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)) {
+            e.preventDefault();
+            history.pushState({}, "", to);
+            pathname(to);
+        }
+    };
+    return a;
+}

package/dist/src/signals.d.ts

@@ -0,0 +1,42 @@
+export type Signal<T> = {
+    (): T;
+    (value: T): void;
+    (updater: (prev: T) => T): void;
+};
+export declare function $signal<T>(value: T): Signal<T>;
+/**
+ * Creates a reactive equality checker function based on a reactive source.
+ *
+ * This is useful when you want to conditionally react to equality against a selected value,
+ * such as highlighting a selected item in a list. Only effects that call the returned function
+ * with the **current** value will re-run when the source value changes.
+ *
+ * Example:
+ *
+ * ```ts
+ * const selectedId  = $signal(null);
+ * const isSelected = $compare(selectedId);
+ *
+ * $effect(() => {
+ *   if (isSelected(row.id)) {
+ *     // React only if row.id === selectedId()
+ *   }
+ * });
+ * ```
+ *
+ * Internally, only effects that compare against the current or previous selected value
+ * are re-evaluated when the source changes. This is especially efficient in large lists.
+ *
+ * @template T The type of the reactive value being compared.
+ * @param {() => T} fn A reactive function returning the current value to compare against.
+ * @returns {(value: T) => boolean} A function that returns true if the provided value
+ * matches the current value from `fn()`. Automatically subscribes the calling effect
+ * to changes in that specific value.
+ */
+export declare function $compare<T>(fn: () => T): (value: T) => boolean;
+export declare function $effect(fn: any): {
+    run: any;
+    deps: Set<unknown>;
+    td: any;
+};
+export declare function cleanup(effectFn: any): void;

package/dist/src/signals.js

@@ -0,0 +1,153 @@
+import { currentEffects } from "./element";
+let currentEffect;
+let isBatching;
+const pendingEffects = [];
+function scheduleEffect(effectFn) {
+    pendingEffects.push(effectFn);
+    if (!isBatching) {
+        isBatching = true;
+        queueMicrotask(() => {
+            for (const ef of pendingEffects)
+                runEffect(ef);
+            pendingEffects.length = 0;
+            isBatching = false;
+        });
+    }
+}
+export function $signal(value) {
+    const subscribers = new Set();
+    return (...args) => {
+        if (!args.length) {
+            if (currentEffect) {
+                subscribers.add(currentEffect);
+                currentEffect.deps.add(subscribers);
+            }
+            return value;
+        }
+        const action = args[0];
+        const newValue = typeof action === "function"
+            ? action(value)
+            : action;
+        if (newValue !== value) {
+            value = newValue;
+            for (const sub of subscribers) {
+                scheduleEffect(sub);
+            }
+        }
+    };
+}
+/**
+ * Creates a reactive equality checker function based on a reactive source.
+ *
+ * This is useful when you want to conditionally react to equality against a selected value,
+ * such as highlighting a selected item in a list. Only effects that call the returned function
+ * with the **current** value will re-run when the source value changes.
+ *
+ * Example:
+ *
+ * ```ts
+ * const selectedId  = $signal(null);
+ * const isSelected = $compare(selectedId);
+ *
+ * $effect(() => {
+ *   if (isSelected(row.id)) {
+ *     // React only if row.id === selectedId()
+ *   }
+ * });
+ * ```
+ *
+ * Internally, only effects that compare against the current or previous selected value
+ * are re-evaluated when the source changes. This is especially efficient in large lists.
+ *
+ * @template T The type of the reactive value being compared.
+ * @param {() => T} fn A reactive function returning the current value to compare against.
+ * @returns {(value: T) => boolean} A function that returns true if the provided value
+ * matches the current value from `fn()`. Automatically subscribes the calling effect
+ * to changes in that specific value.
+ */
+export function $compare(fn) {
+    const map = new Map();
+    let current = fn();
+    $effect(() => {
+        const newValue = fn();
+        if (newValue === current)
+            return;
+        const prevSubs = map.get(current);
+        const nextSubs = map.get(newValue);
+        current = newValue;
+        // Only notify subscribers for new and old values
+        if (prevSubs) {
+            for (const sub of prevSubs)
+                scheduleEffect(sub);
+        }
+        if (nextSubs) {
+            for (const sub of nextSubs)
+                scheduleEffect(sub);
+        }
+    });
+    return (value) => {
+        if (currentEffect) {
+            let subs = map.get(value);
+            if (!subs)
+                map.set(value, subs = new Set());
+            subs.add(currentEffect);
+            currentEffect.deps.add(subs);
+            const teardownFn = () => {
+                subs.delete(currentEffect);
+                if (subs.size === 0) {
+                    map.delete(value);
+                }
+            };
+            if (currentEffect.td) {
+                currentEffect.td.push(teardownFn);
+            }
+            else {
+                currentEffect.td = [teardownFn];
+            }
+        }
+        return current === value;
+    };
+}
+function runEffect(effectFn, skip) {
+    if (!skip) {
+        cleanup(effectFn);
+    }
+    const prev = currentEffect;
+    currentEffect = effectFn;
+    const td = effectFn.run();
+    if (td) {
+        if (effectFn.td) {
+            effectFn.td.push(td);
+        }
+        else {
+            effectFn.td = [td];
+        }
+    }
+    currentEffect = prev;
+}
+export function $effect(fn) {
+    const effectFn = {
+        run: fn,
+        deps: new Set(),
+        td: null,
+    };
+    runEffect(effectFn, true);
+    if (currentEffects)
+        currentEffects.push(effectFn);
+    return effectFn;
+}
+export function cleanup(effectFn) {
+    const { deps, td } = effectFn;
+    if (deps.size) {
+        for (const subs of deps) {
+            subs.delete(effectFn);
+        }
+        deps.clear();
+    }
+    if (td) {
+        for (const f of td) {
+            f();
+        }
+        effectFn.td = null;
+    }
+}

package/dist/tests/Counter.test.d.ts

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

package/dist/tests/Counter.test.js

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import Counter from './Counter.thyn';
+describe('Counter component', () => {
+    it('increments on click', async () => {
+        const root = Counter();
+        expect(root.textContent).toBe('Count: 0');
+        root.click();
+        await Promise.resolve();
+        expect(root.textContent).toBe('Count: 1');
+    });
+});

package/dist/tests/lists.test.d.ts

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