rask-ui 0.3.4 → 0.4.1

package/dist/vdom/AbstractVNode.js

@@ -1,256 +0,0 @@
-import { elementsToFragment } from "./dom-utils";
-export class AbstractVNode {
-    key;
-    parent;
-    root;
-    elm;
-    children;
-    getHTMLElement() {
-        if (!this.elm || !(this.elm instanceof HTMLElement)) {
-            throw new Error("This VNode does not have an HTMLElement");
-        }
-        return this.elm;
-    }
-    /**
-     * A VNode can represent multiple elements (fragment of component)
-     */
-    getElements() {
-        if (this.elm) {
-            return [this.elm];
-        }
-        if (!this.children) {
-            throw new Error("This VNode has no element or children");
-        }
-        // Optimized: avoid intermediate arrays from map+flat
-        const result = [];
-        for (let i = 0; i < this.children.length; i++) {
-            const childElms = this.children[i].getElements();
-            for (let j = 0; j < childElms.length; j++) {
-                result.push(childElms[j]);
-            }
-        }
-        return result;
-    }
-    getParentElement() {
-        let parent = this.parent;
-        // This VNode might not have an element, but relies
-        // on a parent for it. So we make sure that we get
-        // the actual parent of the element related to this VNode
-        while (parent) {
-            if (parent.elm instanceof HTMLElement) {
-                // This will always be an HTMLElement as text nodes has no children
-                return parent.elm;
-            }
-            parent = parent.parent;
-        }
-        throw new Error("There is no parent element for this VNode");
-    }
-    canPatch(oldNode, newNode) {
-        // Must be same constructor type
-        if (oldNode.constructor !== newNode.constructor) {
-            return false;
-        }
-        // For ElementVNodes, must have same tag
-        if ("tag" in oldNode && "tag" in newNode) {
-            return oldNode.tag === newNode.tag;
-        }
-        // For ComponentVNodes, must have same component function
-        if ("component" in oldNode && "component" in newNode) {
-            return oldNode.component === newNode.component;
-        }
-        // TextVNodes and FragmentVNodes can always patch
-        return true;
-    }
-    patchChildren(newChildren) {
-        const prevChildren = this.children;
-        if (newChildren.length === 0 && prevChildren.length === 0) {
-            return { children: [], hasChangedStructure: false };
-        }
-        // When there are only new children, we just mount them
-        if (prevChildren.length === 0) {
-            newChildren.forEach((child) => child.mount(this));
-            return {
-                children: newChildren,
-                hasChangedStructure: true,
-            };
-        }
-        // If we want to remove all children, we just unmount the previous ones
-        if (!newChildren.length && prevChildren.length) {
-            prevChildren.forEach((child) => child.unmount());
-            return { children: [], hasChangedStructure: true, operations: [] };
-        }
-        const oldKeys = {};
-        prevChildren.forEach((prevChild, index) => {
-            oldKeys[prevChild.key || index] = {
-                vnode: prevChild,
-                index,
-            };
-        });
-        // Build result array in the NEW order
-        const result = [];
-        const operations = [];
-        // Track indices of reused nodes in their original order
-        const reusedOldIndices = [];
-        // Track which result positions contain new nodes (not reused/replaced)
-        const isNewNode = [];
-        let forceStructuralChange = false;
-        newChildren.forEach((newChild, index) => {
-            const key = newChild.key || index;
-            const prevChild = oldKeys[key];
-            if (!prevChild) {
-                // New child - mount and add to result
-                const elm = newChild.mount(this);
-                result.push(newChild);
-                isNewNode.push(true);
-                operations.push({ type: "add", elm });
-            }
-            else if (prevChild?.vnode === newChild) {
-                // Same instance - no patching needed, just reuse
-                result.push(prevChild.vnode);
-                isNewNode.push(false);
-                reusedOldIndices.push(prevChild.index);
-                delete oldKeys[key];
-            }
-            else if (this.canPatch(prevChild.vnode, newChild)) {
-                // Compatible types - patch and reuse old VNode
-                prevChild.vnode.patch(newChild);
-                result.push(prevChild.vnode);
-                isNewNode.push(false);
-                reusedOldIndices.push(prevChild.index);
-                delete oldKeys[key];
-            }
-            else {
-                // Incompatible types - replace completely
-                const newElm = newChild.mount(this);
-                prevChild.vnode.unmount();
-                result.push(newChild);
-                isNewNode.push(false); // Replacement, not an insertion
-                delete oldKeys[key];
-                const oldElm = prevChild.vnode.getElements();
-                // We need to fall back to structural change when the old node does
-                // not have any elements. This can happen when a component returns null,
-                // throws an error etc.
-                if (!oldElm.length) {
-                    forceStructuralChange = true;
-                    return;
-                }
-                operations.push({
-                    type: "replace",
-                    oldElm,
-                    newElm,
-                });
-            }
-        });
-        // Unmount any old children that weren't reused
-        for (const key in oldKeys) {
-            oldKeys[key].vnode.unmount();
-            operations.push({
-                type: "remove",
-                elm: oldKeys[key].vnode.getElements(),
-            });
-        }
-        // Detect structural changes:
-        // 1. Reordering: reused nodes are not in their original relative order
-        // 2. Insertion in middle: new nodes inserted before existing nodes
-        let hasReordering = false;
-        let hasInsertionInMiddle = false;
-        if (!forceStructuralChange) {
-            for (let i = 1; i < reusedOldIndices.length; i++) {
-                if (reusedOldIndices[i] < reusedOldIndices[i - 1]) {
-                    hasReordering = true;
-                    break;
-                }
-            }
-        }
-        if (!hasReordering) {
-            // Find the last position that contains a reused/replaced node
-            let lastReusedResultIndex = -1;
-            for (let i = result.length - 1; i >= 0; i--) {
-                if (!isNewNode[i]) {
-                    lastReusedResultIndex = i;
-                    break;
-                }
-            }
-            // Check if any new nodes were inserted before the last reused/replaced node
-            if (lastReusedResultIndex >= 0) {
-                for (let i = 0; i < lastReusedResultIndex; i++) {
-                    if (isNewNode[i]) {
-                        hasInsertionInMiddle = true;
-                        break;
-                    }
-                }
-            }
-        }
-        const hasChangedStructure = forceStructuralChange || hasReordering || hasInsertionInMiddle;
-        if (hasChangedStructure) {
-            operations.length = 0;
-        }
-        return { children: result, hasChangedStructure, operations };
-    }
-    applyPatchOperations(target, operations) {
-        operations.forEach((operation) => {
-            switch (operation.type) {
-                case "add": {
-                    target.appendChild(elementsToFragment(operation.elm));
-                    break;
-                }
-                case "remove": {
-                    if (Array.isArray(operation.elm)) {
-                        const range = new Range();
-                        range.setStartBefore(operation.elm[0]);
-                        range.setEndAfter(operation.elm[operation.elm.length - 1]);
-                        range.deleteContents();
-                    }
-                    else {
-                        target.removeChild(operation.elm);
-                    }
-                    break;
-                }
-                case "replace": {
-                    if (Array.isArray(operation.oldElm)) {
-                        const range = new Range();
-                        range.setStartBefore(operation.oldElm[0]);
-                        range.setEndAfter(operation.oldElm[operation.oldElm.length - 1]);
-                        range.deleteContents();
-                        range.insertNode(elementsToFragment(operation.newElm));
-                    }
-                    else {
-                        target.replaceChild(elementsToFragment(operation.newElm), operation.oldElm);
-                    }
-                    break;
-                }
-            }
-        });
-    }
-    /**
-     * Intelligently sync DOM to match children VNode order.
-     * Only performs DOM operations when elements are out of position.
-     * This is used by both patch() and rerender() to efficiently update children.
-     */
-    syncDOMChildren() {
-        if (!this.children) {
-            return;
-        }
-        const elm = this.elm;
-        let currentDomChild = elm.firstChild;
-        for (const child of this.children) {
-            const childNodes = child.getElements();
-            for (const node of childNodes) {
-                if (currentDomChild === node) {
-                    // Already in correct position, advance pointer
-                    currentDomChild = currentDomChild.nextSibling;
-                }
-                else {
-                    // Insert (or move if it exists elsewhere in DOM)
-                    elm.insertBefore(node, currentDomChild);
-                }
-            }
-        }
-        // Remove any leftover nodes (shouldn't happen if unmount works correctly)
-        while (currentDomChild) {
-            const next = currentDomChild.nextSibling;
-            elm.removeChild(currentDomChild);
-            currentDomChild = next;
-        }
-    }
-}

package/dist/vdom/ComponentVNode.d.ts

@@ -1,48 +0,0 @@
-import { Observer } from "../observation";
-import { AbstractVNode, PatchOperation } from "./AbstractVNode";
-import { Props, VNode } from "./types";
-export type ComponentChild = VNode | string | null | number | undefined | boolean;
-export type ComponentChildren = ComponentChild | ComponentChild[];
-/**
- * Component function type. Components receive reactive props that should not be destructured.
- *
- * @warning **Do not destructure props!** Props are wrapped in a reactive proxy, and destructuring
- * breaks reactivity. This is the same rule as Solid.js.
- *
- * @example
- * // ❌ Bad - destructuring props loses reactivity
- * function MyComponent({ count, name }) {
- *   return () => <div>{count} {name}</div>; // Won't update!
- * }
- *
- * // ✅ Good - access props directly in render
- * function MyComponent(props) {
- *   return () => <div>{props.count} {props.name}</div>; // Reactive!
- * }
- */
-export type Component<P extends Props> = ((props: P) => () => ComponentChildren) | (() => () => ComponentChildren);
-export type ComponentInstance = {
-    parent?: VNode;
-    contexts: Map<object, unknown> | null;
-    onMounts: Array<() => void>;
-    onCleanups: Array<() => void>;
-    observer: Observer;
-    reactiveProps: object;
-    error: unknown;
-    notifyError(error: unknown): void;
-};
-export declare function getCurrentComponent(): ComponentInstance;
-export declare function onMount(cb: () => void): void;
-export declare function onCleanup(cb: () => void): void;
-export declare class ComponentVNode extends AbstractVNode {
-    component: Component<any>;
-    props: Props;
-    children: VNode[];
-    instance?: ComponentInstance;
-    constructor(component: Component<any>, props: Props, children: VNode[], key?: string);
-    rerender(operations?: PatchOperation[]): void;
-    mount(parent?: VNode): Node[];
-    patch(newNode: ComponentVNode): void;
-    unmount(): void;
-}
-//# sourceMappingURL=ComponentVNode.d.ts.map

package/dist/vdom/ComponentVNode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComponentVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/ComponentVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGhE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIvC,MAAM,MAAM,cAAc,GACtB,KAAK,GACL,MAAM,GACN,IAAI,GACJ,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG,cAAc,EAAE,CAAC;AAElE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,IACjC,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,iBAAiB,CAAC,GACvC,CAAC,MAAM,MAAM,iBAAiB,CAAC,CAAC;AAEpC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC5B,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC;IAC9B,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACnC,CAAC;AAKF,wBAAgB,mBAAmB,sBAYlC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAYrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAYvC;AAED,qBAAa,cAAe,SAAQ,aAAa;IAC/C,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;IAEb,QAAQ,EAAE,KAAK,EAAE,CAAM;IACvB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;gBAE3B,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,EAAE,EACjB,GAAG,CAAC,EAAE,MAAM;IAWd,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI;IAG7C,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI,EAAE;IA6I7B,KAAK,CAAC,OAAO,EAAE,cAAc;IAW7B,OAAO;CAcR"}

package/dist/vdom/ComponentVNode.js

@@ -1,221 +0,0 @@
-import { getCurrentObserver, Observer, Signal } from "../observation";
-import { AbstractVNode } from "./AbstractVNode";
-import { FragmentVNode } from "./FragmentVNode";
-import { RootVNode } from "./RootVNode";
-import { normalizeChildren } from "./utils";
-import { flattenNodes } from "./dom-utils";
-import { currentRoot } from "./RootVNode";
-export function getCurrentComponent() {
-    if (!currentRoot) {
-        throw new Error("No current root");
-    }
-    const currentComponent = currentRoot.componentStack[0];
-    if (!currentComponent) {
-        throw new Error("No current component");
-    }
-    return currentComponent;
-}
-export function onMount(cb) {
-    if (!currentRoot) {
-        throw new Error("Only use onCleanup in component setup");
-    }
-    const current = currentRoot.componentStack[0];
-    if (!current) {
-        throw new Error("Only use onCleanup in component setup");
-    }
-    current.onMounts.push(cb);
-}
-export function onCleanup(cb) {
-    if (!currentRoot) {
-        throw new Error("Only use onCleanup in component setup");
-    }
-    const current = currentRoot.componentStack[0];
-    if (!current) {
-        throw new Error("Only use onCleanup in component setup");
-    }
-    current.onCleanups.push(cb);
-}
-export class ComponentVNode extends AbstractVNode {
-    component;
-    props;
-    // These are the actual current children returned by component
-    children = [];
-    instance;
-    constructor(component, props, children, key) {
-        super();
-        this.component = component;
-        this.props = {
-            ...props,
-            children,
-        };
-        this.children = [];
-        this.key = key;
-    }
-    rerender(operations) {
-        this.parent?.rerender(operations);
-    }
-    mount(parent) {
-        this.parent = parent;
-        if (parent instanceof RootVNode) {
-            this.root = parent;
-        }
-        else {
-            this.root = parent?.root;
-        }
-        let errorSignal;
-        let error;
-        const executeRender = () => {
-            const stopObserving = instance.observer.observe();
-            let renderResult = new FragmentVNode([]);
-            try {
-                renderResult = render();
-            }
-            catch (error) {
-                instance.notifyError(error);
-            }
-            finally {
-                stopObserving();
-            }
-            return normalizeChildren(renderResult);
-        };
-        let isObserverQueued = false;
-        const instance = (this.instance = {
-            parent,
-            contexts: null,
-            onCleanups: [],
-            onMounts: [],
-            observer: new Observer(() => {
-                if (isObserverQueued) {
-                    return;
-                }
-                isObserverQueued = true;
-                this.root?.queueObserver(() => {
-                    if (instance.observer.isDisposed) {
-                        return;
-                    }
-                    isObserverQueued = false;
-                    this.root?.setAsCurrent();
-                    const newChildren = executeRender();
-                    const { children, hasChangedStructure, operations } = this.patchChildren(newChildren);
-                    this.children = children;
-                    // So if a fragment is returned where we add new elements we can not safely
-                    // add them yet, check Fragment for a potential later optimization
-                    const hasAddOperation = operations?.some((operation) => operation.type === "add");
-                    if (hasChangedStructure || hasAddOperation) {
-                        this.parent?.rerender();
-                    }
-                    else if (operations?.length) {
-                        this.parent?.rerender(operations);
-                    }
-                    this.root?.clearCurrent();
-                });
-            }),
-            reactiveProps: createReactiveProps(this.props),
-            get error() {
-                if (!errorSignal) {
-                    errorSignal = new Signal();
-                }
-                const observer = getCurrentObserver();
-                if (observer) {
-                    observer.subscribeSignal(errorSignal);
-                }
-                return error;
-            },
-            notifyError(childError) {
-                if (errorSignal) {
-                    error = childError;
-                    errorSignal.notify();
-                }
-                else if (instance.parent) {
-                    let parent = instance.parent;
-                    while (parent && !(parent instanceof ComponentVNode)) {
-                        parent = parent?.parent;
-                    }
-                    // Only call notifyError if we found a ComponentVNode parent
-                    if (parent instanceof ComponentVNode) {
-                        parent.instance?.notifyError(childError);
-                    }
-                    // Otherwise there's no ErrorBoundary, so do nothing
-                }
-                else {
-                    throw childError;
-                }
-            },
-        });
-        this.root?.setAsCurrent();
-        this.root?.pushComponent(instance);
-        const render = this.component(instance.reactiveProps);
-        // Validate that render is a function
-        if (typeof render !== "function") {
-            const initError = new Error(`Component must return a render function, but got ${render instanceof AbstractVNode ? "JSX" : typeof render}. ` +
-                `Components should return a function that returns JSX: \`return () => <div>...</div>\``);
-            console.error("Error initializing component:", initError);
-            error = initError;
-            instance.notifyError(initError);
-            this.root?.popComponent();
-            this.root?.clearCurrent();
-            return [];
-        }
-        this.children = executeRender();
-        this.root?.popComponent();
-        this.root?.clearCurrent();
-        // Optimized: avoid intermediate arrays from map+flat
-        const childResults = [];
-        for (let i = 0; i < this.children.length; i++) {
-            childResults.push(this.children[i].mount(this));
-        }
-        const childElements = flattenNodes(childResults);
-        // Queue onMount callbacks after children are mounted
-        // This ensures refs and other child lifecycle hooks run before parent onMount
-        instance.onMounts.forEach((cb) => {
-            this.root?.queueMount(cb);
-        });
-        return childElements;
-    }
-    patch(newNode) {
-        this.root?.setAsCurrent();
-        this.root?.pushComponent(this.instance);
-        for (const prop in newNode.props) {
-            this.instance.reactiveProps[prop] = newNode.props[prop];
-        }
-        this.root?.popComponent();
-        this.root?.clearCurrent();
-    }
-    unmount() {
-        this.instance.observer.dispose();
-        this.children.forEach((child) => child.unmount());
-        this.root?.queueUnmount(() => {
-            this.instance.onCleanups.forEach((cb) => {
-                try {
-                    cb();
-                }
-                catch (error) {
-                    // Log error but continue executing remaining cleanups
-                    console.error("Error during cleanup:", error);
-                }
-            });
-        });
-    }
-}
-function createReactiveProps(props) {
-    const reactiveProps = {};
-    for (const prop in props) {
-        const signal = new Signal();
-        Object.defineProperty(reactiveProps, prop, {
-            get() {
-                const observer = getCurrentObserver();
-                if (observer) {
-                    observer.subscribeSignal(signal);
-                }
-                return props[prop];
-            },
-            set(value) {
-                if (props[prop] !== value) {
-                    props[prop] = value;
-                    signal.notify();
-                }
-            },
-        });
-    }
-    return reactiveProps;
-}

package/dist/vdom/ElementVNode.d.ts

@@ -1,27 +0,0 @@
-import { AbstractVNode, PatchOperation } from "./AbstractVNode";
-import { Props, VNode, VFlags } from "./types";
-export declare class ElementVNode extends AbstractVNode {
-    tag: string;
-    props: Props;
-    children: VNode[];
-    key?: string;
-    flags: VFlags;
-    private ref?;
-    private eventListeners?;
-    constructor(tag: string, { ref, ...props }: Props, children: VNode[], key?: string);
-    private computeFlags;
-    rerender(operations?: PatchOperation[]): void;
-    mount(parent?: VNode): Node;
-    /**
-     * An ELEMENT patch goes through three operations
-     * - Patch or replace the element
-     * - Patch the children
-     */
-    patch(newNode: ElementVNode): void;
-    unmount(): void;
-    private setProp;
-    private patchProps;
-    private patchStyle;
-    private addEventListener;
-}
-//# sourceMappingURL=ElementVNode.d.ts.map

package/dist/vdom/ElementVNode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ElementVNode.d.ts","sourceRoot":"","sources":["../../src/vdom/ElementVNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGhE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAU/C,qBAAa,YAAa,SAAQ,aAAa;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,GAAG,CAAC,CAA0D;IACtE,OAAO,CAAC,cAAc,CAAC,CAA6B;gBAElD,GAAG,EAAE,MAAM,EACX,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,EACxB,QAAQ,EAAE,KAAK,EAAE,EACjB,GAAG,CAAC,EAAE,MAAM;IAad,OAAO,CAAC,YAAY;IAwBpB,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,GAAG,IAAI;IAO7C,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI;IAkC3B;;;;OAIG;IACH,KAAK,CAAC,OAAO,EAAE,YAAY;IAwB3B,OAAO;IAYP,OAAO,CAAC,OAAO,CAoCb;IACF,OAAO,CAAC,UAAU;IAsClB,OAAO,CAAC,UAAU;IAoClB,OAAO,CAAC,gBAAgB;CAgBzB"}