maquette 3.5.3 → 4.0.0

package/dist/projection.js

@@ -1,540 +1,558 @@
-var NAMESPACE_W3 = "http://www.w3.org/";
-var NAMESPACE_SVG = "".concat(NAMESPACE_W3, "2000/svg");
-var NAMESPACE_XLINK = "".concat(NAMESPACE_W3, "1999/xlink");
-var emptyArray = [];
-export var extend = function (base, overrides) {
-    var result = {};
-    Object.keys(base).forEach(function (key) {
-        result[key] = base[key];
-    });
-    if (overrides) {
-        Object.keys(overrides).forEach(function (key) {
-            result[key] = overrides[key];
-        });
-    }
-    return result;
-};
-var same = function (vnode1, vnode2) {
-    if (vnode1.vnodeSelector !== vnode2.vnodeSelector) {
-        return false;
-    }
-    if (vnode1.properties && vnode2.properties) {
-        if (vnode1.properties.key !== vnode2.properties.key) {
-            return false;
-        }
-        return vnode1.properties.bind === vnode2.properties.bind;
-    }
-    return !vnode1.properties && !vnode2.properties;
-};
-var checkStyleValue = function (styleValue) {
-    if (typeof styleValue !== "string") {
-        throw new Error("Style values must be strings");
-    }
-};
-var findIndexOfChild = function (children, sameAs, start) {
-    if (sameAs.vnodeSelector !== "") {
-        // Never scan for text-nodes
-        for (var i = start; i < children.length; i++) {
-            if (same(children[i], sameAs)) {
-                return i;
-            }
-        }
-    }
-    return -1;
-};
-var checkDistinguishable = function (childNodes, indexToCheck, parentVNode, operation) {
-    var childNode = childNodes[indexToCheck];
-    if (childNode.vnodeSelector === "") {
-        return; // Text nodes need not be distinguishable
-    }
-    var properties = childNode.properties;
-    var key = properties
-        ? properties.key === undefined
-            ? properties.bind
-            : properties.key
-        : undefined;
-    if (!key) {
-        // A key is just assumed to be unique
-        for (var i = 0; i < childNodes.length; i++) {
-            if (i !== indexToCheck) {
-                var node = childNodes[i];
-                if (same(node, childNode)) {
-                    throw {
-                        error: new Error("".concat(parentVNode.vnodeSelector, " had a ").concat(childNode.vnodeSelector, " child ").concat(operation === "added" ? operation : "removed", ", but there is now more than one. You must add unique key properties to make them distinguishable.")),
-                        parentNode: parentVNode,
-                        childNode: childNode,
-                    };
-                }
-            }
-        }
-    }
-};
-var nodeAdded = function (vNode) {
-    if (vNode.properties) {
-        var enterAnimation = vNode.properties.enterAnimation;
-        if (enterAnimation) {
-            enterAnimation(vNode.domNode, vNode.properties);
-        }
-    }
-};
-var removedNodes = [];
-var requestedIdleCallback = false;
-var visitRemovedNode = function (node) {
-    (node.children || []).forEach(visitRemovedNode);
-    if (node.properties && node.properties.afterRemoved) {
-        node.properties.afterRemoved.apply(node.properties.bind || node.properties, [
-            node.domNode,
-        ]);
-    }
-};
-var processPendingNodeRemovals = function () {
-    requestedIdleCallback = false;
-    removedNodes.forEach(visitRemovedNode);
-    removedNodes.length = 0;
-};
-var scheduleNodeRemoval = function (vNode) {
-    removedNodes.push(vNode);
-    if (!requestedIdleCallback) {
-        requestedIdleCallback = true;
-        if (typeof window !== "undefined" && "requestIdleCallback" in window) {
-            window.requestIdleCallback(processPendingNodeRemovals, { timeout: 16 });
-        }
-        else {
-            setTimeout(processPendingNodeRemovals, 16);
-        }
-    }
-};
-var nodeToRemove = function (vNode) {
-    var domNode = vNode.domNode;
-    if (vNode.properties) {
-        var exitAnimation = vNode.properties.exitAnimation;
-        if (exitAnimation) {
-            domNode.style.pointerEvents = "none";
-            var removeDomNode = function () {
-                if (domNode.parentNode) {
-                    domNode.parentNode.removeChild(domNode);
-                    scheduleNodeRemoval(vNode);
-                }
-            };
-            exitAnimation(domNode, removeDomNode, vNode.properties);
-            return;
-        }
-    }
-    if (domNode.parentNode) {
-        domNode.parentNode.removeChild(domNode);
-        scheduleNodeRemoval(vNode);
-    }
-};
-var setProperties = function (domNode, properties, projectionOptions) {
-    if (!properties) {
-        return;
-    }
-    var eventHandlerInterceptor = projectionOptions.eventHandlerInterceptor;
-    var propNames = Object.keys(properties);
-    var propCount = propNames.length;
-    var _loop_1 = function (i) {
-        var propName = propNames[i];
-        var propValue = properties[propName];
-        if (propName === "className") {
-            throw new Error('Property "className" is not supported, use "class".');
-        }
-        else if (propName === "class") {
-            toggleClasses(domNode, propValue, true);
-        }
-        else if (propName === "classes") {
-            // object with string keys and boolean values
-            var classNames = Object.keys(propValue);
-            var classNameCount = classNames.length;
-            for (var j = 0; j < classNameCount; j++) {
-                var className = classNames[j];
-                if (propValue[className]) {
-                    domNode.classList.add(className);
-                }
-            }
-        }
-        else if (propName === "styles") {
-            // object with string keys and string (!) values
-            var styleNames = Object.keys(propValue);
-            var styleCount = styleNames.length;
-            for (var j = 0; j < styleCount; j++) {
-                var styleName = styleNames[j];
-                var styleValue = propValue[styleName];
-                if (styleValue) {
-                    checkStyleValue(styleValue);
-                    projectionOptions.styleApplyer(domNode, styleName, styleValue);
-                }
-            }
-        }
-        else if (propName !== "key" && propValue !== null && propValue !== undefined) {
-            var type = typeof propValue;
-            if (type === "function") {
-                if (propName.lastIndexOf("on", 0) === 0) {
-                    // lastIndexOf(,0)===0 -> startsWith
-                    if (eventHandlerInterceptor) {
-                        propValue = eventHandlerInterceptor(propName, propValue, domNode, properties); // intercept eventhandlers
-                    }
-                    if (propName === "oninput") {
-                        (function () {
-                            // record the evt.target.value, because IE and Edge sometimes do a requestAnimationFrame between changing value and running oninput
-                            var oldPropValue = propValue;
-                            propValue = function (evt) {
-                                oldPropValue.apply(this, [evt]);
-                                evt.target["oninput-value"] = evt.target.value; // may be HTMLTextAreaElement as well
-                            };
-                        })();
-                    }
-                }
-                domNode[propName] = propValue;
-            }
-            else if (projectionOptions.namespace === NAMESPACE_SVG) {
-                if (propName === "href") {
-                    domNode.setAttributeNS(NAMESPACE_XLINK, propName, propValue);
-                }
-                else {
-                    // all SVG attributes are read-only in DOM, so...
-                    domNode.setAttribute(propName, propValue);
-                }
-            }
-            else if (type === "string" && propName !== "value" && propName !== "innerHTML") {
-                domNode.setAttribute(propName, propValue);
-            }
-            else {
-                domNode[propName] = propValue;
-            }
-        }
-    };
-    for (var i = 0; i < propCount; i++) {
-        _loop_1(i);
-    }
-};
-var addChildren = function (domNode, children, projectionOptions) {
-    if (!children) {
-        return;
-    }
-    for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
-        var child = children_1[_i];
-        createDom(child, domNode, undefined, projectionOptions);
-    }
-};
-export var initPropertiesAndChildren = function (domNode, vnode, projectionOptions) {
-    addChildren(domNode, vnode.children, projectionOptions); // children before properties, needed for value property of <select>.
-    if (vnode.text) {
-        domNode.textContent = vnode.text;
-    }
-    setProperties(domNode, vnode.properties, projectionOptions);
-    if (vnode.properties && vnode.properties.afterCreate) {
-        vnode.properties.afterCreate.apply(vnode.properties.bind || vnode.properties, [
-            domNode,
-            projectionOptions,
-            vnode.vnodeSelector,
-            vnode.properties,
-            vnode.children,
-        ]);
-    }
-};
-export var createDom = function (vnode, parentNode, insertBefore, projectionOptions) {
-    var domNode;
-    var start = 0;
-    var vnodeSelector = vnode.vnodeSelector;
-    var doc = parentNode.ownerDocument;
-    if (vnodeSelector === "") {
-        if (vnode.domNode) {
-            vnode.domNode.nodeValue = vnode.text;
-        }
-        else {
-            domNode = vnode.domNode = doc.createTextNode(vnode.text);
-            if (insertBefore !== undefined) {
-                parentNode.insertBefore(domNode, insertBefore);
-            }
-            else {
-                parentNode.appendChild(domNode);
-            }
-        }
-    }
-    else {
-        for (var i = 0; i <= vnodeSelector.length; ++i) {
-            var c = vnodeSelector.charAt(i);
-            if (i === vnodeSelector.length || c === "." || c === "#") {
-                var type = vnodeSelector.charAt(start - 1);
-                var found = vnodeSelector.slice(start, i);
-                if (type === ".") {
-                    domNode.classList.add(found);
-                }
-                else if (type === "#") {
-                    domNode.id = found;
-                }
-                else {
-                    if (found === "svg") {
-                        projectionOptions = extend(projectionOptions, {
-                            namespace: NAMESPACE_SVG,
-                        });
-                    }
-                    if (projectionOptions.namespace !== undefined) {
-                        domNode = vnode.domNode = doc.createElementNS(projectionOptions.namespace, found);
-                    }
-                    else {
-                        domNode = vnode.domNode = vnode.domNode || doc.createElement(found);
-                        if (found === "input" && vnode.properties && vnode.properties.type !== undefined) {
-                            // IE8 and older don't support setting input type after the DOM Node has been added to the document
-                            domNode.setAttribute("type", vnode.properties.type);
-                        }
-                    }
-                    if (insertBefore !== undefined) {
-                        parentNode.insertBefore(domNode, insertBefore);
-                    }
-                    else if (domNode.parentNode !== parentNode) {
-                        parentNode.appendChild(domNode);
-                    }
-                }
-                start = i + 1;
-            }
-        }
-        initPropertiesAndChildren(domNode, vnode, projectionOptions);
-    }
-};
-var updateDom;
-/**
- * Adds or removes classes from an Element
- * @param domNode the element
- * @param classes a string separated list of classes
- * @param on true means add classes, false means remove
- */
-var toggleClasses = function (domNode, classes, on) {
-    if (!classes) {
-        return;
-    }
-    classes.split(" ").forEach(function (classToToggle) {
-        if (classToToggle) {
-            domNode.classList.toggle(classToToggle, on);
-        }
-    });
-};
-var updateProperties = function (domNode, previousProperties, properties, projectionOptions) {
-    if (!properties) {
-        return;
-    }
-    var propertiesUpdated = false;
-    var propNames = Object.keys(properties);
-    var propCount = propNames.length;
-    for (var i = 0; i < propCount; i++) {
-        var propName = propNames[i];
-        // assuming that properties will be nullified instead of missing is by design
-        var propValue = properties[propName];
-        var previousValue = previousProperties[propName];
-        if (propName === "class") {
-            if (previousValue !== propValue) {
-                toggleClasses(domNode, previousValue, false);
-                toggleClasses(domNode, propValue, true);
-            }
-        }
-        else if (propName === "classes") {
-            var classList = domNode.classList;
-            var classNames = Object.keys(propValue);
-            var classNameCount = classNames.length;
-            for (var j = 0; j < classNameCount; j++) {
-                var className = classNames[j];
-                var on = !!propValue[className];
-                var previousOn = !!previousValue[className];
-                if (on === previousOn) {
-                    continue;
-                }
-                propertiesUpdated = true;
-                if (on) {
-                    classList.add(className);
-                }
-                else {
-                    classList.remove(className);
-                }
-            }
-        }
-        else if (propName === "styles") {
-            var styleNames = Object.keys(propValue);
-            var styleCount = styleNames.length;
-            for (var j = 0; j < styleCount; j++) {
-                var styleName = styleNames[j];
-                var newStyleValue = propValue[styleName];
-                var oldStyleValue = previousValue[styleName];
-                if (newStyleValue === oldStyleValue) {
-                    continue;
-                }
-                propertiesUpdated = true;
-                if (newStyleValue) {
-                    checkStyleValue(newStyleValue);
-                    projectionOptions.styleApplyer(domNode, styleName, newStyleValue);
-                }
-                else {
-                    projectionOptions.styleApplyer(domNode, styleName, "");
-                }
-            }
-        }
-        else {
-            if (!propValue && typeof previousValue === "string") {
-                propValue = "";
-            }
-            if (propName === "value") {
-                // value can be manipulated by the user directly and using event.preventDefault() is not an option
-                var domValue = domNode[propName];
-                if (domValue !== propValue && // The 'value' in the DOM tree !== newValue
-                    (domNode["oninput-value"]
-                        ? domValue === domNode["oninput-value"] // If the last reported value to 'oninput' does not match domValue, do nothing and wait for oninput
-                        : propValue !== previousValue) // Only update the value if the vdom changed
-                ) {
-                    // The edge cases are described in the tests
-                    domNode[propName] = propValue; // Reset the value, even if the virtual DOM did not change
-                    domNode["oninput-value"] = undefined;
-                } // else do not update the domNode, otherwise the cursor position would be changed
-                if (propValue !== previousValue) {
-                    propertiesUpdated = true;
-                }
-            }
-            else if (propValue !== previousValue) {
-                var type = typeof propValue;
-                if (type !== "function" || !projectionOptions.eventHandlerInterceptor) {
-                    // Function updates are expected to be handled by the EventHandlerInterceptor
-                    if (projectionOptions.namespace === NAMESPACE_SVG) {
-                        if (propName === "href") {
-                            domNode.setAttributeNS(NAMESPACE_XLINK, propName, propValue);
-                        }
-                        else {
-                            // all SVG attributes are read-only in DOM, so...
-                            domNode.setAttribute(propName, propValue);
-                        }
-                    }
-                    else if (type === "string" && propName !== "innerHTML") {
-                        if (propName === "role" && propValue === "") {
-                            domNode.removeAttribute(propName);
-                        }
-                        else {
-                            domNode.setAttribute(propName, propValue);
-                        }
-                    }
-                    else if (domNode[propName] !== propValue) {
-                        // Comparison is here for side-effects in Edge with scrollLeft and scrollTop
-                        domNode[propName] = propValue;
-                    }
-                    propertiesUpdated = true;
-                }
-            }
-        }
-    }
-    return propertiesUpdated;
-};
-var updateChildren = function (vnode, domNode, oldChildren, newChildren, projectionOptions) {
-    if (oldChildren === newChildren) {
-        return false;
-    }
-    oldChildren = oldChildren || emptyArray;
-    newChildren = newChildren || emptyArray;
-    var oldChildrenLength = oldChildren.length;
-    var newChildrenLength = newChildren.length;
-    var oldIndex = 0;
-    var newIndex = 0;
-    var i;
-    var textUpdated = false;
-    while (newIndex < newChildrenLength) {
-        var oldChild = oldIndex < oldChildrenLength ? oldChildren[oldIndex] : undefined;
-        var newChild = newChildren[newIndex];
-        if (oldChild !== undefined && same(oldChild, newChild)) {
-            textUpdated = updateDom(oldChild, newChild, projectionOptions) || textUpdated;
-            oldIndex++;
-        }
-        else {
-            var findOldIndex = findIndexOfChild(oldChildren, newChild, oldIndex + 1);
-            if (findOldIndex >= 0) {
-                // Remove preceding missing children
-                for (i = oldIndex; i < findOldIndex; i++) {
-                    nodeToRemove(oldChildren[i]);
-                    checkDistinguishable(oldChildren, i, vnode, "removed");
-                }
-                textUpdated =
-                    updateDom(oldChildren[findOldIndex], newChild, projectionOptions) || textUpdated;
-                oldIndex = findOldIndex + 1;
-            }
-            else {
-                // New child
-                createDom(newChild, domNode, oldIndex < oldChildrenLength ? oldChildren[oldIndex].domNode : undefined, projectionOptions);
-                nodeAdded(newChild);
-                checkDistinguishable(newChildren, newIndex, vnode, "added");
-            }
-        }
-        newIndex++;
-    }
-    if (oldChildrenLength > oldIndex) {
-        // Remove child fragments
-        for (i = oldIndex; i < oldChildrenLength; i++) {
-            nodeToRemove(oldChildren[i]);
-            checkDistinguishable(oldChildren, i, vnode, "removed");
-        }
-    }
-    return textUpdated;
-};
-updateDom = function (previous, vnode, projectionOptions) {
-    var domNode = previous.domNode;
-    var textUpdated = false;
-    if (previous === vnode) {
-        return false; // By contract, VNode objects may not be modified anymore after passing them to maquette
-    }
-    var updated = false;
-    if (vnode.vnodeSelector === "") {
-        if (vnode.text !== previous.text) {
-            var newTextNode = domNode.ownerDocument.createTextNode(vnode.text);
-            domNode.parentNode.replaceChild(newTextNode, domNode);
-            vnode.domNode = newTextNode;
-            textUpdated = true;
-            return textUpdated;
-        }
-        vnode.domNode = domNode;
-    }
-    else {
-        if (vnode.vnodeSelector.lastIndexOf("svg", 0) === 0) {
-            // lastIndexOf(needle,0)===0 means StartsWith
-            projectionOptions = extend(projectionOptions, {
-                namespace: NAMESPACE_SVG,
-            });
-        }
-        if (previous.text !== vnode.text) {
-            updated = true;
-            if (vnode.text === undefined) {
-                domNode.removeChild(domNode.firstChild); // the only textnode presumably
-            }
-            else {
-                domNode.textContent = vnode.text;
-            }
-        }
-        vnode.domNode = domNode;
-        updated =
-            updateChildren(vnode, domNode, previous.children, vnode.children, projectionOptions) ||
-                updated;
-        updated =
-            updateProperties(domNode, previous.properties, vnode.properties, projectionOptions) ||
-                updated;
-        if (vnode.properties && vnode.properties.afterUpdate) {
-            vnode.properties.afterUpdate.apply(vnode.properties.bind || vnode.properties, [
-                domNode,
-                projectionOptions,
-                vnode.vnodeSelector,
-                vnode.properties,
-                vnode.children,
-            ]);
-        }
-    }
-    if (updated && vnode.properties && vnode.properties.updateAnimation) {
-        vnode.properties.updateAnimation(domNode, vnode.properties, previous.properties);
-    }
-    return textUpdated;
-};
-export var createProjection = function (vnode, projectionOptions) {
-    return {
-        getLastRender: function () { return vnode; },
-        update: function (updatedVnode) {
-            if (vnode.vnodeSelector !== updatedVnode.vnodeSelector) {
-                throw new Error("The selector for the root VNode may not be changed. (consider using dom.merge and add one extra level to the virtual DOM)");
-            }
-            var previousVNode = vnode;
-            vnode = updatedVnode;
-            updateDom(previousVNode, updatedVnode, projectionOptions);
-        },
-        domNode: vnode.domNode,
-    };
-};
+var NAMESPACE_W3 = "http://www.w3.org/";
+var NAMESPACE_SVG = "".concat(NAMESPACE_W3, "2000/svg");
+var NAMESPACE_XLINK = "".concat(NAMESPACE_W3, "1999/xlink");
+var emptyArray = [];
+export var extend = function (base, overrides) {
+    var result = {};
+    Object.keys(base).forEach(function (key) {
+        result[key] = base[key];
+    });
+    if (overrides) {
+        Object.keys(overrides).forEach(function (key) {
+            result[key] = overrides[key];
+        });
+    }
+    return result;
+};
+var same = function (vnode1, vnode2) {
+    if (vnode1.vnodeSelector !== vnode2.vnodeSelector) {
+        return false;
+    }
+    if (vnode1.properties && vnode2.properties) {
+        if (vnode1.properties.key !== vnode2.properties.key) {
+            return false;
+        }
+        return vnode1.properties.bind === vnode2.properties.bind;
+    }
+    return !vnode1.properties && !vnode2.properties;
+};
+var checkStyleValue = function (styleValue) {
+    if (typeof styleValue !== "string") {
+        throw new Error("Style values must be strings");
+    }
+};
+var findIndexOfChild = function (children, sameAs, start) {
+    if (sameAs.vnodeSelector !== "") {
+        // Never scan for text-nodes
+        for (var i = start; i < children.length; i++) {
+            if (same(children[i], sameAs)) {
+                return i;
+            }
+        }
+    }
+    return -1;
+};
+var checkDistinguishable = function (childNodes, indexToCheck, parentVNode, operation) {
+    var childNode = childNodes[indexToCheck];
+    if (childNode.vnodeSelector === "") {
+        return; // Text nodes need not be distinguishable
+    }
+    var properties = childNode.properties;
+    var key = properties
+        ? properties.key === undefined
+            ? properties.bind
+            : properties.key
+        : undefined;
+    if (!key) {
+        // A key is just assumed to be unique
+        for (var i = 0; i < childNodes.length; i++) {
+            if (i !== indexToCheck) {
+                var node = childNodes[i];
+                if (same(node, childNode)) {
+                    throw {
+                        error: new Error("".concat(parentVNode.vnodeSelector, " had a ").concat(childNode.vnodeSelector, " child ").concat(operation === "added" ? operation : "removed", ", but there is now more than one. You must add unique key properties to make them distinguishable.")),
+                        parentNode: parentVNode,
+                        childNode: childNode,
+                    };
+                }
+            }
+        }
+    }
+};
+var nodeAdded = function (vNode) {
+    if (vNode.properties) {
+        var enterAnimation = vNode.properties.enterAnimation;
+        if (enterAnimation) {
+            enterAnimation(vNode.domNode, vNode.properties);
+        }
+    }
+};
+var removedNodes = [];
+var requestedIdleCallback = false;
+var visitRemovedNode = function (node) {
+    (node.children || []).forEach(visitRemovedNode);
+    if (node.properties && node.properties.afterRemoved) {
+        node.properties.afterRemoved.apply(node.properties.bind || node.properties, [
+            node.domNode,
+        ]);
+    }
+};
+var processPendingNodeRemovals = function () {
+    requestedIdleCallback = false;
+    removedNodes.forEach(visitRemovedNode);
+    removedNodes.length = 0;
+};
+var scheduleNodeRemoval = function (vNode) {
+    removedNodes.push(vNode);
+    if (!requestedIdleCallback) {
+        requestedIdleCallback = true;
+        if (typeof window !== "undefined" && "requestIdleCallback" in window) {
+            window.requestIdleCallback(processPendingNodeRemovals, { timeout: 16 });
+        }
+        else {
+            setTimeout(processPendingNodeRemovals, 16);
+        }
+    }
+};
+var nodeToRemove = function (vNode) {
+    var domNode = vNode.domNode;
+    if (vNode.properties) {
+        var exitAnimation = vNode.properties.exitAnimation;
+        if (exitAnimation) {
+            domNode.style.pointerEvents = "none";
+            var removeDomNode = function () {
+                if (domNode.parentNode) {
+                    domNode.parentNode.removeChild(domNode);
+                    scheduleNodeRemoval(vNode);
+                }
+            };
+            exitAnimation(domNode, removeDomNode, vNode.properties);
+            return;
+        }
+    }
+    if (domNode.parentNode) {
+        domNode.parentNode.removeChild(domNode);
+        scheduleNodeRemoval(vNode);
+    }
+};
+var setProperties = function (domNode, properties, projectionOptions) {
+    if (!properties) {
+        return;
+    }
+    var eventHandlerInterceptor = projectionOptions.eventHandlerInterceptor;
+    var propNames = Object.keys(properties);
+    var propCount = propNames.length;
+    var _loop_1 = function (i) {
+        var propName = propNames[i];
+        var propValue = properties[propName];
+        if (propName === "className") {
+            throw new Error('Property "className" is not supported, use "class".');
+        }
+        else if (propName === "class") {
+            toggleClasses(domNode, propValue, true);
+        }
+        else if (propName === "classes") {
+            // object with string keys and boolean values
+            var classNames = Object.keys(propValue);
+            var classNameCount = classNames.length;
+            for (var j = 0; j < classNameCount; j++) {
+                var className = classNames[j];
+                if (propValue[className]) {
+                    domNode.classList.add(className);
+                }
+            }
+        }
+        else if (propName === "styles") {
+            // object with string keys and string (!) values
+            var styleNames = Object.keys(propValue);
+            var styleCount = styleNames.length;
+            for (var j = 0; j < styleCount; j++) {
+                var styleName = styleNames[j];
+                var styleValue = propValue[styleName];
+                if (styleValue) {
+                    checkStyleValue(styleValue);
+                    projectionOptions.styleApplyer(domNode, styleName, styleValue);
+                }
+            }
+        }
+        else if (propName === "on" && propValue) {
+            // object with string keys and function values
+            for (var _i = 0, _a = Object.entries(properties.on); _i < _a.length; _i++) {
+                var _b = _a[_i], key = _b[0], handler = _b[1];
+                var listener = typeof handler === "function" ? handler : handler.listener;
+                if (eventHandlerInterceptor) {
+                    listener = eventHandlerInterceptor(key, listener, domNode, properties);
+                }
+                if (listener) {
+                    domNode.addEventListener(key, listener, typeof handler === "function" ? undefined : handler.options);
+                }
+            }
+        }
+        else if (propName !== "key" && propValue !== null && propValue !== undefined) {
+            var type = typeof propValue;
+            if (type === "function") {
+                if (propName.lastIndexOf("on", 0) === 0) {
+                    // lastIndexOf(,0)===0 -> startsWith
+                    if (eventHandlerInterceptor) {
+                        propValue = eventHandlerInterceptor(propName, propValue, domNode, properties); // intercept eventhandlers
+                    }
+                    if (propName === "oninput") {
+                        (function () {
+                            // record the evt.target.value, because IE and Edge sometimes do a requestAnimationFrame between changing value and running oninput
+                            var oldPropValue = propValue;
+                            propValue = function (evt) {
+                                oldPropValue.apply(this, [evt]);
+                                evt.target["oninput-value"] = evt.target.value; // may be HTMLTextAreaElement as well
+                            };
+                        })();
+                    }
+                }
+                domNode[propName] = propValue;
+            }
+            else if (projectionOptions.namespace === NAMESPACE_SVG) {
+                if (propName === "href") {
+                    domNode.setAttributeNS(NAMESPACE_XLINK, propName, propValue);
+                }
+                else {
+                    // all SVG attributes are read-only in DOM, so...
+                    domNode.setAttribute(propName, propValue);
+                }
+            }
+            else if (type === "string" && propName !== "value" && propName !== "innerHTML") {
+                domNode.setAttribute(propName, propValue);
+            }
+            else {
+                domNode[propName] = propValue;
+            }
+        }
+    };
+    for (var i = 0; i < propCount; i++) {
+        _loop_1(i);
+    }
+};
+var addChildren = function (domNode, children, projectionOptions) {
+    if (!children) {
+        return;
+    }
+    for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
+        var child = children_1[_i];
+        createDom(child, domNode, undefined, projectionOptions);
+    }
+};
+export var initPropertiesAndChildren = function (domNode, vnode, projectionOptions) {
+    addChildren(domNode, vnode.children, projectionOptions); // children before properties, needed for value property of <select>.
+    if (vnode.text) {
+        domNode.textContent = vnode.text;
+    }
+    setProperties(domNode, vnode.properties, projectionOptions);
+    if (vnode.properties && vnode.properties.afterCreate) {
+        vnode.properties.afterCreate.apply(vnode.properties.bind || vnode.properties, [
+            domNode,
+            projectionOptions,
+            vnode.vnodeSelector,
+            vnode.properties,
+            vnode.children,
+        ]);
+    }
+};
+export var createDom = function (vnode, parentNode, insertBefore, projectionOptions) {
+    var _a;
+    var domNode;
+    var start = 0;
+    var vnodeSelector = vnode.vnodeSelector;
+    var doc = parentNode.ownerDocument;
+    if (vnodeSelector === "") {
+        if (vnode.domNode) {
+            vnode.domNode.nodeValue = vnode.text;
+        }
+        else {
+            domNode = vnode.domNode = doc.createTextNode(vnode.text);
+            if (insertBefore !== undefined) {
+                parentNode.insertBefore(domNode, insertBefore);
+            }
+            else {
+                parentNode.appendChild(domNode);
+            }
+        }
+    }
+    else {
+        for (var i = 0; i <= vnodeSelector.length; ++i) {
+            var c = vnodeSelector.charAt(i);
+            if (i === vnodeSelector.length || c === "." || c === "#") {
+                var type = vnodeSelector.charAt(start - 1);
+                var found = vnodeSelector.slice(start, i);
+                if (type === ".") {
+                    domNode.classList.add(found);
+                }
+                else if (type === "#") {
+                    domNode.id = found;
+                }
+                else {
+                    if (found === "svg") {
+                        projectionOptions = extend(projectionOptions, {
+                            namespace: NAMESPACE_SVG,
+                        });
+                    }
+                    if (projectionOptions.namespace !== undefined) {
+                        domNode = vnode.domNode = doc.createElementNS(projectionOptions.namespace, found);
+                    }
+                    else {
+                        domNode = vnode.domNode =
+                            vnode.domNode ||
+                                (((_a = vnode.properties) === null || _a === void 0 ? void 0 : _a.is)
+                                    ? doc.createElement(found, { is: vnode.properties.is })
+                                    : doc.createElement(found));
+                        if (found === "input" && vnode.properties && vnode.properties.type !== undefined) {
+                            // IE8 and older don't support setting input type after the DOM Node has been added to the document
+                            domNode.setAttribute("type", vnode.properties.type);
+                        }
+                    }
+                    if (insertBefore !== undefined) {
+                        parentNode.insertBefore(domNode, insertBefore);
+                    }
+                    else if (domNode.parentNode !== parentNode) {
+                        parentNode.appendChild(domNode);
+                    }
+                }
+                start = i + 1;
+            }
+        }
+        initPropertiesAndChildren(domNode, vnode, projectionOptions);
+    }
+};
+var updateDom;
+/**
+ * Adds or removes classes from an Element
+ * @param domNode the element
+ * @param classes a string separated list of classes
+ * @param on true means add classes, false means remove
+ */
+var toggleClasses = function (domNode, classes, on) {
+    if (!classes) {
+        return;
+    }
+    classes.split(" ").forEach(function (classToToggle) {
+        if (classToToggle) {
+            domNode.classList.toggle(classToToggle, on);
+        }
+    });
+};
+var updateProperties = function (domNode, previousProperties, properties, projectionOptions) {
+    if (!properties) {
+        return;
+    }
+    var propertiesUpdated = false;
+    var propNames = Object.keys(properties);
+    var propCount = propNames.length;
+    for (var i = 0; i < propCount; i++) {
+        var propName = propNames[i];
+        // assuming that properties will be nullified instead of missing is by design
+        var propValue = properties[propName];
+        var previousValue = previousProperties[propName];
+        if (propName === "class") {
+            if (previousValue !== propValue) {
+                toggleClasses(domNode, previousValue, false);
+                toggleClasses(domNode, propValue, true);
+            }
+        }
+        else if (propName === "classes") {
+            var classList = domNode.classList;
+            var classNames = Object.keys(propValue);
+            var classNameCount = classNames.length;
+            for (var j = 0; j < classNameCount; j++) {
+                var className = classNames[j];
+                var on = !!propValue[className];
+                var previousOn = !!previousValue[className];
+                if (on === previousOn) {
+                    continue;
+                }
+                propertiesUpdated = true;
+                if (on) {
+                    classList.add(className);
+                }
+                else {
+                    classList.remove(className);
+                }
+            }
+        }
+        else if (propName === "styles") {
+            var styleNames = Object.keys(propValue);
+            var styleCount = styleNames.length;
+            for (var j = 0; j < styleCount; j++) {
+                var styleName = styleNames[j];
+                var newStyleValue = propValue[styleName];
+                var oldStyleValue = previousValue[styleName];
+                if (newStyleValue === oldStyleValue) {
+                    continue;
+                }
+                propertiesUpdated = true;
+                if (newStyleValue) {
+                    checkStyleValue(newStyleValue);
+                    projectionOptions.styleApplyer(domNode, styleName, newStyleValue);
+                }
+                else {
+                    projectionOptions.styleApplyer(domNode, styleName, "");
+                }
+            }
+        }
+        else {
+            if (!propValue && typeof previousValue === "string") {
+                propValue = "";
+            }
+            if (propName === "value") {
+                // value can be manipulated by the user directly and using event.preventDefault() is not an option
+                var domValue = domNode[propName];
+                if (domValue !== propValue && // The 'value' in the DOM tree !== newValue
+                    (domNode["oninput-value"]
+                        ? domValue === domNode["oninput-value"] // If the last reported value to 'oninput' does not match domValue, do nothing and wait for oninput
+                        : propValue !== previousValue) // Only update the value if the vdom changed
+                ) {
+                    // The edge cases are described in the tests
+                    domNode[propName] = propValue; // Reset the value, even if the virtual DOM did not change
+                    domNode["oninput-value"] = undefined;
+                } // else do not update the domNode, otherwise the cursor position would be changed
+                if (propValue !== previousValue) {
+                    propertiesUpdated = true;
+                }
+            }
+            else if (propValue !== previousValue) {
+                var type = typeof propValue;
+                if (type !== "function" || !projectionOptions.eventHandlerInterceptor) {
+                    // Function updates are expected to be handled by the EventHandlerInterceptor
+                    if (projectionOptions.namespace === NAMESPACE_SVG) {
+                        if (propName === "href") {
+                            domNode.setAttributeNS(NAMESPACE_XLINK, propName, propValue);
+                        }
+                        else {
+                            // all SVG attributes are read-only in DOM, so...
+                            domNode.setAttribute(propName, propValue);
+                        }
+                    }
+                    else if (type === "string" && propName !== "innerHTML") {
+                        if (propName === "role" && propValue === "") {
+                            domNode.removeAttribute(propName);
+                        }
+                        else {
+                            domNode.setAttribute(propName, propValue);
+                        }
+                    }
+                    else if (domNode[propName] !== propValue) {
+                        // Comparison is here for side-effects in Edge with scrollLeft and scrollTop
+                        domNode[propName] = propValue;
+                    }
+                    propertiesUpdated = true;
+                }
+            }
+        }
+    }
+    return propertiesUpdated;
+};
+var updateChildren = function (vnode, domNode, oldChildren, newChildren, projectionOptions) {
+    if (oldChildren === newChildren) {
+        return false;
+    }
+    oldChildren = oldChildren || emptyArray;
+    newChildren = newChildren || emptyArray;
+    var oldChildrenLength = oldChildren.length;
+    var newChildrenLength = newChildren.length;
+    var oldIndex = 0;
+    var newIndex = 0;
+    var i;
+    var textUpdated = false;
+    while (newIndex < newChildrenLength) {
+        var oldChild = oldIndex < oldChildrenLength ? oldChildren[oldIndex] : undefined;
+        var newChild = newChildren[newIndex];
+        if (oldChild !== undefined && same(oldChild, newChild)) {
+            textUpdated = updateDom(oldChild, newChild, projectionOptions) || textUpdated;
+            oldIndex++;
+        }
+        else {
+            var findOldIndex = findIndexOfChild(oldChildren, newChild, oldIndex + 1);
+            if (findOldIndex >= 0) {
+                // Remove preceding missing children
+                for (i = oldIndex; i < findOldIndex; i++) {
+                    nodeToRemove(oldChildren[i]);
+                    checkDistinguishable(oldChildren, i, vnode, "removed");
+                }
+                textUpdated =
+                    updateDom(oldChildren[findOldIndex], newChild, projectionOptions) || textUpdated;
+                oldIndex = findOldIndex + 1;
+            }
+            else {
+                // New child
+                createDom(newChild, domNode, oldIndex < oldChildrenLength ? oldChildren[oldIndex].domNode : undefined, projectionOptions);
+                nodeAdded(newChild);
+                checkDistinguishable(newChildren, newIndex, vnode, "added");
+            }
+        }
+        newIndex++;
+    }
+    if (oldChildrenLength > oldIndex) {
+        // Remove child fragments
+        for (i = oldIndex; i < oldChildrenLength; i++) {
+            nodeToRemove(oldChildren[i]);
+            checkDistinguishable(oldChildren, i, vnode, "removed");
+        }
+    }
+    return textUpdated;
+};
+updateDom = function (previous, vnode, projectionOptions) {
+    var domNode = previous.domNode;
+    var textUpdated = false;
+    if (previous === vnode) {
+        return false; // By contract, VNode objects may not be modified anymore after passing them to maquette
+    }
+    var updated = false;
+    if (vnode.vnodeSelector === "") {
+        if (vnode.text !== previous.text) {
+            var newTextNode = domNode.ownerDocument.createTextNode(vnode.text);
+            domNode.parentNode.replaceChild(newTextNode, domNode);
+            vnode.domNode = newTextNode;
+            textUpdated = true;
+            return textUpdated;
+        }
+        vnode.domNode = domNode;
+    }
+    else {
+        if (vnode.vnodeSelector.lastIndexOf("svg", 0) === 0) {
+            // lastIndexOf(needle,0)===0 means StartsWith
+            projectionOptions = extend(projectionOptions, {
+                namespace: NAMESPACE_SVG,
+            });
+        }
+        if (previous.text !== vnode.text) {
+            updated = true;
+            if (vnode.text === undefined) {
+                domNode.removeChild(domNode.firstChild); // the only textnode presumably
+            }
+            else {
+                domNode.textContent = vnode.text;
+            }
+        }
+        vnode.domNode = domNode;
+        updated =
+            updateChildren(vnode, domNode, previous.children, vnode.children, projectionOptions) ||
+                updated;
+        updated =
+            updateProperties(domNode, previous.properties, vnode.properties, projectionOptions) ||
+                updated;
+        if (vnode.properties && vnode.properties.afterUpdate) {
+            vnode.properties.afterUpdate.apply(vnode.properties.bind || vnode.properties, [
+                domNode,
+                projectionOptions,
+                vnode.vnodeSelector,
+                vnode.properties,
+                vnode.children,
+            ]);
+        }
+    }
+    if (updated && vnode.properties && vnode.properties.updateAnimation) {
+        vnode.properties.updateAnimation(domNode, vnode.properties, previous.properties);
+    }
+    return textUpdated;
+};
+export var createProjection = function (vnode, projectionOptions) {
+    return {
+        getLastRender: function () { return vnode; },
+        update: function (updatedVnode) {
+            if (vnode.vnodeSelector !== updatedVnode.vnodeSelector) {
+                throw new Error("The selector for the root VNode may not be changed. (consider using dom.merge and add one extra level to the virtual DOM)");
+            }
+            var previousVNode = vnode;
+            vnode = updatedVnode;
+            updateDom(previousVNode, updatedVnode, projectionOptions);
+        },
+        domNode: vnode.domNode,
+    };
+};
 //# sourceMappingURL=projection.js.map