myra/myra.js

/** @license MIT https://github.com/jhdrn/myra/blob/master/LICENSE - Copyright (c) 2016-2021 Jonathan Hedrén */
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.myra = {}));
}(this, (function (exports) { 'use strict';

    /**
     * The renderingContext is used to obtain context varibles from within "hooks".
     */
    var renderingContext;
    function getRenderingContext() {
        return renderingContext;
    }
    /**
     * Renders the component and handles it's "lifecycle" by triggering any effects.
     */
    function renderComponent(parentElement, newVNode, oldVNode, isSvg) {
        var oldNode;
        var newProps = newVNode.props, rendition = newVNode.rendition;
        if (rendition !== undefined) {
            oldNode = rendition.domRef;
        }
        if (renderingContext === undefined) {
            try {
                renderingContext = {
                    vNode: newVNode,
                    isSvg: isSvg,
                    parentElement: parentElement,
                    hookIndex: 0
                };
                var newView = newVNode.view(newProps);
                if (newView._ === 5 /* Memo */) {
                    if (oldVNode !== undefined && newView.compare(newVNode.props, oldVNode.props)) {
                        newVNode.domRef = oldNode;
                        renderingContext = undefined;
                        return;
                    }
                    newView = newView.view(newProps);
                }
                renderingContext = undefined;
                render(parentElement, newView, newVNode.rendition, oldNode, isSvg);
                newVNode.rendition = newView;
                newVNode.domRef = newView.domRef;
                // Trigger synchronous effects (useLayoutEffect)
                triggerEffects(newVNode, parentElement, isSvg, true);
                // Trigger asynchronous effects (useEffect)
                triggerEffects(newVNode, parentElement, isSvg, false);
            }
            catch (err) {
                tryHandleComponentError(parentElement, newVNode, isSvg, err);
            }
        }
    }
    /**
     * Triggers all invokeable effects.
     */
    function triggerEffects(newVNode, parentElement, isSvg, sync) {
        var effects = newVNode.effects;
        if (effects !== undefined) {
            var _loop_1 = function (i) {
                var t = effects[i];
                if (t.invoke) {
                    if (t.sync && sync) {
                        attemptEffectCleanup(t);
                        t.cleanup = t.effect();
                        t.invoke = false;
                    }
                    else if (!sync) {
                        setTimeout(function () {
                            try {
                                attemptEffectCleanup(t);
                                t.cleanup = t.effect();
                            }
                            catch (err) {
                                tryHandleComponentError(parentElement, newVNode, isSvg, err);
                            }
                        }, 0);
                        t.invoke = false;
                    }
                }
            };
            for (var i in effects) {
                _loop_1(i);
            }
        }
    }
    /**
     * Calls the cleanup function if it's set and then removes it from the wrapper
     */
    function attemptEffectCleanup(t) {
        if (t.cleanup !== undefined) {
            try {
                t.cleanup();
            }
            catch (err) {
                console.error('An error occured during effect cleanup: ' + err);
            }
            t.cleanup = undefined;
        }
    }
    /**
     * Calls the error handler (if any) and renders the returned view.
     */
    function tryHandleComponentError(parentElement, vNode, isSvg, err) {
        // Do nothing if the parentElement is not longer connected to the DOM
        if (parentElement.parentNode === null) {
            return;
        }
        if (vNode.errorHandler !== undefined) {
            renderingContext = undefined;
            var oldNode = void 0;
            if (vNode.rendition !== undefined) {
                oldNode = vNode.rendition.domRef;
            }
            var errorView = vNode.errorHandler(err);
            render(parentElement, errorView, vNode.rendition, oldNode, isSvg);
            vNode.rendition = errorView;
            vNode.domRef = errorView.domRef;
        }
        else {
            throw err;
        }
    }
    /**
     * Traverses the virtual node hierarchy and unmounts any components in the
     * hierarchy.
     */
    function findAndUnmountComponentsRec(vNode) {
        if (vNode === undefined) {
            return;
        }
        if (vNode._ === 4 /* Component */) {
            // Attempt to call any "cleanup" function for all effects before unmount.
            var effects = vNode.effects;
            if (effects !== undefined) {
                for (var i in effects) {
                    attemptEffectCleanup(effects[i]);
                }
            }
            findAndUnmountComponentsRec(vNode.rendition);
        }
        else if (vNode._ === 2 /* Element */ || vNode._ === 3 /* Fragment */) {
            for (var _i = 0, _a = vNode.props.children; _i < _a.length; _i++) {
                var c = _a[_i];
                findAndUnmountComponentsRec(c);
            }
        }
    }
    /**
     * Renders the view by traversing the virtual node tree recursively
     */
    function render(parentDomNode, newVNode, oldVNode, existingDomNode, isSvg, action) {
        if (isSvg === void 0) { isSvg = false; }
        if (action === void 0) { action = null; }
        if (action === null) {
            // Decide what action to take
            if (newVNode._ === 3 /* Fragment */ && oldVNode !== undefined && oldVNode._ === 3 /* Fragment */) {
                action = 4 /* UPDATE */;
            }
            else if (oldVNode === undefined || oldVNode.domRef === undefined && oldVNode._ !== 3 /* Fragment */ && oldVNode._ !== 4 /* Component */) {
                action = 1 /* APPEND */;
            }
            else if (oldVNode.domRef !== undefined && existingDomNode === undefined) {
                action = 2 /* INSERT */;
            }
            else if (newVNode._ !== oldVNode._) {
                action = 3 /* REPLACE */;
            }
            else if (newVNode._ === 2 /* Element */ && oldVNode._ === 2 /* Element */ &&
                newVNode.tagName !== oldVNode.tagName) {
                action = 3 /* REPLACE */;
            }
            else if (newVNode._ === 4 /* Component */ && oldVNode._ === 4 /* Component */ &&
                newVNode.view !== oldVNode.view) {
                action = 3 /* REPLACE */;
            }
            else {
                action = 4 /* UPDATE */;
            }
        }
        if (newVNode.tagName === 'svg') {
            isSvg = true;
        }
        switch (action) {
            case 1 /* APPEND */:
            case 2 /* INSERT */:
            case 3 /* REPLACE */:
                renderCreate(parentDomNode, newVNode, oldVNode, existingDomNode, isSvg, action);
                break;
            case 4 /* UPDATE */:
                renderUpdate(parentDomNode, newVNode, oldVNode, existingDomNode, isSvg);
                break;
        }
    }
    /**
     * Creates a new DOM node from a VNode and then renders all it's children.
     */
    function renderCreate(parentDomNode, newVNode, oldVNode, existingDomNode, isSvg, action) {
        if (isSvg === void 0) { isSvg = false; }
        if (action === void 0) { action = undefined; }
        if (newVNode._ === 4 /* Component */) {
            renderComponent(parentDomNode, newVNode, undefined, isSvg);
            var domNode = newVNode.domRef;
            if (domNode !== undefined) {
                if (action === 1 /* APPEND */) {
                    parentDomNode.appendChild(domNode);
                }
                else if (action === 2 /* INSERT */) {
                    parentDomNode.insertBefore(domNode, oldVNode.domRef);
                }
                else if (action === 3 /* REPLACE */) {
                    // If it's a component node or an element node and it should be 
                    // replaced, unmount any components in the tree.
                    if (oldVNode._ === 4 /* Component */ || oldVNode._ === 2 /* Element */ || oldVNode._ === 3 /* Fragment */) {
                        findAndUnmountComponentsRec(oldVNode);
                    }
                    // When using fragments, we can have cases where several "steps" in
                    // the hierarchy is skipped.
                    if (oldVNode.domRef === undefined && (oldVNode._ === 3 /* Fragment */ || oldVNode._ === 4 /* Component */)) {
                        replaceAndRemoveFragmentNodes(parentDomNode, oldVNode, domNode);
                    }
                    else {
                        parentDomNode.replaceChild(domNode, existingDomNode);
                    }
                }
            }
        }
        else if (newVNode._ === 3 /* Fragment */) {
            // Skip creating a node for the fragment, instead render the children
            // directly to the parent DOM node
            for (var _i = 0, _a = newVNode.props.children; _i < _a.length; _i++) {
                var c = _a[_i];
                if (c !== undefined) {
                    render(parentDomNode, c, undefined, undefined, isSvg);
                }
            }
        }
        else if (newVNode._ !== 5 /* Memo */) {
            var newNode = createNode(newVNode, isSvg);
            newVNode.domRef = newNode;
            if (action === 1 /* APPEND */) {
                parentDomNode.appendChild(newNode);
            }
            else if (action === 2 /* INSERT */) {
                parentDomNode.insertBefore(newNode, oldVNode.domRef);
            }
            else { // action === ACTION_REPLACE
                // If it's a component node or an element node and it should be 
                // replaced, unmount any components in the tree.
                if (oldVNode._ === 4 /* Component */ || oldVNode._ === 2 /* Element */ || oldVNode._ === 3 /* Fragment */) {
                    findAndUnmountComponentsRec(oldVNode);
                }
                // When using fragments, we can have cases where several "steps" in
                // the hierarchy is skipped, thus we might need to remove multiple 
                // DOM nodes in addition to replacing one.
                if (oldVNode.domRef === undefined && (oldVNode._ === 3 /* Fragment */ || oldVNode._ === 4 /* Component */)) {
                    var fragmentNode = oldVNode;
                    if (oldVNode._ === 4 /* Component */) {
                        fragmentNode = oldVNode.rendition;
                    }
                    replaceAndRemoveFragmentNodes(parentDomNode, fragmentNode, newNode);
                }
                else {
                    // If it's an element node remove old event listeners before 
                    // replacing the node. 
                    if (oldVNode._ === 2 /* Element */) {
                        for (var attr in oldVNode.props) {
                            if (attr.indexOf('on') === 0) {
                                removeAttr(attr, existingDomNode);
                            }
                        }
                    }
                    parentDomNode.replaceChild(newNode, existingDomNode);
                }
            }
            // If it's an element node set attributes and event listeners
            if (newVNode._ === 2 /* Element */) {
                var props = newVNode.props;
                for (var name_1 in props) {
                    if (name_1 === 'children' || name_1 === 'key') {
                        continue;
                    }
                    else if (name_1 === 'ref') {
                        props[name_1].current = newNode;
                    }
                    var attributeValue = props[name_1];
                    if (attributeValue !== undefined) {
                        setAttr(newNode, name_1, attributeValue);
                    }
                }
                for (var _b = 0, _c = props.children; _b < _c.length; _b++) {
                    var c = _c[_b];
                    if (c !== undefined) {
                        render(newNode, c, undefined, undefined, isSvg);
                    }
                }
            }
        }
    }
    /**
     * Finds fragment child nodes, replaces the first one with newNode and removes
     * the rest.
     */
    function replaceAndRemoveFragmentNodes(parentDomNode, fragmentVNode, newNode) {
        var childNodes = getFragmentChildDomNodesRec(fragmentVNode);
        for (var i = 0; i < childNodes.length; i++) {
            var child = childNodes[i];
            if (i === 0) {
                parentDomNode.replaceChild(newNode, child);
            }
            else {
                parentDomNode.removeChild(child);
            }
        }
    }
    /**
     * Updates a DOM not from a new VNode.
     */
    function renderUpdate(parentDomNode, newVNode, oldVNode, existingDomNode, isSvg) {
        // if (!nodesEqual(oldVNode.node, existingDomNode)) {
        //     TODO: "debug mode" with warnings?
        //     console.error('The view is not matching the DOM. Are outside forces tampering with it?')
        // }
        if (isSvg === void 0) { isSvg = false; }
        // update existing node
        switch (newVNode._) {
            case 2 /* Element */:
                updateElementAttributes(newVNode, oldVNode, existingDomNode);
                updateElementVNode(newVNode, oldVNode, existingDomNode, isSvg);
                break;
            case 1 /* Text */:
                if (existingDomNode.textContent !== newVNode.value) {
                    existingDomNode.textContent = newVNode.value;
                }
                break;
            case 4 /* Component */:
                newVNode.rendition = oldVNode.rendition;
                newVNode.data = oldVNode.data;
                newVNode.effects = oldVNode.effects;
                newVNode.errorHandler = oldVNode.errorHandler;
                newVNode.link = oldVNode.link;
                newVNode.link.vNode = newVNode;
                renderComponent(parentDomNode, newVNode, oldVNode, isSvg);
                break;
            case 3 /* Fragment */:
                updateElementVNode(newVNode, oldVNode, parentDomNode, // Fragments doesn´t reference any DOM node, instead pass the parent
                isSvg);
                break;
        }
        if (newVNode.domRef === undefined) {
            // add a reference to the node
            newVNode.domRef = existingDomNode;
        }
        if (newVNode !== oldVNode) {
            // clean up
            oldVNode.domRef = undefined;
        }
    }
    /**
     * Creates a DOM Node from a (non component or fragment) VNode.
     */
    function createNode(vNode, isSvg) {
        switch (vNode._) {
            case 2 /* Element */:
                if (isSvg) {
                    return document.createElementNS('http://www.w3.org/2000/svg', vNode.tagName);
                }
                return document.createElement(vNode.tagName);
            case 1 /* Text */:
                return document.createTextNode(vNode.value);
            case 0 /* Nothing */:
                return document.createComment('Nothing');
        }
    }
    /**
     * Updates an existing HTMLElement DOM node from a new VNode.
     */
    function updateElementVNode(newVNode, oldVNode, existingDomNode, isSvg) {
        var _a;
        if (isSvg === void 0) { isSvg = false; }
        var newChildVNodes = newVNode.props.children;
        var oldChildVNodes = oldVNode.props.children;
        var diffNoOfChildNodes = oldChildVNodes.length - newChildVNodes.length;
        if (newChildVNodes.length > 0) {
            // Create a map holding references to all the old child 
            // VNodes indexed by key
            var keyMap = {};
            // Node "pool" for reuse
            var unkeyedNodes = [];
            // Prepare the map with the keys from the new nodes
            for (var i = 0; i < newChildVNodes.length; i++) {
                var newChildVNode = newChildVNodes[i];
                var props = newChildVNode.props;
                if (props !== undefined && props !== null && props.key !== undefined) {
                    keyMap[props.key] = undefined;
                }
            }
            // Go through the old child VNodes to see if there are any old ones matching the new VNodes
            var matchingKeyedNodes = false;
            for (var i = 0; i < oldChildVNodes.length; i++) {
                var oldChildVNode = oldChildVNodes[i];
                var props = oldChildVNode.props;
                if (props !== undefined && props !== null && props.key !== undefined) {
                    // If the key has been added (from a new VNode), update it's value
                    if (props.key in keyMap) {
                        keyMap[props.key] = [oldChildVNode, oldChildVNode.domRef];
                        matchingKeyedNodes = true;
                    }
                    // else save the DOM node for reuse or removal
                    else if (existingDomNode.contains(oldChildVNode.domRef)) {
                        unkeyedNodes.push(oldChildVNode.domRef);
                    }
                }
            }
            // If there was no matching keyed nodes, remove all old 
            // DOM nodes
            if (!matchingKeyedNodes && Object.keys(keyMap).length > 0) {
                existingDomNode.innerHTML = '';
                unkeyedNodes.length = 0;
                for (var i = newChildVNodes.length + diffNoOfChildNodes - 1; i > -1; i--) {
                    var oldChildVNode = oldChildVNodes[i];
                    oldChildVNode.domRef = undefined;
                    // Make sure any sub-components are "unmounted"
                    findAndUnmountComponentsRec(oldChildVNode);
                }
            }
            var domNodeAtIndex = existingDomNode.firstChild;
            var nextDomNode = null;
            // Start iterating over the new nodes and render them
            for (var i = 0; i < newChildVNodes.length; i++) {
                var newChildVNode = newChildVNodes[i];
                var oldChildVNode = oldChildVNodes[i];
                var matchingChildDomNode = void 0;
                var childAction = void 0;
                if (domNodeAtIndex !== null) {
                    nextDomNode = domNodeAtIndex.nextSibling;
                }
                // If there is an old VNode, it's DOM ref should be
                // treated as the current/matching DOM node
                if (oldChildVNode !== undefined) {
                    matchingChildDomNode = oldChildVNode.domRef;
                }
                var newProps = newChildVNode.props;
                // Check if the new VNode is "keyed"
                if (newProps !== undefined
                    && oldChildVNodes.length > 0) {
                    var newChildVNodeKey = newProps.key;
                    if (newChildVNodeKey !== undefined) {
                        // Fetch the old keyed item from the key map
                        var keyMapEntry = keyMap[newChildVNodeKey];
                        // If there was no old matching key, reuse an old unkeyed node
                        if (keyMapEntry === undefined) {
                            matchingChildDomNode = unkeyedNodes.shift();
                            if (matchingChildDomNode !== undefined) {
                                // Make sure that the DOM node will be
                                // recreated when rendered
                                childAction = 3 /* REPLACE */;
                            }
                        }
                        // If there was a matching key, use the old vNodes dom ref
                        else {
                            oldChildVNode = keyMapEntry[0], matchingChildDomNode = keyMapEntry[1];
                        }
                        // Move the matching dom node to it's new position
                        if (matchingChildDomNode !== undefined && matchingChildDomNode !== domNodeAtIndex) {
                            // If there is no DOM node at the current index, 
                            // the matching DOM node should be appended.
                            if (domNodeAtIndex === null) {
                                existingDomNode.appendChild(matchingChildDomNode);
                            }
                            // Move the node by replacing the node at the current index
                            else if (existingDomNode.contains(matchingChildDomNode)) {
                                existingDomNode.replaceChild(matchingChildDomNode, domNodeAtIndex);
                                nextDomNode = matchingChildDomNode.nextSibling;
                            }
                            else {
                                existingDomNode.insertBefore(matchingChildDomNode, domNodeAtIndex);
                            }
                        }
                    }
                }
                render(existingDomNode, newChildVNode, oldChildVNode, matchingChildDomNode, isSvg, childAction);
                domNodeAtIndex = nextDomNode;
            }
        }
        if (diffNoOfChildNodes > 0) {
            // Remove old unused DOM nodes backwards from the end
            for (var i = newChildVNodes.length + diffNoOfChildNodes - 1; i > newChildVNodes.length - 1; i--) {
                var oldChildVNode = oldChildVNodes[i];
                // Make sure any sub-components are "unmounted"
                findAndUnmountComponentsRec(oldChildVNode);
                if (oldChildVNode._ === 3 /* Fragment */) {
                    removeFragmentChildNodes(oldChildVNode, existingDomNode);
                }
                else if (oldChildVNode._ === 4 /* Component */ && ((_a = oldChildVNode.rendition) === null || _a === void 0 ? void 0 : _a._) === 3 /* Fragment */) {
                    removeFragmentChildNodes(oldChildVNode.rendition, existingDomNode);
                }
                else {
                    var oldChildDomNode = oldChildVNode.domRef;
                    if (oldChildDomNode !== undefined && existingDomNode.contains(oldChildDomNode)) {
                        existingDomNode.removeChild(oldChildDomNode);
                    }
                }
            }
        }
    }
    /**
     * Removes any Fragment child DOM nodes from parentDomElement
     */
    function removeFragmentChildNodes(fragmentNode, parentDomElement) {
        var childNodes = getFragmentChildDomNodesRec(fragmentNode);
        for (var _i = 0, childNodes_1 = childNodes; _i < childNodes_1.length; _i++) {
            var c = childNodes_1[_i];
            parentDomElement.removeChild(c);
        }
    }
    /**
     * Recursively traverses the vNode tree and removes any Fragment child DOM nodes
     * from domElement
     */
    function getFragmentChildDomNodesRec(fragmentNode, parentDomElement) {
        var _a;
        var nodes = [];
        for (var _i = 0, _b = fragmentNode.props.children; _i < _b.length; _i++) {
            var fragmentChild = _b[_i];
            if (fragmentChild._ === 3 /* Fragment */) {
                nodes.push.apply(nodes, getFragmentChildDomNodesRec(fragmentChild));
            }
            else if (fragmentChild._ === 4 /* Component */ && ((_a = fragmentChild.rendition) === null || _a === void 0 ? void 0 : _a._) === 3 /* Fragment */) {
                nodes.push.apply(nodes, getFragmentChildDomNodesRec(fragmentChild.rendition));
            }
            var childNode = fragmentChild.domRef;
            if (childNode !== undefined) {
                nodes.push(childNode);
            }
        }
        return nodes;
    }
    /**
     * Sets an attribute or event listener on an HTMLElement.
     */
    function setAttr(element, attributeName, attributeValue) {
        // The the "value" attribute shoud be set explicitly (and only if it has 
        // changed) to prevent jumping cursors in some browsers (Safari)
        if (attributeName === 'value' && (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT')) {
            if (element.value !== attributeValue) {
                element.value = attributeValue;
            }
        }
        else if (attributeName in element) {
            try {
                element[attributeName] = attributeValue;
                return;
            }
            catch (_) {
                /** Ignore and use setAttribute instead  */
            }
        }
        var attrValueType = typeof attributeValue;
        if (attrValueType !== 'function' && attrValueType !== 'object') {
            element.setAttribute(attributeName, attributeValue);
        }
    }
    /**
     * Removes an attribute or event listener from an HTMLElement.
     */
    function removeAttr(a, node) {
        if (a.indexOf('on') === 0) {
            node[a] = null;
        }
        else if (node.hasAttribute(a)) {
            node.removeAttribute(a);
        }
    }
    /**
     * Sets/removes attributes on an DOM element node
     */
    function updateElementAttributes(newVNode, oldVNode, existingDomNode) {
        var newProps = newVNode.props;
        var oldProps = oldVNode.props;
        // remove any attributes that was added with the old virtual node but does 
        // not exist in the new virtual node or should be removed anyways (event listeners).
        for (var attributeName in oldProps) {
            if (attributeName === 'children' || attributeName === 'key' || attributeName === 'ref') {
                continue;
            }
            if (newProps[attributeName] === undefined || attributeName.indexOf('on') === 0) {
                removeAttr(attributeName, existingDomNode);
            }
        }
        var attributeValue;
        var oldAttributeValue;
        var hasAttr;
        // update any attribute where the attribute value has changed
        for (var name_2 in newProps) {
            if (name_2 === 'children' || name_2 === 'key') {
                continue;
            }
            else if (name_2 === 'ref') {
                newProps[name_2].current = existingDomNode;
                continue;
            }
            attributeValue = newProps[name_2];
            hasAttr = existingDomNode.hasAttribute(name_2);
            // We need to check the actual DOM value of the "value" property
            // otherwise it may not be updated if the new prop value equals the old 
            // prop value
            if (name_2 === 'value' && name_2 in existingDomNode) {
                oldAttributeValue = existingDomNode.value;
            }
            else {
                oldAttributeValue = oldProps[name_2];
            }
            if ((name_2.indexOf('on') === 0 || attributeValue !== oldAttributeValue ||
                !hasAttr) && attributeValue !== undefined) {
                setAttr(existingDomNode, name_2, attributeValue);
            }
            else if (attributeValue === undefined && hasAttr) {
                existingDomNode.removeAttribute(name_2);
            }
        }
    }

    function Fragment(props) {
        var _a;
        return {
            _: 3 /* Fragment */,
            props: {
                children: (_a = props.children) !== null && _a !== void 0 ? _a : [],
                key: props.key
            }
        };
    }

    function flattenChildren(children) {
        var flattenedChildren = [];
        for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
            var child = children_1[_i];
            if (child === null || child === undefined || typeof child === 'boolean') {
                flattenedChildren.push({ _: 0 /* Nothing */ });
            }
            else if (Array.isArray(child)) {
                for (var _a = 0, _b = flattenChildren(child); _a < _b.length; _a++) {
                    var c = _b[_a];
                    flattenedChildren.push(c);
                }
            }
            else if (child._ === undefined) {
                // Any node which is not a vNode will be converted to a TextVNode
                flattenedChildren.push({
                    _: 1 /* Text */,
                    value: child
                });
            }
            else {
                flattenedChildren.push(child);
            }
        }
        return flattenedChildren;
    }
    /**
     * Creates a JSX.Element/VNode from a JSX tag.
     */
    function h(tagNameOrComponent, props) {
        var children = [];
        for (var _i = 2; _i < arguments.length; _i++) {
            children[_i - 2] = arguments[_i];
        }
        if (tagNameOrComponent === 'nothing' ||
            tagNameOrComponent === undefined ||
            tagNameOrComponent === null ||
            typeof tagNameOrComponent === 'boolean') {
            return { _: 0 /* Nothing */ };
        }
        if (props === null) {
            props = {};
        }
        props.children = flattenChildren(children);
        if (typeof tagNameOrComponent === 'string') {
            return {
                _: 2 /* Element */,
                tagName: tagNameOrComponent,
                props: props
            };
        }
        else if (tagNameOrComponent === Fragment) {
            return tagNameOrComponent(props);
        }
        var vNode = {
            _: 4 /* Component */,
            debounceRender: false,
            props: props,
            view: tagNameOrComponent
        };
        vNode.link = {
            vNode: vNode
        };
        return vNode;
    }

    /**
     * Better "typeof" which identifies arrays.
     */
    function typeOf(obj) {
        var objType = typeof obj;
        if (objType === 'string' || objType === 'number' || objType === 'boolean' || objType === 'function') {
            return objType;
        }
        if (obj === undefined) {
            return 'undefined';
        }
        if (obj === null) {
            return 'null';
        }
        return ({}).toString.call(obj).slice(8, -1).toLowerCase();
    }
    var basicEqualityTypes = ['string', 'number', 'boolean', 'undefined', 'null', 'function'];
    /**
     * Does a deep equality check.
     */
    function equal(a, b) {
        var typeOfA = typeOf(a);
        var typeOfB = typeOf(b);
        if (basicEqualityTypes.indexOf(typeOfA) >= 0) {
            return a === b;
        }
        else if (typeOfA === 'object' && typeOfB === 'object') {
            if (a === b) {
                return true;
            }
            if (Object.keys(a).length !== Object.keys(b).length) {
                return false;
            }
            for (var k in a) {
                if (a.hasOwnProperty(k)) {
                    if (!equal(a[k], b[k])) {
                        return false;
                    }
                }
            }
            return true;
        }
        else if (typeOfA === 'array' && typeOfB === 'array') {
            if (a === b) {
                return true;
            }
            if (a.length !== b.length) {
                return false;
            }
            for (var i in a) {
                if (!equal(a[i], b[i])) {
                    return false;
                }
            }
            return true;
        }
        else if (typeOfA === 'date' && typeOfB === 'date') {
            return a.getTime() === b.getTime();
        }
        else if (typeOfA === 'regexp' && typeOfB === 'regexp') {
            return a.toString() === b.toString();
        }
        else if (typeOfA === typeOfB) {
            return a === b;
        }
        return false;
    }

    /**
     *
     * @param initialState the initial state
     */
    function useState(initialState) {
        var renderingContext = getRenderingContext();
        var _a = renderingContext, hookIndex = _a.hookIndex, isSvg = _a.isSvg, parentElement = _a.parentElement, vNode = _a.vNode;
        if (vNode.data === undefined) {
            vNode.data = [];
        }
        if (vNode.data[hookIndex] === undefined) {
            var link_1 = vNode.link;
            var evolve_1 = function (update) {
                var currentVNode = link_1.vNode;
                try {
                    if (typeof update === 'function') {
                        update = update(currentVNode.data[hookIndex][0]);
                    }
                    currentVNode.data[hookIndex] = [update, evolve_1];
                    if (!currentVNode.debounceRender) {
                        requestAnimationFrame(function () {
                            link_1.vNode.debounceRender = false;
                            renderComponent(parentElement, link_1.vNode, undefined, isSvg);
                        });
                    }
                    currentVNode.debounceRender = true;
                }
                catch (err) {
                    requestAnimationFrame(function () {
                        tryHandleComponentError(parentElement, currentVNode, isSvg, err);
                    });
                }
                return currentVNode.data[hookIndex][0];
            };
            if (typeof initialState === 'function') {
                initialState = initialState();
            }
            vNode.data[hookIndex] = [initialState, evolve_1];
        }
        var state = vNode.data[hookIndex];
        renderingContext.hookIndex++;
        return state;
    }
    /**
     *
     * @param current an optional value
     */
    function useRef(current) {
        var renderingContext = getRenderingContext();
        var _a = renderingContext, hookIndex = _a.hookIndex, vNode = _a.vNode;
        if (vNode.data === undefined) {
            vNode.data = [];
        }
        if (vNode.data[hookIndex] === undefined) {
            var link_2 = vNode.link;
            vNode.data[hookIndex] = {
                current: current,
                get node() {
                    return link_2.vNode.domRef;
                }
            };
        }
        renderingContext.hookIndex++;
        return vNode.data[hookIndex];
    }
    /**
     *
     * @param handler
     */
    function useErrorHandler(handler) {
        var renderingContext = getRenderingContext();
        var vNode = renderingContext.vNode;
        vNode.errorHandler = handler;
    }
    /**
     *
     * @param effect
     * @param arg
     */
    function useLayoutEffect(effect, arg) {
        useEffectInternal(true, effect, arg);
    }
    /**
     *
     * @param effect
     * @param arg
     */
    function useEffect(effect, arg) {
        useEffectInternal(false, effect, arg);
    }
    function useEffectInternal(sync, effect, arg) {
        var renderingContext = getRenderingContext();
        var _a = renderingContext, hookIndex = _a.hookIndex, vNode = _a.vNode;
        if (vNode.effects === undefined) {
            vNode.effects = [];
        }
        var t = vNode.effects[hookIndex];
        if (t === undefined) {
            vNode.effects[hookIndex] = {
                arg: arg,
                sync: sync,
                invoke: true,
                effect: effect,
            };
        }
        else if (arg === undefined || !equal(t.arg, arg)) {
            t.arg = arg;
            t.effect = effect;
            t.invoke = true;
        }
        renderingContext.hookIndex++;
    }
    /**
     *
     * @param fn
     * @param inputs
     */
    function useMemo(fn, inputs) {
        var renderingContext = getRenderingContext();
        var _a = renderingContext, hookIndex = _a.hookIndex, vNode = _a.vNode;
        if (vNode.data === undefined) {
            vNode.data = [];
        }
        var res;
        if (vNode.data[hookIndex] === undefined) {
            res = fn(inputs);
            vNode.data[hookIndex] = [res, inputs];
        }
        else {
            var _b = vNode.data[hookIndex], prevRes = _b[0], prevInputs = _b[1];
            if (equal(prevInputs, inputs)) {
                res = prevRes;
            }
            else {
                res = fn(inputs);
                vNode.data[hookIndex] = [res, inputs];
            }
        }
        renderingContext.hookIndex++;
        return res;
    }

    function shallowCompareProps(newProps, oldProps) {
        var newPropsKeys = Object.keys(newProps);
        if (newPropsKeys.length !== Object.keys(oldProps).length) {
            return false;
        }
        for (var _i = 0, newPropsKeys_1 = newPropsKeys; _i < newPropsKeys_1.length; _i++) {
            var k = newPropsKeys_1[_i];
            if (k === 'children') {
                continue;
            }
            if (newProps[k] !== oldProps[k]) {
                return false;
            }
        }
        return true;
    }
    /**
     * Memoizes a component view, preventing unnecessary renders.
     *
     * If no custom compare function is supplied, a shallow comparison of the props'
     * properties will decide whether the component will be rerendered or not.
     *
     * @param factory A component factory function
     * @param compare An optional props equality comparer function. If true is
     *                returned the memoized view will be kept, otherwise the view
     *                will be rerendered.
     */
    function memo(factory, compare) {
        return function (props) {
            return {
                _: 5 /* Memo */,
                compare: compare || shallowCompareProps,
                view: factory,
                props: props
            };
        };
    }

    /**
     * Convenience function for type hinting
     *
     * @param fn
     */
    function define(fn) {
        return fn;
    }
    /**
     * Mounts a virtual DOM node onto the supplied element.
     */
    function mount(vNode, element) {
        requestAnimationFrame(function () {
            render(element, vNode, undefined, undefined);
        });
    }

    exports.Fragment = Fragment;
    exports.define = define;
    exports.equal = equal;
    exports.h = h;
    exports.memo = memo;
    exports.mount = mount;
    exports.typeOf = typeOf;
    exports.useEffect = useEffect;
    exports.useErrorHandler = useErrorHandler;
    exports.useLayoutEffect = useLayoutEffect;
    exports.useMemo = useMemo;
    exports.useRef = useRef;
    exports.useState = useState;

    Object.defineProperty(exports, '__esModule', { value: true });

})));