index.js

var uce = (function (exports) {
  'use strict';

  function _typeof(obj) {
    "@babel/helpers - typeof";

    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
      return typeof obj;
    } : function (obj) {
      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    }, _typeof(obj);
  }

  function _toPrimitive(input, hint) {
    if (_typeof(input) !== "object" || input === null) return input;
    var prim = input[Symbol.toPrimitive];
    if (prim !== undefined) {
      var res = prim.call(input, hint || "default");
      if (_typeof(res) !== "object") return res;
      throw new TypeError("@@toPrimitive must return a primitive value.");
    }
    return (hint === "string" ? String : Number)(input);
  }

  function _toPropertyKey(arg) {
    var key = _toPrimitive(arg, "string");
    return _typeof(key) === "symbol" ? key : String(key);
  }

  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
    }
  }
  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    Object.defineProperty(Constructor, "prototype", {
      writable: false
    });
    return Constructor;
  }

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
      o.__proto__ = p;
      return o;
    };
    return _setPrototypeOf(o, p);
  }

  function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
      throw new TypeError("Super expression must either be null or a function");
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, {
      constructor: {
        value: subClass,
        writable: true,
        configurable: true
      }
    });
    Object.defineProperty(subClass, "prototype", {
      writable: false
    });
    if (superClass) _setPrototypeOf(subClass, superClass);
  }

  function _assertThisInitialized(self) {
    if (self === void 0) {
      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return self;
  }

  function _possibleConstructorReturn(self, call) {
    if (call && (_typeof(call) === "object" || typeof call === "function")) {
      return call;
    } else if (call !== void 0) {
      throw new TypeError("Derived constructors may only return object or undefined");
    }
    return _assertThisInitialized(self);
  }

  function _getPrototypeOf(o) {
    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
      return o.__proto__ || Object.getPrototypeOf(o);
    };
    return _getPrototypeOf(o);
  }

  function _superPropBase(object, property) {
    while (!Object.prototype.hasOwnProperty.call(object, property)) {
      object = _getPrototypeOf(object);
      if (object === null) break;
    }
    return object;
  }

  function _get() {
    if (typeof Reflect !== "undefined" && Reflect.get) {
      _get = Reflect.get.bind();
    } else {
      _get = function _get(target, property, receiver) {
        var base = _superPropBase(target, property);
        if (!base) return;
        var desc = Object.getOwnPropertyDescriptor(base, property);
        if (desc.get) {
          return desc.get.call(arguments.length < 3 ? target : receiver);
        }
        return desc.value;
      };
    }
    return _get.apply(this, arguments);
  }

  function _isNativeFunction(fn) {
    return Function.toString.call(fn).indexOf("[native code]") !== -1;
  }

  function _isNativeReflectConstruct$2() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;
    try {
      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  function _construct(Parent, args, Class) {
    if (_isNativeReflectConstruct$2()) {
      _construct = Reflect.construct.bind();
    } else {
      _construct = function _construct(Parent, args, Class) {
        var a = [null];
        a.push.apply(a, args);
        var Constructor = Function.bind.apply(Parent, a);
        var instance = new Constructor();
        if (Class) _setPrototypeOf(instance, Class.prototype);
        return instance;
      };
    }
    return _construct.apply(null, arguments);
  }

  function _wrapNativeSuper(Class) {
    var _cache = typeof Map === "function" ? new Map() : undefined;
    _wrapNativeSuper = function _wrapNativeSuper(Class) {
      if (Class === null || !_isNativeFunction(Class)) return Class;
      if (typeof Class !== "function") {
        throw new TypeError("Super expression must either be null or a function");
      }
      if (typeof _cache !== "undefined") {
        if (_cache.has(Class)) return _cache.get(Class);
        _cache.set(Class, Wrapper);
      }
      function Wrapper() {
        return _construct(Class, arguments, _getPrototypeOf(this).constructor);
      }
      Wrapper.prototype = Object.create(Class.prototype, {
        constructor: {
          value: Wrapper,
          enumerable: false,
          writable: true,
          configurable: true
        }
      });
      return _setPrototypeOf(Wrapper, Class);
    };
    return _wrapNativeSuper(Class);
  }

  function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
  function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
  var MapSet = /*#__PURE__*/function (_Map) {
    _inherits(MapSet, _Map);
    var _super = _createSuper$1(MapSet);
    function MapSet() {
      _classCallCheck(this, MapSet);
      return _super.apply(this, arguments);
    }
    _createClass(MapSet, [{
      key: "set",
      value: function set(key, value) {
        _get(_getPrototypeOf(MapSet.prototype), "set", this).call(this, key, value);
        return value;
      }
    }]);
    return MapSet;
  }( /*#__PURE__*/_wrapNativeSuper(Map));
  var WeakMapSet = /*#__PURE__*/function (_WeakMap) {
    _inherits(WeakMapSet, _WeakMap);
    var _super2 = _createSuper$1(WeakMapSet);
    function WeakMapSet() {
      _classCallCheck(this, WeakMapSet);
      return _super2.apply(this, arguments);
    }
    _createClass(WeakMapSet, [{
      key: "set",
      value: function set(key, value) {
        _get(_getPrototypeOf(WeakMapSet.prototype), "set", this).call(this, key, value);
        return value;
      }
    }]);
    return WeakMapSet;
  }( /*#__PURE__*/_wrapNativeSuper(WeakMap));

  /*! (c) Andrea Giammarchi - ISC */
  var empty = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
  var elements = /<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/?)>/g;
  var attributes = /([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g;
  var holes = /[\x01\x02]/g;

  // \x01 Node.ELEMENT_NODE
  // \x02 Node.ATTRIBUTE_NODE

  /**
   * Given a template, find holes as both nodes and attributes and
   * return a string with holes as either comment nodes or named attributes.
   * @param {string[]} template a template literal tag array
   * @param {string} prefix prefix to use per each comment/attribute
   * @param {boolean} svg enforces self-closing tags
   * @returns {string} X/HTML with prefixed comments or attributes
   */
  var instrument = (function (template, prefix, svg) {
    var i = 0;
    return template.join('\x01').trim().replace(elements, function (_, name, attrs, selfClosing) {
      var ml = name + attrs.replace(attributes, '\x02=$2$1').trimEnd();
      if (selfClosing.length) ml += svg || empty.test(name) ? ' /' : '></' + name;
      return '<' + ml + '>';
    }).replace(holes, function (hole) {
      return hole === '\x01' ? '<!--' + prefix + i++ + '-->' : prefix + i++;
    });
  });

  function _arrayLikeToArray(arr, len) {
    if (len == null || len > arr.length) len = arr.length;
    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
    return arr2;
  }

  function _arrayWithoutHoles(arr) {
    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
  }

  function _iterableToArray(iter) {
    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
  }

  function _unsupportedIterableToArray(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(o);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
  }

  function _nonIterableSpread() {
    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }

  function _toConsumableArray(arr) {
    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
  }

  var ELEMENT_NODE = 1;
  var nodeType = 111;
  var remove = function remove(_ref) {
    var firstChild = _ref.firstChild,
      lastChild = _ref.lastChild;
    var range = document.createRange();
    range.setStartAfter(firstChild);
    range.setEndAfter(lastChild);
    range.deleteContents();
    return firstChild;
  };
  var diffable = function diffable(node, operation) {
    return node.nodeType === nodeType ? 1 / operation < 0 ? operation ? remove(node) : node.lastChild : operation ? node.valueOf() : node.firstChild : node;
  };
  var persistent = function persistent(fragment) {
    var firstChild = fragment.firstChild,
      lastChild = fragment.lastChild;
    if (firstChild === lastChild) return lastChild || fragment;
    var childNodes = fragment.childNodes;
    var nodes = _toConsumableArray(childNodes);
    return {
      ELEMENT_NODE: ELEMENT_NODE,
      nodeType: nodeType,
      firstChild: firstChild,
      lastChild: lastChild,
      valueOf: function valueOf() {
        if (childNodes.length !== nodes.length) fragment.append.apply(fragment, _toConsumableArray(nodes));
        return fragment;
      }
    };
  };

  var isArray$1 = Array.isArray;

  var aria = function aria(node) {
    return function (values) {
      for (var key in values) {
        var name = key === 'role' ? key : "aria-".concat(key);
        var value = values[key];
        if (value == null) node.removeAttribute(name);else node.setAttribute(name, value);
      }
    };
  };
  var getValue = function getValue(value) {
    return value == null ? value : value.valueOf();
  };
  var attribute = function attribute(node, name) {
    var oldValue,
      orphan = true;
    var attributeNode = document.createAttributeNS(null, name);
    return function (newValue) {
      var value = getValue(newValue);
      if (oldValue !== value) {
        if ((oldValue = value) == null) {
          if (!orphan) {
            node.removeAttributeNode(attributeNode);
            orphan = true;
          }
        } else {
          attributeNode.value = value;
          if (orphan) {
            node.setAttributeNodeNS(attributeNode);
            orphan = false;
          }
        }
      }
    };
  };
  var _boolean = function _boolean(node, key, oldValue) {
    return function (newValue) {
      var value = !!getValue(newValue);
      if (oldValue !== value) {
        // when IE won't be around anymore ...
        // node.toggleAttribute(key, oldValue = !!value);
        if (oldValue = value) node.setAttribute(key, '');else node.removeAttribute(key);
      }
    };
  };
  var data = function data(_ref) {
    var dataset = _ref.dataset;
    return function (values) {
      for (var key in values) {
        var value = values[key];
        if (value == null) delete dataset[key];else dataset[key] = value;
      }
    };
  };
  var event = function event(node, name) {
    var oldValue,
      lower,
      type = name.slice(2);
    if (!(name in node) && (lower = name.toLowerCase()) in node) type = lower.slice(2);
    return function (newValue) {
      var info = isArray$1(newValue) ? newValue : [newValue, false];
      if (oldValue !== info[0]) {
        if (oldValue) node.removeEventListener(type, oldValue, info[1]);
        if (oldValue = info[0]) node.addEventListener(type, oldValue, info[1]);
      }
    };
  };
  var ref = function ref(node) {
    var oldValue;
    return function (value) {
      if (oldValue !== value) {
        oldValue = value;
        if (typeof value === 'function') value(node);else value.current = node;
      }
    };
  };
  var setter = function setter(node, key) {
    return key === 'dataset' ? data(node) : function (value) {
      node[key] = value;
    };
  };
  var text = function text(node) {
    var oldValue;
    return function (newValue) {
      var value = getValue(newValue);
      if (oldValue != value) {
        oldValue = value;
        node.textContent = value == null ? '' : value;
      }
    };
  };

  /**
   * 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.
   */

  /**
   * @param {Node} parentNode The container where children live
   * @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.
   */
  var udomdiff = (function (parentNode, a, b, get, before) {
    var bLength = b.length;
    var aEnd = a.length;
    var bEnd = bLength;
    var aStart = 0;
    var bStart = 0;
    var 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.
        var node = bEnd < bLength ? bStart ? get(b[bStart - 1], -0).nextSibling : get(b[bEnd - bStart], 0) : before;
        while (bStart < bEnd) parentNode.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])) parentNode.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]
        var _node = get(a[--aEnd], -1).nextSibling;
        parentNode.insertBefore(get(b[bStart++], 1), get(a[aStart++], -1).nextSibling);
        parentNode.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();
          var 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
          var index = map.get(a[aStart]);
          // if it's not already processed, look on demand for the next LCS
          if (bStart < index && index < bEnd) {
            var _i = aStart;
            // counts the amount of nodes that are the same in the future
            var 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) {
              var _node2 = get(a[aStart], 0);
              while (bStart < index) parentNode.insertBefore(get(b[bStart++], 1), _node2);
            }
            // 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 {
              parentNode.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 parentNode.removeChild(get(a[aStart++], -1));
      }
    }
    return b;
  });

  var isArray = Array.isArray,
    prototype = Array.prototype;
  var indexOf = prototype.indexOf;
  var _Proxy = new Proxy(document, {
      get: function get(target, method) {
        return target[method].bind(target);
      }
    }),
    createDocumentFragment = _Proxy.createDocumentFragment,
    createElement = _Proxy.createElement,
    createElementNS = _Proxy.createElementNS,
    createTextNode = _Proxy.createTextNode,
    createTreeWalker = _Proxy.createTreeWalker,
    importNode = _Proxy.importNode;
  var createHTML = function createHTML(html) {
    var template = createElement('template');
    template.innerHTML = html;
    return template.content;
  };
  var xml;
  var createSVG = function createSVG(svg) {
    if (!xml) xml = createElementNS('http://www.w3.org/2000/svg', 'svg');
    xml.innerHTML = svg;
    var content = createDocumentFragment();
    content.append.apply(content, _toConsumableArray(xml.childNodes));
    return content;
  };
  var createContent = function createContent(text, svg) {
    return svg ? createSVG(text) : createHTML(text);
  };

  // from a generic path, retrieves the exact targeted node
  var reducePath = function reducePath(_ref, i) {
    var childNodes = _ref.childNodes;
    return childNodes[i];
  };

  // this helper avoid code bloat around handleAnything() callback
  var diff = function diff(comment, oldNodes, newNodes) {
    return udomdiff(comment.parentNode,
    // TODO: there is a possible edge case where a node has been
    //       removed manually, or it was a keyed one, attached
    //       to a shared reference between renders.
    //       In this case udomdiff might fail at removing such node
    //       as its parent won't be the expected one.
    //       The best way to avoid this issue is to filter oldNodes
    //       in search of those not live, or not in the current parent
    //       anymore, but this would require both a change to uwire,
    //       exposing a parentNode from the firstChild, as example,
    //       but also a filter per each diff that should exclude nodes
    //       that are not in there, penalizing performance quite a lot.
    //       As this has been also a potential issue with domdiff,
    //       and both lighterhtml and hyperHTML might fail with this
    //       very specific edge case, I might as well document this possible
    //       "diffing shenanigan" and call it a day.
    oldNodes, newNodes, diffable, comment);
  };

  // if an interpolation represents a comment, the whole
  // diffing will be related to such comment.
  // This helper is in charge of understanding how the new
  // content for such interpolation/hole should be updated
  var handleAnything = function handleAnything(comment) {
    var oldValue,
      text,
      nodes = [];
    var anyContent = function anyContent(newValue) {
      switch (_typeof(newValue)) {
        // primitives are handled as text content
        case 'string':
        case 'number':
        case 'boolean':
          if (oldValue !== newValue) {
            oldValue = newValue;
            if (!text) text = createTextNode('');
            text.data = newValue;
            nodes = diff(comment, nodes, [text]);
          }
          break;
        // null, and undefined are used to cleanup previous content
        case 'object':
        case 'undefined':
          if (newValue == null) {
            if (oldValue != newValue) {
              oldValue = newValue;
              nodes = diff(comment, nodes, []);
            }
            break;
          }
          // arrays and nodes have a special treatment
          if (isArray(newValue)) {
            oldValue = newValue;
            // arrays can be used to cleanup, if empty
            if (newValue.length === 0) nodes = diff(comment, nodes, []);
            // or diffed, if these contains nodes or "wires"
            else if (_typeof(newValue[0]) === 'object') nodes = diff(comment, nodes, newValue);
            // in all other cases the content is stringified as is
            else anyContent(String(newValue));
            break;
          }
          // if the new value is a DOM node, or a wire, and it's
          // different from the one already live, then it's diffed.
          // if the node is a fragment, it's appended once via its childNodes
          // There is no `else` here, meaning if the content
          // is not expected one, nothing happens, as easy as that.
          if (oldValue !== newValue) {
            if ('ELEMENT_NODE' in newValue) {
              oldValue = newValue;
              nodes = diff(comment, nodes, newValue.nodeType === 11 ? _toConsumableArray(newValue.childNodes) : [newValue]);
            } else {
              var value = newValue.valueOf();
              if (value !== newValue) anyContent(value);
            }
          }
          break;
        case 'function':
          anyContent(newValue(comment));
          break;
      }
    };
    return anyContent;
  };

  // attributes can be:
  //  * ref=${...}      for hooks and other purposes
  //  * aria=${...}     for aria attributes
  //  * ?boolean=${...} for boolean attributes
  //  * .dataset=${...} for dataset related attributes
  //  * .setter=${...}  for Custom Elements setters or nodes with setters
  //                    such as buttons, details, options, select, etc
  //  * @event=${...}   to explicitly handle event listeners
  //  * onevent=${...}  to automatically handle event listeners
  //  * generic=${...}  to handle an attribute just like an attribute
  var handleAttribute = function handleAttribute(node, name /*, svg*/) {
    switch (name[0]) {
      case '?':
        return _boolean(node, name.slice(1), false);
      case '.':
        return setter(node, name.slice(1));
      case '@':
        return event(node, 'on' + name.slice(1));
      case 'o':
        if (name[1] === 'n') return event(node, name);
    }
    switch (name) {
      case 'ref':
        return ref(node);
      case 'aria':
        return aria(node);
    }
    return attribute(node, name /*, svg*/);
  };

  // each mapped update carries the update type and its path
  // the type is either node, attribute, or text, while
  // the path is how to retrieve the related node to update.
  // In the attribute case, the attribute name is also carried along.
  function handlers(options) {
    var type = options.type,
      path = options.path;
    var node = path.reduceRight(reducePath, this);
    return type === 'node' ? handleAnything(node) : type === 'attr' ? handleAttribute(node, options.name /*, options.svg*/) : text(node);
  }

  // from a fragment container, create an array of indexes
  // related to its child nodes, so that it's possible
  // to retrieve later on exact node via reducePath
  var createPath = function createPath(node) {
    var path = [];
    var _node = node,
      parentNode = _node.parentNode;
    while (parentNode) {
      path.push(indexOf.call(parentNode.childNodes, node));
      node = parentNode;
      var _node2 = node;
      parentNode = _node2.parentNode;
    }
    return path;
  };

  // the prefix is used to identify either comments, attributes, or nodes
  // that contain the related unique id. In the attribute cases
  // isµX="attribute-name" will be used to map current X update to that
  // attribute name, while comments will be like <!--isµX-->, to map
  // the update to that specific comment node, hence its parent.
  // style and textarea will have <!--isµX--> text content, and are handled
  // directly through text-only updates.
  var prefix = 'isµ';

  // Template Literals are unique per scope and static, meaning a template
  // should be parsed once, and once only, as it will always represent the same
  // content, within the exact same amount of updates each time.
  // This cache relates each template to its unique content and updates.
  var cache$1 = new WeakMapSet();

  // a RegExp that helps checking nodes that cannot contain comments
  var textOnly = /^(?:textarea|script|style|title|plaintext|xmp)$/;
  var createCache = function createCache() {
    return {
      stack: [],
      // each template gets a stack for each interpolation "hole"

      entry: null,
      // each entry contains details, such as:
      //  * the template that is representing
      //  * the type of node it represents (html or svg)
      //  * the content fragment with all nodes
      //  * the list of updates per each node (template holes)
      //  * the "wired" node or fragment that will get updates
      // if the template or type are different from the previous one
      // the entry gets re-created each time

      wire: null // each rendered node represent some wired content and
      // this reference to the latest one. If different, the node
      // will be cleaned up and the new "wire" will be appended
    };
  };

  // the entry stored in the rendered node cache, and per each "hole"
  var createEntry = function createEntry(type, template) {
    var _mapUpdates = mapUpdates(type, template),
      content = _mapUpdates.content,
      updates = _mapUpdates.updates;
    return {
      type: type,
      template: template,
      content: content,
      updates: updates,
      wire: null
    };
  };

  // a template is instrumented to be able to retrieve where updates are needed.
  // Each unique template becomes a fragment, cloned once per each other
  // operation based on the same template, i.e. data => html`<p>${data}</p>`
  var mapTemplate = function mapTemplate(type, template) {
    var svg = type === 'svg';
    var text = instrument(template, prefix, svg);
    var content = createContent(text, svg);
    // once instrumented and reproduced as fragment, it's crawled
    // to find out where each update is in the fragment tree
    var tw = createTreeWalker(content, 1 | 128);
    var nodes = [];
    var length = template.length - 1;
    var i = 0;
    // updates are searched via unique names, linearly increased across the tree
    // <div isµ0="attr" isµ1="other"><!--isµ2--><style><!--isµ3--</style></div>
    var search = "".concat(prefix).concat(i);
    while (i < length) {
      var node = tw.nextNode();
      // if not all updates are bound but there's nothing else to crawl
      // it means that there is something wrong with the template.
      if (!node) throw "bad template: ".concat(text);
      // if the current node is a comment, and it contains isµX
      // it means the update should take care of any content
      if (node.nodeType === 8) {
        // The only comments to be considered are those
        // which content is exactly the same as the searched one.
        if (node.data === search) {
          nodes.push({
            type: 'node',
            path: createPath(node)
          });
          search = "".concat(prefix).concat(++i);
        }
      } else {
        // if the node is not a comment, loop through all its attributes
        // named isµX and relate attribute updates to this node and the
        // attribute name, retrieved through node.getAttribute("isµX")
        // the isµX attribute will be removed as irrelevant for the layout
        // let svg = -1;
        while (node.hasAttribute(search)) {
          nodes.push({
            type: 'attr',
            path: createPath(node),
            name: node.getAttribute(search)
          });
          node.removeAttribute(search);
          search = "".concat(prefix).concat(++i);
        }
        // if the node was a style, textarea, or others, check its content
        // and if it is <!--isµX--> then update tex-only this node
        if (textOnly.test(node.localName) && node.textContent.trim() === "<!--".concat(search, "-->")) {
          node.textContent = '';
          nodes.push({
            type: 'text',
            path: createPath(node)
          });
          search = "".concat(prefix).concat(++i);
        }
      }
    }
    // once all nodes to update, or their attributes, are known, the content
    // will be cloned in the future to represent the template, and all updates
    // related to such content retrieved right away without needing to re-crawl
    // the exact same template, and its content, more than once.
    return {
      content: content,
      nodes: nodes
    };
  };

  // if a template is unknown, perform the previous mapping, otherwise grab
  // its details such as the fragment with all nodes, and updates info.
  var mapUpdates = function mapUpdates(type, template) {
    var _ref = cache$1.get(template) || cache$1.set(template, mapTemplate(type, template)),
      content = _ref.content,
      nodes = _ref.nodes;
    // clone deeply the fragment
    var fragment = importNode(content, true);
    // and relate an update handler per each node that needs one
    var updates = nodes.map(handlers, fragment);
    // return the fragment and all updates to use within its nodes
    return {
      content: fragment,
      updates: updates
    };
  };

  // as html and svg can be nested calls, but no parent node is known
  // until rendered somewhere, the unroll operation is needed to
  // discover what to do with each interpolation, which will result
  // into an update operation.
  var unroll = function unroll(info, _ref2) {
    var type = _ref2.type,
      template = _ref2.template,
      values = _ref2.values;
    // interpolations can contain holes and arrays, so these need
    // to be recursively discovered
    var length = unrollValues(info, values);
    var entry = info.entry;
    // if the cache entry is either null or different from the template
    // and the type this unroll should resolve, create a new entry
    // assigning a new content fragment and the list of updates.
    if (!entry || entry.template !== template || entry.type !== type) info.entry = entry = createEntry(type, template);
    var _entry = entry,
      content = _entry.content,
      updates = _entry.updates,
      wire = _entry.wire;
    // even if the fragment and its nodes is not live yet,
    // it is already possible to update via interpolations values.
    for (var i = 0; i < length; i++) updates[i](values[i]);
    // if the entry was new, or representing a different template or type,
    // create a new persistent entity to use during diffing.
    // This is simply a DOM node, when the template has a single container,
    // as in `<p></p>`, or a "wire" in `<p></p><p></p>` and similar cases.
    return wire || (entry.wire = persistent(content));
  };

  // the stack retains, per each interpolation value, the cache
  // related to each interpolation value, or null, if the render
  // was conditional and the value is not special (Array or Hole)
  var unrollValues = function unrollValues(_ref3, values) {
    var stack = _ref3.stack;
    var length = values.length;
    for (var i = 0; i < length; i++) {
      var hole = values[i];
      // each Hole gets unrolled and re-assigned as value
      // so that domdiff will deal with a node/wire, not with a hole
      if (hole instanceof Hole) values[i] = unroll(stack[i] || (stack[i] = createCache()), hole);
      // arrays are recursively resolved so that each entry will contain
      // also a DOM node or a wire, hence it can be diffed if/when needed
      else if (isArray(hole)) unrollValues(stack[i] || (stack[i] = createCache()), hole);
      // if the value is nothing special, the stack doesn't need to retain data
      // this is useful also to cleanup previously retained data, if the value
      // was a Hole, or an Array, but not anymore, i.e.:
      // const update = content => html`<div>${content}</div>`;
      // update(listOfItems); update(null); update(html`hole`)
      else stack[i] = null;
    }
    if (length < stack.length) stack.splice(length);
    return length;
  };

  /**
   * Holds all details wrappers needed to render the content further on.
   * @constructor
   * @param {string} type The hole type, either `html` or `svg`.
   * @param {string[]} template The template literals used to the define the content.
   * @param {Array} values Zero, one, or more interpolated values to render.
   */
  var Hole = /*#__PURE__*/_createClass(function Hole(type, template, values) {
    _classCallCheck(this, Hole);
    this.type = type;
    this.template = template;
    this.values = values;
  });

  // both `html` and `svg` template literal tags are polluted
  // with a `for(ref[, id])` and a `node` tag too
  var tag = function tag(type) {
    // both `html` and `svg` tags have their own cache
    var keyed = new WeakMapSet();
    // keyed operations always re-use the same cache and unroll
    // the template and its interpolations right away
    var fixed = function fixed(cache) {
      return function (template) {
        for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
          values[_key - 1] = arguments[_key];
        }
        return unroll(cache, {
          type: type,
          template: template,
          values: values
        });
      };
    };
    return Object.assign(
    // non keyed operations are recognized as instance of Hole
    // during the "unroll", recursively resolved and updated
    function (template) {
      for (var _len2 = arguments.length, values = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
        values[_key2 - 1] = arguments[_key2];
      }
      return new Hole(type, template, values);
    }, {
      // keyed operations need a reference object, usually the parent node
      // which is showing keyed results, and optionally a unique id per each
      // related node, handy with JSON results and mutable list of objects
      // that usually carry a unique identifier
      "for": function _for(ref, id) {
        var memo = keyed.get(ref) || keyed.set(ref, new MapSet());
        return memo.get(id) || memo.set(id, fixed(createCache()));
      },
      // it is possible to create one-off content out of the box via node tag
      // this might return the single created node, or a fragment with all
      // nodes present at the root level and, of course, their child nodes
      node: function node(template) {
        for (var _len3 = arguments.length, values = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
          values[_key3 - 1] = arguments[_key3];
        }
        return unroll(createCache(), new Hole(type, template, values)).valueOf();
      }
    });
  };

  // each rendered node gets its own cache
  var cache = new WeakMapSet();

  // rendering means understanding what `html` or `svg` tags returned
  // and it relates a specific node to its own unique cache.
  // Each time the content to render changes, the node is cleaned up
  // and the new new content is appended, and if such content is a Hole
  // then it's "unrolled" to resolve all its inner nodes.
  var render = function render(where, what) {
    var hole = typeof what === 'function' ? what() : what;
    var info = cache.get(where) || cache.set(where, createCache());
    var wire = hole instanceof Hole ? unroll(info, hole) : hole;
    if (wire !== info.wire) {
      info.wire = wire;
      // valueOf() simply returns the node itself, but in case it was a "wire"
      // it will eventually re-append all nodes to its fragment so that such
      // fragment can be re-appended many times in a meaningful way
      // (wires are basically persistent fragments facades with special behavior)
      where.replaceChildren(wire.valueOf());
    }
    return where;
  };
  var html = tag('html');
  var svg = tag('svg');

  var umap = (function (_) {
    return {
      // About: get: _.get.bind(_)
      // It looks like WebKit/Safari didn't optimize bind at all,
      // so that using bind slows it down by 60%.
      // Firefox and Chrome are just fine in both cases,
      // so let's use the approach that works fast everywhere 👍
      get: function get(key) {
        return _.get(key);
      },
      set: function set(key, value) {
        return _.set(key, value), value;
      }
    };
  });

  function css (t) {
    for (var s = t[0], i = 1, l = arguments.length; i < l; i++) s += arguments[i] + t[i];
    return s;
  }

  var defineProperties$1 = Object.defineProperties,
    keys$1 = Object.keys;
  var accessor = function accessor(all, shallow, hook, value, update) {
    return {
      configurable: true,
      get: function get() {
        return value;
      },
      set: function set(_) {
        if (all || _ !== value || shallow && _typeof(_) === 'object' && _) {
          value = _;
          if (hook) update.call(this, value);else update.call(this);
        }
      }
    };
  };
  var loop = function loop(props, get, all, shallow, useState, update) {
    var desc = {};
    var hook = useState !== noop;
    var args = [all, shallow, hook];
    for (var ke = keys$1(props), y = 0; y < ke.length; y++) {
      var value = get(props, ke[y]);
      var extras = hook ? useState(value) : [value, useState];
      if (update) extras[1] = update;
      desc[ke[y]] = accessor.apply(null, args.concat(extras));
    }
    return desc;
  };
  var noop = function noop() {};

  var domHandler = (function () {
    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
      _ref$all = _ref.all,
      all = _ref$all === void 0 ? false : _ref$all,
      _ref$shallow = _ref.shallow,
      shallow = _ref$shallow === void 0 ? true : _ref$shallow,
      _ref$useState = _ref.useState,
      useState = _ref$useState === void 0 ? noop : _ref$useState,
      _ref$getAttribute = _ref.getAttribute,
      getAttribute = _ref$getAttribute === void 0 ? function (element, key) {
        return element.getAttribute(key);
      } : _ref$getAttribute;
    return function (element, props, update) {
      var value = function value(props, key) {
        var result = props[key],
          type = _typeof(result);
        if (element.hasOwnProperty(key)) {
          result = element[key];
          delete element[key];
        } else if (element.hasAttribute(key)) {
          result = getAttribute(element, key);
          if (type == 'number') result = +result;else if (type == 'boolean') result = !/^(?:false|0|)$/.test(result);
        }
        return result;
      };
      var desc = loop(props, value, all, shallow, useState, update);
      return defineProperties$1(element, desc);
    };
  });

  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
  var reactive = domHandler({
    dom: true
  });
  var CE = customElements;
  var defineCustomElement = CE.define;
  var parse = JSON.parse,
    stringify = JSON.stringify;
  var create = Object.create,
    defineProperties = Object.defineProperties,
    getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor,
    keys = Object.keys;
  var element = 'element';
  var ownProps = new WeakMap();
  var constructors = umap(new Map([[element, {
    c: HTMLElement,
    e: element
  }]]));
  var el = function el(name) {
    return document.createElement(name);
  };
  var info = function info(e) {
    return constructors.get(e) || constructors.set(e, {
      c: el(e).constructor,
      e: e
    });
  };
  var define = function define(tagName, definition) {
    var attachShadow = definition.attachShadow,
      attributeChanged = definition.attributeChanged,
      bound = definition.bound,
      connected = definition.connected,
      disconnected = definition.disconnected,
      formAssociated = definition.formAssociated,
      handleEvent = definition.handleEvent,
      init = definition.init,
      observedAttributes = definition.observedAttributes,
      props = definition.props,
      render = definition.render,
      style = definition.style;
    var initialized = new WeakMap();
    var statics = {};
    var proto = {};
    var listeners = [];
    var retype = create(null);
    var bootstrap = function bootstrap(element, key, value) {
      if (!initialized.has(element)) {
        initialized.set(element, 0);
        defineProperties(element, {
          html: {
            configurable: true,
            value: content.bind(attachShadow ? element.attachShadow(attachShadow) : element)
          }
        });
        for (var i = 0; i < length; i++) {
          var _listeners$i = listeners[i],
            type = _listeners$i.type,
            options = _listeners$i.options;
          element.addEventListener(type, element, options);
        }
        if (bound) bound.forEach(bind, element);
        if (props) {
          var reProps = {};
          for (var k = keys(props), _i = 0; _i < k.length; _i++) {
            var _key = k[_i];
            var _value = props[_key];
            reProps[_key] = _typeof(_value) === 'object' ? parse(stringify(_value)) : _value;
          }
          ownProps.set(element, reProps);
          reactive(element, reProps, render);
        }
        if (init || render) (init || render).call(element);
        if (key) element[key] = value;
      }
    };
    for (var k = keys(definition), i = 0, _length = k.length; i < _length; i++) {
      var key = k[i];
      if (/^on./.test(key) && !/Options$/.test(key)) {
        var options = definition[key + 'Options'] || false;
        var lower = key.toLowerCase();
        var type = lower.slice(2);
        listeners.push({
          type: type,
          options: options
        });
        retype[type] = key;
        if (lower !== key) {
          type = lower.slice(2, 3) + key.slice(3);
          retype[type] = key;
          listeners.push({
            type: type,
            options: options
          });
        }
      }
      switch (key) {
        case 'attachShadow':
        case 'constructor':
        case 'observedAttributes':
        case 'style':
          break;
        default:
          proto[key] = getOwnPropertyDescriptor(definition, key);
      }
    }
    var length = listeners.length;
    if (length && !handleEvent) proto.handleEvent = {
      value: function value(event) {
        this[retype[event.type]](event);
      }
    };

    // [props]
    if (props !== null) {
      if (props) {
        var _loop = function _loop() {
          var key = _k[_i2];
          proto[key] = {
            get: function get() {
              bootstrap(this);
              return ownProps.get(this)[key];
            },
            set: function set(value) {
              bootstrap(this, key, value);
            }
          };
        };
        for (var _k = keys(props), _i2 = 0; _i2 < _k.length; _i2++) {
          _loop();
        }
      } else {
        proto.props = {
          get: function get() {
            var props = {};
            for (var attributes = this.attributes, _length2 = attributes.length, _i3 = 0; _i3 < _length2; _i3++) {
              var _attributes$_i = attributes[_i3],
                name = _attributes$_i.name,
                value = _attributes$_i.value;
              props[name] = value;
            }
            return props;
          }
        };
      }
    }
    // [/props]

    if (observedAttributes) statics.observedAttributes = {
      value: observedAttributes
    };
    proto.attributeChangedCallback = {
      value: function value() {
        bootstrap(this);
        if (attributeChanged) attributeChanged.apply(this, arguments);
      }
    };
    if (formAssociated) {
      statics.formAssociated = {
        value: formAssociated
      };
    }
    proto.connectedCallback = {
      value: function value() {
        bootstrap(this);
        if (connected) connected.call(this);
      }
    };
    if (disconnected) proto.disconnectedCallback = {
      value: disconnected
    };
    var _info = info(definition["extends"] || element),
      c = _info.c,
      e = _info.e;
    var MicroElement = /*#__PURE__*/function (_c) {
      _inherits(MicroElement, _c);
      var _super = _createSuper(MicroElement);
      function MicroElement() {
        _classCallCheck(this, MicroElement);
        return _super.apply(this, arguments);
      }
      return _createClass(MicroElement);
    }(c);
    defineProperties(MicroElement, statics);
    defineProperties(MicroElement.prototype, proto);
    var args = [tagName, MicroElement];
    if (e !== element) args.push({
      "extends": e
    });
    defineCustomElement.apply(CE, args);
    constructors.set(tagName, {
      c: MicroElement,
      e: e
    });
    if (style) document.head.appendChild(el('style')).textContent = style(e === element ? tagName : e + '[is="' + tagName + '"]');
    return MicroElement;
  };

  /* istanbul ignore else */
  if (!CE.get('uce-lib'))
    // theoretically this could be just class { ... }
    // however, if there is for whatever reason a <uce-lib>
    // element on the page, it will break once the registry
    // will try to upgrade such element so ... HTMLElement it is.
    CE.define('uce-lib', /*#__PURE__*/function (_info$c) {
      _inherits(_class, _info$c);
      var _super2 = _createSuper(_class);
      function _class() {
        _classCallCheck(this, _class);
        return _super2.apply(this, arguments);
      }
      _createClass(_class, null, [{
        key: "define",
        get: function get() {
          return define;
        }
      }, {
        key: "render",
        get: function get() {
          return render;
        }
      }, {
        key: "html",
        get: function get() {
          return html;
        }
      }, {
        key: "svg",
        get: function get() {
          return svg;
        }
      }, {
        key: "css",
        get: function get() {
          return css;
        }
      }]);
      return _class;
    }(info(element).c));
  function bind(method) {
    this[method] = this[method].bind(this);
  }
  function content() {
    return render(this, html.apply(null, arguments));
  }

  exports.css = css;
  exports.define = define;
  exports.html = html;
  exports.render = render;
  exports.svg = svg;

  return exports;

})({});