@avento-space/ts-ui 1.0.0

package/dist/adapters/dom/renderer.js

@@ -0,0 +1,748 @@
+import { Fragment } from '../../core/types.js';
+import { isSignal, effect } from '../../core/signal.js';
+import { createLifecycleContext, setCurrentLifecycle, } from '../../core/lifecycle.js';
+import { setContextProviders } from '../../core/context.js';
+import { resolveVNode, flattenFragments } from '../../render/reconciler.js';
+import { hydrateVNode } from './hydration.js';
+import { trackEffect, disposeNodeEffects, disposeSubtreeEffects, trackPropEffect as trackPropDispose, disposePropEffect, pushNodeLifecycle, getNodeLifecycle, runNodeUnmountLifecycles, setPortalData, getPortalNodes, getPortalTarget, setResolvedVNode as setNodeResolvedVNode, getResolvedVNode as getNodeResolvedVNode, } from './node-metadata.js';
+function insertNode(parent, node, ref) {
+    if (Array.isArray(node)) {
+        for (const n of node) {
+            parent.insertBefore(n, ref);
+        }
+    }
+    else {
+        parent.insertBefore(node, ref);
+    }
+}
+function appendNode(parent, node) {
+    if (Array.isArray(node)) {
+        for (const n of node) {
+            parent.appendChild(n);
+        }
+    }
+    else {
+        parent.appendChild(node);
+    }
+}
+function isSignalValue(val) {
+    return isSignal(val);
+}
+const DOM_PROP_PROPS = new Set([
+    'value', 'checked', 'selected', 'indeterminate',
+]);
+function isDOMProp(el, key) {
+    if (!DOM_PROP_PROPS.has(key))
+        return false;
+    if (key === 'value')
+        return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement;
+    if (key === 'checked' || key === 'indeterminate')
+        return el instanceof HTMLInputElement;
+    if (key === 'selected')
+        return el instanceof HTMLOptionElement;
+    return false;
+}
+function setDOMProp(el, key, value) {
+    if (key === 'className' || key === 'class') {
+        el.setAttribute('class', String(value ?? ''));
+    }
+    else if (key === 'style') {
+        if (value && typeof value === 'object') {
+            Object.assign(el.style, value);
+        }
+        else if (typeof value === 'string') {
+            el.setAttribute('style', value);
+        }
+    }
+    else if (key.startsWith('on') && typeof value === 'function') {
+        const event = key.slice(2).toLowerCase();
+        const handler = value;
+        el.addEventListener(event, handler);
+        trackPropDispose(el, key, () => {
+            el.removeEventListener(event, handler);
+        });
+    }
+    else if (key === 'key') {
+    }
+    else if (key === 'dangerouslySetInnerHTML') {
+        el.innerHTML = value?.__html ?? '';
+    }
+    else if (isDOMProp(el, key)) {
+        if (value != null && value !== false) {
+            el[key] = value;
+        }
+        else {
+            const empty = key === 'checked' ? false : '';
+            el[key] = empty;
+        }
+    }
+    else if (value != null && value !== false) {
+        el.setAttribute(key, String(value));
+    }
+    else if (value == null || value === false) {
+        el.removeAttribute(key);
+    }
+}
+function applySignalProp(el, key, signal) {
+    disposePropEffect(el, key);
+    let prevHandler = null;
+    const dispose = effect(() => {
+        const val = signal.get();
+        if (key.startsWith('on') && typeof val === 'function') {
+            const event = key.slice(2).toLowerCase();
+            if (prevHandler) {
+                el.removeEventListener(event, prevHandler);
+            }
+            prevHandler = val;
+            el.addEventListener(event, prevHandler);
+        }
+        else if (key === 'className' || key === 'class') {
+            el.setAttribute('class', String(val ?? ''));
+        }
+        else if (key === 'style' && val && typeof val === 'object') {
+            Object.assign(el.style, val);
+        }
+        else if (key === 'style' && typeof val === 'string') {
+            el.setAttribute('style', val);
+        }
+        else if (val != null && val !== false) {
+            el.setAttribute(key, String(val));
+        }
+        else {
+            el.removeAttribute(key);
+        }
+    });
+    trackEffect(el, dispose);
+    trackPropDispose(el, key, dispose);
+}
+function applyProps(el, props) {
+    if (!props)
+        return;
+    for (const [key, value] of Object.entries(props)) {
+        if (key === 'key')
+            continue;
+        if (isSignalValue(value)) {
+            applySignalProp(el, key, value);
+        }
+        else {
+            setDOMProp(el, key, value);
+        }
+    }
+}
+function createTextNode(value) {
+    const text = document.createTextNode(String(value ?? ''));
+    if (isSignalValue(value)) {
+        const dispose = effect(() => {
+            text.textContent = String(value.get() ?? '');
+        });
+        trackEffect(text, dispose);
+    }
+    return text;
+}
+export function createDOMNode(vnode, providers) {
+    if (vnode.type === Fragment) {
+        const nodes = [];
+        try {
+            for (const child of vnode.children) {
+                const result = createChildNode(child, providers);
+                if (result) {
+                    if (Array.isArray(result))
+                        nodes.push(...result);
+                    else
+                        nodes.push(result);
+                }
+            }
+        }
+        catch (e) {
+            for (const n of nodes)
+                disposeSubtreeEffects(n);
+            throw e;
+        }
+        return nodes;
+    }
+    const el = document.createElement(vnode.type);
+    applyProps(el, vnode.props);
+    if (vnode.props?.ref && typeof vnode.props.ref === 'function') {
+        vnode.props.ref(el);
+    }
+    try {
+        for (const child of vnode.children) {
+            const result = createChildNode(child, providers);
+            if (result) {
+                if (Array.isArray(result)) {
+                    result.forEach((n) => el.appendChild(n));
+                }
+                else {
+                    el.appendChild(result);
+                }
+            }
+        }
+    }
+    catch (e) {
+        disposeSubtreeEffects(el);
+        if (el.parentNode)
+            el.parentNode.removeChild(el);
+        throw e;
+    }
+    return el;
+}
+function mountPortal(vnode, providers) {
+    const comp = vnode.type;
+    const target = comp.__portalTarget;
+    const anchor = document.createComment('portal');
+    const lifecycle = createLifecycleContext();
+    const prevLifecycle = setCurrentLifecycle(lifecycle);
+    const prevProviders = setContextProviders(providers);
+    const mountedNodes = [];
+    try {
+        for (const child of vnode.children) {
+            const result = createChildNode(child, providers);
+            if (result) {
+                if (Array.isArray(result))
+                    mountedNodes.push(...result);
+                else
+                    mountedNodes.push(result);
+            }
+        }
+        lifecycle.runHook('mount');
+    }
+    finally {
+        setCurrentLifecycle(prevLifecycle);
+        setContextProviders(prevProviders);
+    }
+    if (target && mountedNodes.length > 0) {
+        const frag = document.createDocumentFragment();
+        for (const n of mountedNodes)
+            frag.appendChild(n);
+        target.appendChild(frag);
+    }
+    trackEffect(anchor, () => {
+        const nodes = getPortalNodes(anchor) ?? [];
+        for (const n of nodes) {
+            if (n.parentNode)
+                n.parentNode.removeChild(n);
+        }
+        runNodeUnmountLifecycles(anchor);
+    });
+    pushNodeLifecycle(anchor, lifecycle);
+    setPortalData(anchor, mountedNodes, target);
+    return anchor;
+}
+function createChildNode(child, providers) {
+    if (child == null || child === false)
+        return null;
+    if (typeof child === 'string' || typeof child === 'number' || typeof child === 'boolean') {
+        return document.createTextNode(String(child));
+    }
+    if (isSignalValue(child)) {
+        const text = document.createTextNode(String(child.get() ?? ''));
+        const dispose = effect(() => {
+            text.textContent = String(child.get() ?? '');
+        });
+        trackEffect(text, dispose);
+        return text;
+    }
+    const vnode = child;
+    if (typeof vnode.type === 'function') {
+        const comp = vnode.type;
+        if (comp.__isProvider) {
+            const childProviders = (providers ?? []).concat([{
+                    context: comp.__context,
+                    value: comp.__value,
+                }]);
+            const nodes = [];
+            for (const childVNode of vnode.children) {
+                const result = createChildNode(childVNode, childProviders);
+                if (result) {
+                    if (Array.isArray(result))
+                        nodes.push(...result);
+                    else
+                        nodes.push(result);
+                }
+            }
+            return nodes;
+        }
+        if (comp.__isPortal) {
+            return mountPortal(vnode, providers);
+        }
+        const lifecycle = createLifecycleContext();
+        const prevLifecycle = setCurrentLifecycle(lifecycle);
+        const prevProviders = setContextProviders(providers);
+        try {
+            const resolved = resolveVNode(vnode);
+            const node = createDOMNode(resolved, providers);
+            lifecycle.runHook('mount');
+            if (Array.isArray(node)) {
+                for (const n of node) {
+                    pushNodeLifecycle(n, lifecycle);
+                    setNodeResolvedVNode(n, resolved);
+                }
+            }
+            else {
+                pushNodeLifecycle(node, lifecycle);
+                setNodeResolvedVNode(node, resolved);
+            }
+            return node;
+        }
+        finally {
+            setCurrentLifecycle(prevLifecycle);
+            setContextProviders(prevProviders);
+        }
+    }
+    return createDOMNode(vnode, providers);
+}
+function parseVNode(vnode, providers) {
+    if (typeof vnode.type === 'function') {
+        const comp = vnode.type;
+        if (comp.__isProvider) {
+            const childProviders = (providers ?? []).concat([{
+                    context: comp.__context,
+                    value: comp.__value,
+                }]);
+            const nodes = [];
+            for (const childVNode of vnode.children) {
+                const result = createChildNode(childVNode, childProviders);
+                if (result) {
+                    if (Array.isArray(result))
+                        nodes.push(...result);
+                    else
+                        nodes.push(result);
+                }
+            }
+            if (nodes.length === 0)
+                return null;
+            if (nodes.length === 1)
+                return nodes[0];
+            const frag = document.createDocumentFragment();
+            nodes.forEach((n) => frag.appendChild(n));
+            return frag;
+        }
+        if (comp.__isPortal) {
+            return mountPortal(vnode, providers);
+        }
+        const lifecycle = createLifecycleContext();
+        const prevLifecycle = setCurrentLifecycle(lifecycle);
+        const prevProviders = setContextProviders(providers);
+        try {
+            const resolved = resolveVNode(vnode);
+            const node = createDOMNode(resolved, providers);
+            lifecycle.runHook('mount');
+            if (Array.isArray(node)) {
+                for (const n of node) {
+                    pushNodeLifecycle(n, lifecycle);
+                    setNodeResolvedVNode(n, resolved);
+                }
+            }
+            else {
+                pushNodeLifecycle(node, lifecycle);
+                setNodeResolvedVNode(node, resolved);
+            }
+            return node;
+        }
+        finally {
+            setCurrentLifecycle(prevLifecycle);
+            setContextProviders(prevProviders);
+        }
+    }
+    return createDOMNode(vnode, providers);
+}
+function getVNodeKey(child) {
+    if (typeof child === 'object' && child !== null && 'key' in child) {
+        return child.key;
+    }
+    return undefined;
+}
+function patchChildInPlace(oldNode, oc, nc, providers) {
+    if (typeof oc !== typeof nc) {
+        const node = createChildNodeFromVNodeChild(nc, providers);
+        if (node && oldNode.parentNode) {
+            const parent = oldNode.parentNode;
+            const ref = oldNode.nextSibling;
+            removeNode(oldNode);
+            parent.insertBefore(node, ref);
+        }
+        return;
+    }
+    if (typeof nc === 'string' || typeof nc === 'number' || typeof nc === 'boolean') {
+        if (String(oc) !== String(nc)) {
+            oldNode.textContent = String(nc);
+        }
+        return;
+    }
+    if (isSignalValue(oc) && isSignalValue(nc)) {
+        disposeNodeEffects(oldNode);
+        const dispose = effect(() => {
+            oldNode.textContent = String(nc.get() ?? '');
+        });
+        trackEffect(oldNode, dispose);
+        oldNode.textContent = String(nc.get() ?? '');
+        return;
+    }
+    if (isSignalValue(oc) || isSignalValue(nc)) {
+        const node = createChildNodeFromVNodeChild(nc, providers);
+        if (node && oldNode.parentNode) {
+            const parent = oldNode.parentNode;
+            const ref = oldNode.nextSibling;
+            removeNode(oldNode);
+            parent.insertBefore(node, ref);
+        }
+        return;
+    }
+    patchNode(oldNode, oc, nc, providers);
+}
+function createNodeInsert(parent, child, ref, providers) {
+    const node = createChildNodeFromVNodeChild(child, providers);
+    if (!node)
+        return null;
+    if (Array.isArray(node)) {
+        const frag = document.createDocumentFragment();
+        node.forEach((n) => frag.appendChild(n));
+        parent.insertBefore(frag, ref);
+    }
+    else {
+        parent.insertBefore(node, ref);
+    }
+    return node instanceof Node ? node : ref;
+}
+function buildOldChildRegistry(parent, oldKids) {
+    const keyed = new Map();
+    const unkeyed = [];
+    let domIdx = 0;
+    for (let i = 0; i < oldKids.length; i++) {
+        const oc = oldKids[i];
+        if (!hasChild(oc))
+            continue;
+        const node = parent.childNodes[domIdx];
+        if (!node)
+            continue;
+        domIdx++;
+        const key = getVNodeKey(oc);
+        const entry = { child: oc, node, consumed: false };
+        if (key != null) {
+            if (keyed.has(key)) {
+                console.warn(`[avento] Duplicate key "${key}" found in children. Keys should be unique.`);
+            }
+            keyed.set(key, entry);
+        }
+        else {
+            unkeyed.push(entry);
+        }
+    }
+    return { keyed, unkeyed };
+}
+function reconcileChildren(parent, oldKids, newKids, providers) {
+    const { keyed, unkeyed } = buildOldChildRegistry(parent, oldKids);
+    let unkeyedIdx = 0;
+    let domIdx = 0;
+    for (let i = 0; i < newKids.length; i++) {
+        const nc = newKids[i];
+        if (!hasChild(nc))
+            continue;
+        const ncKey = getVNodeKey(nc);
+        let oldEntry;
+        if (ncKey != null) {
+            oldEntry = keyed.get(ncKey);
+        }
+        if (oldEntry && !oldEntry.consumed) {
+            oldEntry.consumed = true;
+            const currentDomNode = parent.childNodes[domIdx];
+            if (oldEntry.node !== currentDomNode) {
+                parent.insertBefore(oldEntry.node, currentDomNode ?? null);
+            }
+            patchChildInPlace(oldEntry.node, oldEntry.child, nc, providers);
+            domIdx++;
+        }
+        else if (!ncKey && unkeyedIdx < unkeyed.length) {
+            const entry = unkeyed[unkeyedIdx];
+            entry.consumed = true;
+            unkeyedIdx++;
+            const currentDomNode = parent.childNodes[domIdx];
+            if (entry.node !== currentDomNode) {
+                parent.insertBefore(entry.node, currentDomNode ?? null);
+            }
+            patchChildInPlace(entry.node, entry.child, nc, providers);
+            domIdx++;
+        }
+        else {
+            const currentDomNode = parent.childNodes[domIdx];
+            createNodeInsert(parent, nc, currentDomNode ?? null, providers);
+            domIdx++;
+        }
+    }
+    for (const entry of keyed.values()) {
+        if (!entry.consumed)
+            removeNode(entry.node);
+    }
+    for (const entry of unkeyed) {
+        if (!entry.consumed)
+            removeNode(entry.node);
+    }
+}
+function hasChild(child) {
+    return child != null && child !== false;
+}
+function createChildNodeFromVNodeChild(child, providers) {
+    if (child == null || child === false)
+        return null;
+    if (typeof child === 'string' || typeof child === 'number' || typeof child === 'boolean') {
+        return document.createTextNode(String(child));
+    }
+    if (isSignalValue(child)) {
+        const text = document.createTextNode(String(child.get() ?? ''));
+        const dispose = effect(() => {
+            text.textContent = String(child.get() ?? '');
+        });
+        trackEffect(text, dispose);
+        return text;
+    }
+    const result = parseVNode(child, providers);
+    if (Array.isArray(result)) {
+        const frag = document.createDocumentFragment();
+        result.forEach((n) => frag.appendChild(n));
+        return frag;
+    }
+    return result;
+}
+function appendChildToParent(parent, child, providers) {
+    const node = createChildNodeFromVNodeChild(child, providers);
+    if (node)
+        parent.appendChild(node);
+}
+function removeNode(node) {
+    if (!node?.parentNode)
+        return;
+    disposeSubtreeEffects(node);
+    runNodeUnmountLifecycles(node);
+    node.parentNode.removeChild(node);
+}
+function parentNodeForLifecycle(detached, resolved) {
+    if (detached.parentNode)
+        return detached;
+    if (resolved.type === Fragment && resolved.children.length > 0) {
+        const first = resolved.children[0];
+        if (first && typeof first === 'object' && 'type' in first) {
+            return detached;
+        }
+    }
+    return detached;
+}
+function patchNode(existingNode, oldVNode, newVNode, providers) {
+    if (oldVNode.type !== newVNode.type) {
+        const newNode = createChildNodeFromVNodeChild(newVNode, providers);
+        if (newNode) {
+            const parent = existingNode.parentNode;
+            if (parent) {
+                const ref = existingNode.nextSibling;
+                removeNode(existingNode);
+                insertNode(parent, newNode, ref);
+            }
+        }
+        return;
+    }
+    if (newVNode.type === Fragment) {
+        reconcileChildren(existingNode.parentNode, flattenFragments(oldVNode.children), flattenFragments(newVNode.children), providers);
+        return;
+    }
+    if (typeof newVNode.type === 'function') {
+        const comp = newVNode.type;
+        if (comp.__isProvider) {
+            const childProviders = (providers ?? []).concat([{
+                    context: comp.__context,
+                    value: comp.__value,
+                }]);
+            if (existingNode.parentNode) {
+                reconcileChildren(existingNode.parentNode, [oldVNode], [newVNode], childProviders);
+            }
+            return;
+        }
+        if (comp.__isPortal) {
+            const oldPortalNodes = getPortalNodes(existingNode);
+            const target = getPortalTarget(existingNode) ?? null;
+            const lifecycle = createLifecycleContext();
+            const prevLifecycle = setCurrentLifecycle(lifecycle);
+            const prevProviders = setContextProviders(providers);
+            try {
+                const newLifecycle = createLifecycleContext();
+                const prev2 = setCurrentLifecycle(newLifecycle);
+                const newNodes = [];
+                for (const child of newVNode.children) {
+                    const result = createChildNode(child, providers);
+                    if (result) {
+                        if (Array.isArray(result))
+                            newNodes.push(...result);
+                        else
+                            newNodes.push(result);
+                    }
+                }
+                setCurrentLifecycle(prev2);
+                newLifecycle.runHook('update');
+                if (oldPortalNodes) {
+                    for (const n of oldPortalNodes) {
+                        if (n.parentNode)
+                            n.parentNode.removeChild(n);
+                    }
+                }
+                if (target && newNodes.length > 0) {
+                    const frag = document.createDocumentFragment();
+                    for (const n of newNodes)
+                        frag.appendChild(n);
+                    target.appendChild(frag);
+                }
+                runNodeUnmountLifecycles(existingNode);
+                pushNodeLifecycle(existingNode, newLifecycle);
+                setPortalData(existingNode, newNodes, target);
+            }
+            finally {
+                setCurrentLifecycle(prevLifecycle);
+                setContextProviders(prevProviders);
+            }
+            return;
+        }
+        const oldLifecycle = getNodeLifecycle(existingNode);
+        const prevProviders = setContextProviders(providers);
+        try {
+            const oldResolved = getNodeResolvedVNode(existingNode);
+            const newResolved = resolveVNode(newVNode);
+            if (oldResolved &&
+                typeof oldResolved.type === 'string' &&
+                oldResolved.type === newResolved.type) {
+                const prevLifecycle = setCurrentLifecycle(oldLifecycle ?? null);
+                try {
+                    patchNode(existingNode, oldResolved, newResolved, providers);
+                    const hostNode = existingNode.parentNode ? existingNode : parentNodeForLifecycle(existingNode, newResolved);
+                    setNodeResolvedVNode(hostNode, newResolved);
+                    if (oldLifecycle) {
+                        oldLifecycle.runHook('update');
+                    }
+                }
+                finally {
+                    setCurrentLifecycle(prevLifecycle);
+                }
+            }
+            else {
+                const lifecycle = createLifecycleContext();
+                const prevLifecycle = setCurrentLifecycle(lifecycle);
+                try {
+                    const newEl = createDOMNode(newResolved, providers);
+                    lifecycle.runHook('mount');
+                    const parent = existingNode.parentNode;
+                    if (parent) {
+                        const ref = existingNode.nextSibling;
+                        removeNode(existingNode);
+                        insertNode(parent, newEl, ref);
+                    }
+                    if (Array.isArray(newEl)) {
+                        for (const n of newEl) {
+                            pushNodeLifecycle(n, lifecycle);
+                            setNodeResolvedVNode(n, newResolved);
+                        }
+                    }
+                    else {
+                        pushNodeLifecycle(newEl, lifecycle);
+                        setNodeResolvedVNode(newEl, newResolved);
+                    }
+                }
+                finally {
+                    setCurrentLifecycle(prevLifecycle);
+                }
+            }
+        }
+        finally {
+            setContextProviders(prevProviders);
+        }
+        return;
+    }
+    const el = existingNode;
+    if (newVNode.props) {
+        const mergedProps = { ...oldVNode.props, ...newVNode.props };
+        for (const key of Object.keys(mergedProps)) {
+            const oldVal = oldVNode.props?.[key];
+            const newVal = newVNode.props?.[key];
+            if (Object.is(oldVal, newVal))
+                continue;
+            if (newVal == null || newVal === false || newVal === undefined) {
+                disposePropEffect(el, key);
+                if (oldVal != null && oldVal !== false && oldVal !== undefined) {
+                    if (key.startsWith('on')) {
+                        const event = key.slice(2).toLowerCase();
+                        el.removeEventListener(event, oldVal);
+                    }
+                    else if (key !== 'key' && key !== 'dangerouslySetInnerHTML') {
+                        el.removeAttribute(key);
+                    }
+                }
+            }
+            else if (isSignalValue(newVal)) {
+                applySignalProp(el, key, newVal);
+            }
+            else {
+                disposePropEffect(el, key);
+                setDOMProp(el, key, newVal);
+            }
+        }
+    }
+    reconcileChildren(el, oldVNode.children, newVNode.children, providers);
+    const lifecycle = getNodeLifecycle(el);
+    if (lifecycle) {
+        lifecycle.runHook('update');
+    }
+}
+export function mount(vnode, container) {
+    const providers = [];
+    let lastVNode = null;
+    let rootNodes = [];
+    function doFullRender(vnode) {
+        disposeSubtreeEffects(container);
+        container.innerHTML = '';
+        rootNodes = [];
+        const result = parseVNode(vnode, providers);
+        if (Array.isArray(result)) {
+            result.forEach((n) => { container.appendChild(n); rootNodes.push(n); });
+        }
+        else if (result) {
+            container.appendChild(result);
+            rootNodes.push(result);
+        }
+        lastVNode = vnode;
+    }
+    // Perform the initial render immediately so that container.firstElementChild
+    // is available right after mount() returns, before any explicit inst.render() calls.
+    doFullRender(vnode);
+    const instance = {
+        render(vnode) {
+            if (!lastVNode || rootNodes.length === 0) {
+                doFullRender(vnode);
+                return;
+            }
+            const oldType = lastVNode.type;
+            const newType = vnode.type;
+            if (oldType !== newType) {
+                doFullRender(vnode);
+                return;
+            }
+            if (newType === Fragment) {
+                reconcileChildren(container, flattenFragments(lastVNode.children), flattenFragments(vnode.children), providers);
+                rootNodes = [...container.childNodes];
+                lastVNode = vnode;
+                return;
+            }
+            // Same element type — patch in place
+            const root = rootNodes[0];
+            if (root && root.parentNode) {
+                patchNode(root, lastVNode, vnode, providers);
+            }
+            lastVNode = vnode;
+        },
+        hydrate(vnode) {
+            hydrateVNode(vnode, container, providers);
+        },
+        destroy() {
+            disposeSubtreeEffects(container);
+            container.innerHTML = '';
+            lastVNode = null;
+            rootNodes = [];
+        },
+    };
+    return instance;
+}
+//# sourceMappingURL=renderer.js.map