Repository: WebReflection/hyperHTML-Element
Branch: master
Commit: 418299139c31
Files: 28
Total size: 259.4 KB

Directory structure:
gitextract_91jr2tdp/

├── .github/
│   └── workflows/
│       └── node.js.yml
├── .gitignore
├── .npmignore
├── .npmrc
├── LICENSE.txt
├── README.md
├── cjs/
│   ├── index.d.ts
│   ├── index.js
│   └── package.json
├── es5.config.js
├── es5.js
├── esm/
│   ├── index.d.ts
│   └── index.js
├── esm.config.js
├── index.d.ts
├── index.js
├── min.js
├── package.json
├── test/
│   ├── boolean.html
│   ├── builtin.html
│   ├── button.html
│   ├── ce.js
│   ├── checked.html
│   ├── index.html
│   ├── test.es5.js
│   └── test.js
├── test.js
└── typescript.md

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/workflows/node.js.yml
================================================
# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: build

on: [push, pull_request]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test
    - run: npm run coverage --if-present
    - name: Coveralls
      uses: coverallsapp/github-action@master
      with:
        github-token: ${{ secrets.GITHUB_TOKEN }}


================================================
FILE: .gitignore
================================================
.DS_Store
.nyc_output/
node_modules/
coverage/



================================================
FILE: .npmignore
================================================
.nyc_output/
coverage/
node_modules/
test/*
.babelrc
.gitignore
.travis.yml
es5.config.js
esm.config.js
package-lock.json
test.js
typescript.md


================================================
FILE: .npmrc
================================================
package-lock=true
package-lock=true


================================================
FILE: LICENSE.txt
================================================
ISC License

Copyright (c) 2017-2018, 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.


================================================
FILE: README.md
================================================
# hyperHTML-Element

[![License: ISC](https://img.shields.io/badge/License-ISC-yellow.svg)](https://opensource.org/licenses/ISC) [![Build Status](https://travis-ci.org/WebReflection/hyperHTML-Element.svg?branch=master)](https://travis-ci.org/WebReflection/hyperHTML-Element) [![Greenkeeper badge](https://badges.greenkeeper.io/WebReflection/hyperHTML-Element.svg)](https://greenkeeper.io/) ![WebReflection status](https://offline.report/status/webreflection.svg)

An extensible class to define hyperHTML based Custom Elements.

`npm install hyperhtml-element`

#### hyperHTML included

This class attaches all `hyperHTML` methods to itself,
with the only exception of the `define` method,
used in here to define Custom Elements instead.

To have same [define functionality](https://viperhtml.js.org/hyperhtml/documentation/#api-3),
please use `HyperHTMLElement.intent(...)` which provides exact same API.


### Documentation

You can find more info about this helper in [hyperHTML documentation](https://viperhtml.js.org/hyperhtml/documentation/#components-2) page.



### The Class

```js
const HyperHTMLElement = require('hyperhtml-element');

class MyElement extends HyperHTMLElement {

  // observed attributes are automatically defined as accessors
  static get observedAttributes() { return ['key']; }

  // boolean attributes are automatically defined as accessors
  // and will set or remove the passed value
  static get booleanAttributes() { return ['active']; }

  // invoked once the component has been fully upgraded
  // suitable to perform any sort of setup
  // granted to be invoked right before either
  // connectedCallback or attributeChangedCallback
  created() {
    // triggers automatically attributeChangedCallback
    this.key = 'value';
  }

  attributeChangedCallback(name, prev, curr) {
    // when invoked, attributes will be already reflected
    // through their accessor
    this.key === curr; // true, and curr === "value"
    this.getAttribute('key') === this.key; // always true
    this.render();
  }

  render() {
    // lazily defined, this.html property points to an hyperHTML bound context
    // which could be the element shadowRoot or the element itself.
    // All events can be handled directly by the context, thanks to handleEvent
    // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
    return this.html`
    Hello <strong onclick=${this}>HyperHTMLElement</strong>
    ( ${this.state.clicks} )`;
  }

  // using the inherited handleEvent,
  // events can be easily defined as methods with `on` prefix.
  onclick(e) {
    // `this` refers to the current custom element
    console.log(this, 'click', e.target);
    // state handling, updates the view
    this.setState({clicks: this.state.clicks + 1});
  }

  // alternatively, you can specify a `data-call`
  // attribute with the name of the method to invoke
  // this.html`<i data-call=onAnyEvent onclick=${this}>try</i>`;
  onAnyEvent(e) {
    // `this` still refers to the current custom element
    console.log(this, e.type, e.currentTarget, e.target);
  }

  // you can also use Preact-like events handling
  // this is less efficient, but migration friendly.
  // The method is bound once per instance so that
  // this.handleClick === this.handleClick is always true
  // this.html`<i onclick=${this.handleClick}>try</i>`;
  handleClick(e) {
    // `this` still refers to the current custom element
    console.log(this, e.type, e.currentTarget, e.target);
  }

  // define a default state to use whenever this.state is accessed
  // it can create states from observed properties too
  get defaultState() {
    return {clicks: 0, key: this.key};
  }

  // this method is Preact friendly, once invoked
  // as this.setState({new: 'value'});
  // it will shallow copy properties over
  // and it will invoke this.render() right after
  setState(objOrFn)

  // all other native Custom Elements method works as usual
  // connectedCallback() { ... }
  // adoptedCallback() { ... }
}

// classes must be defined through their public static method
// this is the moment the class will be fully setup once
// and registered to the customElements Registry.
MyElement.define('my-element');
```

#### New in v1.8

You can now define custom elements builtins too:
```js
class MyLink extends HyperHTMLElement {
  created() { this.render(); }
  render() {
    return this.html`hello there!`;
  }
}
MyLink.define('my-link', {extends: 'a'});
```


### Compatibility

`HyperHTMLElement` is compatible with every mobile browser and IE11 or greater.

There is a [native live test](https://webreflection.github.io/hyperHTML-Element/test/) page also [transpiled for ES5](https://webreflection.github.io/hyperHTML-Element/test/?es5) browsers.



================================================
FILE: cjs/index.d.ts
================================================
import HyperHTMLElement from "..";
export * from '..';
export default HyperHTMLElement;

================================================
FILE: cjs/index.js
================================================
'use strict';
/*! (C) 2017-2018 Andrea Giammarchi - ISC Style License */

const {Component, bind, define, hyper, wire} = require('hyperhtml');

// utils to deal with custom elements builtin extends
const ATTRIBUTE_CHANGED_CALLBACK = 'attributeChangedCallback';
const O = Object;
const classes = [];
const defineProperty = O.defineProperty;
const getOwnPropertyDescriptor = O.getOwnPropertyDescriptor;
const getOwnPropertyNames = O.getOwnPropertyNames;
/* istanbul ignore next */
const getOwnPropertySymbols = O.getOwnPropertySymbols || (() => []);
/* istanbul ignore next */
const getPrototypeOf = O.getPrototypeOf || (o => o.__proto__);
/* istanbul ignore next */
const ownKeys = typeof Reflect === 'object' && Reflect.ownKeys ||
                (o => getOwnPropertyNames(o).concat(getOwnPropertySymbols(o)));
/* istanbul ignore next */
const setPrototypeOf = O.setPrototypeOf ||
                      ((o, p) => (o.__proto__ = p, o));
/* istanbul ignore stop */
const camel = name => name.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase());
const {attachShadow} = HTMLElement.prototype;
const sr = new WeakMap;

class HyperHTMLElement extends HTMLElement {

  // define a custom-element in the CustomElementsRegistry
  // class MyEl extends HyperHTMLElement {}
  // MyEl.define('my-el');
  static define(name, options) {
    const Class = this;
    const proto = Class.prototype;

    const onChanged = proto[ATTRIBUTE_CHANGED_CALLBACK];
    const hasChange = !!onChanged;

    // Class.booleanAttributes
    // -----------------------------------------------
    // attributes defined as boolean will have
    // an either available or not available attribute
    // regardless of the value.
    // All falsy values, or "false", mean attribute removed
    // while truthy values will be set as is.
    // Boolean attributes are also automatically observed.
    const booleanAttributes = Class.booleanAttributes || [];
    booleanAttributes.forEach(attribute => {
      const name = camel(attribute);
      if (!(name in proto)) defineProperty(
        proto,
        name,
        {
          configurable: true,
          get() {
            return this.hasAttribute(attribute);
          },
          set(value) {
            if (!value || value === 'false')
              this.removeAttribute(attribute);
            else
              this.setAttribute(attribute, '');
          }
        }
      );
    });

    // Class.observedAttributes
    // -------------------------------------------------------
    // HyperHTMLElement will directly reflect get/setAttribute
    // operation once these attributes are used, example:
    // el.observed = 123;
    // will automatically do
    // el.setAttribute('observed', 123);
    // triggering also the attributeChangedCallback
    const observedAttributes = (Class.observedAttributes || []).filter(
      attribute => booleanAttributes.indexOf(attribute) < 0
    );
    observedAttributes.forEach(attribute => {
      // it is possible to redefine the behavior at any time
      // simply overwriting get prop() and set prop(value)
      const name = camel(attribute);
      if (!(name in proto)) defineProperty(
        proto,
        name,
        {
          configurable: true,
          get() {
            return this.getAttribute(attribute);
          },
          set(value) {
            if (value == null)
              this.removeAttribute(attribute);
            else
              this.setAttribute(attribute, value);
          }
        }
      );
    });

    // if these are defined, overwrite the observedAttributes getter
    // to include also booleanAttributes
    const attributes = booleanAttributes.concat(observedAttributes);
    if (attributes.length)
      defineProperty(Class, 'observedAttributes', {
        get() { return attributes; }
      });

    // created() {}
    // ---------------------------------
    // an initializer method that grants
    // the node is fully known to the browser.
    // It is ensured to run either after DOMContentLoaded,
    // or once there is a next sibling (stream-friendly) so that
    // you have full access to element attributes and/or childNodes.
    const created = proto.created || function () {
      this.render();
    };

    // used to ensure create() is called once and once only
    defineProperty(
      proto,
      '_init$',
      {
        configurable: true,
        writable: true,
        value: true
      }
    );

    defineProperty(
      proto,
      ATTRIBUTE_CHANGED_CALLBACK,
      {
        configurable: true,
        value: function aCC(name, prev, curr) {
          if (this._init$) {
            checkReady.call(this, created, attributes, booleanAttributes);
            if (this._init$)
              return this._init$$.push(aCC.bind(this, name, prev, curr));
          }
          // ensure setting same value twice
          // won't trigger twice attributeChangedCallback
          if (hasChange && prev !== curr) {
            onChanged.apply(this, arguments);
          }
        }
      }
    );

    const onConnected = proto.connectedCallback;
    const hasConnect = !!onConnected;
    defineProperty(
      proto,
      'connectedCallback',
      {
        configurable: true,
        value: function cC() {
          if (this._init$) {
            checkReady.call(this, created, attributes, booleanAttributes);
            if (this._init$)
              return this._init$$.push(cC.bind(this));
          }
          if (hasConnect) {
            onConnected.apply(this, arguments);
          }
        }
      }
    );

    // define lazily all handlers
    // class { handleClick() { ... }
    // render() { `<a onclick=${this.handleClick}>` } }
    getOwnPropertyNames(proto).forEach(key => {
      if (/^handle[A-Z]/.test(key)) {
        const _key$ = '_' + key + '$';
        const method = proto[key];
        defineProperty(proto, key, {
          configurable: true,
          get() {
            return  this[_key$] ||
                    (this[_key$] = method.bind(this));
          }
        });
      }
    });

    // whenever you want to directly use the component itself
    // as EventListener, you can pass it directly.
    // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
    //  class Reactive extends HyperHTMLElement {
    //    oninput(e) { console.log(this, 'changed', e.target.value); }
    //    render() { this.html`<input oninput="${this}">`; }
    //  }
    if (!('handleEvent' in proto)) {
      defineProperty(
        proto,
        'handleEvent',
        {
          configurable: true,
          value(event) {
            this[
              (event.currentTarget.dataset || {}).call ||
              ('on' + event.type)
            ](event);
          }
        }
      );
    }

    if (options && options.extends) {
      const Native = document.createElement(options.extends).constructor;
      const Intermediate = class extends Native {};
      const ckeys = ['length', 'name', 'arguments', 'caller', 'prototype'];
      const pkeys = [];
      let Super = null;
      let BaseClass = Class;
      while (Super = getPrototypeOf(BaseClass)) {
        [
          {target: Intermediate, base: Super, keys: ckeys},
          {target: Intermediate.prototype, base: Super.prototype, keys: pkeys}
        ]
        .forEach(({target, base, keys}) => {
          ownKeys(base)
            .filter(key => keys.indexOf(key) < 0)
            .forEach((key) => {
              keys.push(key);
              defineProperty(
                target,
                key,
                getOwnPropertyDescriptor(base, key)
              );
            });
        });

        BaseClass = Super;
        if (Super === HyperHTMLElement)
          break;
      }
      setPrototypeOf(Class, Intermediate);
      setPrototypeOf(proto, Intermediate.prototype);
      customElements.define(name, Class, options);
    } else {
      customElements.define(name, Class);
    }
    classes.push(Class);
    return Class;
  }

  // weakly relate the shadowRoot for refs usage
  attachShadow() {
    const shadowRoot = attachShadow.apply(this, arguments);
    sr.set(this, shadowRoot);
    return shadowRoot;
  }

  // returns elements by ref
  get refs() {
    const value = {};
    if ('_html$' in this) {
      const all = (sr.get(this) || this).querySelectorAll('[ref]');
      for (let {length} = all, i = 0; i < length; i++) {
        const node = all[i];
        value[node.getAttribute('ref')] = node;
      }
      Object.defineProperty(this, 'refs', {value});
      return value;
    }
    return value;
  }

  // lazily bind once hyperHTML logic
  // to either the shadowRoot, if present and open,
  // the _shadowRoot property, if set due closed shadow root,
  // or the custom-element itself if no Shadow DOM is used.
  get html() {
    return this._html$ || (this.html = bind(
      // in a way or another, bind to the right node
      // backward compatible, first two could probably go already
      this.shadowRoot || this._shadowRoot || sr.get(this) || this
    ));
  }

  // it can be set too if necessary, it won't invoke render()
  set html(value) {
    defineProperty(this, '_html$', {configurable: true, value: value});
  }

  // overwrite this method with your own render
  render() {}

  // ---------------------//
  // Basic State Handling //
  // ---------------------//

  // define the default state object
  // you could use observed properties too
  get defaultState() { return {}; }

  // the state with a default
  get state() {
    return this._state$ || (this.state = this.defaultState);
  }

  // it can be set too if necessary, it won't invoke render()
  set state(value) {
    defineProperty(this, '_state$', {configurable: true, value: value});
  }

  // currently a state is a shallow copy, like in Preact or other libraries.
  // after the state is updated, the render() method will be invoked.
  // ⚠️ do not ever call this.setState() inside this.render()
  setState(state, render) {
    const target = this.state;
    const source = typeof state === 'function' ? state.call(this, target) : state;
    for (const key in source) target[key] = source[key];
    if (render !== false) this.render();
    return this;
  }

};

// exposing hyperHTML utilities
HyperHTMLElement.Component = Component;
HyperHTMLElement.bind = bind;
HyperHTMLElement.intent = define;
HyperHTMLElement.wire = wire;
HyperHTMLElement.hyper = hyper;

try {
  if (Symbol.hasInstance) classes.push(
    defineProperty(HyperHTMLElement, Symbol.hasInstance, {
      enumerable: false,
      configurable: true,
      value(instance) {
        return classes.some(isPrototypeOf, getPrototypeOf(instance));
      }
    }));
} catch(meh) {}

Object.defineProperty(exports, '__esModule', {value: true}).default = HyperHTMLElement;

// ------------------------------//
// DOMContentLoaded VS created() //
// ------------------------------//
const dom = {
  type: 'DOMContentLoaded',
  handleEvent() {
    if (dom.ready()) {
      document.removeEventListener(dom.type, dom, false);
      dom.list.splice(0).forEach(invoke);
    }
    else
      setTimeout(dom.handleEvent);
  },
  ready() {
    return document.readyState === 'complete';
  },
  list: []
};

if (!dom.ready()) {
  document.addEventListener(dom.type, dom, false);
}

function checkReady(created, attributes, booleanAttributes) {
  if (dom.ready() || isReady.call(this, created, attributes, booleanAttributes)) {
    if (this._init$) {
      const list = this._init$$ || [];
      delete this._init$$;
      const self = defineProperty(this, '_init$', {value: false});
      booleanAttributes.forEach(name => {
        if (self.getAttribute(name) === 'false')
          self.removeAttribute(name);
      });
      attributes.forEach(name => {
        if (self.hasOwnProperty(name)) {
          const curr = self[name];
          delete self[name];
          list.unshift(() => { self[name] = curr; });
        }
      });
      created.call(self);
      list.forEach(invoke);
    }
  } else {
    if (!this.hasOwnProperty('_init$$'))
      defineProperty(this, '_init$$', {configurable: true, value: []});
    dom.list.push(checkReady.bind(this, created, attributes, booleanAttributes));
  }
}

function invoke(fn) {
  fn();
}

function isPrototypeOf(Class) {
  return this === Class.prototype;
}

function isReady(created, attributes, booleanAttributes) {
  let el = this;
  do { if (el.nextSibling) return true; }
  while (el = el.parentNode);
  setTimeout(checkReady.bind(this, created, attributes, booleanAttributes));
  return false;
}


================================================
FILE: cjs/package.json
================================================
{"type":"commonjs"}

================================================
FILE: es5.config.js
================================================
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';

export default {
  input: 'esm/index.js',
  plugins: [
    resolve({module: true}),
    babel({presets: ["@babel/preset-env"]})
  ],
  context: 'null',
  moduleContext: 'null',
  output: {
    exports: 'named',
    file: 'es5.js',
    format: 'iife',
    name: 'HyperHTMLElement'
  }
};


================================================
FILE: es5.js
================================================
var HyperHTMLElement = (function (exports) {
  'use strict';

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

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

    return _typeof(obj);
  }

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

  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, descriptor.key, descriptor);
    }
  }

  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
  }

  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
      }
    });
    if (superClass) _setPrototypeOf(subClass, superClass);
  }

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

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

    return _setPrototypeOf(o, p);
  }

  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;
    }
  }

  function _construct(Parent, args, Class) {
    if (_isNativeReflectConstruct()) {
      _construct = Reflect.construct;
    } 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 _isNativeFunction(fn) {
    return Function.toString.call(fn).indexOf("[native code]") !== -1;
  }

  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 _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 _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);
    };
  }

  /*! (c) Andrea Giammarchi - ISC */
  var self$3 = {};

  try {
    self$3.WeakMap = WeakMap;
  } catch (WeakMap) {
    // this could be better but 90% of the time
    // it's everything developers need as fallback
    self$3.WeakMap = function (id, Object) {

      var dP = Object.defineProperty;
      var hOP = Object.hasOwnProperty;
      var proto = WeakMap.prototype;

      proto["delete"] = function (key) {
        return this.has(key) && delete key[this._];
      };

      proto.get = function (key) {
        return this.has(key) ? key[this._] : void 0;
      };

      proto.has = function (key) {
        return hOP.call(key, this._);
      };

      proto.set = function (key, value) {
        dP(key, this._, {
          configurable: true,
          value: value
        });
        return this;
      };

      return WeakMap;

      function WeakMap(iterable) {
        dP(this, '_', {
          value: '_@ungap/weakmap' + id++
        });
        if (iterable) iterable.forEach(add, this);
      }

      function add(pair) {
        this.set(pair[0], pair[1]);
      }
    }(Math.random(), Object);
  }

  var WeakMap$1 = self$3.WeakMap;

  /*! (c) Andrea Giammarchi - ISC */
  var self$2 = {};

  try {
    self$2.WeakSet = WeakSet;
  } catch (WeakSet) {
    (function (id, dP) {
      var proto = WeakSet.prototype;

      proto.add = function (object) {
        if (!this.has(object)) dP(object, this._, {
          value: true,
          configurable: true
        });
        return this;
      };

      proto.has = function (object) {
        return this.hasOwnProperty.call(object, this._);
      };

      proto["delete"] = function (object) {
        return this.has(object) && delete object[this._];
      };

      self$2.WeakSet = WeakSet;

      function WeakSet() {

        dP(this, '_', {
          value: '_@ungap/weakmap' + id++
        });
      }
    })(Math.random(), Object.defineProperty);
  }

  var WeakSet$1 = self$2.WeakSet;

  var _ref = [],
      indexOf$1 = _ref.indexOf;

  var append = function append(get, parent, children, start, end, before) {
    var isSelect = ('selectedIndex' in parent);
    var noSelection = isSelect;

    while (start < end) {
      var child = get(children[start], 1);
      parent.insertBefore(child, before);

      if (isSelect && noSelection && child.selected) {
        noSelection = !noSelection;
        var selectedIndex = parent.selectedIndex;
        parent.selectedIndex = selectedIndex < 0 ? start : indexOf$1.call(parent.querySelectorAll('option'), child);
      }

      start++;
    }
  };
  var eqeq = function eqeq(a, b) {
    return a == b;
  };
  var identity = function identity(O) {
    return O;
  };
  var indexOf = function indexOf(moreNodes, moreStart, moreEnd, lessNodes, lessStart, lessEnd, compare) {
    var length = lessEnd - lessStart;
    /* istanbul ignore if */

    if (length < 1) return -1;

    while (moreEnd - moreStart >= length) {
      var m = moreStart;
      var l = lessStart;

      while (m < moreEnd && l < lessEnd && compare(moreNodes[m], lessNodes[l])) {
        m++;
        l++;
      }

      if (l === lessEnd) return moreStart;
      moreStart = m + 1;
    }

    return -1;
  };
  var isReversed = function isReversed(futureNodes, futureEnd, currentNodes, currentStart, currentEnd, compare) {
    while (currentStart < currentEnd && compare(currentNodes[currentStart], futureNodes[futureEnd - 1])) {
      currentStart++;
      futureEnd--;
    }
    return futureEnd === 0;
  };
  var next = function next(get, list, i, length, before) {
    return i < length ? get(list[i], 0) : 0 < i ? get(list[i - 1], -0).nextSibling : before;
  };
  var remove = function remove(get, children, start, end) {
    while (start < end) {
      drop(get(children[start++], -1));
    }
  }; // - - - - - - - - - - - - - - - - - - -
  // diff related constants and utilities
  // - - - - - - - - - - - - - - - - - - -

  var DELETION = -1;
  var INSERTION = 1;
  var SKIP = 0;
  var SKIP_OND = 50;

  var HS = function HS(futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges) {
    var k = 0;
    /* istanbul ignore next */

    var minLen = futureChanges < currentChanges ? futureChanges : currentChanges;
    var link = Array(minLen++);
    var tresh = Array(minLen);
    tresh[0] = -1;

    for (var i = 1; i < minLen; i++) {
      tresh[i] = currentEnd;
    }

    var nodes = currentNodes.slice(currentStart, currentEnd);

    for (var _i = futureStart; _i < futureEnd; _i++) {
      var index = nodes.indexOf(futureNodes[_i]);

      if (-1 < index) {
        var 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;
    var diff = Array(minLen);
    var ptr = link[k];
    --futureEnd;

    while (ptr) {
      var _ptr = ptr,
          newi = _ptr.newi,
          oldi = _ptr.oldi;

      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


  var OND = function OND(futureNodes, futureStart, rows, currentNodes, currentStart, cols, compare) {
    var length = rows + cols;
    var v = [];
    var 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;
      }
    }

    var diff = Array(d / 2 + length / 2);
    var 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;
  };

  var applyDiff = function applyDiff(diff, get, parentNode, futureNodes, futureStart, currentNodes, currentStart, currentLength, before) {
    var live = [];
    var length = diff.length;
    var currentIndex = currentStart;
    var 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;
      }
    }
  };

  var findK = function findK(ktr, length, j) {
    var lo = 1;
    var hi = length;

    while (lo < hi) {
      var mid = (lo + hi) / 2 >>> 0;
      if (j < ktr[mid]) hi = mid;else lo = mid + 1;
    }

    return lo;
  };

  var smartDiff = function 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);
  };

  var drop = function drop(node) {
    return (node.remove || dropChild).call(node);
  };

  function dropChild() {
    var parentNode = this.parentNode;
    /* istanbul ignore else */

    if (parentNode) parentNode.removeChild(this);
  }

  /*! (c) 2018 Andrea Giammarchi (ISC) */

  var domdiff = function 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 = {};
    var compare = options.compare || eqeq;
    var get = options.node || identity;
    var before = options.before == null ? null : get(options.before, 0);
    var currentLength = currentNodes.length;
    var currentEnd = currentLength;
    var currentStart = 0;
    var futureEnd = futureNodes.length;
    var 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--;
    }

    var currentSame = currentStart === currentEnd;
    var 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;
    }

    var currentChanges = currentEnd - currentStart;
    var futureChanges = futureEnd - futureStart;
    var 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;
      }
    }
    /* istanbul ignore else */
    else if (futureChanges < currentChanges) {
      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;
  };

  /*! (c) Andrea Giammarchi - ISC */
  var self$1 = {};
  self$1.CustomEvent = typeof CustomEvent === 'function' ? CustomEvent : function (__p__) {
    CustomEvent[__p__] = new CustomEvent('').constructor[__p__];
    return CustomEvent;

    function CustomEvent(type, init) {
      if (!init) init = {};
      var e = document.createEvent('CustomEvent');
      e.initCustomEvent(type, !!init.bubbles, !!init.cancelable, init.detail);
      return e;
    }
  }('prototype');
  var CustomEvent$1 = self$1.CustomEvent;

  /*! (c) Andrea Giammarchi - ISC */
  var self = {};

  try {
    self.Map = Map;
  } catch (Map) {
    self.Map = function Map() {
      var i = 0;
      var k = [];
      var v = [];
      return {
        "delete": function _delete(key) {
          var had = contains(key);

          if (had) {
            k.splice(i, 1);
            v.splice(i, 1);
          }

          return had;
        },
        forEach: function forEach(callback, context) {
          k.forEach(function (key, i) {
            callback.call(context, v[i], key, this);
          }, this);
        },
        get: function get(key) {
          return contains(key) ? v[i] : void 0;
        },
        has: function has(key) {
          return contains(key);
        },
        set: function set(key, value) {
          v[contains(key) ? i : k.push(key) - 1] = value;
          return this;
        }
      };

      function contains(v) {
        i = k.indexOf(v);
        return -1 < i;
      }
    };
  }

  var Map$1 = self.Map;

  // able to create Custom Elements like components
  // including the ability to listen to connect/disconnect
  // events via onconnect/ondisconnect attributes
  // Components can be created imperatively or declaratively.
  // The main difference is that declared components
  // will not automatically render on setState(...)
  // to simplify state handling on render.

  function Component() {
    return this; // this is needed in Edge !!!
  } // Component is lazily setup because it needs
  // wire mechanism as lazy content

  function setup(content) {
    // there are various weakly referenced variables in here
    // and mostly are to use Component.for(...) static method.
    var children = new WeakMap$1();
    var create = Object.create;

    var createEntry = function createEntry(wm, id, component) {
      wm.set(id, component);
      return component;
    };

    var get = function get(Class, info, context, id) {
      var relation = info.get(Class) || relate(Class, info);

      switch (_typeof(id)) {
        case 'object':
        case 'function':
          var wm = relation.w || (relation.w = new WeakMap$1());
          return wm.get(id) || createEntry(wm, id, new Class(context));

        default:
          var sm = relation.p || (relation.p = create(null));
          return sm[id] || (sm[id] = new Class(context));
      }
    };

    var relate = function relate(Class, info) {
      var relation = {
        w: null,
        p: null
      };
      info.set(Class, relation);
      return relation;
    };

    var set = function set(context) {
      var info = new Map$1();
      children.set(context, info);
      return info;
    }; // The Component Class


    Object.defineProperties(Component, {
      // Component.for(context[, id]) is a convenient way
      // to automatically relate data/context to children components
      // If not created yet, the new Component(context) is weakly stored
      // and after that same instance would always be returned.
      "for": {
        configurable: true,
        value: function value(context, id) {
          return get(this, children.get(context) || set(context), context, id == null ? 'default' : id);
        }
      }
    });
    Object.defineProperties(Component.prototype, {
      // all events are handled with the component as context
      handleEvent: {
        value: function value(e) {
          var ct = e.currentTarget;
          this['getAttribute' in ct && ct.getAttribute('data-call') || 'on' + e.type](e);
        }
      },
      // components will lazily define html or svg properties
      // as soon as these are invoked within the .render() method
      // Such render() method is not provided by the base class
      // but it must be available through the Component extend.
      // Declared components could implement a
      // render(props) method too and use props as needed.
      html: lazyGetter('html', content),
      svg: lazyGetter('svg', content),
      // the state is a very basic/simple mechanism inspired by Preact
      state: lazyGetter('state', function () {
        return this.defaultState;
      }),
      // it is possible to define a default state that'd be always an object otherwise
      defaultState: {
        get: function get() {
          return {};
        }
      },
      // dispatch a bubbling, cancelable, custom event
      // through the first known/available node
      dispatch: {
        value: function value(type, detail) {
          var _wire$ = this._wire$;

          if (_wire$) {
            var event = new CustomEvent$1(type, {
              bubbles: true,
              cancelable: true,
              detail: detail
            });
            event.component = this;
            return (_wire$.dispatchEvent ? _wire$ : _wire$.firstChild).dispatchEvent(event);
          }

          return false;
        }
      },
      // setting some property state through a new object
      // or a callback, triggers also automatically a render
      // unless explicitly specified to not do so (render === false)
      setState: {
        value: function value(state, render) {
          var target = this.state;
          var source = typeof state === 'function' ? state.call(this, target) : state;

          for (var key in source) {
            target[key] = source[key];
          }

          if (render !== false) this.render();
          return this;
        }
      }
    });
  } // instead of a secret key I could've used a WeakMap
  // However, attaching a property directly will result
  // into better performance with thousands of components
  // hanging around, and less memory pressure caused by the WeakMap

  var lazyGetter = function lazyGetter(type, fn) {
    var secret = '_' + type + '$';
    return {
      get: function get() {
        return this[secret] || setValue(this, secret, fn.call(this, type));
      },
      set: function set(value) {
        setValue(this, secret, value);
      }
    };
  }; // shortcut to set value on get or set(value)


  var setValue = function setValue(self, secret, value) {
    return Object.defineProperty(self, secret, {
      configurable: true,
      value: typeof value === 'function' ? function () {
        return self._wire$ = value.apply(this, arguments);
      } : value
    })[secret];
  };

  Object.defineProperties(Component.prototype, {
    // used to distinguish better than instanceof
    ELEMENT_NODE: {
      value: 1
    },
    nodeType: {
      value: -1
    }
  });

  var attributes = {};
  var intents = {};
  var keys = [];
  var hasOwnProperty = intents.hasOwnProperty;
  var length = 0;
  var Intent = {
    // used to invoke right away hyper:attributes
    attributes: attributes,
    // hyperHTML.define('intent', (object, update) => {...})
    // can be used to define a third parts update mechanism
    // when every other known mechanism failed.
    // hyper.define('user', info => info.name);
    // hyper(node)`<p>${{user}}</p>`;
    define: function define(intent, callback) {
      if (intent.indexOf('-') < 0) {
        if (!(intent in intents)) {
          length = keys.push(intent);
        }

        intents[intent] = callback;
      } else {
        attributes[intent] = callback;
      }
    },
    // this method is used internally as last resort
    // to retrieve a value out of an object
    invoke: function invoke(object, callback) {
      for (var i = 0; i < length; i++) {
        var key = keys[i];

        if (hasOwnProperty.call(object, key)) {
          return intents[key](object[key], callback);
        }
      }
    }
  };

  var isArray = Array.isArray || function (toString) {
    /* istanbul ignore next */
    var $ = toString.call([]);
    /* istanbul ignore next */

    return function isArray(object) {
      return toString.call(object) === $;
    };
  }({}.toString);

  /*! (c) Andrea Giammarchi - ISC */
  var createContent = function (document) {

    var FRAGMENT = 'fragment';
    var TEMPLATE = 'template';
    var HAS_CONTENT = ('content' in create(TEMPLATE));
    var createHTML = HAS_CONTENT ? function (html) {
      var template = create(TEMPLATE);
      template.innerHTML = html;
      return template.content;
    } : function (html) {
      var content = create(FRAGMENT);
      var template = create(TEMPLATE);
      var childNodes = null;

      if (/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(html)) {
        var selector = RegExp.$1;
        template.innerHTML = '<table>' + html + '</table>';
        childNodes = template.querySelectorAll(selector);
      } else {
        template.innerHTML = html;
        childNodes = template.childNodes;
      }

      append(content, childNodes);
      return content;
    };
    return function createContent(markup, type) {
      return (type === 'svg' ? createSVG : createHTML)(markup);
    };

    function append(root, childNodes) {
      var length = childNodes.length;

      while (length--) {
        root.appendChild(childNodes[0]);
      }
    }

    function create(element) {
      return element === FRAGMENT ? document.createDocumentFragment() : document.createElementNS('http://www.w3.org/1999/xhtml', element);
    } // it could use createElementNS when hasNode is there
    // but this fallback is equally fast and easier to maintain
    // it is also battle tested already in all IE


    function createSVG(svg) {
      var content = create(FRAGMENT);
      var template = create('div');
      template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>';
      append(content, template.firstChild.childNodes);
      return content;
    }
  }(document);

  /*! (c) Andrea Giammarchi */
  function disconnected(poly) {

    var Event = poly.Event;
    var WeakSet = poly.WeakSet;
    var notObserving = true;
    var observer = null;
    return function observe(node) {
      if (notObserving) {
        notObserving = !notObserving;
        observer = new WeakSet();
        startObserving(node.ownerDocument);
      }

      observer.add(node);
      return node;
    };

    function startObserving(document) {
      var connected = new WeakSet();
      var disconnected = new WeakSet();

      try {
        new MutationObserver(changes).observe(document, {
          subtree: true,
          childList: true
        });
      } catch (o_O) {
        var timer = 0;
        var records = [];

        var reschedule = function reschedule(record) {
          records.push(record);
          clearTimeout(timer);
          timer = setTimeout(function () {
            changes(records.splice(timer = 0, records.length));
          }, 0);
        };

        document.addEventListener('DOMNodeRemoved', function (event) {
          reschedule({
            addedNodes: [],
            removedNodes: [event.target]
          });
        }, true);
        document.addEventListener('DOMNodeInserted', function (event) {
          reschedule({
            addedNodes: [event.target],
            removedNodes: []
          });
        }, true);
      }

      function changes(records) {
        for (var record, length = records.length, i = 0; i < length; i++) {
          record = records[i];
          dispatchAll(record.removedNodes, 'disconnected', disconnected, connected);
          dispatchAll(record.addedNodes, 'connected', connected, disconnected);
        }
      }

      function dispatchAll(nodes, type, wsin, wsout) {
        for (var node, event = new Event(type), length = nodes.length, i = 0; i < length; (node = nodes[i++]).nodeType === 1 && dispatchTarget(node, event, type, wsin, wsout)) {
        }
      }

      function dispatchTarget(node, event, type, wsin, wsout) {
        if (observer.has(node) && !wsin.has(node)) {
          wsout["delete"](node);
          wsin.add(node);
          node.dispatchEvent(event);
          /*
          // The event is not bubbling (perf reason: should it?),
          // hence there's no way to know if
          // stop/Immediate/Propagation() was called.
          // Should DOM Level 0 work at all?
          // I say it's a YAGNI case for the time being,
          // and easy to implement in user-land.
          if (!event.cancelBubble) {
            var fn = node['on' + type];
            if (fn)
              fn.call(node, event);
          }
          */
        }

        for (var // apparently is node.children || IE11 ... ^_^;;
        // https://github.com/WebReflection/disconnected/issues/1
        children = node.children || [], length = children.length, i = 0; i < length; dispatchTarget(children[i++], event, type, wsin, wsout)) {
        }
      }
    }
  }

  /*! (c) Andrea Giammarchi - ISC */
  var importNode = function (document, appendChild, cloneNode, createTextNode, importNode) {
    var _native = (importNode in document); // IE 11 has problems with cloning templates:
    // it "forgets" empty childNodes. This feature-detects that.


    var fragment = document.createDocumentFragment();
    fragment[appendChild](document[createTextNode]('g'));
    fragment[appendChild](document[createTextNode](''));
    /* istanbul ignore next */

    var content = _native ? document[importNode](fragment, true) : fragment[cloneNode](true);
    return content.childNodes.length < 2 ? function importNode(node, deep) {
      var clone = node[cloneNode]();

      for (var
      /* istanbul ignore next */
      childNodes = node.childNodes || [], length = childNodes.length, i = 0; deep && i < length; i++) {
        clone[appendChild](importNode(childNodes[i], deep));
      }

      return clone;
    } : _native ? document[importNode] : function (node, deep) {
      return node[cloneNode](!!deep);
    };
  }(document, 'appendChild', 'cloneNode', 'createTextNode', 'importNode');

  var trim = ''.trim ||
  /* istanbul ignore next */
  function () {
    return String(this).replace(/^\s+|\s+/g, '');
  };

  /*! (c) Andrea Giammarchi - ISC */
  // Custom
  var UID = '-' + Math.random().toFixed(6) + '%'; //                           Edge issue!

  var UID_IE = false;

  try {
    if (!function (template, content, tabindex) {
      return content in template && (template.innerHTML = '<p ' + tabindex + '="' + UID + '"></p>', template[content].childNodes[0].getAttribute(tabindex) == UID);
    }(document.createElement('template'), 'content', 'tabindex')) {
      UID = '_dt: ' + UID.slice(1, -1) + ';';
      UID_IE = true;
    }
  } catch (meh) {}

  var UIDC = '<!--' + UID + '-->'; // DOM

  var COMMENT_NODE = 8;
  var ELEMENT_NODE = 1;
  var TEXT_NODE = 3;
  var SHOULD_USE_TEXT_CONTENT = /^(?:plaintext|script|style|textarea|title|xmp)$/i;
  var VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;

  /*! (c) Andrea Giammarchi - ISC */
  function sanitize (template) {
    return template.join(UIDC).replace(selfClosing, fullClosing).replace(attrSeeker, attrReplacer);
  }
  var spaces = ' \\f\\n\\r\\t';
  var almostEverything = '[^' + spaces + '\\/>"\'=]+';
  var attrName = '[' + spaces + ']+' + almostEverything;
  var tagName = '<([A-Za-z]+[A-Za-z0-9:._-]*)((?:';
  var attrPartials = '(?:\\s*=\\s*(?:\'[^\']*?\'|"[^"]*?"|<[^>]*?>|' + almostEverything.replace('\\/', '') + '))?)';
  var attrSeeker = new RegExp(tagName + attrName + attrPartials + '+)([' + spaces + ']*/?>)', 'g');
  var selfClosing = new RegExp(tagName + attrName + attrPartials + '*)([' + spaces + ']*/>)', 'g');
  var findAttributes = new RegExp('(' + attrName + '\\s*=\\s*)([\'"]?)' + UIDC + '\\2', 'gi');

  function attrReplacer($0, $1, $2, $3) {
    return '<' + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
  }

  function replaceAttributes($0, $1, $2) {
    return $1 + ($2 || '"') + UID + ($2 || '"');
  }

  function fullClosing($0, $1, $2) {
    return VOID_ELEMENTS.test($1) ? $0 : '<' + $1 + $2 + '></' + $1 + '>';
  }

  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;
      }
    };
  });

  /* istanbul ignore next */

  var normalizeAttributes = UID_IE ? function (attributes, parts) {
    var html = parts.join(' ');
    return parts.slice.call(attributes, 0).sort(function (left, right) {
      return html.indexOf(left.name) <= html.indexOf(right.name) ? -1 : 1;
    });
  } : function (attributes, parts) {
    return parts.slice.call(attributes, 0);
  };

  function find(node, path) {
    var length = path.length;
    var i = 0;

    while (i < length) {
      node = node.childNodes[path[i++]];
    }

    return node;
  }

  function parse(node, holes, parts, path) {
    var childNodes = node.childNodes;
    var length = childNodes.length;
    var i = 0;

    while (i < length) {
      var child = childNodes[i];

      switch (child.nodeType) {
        case ELEMENT_NODE:
          var childPath = path.concat(i);
          parseAttributes(child, holes, parts, childPath);
          parse(child, holes, parts, childPath);
          break;

        case COMMENT_NODE:
          var textContent = child.textContent;

          if (textContent === UID) {
            parts.shift();
            holes.push( // basicHTML or other non standard engines
            // might end up having comments in nodes
            // where they shouldn't, hence this check.
            SHOULD_USE_TEXT_CONTENT.test(node.nodeName) ? Text(node, path) : Any(child, path.concat(i)));
          } else {
            switch (textContent.slice(0, 2)) {
              case '/*':
                if (textContent.slice(-2) !== '*/') break;

              case "\uD83D\uDC7B":
                // ghost
                node.removeChild(child);
                i--;
                length--;
            }
          }

          break;

        case TEXT_NODE:
          // the following ignore is actually covered by browsers
          // only basicHTML ends up on previous COMMENT_NODE case
          // instead of TEXT_NODE because it knows nothing about
          // special style or textarea behavior

          /* istanbul ignore if */
          if (SHOULD_USE_TEXT_CONTENT.test(node.nodeName) && trim.call(child.textContent) === UIDC) {
            parts.shift();
            holes.push(Text(node, path));
          }

          break;
      }

      i++;
    }
  }

  function parseAttributes(node, holes, parts, path) {
    var attributes = node.attributes;
    var cache = [];
    var remove = [];
    var array = normalizeAttributes(attributes, parts);
    var length = array.length;
    var i = 0;

    while (i < length) {
      var attribute = array[i++];
      var direct = attribute.value === UID;
      var sparse;

      if (direct || 1 < (sparse = attribute.value.split(UIDC)).length) {
        var name = attribute.name; // the following ignore is covered by IE
        // and the IE9 double viewBox test

        /* istanbul ignore else */

        if (cache.indexOf(name) < 0) {
          cache.push(name);
          var realName = parts.shift().replace(direct ? /^(?:|[\S\s]*?\s)(\S+?)\s*=\s*('|")?$/ : new RegExp('^(?:|[\\S\\s]*?\\s)(' + name + ')\\s*=\\s*(\'|")[\\S\\s]*', 'i'), '$1');
          var value = attributes[realName] || // the following ignore is covered by browsers
          // while basicHTML is already case-sensitive

          /* istanbul ignore next */
          attributes[realName.toLowerCase()];
          if (direct) holes.push(Attr(value, path, realName, null));else {
            var skip = sparse.length - 2;

            while (skip--) {
              parts.shift();
            }

            holes.push(Attr(value, path, realName, sparse));
          }
        }

        remove.push(attribute);
      }
    }

    length = remove.length;
    i = 0;
    /* istanbul ignore next */

    var cleanValue = 0 < length && UID_IE && !('ownerSVGElement' in node);

    while (i < length) {
      // Edge HTML bug #16878726
      var attr = remove[i++]; // IE/Edge bug lighterhtml#63 - clean the value or it'll persist

      /* istanbul ignore next */

      if (cleanValue) attr.value = ''; // IE/Edge bug lighterhtml#64 - don't use removeAttributeNode

      node.removeAttribute(attr.name);
    } // This is a very specific Firefox/Safari issue
    // but since it should be a not so common pattern,
    // it's probably worth patching regardless.
    // Basically, scripts created through strings are death.
    // You need to create fresh new scripts instead.
    // TODO: is there any other node that needs such nonsense?


    var nodeName = node.nodeName;

    if (/^script$/i.test(nodeName)) {
      // this used to be like that
      // var script = createElement(node, nodeName);
      // then Edge arrived and decided that scripts created
      // through template documents aren't worth executing
      // so it became this ... hopefully it won't hurt in the wild
      var script = document.createElement(nodeName);
      length = attributes.length;
      i = 0;

      while (i < length) {
        script.setAttributeNode(attributes[i++].cloneNode(true));
      }

      script.textContent = node.textContent;
      node.parentNode.replaceChild(script, node);
    }
  }

  function Any(node, path) {
    return {
      type: 'any',
      node: node,
      path: path
    };
  }

  function Attr(node, path, name, sparse) {
    return {
      type: 'attr',
      node: node,
      path: path,
      name: name,
      sparse: sparse
    };
  }

  function Text(node, path) {
    return {
      type: 'text',
      node: node,
      path: path
    };
  }

  // globals
  var parsed = umap(new WeakMap$1());

  function createInfo(options, template) {
    var markup = (options.convert || sanitize)(template);
    var transform = options.transform;
    if (transform) markup = transform(markup);
    var content = createContent(markup, options.type);
    cleanContent(content);
    var holes = [];
    parse(content, holes, template.slice(0), []);
    return {
      content: content,
      updates: function updates(content) {
        var updates = [];
        var len = holes.length;
        var i = 0;
        var off = 0;

        while (i < len) {
          var info = holes[i++];
          var node = find(content, info.path);

          switch (info.type) {
            case 'any':
              updates.push({
                fn: options.any(node, []),
                sparse: false
              });
              break;

            case 'attr':
              var sparse = info.sparse;
              var fn = options.attribute(node, info.name, info.node);
              if (sparse === null) updates.push({
                fn: fn,
                sparse: false
              });else {
                off += sparse.length - 2;
                updates.push({
                  fn: fn,
                  sparse: true,
                  values: sparse
                });
              }
              break;

            case 'text':
              updates.push({
                fn: options.text(node),
                sparse: false
              });
              node.textContent = '';
              break;
          }
        }

        len += off;
        return function () {
          var length = arguments.length;

          if (len !== length - 1) {
            throw new Error(length - 1 + ' values instead of ' + len + '\n' + template.join('${value}'));
          }

          var i = 1;
          var off = 1;

          while (i < length) {
            var update = updates[i - off];

            if (update.sparse) {
              var values = update.values;
              var value = values[0];
              var j = 1;
              var l = values.length;
              off += l - 2;

              while (j < l) {
                value += arguments[i++] + values[j++];
              }

              update.fn(value);
            } else update.fn(arguments[i++]);
          }

          return content;
        };
      }
    };
  }

  function createDetails(options, template) {
    var info = parsed.get(template) || parsed.set(template, createInfo(options, template));
    return info.updates(importNode.call(document, info.content, true));
  }

  var empty = [];

  function domtagger(options) {
    var previous = empty;
    var updates = cleanContent;
    return function (template) {
      if (previous !== template) updates = createDetails(options, previous = template);
      return updates.apply(null, arguments);
    };
  }

  function cleanContent(fragment) {
    var childNodes = fragment.childNodes;
    var i = childNodes.length;

    while (i--) {
      var child = childNodes[i];

      if (child.nodeType !== 1 && trim.call(child.textContent).length === 0) {
        fragment.removeChild(child);
      }
    }
  }

  /*! (c) Andrea Giammarchi - ISC */
  var hyperStyle = function () {

    var IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;
    var hyphen = /([^A-Z])([A-Z]+)/g;
    return function hyperStyle(node, original) {
      return 'ownerSVGElement' in node ? svg(node, original) : update(node.style, false);
    };

    function ized($0, $1, $2) {
      return $1 + '-' + $2.toLowerCase();
    }

    function svg(node, original) {
      var style;
      if (original) style = original.cloneNode(true);else {
        node.setAttribute('style', '--hyper:style;');
        style = node.getAttributeNode('style');
      }
      style.value = '';
      node.setAttributeNode(style);
      return update(style, true);
    }

    function toStyle(object) {
      var key,
          css = [];

      for (key in object) {
        css.push(key.replace(hyphen, ized), ':', object[key], ';');
      }

      return css.join('');
    }

    function update(style, isSVG) {
      var oldType, oldValue;
      return function (newValue) {
        var info, key, styleValue, value;

        switch (_typeof(newValue)) {
          case 'object':
            if (newValue) {
              if (oldType === 'object') {
                if (!isSVG) {
                  if (oldValue !== newValue) {
                    for (key in oldValue) {
                      if (!(key in newValue)) {
                        style[key] = '';
                      }
                    }
                  }
                }
              } else {
                if (isSVG) style.value = '';else style.cssText = '';
              }

              info = isSVG ? {} : style;

              for (key in newValue) {
                value = newValue[key];
                styleValue = typeof value === 'number' && !IS_NON_DIMENSIONAL.test(key) ? value + 'px' : value;
                if (!isSVG && /^--/.test(key)) info.setProperty(key, styleValue);else info[key] = styleValue;
              }

              oldType = 'object';
              if (isSVG) style.value = toStyle(oldValue = info);else oldValue = newValue;
              break;
            }

          default:
            if (oldValue != newValue) {
              oldType = 'string';
              oldValue = newValue;
              if (isSVG) style.value = newValue || '';else style.cssText = newValue || '';
            }

            break;
        }
      };
    }
  }();

  /*! (c) Andrea Giammarchi - ISC */
  var Wire = function (slice, proto) {
    proto = Wire.prototype;
    proto.ELEMENT_NODE = 1;
    proto.nodeType = 111;

    proto.remove = function (keepFirst) {
      var childNodes = this.childNodes;
      var first = this.firstChild;
      var last = this.lastChild;
      this._ = null;

      if (keepFirst && childNodes.length === 2) {
        last.parentNode.removeChild(last);
      } else {
        var range = this.ownerDocument.createRange();
        range.setStartBefore(keepFirst ? childNodes[1] : first);
        range.setEndAfter(last);
        range.deleteContents();
      }

      return first;
    };

    proto.valueOf = function (forceAppend) {
      var fragment = this._;
      var noFragment = fragment == null;
      if (noFragment) fragment = this._ = this.ownerDocument.createDocumentFragment();

      if (noFragment || forceAppend) {
        for (var n = this.childNodes, i = 0, l = n.length; i < l; i++) {
          fragment.appendChild(n[i]);
        }
      }

      return fragment;
    };

    return Wire;

    function Wire(childNodes) {
      var nodes = this.childNodes = slice.call(childNodes, 0);
      this.firstChild = nodes[0];
      this.lastChild = nodes[nodes.length - 1];
      this.ownerDocument = nodes[0].ownerDocument;
      this._ = null;
    }
  }([].slice);

  // Node.CONSTANTS
  var DOCUMENT_FRAGMENT_NODE = 11; // SVG related constants

  var OWNER_SVG_ELEMENT = 'ownerSVGElement'; // Custom Elements / MutationObserver constants

  var CONNECTED = 'connected';
  var DISCONNECTED = 'dis' + CONNECTED;

  var componentType = Component.prototype.nodeType;
  var wireType = Wire.prototype.nodeType;
  var observe = disconnected({
    Event: CustomEvent$1,
    WeakSet: WeakSet$1
  });

  var asHTML = function asHTML(html) {
    return {
      html: html
    };
  }; // returns nodes from wires and components


  var asNode = function asNode(item, i) {
    switch (item.nodeType) {
      case wireType:
        // in the Wire case, the content can be
        // removed, post-pended, inserted, or pre-pended and
        // all these cases are handled by domdiff already

        /* istanbul ignore next */
        return 1 / i < 0 ? i ? item.remove(true) : item.lastChild : i ? item.valueOf(true) : item.firstChild;

      case componentType:
        return asNode(item.render(), i);

      default:
        return item;
    }
  }; // returns true if domdiff can handle the value


  var canDiff = function canDiff(value) {
    return 'ELEMENT_NODE' in value;
  }; // borrowed from uhandlers
  // https://github.com/WebReflection/uhandlers


  var booleanSetter = function booleanSetter(node, key, oldValue) {
    return function (newValue) {
      if (oldValue !== !!newValue) {
        if (oldValue = !!newValue) node.setAttribute(key, '');else node.removeAttribute(key);
      }
    };
  };

  var hyperSetter = function hyperSetter(node, name, svg) {
    return svg ? function (value) {
      try {
        node[name] = value;
      } catch (nope) {
        node.setAttribute(name, value);
      }
    } : function (value) {
      node[name] = value;
    };
  }; // when a Promise is used as interpolation value
  // its result must be parsed once resolved.
  // This callback is in charge of understanding what to do
  // with a returned value once the promise is resolved.


  var invokeAtDistance = function invokeAtDistance(value, callback) {
    callback(value.placeholder);

    if ('text' in value) {
      Promise.resolve(value.text).then(String).then(callback);
    } else if ('any' in value) {
      Promise.resolve(value.any).then(callback);
    } else if ('html' in value) {
      Promise.resolve(value.html).then(asHTML).then(callback);
    } else {
      Promise.resolve(Intent.invoke(value, callback)).then(callback);
    }
  }; // quick and dirty way to check for Promise/ish values


  var isPromise_ish = function isPromise_ish(value) {
    return value != null && 'then' in value;
  }; // list of attributes that should not be directly assigned


  var readOnly = /^(?:form|list)$/i; // reused every slice time

  var slice = [].slice; // simplifies text node creation

  var text = function text(node, _text) {
    return node.ownerDocument.createTextNode(_text);
  };

  function Tagger(type) {
    this.type = type;
    return domtagger(this);
  }

  Tagger.prototype = {
    // there are four kind of attributes, and related behavior:
    //  * events, with a name starting with `on`, to add/remove event listeners
    //  * special, with a name present in their inherited prototype, accessed directly
    //  * regular, accessed through get/setAttribute standard DOM methods
    //  * style, the only regular attribute that also accepts an object as value
    //    so that you can style=${{width: 120}}. In this case, the behavior has been
    //    fully inspired by Preact library and its simplicity.
    attribute: function attribute(node, name, original) {
      var isSVG = (OWNER_SVG_ELEMENT in node);
      var oldValue; // if the attribute is the style one
      // handle it differently from others

      if (name === 'style') return hyperStyle(node, original, isSVG); // direct accessors for <input .value=${...}> and friends
      else if (name.slice(0, 1) === '.') return hyperSetter(node, name.slice(1), isSVG); // boolean accessors for <input .value=${...}> and friends
      else if (name.slice(0, 1) === '?') return booleanSetter(node, name.slice(1)); // the name is an event one,
      // add/remove event listeners accordingly
      else if (/^on/.test(name)) {
        var type = name.slice(2);

        if (type === CONNECTED || type === DISCONNECTED) {
          observe(node);
        } else if (name.toLowerCase() in node) {
          type = type.toLowerCase();
        }

        return function (newValue) {
          if (oldValue !== newValue) {
            if (oldValue) node.removeEventListener(type, oldValue, false);
            oldValue = newValue;
            if (newValue) node.addEventListener(type, newValue, false);
          }
        };
      } // the attribute is special ('value' in input)
      // and it's not SVG *or* the name is exactly data,
      // in this case assign the value directly
      else if (name === 'data' || !isSVG && name in node && !readOnly.test(name)) {
        return function (newValue) {
          if (oldValue !== newValue) {
            oldValue = newValue;

            if (node[name] !== newValue && newValue == null) {
              // cleanup on null to avoid silly IE/Edge bug
              node[name] = '';
              node.removeAttribute(name);
            } else node[name] = newValue;
          }
        };
      } else if (name in Intent.attributes) {
        return function (any) {
          var newValue = Intent.attributes[name](node, any);

          if (oldValue !== newValue) {
            oldValue = newValue;
            if (newValue == null) node.removeAttribute(name);else node.setAttribute(name, newValue);
          }
        };
      } // in every other case, use the attribute node as it is
      // update only the value, set it as node only when/if needed
      else {
        var owner = false;
        var attribute = original.cloneNode(true);
        return function (newValue) {
          if (oldValue !== newValue) {
            oldValue = newValue;

            if (attribute.value !== newValue) {
              if (newValue == null) {
                if (owner) {
                  owner = false;
                  node.removeAttributeNode(attribute);
                }

                attribute.value = newValue;
              } else {
                attribute.value = newValue;

                if (!owner) {
                  owner = true;
                  node.setAttributeNode(attribute);
                }
              }
            }
          }
        };
      }
    },
    // in a hyper(node)`<div>${content}</div>` case
    // everything could happen:
    //  * it's a JS primitive, stored as text
    //  * it's null or undefined, the node should be cleaned
    //  * it's a component, update the content by rendering it
    //  * it's a promise, update the content once resolved
    //  * it's an explicit intent, perform the desired operation
    //  * it's an Array, resolve all values if Promises and/or
    //    update the node with the resulting list of content
    any: function any(node, childNodes) {
      var diffOptions = {
        node: asNode,
        before: node
      };
      var nodeType = OWNER_SVG_ELEMENT in node ?
      /* istanbul ignore next */
      'svg' : 'html';
      var fastPath = false;
      var oldValue;

      var anyContent = function anyContent(value) {
        switch (_typeof(value)) {
          case 'string':
          case 'number':
          case 'boolean':
            if (fastPath) {
              if (oldValue !== value) {
                oldValue = value;
                childNodes[0].textContent = value;
              }
            } else {
              fastPath = true;
              oldValue = value;
              childNodes = domdiff(node.parentNode, childNodes, [text(node, value)], diffOptions);
            }

            break;

          case 'function':
            anyContent(value(node));
            break;

          case 'object':
          case 'undefined':
            if (value == null) {
              fastPath = false;
              childNodes = domdiff(node.parentNode, childNodes, [], diffOptions);
              break;
            }

          default:
            fastPath = false;
            oldValue = value;

            if (isArray(value)) {
              if (value.length === 0) {
                if (childNodes.length) {
                  childNodes = domdiff(node.parentNode, childNodes, [], diffOptions);
                }
              } else {
                switch (_typeof(value[0])) {
                  case 'string':
                  case 'number':
                  case 'boolean':
                    anyContent({
                      html: value
                    });
                    break;

                  case 'object':
                    if (isArray(value[0])) {
                      value = value.concat.apply([], value);
                    }

                    if (isPromise_ish(value[0])) {
                      Promise.all(value).then(anyContent);
                      break;
                    }

                  default:
                    childNodes = domdiff(node.parentNode, childNodes, value, diffOptions);
                    break;
                }
              }
            } else if (canDiff(value)) {
              childNodes = domdiff(node.parentNode, childNodes, value.nodeType === DOCUMENT_FRAGMENT_NODE ? slice.call(value.childNodes) : [value], diffOptions);
            } else if (isPromise_ish(value)) {
              value.then(anyContent);
            } else if ('placeholder' in value) {
              invokeAtDistance(value, anyContent);
            } else if ('text' in value) {
              anyContent(String(value.text));
            } else if ('any' in value) {
              anyContent(value.any);
            } else if ('html' in value) {
              childNodes = domdiff(node.parentNode, childNodes, slice.call(createContent([].concat(value.html).join(''), nodeType).childNodes), diffOptions);
            } else if ('length' in value) {
              anyContent(slice.call(value));
            } else {
              anyContent(Intent.invoke(value, anyContent));
            }

            break;
        }
      };

      return anyContent;
    },
    // style or textareas don't accept HTML as content
    // it's pointless to transform or analyze anything
    // different from text there but it's worth checking
    // for possible defined intents.
    text: function text(node) {
      var oldValue;

      var textContent = function textContent(value) {
        if (oldValue !== value) {
          oldValue = value;

          var type = _typeof(value);

          if (type === 'object' && value) {
            if (isPromise_ish(value)) {
              value.then(textContent);
            } else if ('placeholder' in value) {
              invokeAtDistance(value, textContent);
            } else if ('text' in value) {
              textContent(String(value.text));
            } else if ('any' in value) {
              textContent(value.any);
            } else if ('html' in value) {
              textContent([].concat(value.html).join(''));
            } else if ('length' in value) {
              textContent(slice.call(value).join(''));
            } else {
              textContent(Intent.invoke(value, textContent));
            }
          } else if (type === 'function') {
            textContent(value(node));
          } else {
            node.textContent = value == null ? '' : value;
          }
        }
      };

      return textContent;
    }
  };

  var isNoOp = (typeof document === "undefined" ? "undefined" : _typeof(document)) !== 'object';

  var _templateLiteral = function templateLiteral(tl) {
    var RAW = 'raw';

    var isBroken = function isBroken(UA) {
      return /(Firefox|Safari)\/(\d+)/.test(UA) && !/(Chrom[eium]+|Android)\/(\d+)/.test(UA);
    };

    var broken = isBroken((document.defaultView.navigator || {}).userAgent);
    var FTS = !(RAW in tl) || tl.propertyIsEnumerable(RAW) || !Object.isFrozen(tl[RAW]);

    if (broken || FTS) {
      var forever = {};

      var foreverCache = function foreverCache(tl) {
        for (var key = '.', i = 0; i < tl.length; i++) {
          key += tl[i].length + '.' + tl[i];
        }

        return forever[key] || (forever[key] = tl);
      }; // Fallback TypeScript shenanigans


      if (FTS) _templateLiteral = foreverCache; // try fast path for other browsers:
      // store the template as WeakMap key
      // and forever cache it only when it's not there.
      // this way performance is still optimal,
      // penalized only when there are GC issues
      else {
        var wm = new WeakMap$1();

        var set = function set(tl, unique) {
          wm.set(tl, unique);
          return unique;
        };

        _templateLiteral = function templateLiteral(tl) {
          return wm.get(tl) || set(tl, foreverCache(tl));
        };
      }
    } else {
      isNoOp = true;
    }

    return TL(tl);
  };

  function TL(tl) {
    return isNoOp ? tl : _templateLiteral(tl);
  }

  function tta (template) {
    var length = arguments.length;
    var args = [TL(template)];
    var i = 1;

    while (i < length) {
      args.push(arguments[i++]);
    }

    return args;
  }
  /**
   * best benchmark goes here
   * https://jsperf.com/tta-bench
   * I should probably have an @ungap/template-literal-es too
  export default (...args) => {
    args[0] = unique(args[0]);
    return args;
  };
   */

  var wires = new WeakMap$1(); // A wire is a callback used as tag function
  // to lazily relate a generic object to a template literal.
  // hyper.wire(user)`<div id=user>${user.name}</div>`; => the div#user
  // This provides the ability to have a unique DOM structure
  // related to a unique JS object through a reusable template literal.
  // A wire can specify a type, as svg or html, and also an id
  // via html:id or :id convention. Such :id allows same JS objects
  // to be associated to different DOM structures accordingly with
  // the used template literal without losing previously rendered parts.

  var wire = function wire(obj, type) {
    return obj == null ? content(type || 'html') : weakly(obj, type || 'html');
  }; // A wire content is a virtual reference to one or more nodes.
  // It's represented by either a DOM node, or an Array.
  // In both cases, the wire content role is to simply update
  // all nodes through the list of related callbacks.
  // In few words, a wire content is like an invisible parent node
  // in charge of updating its content like a bound element would do.


  var content = function content(type) {
    var wire, tagger, template;
    return function () {
      var args = tta.apply(null, arguments);

      if (template !== args[0]) {
        template = args[0];
        tagger = new Tagger(type);
        wire = wireContent(tagger.apply(tagger, args));
      } else {
        tagger.apply(tagger, args);
      }

      return wire;
    };
  }; // wires are weakly created through objects.
  // Each object can have multiple wires associated
  // and this is thanks to the type + :id feature.


  var weakly = function weakly(obj, type) {
    var i = type.indexOf(':');
    var wire = wires.get(obj);
    var id = type;

    if (-1 < i) {
      id = type.slice(i + 1);
      type = type.slice(0, i) || 'html';
    }

    if (!wire) wires.set(obj, wire = {});
    return wire[id] || (wire[id] = content(type));
  }; // A document fragment loses its nodes 
  // as soon as it is appended into another node.
  // This has the undesired effect of losing wired content
  // on a second render call, because (by then) the fragment would be empty:
  // no longer providing access to those sub-nodes that ultimately need to
  // stay associated with the original interpolation.
  // To prevent hyperHTML from forgetting about a fragment's sub-nodes,
  // fragments are instead returned as an Array of nodes or, if there's only one entry,
  // as a single referenced node which, unlike fragments, will indeed persist
  // wire content throughout multiple renderings.
  // The initial fragment, at this point, would be used as unique reference to this
  // array of nodes or to this single referenced node.


  var wireContent = function wireContent(node) {
    var childNodes = node.childNodes;
    var length = childNodes.length;
    return length === 1 ? childNodes[0] : length ? new Wire(childNodes) : node;
  };

  // are already known to hyperHTML

  var bewitched = new WeakMap$1(); // better known as hyper.bind(node), the render is
  // the main tag function in charge of fully upgrading
  // or simply updating, contexts used as hyperHTML targets.
  // The `this` context is either a regular DOM node or a fragment.

  function render() {
    var wicked = bewitched.get(this);
    var args = tta.apply(null, arguments);

    if (wicked && wicked.template === args[0]) {
      wicked.tagger.apply(null, args);
    } else {
      upgrade.apply(this, args);
    }

    return this;
  } // an upgrade is in charge of collecting template info,
  // parse it once, if unknown, to map all interpolations
  // as single DOM callbacks, relate such template
  // to the current context, and render it after cleaning the context up


  function upgrade(template) {
    var type = OWNER_SVG_ELEMENT in this ? 'svg' : 'html';
    var tagger = new Tagger(type);
    bewitched.set(this, {
      tagger: tagger,
      template: template
    });
    this.textContent = '';
    this.appendChild(tagger.apply(null, arguments));
  }

  /*! (c) Andrea Giammarchi (ISC) */
  // you can do the following
  // const {bind, wire} = hyperHTML;
  // and use them right away: bind(node)`hello!`;

  var bind = function bind(context) {
    return render.bind(context);
  };

  var define = Intent.define;
  var tagger = Tagger.prototype;
  hyper.Component = Component;
  hyper.bind = bind;
  hyper.define = define;
  hyper.diff = domdiff;
  hyper.hyper = hyper;
  hyper.observe = observe;
  hyper.tagger = tagger;
  hyper.wire = wire; // exported as shared utils
  // for projects based on hyperHTML
  // that don't necessarily need upfront polyfills
  // i.e. those still targeting IE

  hyper._ = {
    WeakMap: WeakMap$1,
    WeakSet: WeakSet$1
  }; // the wire content is the lazy defined
  // html or svg property of each hyper.Component

  setup(content); // everything is exported directly or through the
  // that "magically" understands what's the best
  // thing to do with passed arguments

  function hyper(HTML) {
    return arguments.length < 2 ? HTML == null ? content('html') : typeof HTML === 'string' ? hyper.wire(null, HTML) : 'raw' in HTML ? content('html')(HTML) : 'nodeType' in HTML ? hyper.bind(HTML) : weakly(HTML, 'html') : ('raw' in HTML ? content('html') : hyper.wire).apply(null, arguments);
  }

  var ATTRIBUTE_CHANGED_CALLBACK = 'attributeChangedCallback';
  var O = Object;
  var classes = [];
  var defineProperty = O.defineProperty;
  var getOwnPropertyDescriptor = O.getOwnPropertyDescriptor;
  var getOwnPropertyNames = O.getOwnPropertyNames;
  /* istanbul ignore next */

  var getOwnPropertySymbols = O.getOwnPropertySymbols || function () {
    return [];
  };
  /* istanbul ignore next */


  var getPrototypeOf = O.getPrototypeOf || function (o) {
    return o.__proto__;
  };
  /* istanbul ignore next */


  var ownKeys = (typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === 'object' && Reflect.ownKeys || function (o) {
    return getOwnPropertyNames(o).concat(getOwnPropertySymbols(o));
  };
  /* istanbul ignore next */


  var setPrototypeOf = O.setPrototypeOf || function (o, p) {
    return o.__proto__ = p, o;
  };
  /* istanbul ignore stop */


  var camel = function camel(name) {
    return name.replace(/-([a-z])/g, function ($0, $1) {
      return $1.toUpperCase();
    });
  };

  var _attachShadow = HTMLElement.prototype.attachShadow;
  var sr = new WeakMap();

  var HyperHTMLElement = /*#__PURE__*/function (_HTMLElement) {
    _inherits(HyperHTMLElement, _HTMLElement);

    var _super = _createSuper(HyperHTMLElement);

    function HyperHTMLElement() {
      _classCallCheck(this, HyperHTMLElement);

      return _super.apply(this, arguments);
    }

    _createClass(HyperHTMLElement, [{
      key: "attachShadow",
      value: // weakly relate the shadowRoot for refs usage
      function attachShadow() {
        var shadowRoot = _attachShadow.apply(this, arguments);

        sr.set(this, shadowRoot);
        return shadowRoot;
      } // returns elements by ref

    }, {
      key: "refs",
      get: function get() {
        var value = {};

        if ('_html$' in this) {
          var all = (sr.get(this) || this).querySelectorAll('[ref]');

          for (var length = all.length, i = 0; i < length; i++) {
            var node = all[i];
            value[node.getAttribute('ref')] = node;
          }

          Object.defineProperty(this, 'refs', {
            value: value
          });
          return value;
        }

        return value;
      } // lazily bind once hyperHTML logic
      // to either the shadowRoot, if present and open,
      // the _shadowRoot property, if set due closed shadow root,
      // or the custom-element itself if no Shadow DOM is used.

    }, {
      key: "html",
      get: function get() {
        return this._html$ || (this.html = bind( // in a way or another, bind to the right node
        // backward compatible, first two could probably go already
        this.shadowRoot || this._shadowRoot || sr.get(this) || this));
      } // it can be set too if necessary, it won't invoke render()
      ,
      set: function set(value) {
        defineProperty(this, '_html$', {
          configurable: true,
          value: value
        });
      } // overwrite this method with your own render

    }, {
      key: "render",
      value: function render() {} // ---------------------//
      // Basic State Handling //
      // ---------------------//
      // define the default state object
      // you could use observed properties too

    }, {
      key: "defaultState",
      get: function get() {
        return {};
      } // the state with a default

    }, {
      key: "state",
      get: function get() {
        return this._state$ || (this.state = this.defaultState);
      } // it can be set too if necessary, it won't invoke render()
      ,
      set: function set(value) {
        defineProperty(this, '_state$', {
          configurable: true,
          value: value
        });
      } // currently a state is a shallow copy, like in Preact or other libraries.
      // after the state is updated, the render() method will be invoked.
      // ⚠️ do not ever call this.setState() inside this.render()

    }, {
      key: "setState",
      value: function setState(state, render) {
        var target = this.state;
        var source = typeof state === 'function' ? state.call(this, target) : state;

        for (var key in source) {
          target[key] = source[key];
        }

        if (render !== false) this.render();
        return this;
      }
    }], [{
      key: "define",
      value: // define a custom-element in the CustomElementsRegistry
      // class MyEl extends HyperHTMLElement {}
      // MyEl.define('my-el');
      function define(name, options) {
        var Class = this;
        var proto = Class.prototype;
        var onChanged = proto[ATTRIBUTE_CHANGED_CALLBACK];
        var hasChange = !!onChanged; // Class.booleanAttributes
        // -----------------------------------------------
        // attributes defined as boolean will have
        // an either available or not available attribute
        // regardless of the value.
        // All falsy values, or "false", mean attribute removed
        // while truthy values will be set as is.
        // Boolean attributes are also automatically observed.

        var booleanAttributes = Class.booleanAttributes || [];
        booleanAttributes.forEach(function (attribute) {
          var name = camel(attribute);
          if (!(name in proto)) defineProperty(proto, name, {
            configurable: true,
            get: function get() {
              return this.hasAttribute(attribute);
            },
            set: function set(value) {
              if (!value || value === 'false') this.removeAttribute(attribute);else this.setAttribute(attribute, '');
            }
          });
        }); // Class.observedAttributes
        // -------------------------------------------------------
        // HyperHTMLElement will directly reflect get/setAttribute
        // operation once these attributes are used, example:
        // el.observed = 123;
        // will automatically do
        // el.setAttribute('observed', 123);
        // triggering also the attributeChangedCallback

        var observedAttributes = (Class.observedAttributes || []).filter(function (attribute) {
          return booleanAttributes.indexOf(attribute) < 0;
        });
        observedAttributes.forEach(function (attribute) {
          // it is possible to redefine the behavior at any time
          // simply overwriting get prop() and set prop(value)
          var name = camel(attribute);
          if (!(name in proto)) defineProperty(proto, name, {
            configurable: true,
            get: function get() {
              return this.getAttribute(attribute);
            },
            set: function set(value) {
              if (value == null) this.removeAttribute(attribute);else this.setAttribute(attribute, value);
            }
          });
        }); // if these are defined, overwrite the observedAttributes getter
        // to include also booleanAttributes

        var attributes = booleanAttributes.concat(observedAttributes);
        if (attributes.length) defineProperty(Class, 'observedAttributes', {
          get: function get() {
            return attributes;
          }
        }); // created() {}
        // ---------------------------------
        // an initializer method that grants
        // the node is fully known to the browser.
        // It is ensured to run either after DOMContentLoaded,
        // or once there is a next sibling (stream-friendly) so that
        // you have full access to element attributes and/or childNodes.

        var created = proto.created || function () {
          this.render();
        }; // used to ensure create() is called once and once only


        defineProperty(proto, '_init$', {
          configurable: true,
          writable: true,
          value: true
        });
        defineProperty(proto, ATTRIBUTE_CHANGED_CALLBACK, {
          configurable: true,
          value: function aCC(name, prev, curr) {
            if (this._init$) {
              checkReady.call(this, created, attributes, booleanAttributes);
              if (this._init$) return this._init$$.push(aCC.bind(this, name, prev, curr));
            } // ensure setting same value twice
            // won't trigger twice attributeChangedCallback


            if (hasChange && prev !== curr) {
              onChanged.apply(this, arguments);
            }
          }
        });
        var onConnected = proto.connectedCallback;
        var hasConnect = !!onConnected;
        defineProperty(proto, 'connectedCallback', {
          configurable: true,
          value: function cC() {
            if (this._init$) {
              checkReady.call(this, created, attributes, booleanAttributes);
              if (this._init$) return this._init$$.push(cC.bind(this));
            }

            if (hasConnect) {
              onConnected.apply(this, arguments);
            }
          }
        }); // define lazily all handlers
        // class { handleClick() { ... }
        // render() { `<a onclick=${this.handleClick}>` } }

        getOwnPropertyNames(proto).forEach(function (key) {
          if (/^handle[A-Z]/.test(key)) {
            var _key$ = '_' + key + '$';

            var method = proto[key];
            defineProperty(proto, key, {
              configurable: true,
              get: function get() {
                return this[_key$] || (this[_key$] = method.bind(this));
              }
            });
          }
        }); // whenever you want to directly use the component itself
        // as EventListener, you can pass it directly.
        // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
        //  class Reactive extends HyperHTMLElement {
        //    oninput(e) { console.log(this, 'changed', e.target.value); }
        //    render() { this.html`<input oninput="${this}">`; }
        //  }

        if (!('handleEvent' in proto)) {
          defineProperty(proto, 'handleEvent', {
            configurable: true,
            value: function value(event) {
              this[(event.currentTarget.dataset || {}).call || 'on' + event.type](event);
            }
          });
        }

        if (options && options["extends"]) {
          var Native = document.createElement(options["extends"]).constructor;

          var Intermediate = /*#__PURE__*/function (_Native) {
            _inherits(Intermediate, _Native);

            var _super2 = _createSuper(Intermediate);

            function Intermediate() {
              _classCallCheck(this, Intermediate);

              return _super2.apply(this, arguments);
            }

            return Intermediate;
          }(Native);

          var ckeys = ['length', 'name', 'arguments', 'caller', 'prototype'];
          var pkeys = [];
          var Super = null;
          var BaseClass = Class;

          while (Super = getPrototypeOf(BaseClass)) {
            [{
              target: Intermediate,
              base: Super,
              keys: ckeys
            }, {
              target: Intermediate.prototype,
              base: Super.prototype,
              keys: pkeys
            }].forEach(function (_ref) {
              var target = _ref.target,
                  base = _ref.base,
                  keys = _ref.keys;
              ownKeys(base).filter(function (key) {
                return keys.indexOf(key) < 0;
              }).forEach(function (key) {
                keys.push(key);
                defineProperty(target, key, getOwnPropertyDescriptor(base, key));
              });
            });
            BaseClass = Super;
            if (Super === HyperHTMLElement) break;
          }

          setPrototypeOf(Class, Intermediate);
          setPrototypeOf(proto, Intermediate.prototype);
          customElements.define(name, Class, options);
        } else {
          customElements.define(name, Class);
        }

        classes.push(Class);
        return Class;
      }
    }]);

    return HyperHTMLElement;
  }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));

  HyperHTMLElement.Component = Component;
  HyperHTMLElement.bind = bind;
  HyperHTMLElement.intent = define;
  HyperHTMLElement.wire = wire;
  HyperHTMLElement.hyper = hyper;

  try {
    if (Symbol.hasInstance) classes.push(defineProperty(HyperHTMLElement, Symbol.hasInstance, {
      enumerable: false,
      configurable: true,
      value: function value(instance) {
        return classes.some(isPrototypeOf, getPrototypeOf(instance));
      }
    }));
  } catch (meh) {}
  // DOMContentLoaded VS created() //
  // ------------------------------//

  var dom = {
    type: 'DOMContentLoaded',
    handleEvent: function handleEvent() {
      if (dom.ready()) {
        document.removeEventListener(dom.type, dom, false);
        dom.list.splice(0).forEach(invoke);
      } else setTimeout(dom.handleEvent);
    },
    ready: function ready() {
      return document.readyState === 'complete';
    },
    list: []
  };

  if (!dom.ready()) {
    document.addEventListener(dom.type, dom, false);
  }

  function checkReady(created, attributes, booleanAttributes) {
    if (dom.ready() || isReady.call(this, created, attributes, booleanAttributes)) {
      if (this._init$) {
        var list = this._init$$ || [];
        delete this._init$$;
        var self = defineProperty(this, '_init$', {
          value: false
        });
        booleanAttributes.forEach(function (name) {
          if (self.getAttribute(name) === 'false') self.removeAttribute(name);
        });
        attributes.forEach(function (name) {
          if (self.hasOwnProperty(name)) {
            var curr = self[name];
            delete self[name];
            list.unshift(function () {
              self[name] = curr;
            });
          }
        });
        created.call(self);
        list.forEach(invoke);
      }
    } else {
      if (!this.hasOwnProperty('_init$$')) defineProperty(this, '_init$$', {
        configurable: true,
        value: []
      });
      dom.list.push(checkReady.bind(this, created, attributes, booleanAttributes));
    }
  }

  function invoke(fn) {
    fn();
  }

  function isPrototypeOf(Class) {
    return this === Class.prototype;
  }

  function isReady(created, attributes, booleanAttributes) {
    var el = this;

    do {
      if (el.nextSibling) return true;
    } while (el = el.parentNode);

    setTimeout(checkReady.bind(this, created, attributes, booleanAttributes));
    return false;
  }

  exports['default'] = HyperHTMLElement;

  Object.defineProperty(exports, '__esModule', { value: true });

  return exports["default"];

}({}));


================================================
FILE: esm/index.d.ts
================================================
import HyperHTMLElement from "..";
export * from '..';
export default HyperHTMLElement;

================================================
FILE: esm/index.js
================================================
/*! (C) 2017-2018 Andrea Giammarchi - ISC Style License */

import {Component, bind, define, hyper, wire} from 'hyperhtml';

// utils to deal with custom elements builtin extends
const ATTRIBUTE_CHANGED_CALLBACK = 'attributeChangedCallback';
const O = Object;
const classes = [];
const defineProperty = O.defineProperty;
const getOwnPropertyDescriptor = O.getOwnPropertyDescriptor;
const getOwnPropertyNames = O.getOwnPropertyNames;
/* istanbul ignore next */
const getOwnPropertySymbols = O.getOwnPropertySymbols || (() => []);
/* istanbul ignore next */
const getPrototypeOf = O.getPrototypeOf || (o => o.__proto__);
/* istanbul ignore next */
const ownKeys = typeof Reflect === 'object' && Reflect.ownKeys ||
                (o => getOwnPropertyNames(o).concat(getOwnPropertySymbols(o)));
/* istanbul ignore next */
const setPrototypeOf = O.setPrototypeOf ||
                      ((o, p) => (o.__proto__ = p, o));
/* istanbul ignore stop */
const camel = name => name.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase());
const {attachShadow} = HTMLElement.prototype;
const sr = new WeakMap;

class HyperHTMLElement extends HTMLElement {

  // define a custom-element in the CustomElementsRegistry
  // class MyEl extends HyperHTMLElement {}
  // MyEl.define('my-el');
  static define(name, options) {
    const Class = this;
    const proto = Class.prototype;

    const onChanged = proto[ATTRIBUTE_CHANGED_CALLBACK];
    const hasChange = !!onChanged;

    // Class.booleanAttributes
    // -----------------------------------------------
    // attributes defined as boolean will have
    // an either available or not available attribute
    // regardless of the value.
    // All falsy values, or "false", mean attribute removed
    // while truthy values will be set as is.
    // Boolean attributes are also automatically observed.
    const booleanAttributes = Class.booleanAttributes || [];
    booleanAttributes.forEach(attribute => {
      const name = camel(attribute);
      if (!(name in proto)) defineProperty(
        proto,
        name,
        {
          configurable: true,
          get() {
            return this.hasAttribute(attribute);
          },
          set(value) {
            if (!value || value === 'false')
              this.removeAttribute(attribute);
            else
              this.setAttribute(attribute, '');
          }
        }
      );
    });

    // Class.observedAttributes
    // -------------------------------------------------------
    // HyperHTMLElement will directly reflect get/setAttribute
    // operation once these attributes are used, example:
    // el.observed = 123;
    // will automatically do
    // el.setAttribute('observed', 123);
    // triggering also the attributeChangedCallback
    const observedAttributes = (Class.observedAttributes || []).filter(
      attribute => booleanAttributes.indexOf(attribute) < 0
    );
    observedAttributes.forEach(attribute => {
      // it is possible to redefine the behavior at any time
      // simply overwriting get prop() and set prop(value)
      const name = camel(attribute);
      if (!(name in proto)) defineProperty(
        proto,
        name,
        {
          configurable: true,
          get() {
            return this.getAttribute(attribute);
          },
          set(value) {
            if (value == null)
              this.removeAttribute(attribute);
            else
              this.setAttribute(attribute, value);
          }
        }
      );
    });

    // if these are defined, overwrite the observedAttributes getter
    // to include also booleanAttributes
    const attributes = booleanAttributes.concat(observedAttributes);
    if (attributes.length)
      defineProperty(Class, 'observedAttributes', {
        get() { return attributes; }
      });

    // created() {}
    // ---------------------------------
    // an initializer method that grants
    // the node is fully known to the browser.
    // It is ensured to run either after DOMContentLoaded,
    // or once there is a next sibling (stream-friendly) so that
    // you have full access to element attributes and/or childNodes.
    const created = proto.created || function () {
      this.render();
    };

    // used to ensure create() is called once and once only
    defineProperty(
      proto,
      '_init$',
      {
        configurable: true,
        writable: true,
        value: true
      }
    );

    defineProperty(
      proto,
      ATTRIBUTE_CHANGED_CALLBACK,
      {
        configurable: true,
        value: function aCC(name, prev, curr) {
          if (this._init$) {
            checkReady.call(this, created, attributes, booleanAttributes);
            if (this._init$)
              return this._init$$.push(aCC.bind(this, name, prev, curr));
          }
          // ensure setting same value twice
          // won't trigger twice attributeChangedCallback
          if (hasChange && prev !== curr) {
            onChanged.apply(this, arguments);
          }
        }
      }
    );

    const onConnected = proto.connectedCallback;
    const hasConnect = !!onConnected;
    defineProperty(
      proto,
      'connectedCallback',
      {
        configurable: true,
        value: function cC() {
          if (this._init$) {
            checkReady.call(this, created, attributes, booleanAttributes);
            if (this._init$)
              return this._init$$.push(cC.bind(this));
          }
          if (hasConnect) {
            onConnected.apply(this, arguments);
          }
        }
      }
    );

    // define lazily all handlers
    // class { handleClick() { ... }
    // render() { `<a onclick=${this.handleClick}>` } }
    getOwnPropertyNames(proto).forEach(key => {
      if (/^handle[A-Z]/.test(key)) {
        const _key$ = '_' + key + '$';
        const method = proto[key];
        defineProperty(proto, key, {
          configurable: true,
          get() {
            return  this[_key$] ||
                    (this[_key$] = method.bind(this));
          }
        });
      }
    });

    // whenever you want to directly use the component itself
    // as EventListener, you can pass it directly.
    // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
    //  class Reactive extends HyperHTMLElement {
    //    oninput(e) { console.log(this, 'changed', e.target.value); }
    //    render() { this.html`<input oninput="${this}">`; }
    //  }
    if (!('handleEvent' in proto)) {
      defineProperty(
        proto,
        'handleEvent',
        {
          configurable: true,
          value(event) {
            this[
              (event.currentTarget.dataset || {}).call ||
              ('on' + event.type)
            ](event);
          }
        }
      );
    }

    if (options && options.extends) {
      const Native = document.createElement(options.extends).constructor;
      const Intermediate = class extends Native {};
      const ckeys = ['length', 'name', 'arguments', 'caller', 'prototype'];
      const pkeys = [];
      let Super = null;
      let BaseClass = Class;
      while (Super = getPrototypeOf(BaseClass)) {
        [
          {target: Intermediate, base: Super, keys: ckeys},
          {target: Intermediate.prototype, base: Super.prototype, keys: pkeys}
        ]
        .forEach(({target, base, keys}) => {
          ownKeys(base)
            .filter(key => keys.indexOf(key) < 0)
            .forEach((key) => {
              keys.push(key);
              defineProperty(
                target,
                key,
                getOwnPropertyDescriptor(base, key)
              );
            });
        });

        BaseClass = Super;
        if (Super === HyperHTMLElement)
          break;
      }
      setPrototypeOf(Class, Intermediate);
      setPrototypeOf(proto, Intermediate.prototype);
      customElements.define(name, Class, options);
    } else {
      customElements.define(name, Class);
    }
    classes.push(Class);
    return Class;
  }

  // weakly relate the shadowRoot for refs usage
  attachShadow() {
    const shadowRoot = attachShadow.apply(this, arguments);
    sr.set(this, shadowRoot);
    return shadowRoot;
  }

  // returns elements by ref
  get refs() {
    const value = {};
    if ('_html$' in this) {
      const all = (sr.get(this) || this).querySelectorAll('[ref]');
      for (let {length} = all, i = 0; i < length; i++) {
        const node = all[i];
        value[node.getAttribute('ref')] = node;
      }
      Object.defineProperty(this, 'refs', {value});
      return value;
    }
    return value;
  }

  // lazily bind once hyperHTML logic
  // to either the shadowRoot, if present and open,
  // the _shadowRoot property, if set due closed shadow root,
  // or the custom-element itself if no Shadow DOM is used.
  get html() {
    return this._html$ || (this.html = bind(
      // in a way or another, bind to the right node
      // backward compatible, first two could probably go already
      this.shadowRoot || this._shadowRoot || sr.get(this) || this
    ));
  }

  // it can be set too if necessary, it won't invoke render()
  set html(value) {
    defineProperty(this, '_html$', {configurable: true, value: value});
  }

  // overwrite this method with your own render
  render() {}

  // ---------------------//
  // Basic State Handling //
  // ---------------------//

  // define the default state object
  // you could use observed properties too
  get defaultState() { return {}; }

  // the state with a default
  get state() {
    return this._state$ || (this.state = this.defaultState);
  }

  // it can be set too if necessary, it won't invoke render()
  set state(value) {
    defineProperty(this, '_state$', {configurable: true, value: value});
  }

  // currently a state is a shallow copy, like in Preact or other libraries.
  // after the state is updated, the render() method will be invoked.
  // ⚠️ do not ever call this.setState() inside this.render()
  setState(state, render) {
    const target = this.state;
    const source = typeof state === 'function' ? state.call(this, target) : state;
    for (const key in source) target[key] = source[key];
    if (render !== false) this.render();
    return this;
  }

};

// exposing hyperHTML utilities
HyperHTMLElement.Component = Component;
HyperHTMLElement.bind = bind;
HyperHTMLElement.intent = define;
HyperHTMLElement.wire = wire;
HyperHTMLElement.hyper = hyper;

try {
  if (Symbol.hasInstance) classes.push(
    defineProperty(HyperHTMLElement, Symbol.hasInstance, {
      enumerable: false,
      configurable: true,
      value(instance) {
        return classes.some(isPrototypeOf, getPrototypeOf(instance));
      }
    }));
} catch(meh) {}

export default HyperHTMLElement;

// ------------------------------//
// DOMContentLoaded VS created() //
// ------------------------------//
const dom = {
  type: 'DOMContentLoaded',
  handleEvent() {
    if (dom.ready()) {
      document.removeEventListener(dom.type, dom, false);
      dom.list.splice(0).forEach(invoke);
    }
    else
      setTimeout(dom.handleEvent);
  },
  ready() {
    return document.readyState === 'complete';
  },
  list: []
};

if (!dom.ready()) {
  document.addEventListener(dom.type, dom, false);
}

function checkReady(created, attributes, booleanAttributes) {
  if (dom.ready() || isReady.call(this, created, attributes, booleanAttributes)) {
    if (this._init$) {
      const list = this._init$$ || [];
      delete this._init$$;
      const self = defineProperty(this, '_init$', {value: false});
      booleanAttributes.forEach(name => {
        if (self.getAttribute(name) === 'false')
          self.removeAttribute(name);
      });
      attributes.forEach(name => {
        if (self.hasOwnProperty(name)) {
          const curr = self[name];
          delete self[name];
          list.unshift(() => { self[name] = curr; });
        }
      });
      created.call(self);
      list.forEach(invoke);
    }
  } else {
    if (!this.hasOwnProperty('_init$$'))
      defineProperty(this, '_init$$', {configurable: true, value: []});
    dom.list.push(checkReady.bind(this, created, attributes, booleanAttributes));
  }
}

function invoke(fn) {
  fn();
}

function isPrototypeOf(Class) {
  return this === Class.prototype;
}

function isReady(created, attributes, booleanAttributes) {
  let el = this;
  do { if (el.nextSibling) return true; }
  while (el = el.parentNode);
  setTimeout(checkReady.bind(this, created, attributes, booleanAttributes));
  return false;
}


================================================
FILE: esm.config.js
================================================
import resolve from 'rollup-plugin-node-resolve';

export default {
  input: 'esm/index.js',
  plugins: [
    resolve({
      module: true
    })
  ],
  context: 'null',
  moduleContext: 'null',
  output: {
    exports: 'named',
    file: 'index.js',
    format: 'iife',
    name: 'HyperHTMLElement'
  }
};


================================================
FILE: index.d.ts
================================================
import { bind, hyper, wire, define, Component, WiredTemplateFunction } from "hyperhtml";

interface HyperHTMLElement<T = {}> extends HTMLElement {
    onabort(ev: UIEvent): void;
    onactivate(this: HTMLElement, ev: Event): any;
    onbeforeactivate(this: HTMLElement, ev: Event): any;
    onbeforecopy(this: HTMLElement, ev: Event): any;
    onbeforecut(this: HTMLElement, ev: Event): any;
    onbeforedeactivate(this: HTMLElement, ev: Event): any;
    onbeforepaste(this: HTMLElement, ev: Event): any;
    onblur(ev: FocusEvent): void;
    oncanplay(ev: Event): void;
    oncanplaythrough(ev: Event): void;
    onchange(ev: Event): void;
    onclick(ev: MouseEvent): void;
    oncontextmenu(ev: PointerEvent): void;
    oncopy(ev: ClipboardEvent): void;
    oncuechange(ev: Event): void;
    oncut(ev: ClipboardEvent): void;
    ondblclick(ev: MouseEvent): void;
    ondeactivate(this: HTMLElement, ev: Event): any;
    ondrag(ev: DragEvent): void;
    ondragend(ev: DragEvent): void;
    ondragenter(ev: DragEvent): void;
    ondragleave(ev: DragEvent): void;
    ondragover(ev: DragEvent): void;
    ondragstart(ev: DragEvent): void;
    ondrop(ev: DragEvent): void;
    ondurationchange(ev: Event): void;
    onemptied(ev: Event): void;
    onended(this: HTMLElement, ev: Event): any;
    onerror(ev: ErrorEvent): void;
    onfocus(ev: FocusEvent): void;
    oninput(ev: Event): void;
    oninvalid(ev: Event): void;
    onkeydown(ev: KeyboardEvent): void;
    onkeypress(ev: KeyboardEvent): void;
    onkeyup(ev: KeyboardEvent): void;
    onload(ev: Event): void;
    onloadeddata(ev: Event): void;
    onloadedmetadata(ev: Event): void;
    onloadstart(ev: Event): void;
    onmousedown(ev: MouseEvent): void;
    onmouseenter(ev: MouseEvent): void;
    onmouseleave(ev: MouseEvent): void;
    onmousemove(ev: MouseEvent): void;
    onmouseout(ev: MouseEvent): void;
    onmouseover(ev: MouseEvent): void;
    onmouseup(ev: MouseEvent): void;
    onmousewheel(ev: WheelEvent): void;
    onmscontentzoom(this: HTMLElement, ev: Event): any;
    onmsmanipulationstatechanged(ev: Event): void;
    onpaste(ev: ClipboardEvent): void;
    onpause(ev: Event): void;
    onplay(ev: Event): void;
    onplaying(ev: Event): void;
    onprogress(ev: ProgressEvent): void;
    onratechange(ev: Event): void;
    onreset(ev: Event): void;
    onscroll(ev: UIEvent): void;
    onseeked(ev: Event): void;
    onseeking(ev: Event): void;
    onselect(ev: UIEvent): void;
    onselectstart(ev: Event): void;
    onstalled(ev: Event): void;
    onsubmit(ev: Event): void;
    onsuspend(ev: Event): void;
    ontimeupdate(ev: Event): void;
    onvolumechange(ev: Event): void;
    onwaiting(ev: Event): void;
 }

declare class HyperHTMLElement<T = {}> {
   static readonly observedAttributes: string[];
   constructor();
   created(): void;
   attributeChangedCallback(name: string, prev: string, curr: string): void;
   handleEvent(ev: Event): void;
   html: WiredTemplateFunction;
   state: T;
   get defaultState(): T;
   render(): void;
   setState(state: Partial<T> | ((this: this, state: T) => Partial<T>)): void;
   static bind: typeof bind;
   static Component: typeof Component;
   static intent: typeof define;
   static hyper: typeof hyper;
   static wire: typeof wire;
   static define(name: string, options?: ElementDefinitionOptions): void;
}

export default HyperHTMLElement;


================================================
FILE: index.js
================================================
var HyperHTMLElement = (function (exports) {
  'use strict';

  /*! (c) Andrea Giammarchi - ISC */
  var self$3 = {};
  try { self$3.WeakMap = WeakMap; }
  catch (WeakMap) {
    // this could be better but 90% of the time
    // it's everything developers need as fallback
    self$3.WeakMap = (function (id, Object) {    var dP = Object.defineProperty;
      var hOP = Object.hasOwnProperty;
      var proto = WeakMap.prototype;
      proto.delete = function (key) {
        return this.has(key) && delete key[this._];
      };
      proto.get = function (key) {
        return this.has(key) ? key[this._] : void 0;
      };
      proto.has = function (key) {
        return hOP.call(key, this._);
      };
      proto.set = function (key, value) {
        dP(key, this._, {configurable: true, value: value});
        return this;
      };
      return WeakMap;
      function WeakMap(iterable) {
        dP(this, '_', {value: '_@ungap/weakmap' + id++});
        if (iterable)
          iterable.forEach(add, this);
      }
      function add(pair) {
        this.set(pair[0], pair[1]);
      }
    }(Math.random(), Object));
  }
  var WeakMap$1 = self$3.WeakMap;

  /*! (c) Andrea Giammarchi - ISC */
  var self$2 = {};
  try { self$2.WeakSet = WeakSet; }
  catch (WeakSet) {
    (function (id, dP) {
      var proto = WeakSet.prototype;
      proto.add = function (object) {
        if (!this.has(object))
          dP(object, this._, {value: true, configurable: true});
        return this;
      };
      proto.has = function (object) {
        return this.hasOwnProperty.call(object, this._);
      };
      proto.delete = function (object) {
        return this.has(object) && delete object[this._];
      };
      self$2.WeakSet = WeakSet;
      function WeakSet() {      dP(this, '_', {value: '_@ungap/weakmap' + id++});
      }
    }(Math.random(), Object.defineProperty));
  }
  var WeakSet$1 = self$2.WeakSet;

  const {indexOf: indexOf$1, slice: slice$1} = [];

  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 :
          indexOf$1.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;
      }
    }
    /* istanbul ignore else */
    else if (futureChanges < currentChanges) {
      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;
  };

  /*! (c) Andrea Giammarchi - ISC */
  var self$1 = {};
  self$1.CustomEvent = typeof CustomEvent === 'function' ?
    CustomEvent :
    (function (__p__) {
      CustomEvent[__p__] = new CustomEvent('').constructor[__p__];
      return CustomEvent;
      function CustomEvent(type, init) {
        if (!init) init = {};
        var e = document.createEvent('CustomEvent');
        e.initCustomEvent(type, !!init.bubbles, !!init.cancelable, init.detail);
        return e;
      }
    }('prototype'));
  var CustomEvent$1 = self$1.CustomEvent;

  /*! (c) Andrea Giammarchi - ISC */
  var self = {};
  try { self.Map = Map; }
  catch (Map) {
    self.Map = function Map() {
      var i = 0;
      var k = [];
      var v = [];
      return {
        delete: function (key) {
          var had = contains(key);
          if (had) {
            k.splice(i, 1);
            v.splice(i, 1);
          }
          return had;
        },
        forEach: function forEach(callback, context) {
          k.forEach(
            function (key, i)  {
              callback.call(context, v[i], key, this);
            },
            this
          );
        },
        get: function get(key) {
          return contains(key) ? v[i] : void 0;
        },
        has: function has(key) {
          return contains(key);
        },
        set: function set(key, value) {
          v[contains(key) ? i : (k.push(key) - 1)] = value;
          return this;
        }
      };
      function contains(v) {
        i = k.indexOf(v);
        return -1 < i;
      }
    };
  }
  var Map$1 = self.Map;

  // hyperHTML.Component is a very basic class
  // able to create Custom Elements like components
  // including the ability to listen to connect/disconnect
  // events via onconnect/ondisconnect attributes
  // Components can be created imperatively or declaratively.
  // The main difference is that declared components
  // will not automatically render on setState(...)
  // to simplify state handling on render.
  function Component() {
    return this; // this is needed in Edge !!!
  }

  // Component is lazily setup because it needs
  // wire mechanism as lazy content
  function setup(content) {
    // there are various weakly referenced variables in here
    // and mostly are to use Component.for(...) static method.
    const children = new WeakMap$1;
    const create = Object.create;
    const createEntry = (wm, id, component) => {
      wm.set(id, component);
      return component;
    };
    const get = (Class, info, context, id) => {
      const relation = info.get(Class) || relate(Class, info);
      switch (typeof id) {
        case 'object':
        case 'function':
          const wm = relation.w || (relation.w = new WeakMap$1);
          return wm.get(id) || createEntry(wm, id, new Class(context));
        default:
          const sm = relation.p || (relation.p = create(null));
          return sm[id] || (sm[id] = new Class(context));
      }
    };
    const relate = (Class, info) => {
      const relation = {w: null, p: null};
      info.set(Class, relation);
      return relation;
    };
    const set = context => {
      const info = new Map$1;
      children.set(context, info);
      return info;
    };
    // The Component Class
    Object.defineProperties(
      Component,
      {
        // Component.for(context[, id]) is a convenient way
        // to automatically relate data/context to children components
        // If not created yet, the new Component(context) is weakly stored
        // and after that same instance would always be returned.
        for: {
          configurable: true,
          value(context, id) {
            return get(
              this,
              children.get(context) || set(context),
              context,
              id == null ?
                'default' : id
            );
          }
        }
      }
    );
    Object.defineProperties(
      Component.prototype,
      {
        // all events are handled with the component as context
        handleEvent: {value(e) {
          const ct = e.currentTarget;
          this[
            ('getAttribute' in ct && ct.getAttribute('data-call')) ||
            ('on' + e.type)
          ](e);
        }},
        // components will lazily define html or svg properties
        // as soon as these are invoked within the .render() method
        // Such render() method is not provided by the base class
        // but it must be available through the Component extend.
        // Declared components could implement a
        // render(props) method too and use props as needed.
        html: lazyGetter('html', content),
        svg: lazyGetter('svg', content),
        // the state is a very basic/simple mechanism inspired by Preact
        state: lazyGetter('state', function () { return this.defaultState; }),
        // it is possible to define a default state that'd be always an object otherwise
        defaultState: {get() { return {}; }},
        // dispatch a bubbling, cancelable, custom event
        // through the first known/available node
        dispatch: {value(type, detail) {
          const {_wire$} = this;
          if (_wire$) {
            const event = new CustomEvent$1(type, {
              bubbles: true,
              cancelable: true,
              detail
            });
            event.component = this;
            return (_wire$.dispatchEvent ?
                      _wire$ :
                      _wire$.firstChild
                    ).dispatchEvent(event);
          }
          return false;
        }},
        // setting some property state through a new object
        // or a callback, triggers also automatically a render
        // unless explicitly specified to not do so (render === false)
        setState: {value(state, render) {
          const target = this.state;
          const source = typeof state === 'function' ? state.call(this, target) : state;
          for (const key in source) target[key] = source[key];
          if (render !== false)
            this.render();
          return this;
        }}
      }
    );
  }

  // instead of a secret key I could've used a WeakMap
  // However, attaching a property directly will result
  // into better performance with thousands of components
  // hanging around, and less memory pressure caused by the WeakMap
  const lazyGetter = (type, fn) => {
    const secret = '_' + type + '$';
    return {
      get() {
        return this[secret] || setValue(this, secret, fn.call(this, type));
      },
      set(value) {
        setValue(this, secret, value);
      }
    };
  };

  // shortcut to set value on get or set(value)
  const setValue = (self, secret, value) =>
    Object.defineProperty(self, secret, {
      configurable: true,
      value: typeof value === 'function' ?
        function () {
          return (self._wire$ = value.apply(this, arguments));
        } :
        value
    })[secret]
  ;

  Object.defineProperties(
    Component.prototype,
    {
      // used to distinguish better than instanceof
      ELEMENT_NODE: {value: 1},
      nodeType: {value: -1}
    }
  );

  const attributes = {};
  const intents = {};
  const keys = [];
  const hasOwnProperty = intents.hasOwnProperty;

  let length = 0;

  var Intent = {

    // used to invoke right away hyper:attributes
    attributes,

    // hyperHTML.define('intent', (object, update) => {...})
    // can be used to define a third parts update mechanism
    // when every other known mechanism failed.
    // hyper.define('user', info => info.name);
    // hyper(node)`<p>${{user}}</p>`;
    define: (intent, callback) => {
      if (intent.indexOf('-') < 0) {
        if (!(intent in intents)) {
          length = keys.push(intent);
        }
        intents[intent] = callback;
      } else {
        attributes[intent] = callback;
      }
    },

    // this method is used internally as last resort
    // to retrieve a value out of an object
    invoke: (object, callback) => {
      for (let i = 0; i < length; i++) {
        let key = keys[i];
        if (hasOwnProperty.call(object, key)) {
          return intents[key](object[key], callback);
        }
      }
    }
  };

  var isArray = Array.isArray || /* istanbul ignore next */ (function (toString) {
    /* istanbul ignore next */
    var $ = toString.call([]);
    /* istanbul ignore next */
    return function isArray(object) {
      return toString.call(object) === $;
    };
  }({}.toString));

  /*! (c) Andrea Giammarchi - ISC */
  var createContent = (function (document) {  var FRAGMENT = 'fragment';
    var TEMPLATE = 'template';
    var HAS_CONTENT = 'content' in create(TEMPLATE);

    var createHTML = HAS_CONTENT ?
      function (html) {
        var template = create(TEMPLATE);
        template.innerHTML = html;
        return template.content;
      } :
      function (html) {
        var content = create(FRAGMENT);
        var template = create(TEMPLATE);
        var childNodes = null;
        if (/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(html)) {
          var selector = RegExp.$1;
          template.innerHTML = '<table>' + html + '</table>';
          childNodes = template.querySelectorAll(selector);
        } else {
          template.innerHTML = html;
          childNodes = template.childNodes;
        }
        append(content, childNodes);
        return content;
      };

    return function createContent(markup, type) {
      return (type === 'svg' ? createSVG : createHTML)(markup);
    };

    function append(root, childNodes) {
      var length = childNodes.length;
      while (length--)
        root.appendChild(childNodes[0]);
    }

    function create(element) {
      return element === FRAGMENT ?
        document.createDocumentFragment() :
        document.createElementNS('http://www.w3.org/1999/xhtml', element);
    }

    // it could use createElementNS when hasNode is there
    // but this fallback is equally fast and easier to maintain
    // it is also battle tested already in all IE
    function createSVG(svg) {
      var content = create(FRAGMENT);
      var template = create('div');
      template.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>';
      append(content, template.firstChild.childNodes);
      return content;
    }

  }(document));

  /*! (c) Andrea Giammarchi */
  function disconnected(poly) {  var Event = poly.Event;
    var WeakSet = poly.WeakSet;
    var notObserving = true;
    var observer = null;
    return function observe(node) {
      if (notObserving) {
        notObserving = !notObserving;
        observer = new WeakSet;
        startObserving(node.ownerDocument);
      }
      observer.add(node);
      return node;
    };
    function startObserving(document) {
      var connected = new WeakSet;
      var disconnected = new WeakSet;
      try {
        (new MutationObserver(changes)).observe(
          document,
          {subtree: true, childList: true}
        );
      }
      catch(o_O) {
        var timer = 0;
        var records = [];
        var reschedule = function (record) {
          records.push(record);
          clearTimeout(timer);
          timer = setTimeout(
            function () {
              changes(records.splice(timer = 0, records.length));
            },
            0
          );
        };
        document.addEventListener(
          'DOMNodeRemoved',
          function (event) {
            reschedule({addedNodes: [], removedNodes: [event.target]});
          },
          true
        );
        document.addEventListener(
          'DOMNodeInserted',
          function (event) {
            reschedule({addedNodes: [event.target], removedNodes: []});
          },
          true
        );
      }
      function changes(records) {
        for (var
          record,
          length = records.length,
          i = 0; i < length; i++
        ) {
          record = records[i];
          dispatchAll(record.removedNodes, 'disconnected', disconnected, connected);
          dispatchAll(record.addedNodes, 'connected', connected, disconnected);
        }
      }
      function dispatchAll(nodes, type, wsin, wsout) {
        for (var
          node,
          event = new Event(type),
          length = nodes.length,
          i = 0; i < length;
          (node = nodes[i++]).nodeType === 1 &&
          dispatchTarget(node, event, type, wsin, wsout)
        );
      }
      function dispatchTarget(node, event, type, wsin, wsout) {
        if (observer.has(node) && !wsin.has(node)) {
          wsout.delete(node);
          wsin.add(node);
          node.dispatchEvent(event);
          /*
          // The event is not bubbling (perf reason: should it?),
          // hence there's no way to know if
          // stop/Immediate/Propagation() was called.
          // Should DOM Level 0 work at all?
          // I say it's a YAGNI case for the time being,
          // and easy to implement in user-land.
          if (!event.cancelBubble) {
            var fn = node['on' + type];
            if (fn)
              fn.call(node, event);
          }
          */
        }
        for (var
          // apparently is node.children || IE11 ... ^_^;;
          // https://github.com/WebReflection/disconnected/issues/1
          children = node.children || [],
          length = children.length,
          i = 0; i < length;
          dispatchTarget(children[i++], event, type, wsin, wsout)
        );
      }
    }
  }

  /*! (c) Andrea Giammarchi - ISC */
  var importNode = (function (
    document,
    appendChild,
    cloneNode,
    createTextNode,
    importNode
  ) {
    var native = importNode in document;
    // IE 11 has problems with cloning templates:
    // it "forgets" empty childNodes. This feature-detects that.
    var fragment = document.createDocumentFragment();
    fragment[appendChild](document[createTextNode]('g'));
    fragment[appendChild](document[createTextNode](''));
    /* istanbul ignore next */
    var content = native ?
      document[importNode](fragment, true) :
      fragment[cloneNode](true);
    return content.childNodes.length < 2 ?
      function importNode(node, deep) {
        var clone = node[cloneNode]();
        for (var
          /* istanbul ignore next */
          childNodes = node.childNodes || [],
          length = childNodes.length,
          i = 0; deep && i < length; i++
        ) {
          clone[appendChild](importNode(childNodes[i], deep));
        }
        return clone;
      } :
      /* istanbul ignore next */
      (native ?
        document[importNode] :
        function (node, deep) {
          return node[cloneNode](!!deep);
        }
      );
  }(
    document,
    'appendChild',
    'cloneNode',
    'createTextNode',
    'importNode'
  ));

  var trim = ''.trim || /* istanbul ignore next */ function () {
    return String(this).replace(/^\s+|\s+/g, '');
  };

  /*! (c) Andrea Giammarchi - ISC */

  // Custom
  var UID = '-' + Math.random().toFixed(6) + '%';
  //                           Edge issue!

  var UID_IE = false;

  try {
    if (!(function (template, content, tabindex) {
      return content in template && (
        (template.innerHTML = '<p ' + tabindex + '="' + UID + '"></p>'),
        template[content].childNodes[0].getAttribute(tabindex) == UID
      );
    }(document.createElement('template'), 'content', 'tabindex'))) {
      UID = '_dt: ' + UID.slice(1, -1) + ';';
      UID_IE = true;
    }
  } catch(meh) {}

  var UIDC = '<!--' + UID + '-->';

  // DOM
  var COMMENT_NODE = 8;
  var ELEMENT_NODE = 1;
  var TEXT_NODE = 3;

  var SHOULD_USE_TEXT_CONTENT = /^(?:plaintext|script|style|textarea|title|xmp)$/i;
  var VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;

  /*! (c) Andrea Giammarchi - ISC */

  function sanitize (template) {
    return template.join(UIDC)
            .replace(selfClosing, fullClosing)
            .replace(attrSeeker, attrReplacer);
  }

  var spaces = ' \\f\\n\\r\\t';
  var almostEverything = '[^' + spaces + '\\/>"\'=]+';
  var attrName = '[' + spaces + ']+' + almostEverything;
  var tagName = '<([A-Za-z]+[A-Za-z0-9:._-]*)((?:';
  var attrPartials = '(?:\\s*=\\s*(?:\'[^\']*?\'|"[^"]*?"|<[^>]*?>|' + almostEverything.replace('\\/', '') + '))?)';

  var attrSeeker = new RegExp(tagName + attrName + attrPartials + '+)([' + spaces + ']*/?>)', 'g');
  var selfClosing = new RegExp(tagName + attrName + attrPartials + '*)([' + spaces + ']*/>)', 'g');
  var findAttributes = new RegExp('(' + attrName + '\\s*=\\s*)([\'"]?)' + UIDC + '\\2', 'gi');

  function attrReplacer($0, $1, $2, $3) {
    return '<' + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
  }

  function replaceAttributes($0, $1, $2) {
    return $1 + ($2 || '"') + UID + ($2 || '"');
  }

  function fullClosing($0, $1, $2) {
    return VOID_ELEMENTS.test($1) ? $0 : ('<' + $1 + $2 + '></' + $1 + '>');
  }

  var umap = _ => ({
    // 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: key => _.get(key),
    set: (key, value) => (_.set(key, value), value)
  });

  /* istanbul ignore next */
  var normalizeAttributes = UID_IE ?
    function (attributes, parts) {
      var html = parts.join(' ');
      return parts.slice.call(attributes, 0).sort(function (left, right) {
        return html.indexOf(left.name) <= html.indexOf(right.name) ? -1 : 1;
      });
    } :
    function (attributes, parts) {
      return parts.slice.call(attributes, 0);
    }
  ;

  function find(node, path) {
    var length = path.length;
    var i = 0;
    while (i < length)
      node = node.childNodes[path[i++]];
    return node;
  }

  function parse(node, holes, parts, path) {
    var childNodes = node.childNodes;
    var length = childNodes.length;
    var i = 0;
    while (i < length) {
      var child = childNodes[i];
      switch (child.nodeType) {
        case ELEMENT_NODE:
          var childPath = path.concat(i);
          parseAttributes(child, holes, parts, childPath);
          parse(child, holes, parts, childPath);
          break;
        case COMMENT_NODE:
          var textContent = child.textContent;
          if (textContent === UID) {
            parts.shift();
            holes.push(
              // basicHTML or other non standard engines
              // might end up having comments in nodes
              // where they shouldn't, hence this check.
              SHOULD_USE_TEXT_CONTENT.test(node.nodeName) ?
                Text(node, path) :
                Any(child, path.concat(i))
            );
          } else {
            switch (textContent.slice(0, 2)) {
              case '/*':
                if (textContent.slice(-2) !== '*/')
                  break;
              case '\uD83D\uDC7B': // ghost
                node.removeChild(child);
                i--;
                length--;
            }
          }
          break;
        case TEXT_NODE:
          // the following ignore is actually covered by browsers
          // only basicHTML ends up on previous COMMENT_NODE case
          // instead of TEXT_NODE because it knows nothing about
          // special style or textarea behavior
          /* istanbul ignore if */
          if (
            SHOULD_USE_TEXT_CONTENT.test(node.nodeName) &&
            trim.call(child.textContent) === UIDC
          ) {
            parts.shift();
            holes.push(Text(node, path));
          }
          break;
      }
      i++;
    }
  }

  function parseAttributes(node, holes, parts, path) {
    var attributes = node.attributes;
    var cache = [];
    var remove = [];
    var array = normalizeAttributes(attributes, parts);
    var length = array.length;
    var i = 0;
    while (i < length) {
      var attribute = array[i++];
      var direct = attribute.value === UID;
      var sparse;
      if (direct || 1 < (sparse = attribute.value.split(UIDC)).length) {
        var name = attribute.name;
        // the following ignore is covered by IE
        // and the IE9 double viewBox test
        /* istanbul ignore else */
        if (cache.indexOf(name) < 0) {
          cache.push(name);
          var realName = parts.shift().replace(
            direct ?
              /^(?:|[\S\s]*?\s)(\S+?)\s*=\s*('|")?$/ :
              new RegExp(
                '^(?:|[\\S\\s]*?\\s)(' + name + ')\\s*=\\s*(\'|")[\\S\\s]*',
                'i'
              ),
              '$1'
          );
          var value = attributes[realName] ||
                        // the following ignore is covered by browsers
                        // while basicHTML is already case-sensitive
                        /* istanbul ignore next */
                        attributes[realName.toLowerCase()];
          if (direct)
            holes.push(Attr(value, path, realName, null));
          else {
            var skip = sparse.length - 2;
            while (skip--)
              parts.shift();
            holes.push(Attr(value, path, realName, sparse));
          }
        }
        remove.push(attribute);
      }
    }
    length = remove.length;
    i = 0;

    /* istanbul ignore next */
    var cleanValue = 0 < length && UID_IE && !('ownerSVGElement' in node);
    while (i < length) {
      // Edge HTML bug #16878726
      var attr = remove[i++];
      // IE/Edge bug lighterhtml#63 - clean the value or it'll persist
      /* istanbul ignore next */
      if (cleanValue)
        attr.value = '';
      // IE/Edge bug lighterhtml#64 - don't use removeAttributeNode
      node.removeAttribute(attr.name);
    }

    // This is a very specific Firefox/Safari issue
    // but since it should be a not so common pattern,
    // it's probably worth patching regardless.
    // Basically, scripts created through strings are death.
    // You need to create fresh new scripts instead.
    // TODO: is there any other node that needs such nonsense?
    var nodeName = node.nodeName;
    if (/^script$/i.test(nodeName)) {
      // this used to be like that
      // var script = createElement(node, nodeName);
      // then Edge arrived and decided that scripts created
      // through template documents aren't worth executing
      // so it became this ... hopefully it won't hurt in the wild
      var script = document.createElement(nodeName);
      length = attributes.length;
      i = 0;
      while (i < length)
        script.setAttributeNode(attributes[i++].cloneNode(true));
      script.textContent = node.textContent;
      node.parentNode.replaceChild(script, node);
    }
  }

  function Any(node, path) {
    return {
      type: 'any',
      node: node,
      path: path
    };
  }

  function Attr(node, path, name, sparse) {
    return {
      type: 'attr',
      node: node,
      path: path,
      name: name,
      sparse: sparse
    };
  }

  function Text(node, path) {
    return {
      type: 'text',
      node: node,
      path: path
    };
  }

  // globals

  var parsed = umap(new WeakMap$1);

  function createInfo(options, template) {
    var markup = (options.convert || sanitize)(template);
    var transform = options.transform;
    if (transform)
      markup = transform(markup);
    var content = createContent(markup, options.type);
    cleanContent(content);
    var holes = [];
    parse(content, holes, template.slice(0), []);
    return {
      content: content,
      updates: function (content) {
        var updates = [];
        var len = holes.length;
        var i = 0;
        var off = 0;
        while (i < len) {
          var info = holes[i++];
          var node = find(content, info.path);
          switch (info.type) {
            case 'any':
              updates.push({fn: options.any(node, []), sparse: false});
              break;
            case 'attr':
              var sparse = info.sparse;
              var fn = options.attribute(node, info.name, info.node);
              if (sparse === null)
                updates.push({fn: fn, sparse: false});
              else {
                off += sparse.length - 2;
                updates.push({fn: fn, sparse: true, values: sparse});
              }
              break;
            case 'text':
              updates.push({fn: options.text(node), sparse: false});
              node.textContent = '';
              break;
          }
        }
        len += off;
        return function () {
          var length = arguments.length;
          if (len !== (length - 1)) {
            throw new Error(
              (length - 1) + ' values instead of ' + len + '\n' +
              template.join('${value}')
            );
          }
          var i = 1;
          var off = 1;
          while (i < length) {
            var update = updates[i - off];
            if (update.sparse) {
              var values = update.values;
              var value = values[0];
              var j = 1;
              var l = values.length;
              off += l - 2;
              while (j < l)
                value += arguments[i++] + values[j++];
              update.fn(value);
            }
            else
              update.fn(arguments[i++]);
          }
          return content;
        };
      }
    };
  }

  function createDetails(options, template) {
    var info = parsed.get(template) || parsed.set(template, createInfo(options, template));
    return info.updates(importNode.call(document, info.content, true));
  }

  var empty = [];
  function domtagger(options) {
    var previous = empty;
    var updates = cleanContent;
    return function (template) {
      if (previous !== template)
        updates = createDetails(options, (previous = template));
      return updates.apply(null, arguments);
    };
  }

  function cleanContent(fragment) {
    var childNodes = fragment.childNodes;
    var i = childNodes.length;
    while (i--) {
      var child = childNodes[i];
      if (
        child.nodeType !== 1 &&
        trim.call(child.textContent).length === 0
      ) {
        fragment.removeChild(child);
      }
    }
  }

  /*! (c) Andrea Giammarchi - ISC */
  var hyperStyle = (function (){  // from https://github.com/developit/preact/blob/33fc697ac11762a1cb6e71e9847670d047af7ce5/src/varants.js
    var IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;
    var hyphen = /([^A-Z])([A-Z]+)/g;
    return function hyperStyle(node, original) {
      return 'ownerSVGElement' in node ? svg(node, original) : update(node.style, false);
    };
    function ized($0, $1, $2) {
      return $1 + '-' + $2.toLowerCase();
    }
    function svg(node, original) {
      var style;
      if (original)
        style = original.cloneNode(true);
      else {
        node.setAttribute('style', '--hyper:style;');
        style = node.getAttributeNode('style');
      }
      style.value = '';
      node.setAttributeNode(style);
      return update(style, true);
    }
    function toStyle(object) {
      var key, css = [];
      for (key in object)
        css.push(key.replace(hyphen, ized), ':', object[key], ';');
      return css.join('');
    }
    function update(style, isSVG) {
      var oldType, oldValue;
      return function (newValue) {
        var info, key, styleValue, value;
        switch (typeof newValue) {
          case 'object':
            if (newValue) {
              if (oldType === 'object') {
                if (!isSVG) {
                  if (oldValue !== newValue) {
                    for (key in oldValue) {
                      if (!(key in newValue)) {
                        style[key] = '';
                      }
                    }
                  }
                }
              } else {
                if (isSVG)
                  style.value = '';
                else
                  style.cssText = '';
              }
              info = isSVG ? {} : style;
              for (key in newValue) {
                value = newValue[key];
                styleValue = typeof value === 'number' &&
                                    !IS_NON_DIMENSIONAL.test(key) ?
                                    (value + 'px') : value;
                if (!isSVG && /^--/.test(key))
                  info.setProperty(key, styleValue);
                else
                  info[key] = styleValue;
              }
              oldType = 'object';
              if (isSVG)
                style.value = toStyle((oldValue = info));
              else
                oldValue = newValue;
              break;
            }
          default:
            if (oldValue != newValue) {
              oldType = 'string';
              oldValue = newValue;
              if (isSVG)
                style.value = newValue || '';
              else
                style.cssText = newValue || '';
            }
            break;
        }
      };
    }
  }());

  /*! (c) Andrea Giammarchi - ISC */
  var Wire = (function (slice, proto) {

    proto = Wire.prototype;

    proto.ELEMENT_NODE = 1;
    proto.nodeType = 111;

    proto.remove = function (keepFirst) {
      var childNodes = this.childNodes;
      var first = this.firstChild;
      var last = this.lastChild;
      this._ = null;
      if (keepFirst && childNodes.length === 2) {
        last.parentNode.removeChild(last);
      } else {
        var range = this.ownerDocument.createRange();
        range.setStartBefore(keepFirst ? childNodes[1] : first);
        range.setEndAfter(last);
        range.deleteContents();
      }
      return first;
    };

    proto.valueOf = function (forceAppend) {
      var fragment = this._;
      var noFragment = fragment == null;
      if (noFragment)
        fragment = (this._ = this.ownerDocument.createDocumentFragment());
      if (noFragment || forceAppend) {
        for (var n = this.childNodes, i = 0, l = n.length; i < l; i++)
          fragment.appendChild(n[i]);
      }
      return fragment;
    };

    return Wire;

    function Wire(childNodes) {
      var nodes = (this.childNodes = slice.call(childNodes, 0));
      this.firstChild = nodes[0];
      this.lastChild = nodes[nodes.length - 1];
      this.ownerDocument = nodes[0].ownerDocument;
      this._ = null;
    }

  }([].slice));

  // Node.CONSTANTS
  const DOCUMENT_FRAGMENT_NODE = 11;

  // SVG related constants
  const OWNER_SVG_ELEMENT = 'ownerSVGElement';

  // Custom Elements / MutationObserver constants
  const CONNECTED = 'connected';
  const DISCONNECTED = 'dis' + CONNECTED;

  const componentType = Component.prototype.nodeType;
  const wireType = Wire.prototype.nodeType;

  const observe = disconnected({Event: CustomEvent$1, WeakSet: WeakSet$1});

  // returns an intent to explicitly inject content as html
  const asHTML = html => ({html});

  // returns nodes from wires and components
  const asNode = (item, i) => {
    switch (item.nodeType) {
      case wireType:
        // in the Wire case, the content can be
        // removed, post-pended, inserted, or pre-pended and
        // all these cases are handled by domdiff already
        /* istanbul ignore next */
        return (1 / i) < 0 ?
          (i ? item.remove(true) : item.lastChild) :
          (i ? item.valueOf(true) : item.firstChild);
      case componentType:
        return asNode(item.render(), i);
      default:
        return item;
    }
  };

  // returns true if domdiff can handle the value
  const canDiff = value => 'ELEMENT_NODE' in value;

  // borrowed from uhandlers
  // https://github.com/WebReflection/uhandlers
  const booleanSetter = (node, key, oldValue) => newValue => {
    if (oldValue !== !!newValue) {
      if ((oldValue = !!newValue))
        node.setAttribute(key, '');
      else
        node.removeAttribute(key);
    }
  };

  const hyperSetter = (node, name, svg) => svg ?
    value => {
      try {
        node[name] = value;
      }
      catch (nope) {
        node.setAttribute(name, value);
      }
    } :
    value => {
      node[name] = value;
    };

  // when a Promise is used as interpolation value
  // its result must be parsed once resolved.
  // This callback is in charge of understanding what to do
  // with a returned value once the promise is resolved.
  const invokeAtDistance = (value, callback) => {
    callback(value.placeholder);
    if ('text' in value) {
      Promise.resolve(value.text).then(String).then(callback);
    } else if ('any' in value) {
      Promise.resolve(value.any).then(callback);
    } else if ('html' in value) {
      Promise.resolve(value.html).then(asHTML).then(callback);
    } else {
      Promise.resolve(Intent.invoke(value, callback)).then(callback);
    }
  };

  // quick and dirty way to check for Promise/ish values
  const isPromise_ish = value => value != null && 'then' in value;

  // list of attributes that should not be directly assigned
  const readOnly = /^(?:form|list)$/i;

  // reused every slice time
  const slice = [].slice;

  // simplifies text node creation
  const text = (node, text) => node.ownerDocument.createTextNode(text);

  function Tagger(type) {
    this.type = type;
    return domtagger(this);
  }

  Tagger.prototype = {

    // there are four kind of attributes, and related behavior:
    //  * events, with a name starting with `on`, to add/remove event listeners
    //  * special, with a name present in their inherited prototype, accessed directly
    //  * regular, accessed through get/setAttribute standard DOM methods
    //  * style, the only regular attribute that also accepts an object as value
    //    so that you can style=${{width: 120}}. In this case, the behavior has been
    //    fully inspired by Preact library and its simplicity.
    attribute(node, name, original) {
      const isSVG = OWNER_SVG_ELEMENT in node;
      let oldValue;
      // if the attribute is the style one
      // handle it differently from others
      if (name === 'style')
        return hyperStyle(node, original, isSVG);
      // direct accessors for <input .value=${...}> and friends
      else if (name.slice(0, 1) === '.')
        return hyperSetter(node, name.slice(1), isSVG);
      // boolean accessors for <input .value=${...}> and friends
      else if (name.slice(0, 1) === '?')
        return booleanSetter(node, name.slice(1));
      // the name is an event one,
      // add/remove event listeners accordingly
      else if (/^on/.test(name)) {
        let type = name.slice(2);
        if (type === CONNECTED || type === DISCONNECTED) {
          observe(node);
        }
        else if (name.toLowerCase()
          in node) {
          type = type.toLowerCase();
        }
        return newValue => {
          if (oldValue !== newValue) {
            if (oldValue)
              node.removeEventListener(type, oldValue, false);
            oldValue = newValue;
            if (newValue)
              node.addEventListener(type, newValue, false);
          }
        };
      }
      // the attribute is special ('value' in input)
      // and it's not SVG *or* the name is exactly data,
      // in this case assign the value directly
      else if (
        name === 'data' ||
        (!isSVG && name in node && !readOnly.test(name))
      ) {
        return newValue => {
          if (oldValue !== newValue) {
            oldValue = newValue;
            if (node[name] !== newValue && newValue == null) {
              // cleanup on null to avoid silly IE/Edge bug
              node[name] = '';
              node.removeAttribute(name);
            }
            else
              node[name] = newValue;
          }
        };
      }
      else if (name in Intent.attributes) {
        return any => {
          const newValue = Intent.attributes[name](node, any);
          if (oldValue !== newValue) {
            oldValue = newValue;
            if (newValue == null)
              node.removeAttribute(name);
            else
              node.setAttribute(name, newValue);
          }
        };
      }
      // in every other case, use the attribute node as it is
      // update only the value, set it as node only when/if needed
      else {
        let owner = false;
        const attribute = original.cloneNode(true);
        return newValue => {
          if (oldValue !== newValue) {
            oldValue = newValue;
            if (attribute.value !== newValue) {
              if (newValue == null) {
                if (owner) {
                  owner = false;
                  node.removeAttributeNode(attribute);
                }
                attribute.value = newValue;
              } else {
                attribute.value = newValue;
                if (!owner) {
                  owner = true;
                  node.setAttributeNode(attribute);
                }
              }
            }
          }
        };
      }
    },

    // in a hyper(node)`<div>${content}</div>` case
    // everything could happen:
    //  * it's a JS primitive, stored as text
    //  * it's null or undefined, the node should be cleaned
    //  * it's a component, update the content by rendering it
    //  * it's a promise, update the content once resolved
    //  * it's an explicit intent, perform the desired operation
    //  * it's an Array, resolve all values if Promises and/or
    //    update the node with the resulting list of content
    any(node, childNodes) {
      const diffOptions = {node: asNode, before: node};
      const nodeType = OWNER_SVG_ELEMENT in node ? /* istanbul ignore next */ 'svg' : 'html';
      let fastPath = false;
      let oldValue;
      const anyContent = value => {
        switch (typeof value) {
          case 'string':
          case 'number':
          case 'boolean':
            if (fastPath) {
              if (oldValue !== value) {
                oldValue = value;
                childNodes[0].textContent = value;
              }
            } else {
              fastPath = true;
              oldValue = value;
              childNodes = domdiff(
                node.parentNode,
                childNodes,
                [text(node, value)],
                diffOptions
              );
            }
            break;
          case 'function':
            anyContent(value(node));
            break;
          case 'object':
          case 'undefined':
            if (value == null) {
              fastPath = false;
              childNodes = domdiff(
                node.parentNode,
                childNodes,
                [],
                diffOptions
              );
              break;
            }
          default:
            fastPath = false;
            oldValue = value;
            if (isArray(value)) {
              if (value.length === 0) {
                if (childNodes.length) {
                  childNodes = domdiff(
                    node.parentNode,
                    childNodes,
                    [],
                    diffOptions
                  );
                }
              } else {
                switch (typeof value[0]) {
                  case 'string':
                  case 'number':
                  case 'boolean':
                    anyContent({html: value});
                    break;
                  case 'object':
                    if (isArray(value[0])) {
                      value = value.concat.apply([], value);
                    }
                    if (isPromise_ish(value[0])) {
                      Promise.all(value).then(anyContent);
                      break;
                    }
                  default:
                    childNodes = domdiff(
                      node.parentNode,
                      childNodes,
                      value,
                      diffOptions
                    );
                    break;
                }
              }
            } else if (canDiff(value)) {
              childNodes = domdiff(
                node.parentNode,
                childNodes,
                value.nodeType === DOCUMENT_FRAGMENT_NODE ?
                  slice.call(value.childNodes) :
                  [value],
                diffOptions
              );
            } else if (isPromise_ish(value)) {
              value.then(anyContent);
            } else if ('placeholder' in value) {
              invokeAtDistance(value, anyContent);
            } else if ('text' in value) {
              anyContent(String(value.text));
            } else if ('any' in value) {
              anyContent(value.any);
            } else if ('html' in value) {
              childNodes = domdiff(
                node.parentNode,
                childNodes,
                slice.call(
                  createContent(
                    [].concat(value.html).join(''),
                    nodeType
                  ).childNodes
                ),
                diffOptions
              );
            } else if ('length' in value) {
              anyContent(slice.call(value));
            } else {
              anyContent(Intent.invoke(value, anyContent));
            }
            break;
        }
      };
      return anyContent;
    },

    // style or textareas don't accept HTML as content
    // it's pointless to transform or analyze anything
    // different from text there but it's worth checking
    // for possible defined intents.
    text(node) {
      let oldValue;
      const textContent = value => {
        if (oldValue !== value) {
          oldValue = value;
          const type = typeof value;
          if (type === 'object' && value) {
            if (isPromise_ish(value)) {
              value.then(textContent);
            } else if ('placeholder' in value) {
              invokeAtDistance(value, textContent);
            } else if ('text' in value) {
              textContent(String(value.text));
            } else if ('any' in value) {
              textContent(value.any);
            } else if ('html' in value) {
              textContent([].concat(value.html).join(''));
            } else if ('length' in value) {
              textContent(slice.call(value).join(''));
            } else {
              textContent(Intent.invoke(value, textContent));
            }
          } else if (type === 'function') {
            textContent(value(node));
          } else {
            node.textContent = value == null ? '' : value;
          }
        }
      };
      return textContent;
    }
  };

  var isNoOp = typeof document !== 'object';

  var templateLiteral = function (tl) {
    var RAW = 'raw';
    var isBroken = function (UA) {
      return /(Firefox|Safari)\/(\d+)/.test(UA) &&
            !/(Chrom[eium]+|Android)\/(\d+)/.test(UA);
    };
    var broken = isBroken((document.defaultView.navigator || {}).userAgent);
    var FTS = !(RAW in tl) ||
              tl.propertyIsEnumerable(RAW) ||
              !Object.isFrozen(tl[RAW]);
    if (broken || FTS) {
      var forever = {};
      var foreverCache = function (tl) {
        for (var key = '.', i = 0; i < tl.length; i++)
          key += tl[i].length + '.' + tl[i];
        return forever[key] || (forever[key] = tl);
      };
      // Fallback TypeScript shenanigans
      if (FTS)
        templateLiteral = foreverCache;
      // try fast path for other browsers:
      // store the template as WeakMap key
      // and forever cache it only when it's not there.
      // this way performance is still optimal,
      // penalized only when there are GC issues
      else {
        var wm = new WeakMap$1;
        var set = function (tl, unique) {
          wm.set(tl, unique);
          return unique;
        };
        templateLiteral = function (tl) {
          return wm.get(tl) || set(tl, foreverCache(tl));
        };
      }
    } else {
      isNoOp = true;
    }
    return TL(tl);
  };

  function TL(tl) {
    return isNoOp ? tl : templateLiteral(tl);
  }

  function tta (template) {
    var length = arguments.length;
    var args = [TL(template)];
    var i = 1;
    while (i < length)
      args.push(arguments[i++]);
    return args;
  }
  /**
   * best benchmark goes here
   * https://jsperf.com/tta-bench
   * I should probably have an @ungap/template-literal-es too
  export default (...args) => {
    args[0] = unique(args[0]);
    return args;
  };
   */

  // all wires used per each context
  const wires = new WeakMap$1;

  // A wire is a callback used as tag function
  // to lazily relate a generic object to a template literal.
  // hyper.wire(user)`<div id=user>${user.name}</div>`; => the div#user
  // This provides the ability to have a unique DOM structure
  // related to a unique JS object through a reusable template literal.
  // A wire can specify a type, as svg or html, and also an id
  // via html:id or :id convention. Such :id allows same JS objects
  // to be associated to different DOM structures accordingly with
  // the used template literal without losing previously rendered parts.
  const wire = (obj, type) => obj == null ?
    content(type || 'html') :
    weakly(obj, type || 'html');

  // A wire content is a virtual reference to one or more nodes.
  // It's represented by either a DOM node, or an Array.
  // In both cases, the wire content role is to simply update
  // all nodes through the list of related callbacks.
  // In few words, a wire content is like an invisible parent node
  // in charge of updating its content like a bound element would do.
  const content = type => {
    let wire, tagger, template;
    return function () {
      const args = tta.apply(null, arguments);
      if (template !== args[0]) {
        template = args[0];
        tagger = new Tagger(type);
        wire = wireContent(tagger.apply(tagger, args));
      } else {
        tagger.apply(tagger, args);
      }
      return wire;
    };
  };

  // wires are weakly created through objects.
  // Each object can have multiple wires associated
  // and this is thanks to the type + :id feature.
  const weakly = (obj, type) => {
    const i = type.indexOf(':');
    let wire = wires.get(obj);
    let id = type;
    if (-1 < i) {
      id = type.slice(i + 1);
      type = type.slice(0, i) || 'html';
    }
    if (!wire)
      wires.set(obj, wire = {});
    return wire[id] || (wire[id] = content(type));
  };

  // A document fragment loses its nodes 
  // as soon as it is appended into another node.
  // This has the undesired effect of losing wired content
  // on a second render call, because (by then) the fragment would be empty:
  // no longer providing access to those sub-nodes that ultimately need to
  // stay associated with the original interpolation.
  // To prevent hyperHTML from forgetting about a fragment's sub-nodes,
  // fragments are instead returned as an Array of nodes or, if there's only one entry,
  // as a single referenced node which, unlike fragments, will indeed persist
  // wire content throughout multiple renderings.
  // The initial fragment, at this point, would be used as unique reference to this
  // array of nodes or to this single referenced node.
  const wireContent = node => {
    const childNodes = node.childNodes;
    const {length} = childNodes;
    return length === 1 ?
      childNodes[0] :
      (length ? new Wire(childNodes) : node);
  };

  // a weak collection of contexts that
  // are already known to hyperHTML
  const bewitched = new WeakMap$1;

  // better known as hyper.bind(node), the render is
  // the main tag function in charge of fully upgrading
  // or simply updating, contexts used as hyperHTML targets.
  // The `this` context is either a regular DOM node or a fragment.
  function render() {
    const wicked = bewitched.get(this);
    const args = tta.apply(null, arguments);
    if (wicked && wicked.template === args[0]) {
      wicked.tagger.apply(null, args);
    } else {
      upgrade.apply(this, args);
    }
    return this;
  }

  // an upgrade is in charge of collecting template info,
  // parse it once, if unknown, to map all interpolations
  // as single DOM callbacks, relate such template
  // to the current context, and render it after cleaning the context up
  function upgrade(template) {
    const type = OWNER_SVG_ELEMENT in this ? 'svg' : 'html';
    const tagger = new Tagger(type);
    bewitched.set(this, {tagger, template: template});
    this.textContent = '';
    this.appendChild(tagger.apply(null, arguments));
  }

  /*! (c) Andrea Giammarchi (ISC) */

  // all functions are self bound to the right context
  // you can do the following
  // const {bind, wire} = hyperHTML;
  // and use them right away: bind(node)`hello!`;
  const bind = context => render.bind(context);
  const define = Intent.define;
  const tagger = Tagger.prototype;

  hyper.Component = Component;
  hyper.bind = bind;
  hyper.define = define;
  hyper.diff = domdiff;
  hyper.hyper = hyper;
  hyper.observe = observe;
  hyper.tagger = tagger;
  hyper.wire = wire;

  // exported as shared utils
  // for projects based on hyperHTML
  // that don't necessarily need upfront polyfills
  // i.e. those still targeting IE
  hyper._ = {
    WeakMap: WeakMap$1,
    WeakSet: WeakSet$1
  };

  // the wire content is the lazy defined
  // html or svg property of each hyper.Component
  setup(content);

  // by default, hyperHTML is a smart function
  // that "magically" understands what's the best
  // thing to do with passed arguments
  function hyper(HTML) {
    return arguments.length < 2 ?
      (HTML == null ?
        content('html') :
        (typeof HTML === 'string' ?
          hyper.wire(null, HTML) :
          ('raw' in HTML ?
            content('html')(HTML) :
            ('nodeType' in HTML ?
              hyper.bind(HTML) :
              weakly(HTML, 'html')
            )
          )
        )) :
      ('raw' in HTML ?
        content('html') : hyper.wire
      ).apply(null, arguments);
  }

  /*! (C) 2017-2018 Andrea Giammarchi - ISC Style License */

  // utils to deal with custom elements builtin extends
  const ATTRIBUTE_CHANGED_CALLBACK = 'attributeChangedCallback';
  const O = Object;
  const classes = [];
  const defineProperty = O.defineProperty;
  const getOwnPropertyDescriptor = O.getOwnPropertyDescriptor;
  const getOwnPropertyNames = O.getOwnPropertyNames;
  /* istanbul ignore next */
  const getOwnPropertySymbols = O.getOwnPropertySymbols || (() => []);
  /* istanbul ignore next */
  const getPrototypeOf = O.getPrototypeOf || (o => o.__proto__);
  /* istanbul ignore next */
  const ownKeys = typeof Reflect === 'object' && Reflect.ownKeys ||
                  (o => getOwnPropertyNames(o).concat(getOwnPropertySymbols(o)));
  /* istanbul ignore next */
  const setPrototypeOf = O.setPrototypeOf ||
                        ((o, p) => (o.__proto__ = p, o));
  /* istanbul ignore stop */
  const camel = name => name.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase());
  const {attachShadow} = HTMLElement.prototype;
  const sr = new WeakMap;

  class HyperHTMLElement extends HTMLElement {

    // define a custom-element in the CustomElementsRegistry
    // class MyEl extends HyperHTMLElement {}
    // MyEl.define('my-el');
    static define(name, options) {
      const Class = this;
      const proto = Class.prototype;

      const onChanged = proto[ATTRIBUTE_CHANGED_CALLBACK];
      const hasChange = !!onChanged;

      // Class.booleanAttributes
      // -----------------------------------------------
      // attributes defined as boolean will have
      // an either available or not available attribute
      // regardless of the value.
      // All falsy values, or "false", mean attribute removed
      // while truthy values will be set as is.
      // Boolean attributes are also automatically observed.
      const booleanAttributes = Class.booleanAttributes || [];
      booleanAttributes.forEach(attribute => {
        const name = camel(attribute);
        if (!(name in proto)) defineProperty(
          proto,
          name,
          {
            configurable: true,
            get() {
              return this.hasAttribute(attribute);
            },
            set(value) {
              if (!value || value === 'false')
                this.removeAttribute(attribute);
              else
                this.setAttribute(attribute, '');
            }
          }
        );
      });

      // Class.observedAttributes
      // -------------------------------------------------------
      // HyperHTMLElement will directly reflect get/setAttribute
      // operation once these attributes are used, example:
      // el.observed = 123;
      // will automatically do
      // el.setAttribute('observed', 123);
      // triggering also the attributeChangedCallback
      const observedAttributes = (Class.observedAttributes || []).filter(
        attribute => booleanAttributes.indexOf(attribute) < 0
      );
      observedAttributes.forEach(attribute => {
        // it is possible to redefine the behavior at any time
        // simply overwriting get prop() and set prop(value)
        const name = camel(attribute);
        if (!(name in proto)) defineProperty(
          proto,
          name,
          {
            configurable: true,
            get() {
              return this.getAttribute(attribute);
            },
            set(value) {
              if (value == null)
                this.removeAttribute(attribute);
              else
                this.setAttribute(attribute, value);
            }
          }
        );
      });

      // if these are defined, overwrite the observedAttributes getter
      // to include also booleanAttributes
      const attributes = booleanAttributes.concat(observedAttributes);
      if (attributes.length)
        defineProperty(Class, 'observedAttributes', {
          get() { return attributes; }
        });

      // created() {}
      // ---------------------------------
      // an initializer method that grants
      // the node is fully known to the browser.
      // It is ensured to run either after DOMContentLoaded,
      // or once there is a next sibling (stream-friendly) so that
      // you have full access to element attributes and/or childNodes.
      const created = proto.created || function () {
        this.render();
      };

      // used to ensure create() is called once and once only
      defineProperty(
        proto,
        '_init$',
        {
          configurable: true,
          writable: true,
          value: true
        }
      );

      defineProperty(
        proto,
        ATTRIBUTE_CHANGED_CALLBACK,
        {
          configurable: true,
          value: function aCC(name, prev, curr) {
            if (this._init$) {
              checkReady.call(this, created, attributes, booleanAttributes);
              if (this._init$)
                return this._init$$.push(aCC.bind(this, name, prev, curr));
            }
            // ensure setting same value twice
            // won't trigger twice attributeChangedCallback
            if (hasChange && prev !== curr) {
              onChanged.apply(this, arguments);
            }
          }
        }
      );

      const onConnected = proto.connectedCallback;
      const hasConnect = !!onConnected;
      defineProperty(
        proto,
        'connectedCallback',
        {
          configurable: true,
          value: function cC() {
            if (this._init$) {
              checkReady.call(this, created, attributes, booleanAttributes);
              if (this._init$)
                return this._init$$.push(cC.bind(this));
            }
            if (hasConnect) {
              onConnected.apply(this, arguments);
            }
          }
        }
      );

      // define lazily all handlers
      // class { handleClick() { ... }
      // render() { `<a onclick=${this.handleClick}>` } }
      getOwnPropertyNames(proto).forEach(key => {
        if (/^handle[A-Z]/.test(key)) {
          const _key$ = '_' + key + '$';
          const method = proto[key];
          defineProperty(proto, key, {
            configurable: true,
            get() {
              return  this[_key$] ||
                      (this[_key$] = method.bind(this));
            }
          });
        }
      });

      // whenever you want to directly use the component itself
      // as EventListener, you can pass it directly.
      // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
      //  class Reactive extends HyperHTMLElement {
      //    oninput(e) { console.log(this, 'changed', e.target.value); }
      //    render() { this.html`<input oninput="${this}">`; }
      //  }
      if (!('handleEvent' in proto)) {
        defineProperty(
          proto,
          'handleEvent',
          {
            configurable: true,
            value(event) {
              this[
                (event.currentTarget.dataset || {}).call ||
                ('on' + event.type)
              ](event);
            }
          }
        );
      }

      if (options && options.extends) {
        const Native = document.createElement(options.extends).constructor;
        const Intermediate = class extends Native {};
        const ckeys = ['length', 'name', 'arguments', 'caller', 'prototype'];
        const pkeys = [];
        let Super = null;
        let BaseClass = Class;
        while (Super = getPrototypeOf(BaseClass)) {
          [
            {target: Intermediate, base: Super, keys: ckeys},
            {target: Intermediate.prototype, base: Super.prototype, keys: pkeys}
          ]
          .forEach(({target, base, keys}) => {
            ownKeys(base)
              .filter(key => keys.indexOf(key) < 0)
              .forEach((key) => {
                keys.push(key);
                defineProperty(
                  target,
                  key,
                  getOwnPropertyDescriptor(base, key)
                );
              });
          });

          BaseClass = Super;
          if (Super === HyperHTMLElement)
            break;
        }
        setPrototypeOf(Class, Intermediate);
        setPrototypeOf(proto, Intermediate.prototype);
        customElements.define(name, Class, options);
      } else {
        customElements.define(name, Class);
      }
      classes.push(Class);
      return Class;
    }

    // weakly relate the shadowRoot for refs usage
    attachShadow() {
      const shadowRoot = attachShadow.apply(this, arguments);
      sr.set(this, shadowRoot);
      return shadowRoot;
    }

    // returns elements by ref
    get refs() {
      const value = {};
      if ('_html$' in this) {
        const all = (sr.get(this) || this).querySelectorAll('[ref]');
        for (let {length} = all, i = 0; i < length; i++) {
          const node = all[i];
          value[node.getAttribute('ref')] = node;
        }
        Object.defineProperty(this, 'refs', {value});
        return value;
      }
      return value;
    }

    // lazily bind once hyperHTML logic
    // to either the shadowRoot, if present and open,
    // the _shadowRoot property, if set due closed shadow root,
    // or the custom-element itself if no Shadow DOM is used.
    get html() {
      return this._html$ || (this.html = bind(
        // in a way or another, bind to the right node
        // backward compatible, first two could probably go already
        this.shadowRoot || this._shadowRoot || sr.get(this) || this
      ));
    }

    // it can be set too if necessary, it won't invoke render()
    set html(value) {
      defineProperty(this, '_html$', {configurable: true, value: value});
    }

    // overwrite this method with your own render
    render() {}

    // ---------------------//
    // Basic State Handling //
    // ---------------------//

    // define the default state object
    // you could use observed properties too
    get defaultState() { return {}; }

    // the state with a default
    get state() {
      return this._state$ || (this.state = this.defaultState);
    }

    // it can be set too if necessary, it won't invoke render()
    set state(value) {
      defineProperty(this, '_state$', {configurable: true, value: value});
    }

    // currently a state is a shallow copy, like in Preact or other libraries.
    // after the state is updated, the render() method will be invoked.
    // ⚠️ do not ever call this.setState() inside this.render()
    setState(state, render) {
      const target = this.state;
      const source = typeof state === 'function' ? state.call(this, target) : state;
      for (const key in source) target[key] = source[key];
      if (render !== false) this.render();
      return this;
    }

  }
  // exposing hyperHTML utilities
  HyperHTMLElement.Component = Component;
  HyperHTMLElement.bind = bind;
  HyperHTMLElement.intent = define;
  HyperHTMLElement.wire = wire;
  HyperHTMLElement.hyper = hyper;

  try {
    if (Symbol.hasInstance) classes.push(
      defineProperty(HyperHTMLElement, Symbol.hasInstance, {
        enumerable: false,
        configurable: true,
        value(instance) {
          return classes.some(isPrototypeOf, getPrototypeOf(instance));
        }
      }));
  } catch(meh) {}

  // ------------------------------//
  // DOMContentLoaded VS created() //
  // ------------------------------//
  const dom = {
    type: 'DOMContentLoaded',
    handleEvent() {
      if (dom.ready()) {
        document.removeEventListener(dom.type, dom, false);
        dom.list.splice(0).forEach(invoke);
      }
      else
        setTimeout(dom.handleEvent);
    },
    ready() {
      return document.readyState === 'complete';
    },
    list: []
  };

  if (!dom.ready()) {
    document.addEventListener(dom.type, dom, false);
  }

  function checkReady(created, attributes, booleanAttributes) {
    if (dom.ready() || isReady.call(this, created, attributes, booleanAttributes)) {
      if (this._init$) {
        const list = this._init$$ || [];
        delete this._init$$;
        const self = defineProperty(this, '_init$', {value: false});
        booleanAttributes.forEach(name => {
          if (self.getAttribute(name) === 'false')
            self.removeAttribute(name);
        });
        attributes.forEach(name => {
          if (self.hasOwnProperty(name)) {
            const curr = self[name];
            delete self[name];
            list.unshift(() => { self[name] = curr; });
          }
        });
        created.call(self);
        list.forEach(invoke);
      }
    } else {
      if (!this.hasOwnProperty('_init$$'))
        defineProperty(this, '_init$$', {configurable: true, value: []});
      dom.list.push(checkReady.bind(this, created, attributes, booleanAttributes));
    }
  }

  function invoke(fn) {
    fn();
  }

  function isPrototypeOf(Class) {
    return this === Class.prototype;
  }

  function isReady(created, attributes, booleanAttributes) {
    let el = this;
    do { if (el.nextSibling) return true; }
    while (el = el.parentNode);
    setTimeout(checkReady.bind(this, created, attributes, booleanAttributes));
    return false;
  }

  exports['default'] = HyperHTMLElement;

  Object.defineProperty(exports, '__esModule', { value: true });

  return exports.default;

}({}));


================================================
FILE: min.js
================================================
/*! (c) Andrea Giammarchi - ISC */
var HyperHTMLElement=function(e){"use strict";var t={};try{t.WeakMap=WeakMap}catch(e){t.WeakMap=function(e,t){var n=t.defineProperty,r=t.hasOwnProperty,i=o.prototype;return i.delete=function(e){return this.has(e)&&delete e[this._]},i.get=function(e){return this.has(e)?e[this._]:void 0},i.has=function(e){return r.call(e,this._)},i.set=function(e,t){return n(e,this._,{configurable:!0,value:t}),this},o;function o(t){n(this,"_",{value:"_@ungap/weakmap"+e++}),t&&t.forEach(s,this)}function s(e){this.set(e[0],e[1])}}(Math.random(),Object)}var n=t.WeakMap,r={};try{r.WeakSet=WeakSet}catch(e){!function(e,t){var n=i.prototype;function i(){t(this,"_",{value:"_@ungap/weakmap"+e++})}n.add=function(e){return this.has(e)||t(e,this._,{value:!0,configurable:!0}),this},n.has=function(e){return this.hasOwnProperty.call(e,this._)},n.delete=function(e){return this.has(e)&&delete e[this._]},r.WeakSet=i}(Math.random(),Object.defineProperty)}var i=r.WeakSet;const{indexOf:o,slice:s}=[],a=(e,t,n,r,i,s)=>{const a="selectedIndex"in t;let l=a;for(;r<i;){const i=e(n[r],1);if(t.insertBefore(i,s),a&&l&&i.selected){l=!l;let{selectedIndex:e}=t;t.selectedIndex=e<0?r:o.call(t.querySelectorAll("option"),i)}r++}},l=(e,t)=>e==t,c=e=>e,u=(e,t,n,r,i,o,s)=>{const a=o-i;if(a<1)return-1;for(;n-t>=a;){let a=t,l=i;for(;a<n&&l<o&&s(e[a],r[l]);)a++,l++;if(l===o)return t;t=a+1}return-1},h=(e,t,n,r,i)=>n<r?e(t[n],0):0<n?e(t[n-1],-0).nextSibling:i,f=(e,t,n,r)=>{for(;n<r;)v(e(t[n++],-1))},d=(e,t,n)=>{let r=1,i=t;for(;r<i;){const t=(r+i)/2>>>0;n<e[t]?i=t:r=t+1}return r},p=(e,t,n,r,i,o,s,l,c,u,h,p,v)=>{((e,t,n,r,i,o,s,l,c)=>{const u=[],h=e.length;let d=s,p=0;for(;p<h;)switch(e[p++]){case 0:i++,d++;break;case 1:u.push(r[i]),a(t,n,r,i++,i,d<l?t(o[d],0):c);break;case-1:d++}for(p=0;p<h;)switch(e[p++]){case 0:s++;break;case-1:-1<u.indexOf(o[s])?s++:f(t,o,s++,s)}})(((e,t,n,r,i,o,s)=>{const a=n+o,l=[];let c,u,h,f,d,p,v;e:for(c=0;c<=a;c++){if(c>50)return null;for(v=c-1,d=c?l[c-1]:[0,0],p=l[c]=[],u=-c;u<=c;u+=2){for(h=(f=u===-c||u!==c&&d[v+u-1]<d[v+u+1]?d[v+u+1]:d[v+u-1]+1)-u;f<o&&h<n&&s(r[i+f],e[t+h]);)f++,h++;if(f===o&&h===n)break e;p[c+u]=f}}const m=Array(c/2+a/2);let g=m.length-1;for(c=l.length-1;c>=0;c--){for(;f>0&&h>0&&s(r[i+f-1],e[t+h-1]);)m[g--]=0,f--,h--;if(!c)break;v=c-1,d=c?l[c-1]:[0,0],(u=f-h)==-c||u!==c&&d[v+u-1]<d[v+u+1]?(h--,m[g--]=1):(f--,m[g--]=-1)}return m})(n,r,o,s,l,u,p)||((e,t,n,r,i,o,s,a)=>{let l=0,c=r<a?r:a;const u=Array(c++),h=Array(c);h[0]=-1;for(let e=1;e<c;e++)h[e]=s;const f=i.slice(o,s);for(let r=t;r<n;r++){const t=f.indexOf(e[r]);if(-1<t){const e=t+o;-1<(l=d(h,c,e))&&(h[l]=e,u[l]={newi:r,oldi:e,prev:u[l-1]})}}for(l=--c,--s;h[l]>s;)--l;c=a+r-l;const p=Array(c);let v=u[l];for(--n;v;){const{newi:e,oldi:t}=v;for(;n>e;)p[--c]=1,--n;for(;s>t;)p[--c]=-1,--s;p[--c]=0,--n,--s,v=v.prev}for(;n>=t;)p[--c]=1,--n;for(;s>=o;)p[--c]=-1,--s;return p})(n,r,i,o,s,l,c,u),e,t,n,r,s,l,h,v)},v=e=>(e.remove||function(){const{parentNode:e}=this;e&&e.removeChild(this)}).call(e);const m=(e,t,n,r)=>{r||(r={});const i=r.compare||l,o=r.node||c,s=null==r.before?null:o(r.before,0),d=t.length;let v=d,m=0,g=n.length,b=0;for(;m<v&&b<g&&i(t[m],n[b]);)m++,b++;for(;m<v&&b<g&&i(t[v-1],n[g-1]);)v--,g--;const y=m===v,w=b===g;if(y&&w)return n;if(y&&b<g)return a(o,e,n,b,g,h(o,t,m,d,s)),n;if(w&&m<v)return f(o,t,m,v),n;const E=v-m,x=g-b;let N=-1;if(E<x){if(-1<(N=u(n,b,g,t,m,v,i)))return a(o,e,n,b,N,o(t[m],0)),a(o,e,n,N+E,g,h(o,t,v,d,s)),n}else if(x<E&&-1<(N=u(t,m,v,n,b,g,i)))return f(o,t,m,N),f(o,t,N+x,v),n;return E<2||x<2?(a(o,e,n,b,g,o(t[m],0)),f(o,t,m,v),n):E===x&&((e,t,n,r,i,o)=>{for(;r<i&&o(n[r],e[t-1]);)r++,t--;return 0===t})(n,g,t,m,v,i)?(a(o,e,n,b,g,h(o,t,v,d,s)),n):(p(o,e,n,b,g,x,t,m,v,E,d,i,s),n)};var g={};g.CustomEvent="function"==typeof CustomEvent?CustomEvent:function(e){return t.prototype=new t("").constructor.prototype,t;function t(e,t){t||(t={});var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,!!t.bubbles,!!t.cancelable,t.detail),n}}();var b=g.CustomEvent,y={};try{y.Map=Map}catch(e){y.Map=function(){var e=0,t=[],n=[];return{delete:function(i){var o=r(i);return o&&(t.splice(e,1),n.splice(e,1)),o},forEach:function(e,r){t.forEach(function(t,i){e.call(r,n[i],t,this)},this)},get:function(t){return r(t)?n[e]:void 0},has:function(e){return r(e)},set:function(i,o){return n[r(i)?e:t.push(i)-1]=o,this}};function r(n){return-1<(e=t.indexOf(n))}}}var w=y.Map;function E(){return this}const x=(e,t)=>{const n="_"+e+"$";return{get(){return this[n]||N(this,n,t.call(this,e))},set(e){N(this,n,e)}}},N=(e,t,n)=>Object.defineProperty(e,t,{configurable:!0,value:"function"==typeof n?function(){return e._wire$=n.apply(this,arguments)}:n})[t];Object.defineProperties(E.prototype,{ELEMENT_NODE:{value:1},nodeType:{value:-1}});const _={},C={},A=[],k=C.hasOwnProperty;let O=0;var S,$,T={attributes:_,define:(e,t)=>{e.indexOf("-")<0?(e in C||(O=A.push(e)),C[e]=t):_[e]=t},invoke:(e,t)=>{for(let n=0;n<O;n++){let r=A[n];if(k.call(e,r))return C[r](e[r],t)}}},M=Array.isArray||($=(S={}.toString).call([]),function(e){return S.call(e)===$}),j=function(e){var t="fragment",n="content"in i("template")?function(e){var t=i("template");return t.innerHTML=e,t.content}:function(e){var n=i(t),o=i("template"),s=null;if(/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(e)){var a=RegExp.$1;o.innerHTML="<table>"+e+"</table>",s=o.querySelectorAll(a)}else o.innerHTML=e,s=o.childNodes;return r(n,s),n};return function(e,o){return("svg"===o?function(e){var n=i(t),o=i("div");return o.innerHTML='<svg xmlns="http://www.w3.org/2000/svg">'+e+"</svg>",r(n,o.firstChild.childNodes),n}:n)(e)};function r(e,t){for(var n=t.length;n--;)e.appendChild(t[0])}function i(n){return n===t?e.createDocumentFragment():e.createElementNS("http://www.w3.org/1999/xhtml",n)}}(document);var P,L=function(e,t,n,r,i){var o="importNode"in e,s=e.createDocumentFragment();return s.appendChild(e.createTextNode("g")),s.appendChild(e.createTextNode("")),(o?e.importNode(s,!0):s.cloneNode(!0)).childNodes.length<2?function e(t,n){for(var r=t.cloneNode(),i=t.childNodes||[],o=i.length,s=0;n&&s<o;s++)r.appendChild(e(i[s],n));return r}:o?e.importNode:function(e,t){return e.cloneNode(!!t)}}(document),D="".trim||function(){return String(this).replace(/^\s+|\s+/g,"")},W="-"+Math.random().toFixed(6)+"%",R=!1;try{"content"in(P=document.createElement("template"))&&(P.innerHTML='<p tabindex="'+W+'"></p>',P.content.childNodes[0].getAttribute("tabindex")==W)||(W="_dt: "+W.slice(1,-1)+";",R=!0)}catch(e){}var H="\x3c!--"+W+"--\x3e",I=8,F=1,z=3,Z=/^(?:plaintext|script|style|textarea|title|xmp)$/i,V=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;var q=" \\f\\n\\r\\t",G="[^"+q+"\\/>\"'=]+",B="["+q+"]+"+G,K="<([A-Za-z]+[A-Za-z0-9:._-]*)((?:",U="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|"+G.replace("\\/","")+"))?)",J=new RegExp(K+B+U+"+)(["+q+"]*/?>)","g"),Q=new RegExp(K+B+U+"*)(["+q+"]*/>)","g"),X=new RegExp("("+B+"\\s*=\\s*)(['\"]?)"+H+"\\2","gi");function Y(e,t,n,r){return"<"+t+n.replace(X,ee)+r}function ee(e,t,n){return t+(n||'"')+W+(n||'"')}function te(e,t,n){return V.test(t)?e:"<"+t+n+"></"+t+">"}var ne=R?function(e,t){var n=t.join(" ");return t.slice.call(e,0).sort(function(e,t){return n.indexOf(e.name)<=n.indexOf(t.name)?-1:1})}:function(e,t){return t.slice.call(e,0)};function re(e,t){for(var n=t.length,r=0;r<n;)e=e.childNodes[t[r++]];return e}function ie(e,t,n,r){for(var i=e.attributes,o=[],s=[],a=ne(i,n),l=a.length,c=0;c<l;){var u,h=a[c++],f=h.value===W;if(f||1<(u=h.value.split(H)).length){var d=h.name;if(o.indexOf(d)<0){o.push(d);var p=n.shift().replace(f?/^(?:|[\S\s]*?\s)(\S+?)\s*=\s*('|")?$/:new RegExp("^(?:|[\\S\\s]*?\\s)("+d+")\\s*=\\s*('|\")[\\S\\s]*","i"),"$1"),v=i[p]||i[p.toLowerCase()];if(f)t.push(se(v,r,p,null));else{for(var m=u.length-2;m--;)n.shift();t.push(se(v,r,p,u))}}s.push(h)}}c=0;for(var g=(0<(l=s.length)&&R&&!("ownerSVGElement"in e));c<l;){var b=s[c++];g&&(b.value=""),e.removeAttribute(b.name)}var y=e.nodeName;if(/^script$/i.test(y)){var w=document.createElement(y);for(l=i.length,c=0;c<l;)w.setAttributeNode(i[c++].cloneNode(!0));w.textContent=e.textContent,e.parentNode.replaceChild(w,e)}}function oe(e,t){return{type:"any",node:e,path:t}}function se(e,t,n,r){return{type:"attr",node:e,path:t,name:n,sparse:r}}function ae(e,t){return{type:"text",node:e,path:t}}var le=(e=>({get:t=>e.get(t),set:(t,n)=>(e.set(t,n),n)}))(new n);function ce(e,t){var n=(e.convert||function(e){return e.join(H).replace(Q,te).replace(J,Y)})(t),r=e.transform;r&&(n=r(n));var i=j(n,e.type);fe(i);var o=[];return function e(t,n,r,i){for(var o=t.childNodes,s=o.length,a=0;a<s;){var l=o[a];switch(l.nodeType){case F:var c=i.concat(a);ie(l,n,r,c),e(l,n,r,c);break;case I:var u=l.textContent;if(u===W)r.shift(),n.push(Z.test(t.nodeName)?ae(t,i):oe(l,i.concat(a)));else switch(u.slice(0,2)){case"/*":if("*/"!==u.slice(-2))break;case"👻":t.removeChild(l),a--,s--}break;case z:Z.test(t.nodeName)&&D.call(l.textContent)===H&&(r.shift(),n.push(ae(t,i)))}a++}}(i,o,t.slice(0),[]),{content:i,updates:function(n){for(var r=[],i=o.length,s=0,a=0;s<i;){var l=o[s++],c=re(n,l.path);switch(l.type){case"any":r.push({fn:e.any(c,[]),sparse:!1});break;case"attr":var u=l.sparse,h=e.attribute(c,l.name,l.node);null===u?r.push({fn:h,sparse:!1}):(a+=u.length-2,r.push({fn:h,sparse:!0,values:u}));break;case"text":r.push({fn:e.text(c),sparse:!1}),c.textContent=""}}return i+=a,function(){var e=arguments.length;if(i!==e-1)throw new Error(e-1+" values instead of "+i+"\n"+t.join("${value}"));for(var o=1,s=1;o<e;){var a=r[o-s];if(a.sparse){var l=a.values,c=l[0],u=1,h=l.length;for(s+=h-2;u<h;)c+=arguments[o++]+l[u++];a.fn(c)}else a.fn(arguments[o++])}return n}}}}var ue=[];function he(e){var t=ue,n=fe;return function(r){return t!==r&&(n=function(e,t){var n=le.get(t)||le.set(t,ce(e,t));return n.updates(L.call(document,n.content,!0))}(e,t=r)),n.apply(null,arguments)}}function fe(e){for(var t=e.childNodes,n=t.length;n--;){var r=t[n];1!==r.nodeType&&0===D.call(r.textContent).length&&e.removeChild(r)}}var de=function(){var e=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,t=/([^A-Z])([A-Z]+)/g;return function(e,t){return"ownerSVGElement"in e?function(e,t){var n;t?n=t.cloneNode(!0):(e.setAttribute("style","--hyper:style;"),n=e.getAttributeNode("style"));return n.value="",e.setAttributeNode(n),r(n,!0)}(e,t):r(e.style,!1)};function n(e,t,n){return t+"-"+n.toLowerCase()}function r(r,i){var o,s;return function(a){var l,c,u,h;switch(typeof a){case"object":if(a){if("object"===o){if(!i&&s!==a)for(c in s)c in a||(r[c]="")}else i?r.value="":r.cssText="";for(c in l=i?{}:r,a)u="number"!=typeof(h=a[c])||e.test(c)?h:h+"px",!i&&/^--/.test(c)?l.setProperty(c,u):l[c]=u;o="object",i?r.value=function(e){var r,i=[];for(r in e)i.push(r.replace(t,n),":",e[r],";");return i.join("")}(s=l):s=a;break}default:s!=a&&(o="string",s=a,i?r.value=a||"":r.cssText=a||"")}}}}(),pe=function(e,t){return(t=n.prototype).ELEMENT_NODE=1,t.nodeType=111,t.remove=function(e){var t=this.childNodes,n=this.firstChild,r=this.lastChild;if(this._=null,e&&2===t.length)r.parentNode.removeChild(r);else{var i=this.ownerDocument.createRange();i.setStartBefore(e?t[1]:n),i.setEndAfter(r),i.deleteContents()}return n},t.valueOf=function(e){var t=this._,n=null==t;if(n&&(t=this._=this.ownerDocument.createDocumentFragment()),n||e)for(var r=this.childNodes,i=0,o=r.length;i<o;i++)t.appendChild(r[i]);return t},n;function n(t){var n=this.childNodes=e.call(t,0);this.firstChild=n[0],this.lastChild=n[n.length-1],this.ownerDocument=n[0].ownerDocument,this._=null}}([].slice);const ve="ownerSVGElement",me=E.prototype.nodeType,ge=pe.prototype.nodeType,be=function(e){var t=e.Event,n=e.WeakSet,r=!0,i=null;return function(e){return r&&(r=!r,i=new n,function(e){var r=new n,o=new n;try{new MutationObserver(c).observe(e,{subtree:!0,childList:!0})}catch(t){var s=0,a=[],l=function(e){a.push(e),clearTimeout(s),s=setTimeout(function(){c(a.splice(s=0,a.length))},0)};e.addEventListener("DOMNodeRemoved",function(e){l({addedNodes:[],removedNodes:[e.target]})},!0),e.addEventListener("DOMNodeInserted",function(e){l({addedNodes:[e.target],removedNodes:[]})},!0)}function c(e){for(var t,n=e.length,i=0;i<n;i++)u((t=e[i]).removedNodes,"disconnected",o,r),u(t.addedNodes,"connected",r,o)}function u(e,n,r,i){for(var o,s=new t(n),a=e.length,l=0;l<a;1===(o=e[l++]).nodeType&&h(o,s,n,r,i));}function h(e,t,n,r,o){i.has(e)&&!r.has(e)&&(o.delete(e),r.add(e),e.dispatchEvent(t));for(var s=e.children||[],a=s.length,l=0;l<a;h(s[l++],t,n,r,o));}}(e.ownerDocument)),i.add(e),e}}({Event:b,WeakSet:i}),ye=e=>({html:e}),we=(e,t)=>{switch(e.nodeType){case ge:return 1/t<0?t?e.remove(!0):e.lastChild:t?e.valueOf(!0):e.firstChild;case me:return we(e.render(),t);default:return e}},Ee=(e,t)=>{t(e.placeholder),"text"in e?Promise.resolve(e.text).then(String).then(t):"any"in e?Promise.resolve(e.any).then(t):"html"in e?Promise.resolve(e.html).then(ye).then(t):Promise.resolve(T.invoke(e,t)).then(t)},xe=e=>null!=e&&"then"in e,Ne=/^(?:form|list)$/i,_e=[].slice;function Ce(e){return this.type=e,he(this)}Ce.prototype={attribute(e,t,n){const r=ve in e;let i;if("style"===t)return de(e,n,r);if("."===t.slice(0,1))return((e,t,n)=>n?n=>{try{e[t]=n}catch(r){e.setAttribute(t,n)}}:n=>{e[t]=n})(e,t.slice(1),r);if("?"===t.slice(0,1))return((e,t,n)=>r=>{n!==!!r&&((n=!!r)?e.setAttribute(t,""):e.removeAttribute(t))})(e,t.slice(1));if(/^on/.test(t)){let n=t.slice(2);return"connected"===n||"disconnected"===n?be(e):t.toLowerCase()in e&&(n=n.toLowerCase()),t=>{i!==t&&(i&&e.removeEventListener(n,i,!1),i=t,t&&e.addEventListener(n,t,!1))}}if("data"===t||!r&&t in e&&!Ne.test(t))return n=>{i!==n&&(i=n,e[t]!==n&&null==n?(e[t]="",e.removeAttribute(t)):e[t]=n)};if(t in T.attributes)return n=>{const r=T.attributes[t](e,n);i!==r&&(i=r,null==r?e.removeAttribute(t):e.setAttribute(t,r))};{let t=!1;const r=n.cloneNode(!0);return n=>{i!==n&&(i=n,r.value!==n&&(null==n?(t&&(t=!1,e.removeAttributeNode(r)),r.value=n):(r.value=n,t||(t=!0,e.setAttributeNode(r)))))}}},any(e,t){const n={node:we,before:e},r=ve in e?"svg":"html";let i,o=!1;const s=a=>{switch(typeof a){case"string":case"number":case"boolean":o?i!==a&&(i=a,t[0].textContent=a):(o=!0,i=a,t=m(e.parentNode,t,[((e,t)=>e.ownerDocument.createTextNode(t))(e,a)],n));break;case"function":s(a(e));break;case"object":case"undefined":if(null==a){o=!1,t=m(e.parentNode,t,[],n);break}default:if(o=!1,i=a,M(a))if(0===a.length)t.length&&(t=m(e.parentNode,t,[],n));else switch(typeof a[0]){case"string":case"number":case"boolean":s({html:a});break;case"object":if(M(a[0])&&(a=a.concat.apply([],a)),xe(a[0])){Promise.all(a).then(s);break}default:t=m(e.parentNode,t,a,n)}else(e=>"ELEMENT_NODE"in e)(a)?t=m(e.parentNode,t,11===a.nodeType?_e.call(a.childNodes):[a],n):xe(a)?a.then(s):"placeholder"in a?Ee(a,s):"text"in a?s(String(a.text)):"any"in a?s(a.any):"html"in a?t=m(e.parentNode,t,_e.call(j([].concat(a.html).join(""),r).childNodes),n):s("length"in a?_e.call(a):T.invoke(a,s))}};return s},text(e){let t;const n=r=>{if(t!==r){t=r;const i=typeof r;"object"===i&&r?xe(r)?r.then(n):"placeholder"in r?Ee(r,n):n("text"in r?String(r.text):"any"in r?r.any:"html"in r?[].concat(r.html).join(""):"length"in r?_e.call(r).join(""):T.invoke(r,n)):"function"===i?n(r(e)):e.textContent=null==r?"":r}};return n}};var Ae="object"!=typeof document,ke=function(e){var t,r=(t=(document.defaultView.navigator||{}).userAgent,/(Firefox|Safari)\/(\d+)/.test(t)&&!/(Chrom[eium]+|Android)\/(\d+)/.test(t)),i=!("raw"in e)||e.propertyIsEnumerable("raw")||!Object.isFrozen(e.raw);if(r||i){var o={},s=function(e){for(var t=".",n=0;n<e.length;n++)t+=e[n].length+"."+e[n];return o[t]||(o[t]=e)};if(i)ke=s;else{var a=new n;ke=function(e){return a.get(e)||function(e,t){return a.set(e,t),t}(e,s(e))}}}else Ae=!0;return Oe(e)};function Oe(e){return Ae?e:ke(e)}function Se(e){for(var t=arguments.length,n=[Oe(e)],r=1;r<t;)n.push(arguments[r++]);return n}const $e=new n,Te=(e,t)=>null==e?Me(t||"html"):je(e,t||"html"),Me=e=>{let t,n,r;return function(){const i=Se.apply(null,arguments);return r!==i[0]?(r=i[0],n=new Ce(e),t=Pe(n.apply(n,i))):n.apply(n,i),t}},je=(e,t)=>{const n=t.indexOf(":");let r=$e.get(e),i=t;return-1<n&&(i=t.slice(n+1),t=t.slice(0,n)||"html"),r||$e.set(e,r={}),r[i]||(r[i]=Me(t))},Pe=e=>{const t=e.childNodes,{length:n}=t;return 1===n?t[0]:n?new pe(t):e},Le=new n;function De(){const e=Le.get(this),t=Se.apply(null,arguments);return e&&e.template===t[0]?e.tagger.apply(null,t):function(e){const t=new Ce(ve in this?"svg":"html");Le.set(this,{tagger:t,template:e}),this.textContent="",this.appendChild(t.apply(null,arguments))}.apply(this,t),this}const We=e=>De.bind(e),Re=T.define,He=Ce.prototype;function Ie(e){return arguments.length<2?null==e?Me("html"):"string"==typeof e?Ie.wire(null,e):"raw"in e?Me("html")(e):"nodeType"in e?Ie.bind(e):je(e,"html"):("raw"in e?Me("html"):Ie.wire).apply(null,arguments)}Ie.Component=E,Ie.bind=We,Ie.define=Re,Ie.diff=m,Ie.hyper=Ie,Ie.observe=be,Ie.tagger=He,Ie.wire=Te,Ie._={WeakMap:n,WeakSet:i},function(e){const t=new n,r=Object.create,i=(e,t)=>{const n={w:null,p:null};return t.set(e,n),n};Object.defineProperties(E,{for:{configurable:!0,value(e,o){return((e,t,o,s)=>{const a=t.get(e)||i(e,t);switch(typeof s){case"object":case"function":const t=a.w||(a.w=new n);return t.get(s)||((e,t,n)=>(e.set(t,n),n))(t,s,new e(o));default:const i=a.p||(a.p=r(null));return i[s]||(i[s]=new e(o))}})(this,t.get(e)||(e=>{const n=new w;return t.set(e,n),n})(e),e,null==o?"default":o)}}}),Object.defineProperties(E.prototype,{handleEvent:{value(e){const t=e.currentTarget;this["getAttribute"in t&&t.getAttribute("data-call")||"on"+e.type](e)}},html:x("html",e),svg:x("svg",e),state:x("state",function(){return this.defaultState}),defaultState:{get:()=>({})},dispatch:{value(e,t){const{_wire$:n}=this;if(n){const r=new b(e,{bubbles:!0,cancelable:!0,detail:t});return r.component=this,(n.dispatchEvent?n:n.firstChild).dispatchEvent(r)}return!1}},setState:{value(e,t){const n=this.state,r="function"==typeof e?e.call(this,n):e;for(const e in r)n[e]=r[e];return!1!==t&&this.render(),this}}})}(Me);const Fe="attributeChangedCallback",ze=Object,Ze=[],Ve=ze.defineProperty,qe=ze.getOwnPropertyDescriptor,Ge=ze.getOwnPropertyNames,Be=ze.getOwnPropertySymbols||(()=>[]),Ke=ze.getPrototypeOf||(e=>e.__proto__),Ue="object"==typeof Reflect&&Reflect.ownKeys||(e=>Ge(e).concat(Be(e))),Je=ze.setPrototypeOf||((e,t)=>(e.__proto__=t,e)),Qe=e=>e.replace(/-([a-z])/g,(e,t)=>t.toUpperCase()),{attachShadow:Xe}=HTMLElement.prototype,Ye=new WeakMap;class et extends HTMLElement{static define(e,t){const n=this,r=n.prototype,i=r[Fe],o=!!i,s=n.booleanAttributes||[];s.forEach(e=>{const t=Qe(e);t in r||Ve(r,t,{configurable:!0,get(){return this.hasAttribute(e)},set(t){t&&"false"!==t?this.setAttribute(e,""):this.removeAttribute(e)}})});const a=(n.observedAttributes||[]).filter(e=>s.indexOf(e)<0);a.forEach(e=>{const t=Qe(e);t in r||Ve(r,t,{configurable:!0,get(){return this.getAttribute(e)},set(t){null==t?this.removeAttribute(e):this.setAttribute(e,t)}})});const l=s.concat(a);l.length&&Ve(n,"observedAttributes",{get:()=>l});const c=r.created||function(){this.render()};Ve(r,"_init$",{configurable:!0,writable:!0,value:!0}),Ve(r,Fe,{configurable:!0,value:function e(t,n,r){if(this._init$&&(nt.call(this,c,l,s),this._init$))return this._init$$.push(e.bind(this,t,n,r));o&&n!==r&&i.apply(this,arguments)}});const u=r.connectedCallback,h=!!u;if(Ve(r,"connectedCallback",{configurable:!0,value:function e(){if(this._init$&&(nt.call(this,c,l,s),this._init$))return this._init$$.push(e.bind(this));h&&u.apply(this,arguments)}}),Ge(r).forEach(e=>{if(/^handle[A-Z]/.test(e)){const t="_"+e+"$",n=r[e];Ve(r,e,{configurable:!0,get(){return this[t]||(this[t]=n.bind(this))}})}}),"handleEvent"in r||Ve(r,"handleEvent",{configurable:!0,value(e){this[(e.currentTarget.dataset||{}).call||"on"+e.type](e)}}),t&&t.extends){const i=document.createElement(t.extends).constructor,o=class extends i{},s=["length","name","arguments","caller","prototype"],a=[];let l=null,c=n;for(;(l=Ke(c))&&([{target:o,base:l,keys:s},{target:o.prototype,base:l.prototype,keys:a}].forEach(({target:e,base:t,keys:n})=>{Ue(t).filter(e=>n.indexOf(e)<0).forEach(r=>{n.push(r),Ve(e,r,qe(t,r))})}),c=l,l!==et););Je(n,o),Je(r,o.prototype),customElements.define(e,n,t)}else customElements.define(e,n);return Ze.push(n),n}attachShadow(){const e=Xe.apply(this,arguments);return Ye.set(this,e),e}get refs(){const e={};if("_html$"in this){const t=(Ye.get(this)||this).querySelectorAll("[ref]");for(let{length:n}=t,r=0;r<n;r++){const n=t[r];e[n.getAttribute("ref")]=n}return Object.defineProperty(this,"refs",{value:e}),e}return e}get html(){return this._html$||(this.html=We(this.shadowRoot||this._shadowRoot||Ye.get(this)||this))}set html(e){Ve(this,"_html$",{configurable:!0,value:e})}render(){}get defaultState(){return{}}get state(){return this._state$||(this.state=this.defaultState)}set state(e){Ve(this,"_state$",{configurable:!0,value:e})}setState(e,t){const n=this.state,r="function"==typeof e?e.call(this,n):e;for(const e in r)n[e]=r[e];return!1!==t&&this.render(),this}}et.Component=E,et.bind=We,et.intent=Re,et.wire=Te,et.hyper=Ie;try{Symbol.hasInstance&&Ze.push(Ve(et,Symbol.hasInstance,{enumerable:!1,configurable:!0,value:e=>Ze.some(it,Ke(e))}))}catch(e){}const tt={type:"DOMContentLoaded",handleEvent(){tt.ready()?(document.removeEventListener(tt.type,tt,!1),tt.list.splice(0).forEach(rt)):setTimeout(tt.handleEvent)},ready:()=>"complete"===document.readyState,list:[]};function nt(e,t,n){if(tt.ready()||function(e,t,n){let r=this;do{if(r.nextSibling)return!0}while(r=r.parentNode);return setTimeout(nt.bind(this,e,t,n)),!1}.call(this,e,t,n)){if(this._init$){const r=this._init$$||[];delete this._init$$;const i=Ve(this,"_init$",{value:!1});n.forEach(e=>{"false"===i.getAttribute(e)&&i.removeAttribute(e)}),t.forEach(e=>{if(i.hasOwnProperty(e)){const t=i[e];delete i[e],r.unshift(()=>{i[e]=t})}}),e.call(i),r.forEach(rt)}}else this.hasOwnProperty("_init$$")||Ve(this,"_init$$",{configurable:!0,value:[]}),tt.list.push(nt.bind(this,e,t,n))}function rt(e){e()}function it(e){return this===e.prototype}return tt.ready()||document.addEventListener(tt.type,tt,!1),e.default=et,Object.defineProperty(e,"__esModule",{value:!0}),e.default}({});


================================================
FILE: package.json
================================================
{
  "name": "hyperhtml-element",
  "version": "3.15.2",
  "description": "An extensible class to define hyperHTML based Custom Elements",
  "unpkg": "min.js",
  "module": "esm/index.js",
  "main": "cjs/index.js",
  "types": "index.d.ts",
  "scripts": {
    "$": "npm-dollar",
    "build": "npm-dollar build",
    "bundle": "npm-dollar bundle",
    "min": "npm-dollar min",
    "test": "npm-dollar test.default",
    "coverage": "mkdir -p ./coverage; nyc report --reporter=text-lcov > ./coverage/lcov.info"
  },
  "$": {
    "build": [
      "$ bundle",
      "$ test.babel",
      "$ minify",
      "$ size",
      "$ test"
    ],
    "bundle": {
      "cjs": [
        "ascjs ./esm ./cjs"
      ],
      "esm": [
        "rollup --config esm.config.js",
        "$ fix.esm"
      ],
      "es5": [
        "rollup --config es5.config.js",
        "$ fix.es5"
      ]
    },
    "fix": {
      "esm": [
        "sed -i.bak 's/return exports;/return exports.default;/' index.js",
        "rm -f index.js.bak"
      ],
      "es5": [
        "sed -i.bak 's/return exports;/return exports[\"default\"];/' es5.js",
        "rm -f es5.js.bak"
      ]
    },
    "minify": {
      "es6": "echo '/*! (c) Andrea Giammarchi - ISC */' > min.js && uglifyjs index.js --compress --mangle >> min.js",
      "es5": "echo '/*! (c) Andrea Giammarchi - ISC */' > es5.min.js && uglifyjs es5.js --compress --mangle >> es5.min.js"
    },
    "size": {
      "esm": [
        [
          "echo -e '\\x1b[1mSize for ES2015\\x1b[0m'; cat index.js |",
          "wc -c;cat min.js |",
          "wc -c;gzip -c min.js |",
          "wc -c"
        ]
      ],
      "es5": [
        [
          "echo -e '\\x1b[1mSize for ES5\\x1b[0m'; cat es5.js |",
          "wc -c;cat es5.min.js |",
          "wc -c;gzip -c es5.min.js |",
          "wc -c"
        ]
      ]
    },
    "test": {
      "babel": "babel --presets @babel/preset-env test/test.js > test/test.es5.js",
      "default": "nyc node test.js"
    }
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/WebReflection/hyperHTML-Element.git"
  },
  "keywords": [
    "hyperHTML",
    "custom",
    "elements",
    "class"
  ],
  "author": "Andrea Giammarchi",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/WebReflection/hyperHTML-Element/issues"
  },
  "homepage": "https://github.com/WebReflection/hyperHTML-Element#readme",
  "greenkeeper": {
    "ignore": [
      "rollup",
      "rollup-plugin-babel",
      "rollup-plugin-node-resolve"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.15.4",
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "ascjs": "^5.0.1",
    "linkedom": "^0.11.2",
    "npm-dollar": "^2.2.1",
    "nyc": "^15.1.0",
    "rollup": "^2.56.3",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "tressa": "^0.3.1",
    "uglify-es": "^3.3.9"
  },
  "dependencies": {
    "hyperhtml": "^2.34.0"
  }
}


================================================
FILE: test/boolean.html
================================================
<!doctype html>
<html lang="en">
<head>
    <script>document.write(
        '<script src="../' + (location.search.toLocaleLowerCase() === '?es5' ? 'es5' : 'index') + '.js?_=' +
        Math.random() + '"><' + '/script>');</script>
    <script>document.write(
        '<script src="' + (location.search.toLocaleLowerCase() === '?es5' ? 'test.es5' : 'test') + '.js?_=' +
        Math.random() + '"><' + '/script>');</script>
</head>
<body>
<div id="root"></div>

<script type="text/javascript">

class Toolbar extends HyperHTMLElement {
  static get booleanAttributes() {
    return ['show-tooltips'];
  }

  shouldShowTooltip() {
    return this.showTooltips === true;
  }
}

Toolbar.define('class-toolbar');

class ExtendedToolbar extends Toolbar {}

ExtendedToolbar.define('class-extended-toolbar');

const extendedToolbar = document.createElement('class-extended-toolbar');

extendedToolbar.showTooltips = true;
console.log(extendedToolbar.showTooltips); // 'true'
console.log(typeof extendedToolbar.showTooltips); // string
</script>
</body>
</html>


================================================
FILE: test/builtin.html
================================================
<!doctype html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.9.1/document-register-element.js"></script>
    <script>document.write(
        '<script src="../' + (location.search.toLocaleLowerCase() === '?es5' ? 'es5' : 'index') + '.js?_=' +
        Math.random() + '"><' + '/script>');</script>
    <script>document.write(
        '<script src="' + (location.search.toLocaleLowerCase() === '?es5' ? 'test.es5' : 'test') + '.js?_=' +
        Math.random() + '"><' + '/script>');</script>
</head>
<body>
<div id="root"></div>

<script type="text/javascript">

  class Base extends HyperHTMLElement {
    base() {
      return 'base';
    }
  }

  class Base1 extends Base {
    base1() {}
  }

  class Base2 extends Base1 {
    base2() {}
  }

  class Base3 extends Base2 {
    base3() {}
    base() {
      return 'base3';
    }
  }

  class MyButtonOK extends HyperHTMLElement {
    created() {
      console.assert(typeof this.setState === 'function', 'setState is not set.');
    }
  }

  class MyButtonErr extends Base3 {
    created() {
      console.assert(typeof this.setState === 'function', 'setState is not set.');
      console.assert(typeof this.base3 === 'function', 'base3 is not set.');
      console.assert(typeof this.base2 === 'function', 'base2 is not set.');
      console.assert(typeof this.base1 === 'function', 'base1 is not set.');
      console.assert(typeof this.base === 'function', 'base is not set.');
      console.assert(this.base() === 'base3', 'base function was not overriden');
    }
  }

  class StandaloneOk extends Base3 {
    created() {
      console.assert(typeof this.setState === 'function', 'setState is not set.');
      console.assert(typeof this.base3 === 'function', 'base3 is not set.');
      console.assert(typeof this.base2 === 'function', 'base2 is not set.');
      console.assert(typeof this.base1 === 'function', 'base1 is not set.');
      console.assert(typeof this.base === 'function', 'base is not set.');
      console.assert(this.base() === 'base3', 'base function was not overriden');
    }
  }

  MyButtonOK.define('my-button', {extends: 'button'});
  MyButtonErr.define('my-button-sad', {extends: 'button'});
  StandaloneOk.define('standalone-ok');

  HyperHTMLElement.bind(document.getElementById('root'))`
    <button is="my-button">Button</button>
    <button is="my-button-sad">Button</button>
    <standalone-ok>Button</standalone-ok>
    `;
</script>
</body>
</html>


================================================
FILE: test/button.html
================================================
<!doctype html>
<html>
  <head>
    <title>HyperHTMLElement Custom Elements BuiltIn</title>
    <script>if(this.customElements)try{customElements.define('built-in',document.createElement('p').constructor,{'extends':'p'})}catch(a){document.write('<script src="//unpkg.com/@ungap/custom-elements-builtin"><'+'/script>')}else document.write('<script src="//unpkg.com/document-register-element"><'+'/script>');</script>
    <script src="../min.js"></script>
    <script>
    //*
    class HyperTest extends HyperHTMLElement {
      created() { alert(this.outerHTML); }
    }
    //*/

    /*
    function HyperTest(node) {
      var constructor = HyperHTMLElement.bind(this, node);
      var self = new constructor;
      return Object.setPrototypeOf(self, HyperTest.prototype);
    }
    Object.setPrototypeOf(HyperTest, HyperHTMLElement);
    Object.setPrototypeOf(HyperTest.prototype, HyperHTMLElement.prototype);
    HyperTest.prototype.created = function () {
      alert(this.outerHTML);
    };
    //*/

    HyperTest.define('hyper-test', {extends: 'button'});
    </script>
  </head>
  <body>
    <button is="hyper-test">hello</button>
  </body>
</html>

================================================
FILE: test/ce.js
================================================
/*! (c) Andrea Giammarchi @webreflection ISC */
(function () {
  'use strict';

  var Lie = typeof Promise === 'function' ? Promise : function (fn) {
    var queue = [],
        resolved = 0,
        value;
    fn(function ($) {
      value = $;
      resolved = 1;
      queue.splice(0).forEach(then);
    });
    return {
      then: then
    };

    function then(fn) {
      return resolved ? setTimeout(fn, 0, value) : queue.push(fn), this;
    }
  };

  var attributesObserver = (function (whenDefined, MutationObserver) {
    var attributeChanged = function attributeChanged(records) {
      for (var i = 0, length = records.length; i < length; i++) {
        dispatch(records[i]);
      }
    };

    var dispatch = function dispatch(_ref) {
      var target = _ref.target,
          attributeName = _ref.attributeName,
          oldValue = _ref.oldValue;
      target.attributeChangedCallback(attributeName, oldValue, target.getAttribute(attributeName));
    };

    return function (target, is) {
      var attributeFilter = target.constructor.observedAttributes;

      if (attributeFilter) {
        whenDefined(is).then(function () {
          new MutationObserver(attributeChanged).observe(target, {
            attributes: true,
            attributeOldValue: true,
            attributeFilter: attributeFilter
          });

          for (var i = 0, length = attributeFilter.length; i < length; i++) {
            if (target.hasAttribute(attributeFilter[i])) dispatch({
              target: target,
              attributeName: attributeFilter[i],
              oldValue: null
            });
          }
        });
      }

      return target;
    };
  });

  var _self = self,
      document = _self.document,
      MutationObserver = _self.MutationObserver,
      Set = _self.Set,
      WeakMap = _self.WeakMap;

  var elements = function elements(element) {
    return 'querySelectorAll' in element;
  };

  var filter = [].filter;
  var qsaObserver = (function (options) {
    var live = new WeakMap();

    var callback = function callback(records) {
      var query = options.query;

      if (query.length) {
        for (var i = 0, length = records.length; i < length; i++) {
          loop(filter.call(records[i].addedNodes, elements), true, query);
          loop(filter.call(records[i].removedNodes, elements), false, query);
        }
      }
    };

    var drop = function drop(elements) {
      for (var i = 0, length = elements.length; i < length; i++) {
        live["delete"](elements[i]);
      }
    };

    var flush = function flush() {
      callback(observer.takeRecords());
    };

    var loop = function loop(elements, connected, query) {
      var set = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : new Set();

      var _loop = function _loop(_selectors, _element, i, length) {
        // guard against repeated elements within nested querySelectorAll results
        if (!set.has(_element = elements[i])) {
          set.add(_element);

          if (connected) {
            for (var q, m = matches(_element), _i = 0, _length = query.length; _i < _length; _i++) {
              if (m.call(_element, q = query[_i])) {
                if (!live.has(_element)) live.set(_element, new Set());
                _selectors = live.get(_element); // guard against selectors that were handled already

                if (!_selectors.has(q)) {
                  _selectors.add(q);

                  options.handle(_element, connected, q);
                }
              }
            }
          } // guard against elements that never became live
          else if (live.has(_element)) {
              _selectors = live.get(_element);
              live["delete"](_element);

              _selectors.forEach(function (q) {
                options.handle(_element, connected, q);
              });
            }

          loop(querySelectorAll(_element), connected, query, set);
        }

        selectors = _selectors;
        element = _element;
      };

      for (var selectors, element, i = 0, length = elements.length; i < length; i++) {
        _loop(selectors, element, i);
      }
    };

    var matches = function matches(element) {
      return element.matches || element.webkitMatchesSelector || element.msMatchesSelector;
    };

    var parse = function parse(elements) {
      var connected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
      loop(elements, connected, options.query);
    };

    var querySelectorAll = function querySelectorAll(root) {
      return query.length ? root.querySelectorAll(query) : query;
    };

    var observer = new MutationObserver(callback);
    var root = options.root || document;
    var query = options.query;
    observer.observe(root, {
      childList: true,
      subtree: true
    });
    parse(querySelectorAll(root));
    return {
      drop: drop,
      flush: flush,
      observer: observer,
      parse: parse
    };
  });

  var _self$1 = self,
      document$1 = _self$1.document,
      Map = _self$1.Map,
      MutationObserver$1 = _self$1.MutationObserver,
      Object = _self$1.Object,
      Set$1 = _self$1.Set,
      WeakMap$1 = _self$1.WeakMap,
      Element = _self$1.Element,
      HTMLElement = _self$1.HTMLElement,
      Node = _self$1.Node,
      Error = _self$1.Error,
      TypeError = _self$1.TypeError,
      Reflect = _self$1.Reflect;
  var Promise$1 = self.Promise || Lie;
  var defineProperty = Object.defineProperty,
      keys = Object.keys,
      getOwnPropertyNames = Object.getOwnPropertyNames,
      setPrototypeOf = Object.setPrototypeOf;
  var legacy = !self.customElements;

  if (legacy) {
    var HTMLBuiltIn = function HTMLBuiltIn() {
      var constructor = this.constructor;
      if (!classes.has(constructor)) throw new TypeError('Illegal constructor');
      var is = classes.get(constructor);
      if (override) return augment(override, is);
      var element = createElement.call(document$1, is);
      return augment(setPrototypeOf(element, constructor.prototype), is);
    };

    var createElement = document$1.createElement;
    var classes = new Map();
    var defined = new Map();
    var prototypes = new Map();
    var registry = new Map();
    var query = [];

    var handle = function handle(element, connected, selector) {
      var proto = prototypes.get(selector);

      if (connected && !proto.isPrototypeOf(element)) {
        override = setPrototypeOf(element, proto);

        try {
          new proto.constructor();
        } finally {
          override = null;
        }
      }

      var method = "".concat(connected ? '' : 'dis', "connectedCallback");
      if (method in proto) element[method]();
    };

    var _qsaObserver = qsaObserver({
      query: query,
      handle: handle
    }),
        parse = _qsaObserver.parse;

    var override = null;

    var whenDefined = function whenDefined(name) {
      if (!defined.has(name)) {
        var _,
            $ = new Lie(function ($) {
          _ = $;
        });

        defined.set(name, {
          $: $,
          _: _
        });
      }

      return defined.get(name).$;
    };

    var augment = attributesObserver(whenDefined, MutationObserver$1);
    defineProperty(self, 'customElements', {
      configurable: true,
      value: {
        define: function define(is, Class) {
          if (registry.has(is)) throw new Error("the name \"".concat(is, "\" has already been used with this registry"));
          classes.set(Class, is);
          prototypes.set(is, Class.prototype);
          registry.set(is, Class);
          query.push(is);
          whenDefined(is).then(function () {
            parse(document$1.querySelectorAll(is));
          });

          defined.get(is)._(Class);
        },
        get: function get(is) {
          return registry.get(is);
        },
        whenDefined: whenDefined
      }
    });
    defineProperty(HTMLBuiltIn.prototype = HTMLElement.prototype, 'constructor', {
      value: HTMLBuiltIn
    });
    defineProperty(self, 'HTMLElement', {
      configurable: true,
      value: HTMLBuiltIn
    });
    defineProperty(document$1, 'createElement', {
      configurable: true,
      value: function value(name, options) {
        var is = options && options.is;
        var Class = is ? registry.get(is) : registry.get(name);
        return Class ? new Class() : createElement.call(document$1, name);
      }
    }); // in case ShadowDOM is used through a polyfill, to avoid issues
    // with builtin extends within shadow roots

    if (!('isConnected' in Node.prototype)) defineProperty(Node.prototype, 'isConnected', {
      configurable: true,
      get: function get() {
        return !(this.ownerDocument.compareDocumentPosition(this) & this.DOCUMENT_POSITION_DISCONNECTED);
      }
    });
  } else {
    try {
      var LI = function LI() {
        return self.Reflect.construct(HTMLLIElement, [], LI);
      };

      LI.prototype = HTMLLIElement.prototype;
      var is = 'extends-li';
      self.customElements.define('extends-li', LI, {
        'extends': 'li'
      });
      legacy = document$1.createElement('li', {
        is: is
      }).outerHTML.indexOf(is) < 0;
      var _self$customElements = self.customElements,
          get = _self$customElements.get,
          _whenDefined = _self$customElements.whenDefined;
      defineProperty(self.customElements, 'whenDefined', {
        configurable: true,
        value: function value(is) {
          var _this = this;

          return _whenDefined.call(this, is).then(function (Class) {
            return Class || get.call(_this, is);
          });
        }
      });
    } catch (o_O) {
      legacy = !legacy;
    }
  }

  if (legacy) {
    var parseShadow = function parseShadow(element) {
      var _shadowRoots$get = shadowRoots.get(element),
          parse = _shadowRoots$get.parse,
          root = _shadowRoots$get.root;

      parse(root.querySelectorAll(this), element.isConnected);
    };

    var customElements = self.customElements;
    var attachShadow = Element.prototype.attachShadow;
    var _createElement = document$1.createElement;
    var define = customElements.define,
        _get = customElements.get;

    var _ref = Reflect || {
      construct: function construct(HTMLElement) {
        return HTMLElement.call(this);
      }
    },
        construct = _ref.construct;

    var shadowRoots = new WeakMap$1();
    var shadows = new Set$1();

    var _classes = new Map();

    var _defined = new Map();

    var _prototypes = new Map();

    var _registry = new Map();

    var shadowed = [];
    var _query = [];

    var getCE = function getCE(is) {
      return _registry.get(is) || _get.call(customElements, is);
    };

    var _handle = function _handle(element, connected, selector) {
      var proto = _prototypes.get(selector);

      if (connected && !proto.isPrototypeOf(element)) {
        var k = keys(element);
        var v = k.map(function (key) {
          var value = element[key];
          delete element[key];
          return value;
        });
        _override = setPrototypeOf(element, proto);

        try {
          new proto.constructor();
        } finally {
          _override = null;

          for (var i = 0, length = k.length; i < length; i++) {
            element[k[i]] = v[i];
          }
        }
      }

      var method = "".concat(connected ? '' : 'dis', "connectedCallback");
      if (method in proto) element[method]();
    };

    var _qsaObserver2 = qsaObserver({
      query: _query,
      handle: _handle
    }),
        _parse = _qsaObserver2.parse;

    var _qsaObserver3 = qsaObserver({
      query: shadowed,
      handle: function handle(element, connected) {
        if (shadowRoots.has(element)) {
          if (connected) shadows.add(element);else shadows["delete"](element);
          if (_query.length) parseShadow.call(_query, element);
        }
      }
    }),
        parseShadowed = _qsaObserver3.parse;

    var _whenDefined2 = function _whenDefined2(name) {
      if (!_defined.has(name)) {
        var _,
            $ = new Promise$1(function ($) {
          _ = $;
        });

        _defined.set(name, {
          $: $,
          _: _
        });
      }

      return _defined.get(name).$;
    };

    var _augment = attributesObserver(_whenDefined2, MutationObserver$1);

    var _override = null;
    getOwnPropertyNames(self).filter(function (k) {
      return /^HTML/.test(k);
    }).forEach(function (k) {
      var HTMLElement = self[k];

      function HTMLBuiltIn() {
        var constructor = this.constructor;
        if (!_classes.has(constructor)) throw new TypeError('Illegal constructor');

        var _classes$get = _classes.get(constructor),
            is = _classes$get.is,
            tag = _classes$get.tag;

        if (is) {
          if (_override) return _augment(_override, is);

          var element = _createElement.call(document$1, tag);

          element.setAttribute('is', is);
          return _augment(setPrototypeOf(element, constructor.prototype), is);
        } else return construct.call(this, HTMLElement, [], constructor);
      }


      defineProperty(HTMLBuiltIn.prototype = HTMLElement.prototype, 'constructor', {
        value: HTMLBuiltIn
      });
      defineProperty(self, k, {
        value: HTMLBuiltIn
      });
    });
    defineProperty(document$1, 'createElement', {
      configurable: true,
      value: function value(name, options) {
        var is = options && options.is;

        if (is) {
          var Class = _registry.get(is);

          if (Class && _classes.get(Class).tag === name) return new Class();
        }

        var element = _createElement.call(document$1, name);

        if (is) element.setAttribute('is', is);
        return element;
      }
    });
    if (attachShadow) defineProperty(Element.prototype, 'attachShadow', {
      configurable: true,
      value: function value() {
        var root = attachShadow.apply(this, arguments);

        var _qsaObserver4 = qsaObserver({
          query: _query,
          root: root,
          handle: _handle
        }),
            parse = _qsaObserver4.parse;

        shadowRoots.set(this, {
          root: root,
          parse: parse
        });
        return root;
      }
    });
    defineProperty(customElements, 'get', {
      configurable: true,
      value: getCE
    });
    defineProperty(customElements, 'whenDefined', {
      configurable: true,
      value: _whenDefined2
    });
    defineProperty(customElements, 'define', {
      configurable: true,
      value: function value(is, Class, options) {
        if (getCE(is)) throw new Error("'".concat(is, "' has already been defined as a custom element"));
        var selector;
        var tag = options && options["extends"];

        _classes.set(Class, tag ? {
          is: is,
          tag: tag
        } : {
          is: '',
          tag: is
        });

        if (tag) {
          selector = "".concat(tag, "[is=\"").concat(is, "\"]");

          _prototypes.set(selector, Class.prototype);

          _registry.set(is, Class);

          _query.push(selector);
        } else {
          define.apply(customElements, arguments);
          shadowed.push(selector = is);
        }

        _whenDefined2(is).then(function () {
          if (tag) {
            _parse(document$1.querySelectorAll(selector));

            shadows.forEach(parseShadow, [selector]);
          } else parseShadowed(document$1.querySelectorAll(selector));
        });

        _defined.get(is)._(Class);
      }
    });
  }

}());


================================================
FILE: test/checked.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="ce.js"></script>
  <style>
  p {
    display: inline-block;
    background-color: rgba(0,255,0,0.2);
  }
  p.error {
    background-color: rgba(255,0,0,0.2);
  }
  </style>
  <script src="../index.js"></script>
  <script>
  this.onload = () => {
    const attributeValue = false;

    class MyElement extends HyperHTMLElement {
      static get booleanAttributes() { return ['checked']; }
      
      attributeChangedCallback() {
        this.render();
      }

      created() { this.render(); }

      render()
      {
        return this.html`<p class="${this.checked !== attributeValue ? 'error' : ''}">
          value of <code>this.checked</code> is <code>${this.checked}</code>
          should be <code>${attributeValue}</code>
        </p>`;
      }
    }

    HyperHTMLElement.bind(document.body)`<my-element checked=${attributeValue}></my-element>`;

    MyElement.define("my-element");

  };
  </script>
</head>
<body>
</body>
</html>


================================================
FILE: test/index.html
================================================
<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.9.1/document-register-element.js"></script>
    <script>document.write('<script src="../' + (location.search.toLocaleLowerCase() === '?es5' ? 'es5' : 'index') + '.js?_=' + Math.random() + '"><' + '/script>')</script>
    <script>document.write('<script src="' + (location.search.toLocaleLowerCase() === '?es5' ? 'test.es5' : 'test') + '.js?_=' + Math.random() + '"><' + '/script>')</script>
  </head>
  <body>
    <my-self name="Andrea" age="39"></my-self>
    <br>
    <my-input value="123"></my-input>
    <br>
    <a is="my-link">builtin</a>
  </body>
</html>

================================================
FILE: test/test.es5.js
================================================
"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

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

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, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }

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

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 _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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

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; } }

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

var MySelf = /*#__PURE__*/function (_HyperHTMLElement) {
  _inherits(MySelf, _HyperHTMLElement);

  var _super = _createSuper(MySelf);

  function MySelf() {
    _classCallCheck(this, MySelf);

    return _super.apply(this, arguments);
  }

  _createClass(MySelf, [{
    key: "created",
    value: function created() {
      this.render();
    }
  }, {
    key: "attributeChangedCallback",
    value: function attributeChangedCallback() {
      this.render();
    }
  }, {
    key: "render",
    value: function render() {
      return this.html(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    Hi, my name is ", ",\n    I am ", " ", ""])), this.name, this.age, this.active ? ' and still active' : '');
    }
  }], [{
    key: "booleanAttributes",
    get: function get() {
      return ['active'];
    }
  }, {
    key: "observedAttributes",
    get: function get() {
      return ['name', 'age'];
    }
  }]);

  return MySelf;
}(HyperHTMLElement);

MySelf.define('my-self');

var MyInput = /*#__PURE__*/function (_HyperHTMLElement2) {
  _inherits(MyInput, _HyperHTMLElement2);

  var _super2 = _createSuper(MyInput);

  function MyInput() {
    _classCallCheck(this, MyInput);

    return _super2.apply(this, arguments);
  }

  _createClass(MyInput, [{
    key: "attributeChangedCallback",
    value: function attributeChangedCallback() {
      this.render();
    }
  }, {
    key: "oninput",
    value: function oninput(e) {
      this.value = e.target.value;
      this.render();
      console.assert(this.refs.input === this.querySelector('input'), 'input as ref');
    }
  }, {
    key: "render",
    value: function render() {
      return this.html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    <input ref=\"input\" value=\"", "\" oninput=\"", "\">"])), this.value, this);
    }
  }], [{
    key: "observedAttributes",
    get: function get() {
      return ['value', 'boolean'];
    }
  }]);

  return MyInput;
}(HyperHTMLElement);

MyInput.define('my-input');

var MyLink = /*#__PURE__*/function (_HyperHTMLElement3) {
  _inherits(MyLink, _HyperHTMLElement3);

  var _super3 = _createSuper(MyLink);

  function MyLink() {
    _classCallCheck(this, MyLink);

    return _super3.apply(this, arguments);
  }

  _createClass(MyLink, [{
    key: "created",
    value: function created() {
      this.href = 'https://github.com/WebReflection/hyperHTML-Element/';
      this.render();
    }
  }, {
    key: "render",
    value: function render() {
      return this.html(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["it worked"])));
    }
  }]);

  return MyLink;
}(HyperHTMLElement);

MyLink.define('my-link', {
  "extends": 'a'
});
setTimeout(function () {
  HyperHTMLElement.bind(document.body.appendChild(document.createElement('div')))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["<my-self name=\"Rando\" age=\"17\" active=", "></my-self>"])), Math.random() < .5);
}, 1000);



================================================
FILE: test/test.js
================================================
class MySelf extends HyperHTMLElement {
  static get booleanAttributes() { return ['active']; }
  static get observedAttributes() { return ['name', 'age']; }
  created() { this.render(); }
  attributeChangedCallback() { this.render(); }
  render() { return this.html`
    Hi, my name is ${this.name},
    I am ${this.age} ${this.active ? ' and still active' : ''}`;
  }
}
MySelf.define('my-self');

class MyInput extends HyperHTMLElement {
  static get observedAttributes() { return ['value', 'boolean']; }
  attributeChangedCallback() { this.render(); }
  oninput(e) {
    this.value = e.target.value;
    this.render();
    console.assert(this.refs.input === this.querySelector('input'), 'input as ref');
  }
  render() { return this.html`
    <input ref="input" value="${this.value}" oninput="${this}">`;
  }
}
MyInput.define('my-input');

class MyLink extends HyperHTMLElement {
  created() {
    this.href = 'https://github.com/WebReflection/hyperHTML-Element/';
    this.render();
  }
  render () {
    return this.html`it worked`;
  }
}
MyLink.define('my-link', {extends: 'a'});


setTimeout(function () {
  HyperHTMLElement.bind(document.body.appendChild(document.createElement('div')))
  `<my-self name="Rando" age="17" active=${Math.random() < .5}></my-self>`;
}, 1000);



================================================
FILE: test.js
================================================
const tressa = require('tressa');
const {parseHTML} = require('linkedom');

const {document, customElements, HTMLElement, CustomEvent} = parseHTML('<html />');

global.document = document;
global.customElements = customElements;
global.HTMLElement = HTMLElement;

tressa.title('HyperHTMLElement');

/*
delete Object.getOwnPropertySymbols;
const getPrototypeOf = Object.getPrototypeOf;
delete Object.getPrototypeOf;
let times = 0;
Object.defineProperty(Object, 'getPrototypeOf', {
  get() {
    return times++ < 2 ? void 0 : getPrototypeOf;
  }
});
delete Object.setPrototypeOf;
delete Reflect.ownKeys;
*/

let HyperHTMLElement = require('./cjs').default;

class MyElement extends HyperHTMLElement {

  static get booleanAttributes() {
    return ['special'];
  }

  get special() { return false; }

  static get observedAttributes() {
    return ['key'];
  }

  constructor(...args) {
    const self = super(...args);
    self.method = [];
    return self;
  }

  get nextSibling() {
    delete MyElement.prototype.nextSibling;
    return false;
  }

  created() {
    this.method.push('created');
  }

  attributeChangedCallback() {
    this.method.push('attributeChangedCallback');
  }

  connectedCallback() {
    this.method.push('connectedCallback');
  }

  render() {
    return this.html`Hello <strong>HyperHTMLElement</strong>`;
  }

}

MyElement.define('my-el');

class MyLink extends HyperHTMLElement {}
MyLink.define('my-link', {extends: 'a'});

tressa.assert(customElements.get('my-el') === MyElement, '<my-el> defined in the registry');
tressa.assert(new MyLink instanceof HyperHTMLElement, '<my-link> is an instance');

let el = new MyElement();
tressa.assert(el.special === false, 'nothing special about this el');
document.body.appendChild(el).key = 'value';
setTimeout(function () { document.body.appendChild(document.createElement('p')); }, 50);

setTimeout(function () {

  document.dispatchEvent(new CustomEvent('DOMContentLoaded'));

  tressa.assert(el.method.length === 3, 'all methods invoked');
  tressa.assert(el.method.join('connectedCallback,attributeChangedCallback,created'), 'with the right order');
  tressa.assert(el.key === 'value' && el.getAttribute('key') === el.key, 'attribute set');

  el.created();
  el.key = 'value';
  tressa.assert(el.method.join('created,attributeChangedCallback,connectedCallback'), 'setting same attribute value does not trigger');
  tressa.assert(el.render() === el.render(), 'html is cached once');
  tressa.assert(el.outerHTML === '<my-el key="value">Hello <strong>HyperHTMLElement</strong></my-el>', 'the layout is the expected one');

  document.readyState = 'complete';
  document.dispatchEvent(new CustomEvent('DOMContentLoaded'));

  delete require.cache[require.resolve('./cjs')];
  HyperHTMLElement = require('./cjs').default;

  class MyInput extends HyperHTMLElement {

    static get booleanAttributes() {
      return ['boolean'];
    }

    static get observedAttributes() {
      return ['value', 'another-value'];
    }

    get value() {
      return this.getAttribute('value');
    }

    set value(value) {
      this.setAttribute('value', value);
    }

    attributeChangedCallback() {
      this.called = true;
    }

  }

  MyInput.define('my-input');
  el = new MyInput();
  el.value = '123';
  el.value = '123';
  el.anotherValue = '456';
  el.anotherValue = '456';
  el.boolean = true;
  tressa.assert(el.value === '123' && el.anotherValue === '456', 'attributes set as expected');
  tressa.assert(el.outerHTML === '<my-input boolean="" another-value="456" value="123"></my-input>', 'input with expected output');

  el.boolean = 'absolutely';
  tressa.assert(el.boolean === true, 'empty attributes are returned as true');

  el.boolean = false;
  tressa.assert(el.outerHTML === '<my-input another-value="456" value="123"></my-input>', 'input without boolean');

  el.anotherValue = null;
  tressa.assert(el.outerHTML === '<my-input value="123"></my-input>', 'input without other value');

  // for code coverage sake
  class MyEmptiness extends HyperHTMLElement {}
  MyEmptiness.define('my-emptyness');
  el = new MyEmptiness();
  document.body.appendChild(el);

  class MyAttr extends HyperHTMLElement {
    static get observedAttributes() {
      return ['key'];
    }
    created() {
      tressa.assert(true, 'created invoked as expected');
    }
    attributeChangedCallback() {}
  }
  MyAttr.define('my-attr');
  el = new MyAttr();
  el.setAttribute('key', 'value');


  class MyConnect extends HyperHTMLElement {
    created() { this.counter = 0; }
    connectedCallback() {
      this.counter++;
    }
  }
  MyConnect.define('my-connect');
  el = new MyConnect();
  document.body.appendChild(el);
  document.body.removeChild(el);
  document.body.appendChild(el);
  tressa.assert(el.counter === 2, 'connected invoked twice');

  class MyCreate extends HyperHTMLElement {
    created() {
      tressa.assert(true, 'create invoked as expected');
    }
  }
  MyCreate.define('my-create');
  el = new MyCreate();
  document.body.appendChild(el);

  class MyAttrHack extends HyperHTMLElement {
    static get observedAttributes() {
      return ['key'];
    }
    attributeChangedCallback() {
      this.counter = (this.counter || 0) + 1;
    }
  }

  MyAttrHack.define('my-attr-hack');

  let cb = MyAttrHack.prototype.attributeChangedCallback;
  Object.defineProperty(
    MyAttrHack.prototype,
    'attributeChangedCallback',
    {
      value: function (name, prev, curr) {
        cb.call(this, name, curr, curr);
      }
    }
  );

  el = new MyAttrHack();
  document.body.appendChild(el);
  el.key = 'value';
  tressa.assert(!el.counter, 'if same value, is not invoked');
  cb.call(el, 'key', 'value', null);
  tressa.assert(1 === el.counter, 'otherwise OK');

  // code coverage again
  class MyAttrHack2 extends HyperHTMLElement {
    static get observedAttributes() {
      return ['key'];
    }
    created() {
      tressa.assert(true, 'initialized correctly via attributes');
    }
  }

  MyAttrHack2.define('my-attr-hack2');

  el = new MyAttrHack2();
  document.body.appendChild(el);
  el.key = 'value';

  // handleEvent
  class MyHandler extends HyperHTMLElement {
    static get booleanAttributes() {
      return ['special-case'];
    }
    handleEvent() { this.value = 123; return this; }
  }

  MyHandler.define('my-handler');

  el = new MyHandler();
  el.specialCase = true;
  tressa.assert(
    el.handleEvent() === el && el.value === 123,
    'original handleEvent preserved and bound'
  );

  // handleEvent
  class MyRealHandler extends HyperHTMLElement {
    onclick() { tressa.assert(true, 'click event dispatched'); }
    created() { this.html`<span onclick="${this}">click me</span>`; }
  }

  MyRealHandler.define('my-real-handler');

  el = new MyRealHandler();
  document.body.insertBefore(el, document.body.lastChild);
  var evt = new CustomEvent('click');
  el.firstChild.dispatchEvent(evt);

  // reaches currentTarget without a dataset
  document.addEventListener('click', el);
  document.dispatchEvent(evt = new CustomEvent('click'));
  document.removeEventListener('click', el);

  // delegated handleEvent
  class MyDelegatedHandler extends HyperHTMLElement {
    whenClickHappens() { tressa.assert(true, 'whenClickHappens event dispatched'); }
    created() { this.html`<span ref="span" data-call="whenClickHappens" onclick="${this}">click me</span>`; }
  }

  MyDelegatedHandler.define('my-delegated-handler');

  el = new MyDelegatedHandler();
  tressa.assert(!el.refs.span, 'no span until created');
  document.body.appendChild(el);
  var evt = new CustomEvent('click');
  el.firstChild.dispatchEvent(evt);

  el.firstChild.onclick = el.whenClickHappens;
  el.firstChild.dispatchEvent(new CustomEvent('click'));

  tressa.assert(el.refs.span === el.querySelector('span'), 'span after creation');

  class MyShadow extends HyperHTMLElement {
    constructor() {
      super();
      this.attachShadow({mode: 'open'});
      this.html`<p ref="gotcha" />`;
    }
  }

  MyShadow.define('my-shadow');

  tressa.assert(!!(new MyShadow).refs.gotcha, 'ref works in shadow dom too');

  // double created
  let createdInstances = 0;
  class MyCreated extends HyperHTMLElement {
    created() { createdInstances++; }
  }
  MyCreated.define('my-created');

  document.body.appendChild(new MyCreated);
  document.body.appendChild(new MyCreated);

  tressa.assert(createdInstances === 2, 'multiple CE do not affect the class');

  // setState with default
  let random = Math.random();
  class StateHandlerDefault extends HyperHTMLElement {
    updateState(state) {
      this.setState(state);
    }
  }

  StateHandlerDefault.define('state-handler-default');

  el = new StateHandlerDefault();
  el.updateState({random: random});
  tressa.assert(
    el.state.random === random,
    'state created from scratch and updated'
  );


  // setState
  class StateHandler extends HyperHTMLElement {
    get defaultState() {
      return {a: 1};
    }
    updateState(state) {
      this.setState(state, false).setState(state);
    }
  }

  StateHandler.define('state-handler');

  el = new StateHandler();
  random = Math.random();
  el.updateState({random: random});
  tressa.assert(
    el.state.random === random && el.state.a === 1,
    'state created from default and updated'
  );

  // setState callback
  class StateHandlerCallback extends HyperHTMLElement {}

  StateHandlerCallback.define('state-handler-callback');

  el = new StateHandlerCallback();
  el.setState({value: 1});
  el.setState(prev => ({value: prev.value + 1}));
  tressa.assert(
    el.state.value === 2,
    'callback executed and result assigned'
  );

  class DefaultState extends HyperHTMLElement {
    get defaultState() { return {a: 'a'}; }
    render() {}
  }
  DefaultState.define('default-state');
  class State extends HyperHTMLElement {}
  State.define('just-state');
  var ds = new DefaultState;
  var o = ds.state;
  tressa.assert(!ds.propertyIsEnumerable('state'), 'states are not enumerable');
  tressa.assert(!ds.propertyIsEnumerable('_state$'), 'neither their secret');
  tressa.assert(o.a === 'a', 'default state retrieved');
  var s = new State;
  s.state = o;
  tressa.assert(s.state === o, 'state can be set too');
  ds.setState({b: 'b'});
  tressa.assert(o.a === 'a' && o.b === 'b', 'state was updated');
  s.state = {z: 123};
  tressa.assert(s.state.z === 123 && !s.state.a, 'state can be re-set too');

  class LateToTheParty extends HyperHTMLElement {
    static get booleanAttributes() { return ['test']; }
    attributeChangedCallback(name, prev, curr) {
      tressa.assert(name === 'test', 'test reacted');
      tressa.assert(prev == null, 'test reacted without a previous value');
      tressa.assert(curr != null && this[name], 'test returns expected value');
    }
  }

  var lttp = document.createElement('late-to-the-party');
  lttp.test = true;
  LateToTheParty.define('late-to-the-party');
  document.body.appendChild(lttp);

  class KebabHouse extends HyperHTMLElement {
    static get observedAttributes() {
      return ['kebab-sold'];
    }

    get kebabSold () {
        return 'Yes, it is';
    }
  }

  KebabHouse.define('kebab-house');
  const kebabHouse = document.createElement('kebab-house');
  tressa.assert(
    kebabHouse.kebabSold === 'Yes, it is',
    `Observed attribute getters don't overwrite predefined getters`
  );

  setTimeout(() => {
    delete require.cache[require.resolve('./cjs')];
    global.Symbol = {};
    require('./cjs');
  }, 100);

}, 100);


================================================
FILE: typescript.md
================================================
# Usage with Typescript
You can import the library and use it with Typescript:

```ts
import HyperHTMLElement from "hyperhtml-element";

class MySimpleElement extends HyperHTMLElement {
   render() {
      this.html`Hello from my-simple-element!`
   }
}

MySimpleElement.define('my-simple-element');
```

You can also define the type of the state using an interface, for have a better auto-complete in your editor. You should also define the observedAttributes that are automaticaly mapped as class attributes. Here's a more complex example:

```ts
import HyperHTMLElement from "hyperhtml-element";

interface MyCustomElementState {
   counter: number;
   name: string;
}

class MyCustomElement extends HyperHTMLElement<MyCustomElementState> {

   // Observed attributes are mapped to class attributes, converted from kebab-case to camelCase
   // They should be declared for later use and declared as optional since the user is not forced to use them
   name?: string;

   static get observedAttributes() {
      return ['name'];
   }

   attributeChangedCallback(attrName: string, prev: string, curr: string) {
      if (attrName === 'name') {
         this.setState({name: curr});
      }
   }

   get defaultState() {
      return {
         counter: 0,
         name: this.name || ''
      };
   }

   created() {
      this.render();
   }

   oninput(e: KeyboardEvent) {
      const value = (e.target as HTMLInputElement).value;
      this.setState({name: value});
   }

   handleIncrement(e: Event) {
      this.setState({counter: ++this.state.counter});
   }

   handleDecrement(e: Event) {
      this.setState({counter: --this.state.counter});
   }

   render() {
      this.html`
      <strong>Owner:</strong> ${this.state.name}<br />
      <strong>Counter:</strong> ${this.state.counter}<br />
      <button onclick=${this.handleIncrement}>+</button> <button onclick=${this.handleDecrement}>-</button>
      ${this.state.counter < 0 ?
         HyperHTMLElement.wire()`<div style=${{color: 'red'}}>Warning: negative counter!</div>`
         : ''}
      <br /><br />
      Change Owner name: <input value=${this.state.name} oninput=${this} />
      `;
   }

}

MyCustomElement.define('my-custom-element');
```