From 899d429c4823cd29332998827d65f46fd4560510 Mon Sep 17 00:00:00 2001
From: Gianluca Guarini <gianluca.guarini@gmail.com>
Date: Sat, 14 Sep 2024 00:42:33 +0200
Subject: [PATCH] updated: fix benchmarks

---
 benchmarks/bundle.js                         | 3277 ++++++++++++++++++
 benchmarks/{events.cjs => events.js}         |   43 +-
 benchmarks/{if.cjs => if.js}                 |   32 +-
 benchmarks/index.cjs                         |   33 -
 benchmarks/index.html                        |   13 +
 benchmarks/index.js                          |   45 +
 benchmarks/{keyed.list.cjs => keyed.list.js} |   38 +-
 benchmarks/{list.cjs => list.js}             |   36 +-
 benchmarks/mount.cjs                         |   37 -
 benchmarks/mount.js                          |   41 +
 benchmarks/old-version.cjs                   | 1769 ----------
 benchmarks/old-version.js                    | 1321 +++++++
 benchmarks/rollup.config.js                  |   21 +
 package.json                                 |    3 +-
 polyfills/range.cjs                          |   22 -
 15 files changed, 4802 insertions(+), 1929 deletions(-)
 create mode 100644 benchmarks/bundle.js
 rename benchmarks/{events.cjs => events.js} (73%)
 rename benchmarks/{if.cjs => if.js} (58%)
 delete mode 100644 benchmarks/index.cjs
 create mode 100644 benchmarks/index.html
 create mode 100644 benchmarks/index.js
 rename benchmarks/{keyed.list.cjs => keyed.list.js} (70%)
 rename benchmarks/{list.cjs => list.js} (69%)
 delete mode 100644 benchmarks/mount.cjs
 create mode 100644 benchmarks/mount.js
 delete mode 100644 benchmarks/old-version.cjs
 create mode 100644 benchmarks/old-version.js
 create mode 100644 benchmarks/rollup.config.js
 delete mode 100644 polyfills/range.cjs

diff --git a/benchmarks/bundle.js b/benchmarks/bundle.js
new file mode 100644
index 0000000..a2eb646
--- /dev/null
+++ b/benchmarks/bundle.js
@@ -0,0 +1,3277 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jsdom-global'), require('benchmark')) :
+  typeof define === 'function' && define.amd ? define(['jsdom-global', 'benchmark'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.jsdomGlobal, global.Benchmark));
+})(this, (function (jsdomGlobal, Benchmark) { 'use strict';
+
+  /**
+   * Convert a string from camel case to dash-case
+   * @param   {string} string - probably a component tag name
+   * @returns {string} component name normalized
+   */
+
+  /**
+   * Convert a string containing dashes to camel case
+   * @param   {string} string - input string
+   * @returns {string} my-string -> myString
+   */
+  function dashToCamelCase(string) {
+    return string.replace(/-(\w)/g, (_, c) => c.toUpperCase())
+  }
+
+  /**
+   * Move all the child nodes from a source tag to another
+   * @param   {HTMLElement} source - source node
+   * @param   {HTMLElement} target - target node
+   * @returns {undefined} it's a void method ¯\_(ツ)_/¯
+   */
+
+  // Ignore this helper because it's needed only for svg tags
+  function moveChildren(source, target) {
+    // eslint-disable-next-line fp/no-loops
+    while (source.firstChild) target.appendChild(source.firstChild);
+  }
+
+  /**
+   * Remove the child nodes from any DOM node
+   * @param   {HTMLElement} node - target node
+   * @returns {undefined}
+   */
+  function cleanNode(node) {
+    // eslint-disable-next-line fp/no-loops
+    while (node.firstChild) node.removeChild(node.firstChild);
+  }
+
+  /**
+   * Clear multiple children in a node
+   * @param   {HTMLElement[]} children - direct children nodes
+   * @returns {undefined}
+   */
+  function clearChildren(children) {
+    // eslint-disable-next-line fp/no-loops,fp/no-let
+    for (let i = 0; i < children.length; i++) removeChild(children[i]);
+  }
+
+  /**
+   * Remove a node
+   * @param {HTMLElement}node - node to remove
+   * @returns {undefined}
+   */
+  const removeChild = (node) => node.remove();
+
+  /**
+   * Insert before a node
+   * @param {HTMLElement} newNode - node to insert
+   * @param {HTMLElement} refNode - ref child
+   * @returns {undefined}
+   */
+  const insertBefore = (newNode, refNode) =>
+    refNode &&
+    refNode.parentNode &&
+    refNode.parentNode.insertBefore(newNode, refNode);
+
+  /**
+   * Replace a node
+   * @param {HTMLElement} newNode - new node to add to the DOM
+   * @param {HTMLElement} replaced - node to replace
+   * @returns {undefined}
+   */
+  const replaceChild = (newNode, replaced) =>
+    replaced &&
+    replaced.parentNode &&
+    replaced.parentNode.replaceChild(newNode, replaced);
+
+  // Riot.js constants that can be used across more modules
+
+  const IS_PURE_SYMBOL = Symbol('pure'),
+    PARENT_KEY_SYMBOL = Symbol('parent');
+
+  const EACH = 0;
+  const IF = 1;
+  const SIMPLE = 2;
+  const TAG = 3;
+  const SLOT = 4;
+
+  const bindingTypes = {
+    EACH,
+    IF,
+    SIMPLE,
+    TAG,
+    SLOT,
+  };
+
+  const ATTRIBUTE = 0;
+  const EVENT = 1;
+  const TEXT = 2;
+  const VALUE = 3;
+
+  const expressionTypes = {
+    ATTRIBUTE,
+    EVENT,
+    TEXT,
+    VALUE,
+  };
+
+  /**
+   * Quick type checking
+   * @param   {*} element - anything
+   * @param   {string} type - type definition
+   * @returns {boolean} true if the type corresponds
+   */
+  function checkType(element, type) {
+    return typeof element === type
+  }
+
+  /**
+   * Check if an element is part of an svg
+   * @param   {HTMLElement}  el - element to check
+   * @returns {boolean} true if we are in an svg context
+   */
+  function isSvg(el) {
+    const owner = el.ownerSVGElement;
+
+    return !!owner || owner === null
+  }
+
+  /**
+   * Check if an element is a template tag
+   * @param   {HTMLElement}  el - element to check
+   * @returns {boolean} true if it's a <template>
+   */
+  function isTemplate(el) {
+    return el.tagName.toLowerCase() === 'template'
+  }
+
+  /**
+   * Check that will be passed if its argument is a function
+   * @param   {*} value - value to check
+   * @returns {boolean} - true if the value is a function
+   */
+  function isFunction(value) {
+    return checkType(value, 'function')
+  }
+
+  /**
+   * Check if a value is a Boolean
+   * @param   {*}  value - anything
+   * @returns {boolean} true only for the value is a boolean
+   */
+  function isBoolean(value) {
+    return checkType(value, 'boolean')
+  }
+
+  /**
+   * Check if a value is an Object
+   * @param   {*}  value - anything
+   * @returns {boolean} true only for the value is an object
+   */
+  function isObject(value) {
+    return !isNil(value) && value.constructor === Object
+  }
+
+  /**
+   * Check if a value is null or undefined
+   * @param   {*}  value - anything
+   * @returns {boolean} true only for the 'undefined' and 'null' types
+   */
+  function isNil(value) {
+    return value === null || value === undefined
+  }
+
+  /**
+   * Helper function to set an immutable property
+   * @param   {Object} source - object where the new property will be set
+   * @param   {string} key - object key where the new property will be stored
+   * @param   {*} value - value of the new property
+   * @param   {Object} options - set the property overriding the default options
+   * @returns {Object} - the original object modified
+   */
+  function defineProperty(source, key, value, options = {}) {
+    /* eslint-disable fp/no-mutating-methods */
+    Object.defineProperty(source, key, {
+      value,
+      enumerable: false,
+      writable: false,
+      configurable: true,
+      ...options,
+    });
+    /* eslint-enable fp/no-mutating-methods */
+
+    return source
+  }
+
+  /**
+   * Throw an error with a descriptive message
+   * @param   { string } message - error message
+   * @param   { string } cause - optional error cause object
+   * @returns { undefined } hoppla... at this point the program should stop working
+   */
+  function panic(message, cause) {
+    throw new Error(message, { cause })
+  }
+  /**
+   * Returns the memoized (cached) function.
+   * // borrowed from https://www.30secondsofcode.org/js/s/memoize
+   * @param {Function} fn - function to memoize
+   * @returns {Function} memoize function
+   */
+  function memoize(fn) {
+    const cache = new Map();
+    const cached = (val) => {
+      return cache.has(val)
+        ? cache.get(val)
+        : cache.set(val, fn.call(this, val)) && cache.get(val)
+    };
+    cached.cache = cache;
+    return cached
+  }
+
+  /**
+   * Evaluate a list of attribute expressions
+   * @param   {Array} attributes - attribute expressions generated by the riot compiler
+   * @returns {Object} key value pairs with the result of the computation
+   */
+  function evaluateAttributeExpressions(attributes) {
+    return attributes.reduce((acc, attribute) => {
+      const { value, type } = attribute;
+
+      switch (true) {
+        // spread attribute
+        case !attribute.name && type === ATTRIBUTE:
+          return {
+            ...acc,
+            ...value,
+          }
+        // value attribute
+        case type === VALUE:
+          acc.value = attribute.value;
+          break
+        // normal attributes
+        default:
+          acc[dashToCamelCase(attribute.name)] = attribute.value;
+      }
+
+      return acc
+    }, {})
+  }
+
+  const HEAD_SYMBOL$1 = Symbol();
+  const TAIL_SYMBOL$1 = Symbol();
+  const REF_ATTRIBUTE = 'ref';
+
+  /**
+   * Create the <template> fragments text nodes
+   * @return {Object} {{head: Text, tail: Text}}
+   */
+  function createHeadTailPlaceholders$1() {
+    const head = document.createTextNode('');
+    const tail = document.createTextNode('');
+
+    head[HEAD_SYMBOL$1] = true;
+    tail[TAIL_SYMBOL$1] = true;
+
+    return { head, tail }
+  }
+
+  /**
+   * Create the template meta object in case of <template> fragments
+   * @param   {TemplateChunk} componentTemplate - template chunk object
+   * @returns {Object} the meta property that will be passed to the mount function of the TemplateChunk
+   */
+  function createTemplateMeta$1(componentTemplate) {
+    const fragment = componentTemplate.dom.cloneNode(true);
+    const { head, tail } = createHeadTailPlaceholders$1();
+
+    return {
+      avoidDOMInjection: true,
+      fragment,
+      head,
+      tail,
+      children: [head, ...Array.from(fragment.childNodes), tail],
+    }
+  }
+
+  /* c8 ignore start */
+  /**
+   * ISC License
+   *
+   * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
+   *
+   * Permission to use, copy, modify, and/or distribute this software for any
+   * purpose with or without fee is hereby granted, provided that the above
+   * copyright notice and this permission notice appear in all copies.
+   *
+   * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+   * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+   * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+   * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+   * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+   * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+   * PERFORMANCE OF THIS SOFTWARE.
+   */
+
+  // fork of https://github.com/WebReflection/udomdiff version 1.1.0
+  // due to https://github.com/WebReflection/udomdiff/pull/2
+  /* eslint-disable */
+
+  /**
+   * @param {Node[]} a The list of current/live children
+   * @param {Node[]} b The list of future children
+   * @param {(entry: Node, action: number) => Node} get
+   * The callback invoked per each entry related DOM operation.
+   * @param {Node} [before] The optional node used as anchor to insert before.
+   * @returns {Node[]} The same list of future children.
+   */
+  const udomdiff$1 = (a, b, get, before) => {
+    const bLength = b.length;
+    let aEnd = a.length;
+    let bEnd = bLength;
+    let aStart = 0;
+    let bStart = 0;
+    let map = null;
+    while (aStart < aEnd || bStart < bEnd) {
+      // append head, tail, or nodes in between: fast path
+      if (aEnd === aStart) {
+        // we could be in a situation where the rest of nodes that
+        // need to be added are not at the end, and in such case
+        // the node to `insertBefore`, if the index is more than 0
+        // must be retrieved, otherwise it's gonna be the first item.
+        const node =
+          bEnd < bLength
+            ? bStart
+              ? get(b[bStart - 1], -0).nextSibling
+              : get(b[bEnd - bStart], 0)
+            : before;
+        while (bStart < bEnd) insertBefore(get(b[bStart++], 1), node);
+      }
+      // remove head or tail: fast path
+      else if (bEnd === bStart) {
+        while (aStart < aEnd) {
+          // remove the node only if it's unknown or not live
+          if (!map || !map.has(a[aStart])) removeChild(get(a[aStart], -1));
+          aStart++;
+        }
+      }
+      // same node: fast path
+      else if (a[aStart] === b[bStart]) {
+        aStart++;
+        bStart++;
+      }
+      // same tail: fast path
+      else if (a[aEnd - 1] === b[bEnd - 1]) {
+        aEnd--;
+        bEnd--;
+      }
+      // The once here single last swap "fast path" has been removed in v1.1.0
+      // https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
+      // reverse swap: also fast path
+      else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+        // this is a "shrink" operation that could happen in these cases:
+        // [1, 2, 3, 4, 5]
+        // [1, 4, 3, 2, 5]
+        // or asymmetric too
+        // [1, 2, 3, 4, 5]
+        // [1, 2, 3, 5, 6, 4]
+        const node = get(a[--aEnd], -1).nextSibling;
+        insertBefore(get(b[bStart++], 1), get(a[aStart++], -1).nextSibling);
+        insertBefore(get(b[--bEnd], 1), node);
+        // mark the future index as identical (yeah, it's dirty, but cheap 👍)
+        // The main reason to do this, is that when a[aEnd] will be reached,
+        // the loop will likely be on the fast path, as identical to b[bEnd].
+        // In the best case scenario, the next loop will skip the tail,
+        // but in the worst one, this node will be considered as already
+        // processed, bailing out pretty quickly from the map index check
+        a[aEnd] = b[bEnd];
+      }
+      // map based fallback, "slow" path
+      else {
+        // the map requires an O(bEnd - bStart) operation once
+        // to store all future nodes indexes for later purposes.
+        // In the worst case scenario, this is a full O(N) cost,
+        // and such scenario happens at least when all nodes are different,
+        // but also if both first and last items of the lists are different
+        if (!map) {
+          map = new Map();
+          let i = bStart;
+          while (i < bEnd) map.set(b[i], i++);
+        }
+        // if it's a future node, hence it needs some handling
+        if (map.has(a[aStart])) {
+          // grab the index of such node, 'cause it might have been processed
+          const index = map.get(a[aStart]);
+          // if it's not already processed, look on demand for the next LCS
+          if (bStart < index && index < bEnd) {
+            let i = aStart;
+            // counts the amount of nodes that are the same in the future
+            let sequence = 1;
+            while (++i < aEnd && i < bEnd && map.get(a[i]) === index + sequence)
+              sequence++;
+            // effort decision here: if the sequence is longer than replaces
+            // needed to reach such sequence, which would brings again this loop
+            // to the fast path, prepend the difference before a sequence,
+            // and move only the future list index forward, so that aStart
+            // and bStart will be aligned again, hence on the fast path.
+            // An example considering aStart and bStart are both 0:
+            // a: [1, 2, 3, 4]
+            // b: [7, 1, 2, 3, 6]
+            // this would place 7 before 1 and, from that time on, 1, 2, and 3
+            // will be processed at zero cost
+            if (sequence > index - bStart) {
+              const node = get(a[aStart], 0);
+              while (bStart < index) insertBefore(get(b[bStart++], 1), node);
+            }
+            // if the effort wasn't good enough, fallback to a replace,
+            // moving both source and target indexes forward, hoping that some
+            // similar node will be found later on, to go back to the fast path
+            else {
+              replaceChild(get(b[bStart++], 1), get(a[aStart++], -1));
+            }
+          }
+          // otherwise move the source forward, 'cause there's nothing to do
+          else aStart++;
+        }
+        // this node has no meaning in the future list, so it's more than safe
+        // to remove it, and check the next live node out instead, meaning
+        // that only the live list index should be forwarded
+        else removeChild(get(a[aStart++], -1));
+      }
+    }
+    return b
+  };
+
+  const UNMOUNT_SCOPE$1 = Symbol('unmount');
+
+  const EachBinding$1 = {
+    // dynamic binding properties
+    // childrenMap: null,
+    // node: null,
+    // root: null,
+    // condition: null,
+    // evaluate: null,
+    // template: null,
+    // isTemplateTag: false,
+    nodes: [],
+    // getKey: null,
+    // indexName: null,
+    // itemName: null,
+    // afterPlaceholder: null,
+    // placeholder: null,
+
+    // API methods
+    mount(scope, parentScope) {
+      return this.update(scope, parentScope)
+    },
+    update(scope, parentScope) {
+      const { placeholder, nodes, childrenMap } = this;
+      const collection = scope === UNMOUNT_SCOPE$1 ? null : this.evaluate(scope);
+      const items = collection ? Array.from(collection) : [];
+
+      // prepare the diffing
+      const { newChildrenMap, batches, futureNodes } = createPatch$1(
+        items,
+        scope,
+        parentScope,
+        this,
+      );
+
+      // patch the DOM only if there are new nodes
+      udomdiff$1(
+        nodes,
+        futureNodes,
+        patch$1(Array.from(childrenMap.values()), parentScope),
+        placeholder,
+      );
+
+      // trigger the mounts and the updates
+      batches.forEach((fn) => fn());
+
+      // update the children map
+      this.childrenMap = newChildrenMap;
+      this.nodes = futureNodes;
+
+      return this
+    },
+    unmount(scope, parentScope) {
+      this.update(UNMOUNT_SCOPE$1, parentScope);
+
+      return this
+    },
+  };
+
+  /**
+   * Patch the DOM while diffing
+   * @param   {any[]} redundant - list of all the children (template, nodes, context) added via each
+   * @param   {*} parentScope - scope of the parent template
+   * @returns {Function} patch function used by domdiff
+   */
+  function patch$1(redundant, parentScope) {
+    return (item, info) => {
+      if (info < 0) {
+        // get the last element added to the childrenMap saved previously
+        const element = redundant[redundant.length - 1];
+
+        if (element) {
+          // get the nodes and the template in stored in the last child of the childrenMap
+          const { template, nodes, context } = element;
+          // remove the last node (notice <template> tags might have more children nodes)
+          nodes.pop();
+
+          // notice that we pass null as last argument because
+          // the root node and its children will be removed by domdiff
+          if (!nodes.length) {
+            // we have cleared all the children nodes and we can unmount this template
+            redundant.pop();
+            template.unmount(context, parentScope, null);
+          }
+        }
+      }
+
+      return item
+    }
+  }
+
+  /**
+   * Check whether a template must be filtered from a loop
+   * @param   {Function} condition - filter function
+   * @param   {Object} context - argument passed to the filter function
+   * @returns {boolean} true if this item should be skipped
+   */
+  function mustFilterItem$1(condition, context) {
+    return condition ? !condition(context) : false
+  }
+
+  /**
+   * Extend the scope of the looped template
+   * @param   {Object} scope - current template scope
+   * @param   {Object} options - options
+   * @param   {string} options.itemName - key to identify the looped item in the new context
+   * @param   {string} options.indexName - key to identify the index of the looped item
+   * @param   {number} options.index - current index
+   * @param   {*} options.item - collection item looped
+   * @returns {Object} enhanced scope object
+   */
+  function extendScope$1(scope, { itemName, indexName, index, item }) {
+    defineProperty(scope, itemName, item);
+    if (indexName) defineProperty(scope, indexName, index);
+
+    return scope
+  }
+
+  /**
+   * Loop the current template items
+   * @param   {Array} items - expression collection value
+   * @param   {*} scope - template scope
+   * @param   {*} parentScope - scope of the parent template
+   * @param   {EachBinding} binding - each binding object instance
+   * @returns {Object} data
+   * @returns {Map} data.newChildrenMap - a Map containing the new children template structure
+   * @returns {Array} data.batches - array containing the template lifecycle functions to trigger
+   * @returns {Array} data.futureNodes - array containing the nodes we need to diff
+   */
+  function createPatch$1(items, scope, parentScope, binding) {
+    const {
+      condition,
+      template,
+      childrenMap,
+      itemName,
+      getKey,
+      indexName,
+      root,
+      isTemplateTag,
+    } = binding;
+    const newChildrenMap = new Map();
+    const batches = [];
+    const futureNodes = [];
+
+    items.forEach((item, index) => {
+      const context = extendScope$1(Object.create(scope), {
+        itemName,
+        indexName,
+        index,
+        item,
+      });
+      const key = getKey ? getKey(context) : index;
+      const oldItem = childrenMap.get(key);
+      const nodes = [];
+
+      if (mustFilterItem$1(condition, context)) {
+        return
+      }
+
+      const mustMount = !oldItem;
+      const componentTemplate = oldItem ? oldItem.template : template.clone();
+      const el = componentTemplate.el || root.cloneNode();
+      const meta =
+        isTemplateTag && mustMount
+          ? createTemplateMeta$1(componentTemplate)
+          : componentTemplate.meta;
+
+      if (mustMount) {
+        batches.push(() =>
+          componentTemplate.mount(el, context, parentScope, meta),
+        );
+      } else {
+        batches.push(() => componentTemplate.update(context, parentScope));
+      }
+
+      // create the collection of nodes to update or to add
+      // in case of template tags we need to add all its children nodes
+      if (isTemplateTag) {
+        nodes.push(...meta.children);
+      } else {
+        nodes.push(el);
+      }
+
+      // delete the old item from the children map
+      childrenMap.delete(key);
+      futureNodes.push(...nodes);
+
+      // update the children map
+      newChildrenMap.set(key, {
+        nodes,
+        template: componentTemplate,
+        context,
+        index,
+      });
+    });
+
+    return {
+      newChildrenMap,
+      batches,
+      futureNodes,
+    }
+  }
+
+  function create$6$1(
+    node,
+    { evaluate, condition, itemName, indexName, getKey, template },
+  ) {
+    const placeholder = document.createTextNode('');
+    const root = node.cloneNode();
+
+    insertBefore(placeholder, node);
+    removeChild(node);
+
+    return {
+      ...EachBinding$1,
+      childrenMap: new Map(),
+      node,
+      root,
+      condition,
+      evaluate,
+      isTemplateTag: isTemplate(root),
+      template: template.createDOM(node),
+      getKey,
+      indexName,
+      itemName,
+      placeholder,
+    }
+  }
+
+  /**
+   * Binding responsible for the `if` directive
+   */
+  const IfBinding$1 = {
+    // dynamic binding properties
+    // node: null,
+    // evaluate: null,
+    // isTemplateTag: false,
+    // placeholder: null,
+    // template: null,
+
+    // API methods
+    mount(scope, parentScope) {
+      return this.update(scope, parentScope)
+    },
+    update(scope, parentScope) {
+      const value = !!this.evaluate(scope);
+      const mustMount = !this.value && value;
+      const mustUnmount = this.value && !value;
+      const mount = () => {
+        const pristine = this.node.cloneNode();
+
+        insertBefore(pristine, this.placeholder);
+        this.template = this.template.clone();
+        this.template.mount(pristine, scope, parentScope);
+      };
+
+      switch (true) {
+        case mustMount:
+          mount();
+          break
+        case mustUnmount:
+          this.unmount(scope);
+          break
+        default:
+          if (value) this.template.update(scope, parentScope);
+      }
+
+      this.value = value;
+
+      return this
+    },
+    unmount(scope, parentScope) {
+      this.template.unmount(scope, parentScope, true);
+
+      return this
+    },
+  };
+
+  function create$5$1(node, { evaluate, template }) {
+    const placeholder = document.createTextNode('');
+
+    insertBefore(placeholder, node);
+    removeChild(node);
+
+    return {
+      ...IfBinding$1,
+      node,
+      evaluate,
+      placeholder,
+      template: template.createDOM(node),
+    }
+  }
+
+  /* c8 ignore next */
+  const ElementProto$1 = typeof Element === 'undefined' ? {} : Element.prototype;
+  const isNativeHtmlProperty$1 = memoize(
+    (name) => ElementProto$1.hasOwnProperty(name), // eslint-disable-line
+  );
+
+  /**
+   * Add all the attributes provided
+   * @param   {HTMLElement} node - target node
+   * @param   {Object} attributes - object containing the attributes names and values
+   * @returns {undefined} sorry it's a void function :(
+   */
+  function setAllAttributes$1(node, attributes) {
+    Object.keys(attributes).forEach((name) =>
+      attributeExpression$1(node, { name }, attributes[name]),
+    );
+  }
+
+  /**
+   * Remove all the attributes provided
+   * @param   {HTMLElement} node - target node
+   * @param   {Object} newAttributes - object containing all the new attribute names
+   * @param   {Object} oldAttributes - object containing all the old attribute names
+   * @returns {undefined} sorry it's a void function :(
+   */
+  function removeAllAttributes$1(node, newAttributes, oldAttributes) {
+    const newKeys = newAttributes ? Object.keys(newAttributes) : [];
+
+    Object.keys(oldAttributes)
+      .filter((name) => !newKeys.includes(name))
+      .forEach((attribute) => node.removeAttribute(attribute));
+  }
+
+  /**
+   * Check whether the attribute value can be rendered
+   * @param {*} value - expression value
+   * @returns {boolean} true if we can render this attribute value
+   */
+  function canRenderAttribute$1(value) {
+    return ['string', 'number', 'boolean'].includes(typeof value)
+  }
+
+  /**
+   * Check whether the attribute should be removed
+   * @param {*} value - expression value
+   * @param   {boolean} isBoolean - flag to handle boolean attributes
+   * @returns {boolean} boolean - true if the attribute can be removed}
+   */
+  function shouldRemoveAttribute$1(value, isBoolean) {
+    // boolean attributes should be removed if the value is falsy
+    if (isBoolean) return !value && value !== 0
+    // otherwise we can try to render it
+    return typeof value === 'undefined' || value === null
+  }
+
+  /**
+   * This methods handles the DOM attributes updates
+   * @param   {HTMLElement} node - target node
+   * @param   {Object} expression - expression object
+   * @param   {string} expression.name - attribute name
+   * @param   {boolean} expression.isBoolean - flag to handle boolean attributes
+   * @param   {*} value - new expression value
+   * @param   {*} oldValue - the old expression cached value
+   * @returns {undefined}
+   */
+  function attributeExpression$1(
+    node,
+    { name, isBoolean: isBoolean$1 },
+    value,
+    oldValue,
+  ) {
+    // is it a spread operator? {...attributes}
+    if (!name) {
+      if (oldValue) {
+        // remove all the old attributes
+        removeAllAttributes$1(node, value, oldValue);
+      }
+
+      // is the value still truthy?
+      if (value) {
+        setAllAttributes$1(node, value);
+      }
+
+      return
+    }
+
+    // ref attributes are treated differently so we early return in this case
+    if (name === REF_ATTRIBUTE) {
+      node && node.removeAttribute(node, name);
+      value(node);
+      return
+    }
+
+    // store the attribute on the node to make it compatible with native custom elements
+    if (
+      !isNativeHtmlProperty$1(name) &&
+      (isBoolean(value) || isObject(value) || isFunction(value))
+    ) {
+      node[name] = value;
+    }
+
+    if (shouldRemoveAttribute$1(value, isBoolean$1)) {
+      node.removeAttribute(name);
+    } else if (canRenderAttribute$1(value)) {
+      node.setAttribute(name, normalizeValue$1(name, value, isBoolean$1));
+    }
+  }
+
+  /**
+   * Get the value as string
+   * @param   {string} name - attribute name
+   * @param   {*} value - user input value
+   * @param   {boolean} isBoolean - boolean attributes flag
+   * @returns {string} input value as string
+   */
+  function normalizeValue$1(name, value, isBoolean) {
+    // be sure that expressions like selected={ true } will always be rendered as selected='selected'
+    // fix https://github.com/riot/riot/issues/2975
+    return value === true && isBoolean ? name : value
+  }
+
+  const RE_EVENTS_PREFIX$1 = /^on/;
+
+  const getCallbackAndOptions$1 = (value) =>
+    Array.isArray(value) ? value : [value, false];
+
+  // see also https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
+  const EventListener$1 = {
+    handleEvent(event) {
+      this[event.type](event);
+    },
+  };
+  const ListenersWeakMap$1 = new WeakMap();
+
+  const createListener$1 = (node) => {
+    const listener = Object.create(EventListener$1);
+    ListenersWeakMap$1.set(node, listener);
+    return listener
+  };
+
+  /**
+   * Set a new event listener
+   * @param   {HTMLElement} node - target node
+   * @param   {Object} expression - expression object
+   * @param   {string} expression.name - event name
+   * @param   {*} value - new expression value
+   * @returns {value} the callback just received
+   */
+  function eventExpression$1(node, { name }, value) {
+    const normalizedEventName = name.replace(RE_EVENTS_PREFIX$1, '');
+    const eventListener = ListenersWeakMap$1.get(node) || createListener$1(node);
+    const [callback, options] = getCallbackAndOptions$1(value);
+    const handler = eventListener[normalizedEventName];
+    const mustRemoveEvent = handler && !callback;
+    const mustAddEvent = callback && !handler;
+
+    if (mustRemoveEvent) {
+      node.removeEventListener(normalizedEventName, eventListener);
+    }
+
+    if (mustAddEvent) {
+      node.addEventListener(normalizedEventName, eventListener, options);
+    }
+
+    eventListener[normalizedEventName] = callback;
+  }
+
+  /**
+   * Normalize the user value in order to render a empty string in case of falsy values
+   * @param   {*} value - user input value
+   * @returns {string} hopefully a string
+   */
+  function normalizeStringValue$1(value) {
+    return isNil(value) ? '' : value
+  }
+
+  /**
+   * Get the the target text node to update or create one from of a comment node
+   * @param   {HTMLElement} node - any html element containing childNodes
+   * @param   {number} childNodeIndex - index of the text node in the childNodes list
+   * @returns {Text} the text node to update
+   */
+  const getTextNode$1 = (node, childNodeIndex) => {
+    return node.childNodes[childNodeIndex]
+  };
+
+  /**
+   * This methods handles a simple text expression update
+   * @param   {HTMLElement} node - target node
+   * @param   {Object} data - expression object
+   * @param   {*} value - new expression value
+   * @returns {undefined}
+   */
+  function textExpression$1(node, data, value) {
+    node.data = normalizeStringValue$1(value);
+  }
+
+  /**
+   * This methods handles the input fields value updates
+   * @param   {HTMLElement} node - target node
+   * @param   {Object} expression - expression object
+   * @param   {*} value - new expression value
+   * @returns {undefined}
+   */
+  function valueExpression$1(node, expression, value) {
+    node.value = normalizeStringValue$1(value);
+  }
+
+  const expressions$1 = {
+    [ATTRIBUTE]: attributeExpression$1,
+    [EVENT]: eventExpression$1,
+    [TEXT]: textExpression$1,
+    [VALUE]: valueExpression$1,
+  };
+
+  const Expression$1 = {
+    // Static props
+    // node: null,
+    // value: null,
+
+    // API methods
+    /**
+     * Mount the expression evaluating its initial value
+     * @param   {*} scope - argument passed to the expression to evaluate its current values
+     * @returns {Expression} self
+     */
+    mount(scope) {
+      // hopefully a pure function
+      this.value = this.evaluate(scope);
+
+      // IO() DOM updates
+      apply$1(this, this.value);
+
+      return this
+    },
+    /**
+     * Update the expression if its value changed
+     * @param   {*} scope - argument passed to the expression to evaluate its current values
+     * @returns {Expression} self
+     */
+    update(scope) {
+      // pure function
+      const value = this.evaluate(scope);
+
+      if (this.value !== value) {
+        // IO() DOM updates
+        apply$1(this, value);
+        this.value = value;
+      }
+
+      return this
+    },
+    /**
+     * Expression teardown method
+     * @returns {Expression} self
+     */
+    unmount() {
+      // unmount only the event handling expressions
+      if (this.type === EVENT) apply$1(this, null);
+      // ref attributes need to be unmounted as well
+      if (this.name === REF_ATTRIBUTE)
+        expressions$1[ATTRIBUTE](null, this, this.value);
+
+      return this
+    },
+  };
+
+  /**
+   * IO() function to handle the DOM updates
+   * @param {Expression} expression - expression object
+   * @param {*} value - current expression value
+   * @returns {undefined}
+   */
+  function apply$1(expression, value) {
+    return expressions$1[expression.type](
+      expression.node,
+      expression,
+      value,
+      expression.value,
+    )
+  }
+
+  function create$4$1(node, data) {
+    return {
+      ...Expression$1,
+      ...data,
+      node: data.type === TEXT ? getTextNode$1(node, data.childNodeIndex) : node,
+    }
+  }
+
+  /**
+   * Create a flat object having as keys a list of methods that if dispatched will propagate
+   * on the whole collection
+   * @param   {Array} collection - collection to iterate
+   * @param   {Array<string>} methods - methods to execute on each item of the collection
+   * @param   {*} context - context returned by the new methods created
+   * @returns {Object} a new object to simplify the the nested methods dispatching
+   */
+  function flattenCollectionMethods$1(collection, methods, context) {
+    return methods.reduce((acc, method) => {
+      return {
+        ...acc,
+        [method]: (scope) => {
+          return collection.map((item) => item[method](scope)) && context
+        },
+      }
+    }, {})
+  }
+
+  function create$3$1(node, { expressions }) {
+    return flattenCollectionMethods$1(
+      expressions.map((expression) => create$4$1(node, expression)),
+      ['mount', 'update', 'unmount'],
+    )
+  }
+
+  function extendParentScope$1(attributes, scope, parentScope) {
+    if (!attributes || !attributes.length) return parentScope
+
+    const expressions = attributes.map((attr) => ({
+      ...attr,
+      value: attr.evaluate(scope),
+    }));
+
+    return Object.assign(
+      Object.create(parentScope || null),
+      evaluateAttributeExpressions(expressions),
+    )
+  }
+
+  // this function is only meant to fix an edge case
+  // https://github.com/riot/riot/issues/2842
+  const getRealParent$1 = (scope, parentScope) =>
+    scope[PARENT_KEY_SYMBOL] || parentScope;
+
+  const SlotBinding$1 = {
+    // dynamic binding properties
+    // node: null,
+    // name: null,
+    attributes: [],
+    // template: null,
+
+    getTemplateScope(scope, parentScope) {
+      return extendParentScope$1(this.attributes, scope, parentScope)
+    },
+
+    // API methods
+    mount(scope, parentScope) {
+      const templateData = scope.slots
+        ? scope.slots.find(({ id }) => id === this.name)
+        : false;
+      const { parentNode } = this.node;
+      const realParent = getRealParent$1(scope, parentScope);
+
+      // override the template property if the slot needs to be replaced
+      this.template =
+        (templateData &&
+          create$7(templateData.html, templateData.bindings).createDOM(
+            parentNode,
+          )) ||
+        // otherwise use the optional template fallback if provided by the compiler see also https://github.com/riot/riot/issues/3014
+        this.template;
+
+      if (this.template) {
+        cleanNode(this.node);
+        this.template.mount(
+          this.node,
+          this.getTemplateScope(scope, realParent),
+          realParent,
+        );
+        this.template.children = Array.from(this.node.childNodes);
+      }
+
+      moveSlotInnerContent$1(this.node);
+      removeChild(this.node);
+
+      return this
+    },
+    update(scope, parentScope) {
+      if (this.template) {
+        const realParent = getRealParent$1(scope, parentScope);
+        this.template.update(this.getTemplateScope(scope, realParent), realParent);
+      }
+
+      return this
+    },
+    unmount(scope, parentScope, mustRemoveRoot) {
+      if (this.template) {
+        this.template.unmount(
+          this.getTemplateScope(scope, parentScope),
+          null,
+          mustRemoveRoot,
+        );
+      }
+
+      return this
+    },
+  };
+
+  /**
+   * Move the inner content of the slots outside of them
+   * @param   {HTMLElement} slot - slot node
+   * @returns {undefined} it's a void method ¯\_(ツ)_/¯
+   */
+  function moveSlotInnerContent$1(slot) {
+    const child = slot && slot.firstChild;
+
+    if (!child) return
+
+    insertBefore(child, slot);
+    moveSlotInnerContent$1(slot);
+  }
+
+  /**
+   * Create a single slot binding
+   * @param   {HTMLElement} node - slot node
+   * @param   {string} name - slot id
+   * @param   {AttributeExpressionData[]} attributes - slot attributes
+   * @returns {Object} Slot binding object
+   */
+  function createSlot$1(node, { name, attributes, template }) {
+    return {
+      ...SlotBinding$1,
+      attributes,
+      template,
+      node,
+      name,
+    }
+  }
+
+  /**
+   * Create a new tag object if it was registered before, otherwise fallback to the simple
+   * template chunk
+   * @param   {Function} component - component factory function
+   * @param   {Array<Object>} slots - array containing the slots markup
+   * @param   {Array} attributes - dynamic attributes that will be received by the tag element
+   * @returns {TagImplementation|TemplateChunk} a tag implementation or a template chunk as fallback
+   */
+  function getTag$1(component, slots = [], attributes = []) {
+    // if this tag was registered before we will return its implementation
+    if (component) {
+      return component({ slots, attributes })
+    }
+
+    // otherwise we return a template chunk
+    return create$7(slotsToMarkup$1(slots), [
+      ...slotBindings$1(slots),
+      {
+        // the attributes should be registered as binding
+        // if we fallback to a normal template chunk
+        expressions: attributes.map((attr) => {
+          return {
+            type: ATTRIBUTE,
+            ...attr,
+          }
+        }),
+      },
+    ])
+  }
+
+  /**
+   * Merge all the slots bindings into a single array
+   * @param   {Array<Object>} slots - slots collection
+   * @returns {Array<Bindings>} flatten bindings array
+   */
+  function slotBindings$1(slots) {
+    return slots.reduce((acc, { bindings }) => acc.concat(bindings), [])
+  }
+
+  /**
+   * Merge all the slots together in a single markup string
+   * @param   {Array<Object>} slots - slots collection
+   * @returns {string} markup of all the slots in a single string
+   */
+  function slotsToMarkup$1(slots) {
+    return slots.reduce((acc, slot) => {
+      return acc + slot.html
+    }, '')
+  }
+
+  const TagBinding$1 = {
+    // dynamic binding properties
+    // node: null,
+    // evaluate: null,
+    // name: null,
+    // slots: null,
+    // tag: null,
+    // attributes: null,
+    // getComponent: null,
+
+    mount(scope) {
+      return this.update(scope)
+    },
+    update(scope, parentScope) {
+      const name = this.evaluate(scope);
+
+      // simple update
+      if (name && name === this.name) {
+        this.tag.update(scope);
+      } else {
+        // unmount the old tag if it exists
+        this.unmount(scope, parentScope, true);
+
+        // mount the new tag
+        this.name = name;
+        this.tag = getTag$1(this.getComponent(name), this.slots, this.attributes);
+        this.tag.mount(this.node, scope);
+      }
+
+      return this
+    },
+    unmount(scope, parentScope, keepRootTag) {
+      if (this.tag) {
+        // keep the root tag
+        this.tag.unmount(keepRootTag);
+      }
+
+      return this
+    },
+  };
+
+  function create$2$1(
+    node,
+    { evaluate, getComponent, slots, attributes },
+  ) {
+    return {
+      ...TagBinding$1,
+      node,
+      evaluate,
+      slots,
+      attributes,
+      getComponent,
+    }
+  }
+
+  const bindings$1 = {
+    [IF]: create$5$1,
+    [SIMPLE]: create$3$1,
+    [EACH]: create$6$1,
+    [TAG]: create$2$1,
+    [SLOT]: createSlot$1,
+  };
+
+  /**
+   * Text expressions in a template tag will get childNodeIndex value normalized
+   * depending on the position of the <template> tag offset
+   * @param   {Expression[]} expressions - riot expressions array
+   * @param   {number} textExpressionsOffset - offset of the <template> tag
+   * @returns {Expression[]} expressions containing the text expressions normalized
+   */
+  function fixTextExpressionsOffset$1(expressions, textExpressionsOffset) {
+    return expressions.map((e) =>
+      e.type === TEXT
+        ? {
+            ...e,
+            childNodeIndex: e.childNodeIndex + textExpressionsOffset,
+          }
+        : e,
+    )
+  }
+
+  /**
+   * Bind a new expression object to a DOM node
+   * @param   {HTMLElement} root - DOM node where to bind the expression
+   * @param   {TagBindingData} binding - binding data
+   * @param   {number|null} templateTagOffset - if it's defined we need to fix the text expressions childNodeIndex offset
+   * @returns {Binding} Binding object
+   */
+  function create$1$1(root, binding, templateTagOffset) {
+    const { selector, type, redundantAttribute, expressions } = binding;
+    // find the node to apply the bindings
+    const node = selector ? root.querySelector(selector) : root;
+
+    // remove eventually additional attributes created only to select this node
+    if (redundantAttribute) node.removeAttribute(redundantAttribute);
+    const bindingExpressions = expressions || [];
+
+    // init the binding
+    return (bindings$1[type] || bindings$1[SIMPLE])(node, {
+      ...binding,
+      expressions:
+        templateTagOffset && !selector
+          ? fixTextExpressionsOffset$1(bindingExpressions, templateTagOffset)
+          : bindingExpressions,
+    })
+  }
+
+  // in this case a simple innerHTML is enough
+  function createHTMLTree$1(html, root) {
+    const template = isTemplate(root) ? root : document.createElement('template');
+    template.innerHTML = html;
+    return template.content
+  }
+
+  // for svg nodes we need a bit more work
+  /* c8 ignore start */
+  function createSVGTree$1(html, container) {
+    // create the SVGNode
+    const svgNode = container.ownerDocument.importNode(
+      new window.DOMParser().parseFromString(
+        `<svg xmlns="http://www.w3.org/2000/svg">${html}</svg>`,
+        'application/xml',
+      ).documentElement,
+      true,
+    );
+
+    return svgNode
+  }
+  /* c8 ignore end */
+
+  /**
+   * Create the DOM that will be injected
+   * @param {Object} root - DOM node to find out the context where the fragment will be created
+   * @param   {string} html - DOM to create as string
+   * @returns {HTMLDocumentFragment|HTMLElement} a new html fragment
+   */
+  function createDOMTree$1(root, html) {
+    /* c8 ignore next */
+    if (isSvg(root)) return createSVGTree$1(html, root)
+
+    return createHTMLTree$1(html, root)
+  }
+
+  /**
+   * Inject the DOM tree into a target node
+   * @param   {HTMLElement} el - target element
+   * @param   {DocumentFragment|SVGElement} dom - dom tree to inject
+   * @returns {undefined}
+   */
+  function injectDOM$1(el, dom) {
+    switch (true) {
+      case isSvg(el):
+        moveChildren(dom, el);
+        break
+      case isTemplate(el):
+        el.parentNode.replaceChild(dom, el);
+        break
+      default:
+        el.appendChild(dom);
+    }
+  }
+
+  /**
+   * Create the Template DOM skeleton
+   * @param   {HTMLElement} el - root node where the DOM will be injected
+   * @param   {string|HTMLElement} html - HTML markup or HTMLElement that will be injected into the root node
+   * @returns {?DocumentFragment} fragment that will be injected into the root node
+   */
+  function createTemplateDOM$1(el, html) {
+    return html && (typeof html === 'string' ? createDOMTree$1(el, html) : html)
+  }
+
+  /**
+   * Get the offset of the <template> tag
+   * @param {HTMLElement} parentNode - template tag parent node
+   * @param {HTMLElement} el - the template tag we want to render
+   * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
+   * @returns {number} offset of the <template> tag calculated from its siblings DOM nodes
+   */
+  function getTemplateTagOffset$1(parentNode, el, meta) {
+    const siblings = Array.from(parentNode.childNodes);
+
+    return Math.max(siblings.indexOf(el), siblings.indexOf(meta.head) + 1, 0)
+  }
+
+  /**
+   * Template Chunk model
+   * @type {Object}
+   */
+  const TemplateChunk$1 = {
+    // Static props
+    // bindings: null,
+    // bindingsData: null,
+    // html: null,
+    // isTemplateTag: false,
+    // fragment: null,
+    // children: null,
+    // dom: null,
+    // el: null,
+
+    /**
+     * Create the template DOM structure that will be cloned on each mount
+     * @param   {HTMLElement} el - the root node
+     * @returns {TemplateChunk} self
+     */
+    createDOM(el) {
+      // make sure that the DOM gets created before cloning the template
+      this.dom =
+        this.dom ||
+        createTemplateDOM$1(el, this.html) ||
+        document.createDocumentFragment();
+
+      return this
+    },
+
+    // API methods
+    /**
+     * Attach the template to a DOM node
+     * @param   {HTMLElement} el - target DOM node
+     * @param   {*} scope - template data
+     * @param   {*} parentScope - scope of the parent template tag
+     * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
+     * @returns {TemplateChunk} self
+     */
+    mount(el, scope, parentScope, meta = {}) {
+      if (!el) panic('Please provide DOM node to mount properly your template');
+
+      if (this.el) this.unmount(scope);
+
+      // <template> tags require a bit more work
+      // the template fragment might be already created via meta outside of this call
+      const { fragment, children, avoidDOMInjection } = meta;
+      // <template> bindings of course can not have a root element
+      // so we check the parent node to set the query selector bindings
+      const { parentNode } = children ? children[0] : el;
+      const isTemplateTag = isTemplate(el);
+      const templateTagOffset = isTemplateTag
+        ? getTemplateTagOffset$1(parentNode, el, meta)
+        : null;
+
+      // create the DOM if it wasn't created before
+      this.createDOM(el);
+
+      // create the DOM of this template cloning the original DOM structure stored in this instance
+      // notice that if a documentFragment was passed (via meta) we will use it instead
+      const cloneNode = fragment || this.dom.cloneNode(true);
+
+      // store root node
+      // notice that for template tags the root note will be the parent tag
+      this.el = isTemplateTag ? parentNode : el;
+
+      // create the children array only for the <template> fragments
+      this.children = isTemplateTag
+        ? children || Array.from(cloneNode.childNodes)
+        : null;
+
+      // inject the DOM into the el only if a fragment is available
+      if (!avoidDOMInjection && cloneNode) injectDOM$1(el, cloneNode);
+
+      // create the bindings
+      this.bindings = this.bindingsData.map((binding) =>
+        create$1$1(this.el, binding, templateTagOffset),
+      );
+      this.bindings.forEach((b) => b.mount(scope, parentScope));
+
+      // store the template meta properties
+      this.meta = meta;
+
+      return this
+    },
+
+    /**
+     * Update the template with fresh data
+     * @param   {*} scope - template data
+     * @param   {*} parentScope - scope of the parent template tag
+     * @returns {TemplateChunk} self
+     */
+    update(scope, parentScope) {
+      this.bindings.forEach((b) => b.update(scope, parentScope));
+
+      return this
+    },
+
+    /**
+     * Remove the template from the node where it was initially mounted
+     * @param   {*} scope - template data
+     * @param   {*} parentScope - scope of the parent template tag
+     * @param   {boolean|null} mustRemoveRoot - if true remove the root element,
+     * if false or undefined clean the root tag content, if null don't touch the DOM
+     * @returns {TemplateChunk} self
+     */
+    unmount(scope, parentScope, mustRemoveRoot = false) {
+      const el = this.el;
+
+      if (!el) {
+        return this
+      }
+
+      this.bindings.forEach((b) => b.unmount(scope, parentScope, mustRemoveRoot));
+
+      switch (true) {
+        // pure components should handle the DOM unmount updates by themselves
+        // for mustRemoveRoot === null don't touch the DOM
+        case el[IS_PURE_SYMBOL] || mustRemoveRoot === null:
+          break
+
+        // if children are declared, clear them
+        // applicable for <template> and <slot/> bindings
+        case Array.isArray(this.children):
+          clearChildren(this.children);
+          break
+
+        // clean the node children only
+        case !mustRemoveRoot:
+          cleanNode(el);
+          break
+
+        // remove the root node only if the mustRemoveRoot is truly
+        case !!mustRemoveRoot:
+          removeChild(el);
+          break
+      }
+
+      this.el = null;
+
+      return this
+    },
+
+    /**
+     * Clone the template chunk
+     * @returns {TemplateChunk} a clone of this object resetting the this.el property
+     */
+    clone() {
+      return {
+        ...this,
+        meta: {},
+        el: null,
+      }
+    },
+  };
+
+  /**
+   * Create a template chunk wiring also the bindings
+   * @param   {string|HTMLElement} html - template string
+   * @param   {BindingData[]} bindings - bindings collection
+   * @returns {TemplateChunk} a new TemplateChunk copy
+   */
+  function create$7(html, bindings = []) {
+    return {
+      ...TemplateChunk$1,
+      html,
+      bindingsData: bindings,
+    }
+  }
+
+  const domBindings = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    bindingTypes: bindingTypes,
+    createBinding: create$1$1,
+    createExpression: create$4$1,
+    expressionTypes: expressionTypes,
+    template: create$7
+  });
+
+  const HEAD_SYMBOL = Symbol();
+  const TAIL_SYMBOL = Symbol();
+
+  /**
+   * Create the <template> fragments text nodes
+   * @return {Object} {{head: Text, tail: Text}}
+   */
+  function createHeadTailPlaceholders() {
+    const head = document.createTextNode('');
+    const tail = document.createTextNode('');
+
+    head[HEAD_SYMBOL] = true;
+    tail[TAIL_SYMBOL] = true;
+
+    return { head, tail }
+  }
+
+  /**
+   * Create the template meta object in case of <template> fragments
+   * @param   {TemplateChunk} componentTemplate - template chunk object
+   * @returns {Object} the meta property that will be passed to the mount function of the TemplateChunk
+   */
+  function createTemplateMeta(componentTemplate) {
+    const fragment = componentTemplate.dom.cloneNode(true);
+    const { head, tail } = createHeadTailPlaceholders();
+
+    return {
+      avoidDOMInjection: true,
+      fragment,
+      head,
+      tail,
+      children: [head, ...Array.from(fragment.childNodes), tail],
+    }
+  }
+
+  /* c8 ignore start */
+  /**
+   * ISC License
+   *
+   * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
+   *
+   * Permission to use, copy, modify, and/or distribute this software for any
+   * purpose with or without fee is hereby granted, provided that the above
+   * copyright notice and this permission notice appear in all copies.
+   *
+   * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+   * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+   * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+   * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+   * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+   * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+   * PERFORMANCE OF THIS SOFTWARE.
+   */
+
+  // fork of https://github.com/WebReflection/udomdiff version 1.1.0
+  // due to https://github.com/WebReflection/udomdiff/pull/2
+  /* eslint-disable */
+
+  /**
+   * @param {Node[]} a The list of current/live children
+   * @param {Node[]} b The list of future children
+   * @param {(entry: Node, action: number) => Node} get
+   * The callback invoked per each entry related DOM operation.
+   * @param {Node} [before] The optional node used as anchor to insert before.
+   * @returns {Node[]} The same list of future children.
+   */
+  const udomdiff = (a, b, get, before) => {
+    const bLength = b.length;
+    let aEnd = a.length;
+    let bEnd = bLength;
+    let aStart = 0;
+    let bStart = 0;
+    let map = null;
+    while (aStart < aEnd || bStart < bEnd) {
+      // append head, tail, or nodes in between: fast path
+      if (aEnd === aStart) {
+        // we could be in a situation where the rest of nodes that
+        // need to be added are not at the end, and in such case
+        // the node to `insertBefore`, if the index is more than 0
+        // must be retrieved, otherwise it's gonna be the first item.
+        const node =
+          bEnd < bLength
+            ? bStart
+              ? get(b[bStart - 1], -0).nextSibling
+              : get(b[bEnd - bStart], 0)
+            : before;
+        while (bStart < bEnd) insertBefore(get(b[bStart++], 1), node);
+      }
+      // remove head or tail: fast path
+      else if (bEnd === bStart) {
+        while (aStart < aEnd) {
+          // remove the node only if it's unknown or not live
+          if (!map || !map.has(a[aStart])) removeChild(get(a[aStart], -1));
+          aStart++;
+        }
+      }
+      // same node: fast path
+      else if (a[aStart] === b[bStart]) {
+        aStart++;
+        bStart++;
+      }
+      // same tail: fast path
+      else if (a[aEnd - 1] === b[bEnd - 1]) {
+        aEnd--;
+        bEnd--;
+      }
+      // The once here single last swap "fast path" has been removed in v1.1.0
+      // https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
+      // reverse swap: also fast path
+      else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+        // this is a "shrink" operation that could happen in these cases:
+        // [1, 2, 3, 4, 5]
+        // [1, 4, 3, 2, 5]
+        // or asymmetric too
+        // [1, 2, 3, 4, 5]
+        // [1, 2, 3, 5, 6, 4]
+        const node = get(a[--aEnd], -1).nextSibling;
+        insertBefore(get(b[bStart++], 1), get(a[aStart++], -1).nextSibling);
+        insertBefore(get(b[--bEnd], 1), node);
+        // mark the future index as identical (yeah, it's dirty, but cheap 👍)
+        // The main reason to do this, is that when a[aEnd] will be reached,
+        // the loop will likely be on the fast path, as identical to b[bEnd].
+        // In the best case scenario, the next loop will skip the tail,
+        // but in the worst one, this node will be considered as already
+        // processed, bailing out pretty quickly from the map index check
+        a[aEnd] = b[bEnd];
+      }
+      // map based fallback, "slow" path
+      else {
+        // the map requires an O(bEnd - bStart) operation once
+        // to store all future nodes indexes for later purposes.
+        // In the worst case scenario, this is a full O(N) cost,
+        // and such scenario happens at least when all nodes are different,
+        // but also if both first and last items of the lists are different
+        if (!map) {
+          map = new Map();
+          let i = bStart;
+          while (i < bEnd) map.set(b[i], i++);
+        }
+        // if it's a future node, hence it needs some handling
+        if (map.has(a[aStart])) {
+          // grab the index of such node, 'cause it might have been processed
+          const index = map.get(a[aStart]);
+          // if it's not already processed, look on demand for the next LCS
+          if (bStart < index && index < bEnd) {
+            let i = aStart;
+            // counts the amount of nodes that are the same in the future
+            let sequence = 1;
+            while (++i < aEnd && i < bEnd && map.get(a[i]) === index + sequence)
+              sequence++;
+            // effort decision here: if the sequence is longer than replaces
+            // needed to reach such sequence, which would brings again this loop
+            // to the fast path, prepend the difference before a sequence,
+            // and move only the future list index forward, so that aStart
+            // and bStart will be aligned again, hence on the fast path.
+            // An example considering aStart and bStart are both 0:
+            // a: [1, 2, 3, 4]
+            // b: [7, 1, 2, 3, 6]
+            // this would place 7 before 1 and, from that time on, 1, 2, and 3
+            // will be processed at zero cost
+            if (sequence > index - bStart) {
+              const node = get(a[aStart], 0);
+              while (bStart < index) insertBefore(get(b[bStart++], 1), node);
+            }
+            // if the effort wasn't good enough, fallback to a replace,
+            // moving both source and target indexes forward, hoping that some
+            // similar node will be found later on, to go back to the fast path
+            else {
+              replaceChild(get(b[bStart++], 1), get(a[aStart++], -1));
+            }
+          }
+          // otherwise move the source forward, 'cause there's nothing to do
+          else aStart++;
+        }
+        // this node has no meaning in the future list, so it's more than safe
+        // to remove it, and check the next live node out instead, meaning
+        // that only the live list index should be forwarded
+        else removeChild(get(a[aStart++], -1));
+      }
+    }
+    return b
+  };
+
+  const UNMOUNT_SCOPE = Symbol('unmount');
+
+  const EachBinding = {
+    // dynamic binding properties
+    // childrenMap: null,
+    // node: null,
+    // root: null,
+    // condition: null,
+    // evaluate: null,
+    // template: null,
+    // isTemplateTag: false,
+    nodes: [],
+    // getKey: null,
+    // indexName: null,
+    // itemName: null,
+    // afterPlaceholder: null,
+    // placeholder: null,
+
+    // API methods
+    mount(scope, parentScope) {
+      return this.update(scope, parentScope)
+    },
+    update(scope, parentScope) {
+      const { placeholder, nodes, childrenMap } = this;
+      const collection = scope === UNMOUNT_SCOPE ? null : this.evaluate(scope);
+      const items = collection ? Array.from(collection) : [];
+
+      // prepare the diffing
+      const { newChildrenMap, batches, futureNodes } = createPatch(
+        items,
+        scope,
+        parentScope,
+        this,
+      );
+
+      // patch the DOM only if there are new nodes
+      udomdiff(
+        nodes,
+        futureNodes,
+        patch(Array.from(childrenMap.values()), parentScope),
+        placeholder,
+      );
+
+      // trigger the mounts and the updates
+      batches.forEach((fn) => fn());
+
+      // update the children map
+      this.childrenMap = newChildrenMap;
+      this.nodes = futureNodes;
+
+      return this
+    },
+    unmount(scope, parentScope) {
+      this.update(UNMOUNT_SCOPE, parentScope);
+
+      return this
+    },
+  };
+
+  /**
+   * Patch the DOM while diffing
+   * @param   {any[]} redundant - list of all the children (template, nodes, context) added via each
+   * @param   {*} parentScope - scope of the parent template
+   * @returns {Function} patch function used by domdiff
+   */
+  function patch(redundant, parentScope) {
+    return (item, info) => {
+      if (info < 0) {
+        // get the last element added to the childrenMap saved previously
+        const element = redundant[redundant.length - 1];
+
+        if (element) {
+          // get the nodes and the template in stored in the last child of the childrenMap
+          const { template, nodes, context } = element;
+          // remove the last node (notice <template> tags might have more children nodes)
+          nodes.pop();
+
+          // notice that we pass null as last argument because
+          // the root node and its children will be removed by domdiff
+          if (!nodes.length) {
+            // we have cleared all the children nodes and we can unmount this template
+            redundant.pop();
+            template.unmount(context, parentScope, null);
+          }
+        }
+      }
+
+      return item
+    }
+  }
+
+  /**
+   * Check whether a template must be filtered from a loop
+   * @param   {Function} condition - filter function
+   * @param   {Object} context - argument passed to the filter function
+   * @returns {boolean} true if this item should be skipped
+   */
+  function mustFilterItem(condition, context) {
+    return condition ? !condition(context) : false
+  }
+
+  /**
+   * Extend the scope of the looped template
+   * @param   {Object} scope - current template scope
+   * @param   {Object} options - options
+   * @param   {string} options.itemName - key to identify the looped item in the new context
+   * @param   {string} options.indexName - key to identify the index of the looped item
+   * @param   {number} options.index - current index
+   * @param   {*} options.item - collection item looped
+   * @returns {Object} enhanced scope object
+   */
+  function extendScope(scope, { itemName, indexName, index, item }) {
+    defineProperty(scope, itemName, item);
+    if (indexName) defineProperty(scope, indexName, index);
+
+    return scope
+  }
+
+  /**
+   * Loop the current template items
+   * @param   {Array} items - expression collection value
+   * @param   {*} scope - template scope
+   * @param   {*} parentScope - scope of the parent template
+   * @param   {EachBinding} binding - each binding object instance
+   * @returns {Object} data
+   * @returns {Map} data.newChildrenMap - a Map containing the new children template structure
+   * @returns {Array} data.batches - array containing the template lifecycle functions to trigger
+   * @returns {Array} data.futureNodes - array containing the nodes we need to diff
+   */
+  function createPatch(items, scope, parentScope, binding) {
+    const {
+      condition,
+      template,
+      childrenMap,
+      itemName,
+      getKey,
+      indexName,
+      root,
+      isTemplateTag,
+    } = binding;
+    const newChildrenMap = new Map();
+    const batches = [];
+    const futureNodes = [];
+
+    items.forEach((item, index) => {
+      const context = extendScope(Object.create(scope), {
+        itemName,
+        indexName,
+        index,
+        item,
+      });
+      const key = getKey ? getKey(context) : index;
+      const oldItem = childrenMap.get(key);
+      const nodes = [];
+
+      if (mustFilterItem(condition, context)) {
+        return
+      }
+
+      const mustMount = !oldItem;
+      const componentTemplate = oldItem ? oldItem.template : template.clone();
+      const el = componentTemplate.el || root.cloneNode();
+      const meta =
+        isTemplateTag && mustMount
+          ? createTemplateMeta(componentTemplate)
+          : componentTemplate.meta;
+
+      if (mustMount) {
+        batches.push(() =>
+          componentTemplate.mount(el, context, parentScope, meta),
+        );
+      } else {
+        batches.push(() => componentTemplate.update(context, parentScope));
+      }
+
+      // create the collection of nodes to update or to add
+      // in case of template tags we need to add all its children nodes
+      if (isTemplateTag) {
+        nodes.push(...meta.children);
+      } else {
+        nodes.push(el);
+      }
+
+      // delete the old item from the children map
+      childrenMap.delete(key);
+      futureNodes.push(...nodes);
+
+      // update the children map
+      newChildrenMap.set(key, {
+        nodes,
+        template: componentTemplate,
+        context,
+        index,
+      });
+    });
+
+    return {
+      newChildrenMap,
+      batches,
+      futureNodes,
+    }
+  }
+
+  function create$6(
+    node,
+    { evaluate, condition, itemName, indexName, getKey, template },
+  ) {
+    const placeholder = document.createTextNode('');
+    const root = node.cloneNode();
+
+    insertBefore(placeholder, node);
+    removeChild(node);
+
+    return {
+      ...EachBinding,
+      childrenMap: new Map(),
+      node,
+      root,
+      condition,
+      evaluate,
+      isTemplateTag: isTemplate(root),
+      template: template.createDOM(node),
+      getKey,
+      indexName,
+      itemName,
+      placeholder,
+    }
+  }
+
+  /**
+   * Binding responsible for the `if` directive
+   */
+  const IfBinding = {
+    // dynamic binding properties
+    // node: null,
+    // evaluate: null,
+    // isTemplateTag: false,
+    // placeholder: null,
+    // template: null,
+
+    // API methods
+    mount(scope, parentScope) {
+      return this.update(scope, parentScope)
+    },
+    update(scope, parentScope) {
+      const value = !!this.evaluate(scope);
+      const mustMount = !this.value && value;
+      const mustUnmount = this.value && !value;
+      const mount = () => {
+        const pristine = this.node.cloneNode();
+
+        insertBefore(pristine, this.placeholder);
+        this.template = this.template.clone();
+        this.template.mount(pristine, scope, parentScope);
+      };
+
+      switch (true) {
+        case mustMount:
+          mount();
+          break
+        case mustUnmount:
+          this.unmount(scope);
+          break
+        default:
+          if (value) this.template.update(scope, parentScope);
+      }
+
+      this.value = value;
+
+      return this
+    },
+    unmount(scope, parentScope) {
+      this.template.unmount(scope, parentScope, true);
+
+      return this
+    },
+  };
+
+  function create$5(node, { evaluate, template }) {
+    const placeholder = document.createTextNode('');
+
+    insertBefore(placeholder, node);
+    removeChild(node);
+
+    return {
+      ...IfBinding,
+      node,
+      evaluate,
+      placeholder,
+      template: template.createDOM(node),
+    }
+  }
+
+  /* c8 ignore next */
+  const ElementProto = typeof Element === 'undefined' ? {} : Element.prototype;
+  const isNativeHtmlProperty = memoize(
+    (name) => ElementProto.hasOwnProperty(name), // eslint-disable-line
+  );
+
+  /**
+   * Add all the attributes provided
+   * @param   {HTMLElement} node - target node
+   * @param   {Object} attributes - object containing the attributes names and values
+   * @returns {undefined} sorry it's a void function :(
+   */
+  function setAllAttributes(node, attributes) {
+    Object.keys(attributes).forEach((name) =>
+      attributeExpression(node, { name }, attributes[name]),
+    );
+  }
+
+  /**
+   * Remove all the attributes provided
+   * @param   {HTMLElement} node - target node
+   * @param   {Object} newAttributes - object containing all the new attribute names
+   * @param   {Object} oldAttributes - object containing all the old attribute names
+   * @returns {undefined} sorry it's a void function :(
+   */
+  function removeAllAttributes(node, newAttributes, oldAttributes) {
+    const newKeys = newAttributes ? Object.keys(newAttributes) : [];
+
+    Object.keys(oldAttributes)
+      .filter((name) => !newKeys.includes(name))
+      .forEach((attribute) => node.removeAttribute(attribute));
+  }
+
+  /**
+   * Check whether the attribute value can be rendered
+   * @param {*} value - expression value
+   * @returns {boolean} true if we can render this attribute value
+   */
+  function canRenderAttribute(value) {
+    return ['string', 'number', 'boolean'].includes(typeof value)
+  }
+
+  /**
+   * Check whether the attribute should be removed
+   * @param {*} value - expression value
+   * @param   {boolean} isBoolean - flag to handle boolean attributes
+   * @returns {boolean} boolean - true if the attribute can be removed}
+   */
+  function shouldRemoveAttribute(value, isBoolean) {
+    // boolean attributes should be removed if the value is falsy
+    if (isBoolean) return !value && value !== 0
+    // otherwise we can try to render it
+    return typeof value === 'undefined' || value === null
+  }
+
+  /**
+   * This methods handles the DOM attributes updates
+   * @param   {HTMLElement} node - target node
+   * @param   {Object} expression - expression object
+   * @param   {string} expression.name - attribute name
+   * @param   {boolean} expression.isBoolean - flag to handle boolean attributes
+   * @param   {*} value - new expression value
+   * @param   {*} oldValue - the old expression cached value
+   * @returns {undefined}
+   */
+  function attributeExpression(
+    node,
+    { name, isBoolean: isBoolean$1 },
+    value,
+    oldValue,
+  ) {
+    // is it a spread operator? {...attributes}
+    if (!name) {
+      if (oldValue) {
+        // remove all the old attributes
+        removeAllAttributes(node, value, oldValue);
+      }
+
+      // is the value still truthy?
+      if (value) {
+        setAllAttributes(node, value);
+      }
+
+      return
+    }
+
+    // store the attribute on the node to make it compatible with native custom elements
+    if (
+      !isNativeHtmlProperty(name) &&
+      (isBoolean(value) || isObject(value) || isFunction(value))
+    ) {
+      node[name] = value;
+    }
+
+    if (shouldRemoveAttribute(value, isBoolean$1)) {
+      node.removeAttribute(name);
+    } else if (canRenderAttribute(value)) {
+      node.setAttribute(name, normalizeValue(name, value, isBoolean$1));
+    }
+  }
+
+  /**
+   * Get the value as string
+   * @param   {string} name - attribute name
+   * @param   {*} value - user input value
+   * @param   {boolean} isBoolean - boolean attributes flag
+   * @returns {string} input value as string
+   */
+  function normalizeValue(name, value, isBoolean) {
+    // be sure that expressions like selected={ true } will always be rendered as selected='selected'
+    // fix https://github.com/riot/riot/issues/2975
+    return value === true && isBoolean ? name : value
+  }
+
+  const RE_EVENTS_PREFIX = /^on/;
+
+  const getCallbackAndOptions = (value) =>
+    Array.isArray(value) ? value : [value, false];
+
+  // see also https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
+  const EventListener = {
+    handleEvent(event) {
+      this[event.type](event);
+    },
+  };
+  const ListenersWeakMap = new WeakMap();
+
+  const createListener = (node) => {
+    const listener = Object.create(EventListener);
+    ListenersWeakMap.set(node, listener);
+    return listener
+  };
+
+  /**
+   * Set a new event listener
+   * @param   {HTMLElement} node - target node
+   * @param   {Object} expression - expression object
+   * @param   {string} expression.name - event name
+   * @param   {*} value - new expression value
+   * @returns {value} the callback just received
+   */
+  function eventExpression(node, { name }, value) {
+    const normalizedEventName = name.replace(RE_EVENTS_PREFIX, '');
+    const eventListener = ListenersWeakMap.get(node) || createListener(node);
+    const [callback, options] = getCallbackAndOptions(value);
+    const handler = eventListener[normalizedEventName];
+    const mustRemoveEvent = handler && !callback;
+    const mustAddEvent = callback && !handler;
+
+    if (mustRemoveEvent) {
+      node.removeEventListener(normalizedEventName, eventListener);
+    }
+
+    if (mustAddEvent) {
+      node.addEventListener(normalizedEventName, eventListener, options);
+    }
+
+    eventListener[normalizedEventName] = callback;
+  }
+
+  /**
+   * Normalize the user value in order to render a empty string in case of falsy values
+   * @param   {*} value - user input value
+   * @returns {string} hopefully a string
+   */
+  function normalizeStringValue(value) {
+    return isNil(value) ? '' : value
+  }
+
+  /**
+   * Get the the target text node to update or create one from of a comment node
+   * @param   {HTMLElement} node - any html element containing childNodes
+   * @param   {number} childNodeIndex - index of the text node in the childNodes list
+   * @returns {Text} the text node to update
+   */
+  const getTextNode = (node, childNodeIndex) => {
+    return node.childNodes[childNodeIndex]
+  };
+
+  /**
+   * This methods handles a simple text expression update
+   * @param   {HTMLElement} node - target node
+   * @param   {Object} data - expression object
+   * @param   {*} value - new expression value
+   * @returns {undefined}
+   */
+  function textExpression(node, data, value) {
+    node.data = normalizeStringValue(value);
+  }
+
+  /**
+   * This methods handles the input fields value updates
+   * @param   {HTMLElement} node - target node
+   * @param   {Object} expression - expression object
+   * @param   {*} value - new expression value
+   * @returns {undefined}
+   */
+  function valueExpression(node, expression, value) {
+    node.value = normalizeStringValue(value);
+  }
+
+  const expressions = {
+    [ATTRIBUTE]: attributeExpression,
+    [EVENT]: eventExpression,
+    [TEXT]: textExpression,
+    [VALUE]: valueExpression,
+  };
+
+  const Expression = {
+    // Static props
+    // node: null,
+    // value: null,
+
+    // API methods
+    /**
+     * Mount the expression evaluating its initial value
+     * @param   {*} scope - argument passed to the expression to evaluate its current values
+     * @returns {Expression} self
+     */
+    mount(scope) {
+      // hopefully a pure function
+      this.value = this.evaluate(scope);
+
+      // IO() DOM updates
+      apply(this, this.value);
+
+      return this
+    },
+    /**
+     * Update the expression if its value changed
+     * @param   {*} scope - argument passed to the expression to evaluate its current values
+     * @returns {Expression} self
+     */
+    update(scope) {
+      // pure function
+      const value = this.evaluate(scope);
+
+      if (this.value !== value) {
+        // IO() DOM updates
+        apply(this, value);
+        this.value = value;
+      }
+
+      return this
+    },
+    /**
+     * Expression teardown method
+     * @returns {Expression} self
+     */
+    unmount() {
+      // unmount only the event handling expressions
+      if (this.type === EVENT) apply(this, null);
+
+      return this
+    },
+  };
+
+  /**
+   * IO() function to handle the DOM updates
+   * @param {Expression} expression - expression object
+   * @param {*} value - current expression value
+   * @returns {undefined}
+   */
+  function apply(expression, value) {
+    return expressions[expression.type](
+      expression.node,
+      expression,
+      value,
+      expression.value,
+    )
+  }
+
+  function create$4(node, data) {
+    return {
+      ...Expression,
+      ...data,
+      node: data.type === TEXT ? getTextNode(node, data.childNodeIndex) : node,
+    }
+  }
+
+  /**
+   * Create a flat object having as keys a list of methods that if dispatched will propagate
+   * on the whole collection
+   * @param   {Array} collection - collection to iterate
+   * @param   {Array<string>} methods - methods to execute on each item of the collection
+   * @param   {*} context - context returned by the new methods created
+   * @returns {Object} a new object to simplify the the nested methods dispatching
+   */
+  function flattenCollectionMethods(collection, methods, context) {
+    return methods.reduce((acc, method) => {
+      return {
+        ...acc,
+        [method]: (scope) => {
+          return collection.map((item) => item[method](scope)) && context
+        },
+      }
+    }, {})
+  }
+
+  function create$3(node, { expressions }) {
+    return flattenCollectionMethods(
+      expressions.map((expression) => create$4(node, expression)),
+      ['mount', 'update', 'unmount'],
+    )
+  }
+
+  function extendParentScope(attributes, scope, parentScope) {
+    if (!attributes || !attributes.length) return parentScope
+
+    const expressions = attributes.map((attr) => ({
+      ...attr,
+      value: attr.evaluate(scope),
+    }));
+
+    return Object.assign(
+      Object.create(parentScope || null),
+      evaluateAttributeExpressions(expressions),
+    )
+  }
+
+  // this function is only meant to fix an edge case
+  // https://github.com/riot/riot/issues/2842
+  const getRealParent = (scope, parentScope) =>
+    scope[PARENT_KEY_SYMBOL] || parentScope;
+
+  const SlotBinding = {
+    // dynamic binding properties
+    // node: null,
+    // name: null,
+    attributes: [],
+    // template: null,
+
+    getTemplateScope(scope, parentScope) {
+      return extendParentScope(this.attributes, scope, parentScope)
+    },
+
+    // API methods
+    mount(scope, parentScope) {
+      const templateData = scope.slots
+        ? scope.slots.find(({ id }) => id === this.name)
+        : false;
+      const { parentNode } = this.node;
+      const realParent = getRealParent(scope, parentScope);
+
+      this.template =
+        templateData &&
+        create(templateData.html, templateData.bindings).createDOM(parentNode);
+
+      if (this.template) {
+        cleanNode(this.node);
+        this.template.mount(
+          this.node,
+          this.getTemplateScope(scope, realParent),
+          realParent,
+        );
+        this.template.children = Array.from(this.node.childNodes);
+      }
+
+      moveSlotInnerContent(this.node);
+      removeChild(this.node);
+
+      return this
+    },
+    update(scope, parentScope) {
+      if (this.template) {
+        const realParent = getRealParent(scope, parentScope);
+        this.template.update(this.getTemplateScope(scope, realParent), realParent);
+      }
+
+      return this
+    },
+    unmount(scope, parentScope, mustRemoveRoot) {
+      if (this.template) {
+        this.template.unmount(
+          this.getTemplateScope(scope, parentScope),
+          null,
+          mustRemoveRoot,
+        );
+      }
+
+      return this
+    },
+  };
+
+  /**
+   * Move the inner content of the slots outside of them
+   * @param   {HTMLElement} slot - slot node
+   * @returns {undefined} it's a void method ¯\_(ツ)_/¯
+   */
+  function moveSlotInnerContent(slot) {
+    const child = slot && slot.firstChild;
+
+    if (!child) return
+
+    insertBefore(child, slot);
+    moveSlotInnerContent(slot);
+  }
+
+  /**
+   * Create a single slot binding
+   * @param   {HTMLElement} node - slot node
+   * @param   {string} name - slot id
+   * @param   {AttributeExpressionData[]} attributes - slot attributes
+   * @returns {Object} Slot binding object
+   */
+  function createSlot(node, { name, attributes }) {
+    return {
+      ...SlotBinding,
+      attributes,
+      node,
+      name,
+    }
+  }
+
+  /**
+   * Create a new tag object if it was registered before, otherwise fallback to the simple
+   * template chunk
+   * @param   {Function} component - component factory function
+   * @param   {Array<Object>} slots - array containing the slots markup
+   * @param   {Array} attributes - dynamic attributes that will be received by the tag element
+   * @returns {TagImplementation|TemplateChunk} a tag implementation or a template chunk as fallback
+   */
+  function getTag(component, slots = [], attributes = []) {
+    // if this tag was registered before we will return its implementation
+    if (component) {
+      return component({ slots, attributes })
+    }
+
+    // otherwise we return a template chunk
+    return create(slotsToMarkup(slots), [
+      ...slotBindings(slots),
+      {
+        // the attributes should be registered as binding
+        // if we fallback to a normal template chunk
+        expressions: attributes.map((attr) => {
+          return {
+            type: ATTRIBUTE,
+            ...attr,
+          }
+        }),
+      },
+    ])
+  }
+
+  /**
+   * Merge all the slots bindings into a single array
+   * @param   {Array<Object>} slots - slots collection
+   * @returns {Array<Bindings>} flatten bindings array
+   */
+  function slotBindings(slots) {
+    return slots.reduce((acc, { bindings }) => acc.concat(bindings), [])
+  }
+
+  /**
+   * Merge all the slots together in a single markup string
+   * @param   {Array<Object>} slots - slots collection
+   * @returns {string} markup of all the slots in a single string
+   */
+  function slotsToMarkup(slots) {
+    return slots.reduce((acc, slot) => {
+      return acc + slot.html
+    }, '')
+  }
+
+  const TagBinding = {
+    // dynamic binding properties
+    // node: null,
+    // evaluate: null,
+    // name: null,
+    // slots: null,
+    // tag: null,
+    // attributes: null,
+    // getComponent: null,
+
+    mount(scope) {
+      return this.update(scope)
+    },
+    update(scope, parentScope) {
+      const name = this.evaluate(scope);
+
+      // simple update
+      if (name && name === this.name) {
+        this.tag.update(scope);
+      } else {
+        // unmount the old tag if it exists
+        this.unmount(scope, parentScope, true);
+
+        // mount the new tag
+        this.name = name;
+        this.tag = getTag(this.getComponent(name), this.slots, this.attributes);
+        this.tag.mount(this.node, scope);
+      }
+
+      return this
+    },
+    unmount(scope, parentScope, keepRootTag) {
+      if (this.tag) {
+        // keep the root tag
+        this.tag.unmount(keepRootTag);
+      }
+
+      return this
+    },
+  };
+
+  function create$2(node, { evaluate, getComponent, slots, attributes }) {
+    return {
+      ...TagBinding,
+      node,
+      evaluate,
+      slots,
+      attributes,
+      getComponent,
+    }
+  }
+
+  const bindings = {
+    [IF]: create$5,
+    [SIMPLE]: create$3,
+    [EACH]: create$6,
+    [TAG]: create$2,
+    [SLOT]: createSlot,
+  };
+
+  /**
+   * Text expressions in a template tag will get childNodeIndex value normalized
+   * depending on the position of the <template> tag offset
+   * @param   {Expression[]} expressions - riot expressions array
+   * @param   {number} textExpressionsOffset - offset of the <template> tag
+   * @returns {Expression[]} expressions containing the text expressions normalized
+   */
+  function fixTextExpressionsOffset(expressions, textExpressionsOffset) {
+    return expressions.map((e) =>
+      e.type === TEXT
+        ? {
+            ...e,
+            childNodeIndex: e.childNodeIndex + textExpressionsOffset,
+          }
+        : e,
+    )
+  }
+
+  /**
+   * Bind a new expression object to a DOM node
+   * @param   {HTMLElement} root - DOM node where to bind the expression
+   * @param   {TagBindingData} binding - binding data
+   * @param   {number|null} templateTagOffset - if it's defined we need to fix the text expressions childNodeIndex offset
+   * @returns {Binding} Binding object
+   */
+  function create$1(root, binding, templateTagOffset) {
+    const { selector, type, redundantAttribute, expressions } = binding;
+    // find the node to apply the bindings
+    const node = selector ? root.querySelector(selector) : root;
+
+    // remove eventually additional attributes created only to select this node
+    if (redundantAttribute) node.removeAttribute(redundantAttribute);
+    const bindingExpressions = expressions || [];
+
+    // init the binding
+    return (bindings[type] || bindings[SIMPLE])(node, {
+      ...binding,
+      expressions:
+        templateTagOffset && !selector
+          ? fixTextExpressionsOffset(bindingExpressions, templateTagOffset)
+          : bindingExpressions,
+    })
+  }
+
+  // in this case a simple innerHTML is enough
+  function createHTMLTree(html, root) {
+    const template = isTemplate(root) ? root : document.createElement('template');
+    template.innerHTML = html;
+    return template.content
+  }
+
+  // for svg nodes we need a bit more work
+  /* c8 ignore start */
+  function createSVGTree(html, container) {
+    // create the SVGNode
+    const svgNode = container.ownerDocument.importNode(
+      new window.DOMParser().parseFromString(
+        `<svg xmlns="http://www.w3.org/2000/svg">${html}</svg>`,
+        'application/xml',
+      ).documentElement,
+      true,
+    );
+
+    return svgNode
+  }
+  /* c8 ignore end */
+
+  /**
+   * Create the DOM that will be injected
+   * @param {Object} root - DOM node to find out the context where the fragment will be created
+   * @param   {string} html - DOM to create as string
+   * @returns {HTMLDocumentFragment|HTMLElement} a new html fragment
+   */
+  function createDOMTree(root, html) {
+    /* c8 ignore next */
+    if (isSvg(root)) return createSVGTree(html, root)
+
+    return createHTMLTree(html, root)
+  }
+
+  /**
+   * Inject the DOM tree into a target node
+   * @param   {HTMLElement} el - target element
+   * @param   {DocumentFragment|SVGElement} dom - dom tree to inject
+   * @returns {undefined}
+   */
+  function injectDOM(el, dom) {
+    switch (true) {
+      case isSvg(el):
+        moveChildren(dom, el);
+        break
+      case isTemplate(el):
+        el.parentNode.replaceChild(dom, el);
+        break
+      default:
+        el.appendChild(dom);
+    }
+  }
+
+  /**
+   * Create the Template DOM skeleton
+   * @param   {HTMLElement} el - root node where the DOM will be injected
+   * @param   {string|HTMLElement} html - HTML markup or HTMLElement that will be injected into the root node
+   * @returns {?DocumentFragment} fragment that will be injected into the root node
+   */
+  function createTemplateDOM(el, html) {
+    return html && (typeof html === 'string' ? createDOMTree(el, html) : html)
+  }
+
+  /**
+   * Get the offset of the <template> tag
+   * @param {HTMLElement} parentNode - template tag parent node
+   * @param {HTMLElement} el - the template tag we want to render
+   * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
+   * @returns {number} offset of the <template> tag calculated from its siblings DOM nodes
+   */
+  function getTemplateTagOffset(parentNode, el, meta) {
+    const siblings = Array.from(parentNode.childNodes);
+
+    return Math.max(siblings.indexOf(el), siblings.indexOf(meta.head) + 1, 0)
+  }
+
+  /**
+   * Template Chunk model
+   * @type {Object}
+   */
+  const TemplateChunk = {
+    // Static props
+    // bindings: null,
+    // bindingsData: null,
+    // html: null,
+    // isTemplateTag: false,
+    // fragment: null,
+    // children: null,
+    // dom: null,
+    // el: null,
+
+    /**
+     * Create the template DOM structure that will be cloned on each mount
+     * @param   {HTMLElement} el - the root node
+     * @returns {TemplateChunk} self
+     */
+    createDOM(el) {
+      // make sure that the DOM gets created before cloning the template
+      this.dom =
+        this.dom ||
+        createTemplateDOM(el, this.html) ||
+        document.createDocumentFragment();
+
+      return this
+    },
+
+    // API methods
+    /**
+     * Attach the template to a DOM node
+     * @param   {HTMLElement} el - target DOM node
+     * @param   {*} scope - template data
+     * @param   {*} parentScope - scope of the parent template tag
+     * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
+     * @returns {TemplateChunk} self
+     */
+    mount(el, scope, parentScope, meta = {}) {
+      if (!el) panic('Please provide DOM node to mount properly your template');
+
+      if (this.el) this.unmount(scope);
+
+      // <template> tags require a bit more work
+      // the template fragment might be already created via meta outside of this call
+      const { fragment, children, avoidDOMInjection } = meta;
+      // <template> bindings of course can not have a root element
+      // so we check the parent node to set the query selector bindings
+      const { parentNode } = children ? children[0] : el;
+      const isTemplateTag = isTemplate(el);
+      const templateTagOffset = isTemplateTag
+        ? getTemplateTagOffset(parentNode, el, meta)
+        : null;
+
+      // create the DOM if it wasn't created before
+      this.createDOM(el);
+
+      // create the DOM of this template cloning the original DOM structure stored in this instance
+      // notice that if a documentFragment was passed (via meta) we will use it instead
+      const cloneNode = fragment || this.dom.cloneNode(true);
+
+      // store root node
+      // notice that for template tags the root note will be the parent tag
+      this.el = isTemplateTag ? parentNode : el;
+
+      // create the children array only for the <template> fragments
+      this.children = isTemplateTag
+        ? children || Array.from(cloneNode.childNodes)
+        : null;
+
+      // inject the DOM into the el only if a fragment is available
+      if (!avoidDOMInjection && cloneNode) injectDOM(el, cloneNode);
+
+      // create the bindings
+      this.bindings = this.bindingsData.map((binding) =>
+        create$1(this.el, binding, templateTagOffset),
+      );
+      this.bindings.forEach((b) => b.mount(scope, parentScope));
+
+      // store the template meta properties
+      this.meta = meta;
+
+      return this
+    },
+
+    /**
+     * Update the template with fresh data
+     * @param   {*} scope - template data
+     * @param   {*} parentScope - scope of the parent template tag
+     * @returns {TemplateChunk} self
+     */
+    update(scope, parentScope) {
+      this.bindings.forEach((b) => b.update(scope, parentScope));
+
+      return this
+    },
+
+    /**
+     * Remove the template from the node where it was initially mounted
+     * @param   {*} scope - template data
+     * @param   {*} parentScope - scope of the parent template tag
+     * @param   {boolean|null} mustRemoveRoot - if true remove the root element,
+     * if false or undefined clean the root tag content, if null don't touch the DOM
+     * @returns {TemplateChunk} self
+     */
+    unmount(scope, parentScope, mustRemoveRoot = false) {
+      const el = this.el;
+
+      if (!el) {
+        return this
+      }
+
+      this.bindings.forEach((b) => b.unmount(scope, parentScope, mustRemoveRoot));
+
+      switch (true) {
+        // pure components should handle the DOM unmount updates by themselves
+        // for mustRemoveRoot === null don't touch the DOM
+        case el[IS_PURE_SYMBOL] || mustRemoveRoot === null:
+          break
+
+        // if children are declared, clear them
+        // applicable for <template> and <slot/> bindings
+        case Array.isArray(this.children):
+          clearChildren(this.children);
+          break
+
+        // clean the node children only
+        case !mustRemoveRoot:
+          cleanNode(el);
+          break
+
+        // remove the root node only if the mustRemoveRoot is truly
+        case !!mustRemoveRoot:
+          removeChild(el);
+          break
+      }
+
+      this.el = null;
+
+      return this
+    },
+
+    /**
+     * Clone the template chunk
+     * @returns {TemplateChunk} a clone of this object resetting the this.el property
+     */
+    clone() {
+      return {
+        ...this,
+        meta: {},
+        el: null,
+      }
+    },
+  };
+
+  /**
+   * Create a template chunk wiring also the bindings
+   * @param   {string|HTMLElement} html - template string
+   * @param   {BindingData[]} bindings - bindings collection
+   * @returns {TemplateChunk} a new TemplateChunk copy
+   */
+  function create(html, bindings = []) {
+    return {
+      ...TemplateChunk,
+      html,
+      bindingsData: bindings,
+    }
+  }
+
+  const oldVersion = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    bindingTypes: bindingTypes,
+    createBinding: create$1,
+    createExpression: create$4,
+    expressionTypes: expressionTypes,
+    template: create
+  });
+
+  function keyedListBench (suite, testName, domBindings, rootNode) {
+    function generateItems(amount, hasChildren) {
+      const items = [];
+      while (amount--) {
+        // eslint-disable-line
+        items.push({
+          name: `foo ${Math.random()}`,
+          props: hasChildren ? generateItems(3, false) : [],
+        });
+      }
+      return items
+    }
+
+    const tag = domBindings.template('<ul><li expr0></li></ul>', [
+      {
+        selector: '[expr0]',
+        type: domBindings.bindingTypes.EACH,
+        itemName: 'item',
+        getKey(scope) {
+          return scope.item.name
+        },
+        evaluate(scope) {
+          return scope.items
+        },
+        template: domBindings.template(' <p expr1></p>', [
+          {
+            expressions: [
+              {
+                type: domBindings.expressionTypes.TEXT,
+                childNodeIndex: 0,
+                evaluate(scope) {
+                  return scope.item.name
+                },
+              },
+            ],
+          },
+          {
+            selector: '[expr1]',
+            type: domBindings.bindingTypes.EACH,
+            itemName: 'prop',
+            getKey(scope) {
+              return scope.prop.name
+            },
+            evaluate(scope) {
+              return scope.item.props
+            },
+            template: domBindings.template(' ', [
+              {
+                expressions: [
+                  {
+                    type: domBindings.expressionTypes.TEXT,
+                    childNodeIndex: 0,
+                    evaluate(scope) {
+                      return scope.prop.name
+                    },
+                  },
+                ],
+              },
+            ]),
+          },
+        ]),
+      },
+    ]);
+
+    suite.add(
+      testName,
+      () => {
+        const items = generateItems(3, true);
+        tag.update({ items });
+        items.splice(2, 1);
+        items.splice(4, 1);
+        items.splice(6, 1);
+        items.splice(9, 1);
+        tag.update({ items: items.concat(generateItems(3, true)) });
+        tag.update({ items: [] });
+      },
+      {
+        onStart: function () {
+          document.body.appendChild(rootNode);
+          tag.mount(rootNode, { items: [] });
+        },
+        onComplete: function () {
+          tag.unmount({}, {}, true);
+        },
+      },
+    );
+  }
+
+  function fireEvent(el, name) {
+    const e = document.createEvent('HTMLEvents');
+    e.initEvent(name, false, true);
+    el.dispatchEvent(e);
+  }
+
+  function eventsBench (suite, testName, domBindings, rootNode) {
+    function generateItems(amount, hasChildren) {
+      const items = [];
+      while (amount--) {
+        // eslint-disable-line
+        items.push({
+          name: `foo ${Math.random()}`,
+          props: hasChildren ? generateItems(3, false) : [],
+        });
+      }
+      return items
+    }
+
+    const tag = domBindings.template('<ul><li expr0></li></ul>', [
+      {
+        selector: '[expr0]',
+        type: domBindings.bindingTypes.EACH,
+        itemName: 'item',
+        evaluate(scope) {
+          return scope.items
+        },
+        template: domBindings.template(' <p expr1></p>', [
+          {
+            expressions: [
+              {
+                type: domBindings.expressionTypes.TEXT,
+                childNodeIndex: 0,
+                evaluate(scope) {
+                  return scope.item.name
+                },
+              },
+              {
+                type: domBindings.expressionTypes.EVENT,
+                name: 'onclick',
+
+                evaluate() {
+                  return () => 'click'
+                },
+              },
+              {
+                type: domBindings.expressionTypes.EVENT,
+                name: 'onhover',
+
+                evaluate() {
+                  return () => 'hover'
+                },
+              },
+            ],
+          },
+          {
+            selector: '[expr1]',
+            type: domBindings.bindingTypes.EACH,
+            itemName: 'prop',
+            evaluate(scope) {
+              return scope.item.props
+            },
+            template: domBindings.template(' ', [
+              {
+                expressions: [
+                  {
+                    type: domBindings.expressionTypes.TEXT,
+                    childNodeIndex: 0,
+                    evaluate(scope) {
+                      return scope.prop.name
+                    },
+                  },
+                ],
+              },
+            ]),
+          },
+        ]),
+      },
+    ]);
+    suite.add(
+      testName,
+      function () {
+        const items = generateItems(3, true);
+        tag.update({ items });
+        const beforeLi = rootNode.querySelector('li:nth-child(2)');
+        fireEvent(beforeLi, 'click');
+        fireEvent(beforeLi, 'hover');
+        items.splice(2, 1);
+        items.splice(9, 1);
+        tag.update({ items: items.concat(generateItems(3, true)) });
+
+        const afterLi = rootNode.querySelector('li:nth-child(2)');
+        fireEvent(afterLi, 'click');
+        fireEvent(afterLi, 'hover');
+      },
+      {
+        onStart: function () {
+          document.body.appendChild(rootNode);
+          tag.mount(rootNode, { items: [] });
+        },
+        onComplete: function () {
+          tag.unmount({}, {}, true);
+        },
+      },
+    );
+  }
+
+  function listBench (suite, testName, domBindings, rootNode) {
+    function generateItems(amount, hasChildren) {
+      const items = [];
+      while (amount--) {
+        // eslint-disable-line
+        items.push({
+          name: `foo ${Math.random()}`,
+          props: hasChildren ? generateItems(3, false) : [],
+        });
+      }
+      return items
+    }
+
+    const tag = domBindings.template('<ul><li expr0></li></ul>', [
+      {
+        selector: '[expr0]',
+        type: domBindings.bindingTypes.EACH,
+        itemName: 'item',
+        evaluate(scope) {
+          return scope.items
+        },
+        template: domBindings.template(' <p expr1></p>', [
+          {
+            expressions: [
+              {
+                type: domBindings.expressionTypes.TEXT,
+                childNodeIndex: 0,
+                evaluate(scope) {
+                  return scope.item.name
+                },
+              },
+            ],
+          },
+          {
+            selector: '[expr1]',
+            type: domBindings.bindingTypes.EACH,
+            itemName: 'prop',
+            evaluate(scope) {
+              return scope.item.props
+            },
+            template: domBindings.template(' ', [
+              {
+                expressions: [
+                  {
+                    type: domBindings.expressionTypes.TEXT,
+                    childNodeIndex: 0,
+                    evaluate(scope) {
+                      return scope.prop.name
+                    },
+                  },
+                ],
+              },
+            ]),
+          },
+        ]),
+      },
+    ]);
+
+    suite.add(
+      testName,
+      () => {
+        const items = generateItems(3, true);
+        tag.update({ items });
+        tag.update({ items: items.concat(generateItems(3, true)) });
+        tag.update({ items: [] });
+      },
+      {
+        onStart: function () {
+          document.body.appendChild(rootNode);
+          tag.mount(rootNode, { items: [] });
+        },
+        onComplete: function () {
+          tag.unmount({}, {}, true);
+        },
+      },
+    );
+  }
+
+  function ifBench (suite, testName, domBindings, rootNode) {
+    const tag = domBindings.template('<div></div><p expr0></p>', [
+      {
+        selector: '[expr0]',
+        type: domBindings.bindingTypes.IF,
+        evaluate(scope) {
+          return scope.isVisible
+        },
+        template: domBindings.template('<b expr0> </b>', [
+          {
+            selector: '[expr0]',
+            expressions: [
+              {
+                type: domBindings.expressionTypes.TEXT,
+                childNodeIndex: 0,
+                evaluate(scope) {
+                  return scope.text
+                },
+              },
+            ],
+          },
+        ]),
+      },
+    ]);
+
+    suite.add(
+      testName,
+      () => {
+        tag.update({ isVisible: false, text: 'Hello' });
+        tag.update({ isVisible: true, text: 'Hello' });
+      },
+      {
+        onStart: function () {
+          document.body.appendChild(rootNode);
+          tag.mount(rootNode, {
+            isVisible: true,
+            text: 'Hello',
+          });
+        },
+        onComplete: function () {
+          tag.unmount({}, {}, true);
+        },
+      },
+    );
+  }
+
+  function mountBench (suite, testName, domBindings, rootNode) {
+    const tag = domBindings.template('<p expr0> </p>', [
+      {
+        selector: '[expr0]',
+        expressions: [
+          {
+            type: domBindings.expressionTypes.TEXT,
+            childNodeIndex: 0,
+            evaluate(scope) {
+              return scope.text
+            },
+          },
+          {
+            type: domBindings.expressionTypes.ATTRIBUTE,
+            name: 'class',
+            evaluate(scope) {
+              return scope.class
+            },
+          },
+        ],
+      },
+    ]);
+
+    suite.add(
+      testName,
+      () => {
+        tag.update({ class: 'bar', text: 'hi there' });
+        tag.update({ class: 'foo', text: 's' });
+      },
+
+      {
+        onStart: function () {
+          document.body.appendChild(rootNode);
+          tag.mount(rootNode, { class: 'foo', text: 'Hello' });
+        },
+        onComplete: function () {
+          tag.unmount({}, {}, true);
+        },
+      },
+    );
+  }
+
+  /* eslint-disable no-console */
+
+  // created the dom only on node env
+  if (globalThis.process) jsdomGlobal();
+
+  const suite = new Benchmark.Suite();
+
+  const benchmarks = {
+    'List with keys': keyedListBench,
+    Events: eventsBench,
+    'Normal list': listBench,
+    'Toggle if': ifBench,
+    'Simple mount': mountBench,
+  };
+
+  Object.entries(benchmarks).forEach(([key, bench]) => {
+    bench(suite, key, domBindings, document.createElement('div'));
+    bench(suite, `${key} (old)`, oldVersion, document.createElement('div'));
+  });
+
+  suite
+    .on('cycle', function (event) {
+      if (!globalThis.process) {
+        console.log(String(event.target));
+        return
+      }
+
+      const mem = (process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2);
+      console.log(String(event.target), `Memory usage: ${mem} MiB`);
+      global.gc();
+    })
+    .on('error', function (e) {
+      console.log(e.target.error);
+    })
+    .run({ async: true });
+
+}));
diff --git a/benchmarks/events.cjs b/benchmarks/events.js
similarity index 73%
rename from benchmarks/events.cjs
rename to benchmarks/events.js
index 683f2dc..931283f 100644
--- a/benchmarks/events.cjs
+++ b/benchmarks/events.js
@@ -4,14 +4,14 @@ function fireEvent(el, name) {
   el.dispatchEvent(e)
 }
 
-module.exports = function (suite, testName, domBindings) {
+export default function (suite, testName, domBindings, rootNode) {
   function generateItems(amount, hasChildren) {
     const items = []
     while (amount--) {
       // eslint-disable-line
       items.push({
         name: `foo ${Math.random()}`,
-        props: hasChildren ? generateItems(5, false) : [],
+        props: hasChildren ? generateItems(3, false) : [],
       })
     }
     return items
@@ -25,7 +25,7 @@ module.exports = function (suite, testName, domBindings) {
       evaluate(scope) {
         return scope.items
       },
-      template: domBindings.template('<!----><p expr1></p>', [
+      template: domBindings.template(' <p expr1></p>', [
         {
           expressions: [
             {
@@ -60,7 +60,7 @@ module.exports = function (suite, testName, domBindings) {
           evaluate(scope) {
             return scope.item.props
           },
-          template: domBindings.template('<!---->', [
+          template: domBindings.template(' ', [
             {
               expressions: [
                 {
@@ -77,29 +77,30 @@ module.exports = function (suite, testName, domBindings) {
       ]),
     },
   ])
-
-  const loopTag = document.createElement('div')
-
-  suite
-    .on('start', function () {
-      // setup
-      tag.mount(loopTag, { items: [] })
-    })
-    .on('complete', function () {
-      tag.unmount()
-    })
-    .add(testName, () => {
-      const items = generateItems(10, true)
+  suite.add(
+    testName,
+    function () {
+      const items = generateItems(3, true)
       tag.update({ items })
-      const beforeLi = loopTag.querySelector('li:nth-child(2)')
+      const beforeLi = rootNode.querySelector('li:nth-child(2)')
       fireEvent(beforeLi, 'click')
       fireEvent(beforeLi, 'hover')
       items.splice(2, 1)
       items.splice(9, 1)
-      tag.update({ items: items.concat(generateItems(5, true)) })
+      tag.update({ items: items.concat(generateItems(3, true)) })
 
-      const afterLi = loopTag.querySelector('li:nth-child(2)')
+      const afterLi = rootNode.querySelector('li:nth-child(2)')
       fireEvent(afterLi, 'click')
       fireEvent(afterLi, 'hover')
-    })
+    },
+    {
+      onStart: function () {
+        document.body.appendChild(rootNode)
+        tag.mount(rootNode, { items: [] })
+      },
+      onComplete: function () {
+        tag.unmount({}, {}, true)
+      },
+    },
+  )
 }
diff --git a/benchmarks/if.cjs b/benchmarks/if.js
similarity index 58%
rename from benchmarks/if.cjs
rename to benchmarks/if.js
index a82e59b..af59687 100644
--- a/benchmarks/if.cjs
+++ b/benchmarks/if.js
@@ -1,4 +1,4 @@
-module.exports = function (suite, testName, domBindings) {
+export default function (suite, testName, domBindings, rootNode) {
   const tag = domBindings.template('<div></div><p expr0></p>', [
     {
       selector: '[expr0]',
@@ -6,7 +6,7 @@ module.exports = function (suite, testName, domBindings) {
       evaluate(scope) {
         return scope.isVisible
       },
-      template: domBindings.template('<b expr0><!----></b>', [
+      template: domBindings.template('<b expr0> </b>', [
         {
           selector: '[expr0]',
           expressions: [
@@ -23,17 +23,23 @@ module.exports = function (suite, testName, domBindings) {
     },
   ])
 
-  suite
-    .on('start', function () {
-      // setup
-      const ifTag = document.createElement('div')
-      tag.mount(ifTag, { isVisible: true, text: 'Hello' })
-    })
-    .on('complete', function () {
-      tag.unmount()
-    })
-    .add(testName, () => {
+  suite.add(
+    testName,
+    () => {
       tag.update({ isVisible: false, text: 'Hello' })
       tag.update({ isVisible: true, text: 'Hello' })
-    })
+    },
+    {
+      onStart: function () {
+        document.body.appendChild(rootNode)
+        tag.mount(rootNode, {
+          isVisible: true,
+          text: 'Hello',
+        })
+      },
+      onComplete: function () {
+        tag.unmount({}, {}, true)
+      },
+    },
+  )
 }
diff --git a/benchmarks/index.cjs b/benchmarks/index.cjs
deleted file mode 100644
index 339a700..0000000
--- a/benchmarks/index.cjs
+++ /dev/null
@@ -1,33 +0,0 @@
-/* eslint-disable no-console */
-require('jsdom-global')()
-require('../polyfills/range.cjs')
-
-const Benchmark = require('benchmark'),
-  suite = new Benchmark.Suite(),
-  domBindings = require('../dist/dom-bindings.cjs'),
-  oldVersion = require('./old-version.cjs'),
-  benchmarks = {
-    'List with keys': require('./keyed.list.cjs'),
-    Events: require('./events.cjs'),
-    'Normal list': require('./list.cjs'),
-    'Toggle if': require('./if.cjs'),
-    'Simple mount': require('./if.cjs'),
-  }
-
-Benchmark.support.browser = false
-
-Object.entries(benchmarks).forEach(([key, bench]) => {
-  bench(suite, key, domBindings)
-  bench(suite, `${key} (old)`, oldVersion)
-})
-
-suite
-  .on('cycle', function (event) {
-    const mem = (process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2)
-    console.log(String(event.target), `Memory usage: ${mem} MiB`)
-    global.gc()
-  })
-  .on('error', function (e) {
-    console.log(e.target.error)
-  })
-  .run()
diff --git a/benchmarks/index.html b/benchmarks/index.html
new file mode 100644
index 0000000..0349b85
--- /dev/null
+++ b/benchmarks/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>
+    <script src="https://unpkg.com/platform@1.3.6/platform.js"></script>
+    <script src="https://unpkg.com/benchmark@2.1.4/benchmark.js"></script>
+    <script async src="./bundle.js"></script>
+  </head>
+
+  <body></body>
+</html>
diff --git a/benchmarks/index.js b/benchmarks/index.js
new file mode 100644
index 0000000..2e370a3
--- /dev/null
+++ b/benchmarks/index.js
@@ -0,0 +1,45 @@
+/* eslint-disable no-console */
+import jsdomGlobal from 'jsdom-global'
+import Benchmark from 'benchmark'
+import * as domBindings from '../dist/dom-bindings.js'
+import * as oldVersion from './old-version.js'
+
+import keyedListBench from './keyed.list.js'
+import eventsBench from './events.js'
+import listBench from './list.js'
+import ifBench from './if.js'
+import mountBench from './mount.js'
+
+// created the dom only on node env
+if (globalThis.process) jsdomGlobal()
+
+const suite = new Benchmark.Suite()
+
+const benchmarks = {
+  'List with keys': keyedListBench,
+  Events: eventsBench,
+  'Normal list': listBench,
+  'Toggle if': ifBench,
+  'Simple mount': mountBench,
+}
+
+Object.entries(benchmarks).forEach(([key, bench]) => {
+  bench(suite, key, domBindings, document.createElement('div'))
+  bench(suite, `${key} (old)`, oldVersion, document.createElement('div'))
+})
+
+suite
+  .on('cycle', function (event) {
+    if (!globalThis.process) {
+      console.log(String(event.target))
+      return
+    }
+
+    const mem = (process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2)
+    console.log(String(event.target), `Memory usage: ${mem} MiB`)
+    global.gc()
+  })
+  .on('error', function (e) {
+    console.log(e.target.error)
+  })
+  .run({ async: true })
diff --git a/benchmarks/keyed.list.cjs b/benchmarks/keyed.list.js
similarity index 70%
rename from benchmarks/keyed.list.cjs
rename to benchmarks/keyed.list.js
index bb96df6..071d2ae 100644
--- a/benchmarks/keyed.list.cjs
+++ b/benchmarks/keyed.list.js
@@ -1,11 +1,11 @@
-module.exports = function (suite, testName, domBindings) {
+export default function (suite, testName, domBindings, rootNode) {
   function generateItems(amount, hasChildren) {
     const items = []
     while (amount--) {
       // eslint-disable-line
       items.push({
         name: `foo ${Math.random()}`,
-        props: hasChildren ? generateItems(5, false) : [],
+        props: hasChildren ? generateItems(3, false) : [],
       })
     }
     return items
@@ -22,7 +22,7 @@ module.exports = function (suite, testName, domBindings) {
       evaluate(scope) {
         return scope.items
       },
-      template: domBindings.template('<!----><p expr1></p>', [
+      template: domBindings.template(' <p expr1></p>', [
         {
           expressions: [
             {
@@ -44,7 +44,7 @@ module.exports = function (suite, testName, domBindings) {
           evaluate(scope) {
             return scope.item.props
           },
-          template: domBindings.template('<!---->', [
+          template: domBindings.template(' ', [
             {
               expressions: [
                 {
@@ -62,22 +62,26 @@ module.exports = function (suite, testName, domBindings) {
     },
   ])
 
-  suite
-    .on('start', function () {
-      // setup
-      const loopTag = document.createElement('div')
-      tag.mount(loopTag, { items: [] })
-    })
-    .on('complete', function () {
-      tag.unmount()
-    })
-    .add(testName, () => {
-      const items = generateItems(10, true)
+  suite.add(
+    testName,
+    () => {
+      const items = generateItems(3, true)
       tag.update({ items })
       items.splice(2, 1)
       items.splice(4, 1)
       items.splice(6, 1)
       items.splice(9, 1)
-      tag.update({ items: items.concat(generateItems(5, true)) })
-    })
+      tag.update({ items: items.concat(generateItems(3, true)) })
+      tag.update({ items: [] })
+    },
+    {
+      onStart: function () {
+        document.body.appendChild(rootNode)
+        tag.mount(rootNode, { items: [] })
+      },
+      onComplete: function () {
+        tag.unmount({}, {}, true)
+      },
+    },
+  )
 }
diff --git a/benchmarks/list.cjs b/benchmarks/list.js
similarity index 69%
rename from benchmarks/list.cjs
rename to benchmarks/list.js
index f254745..16f26c3 100644
--- a/benchmarks/list.cjs
+++ b/benchmarks/list.js
@@ -1,4 +1,4 @@
-module.exports = function (suite, testName, domBindings) {
+export default function (suite, testName, domBindings, rootNode) {
   function generateItems(amount, hasChildren) {
     const items = []
     while (amount--) {
@@ -19,7 +19,7 @@ module.exports = function (suite, testName, domBindings) {
       evaluate(scope) {
         return scope.items
       },
-      template: domBindings.template('<!----><p expr1></p>', [
+      template: domBindings.template(' <p expr1></p>', [
         {
           expressions: [
             {
@@ -38,7 +38,7 @@ module.exports = function (suite, testName, domBindings) {
           evaluate(scope) {
             return scope.item.props
           },
-          template: domBindings.template('<!---->', [
+          template: domBindings.template(' ', [
             {
               expressions: [
                 {
@@ -56,18 +56,22 @@ module.exports = function (suite, testName, domBindings) {
     },
   ])
 
-  suite
-    .on('start', function () {
-      // setup
-      const loopTag = document.createElement('div')
-      tag.mount(loopTag, { items: [] })
-    })
-    .on('complete', function () {
-      tag.unmount()
-    })
-    .add(testName, () => {
-      const items = generateItems(50, true)
+  suite.add(
+    testName,
+    () => {
+      const items = generateItems(3, true)
       tag.update({ items })
-      tag.update({ items: items.concat(generateItems(30, true)) })
-    })
+      tag.update({ items: items.concat(generateItems(3, true)) })
+      tag.update({ items: [] })
+    },
+    {
+      onStart: function () {
+        document.body.appendChild(rootNode)
+        tag.mount(rootNode, { items: [] })
+      },
+      onComplete: function () {
+        tag.unmount({}, {}, true)
+      },
+    },
+  )
 }
diff --git a/benchmarks/mount.cjs b/benchmarks/mount.cjs
deleted file mode 100644
index 9a6fe8a..0000000
--- a/benchmarks/mount.cjs
+++ /dev/null
@@ -1,37 +0,0 @@
-module.exports = function (suite, testName, domBindings) {
-  const tag = domBindings.template('<p expr0><!----></p>', [
-    {
-      selector: '[expr0]',
-      expressions: [
-        {
-          type: domBindings.expressionTypes.TEXT,
-          childNodeIndex: 0,
-          evaluate(scope) {
-            return scope.text
-          },
-        },
-        {
-          type: domBindings.expressionTypes.ATTRIBUTE,
-          name: 'class',
-          evaluate(scope) {
-            return scope.class
-          },
-        },
-      ],
-    },
-  ])
-
-  suite
-    .on('start', function () {
-      // setup
-      const simpleTag = document.createElement('div')
-      tag.mount(simpleTag, { class: 'foo', text: 'Hello' })
-    })
-    .on('complete', function () {
-      tag.unmount()
-    })
-    .add(testName, () => {
-      tag.update({ isVisible: 'bar', text: 'bye' })
-      tag.update({ isVisible: 'foo', text: 's' })
-    })
-}
diff --git a/benchmarks/mount.js b/benchmarks/mount.js
new file mode 100644
index 0000000..221428b
--- /dev/null
+++ b/benchmarks/mount.js
@@ -0,0 +1,41 @@
+export default function (suite, testName, domBindings, rootNode) {
+  const tag = domBindings.template('<p expr0> </p>', [
+    {
+      selector: '[expr0]',
+      expressions: [
+        {
+          type: domBindings.expressionTypes.TEXT,
+          childNodeIndex: 0,
+          evaluate(scope) {
+            return scope.text
+          },
+        },
+        {
+          type: domBindings.expressionTypes.ATTRIBUTE,
+          name: 'class',
+          evaluate(scope) {
+            return scope.class
+          },
+        },
+      ],
+    },
+  ])
+
+  suite.add(
+    testName,
+    () => {
+      tag.update({ class: 'bar', text: 'hi there' })
+      tag.update({ class: 'foo', text: 's' })
+    },
+
+    {
+      onStart: function () {
+        document.body.appendChild(rootNode)
+        tag.mount(rootNode, { class: 'foo', text: 'Hello' })
+      },
+      onComplete: function () {
+        tag.unmount({}, {}, true)
+      },
+    },
+  )
+}
diff --git a/benchmarks/old-version.cjs b/benchmarks/old-version.cjs
deleted file mode 100644
index 58390bf..0000000
--- a/benchmarks/old-version.cjs
+++ /dev/null
@@ -1,1769 +0,0 @@
-;(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined'
-    ? factory(exports)
-    : typeof define === 'function' && define.amd
-    ? define(['exports'], factory)
-    : ((global = global || self), factory((global.riotDOMBindings = {})))
-})(this, function (exports) {
-  'use strict'
-
-  /**
-   * Convert a string from camel case to dash-case
-   * @param   {string} string - probably a component tag name
-   * @returns {string} component name normalized
-   */
-
-  /**
-   * Convert a string containing dashes to camel case
-   * @param   {string} string - input string
-   * @returns {string} my-string -> myString
-   */
-  function dashToCamelCase(string) {
-    return string.replace(/-(\w)/g, (_, c) => c.toUpperCase())
-  }
-
-  /**
-   * Move all the child nodes from a source tag to another
-   * @param   {HTMLElement} source - source node
-   * @param   {HTMLElement} target - target node
-   * @returns {undefined} it's a void method ¯\_(ツ)_/¯
-   */
-
-  // Ignore this helper because it's needed only for svg tags
-  function moveChildren(source, target) {
-    if (source.firstChild) {
-      target.appendChild(source.firstChild)
-      moveChildren(source, target)
-    }
-  }
-
-  /**
-   * Remove the child nodes from any DOM node
-   * @param   {HTMLElement} node - target node
-   * @returns {undefined}
-   */
-  function cleanNode(node) {
-    clearChildren(node.childNodes)
-  }
-
-  /**
-   * Clear multiple children in a node
-   * @param   {HTMLElement[]} children - direct children nodes
-   * @returns {undefined}
-   */
-  function clearChildren(children) {
-    Array.from(children).forEach(
-      (n) => n.parentNode && n.parentNode.removeChild(n),
-    )
-  }
-
-  const EACH = 0
-  const IF = 1
-  const SIMPLE = 2
-  const TAG = 3
-  const SLOT = 4
-
-  var bindingTypes = {
-    EACH,
-    IF,
-    SIMPLE,
-    TAG,
-    SLOT,
-  }
-
-  const ATTRIBUTE = 0
-  const EVENT = 1
-  const TEXT = 2
-  const VALUE = 3
-
-  var expressionTypes = {
-    ATTRIBUTE,
-    EVENT,
-    TEXT,
-    VALUE,
-  }
-
-  /**
-   * Create the template meta object in case of <template> fragments
-   * @param   {TemplateChunk} componentTemplate - template chunk object
-   * @returns {Object} the meta property that will be passed to the mount function of the TemplateChunk
-   */
-  function createTemplateMeta(componentTemplate) {
-    const fragment = componentTemplate.dom.cloneNode(true)
-
-    return {
-      avoidDOMInjection: true,
-      fragment,
-      children: Array.from(fragment.childNodes),
-    }
-  }
-
-  const { indexOf: iOF } = []
-  const append = (get, parent, children, start, end, before) => {
-    const isSelect = 'selectedIndex' in parent
-    let noSelection = isSelect
-    while (start < end) {
-      const child = get(children[start], 1)
-      parent.insertBefore(child, before)
-      if (isSelect && noSelection && child.selected) {
-        noSelection = !noSelection
-        let { selectedIndex } = parent
-        parent.selectedIndex =
-          selectedIndex < 0
-            ? start
-            : iOF.call(parent.querySelectorAll('option'), child)
-      }
-      start++
-    }
-  }
-
-  const eqeq = (a, b) => a == b
-
-  const identity = (O) => O
-
-  const indexOf = (
-    moreNodes,
-    moreStart,
-    moreEnd,
-    lessNodes,
-    lessStart,
-    lessEnd,
-    compare,
-  ) => {
-    const length = lessEnd - lessStart
-    /* istanbul ignore if */
-    if (length < 1) return -1
-    while (moreEnd - moreStart >= length) {
-      let m = moreStart
-      let l = lessStart
-      while (
-        m < moreEnd &&
-        l < lessEnd &&
-        compare(moreNodes[m], lessNodes[l])
-      ) {
-        m++
-        l++
-      }
-      if (l === lessEnd) return moreStart
-      moreStart = m + 1
-    }
-    return -1
-  }
-
-  const isReversed = (
-    futureNodes,
-    futureEnd,
-    currentNodes,
-    currentStart,
-    currentEnd,
-    compare,
-  ) => {
-    while (
-      currentStart < currentEnd &&
-      compare(currentNodes[currentStart], futureNodes[futureEnd - 1])
-    ) {
-      currentStart++
-      futureEnd--
-    }
-    return futureEnd === 0
-  }
-
-  const next = (get, list, i, length, before) =>
-    i < length
-      ? get(list[i], 0)
-      : 0 < i
-      ? get(list[i - 1], -0).nextSibling
-      : before
-
-  const remove = (get, children, start, end) => {
-    while (start < end) drop(get(children[start++], -1))
-  }
-
-  // - - - - - - - - - - - - - - - - - - -
-  // diff related constants and utilities
-  // - - - - - - - - - - - - - - - - - - -
-
-  const DELETION = -1
-  const INSERTION = 1
-  const SKIP = 0
-  const SKIP_OND = 50
-
-  const HS = (
-    futureNodes,
-    futureStart,
-    futureEnd,
-    futureChanges,
-    currentNodes,
-    currentStart,
-    currentEnd,
-    currentChanges,
-  ) => {
-    let k = 0
-    /* istanbul ignore next */
-    let minLen = futureChanges < currentChanges ? futureChanges : currentChanges
-    const link = Array(minLen++)
-    const tresh = Array(minLen)
-    tresh[0] = -1
-
-    for (let i = 1; i < minLen; i++) tresh[i] = currentEnd
-
-    const nodes = currentNodes.slice(currentStart, currentEnd)
-
-    for (let i = futureStart; i < futureEnd; i++) {
-      const index = nodes.indexOf(futureNodes[i])
-      if (-1 < index) {
-        const idxInOld = index + currentStart
-        k = findK(tresh, minLen, idxInOld)
-        /* istanbul ignore else */
-        if (-1 < k) {
-          tresh[k] = idxInOld
-          link[k] = {
-            newi: i,
-            oldi: idxInOld,
-            prev: link[k - 1],
-          }
-        }
-      }
-    }
-
-    k = --minLen
-    --currentEnd
-    while (tresh[k] > currentEnd) --k
-
-    minLen = currentChanges + futureChanges - k
-    const diff = Array(minLen)
-    let ptr = link[k]
-    --futureEnd
-    while (ptr) {
-      const { newi, oldi } = ptr
-      while (futureEnd > newi) {
-        diff[--minLen] = INSERTION
-        --futureEnd
-      }
-      while (currentEnd > oldi) {
-        diff[--minLen] = DELETION
-        --currentEnd
-      }
-      diff[--minLen] = SKIP
-      --futureEnd
-      --currentEnd
-      ptr = ptr.prev
-    }
-    while (futureEnd >= futureStart) {
-      diff[--minLen] = INSERTION
-      --futureEnd
-    }
-    while (currentEnd >= currentStart) {
-      diff[--minLen] = DELETION
-      --currentEnd
-    }
-    return diff
-  }
-
-  // this is pretty much the same petit-dom code without the delete map part
-  // https://github.com/yelouafi/petit-dom/blob/bd6f5c919b5ae5297be01612c524c40be45f14a7/src/vdom.js#L556-L561
-  const OND = (
-    futureNodes,
-    futureStart,
-    rows,
-    currentNodes,
-    currentStart,
-    cols,
-    compare,
-  ) => {
-    const length = rows + cols
-    const v = []
-    let d, k, r, c, pv, cv, pd
-    outer: for (d = 0; d <= length; d++) {
-      /* istanbul ignore if */
-      if (d > SKIP_OND) return null
-      pd = d - 1
-      /* istanbul ignore next */
-      pv = d ? v[d - 1] : [0, 0]
-      cv = v[d] = []
-      for (k = -d; k <= d; k += 2) {
-        if (k === -d || (k !== d && pv[pd + k - 1] < pv[pd + k + 1])) {
-          c = pv[pd + k + 1]
-        } else {
-          c = pv[pd + k - 1] + 1
-        }
-        r = c - k
-        while (
-          c < cols &&
-          r < rows &&
-          compare(currentNodes[currentStart + c], futureNodes[futureStart + r])
-        ) {
-          c++
-          r++
-        }
-        if (c === cols && r === rows) {
-          break outer
-        }
-        cv[d + k] = c
-      }
-    }
-
-    const diff = Array(d / 2 + length / 2)
-    let diffIdx = diff.length - 1
-    for (d = v.length - 1; d >= 0; d--) {
-      while (
-        c > 0 &&
-        r > 0 &&
-        compare(
-          currentNodes[currentStart + c - 1],
-          futureNodes[futureStart + r - 1],
-        )
-      ) {
-        // diagonal edge = equality
-        diff[diffIdx--] = SKIP
-        c--
-        r--
-      }
-      if (!d) break
-      pd = d - 1
-      /* istanbul ignore next */
-      pv = d ? v[d - 1] : [0, 0]
-      k = c - r
-      if (k === -d || (k !== d && pv[pd + k - 1] < pv[pd + k + 1])) {
-        // vertical edge = insertion
-        r--
-        diff[diffIdx--] = INSERTION
-      } else {
-        // horizontal edge = deletion
-        c--
-        diff[diffIdx--] = DELETION
-      }
-    }
-    return diff
-  }
-
-  const applyDiff = (
-    diff,
-    get,
-    parentNode,
-    futureNodes,
-    futureStart,
-    currentNodes,
-    currentStart,
-    currentLength,
-    before,
-  ) => {
-    const live = []
-    const length = diff.length
-    let currentIndex = currentStart
-    let i = 0
-    while (i < length) {
-      switch (diff[i++]) {
-        case SKIP:
-          futureStart++
-          currentIndex++
-          break
-        case INSERTION:
-          // TODO: bulk appends for sequential nodes
-          live.push(futureNodes[futureStart])
-          append(
-            get,
-            parentNode,
-            futureNodes,
-            futureStart++,
-            futureStart,
-            currentIndex < currentLength
-              ? get(currentNodes[currentIndex], 0)
-              : before,
-          )
-          break
-        case DELETION:
-          currentIndex++
-          break
-      }
-    }
-    i = 0
-    while (i < length) {
-      switch (diff[i++]) {
-        case SKIP:
-          currentStart++
-          break
-        case DELETION:
-          // TODO: bulk removes for sequential nodes
-          if (-1 < live.indexOf(currentNodes[currentStart])) currentStart++
-          else remove(get, currentNodes, currentStart++, currentStart)
-          break
-      }
-    }
-  }
-
-  const findK = (ktr, length, j) => {
-    let lo = 1
-    let hi = length
-    while (lo < hi) {
-      const mid = ((lo + hi) / 2) >>> 0
-      if (j < ktr[mid]) hi = mid
-      else lo = mid + 1
-    }
-    return lo
-  }
-
-  const smartDiff = (
-    get,
-    parentNode,
-    futureNodes,
-    futureStart,
-    futureEnd,
-    futureChanges,
-    currentNodes,
-    currentStart,
-    currentEnd,
-    currentChanges,
-    currentLength,
-    compare,
-    before,
-  ) => {
-    applyDiff(
-      OND(
-        futureNodes,
-        futureStart,
-        futureChanges,
-        currentNodes,
-        currentStart,
-        currentChanges,
-        compare,
-      ) ||
-        HS(
-          futureNodes,
-          futureStart,
-          futureEnd,
-          futureChanges,
-          currentNodes,
-          currentStart,
-          currentEnd,
-          currentChanges,
-        ),
-      get,
-      parentNode,
-      futureNodes,
-      futureStart,
-      currentNodes,
-      currentStart,
-      currentLength,
-      before,
-    )
-  }
-
-  const drop = (node) => (node.remove || dropChild).call(node)
-
-  function dropChild() {
-    const { parentNode } = this
-    /* istanbul ignore else */
-    if (parentNode) parentNode.removeChild(this)
-  }
-
-  /*! (c) 2018 Andrea Giammarchi (ISC) */
-
-  const domdiff = (
-    parentNode, // where changes happen
-    currentNodes, // Array of current items/nodes
-    futureNodes, // Array of future items/nodes
-    options, // optional object with one of the following properties
-    //  before: domNode
-    //  compare(generic, generic) => true if same generic
-    //  node(generic) => Node
-  ) => {
-    if (!options) options = {}
-
-    const compare = options.compare || eqeq
-    const get = options.node || identity
-    const before = options.before == null ? null : get(options.before, 0)
-
-    const currentLength = currentNodes.length
-    let currentEnd = currentLength
-    let currentStart = 0
-
-    let futureEnd = futureNodes.length
-    let futureStart = 0
-
-    // common prefix
-    while (
-      currentStart < currentEnd &&
-      futureStart < futureEnd &&
-      compare(currentNodes[currentStart], futureNodes[futureStart])
-    ) {
-      currentStart++
-      futureStart++
-    }
-
-    // common suffix
-    while (
-      currentStart < currentEnd &&
-      futureStart < futureEnd &&
-      compare(currentNodes[currentEnd - 1], futureNodes[futureEnd - 1])
-    ) {
-      currentEnd--
-      futureEnd--
-    }
-
-    const currentSame = currentStart === currentEnd
-    const futureSame = futureStart === futureEnd
-
-    // same list
-    if (currentSame && futureSame) return futureNodes
-
-    // only stuff to add
-    if (currentSame && futureStart < futureEnd) {
-      append(
-        get,
-        parentNode,
-        futureNodes,
-        futureStart,
-        futureEnd,
-        next(get, currentNodes, currentStart, currentLength, before),
-      )
-      return futureNodes
-    }
-
-    // only stuff to remove
-    if (futureSame && currentStart < currentEnd) {
-      remove(get, currentNodes, currentStart, currentEnd)
-      return futureNodes
-    }
-
-    const currentChanges = currentEnd - currentStart
-    const futureChanges = futureEnd - futureStart
-    let i = -1
-
-    // 2 simple indels: the shortest sequence is a subsequence of the longest
-    if (currentChanges < futureChanges) {
-      i = indexOf(
-        futureNodes,
-        futureStart,
-        futureEnd,
-        currentNodes,
-        currentStart,
-        currentEnd,
-        compare,
-      )
-      // inner diff
-      if (-1 < i) {
-        append(
-          get,
-          parentNode,
-          futureNodes,
-          futureStart,
-          i,
-          get(currentNodes[currentStart], 0),
-        )
-        append(
-          get,
-          parentNode,
-          futureNodes,
-          i + currentChanges,
-          futureEnd,
-          next(get, currentNodes, currentEnd, currentLength, before),
-        )
-        return futureNodes
-      }
-    } else if (futureChanges < currentChanges) {
-      /* istanbul ignore else */
-      i = indexOf(
-        currentNodes,
-        currentStart,
-        currentEnd,
-        futureNodes,
-        futureStart,
-        futureEnd,
-        compare,
-      )
-      // outer diff
-      if (-1 < i) {
-        remove(get, currentNodes, currentStart, i)
-        remove(get, currentNodes, i + futureChanges, currentEnd)
-        return futureNodes
-      }
-    }
-
-    // common case with one replacement for many nodes
-    // or many nodes replaced for a single one
-    /* istanbul ignore else */
-    if (currentChanges < 2 || futureChanges < 2) {
-      append(
-        get,
-        parentNode,
-        futureNodes,
-        futureStart,
-        futureEnd,
-        get(currentNodes[currentStart], 0),
-      )
-      remove(get, currentNodes, currentStart, currentEnd)
-      return futureNodes
-    }
-
-    // the half match diff part has been skipped in petit-dom
-    // https://github.com/yelouafi/petit-dom/blob/bd6f5c919b5ae5297be01612c524c40be45f14a7/src/vdom.js#L391-L397
-    // accordingly, I think it's safe to skip in here too
-    // if one day it'll come out like the speediest thing ever to do
-    // then I might add it in here too
-
-    // Extra: before going too fancy, what about reversed lists ?
-    //        This should bail out pretty quickly if that's not the case.
-    if (
-      currentChanges === futureChanges &&
-      isReversed(
-        futureNodes,
-        futureEnd,
-        currentNodes,
-        currentStart,
-        currentEnd,
-        compare,
-      )
-    ) {
-      append(
-        get,
-        parentNode,
-        futureNodes,
-        futureStart,
-        futureEnd,
-        next(get, currentNodes, currentEnd, currentLength, before),
-      )
-      return futureNodes
-    }
-
-    // last resort through a smart diff
-    smartDiff(
-      get,
-      parentNode,
-      futureNodes,
-      futureStart,
-      futureEnd,
-      futureChanges,
-      currentNodes,
-      currentStart,
-      currentEnd,
-      currentChanges,
-      currentLength,
-      compare,
-      before,
-    )
-
-    return futureNodes
-  }
-
-  /**
-   * Quick type checking
-   * @param   {*} element - anything
-   * @param   {string} type - type definition
-   * @returns {boolean} true if the type corresponds
-   */
-  function checkType(element, type) {
-    return typeof element === type
-  }
-
-  /**
-   * Check if an element is part of an svg
-   * @param   {HTMLElement}  el - element to check
-   * @returns {boolean} true if we are in an svg context
-   */
-  function isSvg(el) {
-    const owner = el.ownerSVGElement
-
-    return !!owner || owner === null
-  }
-
-  /**
-   * Check if an element is a template tag
-   * @param   {HTMLElement}  el - element to check
-   * @returns {boolean} true if it's a <template>
-   */
-  function isTemplate(el) {
-    return !isNil(el.content)
-  }
-
-  /**
-   * Check if a value is a Boolean
-   * @param   {*}  value - anything
-   * @returns {boolean} true only for the value is a boolean
-   */
-  function isBoolean(value) {
-    return checkType(value, 'boolean')
-  }
-
-  /**
-   * Check if a value is an Object
-   * @param   {*}  value - anything
-   * @returns {boolean} true only for the value is an object
-   */
-  function isObject(value) {
-    return !isNil(value) && checkType(value, 'object')
-  }
-
-  /**
-   * Check if a value is null or undefined
-   * @param   {*}  value - anything
-   * @returns {boolean} true only for the 'undefined' and 'null' types
-   */
-  function isNil(value) {
-    return value === null || value === undefined
-  }
-
-  const EachBinding = Object.seal({
-    // dynamic binding properties
-    // childrenMap: null,
-    // node: null,
-    // root: null,
-    // condition: null,
-    // evaluate: null,
-    // template: null,
-    // isTemplateTag: false,
-    nodes: [],
-    // getKey: null,
-    // indexName: null,
-    // itemName: null,
-    // afterPlaceholder: null,
-    // placeholder: null,
-
-    // API methods
-    mount(scope, parentScope) {
-      return this.update(scope, parentScope)
-    },
-    update(scope, parentScope) {
-      const { placeholder } = this
-      const collection = this.evaluate(scope)
-      const items = collection ? Array.from(collection) : []
-      const parent = placeholder.parentNode
-
-      // prepare the diffing
-      const { newChildrenMap, batches, futureNodes } = createPatch(
-        items,
-        scope,
-        parentScope,
-        this,
-      )
-
-      // patch the DOM only if there are new nodes
-      if (futureNodes.length) {
-        domdiff(parent, this.nodes, futureNodes, {
-          before: placeholder,
-          node: patch(Array.from(this.childrenMap.values()), parentScope),
-        })
-      } else {
-        // remove all redundant templates
-        unmountRedundant(this.childrenMap)
-      }
-
-      // trigger the mounts and the updates
-      batches.forEach((fn) => fn())
-
-      // update the children map
-      this.childrenMap = newChildrenMap
-      this.nodes = futureNodes
-
-      return this
-    },
-    unmount(scope, parentScope) {
-      unmountRedundant(this.childrenMap, parentScope)
-
-      this.childrenMap = new Map()
-      this.nodes = []
-
-      return this
-    },
-  })
-
-  /**
-   * Patch the DOM while diffing
-   * @param   {TemplateChunk[]} redundant - redundant tepmplate chunks
-   * @param   {*} parentScope - scope of the parent template
-   * @returns {Function} patch function used by domdiff
-   */
-  function patch(redundant, parentScope) {
-    return (item, info) => {
-      if (info < 0) {
-        const { template, context } = redundant.pop()
-        // notice that we pass null as last argument because
-        // the root node and its children will be removed by domdiff
-        template.unmount(context, parentScope, null)
-      }
-
-      return item
-    }
-  }
-
-  /**
-   * Unmount the remaining template instances
-   * @param   {Map} childrenMap - map containing the children template to unmount
-   * @param   {*} parentScope - scope of the parent template
-   * @returns {TemplateChunk[]} collection containing the template chunks unmounted
-   */
-  function unmountRedundant(childrenMap, parentScope) {
-    return Array.from(childrenMap.values()).map(({ template, context }) => {
-      return template.unmount(context, parentScope, true)
-    })
-  }
-
-  /**
-   * Check whether a template must be filtered from a loop
-   * @param   {Function} condition - filter function
-   * @param   {Object} context - argument passed to the filter function
-   * @returns {boolean} true if this item should be skipped
-   */
-  function mustFilterItem(condition, context) {
-    return condition ? Boolean(condition(context)) === false : false
-  }
-
-  /**
-   * Extend the scope of the looped template
-   * @param   {Object} scope - current template scope
-   * @param   {string} options.itemName - key to identify the looped item in the new context
-   * @param   {string} options.indexName - key to identify the index of the looped item
-   * @param   {number} options.index - current index
-   * @param   {*} options.item - collection item looped
-   * @returns {Object} enhanced scope object
-   */
-  function extendScope(scope, { itemName, indexName, index, item }) {
-    scope[itemName] = item
-    if (indexName) scope[indexName] = index
-    return scope
-  }
-
-  /**
-   * Loop the current template items
-   * @param   {Array} items - expression collection value
-   * @param   {*} scope - template scope
-   * @param   {*} parentScope - scope of the parent template
-   * @param   {EeachBinding} binding - each binding object instance
-   * @returns {Object} data
-   * @returns {Map} data.newChildrenMap - a Map containing the new children template structure
-   * @returns {Array} data.batches - array containing the template lifecycle functions to trigger
-   * @returns {Array} data.futureNodes - array containing the nodes we need to diff
-   */
-  function createPatch(items, scope, parentScope, binding) {
-    const {
-      condition,
-      template,
-      childrenMap,
-      itemName,
-      getKey,
-      indexName,
-      root,
-      isTemplateTag,
-    } = binding
-    const newChildrenMap = new Map()
-    const batches = []
-    const futureNodes = []
-
-    items.forEach((item, index) => {
-      const context = extendScope(Object.create(scope), {
-        itemName,
-        indexName,
-        index,
-        item,
-      })
-      const key = getKey ? getKey(context) : index
-      const oldItem = childrenMap.get(key)
-
-      if (mustFilterItem(condition, context)) {
-        return
-      }
-
-      const componentTemplate = oldItem ? oldItem.template : template.clone()
-      const el = oldItem ? componentTemplate.el : root.cloneNode()
-      const mustMount = !oldItem
-      const meta =
-        isTemplateTag && mustMount ? createTemplateMeta(componentTemplate) : {}
-
-      if (mustMount) {
-        batches.push(() =>
-          componentTemplate.mount(el, context, parentScope, meta),
-        )
-      } else {
-        componentTemplate.update(context, parentScope)
-      }
-
-      // create the collection of nodes to update or to add
-      // in case of template tags we need to add all its children nodes
-      if (isTemplateTag) {
-        futureNodes.push(...(meta.children || componentTemplate.children))
-      } else {
-        futureNodes.push(el)
-      }
-
-      // delete the old item from the children map
-      childrenMap.delete(key)
-
-      // update the children map
-      newChildrenMap.set(key, {
-        template: componentTemplate,
-        context,
-        index,
-      })
-    })
-
-    return {
-      newChildrenMap,
-      batches,
-      futureNodes,
-    }
-  }
-
-  function create(
-    node,
-    { evaluate, condition, itemName, indexName, getKey, template },
-  ) {
-    const placeholder = document.createTextNode('')
-    const parent = node.parentNode
-    const root = node.cloneNode()
-
-    parent.insertBefore(placeholder, node)
-    parent.removeChild(node)
-
-    return {
-      ...EachBinding,
-      childrenMap: new Map(),
-      node,
-      root,
-      condition,
-      evaluate,
-      isTemplateTag: isTemplate(root),
-      template: template.createDOM(node),
-      getKey,
-      indexName,
-      itemName,
-      placeholder,
-    }
-  }
-
-  /**
-   * Binding responsible for the `if` directive
-   */
-  const IfBinding = Object.seal({
-    // dynamic binding properties
-    // node: null,
-    // evaluate: null,
-    // parent: null,
-    // isTemplateTag: false,
-    // placeholder: null,
-    // template: null,
-
-    // API methods
-    mount(scope, parentScope) {
-      this.parent.insertBefore(this.placeholder, this.node)
-      this.parent.removeChild(this.node)
-
-      return this.update(scope, parentScope)
-    },
-    update(scope, parentScope) {
-      const value = !!this.evaluate(scope)
-      const mustMount = !this.value && value
-      const mustUnmount = this.value && !value
-      const mount = () => {
-        const pristine = this.node.cloneNode()
-
-        this.parent.insertBefore(pristine, this.placeholder)
-
-        this.template = this.template.clone()
-        this.template.mount(pristine, scope, parentScope)
-      }
-
-      switch (true) {
-        case mustMount:
-          mount()
-          break
-        case mustUnmount:
-          this.unmount(scope)
-          break
-        default:
-          if (value) this.template.update(scope, parentScope)
-      }
-
-      this.value = value
-
-      return this
-    },
-    unmount(scope, parentScope) {
-      this.template.unmount(scope, parentScope, true)
-
-      return this
-    },
-  })
-
-  function create$1(node, { evaluate, template }) {
-    return {
-      ...IfBinding,
-      node,
-      evaluate,
-      parent: node.parentNode,
-      placeholder: document.createTextNode(''),
-      template: template.createDOM(node),
-    }
-  }
-
-  const REMOVE_ATTRIBUTE = 'removeAttribute'
-  const SET_ATTIBUTE = 'setAttribute'
-
-  /**
-   * Add all the attributes provided
-   * @param   {HTMLElement} node - target node
-   * @param   {Object} attributes - object containing the attributes names and values
-   * @returns {undefined} sorry it's a void function :(
-   */
-  function setAllAttributes(node, attributes) {
-    Object.entries(attributes).forEach(([name, value]) =>
-      attributeExpression(node, { name }, value),
-    )
-  }
-
-  /**
-   * Remove all the attributes provided
-   * @param   {HTMLElement} node - target node
-   * @param   {Object} attributes - object containing all the attribute names
-   * @returns {undefined} sorry it's a void function :(
-   */
-  function removeAllAttributes(node, attributes) {
-    Object.keys(attributes).forEach((attribute) =>
-      node.removeAttribute(attribute),
-    )
-  }
-
-  /**
-   * This methods handles the DOM attributes updates
-   * @param   {HTMLElement} node - target node
-   * @param   {Object} expression - expression object
-   * @param   {string} expression.name - attribute name
-   * @param   {*} value - new expression value
-   * @param   {*} oldValue - the old expression cached value
-   * @returns {undefined}
-   */
-  function attributeExpression(node, { name }, value, oldValue) {
-    // is it a spread operator? {...attributes}
-    if (!name) {
-      // is the value still truthy?
-      if (value) {
-        setAllAttributes(node, value)
-      } else if (oldValue) {
-        // otherwise remove all the old attributes
-        removeAllAttributes(node, oldValue)
-      }
-
-      return
-    }
-
-    // handle boolean attributes
-    if (isBoolean(value) || isObject(value)) {
-      node[name] = value
-    }
-
-    node[getMethod(value)](name, normalizeValue(name, value))
-  }
-
-  /**
-   * Get the attribute modifier method
-   * @param   {*} value - if truthy we return `setAttribute` othewise `removeAttribute`
-   * @returns {string} the node attribute modifier method name
-   */
-  function getMethod(value) {
-    return isNil(value) || value === false || value === '' || isObject(value)
-      ? REMOVE_ATTRIBUTE
-      : SET_ATTIBUTE
-  }
-
-  /**
-   * Get the value as string
-   * @param   {string} name - attribute name
-   * @param   {*} value - user input value
-   * @returns {string} input value as string
-   */
-  function normalizeValue(name, value) {
-    // be sure that expressions like selected={ true } will be always rendered as selected='selected'
-    if (value === true) return name
-
-    return value
-  }
-
-  const RE_EVENTS_PREFIX = /^on/
-
-  /**
-   * Set a new event listener
-   * @param   {HTMLElement} node - target node
-   * @param   {Object} expression - expression object
-   * @param   {string} expression.name - event name
-   * @param   {*} value - new expression value
-   * @param   {*} oldValue - old expression value
-   * @returns {value} the callback just received
-   */
-  function eventExpression(node, { name }, value, oldValue) {
-    const normalizedEventName = name.replace(RE_EVENTS_PREFIX, '')
-
-    if (oldValue) {
-      node.removeEventListener(normalizedEventName, oldValue)
-    }
-
-    if (value) {
-      node.addEventListener(normalizedEventName, value, false)
-    }
-  }
-
-  /**
-   * Normalize the user value in order to render a empty string in case of falsy values
-   * @param   {*} value - user input value
-   * @returns {string} hopefully a string
-   */
-  function normalizeStringValue(value) {
-    return isNil(value) ? '' : value
-  }
-
-  /**
-   * Get the the target text node to update or create one from of a comment node
-   * @param   {HTMLElement} node - any html element containing childNodes
-   * @param   {number} childNodeIndex - index of the text node in the childNodes list
-   * @returns {HTMLTextNode} the text node to update
-   */
-  const getTextNode = (node, childNodeIndex) => {
-    const target = node.childNodes[childNodeIndex]
-
-    if (target.nodeType === Node.COMMENT_NODE) {
-      const textNode = document.createTextNode('')
-      node.replaceChild(textNode, target)
-
-      return textNode
-    }
-
-    return target
-  }
-
-  /**
-   * This methods handles a simple text expression update
-   * @param   {HTMLElement} node - target node
-   * @param   {Object} data - expression object
-   * @param   {*} value - new expression value
-   * @returns {undefined}
-   */
-  function textExpression(node, data, value) {
-    node.data = normalizeStringValue(value)
-  }
-
-  /**
-   * This methods handles the input fileds value updates
-   * @param   {HTMLElement} node - target node
-   * @param   {Object} expression - expression object
-   * @param   {*} value - new expression value
-   * @returns {undefined}
-   */
-  function valueExpression(node, expression, value) {
-    node.value = normalizeStringValue(value)
-  }
-
-  var expressions = {
-    [ATTRIBUTE]: attributeExpression,
-    [EVENT]: eventExpression,
-    [TEXT]: textExpression,
-    [VALUE]: valueExpression,
-  }
-
-  const Expression = Object.seal({
-    // Static props
-    // node: null,
-    // value: null,
-
-    // API methods
-    /**
-     * Mount the expression evaluating its initial value
-     * @param   {*} scope - argument passed to the expression to evaluate its current values
-     * @returns {Expression} self
-     */
-    mount(scope) {
-      // hopefully a pure function
-      this.value = this.evaluate(scope)
-
-      // IO() DOM updates
-      apply(this, this.value)
-
-      return this
-    },
-    /**
-     * Update the expression if its value changed
-     * @param   {*} scope - argument passed to the expression to evaluate its current values
-     * @returns {Expression} self
-     */
-    update(scope) {
-      // pure function
-      const value = this.evaluate(scope)
-
-      if (this.value !== value) {
-        // IO() DOM updates
-        apply(this, value)
-        this.value = value
-      }
-
-      return this
-    },
-    /**
-     * Expression teardown method
-     * @returns {Expression} self
-     */
-    unmount() {
-      // unmount only the event handling expressions
-      if (this.type === EVENT) apply(this, null)
-
-      return this
-    },
-  })
-
-  /**
-   * IO() function to handle the DOM updates
-   * @param {Expression} expression - expression object
-   * @param {*} value - current expression value
-   * @returns {undefined}
-   */
-  function apply(expression, value) {
-    return expressions[expression.type](
-      expression.node,
-      expression,
-      value,
-      expression.value,
-    )
-  }
-
-  function create$2(node, data) {
-    return {
-      ...Expression,
-      ...data,
-      node: data.type === TEXT ? getTextNode(node, data.childNodeIndex) : node,
-    }
-  }
-
-  /**
-   * Create a flat object having as keys a list of methods that if dispatched will propagate
-   * on the whole collection
-   * @param   {Array} collection - collection to iterate
-   * @param   {Array<string>} methods - methods to execute on each item of the collection
-   * @param   {*} context - context returned by the new methods created
-   * @returns {Object} a new object to simplify the the nested methods dispatching
-   */
-  function flattenCollectionMethods(collection, methods, context) {
-    return methods.reduce((acc, method) => {
-      return {
-        ...acc,
-        [method]: (scope) => {
-          return collection.map((item) => item[method](scope)) && context
-        },
-      }
-    }, {})
-  }
-
-  function create$3(node, { expressions }) {
-    return {
-      ...flattenCollectionMethods(
-        expressions.map((expression) => create$2(node, expression)),
-        ['mount', 'update', 'unmount'],
-      ),
-    }
-  }
-
-  /**
-   * Evaluate a list of attribute expressions
-   * @param   {Array} attributes - attribute expressions generated by the riot compiler
-   * @returns {Object} key value pairs with the result of the computation
-   */
-  function evaluateAttributeExpressions(attributes) {
-    return attributes.reduce((acc, attribute) => {
-      const { value, type } = attribute
-
-      switch (true) {
-        // spread attribute
-        case !attribute.name && type === ATTRIBUTE:
-          return {
-            ...acc,
-            ...value,
-          }
-        // value attribute
-        case type === VALUE:
-          acc.value = attribute.value
-          break
-        // normal attributes
-        default:
-          acc[dashToCamelCase(attribute.name)] = attribute.value
-      }
-
-      return acc
-    }, {})
-  }
-
-  function extendParentScope(attributes, scope, parentScope) {
-    if (!attributes || !attributes.length) return parentScope
-
-    const expressions = attributes.map((attr) => ({
-      ...attr,
-      value: attr.evaluate(scope),
-    }))
-
-    return Object.assign(
-      Object.create(parentScope || null),
-      evaluateAttributeExpressions(expressions),
-    )
-  }
-
-  const SlotBinding = Object.seal({
-    // dynamic binding properties
-    // node: null,
-    // name: null,
-    attributes: [],
-    // template: null,
-
-    getTemplateScope(scope, parentScope) {
-      return extendParentScope(this.attributes, scope, parentScope)
-    },
-
-    // API methods
-    mount(scope, parentScope) {
-      const templateData = scope.slots
-        ? scope.slots.find(({ id }) => id === this.name)
-        : false
-      const { parentNode } = this.node
-
-      this.template =
-        templateData &&
-        create$6(templateData.html, templateData.bindings).createDOM(parentNode)
-
-      if (this.template) {
-        this.template.mount(
-          this.node,
-          this.getTemplateScope(scope, parentScope),
-        )
-        this.template.children = moveSlotInnerContent(this.node)
-      }
-
-      parentNode.removeChild(this.node)
-
-      return this
-    },
-    update(scope, parentScope) {
-      if (this.template) {
-        this.template.update(this.getTemplateScope(scope, parentScope))
-      }
-
-      return this
-    },
-    unmount(scope, parentScope, mustRemoveRoot) {
-      if (this.template) {
-        this.template.unmount(
-          this.getTemplateScope(scope, parentScope),
-          null,
-          mustRemoveRoot,
-        )
-      }
-
-      return this
-    },
-  })
-
-  /**
-   * Move the inner content of the slots outside of them
-   * @param   {HTMLNode} slot - slot node
-   * @param   {HTMLElement} children - array to fill with the child nodes detected
-   * @returns {HTMLElement[]} list of the node moved
-   */
-  function moveSlotInnerContent(slot, children = []) {
-    const child = slot.firstChild
-    if (child) {
-      slot.parentNode.insertBefore(child, slot)
-      return [child, ...moveSlotInnerContent(slot)]
-    }
-
-    return children
-  }
-
-  /**
-   * Create a single slot binding
-   * @param   {HTMLElement} node - slot node
-   * @param   {string} options.name - slot id
-   * @returns {Object} Slot binding object
-   */
-  function createSlot(node, { name, attributes }) {
-    return {
-      ...SlotBinding,
-      attributes,
-      node,
-      name,
-    }
-  }
-
-  /**
-   * Create a new tag object if it was registered before, otherwise fallback to the simple
-   * template chunk
-   * @param   {Function} component - component factory function
-   * @param   {Array<Object>} slots - array containing the slots markup
-   * @param   {Array} attributes - dynamic attributes that will be received by the tag element
-   * @returns {TagImplementation|TemplateChunk} a tag implementation or a template chunk as fallback
-   */
-  function getTag(component, slots = [], attributes = []) {
-    // if this tag was registered before we will return its implementation
-    if (component) {
-      return component({ slots, attributes })
-    }
-
-    // otherwise we return a template chunk
-    return create$6(slotsToMarkup(slots), [
-      ...slotBindings(slots),
-      {
-        // the attributes should be registered as binding
-        // if we fallback to a normal template chunk
-        expressions: attributes.map((attr) => {
-          return {
-            type: ATTRIBUTE,
-            ...attr,
-          }
-        }),
-      },
-    ])
-  }
-
-  /**
-   * Merge all the slots bindings into a single array
-   * @param   {Array<Object>} slots - slots collection
-   * @returns {Array<Bindings>} flatten bindings array
-   */
-  function slotBindings(slots) {
-    return slots.reduce((acc, { bindings }) => acc.concat(bindings), [])
-  }
-
-  /**
-   * Merge all the slots together in a single markup string
-   * @param   {Array<Object>} slots - slots collection
-   * @returns {string} markup of all the slots in a single string
-   */
-  function slotsToMarkup(slots) {
-    return slots.reduce((acc, slot) => {
-      return acc + slot.html
-    }, '')
-  }
-
-  const TagBinding = Object.seal({
-    // dynamic binding properties
-    // node: null,
-    // evaluate: null,
-    // name: null,
-    // slots: null,
-    // tag: null,
-    // attributes: null,
-    // getComponent: null,
-
-    mount(scope) {
-      return this.update(scope)
-    },
-    update(scope, parentScope) {
-      const name = this.evaluate(scope)
-
-      // simple update
-      if (name === this.name) {
-        this.tag.update(scope)
-      } else {
-        // unmount the old tag if it exists
-        this.unmount(scope, parentScope, true)
-
-        // mount the new tag
-        this.name = name
-        this.tag = getTag(this.getComponent(name), this.slots, this.attributes)
-        this.tag.mount(this.node, scope)
-      }
-
-      return this
-    },
-    unmount(scope, parentScope, keepRootTag) {
-      if (this.tag) {
-        // keep the root tag
-        this.tag.unmount(keepRootTag)
-      }
-
-      return this
-    },
-  })
-
-  function create$4(node, { evaluate, getComponent, slots, attributes }) {
-    return {
-      ...TagBinding,
-      node,
-      evaluate,
-      slots,
-      attributes,
-      getComponent,
-    }
-  }
-
-  var bindings = {
-    [IF]: create$1,
-    [SIMPLE]: create$3,
-    [EACH]: create,
-    [TAG]: create$4,
-    [SLOT]: createSlot,
-  }
-
-  /**
-   * Text expressions in a template tag will get childNodeIndex value normalized
-   * depending on the position of the <template> tag offset
-   * @param   {Expression[]} expressions - riot expressions array
-   * @param   {number} textExpressionsOffset - offset of the <template> tag
-   * @returns {Expression[]} expressions containing the text expressions normalized
-   */
-  function fixTextExpressionsOffset(expressions, textExpressionsOffset) {
-    return expressions.map((e) =>
-      e.type === TEXT
-        ? {
-            ...e,
-            childNodeIndex: e.childNodeIndex + textExpressionsOffset,
-          }
-        : e,
-    )
-  }
-
-  /**
-   * Bind a new expression object to a DOM node
-   * @param   {HTMLElement} root - DOM node where to bind the expression
-   * @param   {Object} binding - binding data
-   * @param   {number|null} templateTagOffset - if it's defined we need to fix the text expressions childNodeIndex offset
-   * @returns {Expression} Expression object
-   */
-  function create$5(root, binding, templateTagOffset) {
-    const { selector, type, redundantAttribute, expressions } = binding
-    // find the node to apply the bindings
-    const node = selector ? root.querySelector(selector) : root
-    // remove eventually additional attributes created only to select this node
-    if (redundantAttribute) node.removeAttribute(redundantAttribute)
-    const bindingExpressions = expressions || []
-    // init the binding
-    return (bindings[type] || bindings[SIMPLE])(node, {
-      ...binding,
-      expressions:
-        templateTagOffset && !selector
-          ? fixTextExpressionsOffset(bindingExpressions, templateTagOffset)
-          : bindingExpressions,
-    })
-  }
-
-  // in this case a simple innerHTML is enough
-  function createHTMLTree(html, root) {
-    const template = isTemplate(root)
-      ? root
-      : document.createElement('template')
-    template.innerHTML = html
-    return template.content
-  }
-
-  // for svg nodes we need a bit more work
-  function createSVGTree(html, container) {
-    // create the SVGNode
-    const svgNode = container.ownerDocument.importNode(
-      new window.DOMParser().parseFromString(
-        `<svg xmlns="http://www.w3.org/2000/svg">${html}</svg>`,
-        'application/xml',
-      ).documentElement,
-      true,
-    )
-
-    return svgNode
-  }
-
-  /**
-   * Create the DOM that will be injected
-   * @param {Object} root - DOM node to find out the context where the fragment will be created
-   * @param   {string} html - DOM to create as string
-   * @returns {HTMLDocumentFragment|HTMLElement} a new html fragment
-   */
-  function createDOMTree(root, html) {
-    if (isSvg(root)) return createSVGTree(html, root)
-
-    return createHTMLTree(html, root)
-  }
-
-  /**
-   * Inject the DOM tree into a target node
-   * @param   {HTMLElement} el - target element
-   * @param   {HTMLFragment|SVGElement} dom - dom tree to inject
-   * @returns {undefined}
-   */
-  function injectDOM(el, dom) {
-    switch (true) {
-      case isSvg(el):
-        moveChildren(dom, el)
-        break
-      case isTemplate(el):
-        el.parentNode.replaceChild(dom, el)
-        break
-      default:
-        el.appendChild(dom)
-    }
-  }
-
-  /**
-   * Create the Template DOM skeleton
-   * @param   {HTMLElement} el - root node where the DOM will be injected
-   * @param   {string} html - markup that will be injected into the root node
-   * @returns {HTMLFragment} fragment that will be injected into the root node
-   */
-  function createTemplateDOM(el, html) {
-    return html && (typeof html === 'string' ? createDOMTree(el, html) : html)
-  }
-
-  /**
-   * Template Chunk model
-   * @type {Object}
-   */
-  const TemplateChunk = Object.freeze({
-    // Static props
-    // bindings: null,
-    // bindingsData: null,
-    // html: null,
-    // isTemplateTag: false,
-    // fragment: null,
-    // children: null,
-    // dom: null,
-    // el: null,
-
-    /**
-     * Create the template DOM structure that will be cloned on each mount
-     * @param   {HTMLElement} el - the root node
-     * @returns {TemplateChunk} self
-     */
-    createDOM(el) {
-      // make sure that the DOM gets created before cloning the template
-      this.dom = this.dom || createTemplateDOM(el, this.html)
-
-      return this
-    },
-
-    // API methods
-    /**
-     * Attach the template to a DOM node
-     * @param   {HTMLElement} el - target DOM node
-     * @param   {*} scope - template data
-     * @param   {*} parentScope - scope of the parent template tag
-     * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
-     * @returns {TemplateChunk} self
-     */
-    mount(el, scope, parentScope, meta = {}) {
-      if (!el)
-        throw new Error(
-          'Please provide DOM node to mount properly your template',
-        )
-
-      if (this.el) this.unmount(scope)
-
-      // <template> tags require a bit more work
-      // the template fragment might be already created via meta outside of this call
-      const { fragment, children, avoidDOMInjection } = meta
-      // <template> bindings of course can not have a root element
-      // so we check the parent node to set the query selector bindings
-      const { parentNode } = children ? children[0] : el
-      const isTemplateTag = isTemplate(el)
-      const templateTagOffset = isTemplateTag
-        ? Math.max(Array.from(parentNode.children).indexOf(el), 0)
-        : null
-      this.isTemplateTag = isTemplateTag
-
-      // create the DOM if it wasn't created before
-      this.createDOM(el)
-
-      if (this.dom) {
-        // create the new template dom fragment if it want already passed in via meta
-        this.fragment = fragment || this.dom.cloneNode(true)
-      }
-
-      // store root node
-      // notice that for template tags the root note will be the parent tag
-      this.el = this.isTemplateTag ? parentNode : el
-      // create the children array only for the <template> fragments
-      this.children = this.isTemplateTag
-        ? children || Array.from(this.fragment.childNodes)
-        : null
-
-      // inject the DOM into the el only if a fragment is available
-      if (!avoidDOMInjection && this.fragment) injectDOM(el, this.fragment)
-
-      // create the bindings
-      this.bindings = this.bindingsData.map((binding) =>
-        create$5(this.el, binding, templateTagOffset),
-      )
-      this.bindings.forEach((b) => b.mount(scope, parentScope))
-
-      return this
-    },
-    /**
-     * Update the template with fresh data
-     * @param   {*} scope - template data
-     * @param   {*} parentScope - scope of the parent template tag
-     * @returns {TemplateChunk} self
-     */
-    update(scope, parentScope) {
-      this.bindings.forEach((b) => b.update(scope, parentScope))
-
-      return this
-    },
-    /**
-     * Remove the template from the node where it was initially mounted
-     * @param   {*} scope - template data
-     * @param   {*} parentScope - scope of the parent template tag
-     * @param   {boolean|null} mustRemoveRoot - if true remove the root element,
-     * if false or undefined clean the root tag content, if null don't touch the DOM
-     * @returns {TemplateChunk} self
-     */
-    unmount(scope, parentScope, mustRemoveRoot) {
-      if (this.el) {
-        this.bindings.forEach((b) =>
-          b.unmount(scope, parentScope, mustRemoveRoot),
-        )
-
-        switch (true) {
-          // <template> tags should be treated a bit differently
-          // we need to clear their children only if it's explicitly required by the caller
-          // via mustRemoveRoot !== null
-          case this.children && mustRemoveRoot !== null:
-            clearChildren(this.children)
-            break
-
-          // remove the root node only if the mustRemoveRoot === true
-          case mustRemoveRoot === true && this.el.parentNode !== null:
-            this.el.parentNode.removeChild(this.el)
-            break
-
-          // otherwise we clean the node children
-          case mustRemoveRoot !== null:
-            cleanNode(this.el)
-            break
-        }
-
-        this.el = null
-      }
-
-      return this
-    },
-    /**
-     * Clone the template chunk
-     * @returns {TemplateChunk} a clone of this object resetting the this.el property
-     */
-    clone() {
-      return {
-        ...this,
-        el: null,
-      }
-    },
-  })
-
-  /**
-   * Create a template chunk wiring also the bindings
-   * @param   {string|HTMLElement} html - template string
-   * @param   {Array} bindings - bindings collection
-   * @returns {TemplateChunk} a new TemplateChunk copy
-   */
-  function create$6(html, bindings = []) {
-    return {
-      ...TemplateChunk,
-      html,
-      bindingsData: bindings,
-    }
-  }
-
-  exports.bindingTypes = bindingTypes
-  exports.createBinding = create$5
-  exports.createExpression = create$2
-  exports.expressionTypes = expressionTypes
-  exports.template = create$6
-
-  Object.defineProperty(exports, '__esModule', { value: true })
-})
diff --git a/benchmarks/old-version.js b/benchmarks/old-version.js
new file mode 100644
index 0000000..6f878f5
--- /dev/null
+++ b/benchmarks/old-version.js
@@ -0,0 +1,1321 @@
+import {
+  insertBefore,
+  removeChild,
+  replaceChild,
+  cleanNode,
+  moveChildren,
+  clearChildren,
+} from '@riotjs/util/dom'
+import { PARENT_KEY_SYMBOL, IS_PURE_SYMBOL } from '@riotjs/util/constants'
+import { IF, SIMPLE, EACH, TAG, SLOT } from '@riotjs/util/binding-types'
+export { default as bindingTypes } from '@riotjs/util/binding-types'
+import { ATTRIBUTE, EVENT, TEXT, VALUE } from '@riotjs/util/expression-types'
+export { default as expressionTypes } from '@riotjs/util/expression-types'
+import { defineProperty } from '@riotjs/util/objects'
+import {
+  isTemplate,
+  isBoolean,
+  isObject,
+  isFunction,
+  isNil,
+  isSvg,
+} from '@riotjs/util/checks'
+import { memoize, evaluateAttributeExpressions, panic } from '@riotjs/util/misc'
+
+const HEAD_SYMBOL = Symbol()
+const TAIL_SYMBOL = Symbol()
+
+/**
+ * Create the <template> fragments text nodes
+ * @return {Object} {{head: Text, tail: Text}}
+ */
+function createHeadTailPlaceholders() {
+  const head = document.createTextNode('')
+  const tail = document.createTextNode('')
+
+  head[HEAD_SYMBOL] = true
+  tail[TAIL_SYMBOL] = true
+
+  return { head, tail }
+}
+
+/**
+ * Create the template meta object in case of <template> fragments
+ * @param   {TemplateChunk} componentTemplate - template chunk object
+ * @returns {Object} the meta property that will be passed to the mount function of the TemplateChunk
+ */
+function createTemplateMeta(componentTemplate) {
+  const fragment = componentTemplate.dom.cloneNode(true)
+  const { head, tail } = createHeadTailPlaceholders()
+
+  return {
+    avoidDOMInjection: true,
+    fragment,
+    head,
+    tail,
+    children: [head, ...Array.from(fragment.childNodes), tail],
+  }
+}
+
+/* c8 ignore start */
+/**
+ * ISC License
+ *
+ * Copyright (c) 2020, Andrea Giammarchi, @WebReflection
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+ * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+ * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+ * OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+ * PERFORMANCE OF THIS SOFTWARE.
+ */
+
+// fork of https://github.com/WebReflection/udomdiff version 1.1.0
+// due to https://github.com/WebReflection/udomdiff/pull/2
+/* eslint-disable */
+
+/**
+ * @param {Node[]} a The list of current/live children
+ * @param {Node[]} b The list of future children
+ * @param {(entry: Node, action: number) => Node} get
+ * The callback invoked per each entry related DOM operation.
+ * @param {Node} [before] The optional node used as anchor to insert before.
+ * @returns {Node[]} The same list of future children.
+ */
+const udomdiff = (a, b, get, before) => {
+  const bLength = b.length
+  let aEnd = a.length
+  let bEnd = bLength
+  let aStart = 0
+  let bStart = 0
+  let map = null
+  while (aStart < aEnd || bStart < bEnd) {
+    // append head, tail, or nodes in between: fast path
+    if (aEnd === aStart) {
+      // we could be in a situation where the rest of nodes that
+      // need to be added are not at the end, and in such case
+      // the node to `insertBefore`, if the index is more than 0
+      // must be retrieved, otherwise it's gonna be the first item.
+      const node =
+        bEnd < bLength
+          ? bStart
+            ? get(b[bStart - 1], -0).nextSibling
+            : get(b[bEnd - bStart], 0)
+          : before
+      while (bStart < bEnd) insertBefore(get(b[bStart++], 1), node)
+    }
+    // remove head or tail: fast path
+    else if (bEnd === bStart) {
+      while (aStart < aEnd) {
+        // remove the node only if it's unknown or not live
+        if (!map || !map.has(a[aStart])) removeChild(get(a[aStart], -1))
+        aStart++
+      }
+    }
+    // same node: fast path
+    else if (a[aStart] === b[bStart]) {
+      aStart++
+      bStart++
+    }
+    // same tail: fast path
+    else if (a[aEnd - 1] === b[bEnd - 1]) {
+      aEnd--
+      bEnd--
+    }
+    // The once here single last swap "fast path" has been removed in v1.1.0
+    // https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
+    // reverse swap: also fast path
+    else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+      // this is a "shrink" operation that could happen in these cases:
+      // [1, 2, 3, 4, 5]
+      // [1, 4, 3, 2, 5]
+      // or asymmetric too
+      // [1, 2, 3, 4, 5]
+      // [1, 2, 3, 5, 6, 4]
+      const node = get(a[--aEnd], -1).nextSibling
+      insertBefore(get(b[bStart++], 1), get(a[aStart++], -1).nextSibling)
+      insertBefore(get(b[--bEnd], 1), node)
+      // mark the future index as identical (yeah, it's dirty, but cheap 👍)
+      // The main reason to do this, is that when a[aEnd] will be reached,
+      // the loop will likely be on the fast path, as identical to b[bEnd].
+      // In the best case scenario, the next loop will skip the tail,
+      // but in the worst one, this node will be considered as already
+      // processed, bailing out pretty quickly from the map index check
+      a[aEnd] = b[bEnd]
+    }
+    // map based fallback, "slow" path
+    else {
+      // the map requires an O(bEnd - bStart) operation once
+      // to store all future nodes indexes for later purposes.
+      // In the worst case scenario, this is a full O(N) cost,
+      // and such scenario happens at least when all nodes are different,
+      // but also if both first and last items of the lists are different
+      if (!map) {
+        map = new Map()
+        let i = bStart
+        while (i < bEnd) map.set(b[i], i++)
+      }
+      // if it's a future node, hence it needs some handling
+      if (map.has(a[aStart])) {
+        // grab the index of such node, 'cause it might have been processed
+        const index = map.get(a[aStart])
+        // if it's not already processed, look on demand for the next LCS
+        if (bStart < index && index < bEnd) {
+          let i = aStart
+          // counts the amount of nodes that are the same in the future
+          let sequence = 1
+          while (++i < aEnd && i < bEnd && map.get(a[i]) === index + sequence)
+            sequence++
+          // effort decision here: if the sequence is longer than replaces
+          // needed to reach such sequence, which would brings again this loop
+          // to the fast path, prepend the difference before a sequence,
+          // and move only the future list index forward, so that aStart
+          // and bStart will be aligned again, hence on the fast path.
+          // An example considering aStart and bStart are both 0:
+          // a: [1, 2, 3, 4]
+          // b: [7, 1, 2, 3, 6]
+          // this would place 7 before 1 and, from that time on, 1, 2, and 3
+          // will be processed at zero cost
+          if (sequence > index - bStart) {
+            const node = get(a[aStart], 0)
+            while (bStart < index) insertBefore(get(b[bStart++], 1), node)
+          }
+          // if the effort wasn't good enough, fallback to a replace,
+          // moving both source and target indexes forward, hoping that some
+          // similar node will be found later on, to go back to the fast path
+          else {
+            replaceChild(get(b[bStart++], 1), get(a[aStart++], -1))
+          }
+        }
+        // otherwise move the source forward, 'cause there's nothing to do
+        else aStart++
+      }
+      // this node has no meaning in the future list, so it's more than safe
+      // to remove it, and check the next live node out instead, meaning
+      // that only the live list index should be forwarded
+      else removeChild(get(a[aStart++], -1))
+    }
+  }
+  return b
+}
+
+const UNMOUNT_SCOPE = Symbol('unmount')
+
+const EachBinding = {
+  // dynamic binding properties
+  // childrenMap: null,
+  // node: null,
+  // root: null,
+  // condition: null,
+  // evaluate: null,
+  // template: null,
+  // isTemplateTag: false,
+  nodes: [],
+  // getKey: null,
+  // indexName: null,
+  // itemName: null,
+  // afterPlaceholder: null,
+  // placeholder: null,
+
+  // API methods
+  mount(scope, parentScope) {
+    return this.update(scope, parentScope)
+  },
+  update(scope, parentScope) {
+    const { placeholder, nodes, childrenMap } = this
+    const collection = scope === UNMOUNT_SCOPE ? null : this.evaluate(scope)
+    const items = collection ? Array.from(collection) : []
+
+    // prepare the diffing
+    const { newChildrenMap, batches, futureNodes } = createPatch(
+      items,
+      scope,
+      parentScope,
+      this,
+    )
+
+    // patch the DOM only if there are new nodes
+    udomdiff(
+      nodes,
+      futureNodes,
+      patch(Array.from(childrenMap.values()), parentScope),
+      placeholder,
+    )
+
+    // trigger the mounts and the updates
+    batches.forEach((fn) => fn())
+
+    // update the children map
+    this.childrenMap = newChildrenMap
+    this.nodes = futureNodes
+
+    return this
+  },
+  unmount(scope, parentScope) {
+    this.update(UNMOUNT_SCOPE, parentScope)
+
+    return this
+  },
+}
+
+/**
+ * Patch the DOM while diffing
+ * @param   {any[]} redundant - list of all the children (template, nodes, context) added via each
+ * @param   {*} parentScope - scope of the parent template
+ * @returns {Function} patch function used by domdiff
+ */
+function patch(redundant, parentScope) {
+  return (item, info) => {
+    if (info < 0) {
+      // get the last element added to the childrenMap saved previously
+      const element = redundant[redundant.length - 1]
+
+      if (element) {
+        // get the nodes and the template in stored in the last child of the childrenMap
+        const { template, nodes, context } = element
+        // remove the last node (notice <template> tags might have more children nodes)
+        nodes.pop()
+
+        // notice that we pass null as last argument because
+        // the root node and its children will be removed by domdiff
+        if (!nodes.length) {
+          // we have cleared all the children nodes and we can unmount this template
+          redundant.pop()
+          template.unmount(context, parentScope, null)
+        }
+      }
+    }
+
+    return item
+  }
+}
+
+/**
+ * Check whether a template must be filtered from a loop
+ * @param   {Function} condition - filter function
+ * @param   {Object} context - argument passed to the filter function
+ * @returns {boolean} true if this item should be skipped
+ */
+function mustFilterItem(condition, context) {
+  return condition ? !condition(context) : false
+}
+
+/**
+ * Extend the scope of the looped template
+ * @param   {Object} scope - current template scope
+ * @param   {Object} options - options
+ * @param   {string} options.itemName - key to identify the looped item in the new context
+ * @param   {string} options.indexName - key to identify the index of the looped item
+ * @param   {number} options.index - current index
+ * @param   {*} options.item - collection item looped
+ * @returns {Object} enhanced scope object
+ */
+function extendScope(scope, { itemName, indexName, index, item }) {
+  defineProperty(scope, itemName, item)
+  if (indexName) defineProperty(scope, indexName, index)
+
+  return scope
+}
+
+/**
+ * Loop the current template items
+ * @param   {Array} items - expression collection value
+ * @param   {*} scope - template scope
+ * @param   {*} parentScope - scope of the parent template
+ * @param   {EachBinding} binding - each binding object instance
+ * @returns {Object} data
+ * @returns {Map} data.newChildrenMap - a Map containing the new children template structure
+ * @returns {Array} data.batches - array containing the template lifecycle functions to trigger
+ * @returns {Array} data.futureNodes - array containing the nodes we need to diff
+ */
+function createPatch(items, scope, parentScope, binding) {
+  const {
+    condition,
+    template,
+    childrenMap,
+    itemName,
+    getKey,
+    indexName,
+    root,
+    isTemplateTag,
+  } = binding
+  const newChildrenMap = new Map()
+  const batches = []
+  const futureNodes = []
+
+  items.forEach((item, index) => {
+    const context = extendScope(Object.create(scope), {
+      itemName,
+      indexName,
+      index,
+      item,
+    })
+    const key = getKey ? getKey(context) : index
+    const oldItem = childrenMap.get(key)
+    const nodes = []
+
+    if (mustFilterItem(condition, context)) {
+      return
+    }
+
+    const mustMount = !oldItem
+    const componentTemplate = oldItem ? oldItem.template : template.clone()
+    const el = componentTemplate.el || root.cloneNode()
+    const meta =
+      isTemplateTag && mustMount
+        ? createTemplateMeta(componentTemplate)
+        : componentTemplate.meta
+
+    if (mustMount) {
+      batches.push(() =>
+        componentTemplate.mount(el, context, parentScope, meta),
+      )
+    } else {
+      batches.push(() => componentTemplate.update(context, parentScope))
+    }
+
+    // create the collection of nodes to update or to add
+    // in case of template tags we need to add all its children nodes
+    if (isTemplateTag) {
+      nodes.push(...meta.children)
+    } else {
+      nodes.push(el)
+    }
+
+    // delete the old item from the children map
+    childrenMap.delete(key)
+    futureNodes.push(...nodes)
+
+    // update the children map
+    newChildrenMap.set(key, {
+      nodes,
+      template: componentTemplate,
+      context,
+      index,
+    })
+  })
+
+  return {
+    newChildrenMap,
+    batches,
+    futureNodes,
+  }
+}
+
+function create$6(
+  node,
+  { evaluate, condition, itemName, indexName, getKey, template },
+) {
+  const placeholder = document.createTextNode('')
+  const root = node.cloneNode()
+
+  insertBefore(placeholder, node)
+  removeChild(node)
+
+  return {
+    ...EachBinding,
+    childrenMap: new Map(),
+    node,
+    root,
+    condition,
+    evaluate,
+    isTemplateTag: isTemplate(root),
+    template: template.createDOM(node),
+    getKey,
+    indexName,
+    itemName,
+    placeholder,
+  }
+}
+
+/**
+ * Binding responsible for the `if` directive
+ */
+const IfBinding = {
+  // dynamic binding properties
+  // node: null,
+  // evaluate: null,
+  // isTemplateTag: false,
+  // placeholder: null,
+  // template: null,
+
+  // API methods
+  mount(scope, parentScope) {
+    return this.update(scope, parentScope)
+  },
+  update(scope, parentScope) {
+    const value = !!this.evaluate(scope)
+    const mustMount = !this.value && value
+    const mustUnmount = this.value && !value
+    const mount = () => {
+      const pristine = this.node.cloneNode()
+
+      insertBefore(pristine, this.placeholder)
+      this.template = this.template.clone()
+      this.template.mount(pristine, scope, parentScope)
+    }
+
+    switch (true) {
+      case mustMount:
+        mount()
+        break
+      case mustUnmount:
+        this.unmount(scope)
+        break
+      default:
+        if (value) this.template.update(scope, parentScope)
+    }
+
+    this.value = value
+
+    return this
+  },
+  unmount(scope, parentScope) {
+    this.template.unmount(scope, parentScope, true)
+
+    return this
+  },
+}
+
+function create$5(node, { evaluate, template }) {
+  const placeholder = document.createTextNode('')
+
+  insertBefore(placeholder, node)
+  removeChild(node)
+
+  return {
+    ...IfBinding,
+    node,
+    evaluate,
+    placeholder,
+    template: template.createDOM(node),
+  }
+}
+
+/* c8 ignore next */
+const ElementProto = typeof Element === 'undefined' ? {} : Element.prototype
+const isNativeHtmlProperty = memoize(
+  (name) => ElementProto.hasOwnProperty(name), // eslint-disable-line
+)
+
+/**
+ * Add all the attributes provided
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} attributes - object containing the attributes names and values
+ * @returns {undefined} sorry it's a void function :(
+ */
+function setAllAttributes(node, attributes) {
+  Object.keys(attributes).forEach((name) =>
+    attributeExpression(node, { name }, attributes[name]),
+  )
+}
+
+/**
+ * Remove all the attributes provided
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} newAttributes - object containing all the new attribute names
+ * @param   {Object} oldAttributes - object containing all the old attribute names
+ * @returns {undefined} sorry it's a void function :(
+ */
+function removeAllAttributes(node, newAttributes, oldAttributes) {
+  const newKeys = newAttributes ? Object.keys(newAttributes) : []
+
+  Object.keys(oldAttributes)
+    .filter((name) => !newKeys.includes(name))
+    .forEach((attribute) => node.removeAttribute(attribute))
+}
+
+/**
+ * Check whether the attribute value can be rendered
+ * @param {*} value - expression value
+ * @returns {boolean} true if we can render this attribute value
+ */
+function canRenderAttribute(value) {
+  return ['string', 'number', 'boolean'].includes(typeof value)
+}
+
+/**
+ * Check whether the attribute should be removed
+ * @param {*} value - expression value
+ * @param   {boolean} isBoolean - flag to handle boolean attributes
+ * @returns {boolean} boolean - true if the attribute can be removed}
+ */
+function shouldRemoveAttribute(value, isBoolean) {
+  // boolean attributes should be removed if the value is falsy
+  if (isBoolean) return !value && value !== 0
+  // otherwise we can try to render it
+  return typeof value === 'undefined' || value === null
+}
+
+/**
+ * This methods handles the DOM attributes updates
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} expression - expression object
+ * @param   {string} expression.name - attribute name
+ * @param   {boolean} expression.isBoolean - flag to handle boolean attributes
+ * @param   {*} value - new expression value
+ * @param   {*} oldValue - the old expression cached value
+ * @returns {undefined}
+ */
+function attributeExpression(
+  node,
+  { name, isBoolean: isBoolean$1 },
+  value,
+  oldValue,
+) {
+  // is it a spread operator? {...attributes}
+  if (!name) {
+    if (oldValue) {
+      // remove all the old attributes
+      removeAllAttributes(node, value, oldValue)
+    }
+
+    // is the value still truthy?
+    if (value) {
+      setAllAttributes(node, value)
+    }
+
+    return
+  }
+
+  // store the attribute on the node to make it compatible with native custom elements
+  if (
+    !isNativeHtmlProperty(name) &&
+    (isBoolean(value) || isObject(value) || isFunction(value))
+  ) {
+    node[name] = value
+  }
+
+  if (shouldRemoveAttribute(value, isBoolean$1)) {
+    node.removeAttribute(name)
+  } else if (canRenderAttribute(value)) {
+    node.setAttribute(name, normalizeValue(name, value, isBoolean$1))
+  }
+}
+
+/**
+ * Get the value as string
+ * @param   {string} name - attribute name
+ * @param   {*} value - user input value
+ * @param   {boolean} isBoolean - boolean attributes flag
+ * @returns {string} input value as string
+ */
+function normalizeValue(name, value, isBoolean) {
+  // be sure that expressions like selected={ true } will always be rendered as selected='selected'
+  // fix https://github.com/riot/riot/issues/2975
+  return value === true && isBoolean ? name : value
+}
+
+const RE_EVENTS_PREFIX = /^on/
+
+const getCallbackAndOptions = (value) =>
+  Array.isArray(value) ? value : [value, false]
+
+// see also https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
+const EventListener = {
+  handleEvent(event) {
+    this[event.type](event)
+  },
+}
+const ListenersWeakMap = new WeakMap()
+
+const createListener = (node) => {
+  const listener = Object.create(EventListener)
+  ListenersWeakMap.set(node, listener)
+  return listener
+}
+
+/**
+ * Set a new event listener
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} expression - expression object
+ * @param   {string} expression.name - event name
+ * @param   {*} value - new expression value
+ * @returns {value} the callback just received
+ */
+function eventExpression(node, { name }, value) {
+  const normalizedEventName = name.replace(RE_EVENTS_PREFIX, '')
+  const eventListener = ListenersWeakMap.get(node) || createListener(node)
+  const [callback, options] = getCallbackAndOptions(value)
+  const handler = eventListener[normalizedEventName]
+  const mustRemoveEvent = handler && !callback
+  const mustAddEvent = callback && !handler
+
+  if (mustRemoveEvent) {
+    node.removeEventListener(normalizedEventName, eventListener)
+  }
+
+  if (mustAddEvent) {
+    node.addEventListener(normalizedEventName, eventListener, options)
+  }
+
+  eventListener[normalizedEventName] = callback
+}
+
+/**
+ * Normalize the user value in order to render a empty string in case of falsy values
+ * @param   {*} value - user input value
+ * @returns {string} hopefully a string
+ */
+function normalizeStringValue(value) {
+  return isNil(value) ? '' : value
+}
+
+/**
+ * Get the the target text node to update or create one from of a comment node
+ * @param   {HTMLElement} node - any html element containing childNodes
+ * @param   {number} childNodeIndex - index of the text node in the childNodes list
+ * @returns {Text} the text node to update
+ */
+const getTextNode = (node, childNodeIndex) => {
+  return node.childNodes[childNodeIndex]
+}
+
+/**
+ * This methods handles a simple text expression update
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} data - expression object
+ * @param   {*} value - new expression value
+ * @returns {undefined}
+ */
+function textExpression(node, data, value) {
+  node.data = normalizeStringValue(value)
+}
+
+/**
+ * This methods handles the input fields value updates
+ * @param   {HTMLElement} node - target node
+ * @param   {Object} expression - expression object
+ * @param   {*} value - new expression value
+ * @returns {undefined}
+ */
+function valueExpression(node, expression, value) {
+  node.value = normalizeStringValue(value)
+}
+
+const expressions = {
+  [ATTRIBUTE]: attributeExpression,
+  [EVENT]: eventExpression,
+  [TEXT]: textExpression,
+  [VALUE]: valueExpression,
+}
+
+const Expression = {
+  // Static props
+  // node: null,
+  // value: null,
+
+  // API methods
+  /**
+   * Mount the expression evaluating its initial value
+   * @param   {*} scope - argument passed to the expression to evaluate its current values
+   * @returns {Expression} self
+   */
+  mount(scope) {
+    // hopefully a pure function
+    this.value = this.evaluate(scope)
+
+    // IO() DOM updates
+    apply(this, this.value)
+
+    return this
+  },
+  /**
+   * Update the expression if its value changed
+   * @param   {*} scope - argument passed to the expression to evaluate its current values
+   * @returns {Expression} self
+   */
+  update(scope) {
+    // pure function
+    const value = this.evaluate(scope)
+
+    if (this.value !== value) {
+      // IO() DOM updates
+      apply(this, value)
+      this.value = value
+    }
+
+    return this
+  },
+  /**
+   * Expression teardown method
+   * @returns {Expression} self
+   */
+  unmount() {
+    // unmount only the event handling expressions
+    if (this.type === EVENT) apply(this, null)
+
+    return this
+  },
+}
+
+/**
+ * IO() function to handle the DOM updates
+ * @param {Expression} expression - expression object
+ * @param {*} value - current expression value
+ * @returns {undefined}
+ */
+function apply(expression, value) {
+  return expressions[expression.type](
+    expression.node,
+    expression,
+    value,
+    expression.value,
+  )
+}
+
+function create$4(node, data) {
+  return {
+    ...Expression,
+    ...data,
+    node: data.type === TEXT ? getTextNode(node, data.childNodeIndex) : node,
+  }
+}
+
+/**
+ * Create a flat object having as keys a list of methods that if dispatched will propagate
+ * on the whole collection
+ * @param   {Array} collection - collection to iterate
+ * @param   {Array<string>} methods - methods to execute on each item of the collection
+ * @param   {*} context - context returned by the new methods created
+ * @returns {Object} a new object to simplify the the nested methods dispatching
+ */
+function flattenCollectionMethods(collection, methods, context) {
+  return methods.reduce((acc, method) => {
+    return {
+      ...acc,
+      [method]: (scope) => {
+        return collection.map((item) => item[method](scope)) && context
+      },
+    }
+  }, {})
+}
+
+function create$3(node, { expressions }) {
+  return flattenCollectionMethods(
+    expressions.map((expression) => create$4(node, expression)),
+    ['mount', 'update', 'unmount'],
+  )
+}
+
+function extendParentScope(attributes, scope, parentScope) {
+  if (!attributes || !attributes.length) return parentScope
+
+  const expressions = attributes.map((attr) => ({
+    ...attr,
+    value: attr.evaluate(scope),
+  }))
+
+  return Object.assign(
+    Object.create(parentScope || null),
+    evaluateAttributeExpressions(expressions),
+  )
+}
+
+// this function is only meant to fix an edge case
+// https://github.com/riot/riot/issues/2842
+const getRealParent = (scope, parentScope) =>
+  scope[PARENT_KEY_SYMBOL] || parentScope
+
+const SlotBinding = {
+  // dynamic binding properties
+  // node: null,
+  // name: null,
+  attributes: [],
+  // template: null,
+
+  getTemplateScope(scope, parentScope) {
+    return extendParentScope(this.attributes, scope, parentScope)
+  },
+
+  // API methods
+  mount(scope, parentScope) {
+    const templateData = scope.slots
+      ? scope.slots.find(({ id }) => id === this.name)
+      : false
+    const { parentNode } = this.node
+    const realParent = getRealParent(scope, parentScope)
+
+    this.template =
+      templateData &&
+      create(templateData.html, templateData.bindings).createDOM(parentNode)
+
+    if (this.template) {
+      cleanNode(this.node)
+      this.template.mount(
+        this.node,
+        this.getTemplateScope(scope, realParent),
+        realParent,
+      )
+      this.template.children = Array.from(this.node.childNodes)
+    }
+
+    moveSlotInnerContent(this.node)
+    removeChild(this.node)
+
+    return this
+  },
+  update(scope, parentScope) {
+    if (this.template) {
+      const realParent = getRealParent(scope, parentScope)
+      this.template.update(this.getTemplateScope(scope, realParent), realParent)
+    }
+
+    return this
+  },
+  unmount(scope, parentScope, mustRemoveRoot) {
+    if (this.template) {
+      this.template.unmount(
+        this.getTemplateScope(scope, parentScope),
+        null,
+        mustRemoveRoot,
+      )
+    }
+
+    return this
+  },
+}
+
+/**
+ * Move the inner content of the slots outside of them
+ * @param   {HTMLElement} slot - slot node
+ * @returns {undefined} it's a void method ¯\_(ツ)_/¯
+ */
+function moveSlotInnerContent(slot) {
+  const child = slot && slot.firstChild
+
+  if (!child) return
+
+  insertBefore(child, slot)
+  moveSlotInnerContent(slot)
+}
+
+/**
+ * Create a single slot binding
+ * @param   {HTMLElement} node - slot node
+ * @param   {string} name - slot id
+ * @param   {AttributeExpressionData[]} attributes - slot attributes
+ * @returns {Object} Slot binding object
+ */
+function createSlot(node, { name, attributes }) {
+  return {
+    ...SlotBinding,
+    attributes,
+    node,
+    name,
+  }
+}
+
+/**
+ * Create a new tag object if it was registered before, otherwise fallback to the simple
+ * template chunk
+ * @param   {Function} component - component factory function
+ * @param   {Array<Object>} slots - array containing the slots markup
+ * @param   {Array} attributes - dynamic attributes that will be received by the tag element
+ * @returns {TagImplementation|TemplateChunk} a tag implementation or a template chunk as fallback
+ */
+function getTag(component, slots = [], attributes = []) {
+  // if this tag was registered before we will return its implementation
+  if (component) {
+    return component({ slots, attributes })
+  }
+
+  // otherwise we return a template chunk
+  return create(slotsToMarkup(slots), [
+    ...slotBindings(slots),
+    {
+      // the attributes should be registered as binding
+      // if we fallback to a normal template chunk
+      expressions: attributes.map((attr) => {
+        return {
+          type: ATTRIBUTE,
+          ...attr,
+        }
+      }),
+    },
+  ])
+}
+
+/**
+ * Merge all the slots bindings into a single array
+ * @param   {Array<Object>} slots - slots collection
+ * @returns {Array<Bindings>} flatten bindings array
+ */
+function slotBindings(slots) {
+  return slots.reduce((acc, { bindings }) => acc.concat(bindings), [])
+}
+
+/**
+ * Merge all the slots together in a single markup string
+ * @param   {Array<Object>} slots - slots collection
+ * @returns {string} markup of all the slots in a single string
+ */
+function slotsToMarkup(slots) {
+  return slots.reduce((acc, slot) => {
+    return acc + slot.html
+  }, '')
+}
+
+const TagBinding = {
+  // dynamic binding properties
+  // node: null,
+  // evaluate: null,
+  // name: null,
+  // slots: null,
+  // tag: null,
+  // attributes: null,
+  // getComponent: null,
+
+  mount(scope) {
+    return this.update(scope)
+  },
+  update(scope, parentScope) {
+    const name = this.evaluate(scope)
+
+    // simple update
+    if (name && name === this.name) {
+      this.tag.update(scope)
+    } else {
+      // unmount the old tag if it exists
+      this.unmount(scope, parentScope, true)
+
+      // mount the new tag
+      this.name = name
+      this.tag = getTag(this.getComponent(name), this.slots, this.attributes)
+      this.tag.mount(this.node, scope)
+    }
+
+    return this
+  },
+  unmount(scope, parentScope, keepRootTag) {
+    if (this.tag) {
+      // keep the root tag
+      this.tag.unmount(keepRootTag)
+    }
+
+    return this
+  },
+}
+
+function create$2(node, { evaluate, getComponent, slots, attributes }) {
+  return {
+    ...TagBinding,
+    node,
+    evaluate,
+    slots,
+    attributes,
+    getComponent,
+  }
+}
+
+const bindings = {
+  [IF]: create$5,
+  [SIMPLE]: create$3,
+  [EACH]: create$6,
+  [TAG]: create$2,
+  [SLOT]: createSlot,
+}
+
+/**
+ * Text expressions in a template tag will get childNodeIndex value normalized
+ * depending on the position of the <template> tag offset
+ * @param   {Expression[]} expressions - riot expressions array
+ * @param   {number} textExpressionsOffset - offset of the <template> tag
+ * @returns {Expression[]} expressions containing the text expressions normalized
+ */
+function fixTextExpressionsOffset(expressions, textExpressionsOffset) {
+  return expressions.map((e) =>
+    e.type === TEXT
+      ? {
+          ...e,
+          childNodeIndex: e.childNodeIndex + textExpressionsOffset,
+        }
+      : e,
+  )
+}
+
+/**
+ * Bind a new expression object to a DOM node
+ * @param   {HTMLElement} root - DOM node where to bind the expression
+ * @param   {TagBindingData} binding - binding data
+ * @param   {number|null} templateTagOffset - if it's defined we need to fix the text expressions childNodeIndex offset
+ * @returns {Binding} Binding object
+ */
+function create$1(root, binding, templateTagOffset) {
+  const { selector, type, redundantAttribute, expressions } = binding
+  // find the node to apply the bindings
+  const node = selector ? root.querySelector(selector) : root
+
+  // remove eventually additional attributes created only to select this node
+  if (redundantAttribute) node.removeAttribute(redundantAttribute)
+  const bindingExpressions = expressions || []
+
+  // init the binding
+  return (bindings[type] || bindings[SIMPLE])(node, {
+    ...binding,
+    expressions:
+      templateTagOffset && !selector
+        ? fixTextExpressionsOffset(bindingExpressions, templateTagOffset)
+        : bindingExpressions,
+  })
+}
+
+// in this case a simple innerHTML is enough
+function createHTMLTree(html, root) {
+  const template = isTemplate(root) ? root : document.createElement('template')
+  template.innerHTML = html
+  return template.content
+}
+
+// for svg nodes we need a bit more work
+/* c8 ignore start */
+function createSVGTree(html, container) {
+  // create the SVGNode
+  const svgNode = container.ownerDocument.importNode(
+    new window.DOMParser().parseFromString(
+      `<svg xmlns="http://www.w3.org/2000/svg">${html}</svg>`,
+      'application/xml',
+    ).documentElement,
+    true,
+  )
+
+  return svgNode
+}
+/* c8 ignore end */
+
+/**
+ * Create the DOM that will be injected
+ * @param {Object} root - DOM node to find out the context where the fragment will be created
+ * @param   {string} html - DOM to create as string
+ * @returns {HTMLDocumentFragment|HTMLElement} a new html fragment
+ */
+function createDOMTree(root, html) {
+  /* c8 ignore next */
+  if (isSvg(root)) return createSVGTree(html, root)
+
+  return createHTMLTree(html, root)
+}
+
+/**
+ * Inject the DOM tree into a target node
+ * @param   {HTMLElement} el - target element
+ * @param   {DocumentFragment|SVGElement} dom - dom tree to inject
+ * @returns {undefined}
+ */
+function injectDOM(el, dom) {
+  switch (true) {
+    case isSvg(el):
+      moveChildren(dom, el)
+      break
+    case isTemplate(el):
+      el.parentNode.replaceChild(dom, el)
+      break
+    default:
+      el.appendChild(dom)
+  }
+}
+
+/**
+ * Create the Template DOM skeleton
+ * @param   {HTMLElement} el - root node where the DOM will be injected
+ * @param   {string|HTMLElement} html - HTML markup or HTMLElement that will be injected into the root node
+ * @returns {?DocumentFragment} fragment that will be injected into the root node
+ */
+function createTemplateDOM(el, html) {
+  return html && (typeof html === 'string' ? createDOMTree(el, html) : html)
+}
+
+/**
+ * Get the offset of the <template> tag
+ * @param {HTMLElement} parentNode - template tag parent node
+ * @param {HTMLElement} el - the template tag we want to render
+ * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
+ * @returns {number} offset of the <template> tag calculated from its siblings DOM nodes
+ */
+function getTemplateTagOffset(parentNode, el, meta) {
+  const siblings = Array.from(parentNode.childNodes)
+
+  return Math.max(siblings.indexOf(el), siblings.indexOf(meta.head) + 1, 0)
+}
+
+/**
+ * Template Chunk model
+ * @type {Object}
+ */
+const TemplateChunk = {
+  // Static props
+  // bindings: null,
+  // bindingsData: null,
+  // html: null,
+  // isTemplateTag: false,
+  // fragment: null,
+  // children: null,
+  // dom: null,
+  // el: null,
+
+  /**
+   * Create the template DOM structure that will be cloned on each mount
+   * @param   {HTMLElement} el - the root node
+   * @returns {TemplateChunk} self
+   */
+  createDOM(el) {
+    // make sure that the DOM gets created before cloning the template
+    this.dom =
+      this.dom ||
+      createTemplateDOM(el, this.html) ||
+      document.createDocumentFragment()
+
+    return this
+  },
+
+  // API methods
+  /**
+   * Attach the template to a DOM node
+   * @param   {HTMLElement} el - target DOM node
+   * @param   {*} scope - template data
+   * @param   {*} parentScope - scope of the parent template tag
+   * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
+   * @returns {TemplateChunk} self
+   */
+  mount(el, scope, parentScope, meta = {}) {
+    if (!el) panic('Please provide DOM node to mount properly your template')
+
+    if (this.el) this.unmount(scope)
+
+    // <template> tags require a bit more work
+    // the template fragment might be already created via meta outside of this call
+    const { fragment, children, avoidDOMInjection } = meta
+    // <template> bindings of course can not have a root element
+    // so we check the parent node to set the query selector bindings
+    const { parentNode } = children ? children[0] : el
+    const isTemplateTag = isTemplate(el)
+    const templateTagOffset = isTemplateTag
+      ? getTemplateTagOffset(parentNode, el, meta)
+      : null
+
+    // create the DOM if it wasn't created before
+    this.createDOM(el)
+
+    // create the DOM of this template cloning the original DOM structure stored in this instance
+    // notice that if a documentFragment was passed (via meta) we will use it instead
+    const cloneNode = fragment || this.dom.cloneNode(true)
+
+    // store root node
+    // notice that for template tags the root note will be the parent tag
+    this.el = isTemplateTag ? parentNode : el
+
+    // create the children array only for the <template> fragments
+    this.children = isTemplateTag
+      ? children || Array.from(cloneNode.childNodes)
+      : null
+
+    // inject the DOM into the el only if a fragment is available
+    if (!avoidDOMInjection && cloneNode) injectDOM(el, cloneNode)
+
+    // create the bindings
+    this.bindings = this.bindingsData.map((binding) =>
+      create$1(this.el, binding, templateTagOffset),
+    )
+    this.bindings.forEach((b) => b.mount(scope, parentScope))
+
+    // store the template meta properties
+    this.meta = meta
+
+    return this
+  },
+
+  /**
+   * Update the template with fresh data
+   * @param   {*} scope - template data
+   * @param   {*} parentScope - scope of the parent template tag
+   * @returns {TemplateChunk} self
+   */
+  update(scope, parentScope) {
+    this.bindings.forEach((b) => b.update(scope, parentScope))
+
+    return this
+  },
+
+  /**
+   * Remove the template from the node where it was initially mounted
+   * @param   {*} scope - template data
+   * @param   {*} parentScope - scope of the parent template tag
+   * @param   {boolean|null} mustRemoveRoot - if true remove the root element,
+   * if false or undefined clean the root tag content, if null don't touch the DOM
+   * @returns {TemplateChunk} self
+   */
+  unmount(scope, parentScope, mustRemoveRoot = false) {
+    const el = this.el
+
+    if (!el) {
+      return this
+    }
+
+    this.bindings.forEach((b) => b.unmount(scope, parentScope, mustRemoveRoot))
+
+    switch (true) {
+      // pure components should handle the DOM unmount updates by themselves
+      // for mustRemoveRoot === null don't touch the DOM
+      case el[IS_PURE_SYMBOL] || mustRemoveRoot === null:
+        break
+
+      // if children are declared, clear them
+      // applicable for <template> and <slot/> bindings
+      case Array.isArray(this.children):
+        clearChildren(this.children)
+        break
+
+      // clean the node children only
+      case !mustRemoveRoot:
+        cleanNode(el)
+        break
+
+      // remove the root node only if the mustRemoveRoot is truly
+      case !!mustRemoveRoot:
+        removeChild(el)
+        break
+    }
+
+    this.el = null
+
+    return this
+  },
+
+  /**
+   * Clone the template chunk
+   * @returns {TemplateChunk} a clone of this object resetting the this.el property
+   */
+  clone() {
+    return {
+      ...this,
+      meta: {},
+      el: null,
+    }
+  },
+}
+
+/**
+ * Create a template chunk wiring also the bindings
+ * @param   {string|HTMLElement} html - template string
+ * @param   {BindingData[]} bindings - bindings collection
+ * @returns {TemplateChunk} a new TemplateChunk copy
+ */
+function create(html, bindings = []) {
+  return {
+    ...TemplateChunk,
+    html,
+    bindingsData: bindings,
+  }
+}
+
+export {
+  create$1 as createBinding,
+  create$4 as createExpression,
+  create as template,
+}
diff --git a/benchmarks/rollup.config.js b/benchmarks/rollup.config.js
new file mode 100644
index 0000000..447ac38
--- /dev/null
+++ b/benchmarks/rollup.config.js
@@ -0,0 +1,21 @@
+import resolve from '@rollup/plugin-node-resolve'
+
+export default {
+  input: 'benchmarks/index.js',
+  onwarn(message) {
+    if (/Circular/.test(message)) return
+    console.error(message) // eslint-disable-line
+  },
+  plugins: [resolve()],
+  external: ['jsdom-global', 'benchmark'],
+  output: [
+    {
+      file: 'benchmarks/bundle.js',
+      format: 'umd',
+      name: 'bench',
+      generatedCode: {
+        constBindings: true,
+      },
+    },
+  ],
+}
diff --git a/package.json b/package.json
index 76b4665..6a65ee8 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,10 @@
     "cov": "c8 report --reporter=lcov",
     "cov-html": "c8 report --reporter=html",
     "build": "rollup -c",
+    "build-bench": "rollup -c benchmarks/rollup.config.js",
     "pretest": "npm run build",
     "postest": "npm run cov-html",
-    "bench": "node --expose-gc benchmarks/index.cjs",
+    "bench": "node --expose-gc benchmarks/index.js",
     "test": "npm run lint && c8 mocha -r test/index.js 'test/**/*.spec.js' && npm run test-typing",
     "test-typing": "tsc -p test",
     "test-debug": "mocha --inspect --inspect-brk -r test/index.js 'test/**/*.spec.js'",
diff --git a/polyfills/range.cjs b/polyfills/range.cjs
deleted file mode 100644
index 1dae7f1..0000000
--- a/polyfills/range.cjs
+++ /dev/null
@@ -1,22 +0,0 @@
-// HACK: Polyfill needed only for the benchmark
-global.window.document.createRange = function createRange() {
-  let parent, start, end // eslint-disable-line
-  return {
-    setEndAfter: (node) => {
-      end = node
-    },
-    setStartBefore: (node) => {
-      parent = node.parentNode
-      start = node
-    },
-    deleteContents: () => {
-      const children = Array.from(parent.childNodes)
-      const offset = children.indexOf(start)
-      const endOffset = children.indexOf(end)
-
-      children.slice(offset, endOffset).forEach((node) => {
-        parent.removeChild(node)
-      })
-    },
-  }
-}