million/dist/million.esm.js

/**
 * Field on DOM node that stores the previous VNode
 */
const OLD_VNODE_FIELD = '__m_old_vnode';

/**
 * Creates an element from a VNode
 * @param {VNode} vnode - VNode to convert to HTMLElement or Text
 * @param {boolean} attachField - Attach OLD_VNODE_FIELD
 * @returns {HTMLElement|Text}
 */
const createElement = (vnode, attachField = true) => {
    if (typeof vnode === 'string')
        return document.createTextNode(vnode);
    const el = document.createElement(vnode.tag);
    if (vnode.props) {
        for (const name of Object.keys(vnode.props)) {
            el[name] = vnode.props[name];
        }
    }
    if (vnode.children) {
        for (let i = 0; i < vnode.children.length; ++i) {
            el.appendChild(createElement(vnode.children[i]));
        }
    }
    if (attachField)
        el[OLD_VNODE_FIELD] = vnode;
    return el;
};

/**
 * Attaches ns props to svg element
 * @param {VElement} vnode - SVG VNode
 * @returns {VElement}
 */
const svg = (vnode) => {
    if (!vnode.props)
        vnode.props = {};
    ns(vnode.tag, vnode.props, vnode.children);
    return vnode;
};
const ns = (tag, props, children) => {
    props.ns = 'http://www.w3.org/2000/svg';
    if (children && tag !== 'foreignObject') {
        children.forEach((child) => {
            if (typeof child === 'string')
                return;
            if (child.props)
                ns(child.tag, child.props, child.children);
        });
    }
};
/**
 * Generates a style string based on a styleObject
 * @param {object} styleObject - Object with styles
 * @returns
 */
const style = (styleObject) => {
    return Object.entries(styleObject)
        .map((style) => style.join(':'))
        .join(';');
};
/**
 * Generates a className string based on a classObject
 * @param {object} classObject - Object with classes paired with boolean values to toggle
 * @returns {string}
 */
const className = (classObject) => {
    return Object.keys(classObject)
        .filter((className) => classObject[className])
        .join(' ');
};
/**
 * Helper method for creating a VNode
 * @param {string} tag - The tagName of an HTMLElement
 * @param {VProps=} props - DOM properties and attributes of an HTMLElement
 * @param {VNode[]=} children - Children of an HTMLElement
 * @param {VFlags=} flag - Compiler flag for VNode
 * @returns {VElement}
 */
const m = (tag, props, children, flag) => {
    let key;
    if (props?.key) {
        key = props.key;
        delete props.key;
    }
    return {
        tag,
        props,
        children,
        key,
        flag,
    };
};

var VFlags;
(function (VFlags) {
    VFlags[VFlags["NO_CHILDREN"] = 0] = "NO_CHILDREN";
    VFlags[VFlags["ONLY_TEXT_CHILDREN"] = 1] = "ONLY_TEXT_CHILDREN";
    VFlags[VFlags["ANY_CHILDREN"] = 2] = "ANY_CHILDREN";
})(VFlags || (VFlags = {}));
var VActions;
(function (VActions) {
    VActions[VActions["INSERT_TOP"] = 0] = "INSERT_TOP";
    VActions[VActions["INSERT_BOTTOM"] = 1] = "INSERT_BOTTOM";
    VActions[VActions["DELETE_TOP"] = 2] = "DELETE_TOP";
    VActions[VActions["DELETE_BOTTOM"] = 3] = "DELETE_BOTTOM";
    VActions[VActions["ANY_ACTION"] = 4] = "ANY_ACTION";
})(VActions || (VActions = {}));

/**
 * Diffs two VNode props and modifies the DOM node based on the necessary changes
 * @param {HTMLElement} el - Target element to be modified
 * @param {VProps} oldProps - Old VNode props
 * @param {VProps} newProps - New VNode props
 */
/* istanbul ignore next */
const patchProps = (el, oldProps, newProps) => {
    const cache = [];
    for (const oldPropName of Object.keys(oldProps)) {
        const newPropValue = newProps[oldPropName];
        if (newPropValue) {
            el[oldPropName] = newPropValue;
            cache.push(oldPropName);
        }
        else {
            el.removeAttribute(oldPropName);
            delete el[oldPropName];
        }
    }
    for (const newPropName of Object.keys(newProps)) {
        if (!cache.includes(newPropName)) {
            el[newPropName] = newProps[newPropName];
        }
    }
};
/**
 * Diffs two VNode children and modifies the DOM node based on the necessary changes
 * @param {HTMLElement} el - Target element to be modified
 * @param {VNode[]} oldVNodeChildren - Old VNode children
 * @param {VNode[]} newVNodeChildren - New VNode children
 */
const patchChildren = (el, oldVNodeChildren, newVNodeChildren) => {
    const childNodes = [...el.childNodes];
    /* istanbul ignore next */
    if (oldVNodeChildren) {
        for (let i = 0; i < oldVNodeChildren.length; ++i) {
            patch(childNodes[i], newVNodeChildren[i], oldVNodeChildren[i]);
        }
    }
    /* istanbul ignore next */
    const slicedNewVNodeChildren = newVNodeChildren.slice(oldVNodeChildren?.length ?? 0);
    for (let i = 0; i < slicedNewVNodeChildren.length; ++i) {
        el.appendChild(createElement(slicedNewVNodeChildren[i], false));
    }
};
const replaceElementWithVNode = (el, newVNode) => {
    if (typeof newVNode === 'string') {
        el.textContent = newVNode;
        return el;
    }
    else {
        const newElement = createElement(newVNode);
        el.replaceWith(newElement);
        return newElement;
    }
};
/**
 * Diffs two VNodes and modifies the DOM node based on the necessary changes
 * @param {HTMLElement|Text} el - Target element to be modified
 * @param {VNode} newVNode - New VNode
 * @param {VNode=} prevVNode - Previous VNode
 * @returns {HTMLElement|Text}
 */
const patch = (el, newVNode, prevVNode) => {
    if (!newVNode) {
        el.remove();
        return el;
    }
    const oldVNode = prevVNode ?? el[OLD_VNODE_FIELD];
    const hasString = typeof oldVNode === 'string' || typeof newVNode === 'string';
    if (hasString && oldVNode !== newVNode)
        return replaceElementWithVNode(el, newVNode);
    if (!hasString) {
        if ((!oldVNode?.key && !newVNode?.key) ||
            oldVNode?.key !== newVNode?.key) {
            if (oldVNode?.tag !== newVNode?.tag &&
                !newVNode.children &&
                !newVNode.props) {
                // newVNode has no props/children is replaced because it is generally
                // faster to create a empty HTMLElement rather than iteratively/recursively
                // remove props/children
                return replaceElementWithVNode(el, newVNode);
            }
            if (oldVNode && !(el instanceof Text)) {
                patchProps(el, oldVNode.props || {}, newVNode.props || {});
                switch (newVNode.flag) {
                    case VFlags.NO_CHILDREN: {
                        el.textContent = '';
                        break;
                    }
                    case VFlags.ONLY_TEXT_CHILDREN: {
                        el.textContent = newVNode.children.join('');
                        break;
                    }
                    default: {
                        const [action, numberOfNodes] = newVNode.action ?? [VActions.ANY_ACTION, 0];
                        switch (action) {
                            case VActions.INSERT_TOP: {
                                for (let i = numberOfNodes - 1; i >= 0; --i) {
                                    el.insertBefore(createElement(newVNode.children[i]), el.firstChild);
                                }
                                break;
                            }
                            case VActions.INSERT_BOTTOM: {
                                for (let i = 0; i < numberOfNodes; i++) {
                                    el.appendChild(createElement(newVNode.children[i]));
                                }
                                break;
                            }
                            case VActions.DELETE_TOP: {
                                for (let i = numberOfNodes - 1; i >= 0; --i) {
                                    el.removeChild(el.firstChild);
                                }
                                break;
                            }
                            case VActions.DELETE_BOTTOM: {
                                for (let i = 0; i < numberOfNodes; i++) {
                                    el.removeChild(el.lastChild);
                                }
                                break;
                            }
                            default: {
                                patchChildren(el, oldVNode.children || [], newVNode.children);
                                break;
                            }
                        }
                        break;
                    }
                }
            }
        }
    }
    if (!prevVNode)
        el[OLD_VNODE_FIELD] = newVNode;
    return el;
};

export { OLD_VNODE_FIELD, className, createElement, m, patch, patchChildren, patchProps, style, svg };