maquette 4.1.2 → 4.1.4

package/dist/maquette.cjs.js

@@ -1,5 +1,37 @@
 '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");
@@ -61,11 +93,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 });
                 }
             }
         }
@@ -128,6 +156,7 @@ var nodeToRemove = function (vNode) {
     }
 };
 var vnodeOnlyProps = [
+    "on",
     "afterCreate",
     "afterUpdate",
     "afterRemoved",
@@ -178,19 +207,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") {
@@ -219,6 +235,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) {
@@ -450,7 +479,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 {
@@ -462,7 +492,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 {
@@ -483,7 +514,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) {
@@ -493,7 +524,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;
@@ -547,7 +584,7 @@ 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,
     };
@@ -573,13 +610,13 @@ var applyDefaultProjectionOptions = function (projectorOptions) {
 };
 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);
@@ -587,13 +624,13 @@ var dom = {
         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);
@@ -601,13 +638,13 @@ var dom = {
         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);
@@ -615,15 +652,15 @@ var dom = {
         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);
@@ -632,13 +669,13 @@ var dom = {
         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);
@@ -704,6 +741,57 @@ function h(selector, properties, children) {
     };
 }
 
+/**
+ * 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) {
@@ -712,19 +800,12 @@ var createParentNodePath = function (node, rootNode) {
     }
     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;
@@ -751,9 +832,9 @@ var createEventHandlerInterceptor = function (projector, getProjection, performa
     }
 };
 /**
- * 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.
  */
@@ -838,89 +919,6 @@ var createProjector = function (projectorOptions) {
     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;