maquette 4.1.2 → 4.1.4

package/dist/maquette.umd.js

@@ -4,6 +4,38 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.maquette = {}));
 })(this, (function (exports) { 'use strict';
 
+    /**
+     * Creates a {@link CalculationCache} object, useful for caching {@link VNode} trees.
+     * In practice, caching of {@link VNode} trees is not needed, because achieving 60 frames per second is almost never a problem.
+     * For more information, see {@link CalculationCache}.
+     *
+     * @param <Result> The type of the value that is cached.
+     */
+    var createCache = function () {
+        var cachedInputs;
+        var cachedOutcome;
+        return {
+            invalidate: function () {
+                cachedOutcome = undefined;
+                cachedInputs = undefined;
+            },
+            result: function (inputs, calculation) {
+                if (cachedInputs) {
+                    for (var i = 0; i < inputs.length; i++) {
+                        if (cachedInputs[i] !== inputs[i]) {
+                            cachedOutcome = undefined;
+                        }
+                    }
+                }
+                if (!cachedOutcome) {
+                    cachedOutcome = calculation();
+                    cachedInputs = inputs;
+                }
+                return cachedOutcome;
+            },
+        };
+    };
+
     var NAMESPACE_W3 = "http://www.w3.org/";
     var NAMESPACE_SVG = "".concat(NAMESPACE_W3, "2000/svg");
     var NAMESPACE_XLINK = "".concat(NAMESPACE_W3, "1999/xlink");
@@ -65,11 +97,7 @@
                 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,
-                        };
+                        throw Object.assign(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 });
                     }
                 }
             }
@@ -132,6 +160,7 @@
         }
     };
     var vnodeOnlyProps = [
+        "on",
         "afterCreate",
         "afterUpdate",
         "afterRemoved",
@@ -182,19 +211,6 @@
                     }
                 }
             }
-            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") {
@@ -223,6 +239,19 @@
                 }
             }
         }
+        if (properties.on) {
+            // 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);
+                }
+            }
+        }
     };
     var addChildren = function (domNode, children, projectionOptions) {
         if (!children) {
@@ -454,7 +483,8 @@
             var oldChild = oldIndex < oldChildrenLength ? oldChildren[oldIndex] : undefined;
             var newChild = newChildren[newIndex];
             if (oldChild !== undefined && same(oldChild, newChild)) {
-                textUpdated = updateDom(oldChild, newChild, projectionOptions) || textUpdated;
+                textUpdated =
+                    updateDom(oldChild, newChild, projectionOptions, domNode, oldChildren) || textUpdated;
                 oldIndex++;
             }
             else {
@@ -466,7 +496,8 @@
                         checkDistinguishable(oldChildren, i, vnode, "removed");
                     }
                     textUpdated =
-                        updateDom(oldChildren[findOldIndex], newChild, projectionOptions) || textUpdated;
+                        updateDom(oldChildren[findOldIndex], newChild, projectionOptions, domNode, oldChildren) ||
+                            textUpdated;
                     oldIndex = findOldIndex + 1;
                 }
                 else {
@@ -487,7 +518,7 @@
         }
         return textUpdated;
     };
-    updateDom = function (previous, vnode, projectionOptions) {
+    updateDom = function (previous, vnode, projectionOptions, parentNode, oldChildren) {
         var domNode = previous.domNode;
         var textUpdated = false;
         if (previous === vnode) {
@@ -497,7 +528,13 @@
         if (vnode.vnodeSelector === "") {
             if (vnode.text !== previous.text) {
                 var newTextNode = domNode.ownerDocument.createTextNode(vnode.text);
-                domNode.parentNode.replaceChild(newTextNode, domNode);
+                try {
+                    parentNode.replaceChild(newTextNode, domNode);
+                }
+                catch (_a) {
+                    // Text nodes can be substituted by google translate
+                    parentNode.replaceChild(newTextNode, parentNode.childNodes[oldChildren.indexOf(previous)]);
+                }
                 vnode.domNode = newTextNode;
                 textUpdated = true;
                 return textUpdated;
@@ -551,7 +588,7 @@
                 }
                 var previousVNode = vnode;
                 vnode = updatedVnode;
-                updateDom(previousVNode, updatedVnode, projectionOptions);
+                updateDom(previousVNode, updatedVnode, projectionOptions, previousVNode.domNode.parentNode, [previousVNode]);
             },
             domNode: vnode.domNode,
         };
@@ -577,13 +614,13 @@
     };
     var dom = {
         /**
-         * Creates a real DOM tree from `vnode`. The [[Projection]] object returned will contain the resulting DOM Node in
-         * its [[Projection.domNode|domNode]] property.
-         * This is a low-level method. Users will typically use a [[Projector]] instead.
-         * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
+         * Creates a real DOM tree from `vnode`. The {@link Projection} object returned will contain the resulting DOM Node in
+         * its {@link Projection.domNode | domNode} property.
+         * This is a low-level method. Users will typically use a {@link Projector} instead.
+         * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function. NOTE: {@link VNode}
          * objects may only be rendered once.
          * @param projectionOptions - Options to be used to create and update the projection.
-         * @returns The [[Projection]] which also contains the DOM Node that was created.
+         * @returns The {@link Projection} which also contains the DOM Node that was created.
          */
         create: function (vnode, projectionOptions) {
             projectionOptions = applyDefaultProjectionOptions(projectionOptions);
@@ -591,13 +628,13 @@
             return createProjection(vnode, projectionOptions);
         },
         /**
-         * Appends a new child node to the DOM which is generated from a [[VNode]].
-         * This is a low-level method. Users will typically use a [[Projector]] instead.
+         * Appends a new child node to the DOM which is generated from a {@link VNode}.
+         * This is a low-level method. Users will typically use a {@link Projector} instead.
          * @param parentNode - The parent node for the new child node.
-         * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
+         * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function. NOTE: {@link VNode}
          * objects may only be rendered once.
-         * @param projectionOptions - Options to be used to create and update the [[Projection]].
-         * @returns The [[Projection]] that was created.
+         * @param projectionOptions - Options to be used to create and update the {@link Projection}.
+         * @returns The {@link Projection} that was created.
          */
         append: function (parentNode, vnode, projectionOptions) {
             projectionOptions = applyDefaultProjectionOptions(projectionOptions);
@@ -605,13 +642,13 @@
             return createProjection(vnode, projectionOptions);
         },
         /**
-         * Inserts a new DOM node which is generated from a [[VNode]].
-         * This is a low-level method. Users wil typically use a [[Projector]] instead.
+         * Inserts a new DOM node which is generated from a {@link VNode}.
+         * This is a low-level method. Users wil typically use a {@link Projector} instead.
          * @param beforeNode - The node that the DOM Node is inserted before.
-         * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function.
-         * NOTE: [[VNode]] objects may only be rendered once.
-         * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
-         * @returns The [[Projection]] that was created.
+         * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function.
+         * NOTE: {@link VNode} objects may only be rendered once.
+         * @param projectionOptions - Options to be used to create and update the projection, see {@link createProjector}.
+         * @returns The {@link Projection} that was created.
          */
         insertBefore: function (beforeNode, vnode, projectionOptions) {
             projectionOptions = applyDefaultProjectionOptions(projectionOptions);
@@ -619,15 +656,15 @@
             return createProjection(vnode, projectionOptions);
         },
         /**
-         * Merges a new DOM node which is generated from a [[VNode]] with an existing DOM Node.
+         * Merges a new DOM node which is generated from a {@link VNode} with an existing DOM Node.
          * This means that the virtual DOM and the real DOM will have one overlapping element.
-         * Therefore the selector for the root [[VNode]] will be ignored, but its properties and children will be applied to the Element provided.
-         * This is a low-level method. Users wil typically use a [[Projector]] instead.
+         * Therefore the selector for the root {@link VNode} will be ignored, but its properties and children will be applied to the Element provided.
+         * This is a low-level method. Users wil typically use a {@link Projector} instead.
          * @param element - The existing element to adopt as the root of the new virtual DOM. Existing attributes and child nodes are preserved.
-         * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]] objects
+         * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function. NOTE: {@link VNode} objects
          * may only be rendered once.
-         * @param projectionOptions - Options to be used to create and update the projection, see [[createProjector]].
-         * @returns The [[Projection]] that was created.
+         * @param projectionOptions - Options to be used to create and update the projection, see {@link createProjector}.
+         * @returns The {@link Projection} that was created.
          */
         merge: function (element, vnode, projectionOptions) {
             projectionOptions = applyDefaultProjectionOptions(projectionOptions);
@@ -636,13 +673,13 @@
             return createProjection(vnode, projectionOptions);
         },
         /**
-         * Replaces an existing DOM node with a node generated from a [[VNode]].
-         * This is a low-level method. Users will typically use a [[Projector]] instead.
-         * @param element - The node for the [[VNode]] to replace.
-         * @param vnode - The root of the virtual DOM tree that was created using the [[h]] function. NOTE: [[VNode]]
+         * Replaces an existing DOM node with a node generated from a {@link VNode}.
+         * This is a low-level method. Users will typically use a {@link Projector} instead.
+         * @param element - The node for the {@link VNode} to replace.
+         * @param vnode - The root of the virtual DOM tree that was created using the {@link h} function. NOTE: {@link VNode}
          * objects may only be rendered once.
-         * @param projectionOptions - Options to be used to create and update the [[Projection]].
-         * @returns The [[Projection]] that was created.
+         * @param projectionOptions - Options to be used to create and update the {@link Projection}.
+         * @returns The {@link Projection} that was created.
          */
         replace: function (element, vnode, projectionOptions) {
             projectionOptions = applyDefaultProjectionOptions(projectionOptions);
@@ -708,6 +745,57 @@
         };
     }
 
+    /**
+     * Creates a {@link Mapping} instance that keeps an array of result objects synchronized with an array of source objects.
+     * See {@link http://maquettejs.org/docs/arrays.html Working with arrays}.
+     *
+     * @param <Source>       The type of source items. A database-record for instance.
+     * @param <Target>       The type of target items. A {@link MaquetteComponent} for instance.
+     * @param getSourceKey   `function(source)` that must return a key to identify each source object. The result must either be a string or a number.
+     * @param createResult   `function(source, index)` that must create a new result object from a given source. This function is identical
+     *                       to the `callback` argument in `Array.map(callback)`.
+     * @param updateResult   `function(source, target, index)` that updates a result to an updated source.
+     */
+    var createMapping = function (getSourceKey, createResult, updateResult) {
+        var keys = [];
+        var results = [];
+        return {
+            results: results,
+            map: function (newSources) {
+                var newKeys = newSources.map(getSourceKey);
+                var oldTargets = results.slice();
+                var oldIndex = 0;
+                for (var i = 0; i < newSources.length; i++) {
+                    var source = newSources[i];
+                    var sourceKey = newKeys[i];
+                    if (sourceKey === keys[oldIndex]) {
+                        results[i] = oldTargets[oldIndex];
+                        updateResult(source, oldTargets[oldIndex], i);
+                        oldIndex++;
+                    }
+                    else {
+                        var found = false;
+                        for (var j = 1; j < keys.length + 1; j++) {
+                            var searchIndex = (oldIndex + j) % keys.length;
+                            if (keys[searchIndex] === sourceKey) {
+                                results[i] = oldTargets[searchIndex];
+                                updateResult(newSources[i], oldTargets[searchIndex], i);
+                                oldIndex = searchIndex + 1;
+                                found = true;
+                                break;
+                            }
+                        }
+                        if (!found) {
+                            results[i] = createResult(source, i);
+                        }
+                    }
+                }
+                results.length = newSources.length;
+                keys = newKeys;
+            },
+        };
+    };
+
     var createParentNodePath = function (node, rootNode) {
         var parentNodePath = [];
         while (node && node !== rootNode) {
@@ -716,19 +804,12 @@
         }
         return parentNodePath;
     };
-    var find;
-    if (Array.prototype.find) {
-        find = function (items, predicate) { return items.find(predicate); };
-    }
-    else {
-        find = function (items, predicate) { return items.filter(predicate)[0]; };
-    }
     var findVNodeByParentNodePath = function (vnode, parentNodePath) {
         var result = vnode;
         parentNodePath.forEach(function (node) {
             result =
                 result && result.children
-                    ? find(result.children, function (child) { return child.domNode === node; })
+                    ? result.children.find(function (child) { return child.domNode === node; })
                     : undefined;
         });
         return result;
@@ -755,9 +836,9 @@
         }
     };
     /**
-     * Creates a [[Projector]] instance using the provided projectionOptions.
+     * Creates a {@link Projector} instance using the provided projectionOptions.
      *
-     * For more information, see [[Projector]].
+     * For more information, see {@link Projector}.
      *
      * @param projectorOptions   Options that influence how the DOM is rendered and updated.
      */
@@ -842,89 +923,6 @@
         return projector;
     };
 
-    /**
-     * Creates a [[CalculationCache]] object, useful for caching [[VNode]] trees.
-     * In practice, caching of [[VNode]] trees is not needed, because achieving 60 frames per second is almost never a problem.
-     * For more information, see [[CalculationCache]].
-     *
-     * @param <Result> The type of the value that is cached.
-     */
-    var createCache = function () {
-        var cachedInputs;
-        var cachedOutcome;
-        return {
-            invalidate: function () {
-                cachedOutcome = undefined;
-                cachedInputs = undefined;
-            },
-            result: function (inputs, calculation) {
-                if (cachedInputs) {
-                    for (var i = 0; i < inputs.length; i++) {
-                        if (cachedInputs[i] !== inputs[i]) {
-                            cachedOutcome = undefined;
-                        }
-                    }
-                }
-                if (!cachedOutcome) {
-                    cachedOutcome = calculation();
-                    cachedInputs = inputs;
-                }
-                return cachedOutcome;
-            },
-        };
-    };
-
-    /**
-     * Creates a {@link Mapping} instance that keeps an array of result objects synchronized with an array of source objects.
-     * See {@link http://maquettejs.org/docs/arrays.html Working with arrays}.
-     *
-     * @param <Source>       The type of source items. A database-record for instance.
-     * @param <Target>       The type of target items. A [[MaquetteComponent]] for instance.
-     * @param getSourceKey   `function(source)` that must return a key to identify each source object. The result must either be a string or a number.
-     * @param createResult   `function(source, index)` that must create a new result object from a given source. This function is identical
-     *                       to the `callback` argument in `Array.map(callback)`.
-     * @param updateResult   `function(source, target, index)` that updates a result to an updated source.
-     */
-    var createMapping = function (getSourceKey, createResult, updateResult) {
-        var keys = [];
-        var results = [];
-        return {
-            results: results,
-            map: function (newSources) {
-                var newKeys = newSources.map(getSourceKey);
-                var oldTargets = results.slice();
-                var oldIndex = 0;
-                for (var i = 0; i < newSources.length; i++) {
-                    var source = newSources[i];
-                    var sourceKey = newKeys[i];
-                    if (sourceKey === keys[oldIndex]) {
-                        results[i] = oldTargets[oldIndex];
-                        updateResult(source, oldTargets[oldIndex], i);
-                        oldIndex++;
-                    }
-                    else {
-                        var found = false;
-                        for (var j = 1; j < keys.length + 1; j++) {
-                            var searchIndex = (oldIndex + j) % keys.length;
-                            if (keys[searchIndex] === sourceKey) {
-                                results[i] = oldTargets[searchIndex];
-                                updateResult(newSources[i], oldTargets[searchIndex], i);
-                                oldIndex = searchIndex + 1;
-                                found = true;
-                                break;
-                            }
-                        }
-                        if (!found) {
-                            results[i] = createResult(source, i);
-                        }
-                    }
-                }
-                results.length = newSources.length;
-                keys = newKeys;
-            },
-        };
-    };
-
     exports.createCache = createCache;
     exports.createMapping = createMapping;
     exports.createProjector = createProjector;

package/dist/maquette.umd.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).maquette={})}(this,function(e){"use strict";function l(t,r){var o={};return Object.keys(t).forEach(function(e){o[e]=t[e]}),r&&Object.keys(r).forEach(function(e){o[e]=r[e]}),o}function t(e){(e.children||[]).forEach(t),e.properties&&e.properties.afterRemoved&&e.properties.afterRemoved.call(e.properties.bind||e.properties,e.domNode)}function r(){d=!1,i.forEach(t),i.length=0}function o(e){i.push(e),d||(d=!0,"undefined"!=typeof window&&"requestIdleCallback"in window?window.requestIdleCallback(r,{timeout:16}):setTimeout(r,16))}var n="http://www.w3.org/",S="".concat(n,"2000/svg"),w="".concat(n,"1999/xlink"),v=[],h=function(e,t){return e.vnodeSelector===t.vnodeSelector&&(e.properties&&t.properties?e.properties.key===t.properties.key&&e.properties.bind===t.properties.bind:!e.properties&&!t.properties)},E=function(e){if("string"!=typeof e)throw Error("Style values must be strings")},m=function(e,t,r){if(""!==t.vnodeSelector)for(var o=r;o<e.length;o++)if(h(e[o],t))return o;return-1},g=function(e,t,r,o){var n=e[t];if(""!==n.vnodeSelector){var i=n.properties;if(!(i&&(void 0===i.key?i.bind:i.key)))for(var d=0;d<e.length;d++)if(d!==t){var a=e[d];if(h(a,n))throw{error:Error("".concat(r.vnodeSelector," had a ").concat(n.vnodeSelector," child ").concat("added"===o?o:"removed",", but there is now more than one. You must add unique key properties to make them distinguishable.")),parentNode:r,childNode:n}}}},y=function(e){var t;e.properties&&(t=e.properties.enterAnimation)&&t(e.domNode,e.properties)},i=[],d=!1,N=function(e){var t=e.domNode;if(e.properties){var r=e.properties.exitAnimation;if(r)return t.style.pointerEvents="none",void r(t,function(){t.parentNode&&(t.parentNode.removeChild(t),o(e))},e.properties)}t.parentNode&&(t.parentNode.removeChild(t),o(e))},a=["afterCreate","afterUpdate","afterRemoved","enterAnimation","exitAnimation","updateAnimation"];function k(e){return!a.includes(e)}function f(e,t,r){c(e,t.children,r),t.text&&(e.textContent=t.text),p(e,t.properties,r),t.properties&&t.properties.afterCreate&&t.properties.afterCreate.call(t.properties.bind||t.properties,e,r,t.vnodeSelector,t.properties,t.children)}function s(t,r){return{getLastRender:function(){return t},update:function(e){if(t.vnodeSelector!==e.vnodeSelector)throw Error("The selector for the root VNode may not be changed. (consider using dom.merge and add one extra level to the virtual DOM)");x(t,t=e,r)},domNode:t.domNode}}function u(e){return l(A,e)}var p=function(e,t,r){if(t)for(var o=r.eventHandlerInterceptor,n=Object.keys(t).filter(k),i=n.length,d=0;d<i;d++){var a,s=n[d],p=t[s];if("className"===s)throw Error('Property "className" is not supported, use "class".');if("class"===s)C(e,p,!0);else if("classes"===s)for(var c=Object.keys(p),l=c.length,f=0;f<l;f++){var u=c[f];p[u]&&e.classList.add(u)}else if("styles"===s)for(var v=Object.keys(p),h=v.length,f=0;f<h;f++){var m=v[f],g=p[m];g&&(E(g),r.styleApplyer(e,m,g))}else if("on"===s&&p)for(var y=0,N=Object.entries(t.on);y<N.length;y++){var b=N[y],x=b[0],b=b[1],A="function"==typeof b?b:b.listener;(A=o?o(x,A,e,t):A)&&e.addEventListener(x,A,"function"==typeof b?void 0:b.options)}else"key"!==s&&null!=p&&("function"==(a=typeof p)?(s.lastIndexOf("on",0)||o&&(p=o(s,p,e,t)),e[s]=p):r.namespace===S?"href"===s?e.setAttributeNS(w,s,p):e.setAttribute(s,p):"string"==a&&"value"!==s&&"innerHTML"!==s?e.setAttribute(s,p):e[s]=p)}},c=function(e,t,r){if(t)for(var o=0,n=t;o<n.length;o++){var i=n[o];b(i,e,void 0,r)}},b=function(e,t,r,o){var n,i=0,d=e.vnodeSelector,a=t.ownerDocument;if(""===d)e.domNode?e.domNode.nodeValue=e.text:(n=e.domNode=a.createTextNode(e.text),void 0!==r?t.insertBefore(n,r):t.appendChild(n));else{for(var s=0;s<=d.length;++s){var p,c=d[0|s]||"";s!==d.length&&"."!=c&&"#"!=c||(c=d[0|i-1]||"",p=d.slice(i,s),"."==c?n.classList.add(p):"#"==c?n.id=p:(void 0!==(o="svg"===p?l(o,{namespace:S}):o).namespace?n=e.domNode=a.createElementNS(o.namespace,p):(n=e.domNode=e.domNode||(null!=(c=e.properties)&&c.is?a.createElement(p,{is:e.properties.is}):a.createElement(p)),"input"===p&&e.properties&&void 0!==e.properties.type&&n.setAttribute("type",e.properties.type)),void 0!==r?t.insertBefore(n,r):n.parentNode!==t&&t.appendChild(n)),i=s+1)}f(n,e,o)}},C=function(t,e,r){e&&e.split(" ").forEach(function(e){e&&t.classList.toggle(e,r)})},x=function(e,t,r){var o=e.domNode;if(e!==t){var n,i=!1;if(""===t.vnodeSelector){if(t.text!==e.text)return n=o.ownerDocument.createTextNode(t.text),o.parentNode.replaceChild(n,o),t.domNode=n,!0;t.domNode=o}else t.vnodeSelector.lastIndexOf("svg",0)||(r=l(r,{namespace:S})),e.text!==t.text&&(i=!0,void 0===t.text?o.removeChild(o.firstChild):o.textContent=t.text),t.domNode=o,i=function(e,t,r,o,n){if(r===o)return!1;for(var i,d=(r=r||v).length,a=(o=o||v).length,s=0,p=0,c=!1;p<a;){var l=s<d?r[s]:void 0,f=o[p];if(void 0!==l&&h(l,f))c=x(l,f,n)||c,s++;else{var u=m(r,f,s+1);if(u<0)b(f,t,s<d?r[s].domNode:void 0,n),y(f),g(o,p,e,"added");else{for(i=s;i<u;i++)N(r[i]),g(r,i,e,"removed");c=x(r[u],f,n)||c,s=u+1}}p++}if(s<d)for(i=s;i<d;i++)N(r[i]),g(r,i,e,"removed");return c}(t,o,e.children,t.children,r)||i,i=function(e,t,r,o){if(r){for(var n=!1,i=Object.keys(r).filter(k),d=i.length,a=0;a<d;a++){var s,p=i[a],c=r[p],l=t[p];if("class"===p)l!==c&&(C(e,l,!1),C(e,c,!0));else if("classes"===p)for(var f=e.classList,u=Object.keys(c),v=u.length,h=0;h<v;h++){var m=u[h],g=!!c[m];g!=!!l[m]&&(n=!0,g?f.add(m):f.remove(m))}else if("styles"===p)for(var y=Object.keys(c),N=y.length,h=0;h<N;h++){var b=y[h],x=c[b];x!==l[b]&&(n=!0,x?(E(x),o.styleApplyer(e,b,x)):o.styleApplyer(e,b,""))}else c||"string"!=typeof l||(c=""),"value"===p?(e[p]!==c&&c!==l&&(e[p]=c),c!==l&&(n=!0)):c===l||"function"==(s=typeof c)&&o.eventHandlerInterceptor||(o.namespace===S?"href"===p?e.setAttributeNS(w,p,c):e.setAttribute(p,c):"string"==s&&"innerHTML"!==p?"role"===p&&""===c?e.removeAttribute(p):e.setAttribute(p,c):e[p]!==c&&(e[p]=c),n=!0)}return n}}(o,e.properties,t.properties,r)||i,t.properties&&t.properties.afterUpdate&&t.properties.afterUpdate.call(t.properties.bind||t.properties,o,r,t.vnodeSelector,t.properties,t.children);i&&t.properties&&t.properties.updateAnimation&&t.properties.updateAnimation(o,t.properties,e.properties)}return!1},A={namespace:void 0,performanceLogger:function(){},eventHandlerInterceptor:void 0,styleApplyer:function(e,t,r){"-"==(t[0]||"")?e.style.setProperty(t,r):e.style[t]=r}},O={create:function(e,t){return t=u(t),b(e,document.createElement("div"),void 0,t),s(e,t)},append:function(e,t,r){return r=u(r),b(t,e,void 0,r),s(t,r)},insertBefore:function(e,t,r){return r=u(r),b(t,e.parentNode,e,r),s(t,r)},merge:function(e,t,r){return r=u(r),f(t.domNode=e,t,r),s(t,r)},replace:function(e,t,r){return r=u(r),b(t,e.parentNode,e,r),e.parentNode.removeChild(e),s(t,r)}},j=Array.prototype.find?function(e,t){return e.find(t)}:function(e,t){return e.filter(t)[0]};e.createCache=function(){var o,n;return{invalidate:function(){o=n=void 0},result:function(e,t){if(o)for(var r=0;r<e.length;r++)o[r]!==e[r]&&(n=void 0);return n||(n=t(),o=e),n}}},e.createMapping=function(c,l,f){var u=[],v=[];return{results:v,map:function(e){for(var t=e.map(c),r=v.slice(),o=0,n=0;n<e.length;n++){var i=e[n],d=t[n];if(d===u[o])v[n]=r[o],f(i,r[o],n),o++;else{for(var a=!1,s=1;s<u.length+1;s++){var p=(o+s)%u.length;if(u[p]===d){v[n]=r[p],f(e[n],r[p],n),o=1+p,a=!0;break}}a||(v[n]=l(i,n))}}v.length=e.length,u=t}}},e.createProjector=function(e){function r(e,t,r){var i,d,a;function n(e){a("domEvent",e);var t,r,o=i,n=function(e,t){for(var r=[];e&&e!==t;)r.push(e),e=e.parentNode;return r}(e.currentTarget,o.domNode),o=(n.reverse(),o=o.getLastRender(),r=o,n.forEach(function(t){r=r&&r.children?j(r.children,function(e){return e.domNode===t}):void 0}),r);return d.scheduleRender(),o&&(t=(null!=(n=null!=(n=o.properties["on".concat(e.type)])?n:o.properties.on[e.type].listener)?n:o.properties.on[e.type]).apply(o.properties.bind||this,arguments)),a("domEventProcessed",e),t}s.eventHandlerInterceptor=(d=f,a=p,function(e,t,r,o){return n}),i=e(t,r(),s),c.push(i),l.push(r)}function t(){if(o=void 0,n){n=!1,p("renderStart",void 0);for(var e=0;e<c.length;e++){var t=l[e]();p("rendered",void 0),c[e].update(t),p("patched",void 0)}p("renderDone",void 0),n=!0}}var o,s=u(e),p=s.performanceLogger,n=!0,i=!1,c=[],l=[],f={renderNow:t,scheduleRender:function(){o||i||(o=requestAnimationFrame(t))},stop:function(){o&&(cancelAnimationFrame(o),o=void 0),i=!0},resume:function(){n=!(i=!1),f.scheduleRender()},append:function(e,t){r(O.append,e,t)},insertBefore:function(e,t){r(O.insertBefore,e,t)},merge:function(e,t){r(O.merge,e,t)},replace:function(e,t){r(O.replace,e,t)},detach:function(e){for(var t=0;t<l.length;t++)if(l[t]===e)return l.splice(t,1),c.splice(t,1)[0];throw Error("renderFunction was not found")}};return f},e.dom=O,e.h=function(e,t,r){if(Array.isArray(t))r=t,t=void 0;else if(t&&("string"==typeof t||t.vnodeSelector)||r&&("string"==typeof r||r.vnodeSelector))throw Error("h called with invalid arguments");var o,n;return r&&1===r.length&&"string"==typeof r[0]?o=r[0]:r&&(function e(t,r,o){for(var n=0,i=r.length;n<i;n++){var d=r[n];Array.isArray(d)?e(t,d,o):null!=d&&!1!==d&&("string"==typeof d&&(d={vnodeSelector:"",properties:void 0,children:void 0,text:d.toString(),domNode:null}),o.push(d))}}(e,r,n=[]),0===n.length)&&(n=void 0),{vnodeSelector:e,properties:t,children:n,text:""===o?void 0:o,domNode:null}}});
+((e,t)=>{"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).maquette={})})(this,function(e){function l(t,r){var o={};return Object.keys(t).forEach(function(e){o[e]=t[e]}),r&&Object.keys(r).forEach(function(e){o[e]=r[e]}),o}var t="http://www.w3.org/",S="".concat(t,"2000/svg"),w="".concat(t,"1999/xlink"),v=[],h=function(e,t){return e.vnodeSelector===t.vnodeSelector&&(e.properties&&t.properties?e.properties.key===t.properties.key&&e.properties.bind===t.properties.bind:!e.properties&&!t.properties)},E=function(e){if("string"!=typeof e)throw Error("Style values must be strings")},m=function(e,t,r){if(""!==t.vnodeSelector)for(var o=r;o<e.length;o++)if(h(e[o],t))return o;return-1},g=function(e,t,r,o){var n=e[t];if(""!==n.vnodeSelector){var i=n.properties;if(!(i&&(void 0===i.key?i.bind:i.key)))for(var d=0;d<e.length;d++)if(d!==t){var a=e[d];if(h(a,n))throw Object.assign(Error("".concat(r.vnodeSelector," had a ").concat(n.vnodeSelector," child ").concat("added"===o?o:"removed",", but there is now more than one. You must add unique key properties to make them distinguishable.")),{parentNode:r,childNode:n})}}},y=function(e){var t;e.properties&&(t=e.properties.enterAnimation)&&t(e.domNode,e.properties)},r=[],o=!1,n=function(e){(e.children||[]).forEach(n),e.properties&&e.properties.afterRemoved&&e.properties.afterRemoved.call(e.properties.bind||e.properties,e.domNode)},i=function(){o=!1,r.forEach(n),r.length=0},d=function(e){r.push(e),o||(o=!0,"undefined"!=typeof window&&"requestIdleCallback"in window?window.requestIdleCallback(i,{timeout:16}):setTimeout(i,16))},N=function(e){var t=e.domNode;if(e.properties){var r=e.properties.exitAnimation;if(r)return t.style.pointerEvents="none",void r(t,function(){t.parentNode&&(t.parentNode.removeChild(t),d(e))},e.properties)}t.parentNode&&(t.parentNode.removeChild(t),d(e))},a=["on","afterCreate","afterUpdate","afterRemoved","enterAnimation","exitAnimation","updateAnimation"];function k(e){return!a.includes(e)}function f(e,t,r){c(e,t.children,r),t.text&&(e.textContent=t.text),p(e,t.properties,r),t.properties&&t.properties.afterCreate&&t.properties.afterCreate.call(t.properties.bind||t.properties,e,r,t.vnodeSelector,t.properties,t.children)}function s(r,o){return{getLastRender:function(){return r},update:function(e){if(r.vnodeSelector!==e.vnodeSelector)throw 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 t=r;x(t,r=e,o,t.domNode.parentNode,[t])},domNode:r.domNode}}function u(e){return l(A,e)}var p=function(e,t,r){if(t){for(var o=r.eventHandlerInterceptor,n=Object.keys(t).filter(k),i=n.length,d=0;d<i;d++){var a,s=n[d],p=t[s];if("className"===s)throw Error('Property "className" is not supported, use "class".');if("class"===s)C(e,p,!0);else if("classes"===s)for(var c=Object.keys(p),l=c.length,f=0;f<l;f++){var u=c[f];p[u]&&e.classList.add(u)}else if("styles"===s)for(var v=Object.keys(p),h=v.length,f=0;f<h;f++){var m=v[f],g=p[m];g&&(E(g),r.styleApplyer(e,m,g))}else"key"!==s&&null!=p&&("function"==(a=typeof p)?(s.lastIndexOf("on",0)||o&&(p=o(s,p,e,t)),e[s]=p):r.namespace===S?"href"===s?e.setAttributeNS(w,s,p):e.setAttribute(s,p):"string"==a&&"value"!==s&&"innerHTML"!==s?e.setAttribute(s,p):e[s]=p)}if(t.on)for(var y=0,N=Object.entries(t.on);y<N.length;y++){var b=N[y],x=b[0],b=b[1],A="function"==typeof b?b:b.listener;(A=o?o(x,A,e,t):A)&&e.addEventListener(x,A,"function"==typeof b?void 0:b.options)}}},c=function(e,t,r){if(t)for(var o=0,n=t;o<n.length;o++){var i=n[o];b(i,e,void 0,r)}},b=function(e,t,r,o){var n,i=0,d=e.vnodeSelector,a=t.ownerDocument;if(""===d)e.domNode?e.domNode.nodeValue=e.text:(n=e.domNode=a.createTextNode(e.text),void 0!==r?t.insertBefore(n,r):t.appendChild(n));else{for(var s=0;s<=d.length;++s){var p,c=d[0|s]||"";s!==d.length&&"."!=c&&"#"!=c||(c=d[0|i-1]||"",p=d.slice(i,s),"."==c?n.classList.add(p):"#"==c?n.id=p:(void 0!==(o="svg"===p?l(o,{namespace:S}):o).namespace?n=e.domNode=a.createElementNS(o.namespace,p):(n=e.domNode=e.domNode||(null!=(c=e.properties)&&c.is?a.createElement(p,{is:e.properties.is}):a.createElement(p)),"input"===p&&e.properties&&void 0!==e.properties.type&&n.setAttribute("type",e.properties.type)),void 0!==r?t.insertBefore(n,r):n.parentNode!==t&&t.appendChild(n)),i=s+1)}f(n,e,o)}},C=function(t,e,r){e&&e.split(" ").forEach(function(e){e&&t.classList.toggle(e,r)})},x=function(t,e,r,o,n){var i=t.domNode;if(t!==e){var d=!1;if(""===e.vnodeSelector){if(e.text!==t.text){var a=i.ownerDocument.createTextNode(e.text);try{o.replaceChild(a,i)}catch(e){o.replaceChild(a,o.childNodes[n.indexOf(t)])}return e.domNode=a,!0}e.domNode=i}else e.vnodeSelector.lastIndexOf("svg",0)||(r=l(r,{namespace:S})),t.text!==e.text&&(d=!0,void 0===e.text?i.removeChild(i.firstChild):i.textContent=e.text),e.domNode=i,d=((e,t,r,o,n)=>{if(r===o)return!1;for(var i,d=(r=r||v).length,a=(o=o||v).length,s=0,p=0,c=!1;p<a;){var l=s<d?r[s]:void 0,f=o[p];if(void 0!==l&&h(l,f))c=x(l,f,n,t,r)||c,s++;else{var u=m(r,f,s+1);if(u<0)b(f,t,s<d?r[s].domNode:void 0,n),y(f),g(o,p,e,"added");else{for(i=s;i<u;i++)N(r[i]),g(r,i,e,"removed");c=x(r[u],f,n,t,r)||c,s=u+1}}p++}if(s<d)for(i=s;i<d;i++)N(r[i]),g(r,i,e,"removed");return c})(e,i,t.children,e.children,r)||d,d=((e,t,r,o)=>{if(r){for(var n=!1,i=Object.keys(r).filter(k),d=i.length,a=0;a<d;a++){var s,p=i[a],c=r[p],l=t[p];if("class"===p)l!==c&&(C(e,l,!1),C(e,c,!0));else if("classes"===p)for(var f=e.classList,u=Object.keys(c),v=u.length,h=0;h<v;h++){var m=u[h],g=!!c[m];g!=!!l[m]&&(n=!0,g?f.add(m):f.remove(m))}else if("styles"===p)for(var y=Object.keys(c),N=y.length,h=0;h<N;h++){var b=y[h],x=c[b];x!==l[b]&&(n=!0,x?(E(x),o.styleApplyer(e,b,x)):o.styleApplyer(e,b,""))}else c||"string"!=typeof l||(c=""),"value"===p?(e[p]!==c&&c!==l&&(e[p]=c),c!==l&&(n=!0)):c===l||"function"==(s=typeof c)&&o.eventHandlerInterceptor||(o.namespace===S?"href"===p?e.setAttributeNS(w,p,c):e.setAttribute(p,c):"string"==s&&"innerHTML"!==p?"role"===p&&""===c?e.removeAttribute(p):e.setAttribute(p,c):e[p]!==c&&(e[p]=c),n=!0)}return n}})(i,t.properties,e.properties,r)||d,e.properties&&e.properties.afterUpdate&&e.properties.afterUpdate.call(e.properties.bind||e.properties,i,r,e.vnodeSelector,e.properties,e.children);d&&e.properties&&e.properties.updateAnimation&&e.properties.updateAnimation(i,e.properties,t.properties)}return!1},A={namespace:void 0,performanceLogger:function(){},eventHandlerInterceptor:void 0,styleApplyer:function(e,t,r){"-"==(t[0]||"")?e.style.setProperty(t,r):e.style[t]=r}},O={create:function(e,t){return t=u(t),b(e,document.createElement("div"),void 0,t),s(e,t)},append:function(e,t,r){return r=u(r),b(t,e,void 0,r),s(t,r)},insertBefore:function(e,t,r){return r=u(r),b(t,e.parentNode,e,r),s(t,r)},merge:function(e,t,r){return r=u(r),f(t.domNode=e,t,r),s(t,r)},replace:function(e,t,r){return r=u(r),b(t,e.parentNode,e,r),e.parentNode.removeChild(e),s(t,r)}};e.createCache=function(){var o,n;return{invalidate:function(){o=n=void 0},result:function(e,t){if(o)for(var r=0;r<e.length;r++)o[r]!==e[r]&&(n=void 0);return n||(n=t(),o=e),n}}},e.createMapping=function(c,l,f){var u=[],v=[];return{results:v,map:function(e){for(var t=e.map(c),r=v.slice(),o=0,n=0;n<e.length;n++){var i=e[n],d=t[n];if(d===u[o])v[n]=r[o],f(i,r[o],n),o++;else{for(var a=!1,s=1;s<u.length+1;s++){var p=(o+s)%u.length;if(u[p]===d){v[n]=r[p],f(e[n],r[p],n),o=1+p,a=!0;break}}a||(v[n]=l(i,n))}}v.length=e.length,u=t}}},e.createProjector=function(e){function r(e,t,r){var i,d,a;function n(e){a("domEvent",e);var t,r,o=i,n=((e,t)=>{for(var r=[];e&&e!==t;)r.push(e),e=e.parentNode;return r})(e.currentTarget,o.domNode),o=(n.reverse(),o=o.getLastRender(),r=o,n.forEach(function(t){r=r&&r.children?r.children.find(function(e){return e.domNode===t}):void 0}),r);return d.scheduleRender(),o&&(t=(null!=(n=null!=(n=o.properties["on".concat(e.type)])?n:o.properties.on[e.type].listener)?n:o.properties.on[e.type]).apply(o.properties.bind||this,arguments)),a("domEventProcessed",e),t}s.eventHandlerInterceptor=(d=f,a=p,function(e,t,r,o){return n}),i=e(t,r(),s),c.push(i),l.push(r)}function t(){if(o=void 0,n){n=!1,p("renderStart",void 0);for(var e=0;e<c.length;e++){var t=l[e]();p("rendered",void 0),c[e].update(t),p("patched",void 0)}p("renderDone",void 0),n=!0}}var o,s=u(e),p=s.performanceLogger,n=!0,i=!1,c=[],l=[],f={renderNow:t,scheduleRender:function(){o||i||(o=requestAnimationFrame(t))},stop:function(){o&&(cancelAnimationFrame(o),o=void 0),i=!0},resume:function(){n=!(i=!1),f.scheduleRender()},append:function(e,t){r(O.append,e,t)},insertBefore:function(e,t){r(O.insertBefore,e,t)},merge:function(e,t){r(O.merge,e,t)},replace:function(e,t){r(O.replace,e,t)},detach:function(e){for(var t=0;t<l.length;t++)if(l[t]===e)return l.splice(t,1),c.splice(t,1)[0];throw Error("renderFunction was not found")}};return f},e.dom=O,e.h=function(e,t,r){if(Array.isArray(t))r=t,t=void 0;else if(t&&("string"==typeof t||t.vnodeSelector)||r&&("string"==typeof r||r.vnodeSelector))throw Error("h called with invalid arguments");var o,n;return r&&1===r.length&&"string"==typeof r[0]?o=r[0]:r&&(function e(t,r,o){for(var n=0,i=r.length;n<i;n++){var d=r[n];Array.isArray(d)?e(t,d,o):null!=d&&!1!==d&&("string"==typeof d&&(d={vnodeSelector:"",properties:void 0,children:void 0,text:d.toString(),domNode:null}),o.push(d))}}(e,r,n=[]),0===n.length)&&(n=void 0),{vnodeSelector:e,properties:t,children:n,text:""===o?void 0:o,domNode:null}}});

package/dist/projection.js

@@ -59,11 +59,7 @@ var checkDistinguishable = function (childNodes, indexToCheck, parentVNode, oper
             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,
-                    };
+                    throw Object.assign(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 });
                 }
             }
         }
@@ -126,6 +122,7 @@ var nodeToRemove = function (vNode) {
     }
 };
 var vnodeOnlyProps = [
+    "on",
     "afterCreate",
     "afterUpdate",
     "afterRemoved",
@@ -176,19 +173,6 @@ var setProperties = function (domNode, properties, projectionOptions) {
                 }
             }
         }
-        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") {
@@ -217,6 +201,19 @@ var setProperties = function (domNode, properties, projectionOptions) {
             }
         }
     }
+    if (properties.on) {
+        // 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);
+            }
+        }
+    }
 };
 var addChildren = function (domNode, children, projectionOptions) {
     if (!children) {
@@ -448,7 +445,8 @@ var updateChildren = function (vnode, domNode, oldChildren, newChildren, project
         var oldChild = oldIndex < oldChildrenLength ? oldChildren[oldIndex] : undefined;
         var newChild = newChildren[newIndex];
         if (oldChild !== undefined && same(oldChild, newChild)) {
-            textUpdated = updateDom(oldChild, newChild, projectionOptions) || textUpdated;
+            textUpdated =
+                updateDom(oldChild, newChild, projectionOptions, domNode, oldChildren) || textUpdated;
             oldIndex++;
         }
         else {
@@ -460,7 +458,8 @@ var updateChildren = function (vnode, domNode, oldChildren, newChildren, project
                     checkDistinguishable(oldChildren, i, vnode, "removed");
                 }
                 textUpdated =
-                    updateDom(oldChildren[findOldIndex], newChild, projectionOptions) || textUpdated;
+                    updateDom(oldChildren[findOldIndex], newChild, projectionOptions, domNode, oldChildren) ||
+                        textUpdated;
                 oldIndex = findOldIndex + 1;
             }
             else {
@@ -481,7 +480,7 @@ var updateChildren = function (vnode, domNode, oldChildren, newChildren, project
     }
     return textUpdated;
 };
-updateDom = function (previous, vnode, projectionOptions) {
+updateDom = function (previous, vnode, projectionOptions, parentNode, oldChildren) {
     var domNode = previous.domNode;
     var textUpdated = false;
     if (previous === vnode) {
@@ -491,7 +490,13 @@ updateDom = function (previous, vnode, projectionOptions) {
     if (vnode.vnodeSelector === "") {
         if (vnode.text !== previous.text) {
             var newTextNode = domNode.ownerDocument.createTextNode(vnode.text);
-            domNode.parentNode.replaceChild(newTextNode, domNode);
+            try {
+                parentNode.replaceChild(newTextNode, domNode);
+            }
+            catch (_a) {
+                // Text nodes can be substituted by google translate
+                parentNode.replaceChild(newTextNode, parentNode.childNodes[oldChildren.indexOf(previous)]);
+            }
             vnode.domNode = newTextNode;
             textUpdated = true;
             return textUpdated;
@@ -545,7 +550,7 @@ export var createProjection = function (vnode, projectionOptions) {
             }
             var previousVNode = vnode;
             vnode = updatedVnode;
-            updateDom(previousVNode, updatedVnode, projectionOptions);
+            updateDom(previousVNode, updatedVnode, projectionOptions, previousVNode.domNode.parentNode, [previousVNode]);
         },
         domNode: vnode.domNode,
     };