[ { "path": ".github/workflows/node.js.yml", "content": "# 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\n# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions\n\nname: build\n\non: [push, pull_request]\n\njobs:\n build:\n\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node-version: [16]\n\n steps:\n - uses: actions/checkout@v2\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v2\n with:\n node-version: ${{ matrix.node-version }}\n cache: 'npm'\n - run: npm ci\n - run: npm run build --if-present\n - run: npm test\n - run: npm run coverage --if-present\n - name: Coveralls\n uses: coverallsapp/github-action@master\n with:\n github-token: ${{ secrets.GITHUB_TOKEN }}\n" }, { "path": ".gitignore", "content": ".DS_Store\n.nyc_output/\nnode_modules/\ncoverage/\n\n" }, { "path": ".npmignore", "content": ".nyc_output/\ncoverage/\nnode_modules/\ntest/*\n.babelrc\n.gitignore\n.travis.yml\nes5.config.js\nesm.config.js\npackage-lock.json\ntest.js\ntypescript.md\n" }, { "path": ".npmrc", "content": "package-lock=true\npackage-lock=true\n" }, { "path": "LICENSE.txt", "content": "ISC License\n\nCopyright (c) 2017-2018, Andrea Giammarchi, @WebReflection\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted, provided that the above\ncopyright notice and this permission notice appear in all copies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE\nOR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n" }, { "path": "README.md", "content": "# hyperHTML-Element\n\n[![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)\n\nAn extensible class to define hyperHTML based Custom Elements.\n\n`npm install hyperhtml-element`\n\n#### hyperHTML included\n\nThis class attaches all `hyperHTML` methods to itself,\nwith the only exception of the `define` method,\nused in here to define Custom Elements instead.\n\nTo have same [define functionality](https://viperhtml.js.org/hyperhtml/documentation/#api-3),\nplease use `HyperHTMLElement.intent(...)` which provides exact same API.\n\n\n### Documentation\n\nYou can find more info about this helper in [hyperHTML documentation](https://viperhtml.js.org/hyperhtml/documentation/#components-2) page.\n\n\n\n### The Class\n\n```js\nconst HyperHTMLElement = require('hyperhtml-element');\n\nclass MyElement extends HyperHTMLElement {\n\n // observed attributes are automatically defined as accessors\n static get observedAttributes() { return ['key']; }\n\n // boolean attributes are automatically defined as accessors\n // and will set or remove the passed value\n static get booleanAttributes() { return ['active']; }\n\n // invoked once the component has been fully upgraded\n // suitable to perform any sort of setup\n // granted to be invoked right before either\n // connectedCallback or attributeChangedCallback\n created() {\n // triggers automatically attributeChangedCallback\n this.key = 'value';\n }\n\n attributeChangedCallback(name, prev, curr) {\n // when invoked, attributes will be already reflected\n // through their accessor\n this.key === curr; // true, and curr === \"value\"\n this.getAttribute('key') === this.key; // always true\n this.render();\n }\n\n render() {\n // lazily defined, this.html property points to an hyperHTML bound context\n // which could be the element shadowRoot or the element itself.\n // All events can be handled directly by the context, thanks to handleEvent\n // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38\n return this.html`\n Hello HyperHTMLElement\n ( ${this.state.clicks} )`;\n }\n\n // using the inherited handleEvent,\n // events can be easily defined as methods with `on` prefix.\n onclick(e) {\n // `this` refers to the current custom element\n console.log(this, 'click', e.target);\n // state handling, updates the view\n this.setState({clicks: this.state.clicks + 1});\n }\n\n // alternatively, you can specify a `data-call`\n // attribute with the name of the method to invoke\n // this.html`try`;\n onAnyEvent(e) {\n // `this` still refers to the current custom element\n console.log(this, e.type, e.currentTarget, e.target);\n }\n\n // you can also use Preact-like events handling\n // this is less efficient, but migration friendly.\n // The method is bound once per instance so that\n // this.handleClick === this.handleClick is always true\n // this.html`try`;\n handleClick(e) {\n // `this` still refers to the current custom element\n console.log(this, e.type, e.currentTarget, e.target);\n }\n\n // define a default state to use whenever this.state is accessed\n // it can create states from observed properties too\n get defaultState() {\n return {clicks: 0, key: this.key};\n }\n\n // this method is Preact friendly, once invoked\n // as this.setState({new: 'value'});\n // it will shallow copy properties over\n // and it will invoke this.render() right after\n setState(objOrFn)\n\n // all other native Custom Elements method works as usual\n // connectedCallback() { ... }\n // adoptedCallback() { ... }\n}\n\n// classes must be defined through their public static method\n// this is the moment the class will be fully setup once\n// and registered to the customElements Registry.\nMyElement.define('my-element');\n```\n\n#### New in v1.8\n\nYou can now define custom elements builtins too:\n```js\nclass MyLink extends HyperHTMLElement {\n created() { this.render(); }\n render() {\n return this.html`hello there!`;\n }\n}\nMyLink.define('my-link', {extends: 'a'});\n```\n\n\n### Compatibility\n\n`HyperHTMLElement` is compatible with every mobile browser and IE11 or greater.\n\nThere 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.\n\n" }, { "path": "cjs/index.d.ts", "content": "import HyperHTMLElement from \"..\";\r\nexport * from '..';\r\nexport default HyperHTMLElement;" }, { "path": "cjs/index.js", "content": "'use strict';\n/*! (C) 2017-2018 Andrea Giammarchi - ISC Style License */\n\nconst {Component, bind, define, hyper, wire} = require('hyperhtml');\n\n// utils to deal with custom elements builtin extends\nconst ATTRIBUTE_CHANGED_CALLBACK = 'attributeChangedCallback';\nconst O = Object;\nconst classes = [];\nconst defineProperty = O.defineProperty;\nconst getOwnPropertyDescriptor = O.getOwnPropertyDescriptor;\nconst getOwnPropertyNames = O.getOwnPropertyNames;\n/* istanbul ignore next */\nconst getOwnPropertySymbols = O.getOwnPropertySymbols || (() => []);\n/* istanbul ignore next */\nconst getPrototypeOf = O.getPrototypeOf || (o => o.__proto__);\n/* istanbul ignore next */\nconst ownKeys = typeof Reflect === 'object' && Reflect.ownKeys ||\n (o => getOwnPropertyNames(o).concat(getOwnPropertySymbols(o)));\n/* istanbul ignore next */\nconst setPrototypeOf = O.setPrototypeOf ||\n ((o, p) => (o.__proto__ = p, o));\n/* istanbul ignore stop */\nconst camel = name => name.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase());\nconst {attachShadow} = HTMLElement.prototype;\nconst sr = new WeakMap;\n\nclass HyperHTMLElement extends HTMLElement {\n\n // define a custom-element in the CustomElementsRegistry\n // class MyEl extends HyperHTMLElement {}\n // MyEl.define('my-el');\n static define(name, options) {\n const Class = this;\n const proto = Class.prototype;\n\n const onChanged = proto[ATTRIBUTE_CHANGED_CALLBACK];\n const hasChange = !!onChanged;\n\n // Class.booleanAttributes\n // -----------------------------------------------\n // attributes defined as boolean will have\n // an either available or not available attribute\n // regardless of the value.\n // All falsy values, or \"false\", mean attribute removed\n // while truthy values will be set as is.\n // Boolean attributes are also automatically observed.\n const booleanAttributes = Class.booleanAttributes || [];\n booleanAttributes.forEach(attribute => {\n const name = camel(attribute);\n if (!(name in proto)) defineProperty(\n proto,\n name,\n {\n configurable: true,\n get() {\n return this.hasAttribute(attribute);\n },\n set(value) {\n if (!value || value === 'false')\n this.removeAttribute(attribute);\n else\n this.setAttribute(attribute, '');\n }\n }\n );\n });\n\n // Class.observedAttributes\n // -------------------------------------------------------\n // HyperHTMLElement will directly reflect get/setAttribute\n // operation once these attributes are used, example:\n // el.observed = 123;\n // will automatically do\n // el.setAttribute('observed', 123);\n // triggering also the attributeChangedCallback\n const observedAttributes = (Class.observedAttributes || []).filter(\n attribute => booleanAttributes.indexOf(attribute) < 0\n );\n observedAttributes.forEach(attribute => {\n // it is possible to redefine the behavior at any time\n // simply overwriting get prop() and set prop(value)\n const name = camel(attribute);\n if (!(name in proto)) defineProperty(\n proto,\n name,\n {\n configurable: true,\n get() {\n return this.getAttribute(attribute);\n },\n set(value) {\n if (value == null)\n this.removeAttribute(attribute);\n else\n this.setAttribute(attribute, value);\n }\n }\n );\n });\n\n // if these are defined, overwrite the observedAttributes getter\n // to include also booleanAttributes\n const attributes = booleanAttributes.concat(observedAttributes);\n if (attributes.length)\n defineProperty(Class, 'observedAttributes', {\n get() { return attributes; }\n });\n\n // created() {}\n // ---------------------------------\n // an initializer method that grants\n // the node is fully known to the browser.\n // It is ensured to run either after DOMContentLoaded,\n // or once there is a next sibling (stream-friendly) so that\n // you have full access to element attributes and/or childNodes.\n const created = proto.created || function () {\n this.render();\n };\n\n // used to ensure create() is called once and once only\n defineProperty(\n proto,\n '_init$',\n {\n configurable: true,\n writable: true,\n value: true\n }\n );\n\n defineProperty(\n proto,\n ATTRIBUTE_CHANGED_CALLBACK,\n {\n configurable: true,\n value: function aCC(name, prev, curr) {\n if (this._init$) {\n checkReady.call(this, created, attributes, booleanAttributes);\n if (this._init$)\n return this._init$$.push(aCC.bind(this, name, prev, curr));\n }\n // ensure setting same value twice\n // won't trigger twice attributeChangedCallback\n if (hasChange && prev !== curr) {\n onChanged.apply(this, arguments);\n }\n }\n }\n );\n\n const onConnected = proto.connectedCallback;\n const hasConnect = !!onConnected;\n defineProperty(\n proto,\n 'connectedCallback',\n {\n configurable: true,\n value: function cC() {\n if (this._init$) {\n checkReady.call(this, created, attributes, booleanAttributes);\n if (this._init$)\n return this._init$$.push(cC.bind(this));\n }\n if (hasConnect) {\n onConnected.apply(this, arguments);\n }\n }\n }\n );\n\n // define lazily all handlers\n // class { handleClick() { ... }\n // render() { `` } }\n getOwnPropertyNames(proto).forEach(key => {\n if (/^handle[A-Z]/.test(key)) {\n const _key$ = '_' + key + '$';\n const method = proto[key];\n defineProperty(proto, key, {\n configurable: true,\n get() {\n return this[_key$] ||\n (this[_key$] = method.bind(this));\n }\n });\n }\n });\n\n // whenever you want to directly use the component itself\n // as EventListener, you can pass it directly.\n // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38\n // class Reactive extends HyperHTMLElement {\n // oninput(e) { console.log(this, 'changed', e.target.value); }\n // render() { this.html``; }\n // }\n if (!('handleEvent' in proto)) {\n defineProperty(\n proto,\n 'handleEvent',\n {\n configurable: true,\n value(event) {\n this[\n (event.currentTarget.dataset || {}).call ||\n ('on' + event.type)\n ](event);\n }\n }\n );\n }\n\n if (options && options.extends) {\n const Native = document.createElement(options.extends).constructor;\n const Intermediate = class extends Native {};\n const ckeys = ['length', 'name', 'arguments', 'caller', 'prototype'];\n const pkeys = [];\n let Super = null;\n let BaseClass = Class;\n while (Super = getPrototypeOf(BaseClass)) {\n [\n {target: Intermediate, base: Super, keys: ckeys},\n {target: Intermediate.prototype, base: Super.prototype, keys: pkeys}\n ]\n .forEach(({target, base, keys}) => {\n ownKeys(base)\n .filter(key => keys.indexOf(key) < 0)\n .forEach((key) => {\n keys.push(key);\n defineProperty(\n target,\n key,\n getOwnPropertyDescriptor(base, key)\n );\n });\n });\n\n BaseClass = Super;\n if (Super === HyperHTMLElement)\n break;\n }\n setPrototypeOf(Class, Intermediate);\n setPrototypeOf(proto, Intermediate.prototype);\n customElements.define(name, Class, options);\n } else {\n customElements.define(name, Class);\n }\n classes.push(Class);\n return Class;\n }\n\n // weakly relate the shadowRoot for refs usage\n attachShadow() {\n const shadowRoot = attachShadow.apply(this, arguments);\n sr.set(this, shadowRoot);\n return shadowRoot;\n }\n\n // returns elements by ref\n get refs() {\n const value = {};\n if ('_html$' in this) {\n const all = (sr.get(this) || this).querySelectorAll('[ref]');\n for (let {length} = all, i = 0; i < length; i++) {\n const node = all[i];\n value[node.getAttribute('ref')] = node;\n }\n Object.defineProperty(this, 'refs', {value});\n return value;\n }\n return value;\n }\n\n // lazily bind once hyperHTML logic\n // to either the shadowRoot, if present and open,\n // the _shadowRoot property, if set due closed shadow root,\n // or the custom-element itself if no Shadow DOM is used.\n get html() {\n return this._html$ || (this.html = bind(\n // in a way or another, bind to the right node\n // backward compatible, first two could probably go already\n this.shadowRoot || this._shadowRoot || sr.get(this) || this\n ));\n }\n\n // it can be set too if necessary, it won't invoke render()\n set html(value) {\n defineProperty(this, '_html$', {configurable: true, value: value});\n }\n\n // overwrite this method with your own render\n render() {}\n\n // ---------------------//\n // Basic State Handling //\n // ---------------------//\n\n // define the default state object\n // you could use observed properties too\n get defaultState() { return {}; }\n\n // the state with a default\n get state() {\n return this._state$ || (this.state = this.defaultState);\n }\n\n // it can be set too if necessary, it won't invoke render()\n set state(value) {\n defineProperty(this, '_state$', {configurable: true, value: value});\n }\n\n // currently a state is a shallow copy, like in Preact or other libraries.\n // after the state is updated, the render() method will be invoked.\n // ⚠️ do not ever call this.setState() inside this.render()\n setState(state, render) {\n const target = this.state;\n const source = typeof state === 'function' ? state.call(this, target) : state;\n for (const key in source) target[key] = source[key];\n if (render !== false) this.render();\n return this;\n }\n\n};\n\n// exposing hyperHTML utilities\nHyperHTMLElement.Component = Component;\nHyperHTMLElement.bind = bind;\nHyperHTMLElement.intent = define;\nHyperHTMLElement.wire = wire;\nHyperHTMLElement.hyper = hyper;\n\ntry {\n if (Symbol.hasInstance) classes.push(\n defineProperty(HyperHTMLElement, Symbol.hasInstance, {\n enumerable: false,\n configurable: true,\n value(instance) {\n return classes.some(isPrototypeOf, getPrototypeOf(instance));\n }\n }));\n} catch(meh) {}\n\nObject.defineProperty(exports, '__esModule', {value: true}).default = HyperHTMLElement;\n\n// ------------------------------//\n// DOMContentLoaded VS created() //\n// ------------------------------//\nconst dom = {\n type: 'DOMContentLoaded',\n handleEvent() {\n if (dom.ready()) {\n document.removeEventListener(dom.type, dom, false);\n dom.list.splice(0).forEach(invoke);\n }\n else\n setTimeout(dom.handleEvent);\n },\n ready() {\n return document.readyState === 'complete';\n },\n list: []\n};\n\nif (!dom.ready()) {\n document.addEventListener(dom.type, dom, false);\n}\n\nfunction checkReady(created, attributes, booleanAttributes) {\n if (dom.ready() || isReady.call(this, created, attributes, booleanAttributes)) {\n if (this._init$) {\n const list = this._init$$ || [];\n delete this._init$$;\n const self = defineProperty(this, '_init$', {value: false});\n booleanAttributes.forEach(name => {\n if (self.getAttribute(name) === 'false')\n self.removeAttribute(name);\n });\n attributes.forEach(name => {\n if (self.hasOwnProperty(name)) {\n const curr = self[name];\n delete self[name];\n list.unshift(() => { self[name] = curr; });\n }\n });\n created.call(self);\n list.forEach(invoke);\n }\n } else {\n if (!this.hasOwnProperty('_init$$'))\n defineProperty(this, '_init$$', {configurable: true, value: []});\n dom.list.push(checkReady.bind(this, created, attributes, booleanAttributes));\n }\n}\n\nfunction invoke(fn) {\n fn();\n}\n\nfunction isPrototypeOf(Class) {\n return this === Class.prototype;\n}\n\nfunction isReady(created, attributes, booleanAttributes) {\n let el = this;\n do { if (el.nextSibling) return true; }\n while (el = el.parentNode);\n setTimeout(checkReady.bind(this, created, attributes, booleanAttributes));\n return false;\n}\n" }, { "path": "cjs/package.json", "content": "{\"type\":\"commonjs\"}" }, { "path": "es5.config.js", "content": "import resolve from 'rollup-plugin-node-resolve';\nimport babel from 'rollup-plugin-babel';\n\nexport default {\n input: 'esm/index.js',\n plugins: [\n resolve({module: true}),\n babel({presets: [\"@babel/preset-env\"]})\n ],\n context: 'null',\n moduleContext: 'null',\n output: {\n exports: 'named',\n file: 'es5.js',\n format: 'iife',\n name: 'HyperHTMLElement'\n }\n};\n" }, { "path": "es5.js", "content": "var HyperHTMLElement = (function (exports) {\n 'use strict';\n\n function _typeof(obj) {\n \"@babel/helpers - typeof\";\n\n if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") {\n _typeof = function (obj) {\n return typeof obj;\n };\n } else {\n _typeof = function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n };\n }\n\n return _typeof(obj);\n }\n\n function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n }\n\n function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n }\n\n function _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n }\n\n function _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n if (superClass) _setPrototypeOf(subClass, superClass);\n }\n\n function _getPrototypeOf(o) {\n _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n }\n\n function _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n }\n\n function _isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n }\n\n function _construct(Parent, args, Class) {\n if (_isNativeReflectConstruct()) {\n _construct = Reflect.construct;\n } else {\n _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) _setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n\n return _construct.apply(null, arguments);\n }\n\n function _isNativeFunction(fn) {\n return Function.toString.call(fn).indexOf(\"[native code]\") !== -1;\n }\n\n function _wrapNativeSuper(Class) {\n var _cache = typeof Map === \"function\" ? new Map() : undefined;\n\n _wrapNativeSuper = function _wrapNativeSuper(Class) {\n if (Class === null || !_isNativeFunction(Class)) return Class;\n\n if (typeof Class !== \"function\") {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n if (typeof _cache !== \"undefined\") {\n if (_cache.has(Class)) return _cache.get(Class);\n\n _cache.set(Class, Wrapper);\n }\n\n function Wrapper() {\n return _construct(Class, arguments, _getPrototypeOf(this).constructor);\n }\n\n Wrapper.prototype = Object.create(Class.prototype, {\n constructor: {\n value: Wrapper,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n return _setPrototypeOf(Wrapper, Class);\n };\n\n return _wrapNativeSuper(Class);\n }\n\n function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n }\n\n function _possibleConstructorReturn(self, call) {\n if (call && (typeof call === \"object\" || typeof call === \"function\")) {\n return call;\n } else if (call !== void 0) {\n throw new TypeError(\"Derived constructors may only return object or undefined\");\n }\n\n return _assertThisInitialized(self);\n }\n\n function _createSuper(Derived) {\n var hasNativeReflectConstruct = _isNativeReflectConstruct();\n\n return function _createSuperInternal() {\n var Super = _getPrototypeOf(Derived),\n result;\n\n if (hasNativeReflectConstruct) {\n var NewTarget = _getPrototypeOf(this).constructor;\n\n result = Reflect.construct(Super, arguments, NewTarget);\n } else {\n result = Super.apply(this, arguments);\n }\n\n return _possibleConstructorReturn(this, result);\n };\n }\n\n /*! (c) Andrea Giammarchi - ISC */\n var self$3 = {};\n\n try {\n self$3.WeakMap = WeakMap;\n } catch (WeakMap) {\n // this could be better but 90% of the time\n // it's everything developers need as fallback\n self$3.WeakMap = function (id, Object) {\n\n var dP = Object.defineProperty;\n var hOP = Object.hasOwnProperty;\n var proto = WeakMap.prototype;\n\n proto[\"delete\"] = function (key) {\n return this.has(key) && delete key[this._];\n };\n\n proto.get = function (key) {\n return this.has(key) ? key[this._] : void 0;\n };\n\n proto.has = function (key) {\n return hOP.call(key, this._);\n };\n\n proto.set = function (key, value) {\n dP(key, this._, {\n configurable: true,\n value: value\n });\n return this;\n };\n\n return WeakMap;\n\n function WeakMap(iterable) {\n dP(this, '_', {\n value: '_@ungap/weakmap' + id++\n });\n if (iterable) iterable.forEach(add, this);\n }\n\n function add(pair) {\n this.set(pair[0], pair[1]);\n }\n }(Math.random(), Object);\n }\n\n var WeakMap$1 = self$3.WeakMap;\n\n /*! (c) Andrea Giammarchi - ISC */\n var self$2 = {};\n\n try {\n self$2.WeakSet = WeakSet;\n } catch (WeakSet) {\n (function (id, dP) {\n var proto = WeakSet.prototype;\n\n proto.add = function (object) {\n if (!this.has(object)) dP(object, this._, {\n value: true,\n configurable: true\n });\n return this;\n };\n\n proto.has = function (object) {\n return this.hasOwnProperty.call(object, this._);\n };\n\n proto[\"delete\"] = function (object) {\n return this.has(object) && delete object[this._];\n };\n\n self$2.WeakSet = WeakSet;\n\n function WeakSet() {\n\n dP(this, '_', {\n value: '_@ungap/weakmap' + id++\n });\n }\n })(Math.random(), Object.defineProperty);\n }\n\n var WeakSet$1 = self$2.WeakSet;\n\n var _ref = [],\n indexOf$1 = _ref.indexOf;\n\n var append = function append(get, parent, children, start, end, before) {\n var isSelect = ('selectedIndex' in parent);\n var noSelection = isSelect;\n\n while (start < end) {\n var child = get(children[start], 1);\n parent.insertBefore(child, before);\n\n if (isSelect && noSelection && child.selected) {\n noSelection = !noSelection;\n var selectedIndex = parent.selectedIndex;\n parent.selectedIndex = selectedIndex < 0 ? start : indexOf$1.call(parent.querySelectorAll('option'), child);\n }\n\n start++;\n }\n };\n var eqeq = function eqeq(a, b) {\n return a == b;\n };\n var identity = function identity(O) {\n return O;\n };\n var indexOf = function indexOf(moreNodes, moreStart, moreEnd, lessNodes, lessStart, lessEnd, compare) {\n var length = lessEnd - lessStart;\n /* istanbul ignore if */\n\n if (length < 1) return -1;\n\n while (moreEnd - moreStart >= length) {\n var m = moreStart;\n var l = lessStart;\n\n while (m < moreEnd && l < lessEnd && compare(moreNodes[m], lessNodes[l])) {\n m++;\n l++;\n }\n\n if (l === lessEnd) return moreStart;\n moreStart = m + 1;\n }\n\n return -1;\n };\n var isReversed = function isReversed(futureNodes, futureEnd, currentNodes, currentStart, currentEnd, compare) {\n while (currentStart < currentEnd && compare(currentNodes[currentStart], futureNodes[futureEnd - 1])) {\n currentStart++;\n futureEnd--;\n }\n return futureEnd === 0;\n };\n var next = function next(get, list, i, length, before) {\n return i < length ? get(list[i], 0) : 0 < i ? get(list[i - 1], -0).nextSibling : before;\n };\n var remove = function remove(get, children, start, end) {\n while (start < end) {\n drop(get(children[start++], -1));\n }\n }; // - - - - - - - - - - - - - - - - - - -\n // diff related constants and utilities\n // - - - - - - - - - - - - - - - - - - -\n\n var DELETION = -1;\n var INSERTION = 1;\n var SKIP = 0;\n var SKIP_OND = 50;\n\n var HS = function HS(futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges) {\n var k = 0;\n /* istanbul ignore next */\n\n var minLen = futureChanges < currentChanges ? futureChanges : currentChanges;\n var link = Array(minLen++);\n var tresh = Array(minLen);\n tresh[0] = -1;\n\n for (var i = 1; i < minLen; i++) {\n tresh[i] = currentEnd;\n }\n\n var nodes = currentNodes.slice(currentStart, currentEnd);\n\n for (var _i = futureStart; _i < futureEnd; _i++) {\n var index = nodes.indexOf(futureNodes[_i]);\n\n if (-1 < index) {\n var idxInOld = index + currentStart;\n k = findK(tresh, minLen, idxInOld);\n /* istanbul ignore else */\n\n if (-1 < k) {\n tresh[k] = idxInOld;\n link[k] = {\n newi: _i,\n oldi: idxInOld,\n prev: link[k - 1]\n };\n }\n }\n }\n\n k = --minLen;\n --currentEnd;\n\n while (tresh[k] > currentEnd) {\n --k;\n }\n\n minLen = currentChanges + futureChanges - k;\n var diff = Array(minLen);\n var ptr = link[k];\n --futureEnd;\n\n while (ptr) {\n var _ptr = ptr,\n newi = _ptr.newi,\n oldi = _ptr.oldi;\n\n while (futureEnd > newi) {\n diff[--minLen] = INSERTION;\n --futureEnd;\n }\n\n while (currentEnd > oldi) {\n diff[--minLen] = DELETION;\n --currentEnd;\n }\n\n diff[--minLen] = SKIP;\n --futureEnd;\n --currentEnd;\n ptr = ptr.prev;\n }\n\n while (futureEnd >= futureStart) {\n diff[--minLen] = INSERTION;\n --futureEnd;\n }\n\n while (currentEnd >= currentStart) {\n diff[--minLen] = DELETION;\n --currentEnd;\n }\n\n return diff;\n }; // this is pretty much the same petit-dom code without the delete map part\n // https://github.com/yelouafi/petit-dom/blob/bd6f5c919b5ae5297be01612c524c40be45f14a7/src/vdom.js#L556-L561\n\n\n var OND = function OND(futureNodes, futureStart, rows, currentNodes, currentStart, cols, compare) {\n var length = rows + cols;\n var v = [];\n var d, k, r, c, pv, cv, pd;\n\n outer: for (d = 0; d <= length; d++) {\n /* istanbul ignore if */\n if (d > SKIP_OND) return null;\n pd = d - 1;\n /* istanbul ignore next */\n\n pv = d ? v[d - 1] : [0, 0];\n cv = v[d] = [];\n\n for (k = -d; k <= d; k += 2) {\n if (k === -d || k !== d && pv[pd + k - 1] < pv[pd + k + 1]) {\n c = pv[pd + k + 1];\n } else {\n c = pv[pd + k - 1] + 1;\n }\n\n r = c - k;\n\n while (c < cols && r < rows && compare(currentNodes[currentStart + c], futureNodes[futureStart + r])) {\n c++;\n r++;\n }\n\n if (c === cols && r === rows) {\n break outer;\n }\n\n cv[d + k] = c;\n }\n }\n\n var diff = Array(d / 2 + length / 2);\n var diffIdx = diff.length - 1;\n\n for (d = v.length - 1; d >= 0; d--) {\n while (c > 0 && r > 0 && compare(currentNodes[currentStart + c - 1], futureNodes[futureStart + r - 1])) {\n // diagonal edge = equality\n diff[diffIdx--] = SKIP;\n c--;\n r--;\n }\n\n if (!d) break;\n pd = d - 1;\n /* istanbul ignore next */\n\n pv = d ? v[d - 1] : [0, 0];\n k = c - r;\n\n if (k === -d || k !== d && pv[pd + k - 1] < pv[pd + k + 1]) {\n // vertical edge = insertion\n r--;\n diff[diffIdx--] = INSERTION;\n } else {\n // horizontal edge = deletion\n c--;\n diff[diffIdx--] = DELETION;\n }\n }\n\n return diff;\n };\n\n var applyDiff = function applyDiff(diff, get, parentNode, futureNodes, futureStart, currentNodes, currentStart, currentLength, before) {\n var live = [];\n var length = diff.length;\n var currentIndex = currentStart;\n var i = 0;\n\n while (i < length) {\n switch (diff[i++]) {\n case SKIP:\n futureStart++;\n currentIndex++;\n break;\n\n case INSERTION:\n // TODO: bulk appends for sequential nodes\n live.push(futureNodes[futureStart]);\n append(get, parentNode, futureNodes, futureStart++, futureStart, currentIndex < currentLength ? get(currentNodes[currentIndex], 0) : before);\n break;\n\n case DELETION:\n currentIndex++;\n break;\n }\n }\n\n i = 0;\n\n while (i < length) {\n switch (diff[i++]) {\n case SKIP:\n currentStart++;\n break;\n\n case DELETION:\n // TODO: bulk removes for sequential nodes\n if (-1 < live.indexOf(currentNodes[currentStart])) currentStart++;else remove(get, currentNodes, currentStart++, currentStart);\n break;\n }\n }\n };\n\n var findK = function findK(ktr, length, j) {\n var lo = 1;\n var hi = length;\n\n while (lo < hi) {\n var mid = (lo + hi) / 2 >>> 0;\n if (j < ktr[mid]) hi = mid;else lo = mid + 1;\n }\n\n return lo;\n };\n\n var smartDiff = function smartDiff(get, parentNode, futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges, currentLength, compare, before) {\n 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);\n };\n\n var drop = function drop(node) {\n return (node.remove || dropChild).call(node);\n };\n\n function dropChild() {\n var parentNode = this.parentNode;\n /* istanbul ignore else */\n\n if (parentNode) parentNode.removeChild(this);\n }\n\n /*! (c) 2018 Andrea Giammarchi (ISC) */\n\n var domdiff = function domdiff(parentNode, // where changes happen\n currentNodes, // Array of current items/nodes\n futureNodes, // Array of future items/nodes\n options // optional object with one of the following properties\n // before: domNode\n // compare(generic, generic) => true if same generic\n // node(generic) => Node\n ) {\n if (!options) options = {};\n var compare = options.compare || eqeq;\n var get = options.node || identity;\n var before = options.before == null ? null : get(options.before, 0);\n var currentLength = currentNodes.length;\n var currentEnd = currentLength;\n var currentStart = 0;\n var futureEnd = futureNodes.length;\n var futureStart = 0; // common prefix\n\n while (currentStart < currentEnd && futureStart < futureEnd && compare(currentNodes[currentStart], futureNodes[futureStart])) {\n currentStart++;\n futureStart++;\n } // common suffix\n\n\n while (currentStart < currentEnd && futureStart < futureEnd && compare(currentNodes[currentEnd - 1], futureNodes[futureEnd - 1])) {\n currentEnd--;\n futureEnd--;\n }\n\n var currentSame = currentStart === currentEnd;\n var futureSame = futureStart === futureEnd; // same list\n\n if (currentSame && futureSame) return futureNodes; // only stuff to add\n\n if (currentSame && futureStart < futureEnd) {\n append(get, parentNode, futureNodes, futureStart, futureEnd, next(get, currentNodes, currentStart, currentLength, before));\n return futureNodes;\n } // only stuff to remove\n\n\n if (futureSame && currentStart < currentEnd) {\n remove(get, currentNodes, currentStart, currentEnd);\n return futureNodes;\n }\n\n var currentChanges = currentEnd - currentStart;\n var futureChanges = futureEnd - futureStart;\n var i = -1; // 2 simple indels: the shortest sequence is a subsequence of the longest\n\n if (currentChanges < futureChanges) {\n i = indexOf(futureNodes, futureStart, futureEnd, currentNodes, currentStart, currentEnd, compare); // inner diff\n\n if (-1 < i) {\n append(get, parentNode, futureNodes, futureStart, i, get(currentNodes[currentStart], 0));\n append(get, parentNode, futureNodes, i + currentChanges, futureEnd, next(get, currentNodes, currentEnd, currentLength, before));\n return futureNodes;\n }\n }\n /* istanbul ignore else */\n else if (futureChanges < currentChanges) {\n i = indexOf(currentNodes, currentStart, currentEnd, futureNodes, futureStart, futureEnd, compare); // outer diff\n\n if (-1 < i) {\n remove(get, currentNodes, currentStart, i);\n remove(get, currentNodes, i + futureChanges, currentEnd);\n return futureNodes;\n }\n } // common case with one replacement for many nodes\n // or many nodes replaced for a single one\n\n /* istanbul ignore else */\n\n\n if (currentChanges < 2 || futureChanges < 2) {\n append(get, parentNode, futureNodes, futureStart, futureEnd, get(currentNodes[currentStart], 0));\n remove(get, currentNodes, currentStart, currentEnd);\n return futureNodes;\n } // the half match diff part has been skipped in petit-dom\n // https://github.com/yelouafi/petit-dom/blob/bd6f5c919b5ae5297be01612c524c40be45f14a7/src/vdom.js#L391-L397\n // accordingly, I think it's safe to skip in here too\n // if one day it'll come out like the speediest thing ever to do\n // then I might add it in here too\n // Extra: before going too fancy, what about reversed lists ?\n // This should bail out pretty quickly if that's not the case.\n\n\n if (currentChanges === futureChanges && isReversed(futureNodes, futureEnd, currentNodes, currentStart, currentEnd, compare)) {\n append(get, parentNode, futureNodes, futureStart, futureEnd, next(get, currentNodes, currentEnd, currentLength, before));\n return futureNodes;\n } // last resort through a smart diff\n\n\n smartDiff(get, parentNode, futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges, currentLength, compare, before);\n return futureNodes;\n };\n\n /*! (c) Andrea Giammarchi - ISC */\n var self$1 = {};\n self$1.CustomEvent = typeof CustomEvent === 'function' ? CustomEvent : function (__p__) {\n CustomEvent[__p__] = new CustomEvent('').constructor[__p__];\n return CustomEvent;\n\n function CustomEvent(type, init) {\n if (!init) init = {};\n var e = document.createEvent('CustomEvent');\n e.initCustomEvent(type, !!init.bubbles, !!init.cancelable, init.detail);\n return e;\n }\n }('prototype');\n var CustomEvent$1 = self$1.CustomEvent;\n\n /*! (c) Andrea Giammarchi - ISC */\n var self = {};\n\n try {\n self.Map = Map;\n } catch (Map) {\n self.Map = function Map() {\n var i = 0;\n var k = [];\n var v = [];\n return {\n \"delete\": function _delete(key) {\n var had = contains(key);\n\n if (had) {\n k.splice(i, 1);\n v.splice(i, 1);\n }\n\n return had;\n },\n forEach: function forEach(callback, context) {\n k.forEach(function (key, i) {\n callback.call(context, v[i], key, this);\n }, this);\n },\n get: function get(key) {\n return contains(key) ? v[i] : void 0;\n },\n has: function has(key) {\n return contains(key);\n },\n set: function set(key, value) {\n v[contains(key) ? i : k.push(key) - 1] = value;\n return this;\n }\n };\n\n function contains(v) {\n i = k.indexOf(v);\n return -1 < i;\n }\n };\n }\n\n var Map$1 = self.Map;\n\n // able to create Custom Elements like components\n // including the ability to listen to connect/disconnect\n // events via onconnect/ondisconnect attributes\n // Components can be created imperatively or declaratively.\n // The main difference is that declared components\n // will not automatically render on setState(...)\n // to simplify state handling on render.\n\n function Component() {\n return this; // this is needed in Edge !!!\n } // Component is lazily setup because it needs\n // wire mechanism as lazy content\n\n function setup(content) {\n // there are various weakly referenced variables in here\n // and mostly are to use Component.for(...) static method.\n var children = new WeakMap$1();\n var create = Object.create;\n\n var createEntry = function createEntry(wm, id, component) {\n wm.set(id, component);\n return component;\n };\n\n var get = function get(Class, info, context, id) {\n var relation = info.get(Class) || relate(Class, info);\n\n switch (_typeof(id)) {\n case 'object':\n case 'function':\n var wm = relation.w || (relation.w = new WeakMap$1());\n return wm.get(id) || createEntry(wm, id, new Class(context));\n\n default:\n var sm = relation.p || (relation.p = create(null));\n return sm[id] || (sm[id] = new Class(context));\n }\n };\n\n var relate = function relate(Class, info) {\n var relation = {\n w: null,\n p: null\n };\n info.set(Class, relation);\n return relation;\n };\n\n var set = function set(context) {\n var info = new Map$1();\n children.set(context, info);\n return info;\n }; // The Component Class\n\n\n Object.defineProperties(Component, {\n // Component.for(context[, id]) is a convenient way\n // to automatically relate data/context to children components\n // If not created yet, the new Component(context) is weakly stored\n // and after that same instance would always be returned.\n \"for\": {\n configurable: true,\n value: function value(context, id) {\n return get(this, children.get(context) || set(context), context, id == null ? 'default' : id);\n }\n }\n });\n Object.defineProperties(Component.prototype, {\n // all events are handled with the component as context\n handleEvent: {\n value: function value(e) {\n var ct = e.currentTarget;\n this['getAttribute' in ct && ct.getAttribute('data-call') || 'on' + e.type](e);\n }\n },\n // components will lazily define html or svg properties\n // as soon as these are invoked within the .render() method\n // Such render() method is not provided by the base class\n // but it must be available through the Component extend.\n // Declared components could implement a\n // render(props) method too and use props as needed.\n html: lazyGetter('html', content),\n svg: lazyGetter('svg', content),\n // the state is a very basic/simple mechanism inspired by Preact\n state: lazyGetter('state', function () {\n return this.defaultState;\n }),\n // it is possible to define a default state that'd be always an object otherwise\n defaultState: {\n get: function get() {\n return {};\n }\n },\n // dispatch a bubbling, cancelable, custom event\n // through the first known/available node\n dispatch: {\n value: function value(type, detail) {\n var _wire$ = this._wire$;\n\n if (_wire$) {\n var event = new CustomEvent$1(type, {\n bubbles: true,\n cancelable: true,\n detail: detail\n });\n event.component = this;\n return (_wire$.dispatchEvent ? _wire$ : _wire$.firstChild).dispatchEvent(event);\n }\n\n return false;\n }\n },\n // setting some property state through a new object\n // or a callback, triggers also automatically a render\n // unless explicitly specified to not do so (render === false)\n setState: {\n value: function value(state, render) {\n var target = this.state;\n var source = typeof state === 'function' ? state.call(this, target) : state;\n\n for (var key in source) {\n target[key] = source[key];\n }\n\n if (render !== false) this.render();\n return this;\n }\n }\n });\n } // instead of a secret key I could've used a WeakMap\n // However, attaching a property directly will result\n // into better performance with thousands of components\n // hanging around, and less memory pressure caused by the WeakMap\n\n var lazyGetter = function lazyGetter(type, fn) {\n var secret = '_' + type + '$';\n return {\n get: function get() {\n return this[secret] || setValue(this, secret, fn.call(this, type));\n },\n set: function set(value) {\n setValue(this, secret, value);\n }\n };\n }; // shortcut to set value on get or set(value)\n\n\n var setValue = function setValue(self, secret, value) {\n return Object.defineProperty(self, secret, {\n configurable: true,\n value: typeof value === 'function' ? function () {\n return self._wire$ = value.apply(this, arguments);\n } : value\n })[secret];\n };\n\n Object.defineProperties(Component.prototype, {\n // used to distinguish better than instanceof\n ELEMENT_NODE: {\n value: 1\n },\n nodeType: {\n value: -1\n }\n });\n\n var attributes = {};\n var intents = {};\n var keys = [];\n var hasOwnProperty = intents.hasOwnProperty;\n var length = 0;\n var Intent = {\n // used to invoke right away hyper:attributes\n attributes: attributes,\n // hyperHTML.define('intent', (object, update) => {...})\n // can be used to define a third parts update mechanism\n // when every other known mechanism failed.\n // hyper.define('user', info => info.name);\n // hyper(node)`

${{user}}

`;\n define: function define(intent, callback) {\n if (intent.indexOf('-') < 0) {\n if (!(intent in intents)) {\n length = keys.push(intent);\n }\n\n intents[intent] = callback;\n } else {\n attributes[intent] = callback;\n }\n },\n // this method is used internally as last resort\n // to retrieve a value out of an object\n invoke: function invoke(object, callback) {\n for (var i = 0; i < length; i++) {\n var key = keys[i];\n\n if (hasOwnProperty.call(object, key)) {\n return intents[key](object[key], callback);\n }\n }\n }\n };\n\n var isArray = Array.isArray || function (toString) {\n /* istanbul ignore next */\n var $ = toString.call([]);\n /* istanbul ignore next */\n\n return function isArray(object) {\n return toString.call(object) === $;\n };\n }({}.toString);\n\n /*! (c) Andrea Giammarchi - ISC */\n var createContent = function (document) {\n\n var FRAGMENT = 'fragment';\n var TEMPLATE = 'template';\n var HAS_CONTENT = ('content' in create(TEMPLATE));\n var createHTML = HAS_CONTENT ? function (html) {\n var template = create(TEMPLATE);\n template.innerHTML = html;\n return template.content;\n } : function (html) {\n var content = create(FRAGMENT);\n var template = create(TEMPLATE);\n var childNodes = null;\n\n if (/^[^\\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(html)) {\n var selector = RegExp.$1;\n template.innerHTML = '' + html + '
';\n childNodes = template.querySelectorAll(selector);\n } else {\n template.innerHTML = html;\n childNodes = template.childNodes;\n }\n\n append(content, childNodes);\n return content;\n };\n return function createContent(markup, type) {\n return (type === 'svg' ? createSVG : createHTML)(markup);\n };\n\n function append(root, childNodes) {\n var length = childNodes.length;\n\n while (length--) {\n root.appendChild(childNodes[0]);\n }\n }\n\n function create(element) {\n return element === FRAGMENT ? document.createDocumentFragment() : document.createElementNS('http://www.w3.org/1999/xhtml', element);\n } // it could use createElementNS when hasNode is there\n // but this fallback is equally fast and easier to maintain\n // it is also battle tested already in all IE\n\n\n function createSVG(svg) {\n var content = create(FRAGMENT);\n var template = create('div');\n template.innerHTML = '' + svg + '';\n append(content, template.firstChild.childNodes);\n return content;\n }\n }(document);\n\n /*! (c) Andrea Giammarchi */\n function disconnected(poly) {\n\n var Event = poly.Event;\n var WeakSet = poly.WeakSet;\n var notObserving = true;\n var observer = null;\n return function observe(node) {\n if (notObserving) {\n notObserving = !notObserving;\n observer = new WeakSet();\n startObserving(node.ownerDocument);\n }\n\n observer.add(node);\n return node;\n };\n\n function startObserving(document) {\n var connected = new WeakSet();\n var disconnected = new WeakSet();\n\n try {\n new MutationObserver(changes).observe(document, {\n subtree: true,\n childList: true\n });\n } catch (o_O) {\n var timer = 0;\n var records = [];\n\n var reschedule = function reschedule(record) {\n records.push(record);\n clearTimeout(timer);\n timer = setTimeout(function () {\n changes(records.splice(timer = 0, records.length));\n }, 0);\n };\n\n document.addEventListener('DOMNodeRemoved', function (event) {\n reschedule({\n addedNodes: [],\n removedNodes: [event.target]\n });\n }, true);\n document.addEventListener('DOMNodeInserted', function (event) {\n reschedule({\n addedNodes: [event.target],\n removedNodes: []\n });\n }, true);\n }\n\n function changes(records) {\n for (var record, length = records.length, i = 0; i < length; i++) {\n record = records[i];\n dispatchAll(record.removedNodes, 'disconnected', disconnected, connected);\n dispatchAll(record.addedNodes, 'connected', connected, disconnected);\n }\n }\n\n function dispatchAll(nodes, type, wsin, wsout) {\n 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)) {\n }\n }\n\n function dispatchTarget(node, event, type, wsin, wsout) {\n if (observer.has(node) && !wsin.has(node)) {\n wsout[\"delete\"](node);\n wsin.add(node);\n node.dispatchEvent(event);\n /*\n // The event is not bubbling (perf reason: should it?),\n // hence there's no way to know if\n // stop/Immediate/Propagation() was called.\n // Should DOM Level 0 work at all?\n // I say it's a YAGNI case for the time being,\n // and easy to implement in user-land.\n if (!event.cancelBubble) {\n var fn = node['on' + type];\n if (fn)\n fn.call(node, event);\n }\n */\n }\n\n for (var // apparently is node.children || IE11 ... ^_^;;\n // https://github.com/WebReflection/disconnected/issues/1\n children = node.children || [], length = children.length, i = 0; i < length; dispatchTarget(children[i++], event, type, wsin, wsout)) {\n }\n }\n }\n }\n\n /*! (c) Andrea Giammarchi - ISC */\n var importNode = function (document, appendChild, cloneNode, createTextNode, importNode) {\n var _native = (importNode in document); // IE 11 has problems with cloning templates:\n // it \"forgets\" empty childNodes. This feature-detects that.\n\n\n var fragment = document.createDocumentFragment();\n fragment[appendChild](document[createTextNode]('g'));\n fragment[appendChild](document[createTextNode](''));\n /* istanbul ignore next */\n\n var content = _native ? document[importNode](fragment, true) : fragment[cloneNode](true);\n return content.childNodes.length < 2 ? function importNode(node, deep) {\n var clone = node[cloneNode]();\n\n for (var\n /* istanbul ignore next */\n childNodes = node.childNodes || [], length = childNodes.length, i = 0; deep && i < length; i++) {\n clone[appendChild](importNode(childNodes[i], deep));\n }\n\n return clone;\n } : _native ? document[importNode] : function (node, deep) {\n return node[cloneNode](!!deep);\n };\n }(document, 'appendChild', 'cloneNode', 'createTextNode', 'importNode');\n\n var trim = ''.trim ||\n /* istanbul ignore next */\n function () {\n return String(this).replace(/^\\s+|\\s+/g, '');\n };\n\n /*! (c) Andrea Giammarchi - ISC */\n // Custom\n var UID = '-' + Math.random().toFixed(6) + '%'; // Edge issue!\n\n var UID_IE = false;\n\n try {\n if (!function (template, content, tabindex) {\n return content in template && (template.innerHTML = '

', template[content].childNodes[0].getAttribute(tabindex) == UID);\n }(document.createElement('template'), 'content', 'tabindex')) {\n UID = '_dt: ' + UID.slice(1, -1) + ';';\n UID_IE = true;\n }\n } catch (meh) {}\n\n var UIDC = ''; // DOM\n\n var COMMENT_NODE = 8;\n var ELEMENT_NODE = 1;\n var TEXT_NODE = 3;\n var SHOULD_USE_TEXT_CONTENT = /^(?:plaintext|script|style|textarea|title|xmp)$/i;\n var VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;\n\n /*! (c) Andrea Giammarchi - ISC */\n function sanitize (template) {\n return template.join(UIDC).replace(selfClosing, fullClosing).replace(attrSeeker, attrReplacer);\n }\n var spaces = ' \\\\f\\\\n\\\\r\\\\t';\n var almostEverything = '[^' + spaces + '\\\\/>\"\\'=]+';\n var attrName = '[' + spaces + ']+' + almostEverything;\n var tagName = '<([A-Za-z]+[A-Za-z0-9:._-]*)((?:';\n var attrPartials = '(?:\\\\s*=\\\\s*(?:\\'[^\\']*?\\'|\"[^\"]*?\"|<[^>]*?>|' + almostEverything.replace('\\\\/', '') + '))?)';\n var attrSeeker = new RegExp(tagName + attrName + attrPartials + '+)([' + spaces + ']*/?>)', 'g');\n var selfClosing = new RegExp(tagName + attrName + attrPartials + '*)([' + spaces + ']*/>)', 'g');\n var findAttributes = new RegExp('(' + attrName + '\\\\s*=\\\\s*)([\\'\"]?)' + UIDC + '\\\\2', 'gi');\n\n function attrReplacer($0, $1, $2, $3) {\n return '<' + $1 + $2.replace(findAttributes, replaceAttributes) + $3;\n }\n\n function replaceAttributes($0, $1, $2) {\n return $1 + ($2 || '\"') + UID + ($2 || '\"');\n }\n\n function fullClosing($0, $1, $2) {\n return VOID_ELEMENTS.test($1) ? $0 : '<' + $1 + $2 + '>';\n }\n\n var umap = (function (_) {\n return {\n // About: get: _.get.bind(_)\n // It looks like WebKit/Safari didn't optimize bind at all,\n // so that using bind slows it down by 60%.\n // Firefox and Chrome are just fine in both cases,\n // so let's use the approach that works fast everywhere 👍\n get: function get(key) {\n return _.get(key);\n },\n set: function set(key, value) {\n return _.set(key, value), value;\n }\n };\n });\n\n /* istanbul ignore next */\n\n var normalizeAttributes = UID_IE ? function (attributes, parts) {\n var html = parts.join(' ');\n return parts.slice.call(attributes, 0).sort(function (left, right) {\n return html.indexOf(left.name) <= html.indexOf(right.name) ? -1 : 1;\n });\n } : function (attributes, parts) {\n return parts.slice.call(attributes, 0);\n };\n\n function find(node, path) {\n var length = path.length;\n var i = 0;\n\n while (i < length) {\n node = node.childNodes[path[i++]];\n }\n\n return node;\n }\n\n function parse(node, holes, parts, path) {\n var childNodes = node.childNodes;\n var length = childNodes.length;\n var i = 0;\n\n while (i < length) {\n var child = childNodes[i];\n\n switch (child.nodeType) {\n case ELEMENT_NODE:\n var childPath = path.concat(i);\n parseAttributes(child, holes, parts, childPath);\n parse(child, holes, parts, childPath);\n break;\n\n case COMMENT_NODE:\n var textContent = child.textContent;\n\n if (textContent === UID) {\n parts.shift();\n holes.push( // basicHTML or other non standard engines\n // might end up having comments in nodes\n // where they shouldn't, hence this check.\n SHOULD_USE_TEXT_CONTENT.test(node.nodeName) ? Text(node, path) : Any(child, path.concat(i)));\n } else {\n switch (textContent.slice(0, 2)) {\n case '/*':\n if (textContent.slice(-2) !== '*/') break;\n\n case \"\\uD83D\\uDC7B\":\n // ghost\n node.removeChild(child);\n i--;\n length--;\n }\n }\n\n break;\n\n case TEXT_NODE:\n // the following ignore is actually covered by browsers\n // only basicHTML ends up on previous COMMENT_NODE case\n // instead of TEXT_NODE because it knows nothing about\n // special style or textarea behavior\n\n /* istanbul ignore if */\n if (SHOULD_USE_TEXT_CONTENT.test(node.nodeName) && trim.call(child.textContent) === UIDC) {\n parts.shift();\n holes.push(Text(node, path));\n }\n\n break;\n }\n\n i++;\n }\n }\n\n function parseAttributes(node, holes, parts, path) {\n var attributes = node.attributes;\n var cache = [];\n var remove = [];\n var array = normalizeAttributes(attributes, parts);\n var length = array.length;\n var i = 0;\n\n while (i < length) {\n var attribute = array[i++];\n var direct = attribute.value === UID;\n var sparse;\n\n if (direct || 1 < (sparse = attribute.value.split(UIDC)).length) {\n var name = attribute.name; // the following ignore is covered by IE\n // and the IE9 double viewBox test\n\n /* istanbul ignore else */\n\n if (cache.indexOf(name) < 0) {\n cache.push(name);\n var realName = parts.shift().replace(direct ? /^(?:|[\\S\\s]*?\\s)(\\S+?)\\s*=\\s*('|\")?$/ : new RegExp('^(?:|[\\\\S\\\\s]*?\\\\s)(' + name + ')\\\\s*=\\\\s*(\\'|\")[\\\\S\\\\s]*', 'i'), '$1');\n var value = attributes[realName] || // the following ignore is covered by browsers\n // while basicHTML is already case-sensitive\n\n /* istanbul ignore next */\n attributes[realName.toLowerCase()];\n if (direct) holes.push(Attr(value, path, realName, null));else {\n var skip = sparse.length - 2;\n\n while (skip--) {\n parts.shift();\n }\n\n holes.push(Attr(value, path, realName, sparse));\n }\n }\n\n remove.push(attribute);\n }\n }\n\n length = remove.length;\n i = 0;\n /* istanbul ignore next */\n\n var cleanValue = 0 < length && UID_IE && !('ownerSVGElement' in node);\n\n while (i < length) {\n // Edge HTML bug #16878726\n var attr = remove[i++]; // IE/Edge bug lighterhtml#63 - clean the value or it'll persist\n\n /* istanbul ignore next */\n\n if (cleanValue) attr.value = ''; // IE/Edge bug lighterhtml#64 - don't use removeAttributeNode\n\n node.removeAttribute(attr.name);\n } // This is a very specific Firefox/Safari issue\n // but since it should be a not so common pattern,\n // it's probably worth patching regardless.\n // Basically, scripts created through strings are death.\n // You need to create fresh new scripts instead.\n // TODO: is there any other node that needs such nonsense?\n\n\n var nodeName = node.nodeName;\n\n if (/^script$/i.test(nodeName)) {\n // this used to be like that\n // var script = createElement(node, nodeName);\n // then Edge arrived and decided that scripts created\n // through template documents aren't worth executing\n // so it became this ... hopefully it won't hurt in the wild\n var script = document.createElement(nodeName);\n length = attributes.length;\n i = 0;\n\n while (i < length) {\n script.setAttributeNode(attributes[i++].cloneNode(true));\n }\n\n script.textContent = node.textContent;\n node.parentNode.replaceChild(script, node);\n }\n }\n\n function Any(node, path) {\n return {\n type: 'any',\n node: node,\n path: path\n };\n }\n\n function Attr(node, path, name, sparse) {\n return {\n type: 'attr',\n node: node,\n path: path,\n name: name,\n sparse: sparse\n };\n }\n\n function Text(node, path) {\n return {\n type: 'text',\n node: node,\n path: path\n };\n }\n\n // globals\n var parsed = umap(new WeakMap$1());\n\n function createInfo(options, template) {\n var markup = (options.convert || sanitize)(template);\n var transform = options.transform;\n if (transform) markup = transform(markup);\n var content = createContent(markup, options.type);\n cleanContent(content);\n var holes = [];\n parse(content, holes, template.slice(0), []);\n return {\n content: content,\n updates: function updates(content) {\n var updates = [];\n var len = holes.length;\n var i = 0;\n var off = 0;\n\n while (i < len) {\n var info = holes[i++];\n var node = find(content, info.path);\n\n switch (info.type) {\n case 'any':\n updates.push({\n fn: options.any(node, []),\n sparse: false\n });\n break;\n\n case 'attr':\n var sparse = info.sparse;\n var fn = options.attribute(node, info.name, info.node);\n if (sparse === null) updates.push({\n fn: fn,\n sparse: false\n });else {\n off += sparse.length - 2;\n updates.push({\n fn: fn,\n sparse: true,\n values: sparse\n });\n }\n break;\n\n case 'text':\n updates.push({\n fn: options.text(node),\n sparse: false\n });\n node.textContent = '';\n break;\n }\n }\n\n len += off;\n return function () {\n var length = arguments.length;\n\n if (len !== length - 1) {\n throw new Error(length - 1 + ' values instead of ' + len + '\\n' + template.join('${value}'));\n }\n\n var i = 1;\n var off = 1;\n\n while (i < length) {\n var update = updates[i - off];\n\n if (update.sparse) {\n var values = update.values;\n var value = values[0];\n var j = 1;\n var l = values.length;\n off += l - 2;\n\n while (j < l) {\n value += arguments[i++] + values[j++];\n }\n\n update.fn(value);\n } else update.fn(arguments[i++]);\n }\n\n return content;\n };\n }\n };\n }\n\n function createDetails(options, template) {\n var info = parsed.get(template) || parsed.set(template, createInfo(options, template));\n return info.updates(importNode.call(document, info.content, true));\n }\n\n var empty = [];\n\n function domtagger(options) {\n var previous = empty;\n var updates = cleanContent;\n return function (template) {\n if (previous !== template) updates = createDetails(options, previous = template);\n return updates.apply(null, arguments);\n };\n }\n\n function cleanContent(fragment) {\n var childNodes = fragment.childNodes;\n var i = childNodes.length;\n\n while (i--) {\n var child = childNodes[i];\n\n if (child.nodeType !== 1 && trim.call(child.textContent).length === 0) {\n fragment.removeChild(child);\n }\n }\n }\n\n /*! (c) Andrea Giammarchi - ISC */\n var hyperStyle = function () {\n\n var IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;\n var hyphen = /([^A-Z])([A-Z]+)/g;\n return function hyperStyle(node, original) {\n return 'ownerSVGElement' in node ? svg(node, original) : update(node.style, false);\n };\n\n function ized($0, $1, $2) {\n return $1 + '-' + $2.toLowerCase();\n }\n\n function svg(node, original) {\n var style;\n if (original) style = original.cloneNode(true);else {\n node.setAttribute('style', '--hyper:style;');\n style = node.getAttributeNode('style');\n }\n style.value = '';\n node.setAttributeNode(style);\n return update(style, true);\n }\n\n function toStyle(object) {\n var key,\n css = [];\n\n for (key in object) {\n css.push(key.replace(hyphen, ized), ':', object[key], ';');\n }\n\n return css.join('');\n }\n\n function update(style, isSVG) {\n var oldType, oldValue;\n return function (newValue) {\n var info, key, styleValue, value;\n\n switch (_typeof(newValue)) {\n case 'object':\n if (newValue) {\n if (oldType === 'object') {\n if (!isSVG) {\n if (oldValue !== newValue) {\n for (key in oldValue) {\n if (!(key in newValue)) {\n style[key] = '';\n }\n }\n }\n }\n } else {\n if (isSVG) style.value = '';else style.cssText = '';\n }\n\n info = isSVG ? {} : style;\n\n for (key in newValue) {\n value = newValue[key];\n styleValue = typeof value === 'number' && !IS_NON_DIMENSIONAL.test(key) ? value + 'px' : value;\n if (!isSVG && /^--/.test(key)) info.setProperty(key, styleValue);else info[key] = styleValue;\n }\n\n oldType = 'object';\n if (isSVG) style.value = toStyle(oldValue = info);else oldValue = newValue;\n break;\n }\n\n default:\n if (oldValue != newValue) {\n oldType = 'string';\n oldValue = newValue;\n if (isSVG) style.value = newValue || '';else style.cssText = newValue || '';\n }\n\n break;\n }\n };\n }\n }();\n\n /*! (c) Andrea Giammarchi - ISC */\n var Wire = function (slice, proto) {\n proto = Wire.prototype;\n proto.ELEMENT_NODE = 1;\n proto.nodeType = 111;\n\n proto.remove = function (keepFirst) {\n var childNodes = this.childNodes;\n var first = this.firstChild;\n var last = this.lastChild;\n this._ = null;\n\n if (keepFirst && childNodes.length === 2) {\n last.parentNode.removeChild(last);\n } else {\n var range = this.ownerDocument.createRange();\n range.setStartBefore(keepFirst ? childNodes[1] : first);\n range.setEndAfter(last);\n range.deleteContents();\n }\n\n return first;\n };\n\n proto.valueOf = function (forceAppend) {\n var fragment = this._;\n var noFragment = fragment == null;\n if (noFragment) fragment = this._ = this.ownerDocument.createDocumentFragment();\n\n if (noFragment || forceAppend) {\n for (var n = this.childNodes, i = 0, l = n.length; i < l; i++) {\n fragment.appendChild(n[i]);\n }\n }\n\n return fragment;\n };\n\n return Wire;\n\n function Wire(childNodes) {\n var nodes = this.childNodes = slice.call(childNodes, 0);\n this.firstChild = nodes[0];\n this.lastChild = nodes[nodes.length - 1];\n this.ownerDocument = nodes[0].ownerDocument;\n this._ = null;\n }\n }([].slice);\n\n // Node.CONSTANTS\n var DOCUMENT_FRAGMENT_NODE = 11; // SVG related constants\n\n var OWNER_SVG_ELEMENT = 'ownerSVGElement'; // Custom Elements / MutationObserver constants\n\n var CONNECTED = 'connected';\n var DISCONNECTED = 'dis' + CONNECTED;\n\n var componentType = Component.prototype.nodeType;\n var wireType = Wire.prototype.nodeType;\n var observe = disconnected({\n Event: CustomEvent$1,\n WeakSet: WeakSet$1\n });\n\n var asHTML = function asHTML(html) {\n return {\n html: html\n };\n }; // returns nodes from wires and components\n\n\n var asNode = function asNode(item, i) {\n switch (item.nodeType) {\n case wireType:\n // in the Wire case, the content can be\n // removed, post-pended, inserted, or pre-pended and\n // all these cases are handled by domdiff already\n\n /* istanbul ignore next */\n return 1 / i < 0 ? i ? item.remove(true) : item.lastChild : i ? item.valueOf(true) : item.firstChild;\n\n case componentType:\n return asNode(item.render(), i);\n\n default:\n return item;\n }\n }; // returns true if domdiff can handle the value\n\n\n var canDiff = function canDiff(value) {\n return 'ELEMENT_NODE' in value;\n }; // borrowed from uhandlers\n // https://github.com/WebReflection/uhandlers\n\n\n var booleanSetter = function booleanSetter(node, key, oldValue) {\n return function (newValue) {\n if (oldValue !== !!newValue) {\n if (oldValue = !!newValue) node.setAttribute(key, '');else node.removeAttribute(key);\n }\n };\n };\n\n var hyperSetter = function hyperSetter(node, name, svg) {\n return svg ? function (value) {\n try {\n node[name] = value;\n } catch (nope) {\n node.setAttribute(name, value);\n }\n } : function (value) {\n node[name] = value;\n };\n }; // when a Promise is used as interpolation value\n // its result must be parsed once resolved.\n // This callback is in charge of understanding what to do\n // with a returned value once the promise is resolved.\n\n\n var invokeAtDistance = function invokeAtDistance(value, callback) {\n callback(value.placeholder);\n\n if ('text' in value) {\n Promise.resolve(value.text).then(String).then(callback);\n } else if ('any' in value) {\n Promise.resolve(value.any).then(callback);\n } else if ('html' in value) {\n Promise.resolve(value.html).then(asHTML).then(callback);\n } else {\n Promise.resolve(Intent.invoke(value, callback)).then(callback);\n }\n }; // quick and dirty way to check for Promise/ish values\n\n\n var isPromise_ish = function isPromise_ish(value) {\n return value != null && 'then' in value;\n }; // list of attributes that should not be directly assigned\n\n\n var readOnly = /^(?:form|list)$/i; // reused every slice time\n\n var slice = [].slice; // simplifies text node creation\n\n var text = function text(node, _text) {\n return node.ownerDocument.createTextNode(_text);\n };\n\n function Tagger(type) {\n this.type = type;\n return domtagger(this);\n }\n\n Tagger.prototype = {\n // there are four kind of attributes, and related behavior:\n // * events, with a name starting with `on`, to add/remove event listeners\n // * special, with a name present in their inherited prototype, accessed directly\n // * regular, accessed through get/setAttribute standard DOM methods\n // * style, the only regular attribute that also accepts an object as value\n // so that you can style=${{width: 120}}. In this case, the behavior has been\n // fully inspired by Preact library and its simplicity.\n attribute: function attribute(node, name, original) {\n var isSVG = (OWNER_SVG_ELEMENT in node);\n var oldValue; // if the attribute is the style one\n // handle it differently from others\n\n if (name === 'style') return hyperStyle(node, original, isSVG); // direct accessors for and friends\n else if (name.slice(0, 1) === '.') return hyperSetter(node, name.slice(1), isSVG); // boolean accessors for and friends\n else if (name.slice(0, 1) === '?') return booleanSetter(node, name.slice(1)); // the name is an event one,\n // add/remove event listeners accordingly\n else if (/^on/.test(name)) {\n var type = name.slice(2);\n\n if (type === CONNECTED || type === DISCONNECTED) {\n observe(node);\n } else if (name.toLowerCase() in node) {\n type = type.toLowerCase();\n }\n\n return function (newValue) {\n if (oldValue !== newValue) {\n if (oldValue) node.removeEventListener(type, oldValue, false);\n oldValue = newValue;\n if (newValue) node.addEventListener(type, newValue, false);\n }\n };\n } // the attribute is special ('value' in input)\n // and it's not SVG *or* the name is exactly data,\n // in this case assign the value directly\n else if (name === 'data' || !isSVG && name in node && !readOnly.test(name)) {\n return function (newValue) {\n if (oldValue !== newValue) {\n oldValue = newValue;\n\n if (node[name] !== newValue && newValue == null) {\n // cleanup on null to avoid silly IE/Edge bug\n node[name] = '';\n node.removeAttribute(name);\n } else node[name] = newValue;\n }\n };\n } else if (name in Intent.attributes) {\n return function (any) {\n var newValue = Intent.attributes[name](node, any);\n\n if (oldValue !== newValue) {\n oldValue = newValue;\n if (newValue == null) node.removeAttribute(name);else node.setAttribute(name, newValue);\n }\n };\n } // in every other case, use the attribute node as it is\n // update only the value, set it as node only when/if needed\n else {\n var owner = false;\n var attribute = original.cloneNode(true);\n return function (newValue) {\n if (oldValue !== newValue) {\n oldValue = newValue;\n\n if (attribute.value !== newValue) {\n if (newValue == null) {\n if (owner) {\n owner = false;\n node.removeAttributeNode(attribute);\n }\n\n attribute.value = newValue;\n } else {\n attribute.value = newValue;\n\n if (!owner) {\n owner = true;\n node.setAttributeNode(attribute);\n }\n }\n }\n }\n };\n }\n },\n // in a hyper(node)`
${content}
` case\n // everything could happen:\n // * it's a JS primitive, stored as text\n // * it's null or undefined, the node should be cleaned\n // * it's a component, update the content by rendering it\n // * it's a promise, update the content once resolved\n // * it's an explicit intent, perform the desired operation\n // * it's an Array, resolve all values if Promises and/or\n // update the node with the resulting list of content\n any: function any(node, childNodes) {\n var diffOptions = {\n node: asNode,\n before: node\n };\n var nodeType = OWNER_SVG_ELEMENT in node ?\n /* istanbul ignore next */\n 'svg' : 'html';\n var fastPath = false;\n var oldValue;\n\n var anyContent = function anyContent(value) {\n switch (_typeof(value)) {\n case 'string':\n case 'number':\n case 'boolean':\n if (fastPath) {\n if (oldValue !== value) {\n oldValue = value;\n childNodes[0].textContent = value;\n }\n } else {\n fastPath = true;\n oldValue = value;\n childNodes = domdiff(node.parentNode, childNodes, [text(node, value)], diffOptions);\n }\n\n break;\n\n case 'function':\n anyContent(value(node));\n break;\n\n case 'object':\n case 'undefined':\n if (value == null) {\n fastPath = false;\n childNodes = domdiff(node.parentNode, childNodes, [], diffOptions);\n break;\n }\n\n default:\n fastPath = false;\n oldValue = value;\n\n if (isArray(value)) {\n if (value.length === 0) {\n if (childNodes.length) {\n childNodes = domdiff(node.parentNode, childNodes, [], diffOptions);\n }\n } else {\n switch (_typeof(value[0])) {\n case 'string':\n case 'number':\n case 'boolean':\n anyContent({\n html: value\n });\n break;\n\n case 'object':\n if (isArray(value[0])) {\n value = value.concat.apply([], value);\n }\n\n if (isPromise_ish(value[0])) {\n Promise.all(value).then(anyContent);\n break;\n }\n\n default:\n childNodes = domdiff(node.parentNode, childNodes, value, diffOptions);\n break;\n }\n }\n } else if (canDiff(value)) {\n childNodes = domdiff(node.parentNode, childNodes, value.nodeType === DOCUMENT_FRAGMENT_NODE ? slice.call(value.childNodes) : [value], diffOptions);\n } else if (isPromise_ish(value)) {\n value.then(anyContent);\n } else if ('placeholder' in value) {\n invokeAtDistance(value, anyContent);\n } else if ('text' in value) {\n anyContent(String(value.text));\n } else if ('any' in value) {\n anyContent(value.any);\n } else if ('html' in value) {\n childNodes = domdiff(node.parentNode, childNodes, slice.call(createContent([].concat(value.html).join(''), nodeType).childNodes), diffOptions);\n } else if ('length' in value) {\n anyContent(slice.call(value));\n } else {\n anyContent(Intent.invoke(value, anyContent));\n }\n\n break;\n }\n };\n\n return anyContent;\n },\n // style or textareas don't accept HTML as content\n // it's pointless to transform or analyze anything\n // different from text there but it's worth checking\n // for possible defined intents.\n text: function text(node) {\n var oldValue;\n\n var textContent = function textContent(value) {\n if (oldValue !== value) {\n oldValue = value;\n\n var type = _typeof(value);\n\n if (type === 'object' && value) {\n if (isPromise_ish(value)) {\n value.then(textContent);\n } else if ('placeholder' in value) {\n invokeAtDistance(value, textContent);\n } else if ('text' in value) {\n textContent(String(value.text));\n } else if ('any' in value) {\n textContent(value.any);\n } else if ('html' in value) {\n textContent([].concat(value.html).join(''));\n } else if ('length' in value) {\n textContent(slice.call(value).join(''));\n } else {\n textContent(Intent.invoke(value, textContent));\n }\n } else if (type === 'function') {\n textContent(value(node));\n } else {\n node.textContent = value == null ? '' : value;\n }\n }\n };\n\n return textContent;\n }\n };\n\n var isNoOp = (typeof document === \"undefined\" ? \"undefined\" : _typeof(document)) !== 'object';\n\n var _templateLiteral = function templateLiteral(tl) {\n var RAW = 'raw';\n\n var isBroken = function isBroken(UA) {\n return /(Firefox|Safari)\\/(\\d+)/.test(UA) && !/(Chrom[eium]+|Android)\\/(\\d+)/.test(UA);\n };\n\n var broken = isBroken((document.defaultView.navigator || {}).userAgent);\n var FTS = !(RAW in tl) || tl.propertyIsEnumerable(RAW) || !Object.isFrozen(tl[RAW]);\n\n if (broken || FTS) {\n var forever = {};\n\n var foreverCache = function foreverCache(tl) {\n for (var key = '.', i = 0; i < tl.length; i++) {\n key += tl[i].length + '.' + tl[i];\n }\n\n return forever[key] || (forever[key] = tl);\n }; // Fallback TypeScript shenanigans\n\n\n if (FTS) _templateLiteral = foreverCache; // try fast path for other browsers:\n // store the template as WeakMap key\n // and forever cache it only when it's not there.\n // this way performance is still optimal,\n // penalized only when there are GC issues\n else {\n var wm = new WeakMap$1();\n\n var set = function set(tl, unique) {\n wm.set(tl, unique);\n return unique;\n };\n\n _templateLiteral = function templateLiteral(tl) {\n return wm.get(tl) || set(tl, foreverCache(tl));\n };\n }\n } else {\n isNoOp = true;\n }\n\n return TL(tl);\n };\n\n function TL(tl) {\n return isNoOp ? tl : _templateLiteral(tl);\n }\n\n function tta (template) {\n var length = arguments.length;\n var args = [TL(template)];\n var i = 1;\n\n while (i < length) {\n args.push(arguments[i++]);\n }\n\n return args;\n }\n /**\n * best benchmark goes here\n * https://jsperf.com/tta-bench\n * I should probably have an @ungap/template-literal-es too\n export default (...args) => {\n args[0] = unique(args[0]);\n return args;\n };\n */\n\n var wires = new WeakMap$1(); // A wire is a callback used as tag function\n // to lazily relate a generic object to a template literal.\n // hyper.wire(user)`
${user.name}
`; => the div#user\n // This provides the ability to have a unique DOM structure\n // related to a unique JS object through a reusable template literal.\n // A wire can specify a type, as svg or html, and also an id\n // via html:id or :id convention. Such :id allows same JS objects\n // to be associated to different DOM structures accordingly with\n // the used template literal without losing previously rendered parts.\n\n var wire = function wire(obj, type) {\n return obj == null ? content(type || 'html') : weakly(obj, type || 'html');\n }; // A wire content is a virtual reference to one or more nodes.\n // It's represented by either a DOM node, or an Array.\n // In both cases, the wire content role is to simply update\n // all nodes through the list of related callbacks.\n // In few words, a wire content is like an invisible parent node\n // in charge of updating its content like a bound element would do.\n\n\n var content = function content(type) {\n var wire, tagger, template;\n return function () {\n var args = tta.apply(null, arguments);\n\n if (template !== args[0]) {\n template = args[0];\n tagger = new Tagger(type);\n wire = wireContent(tagger.apply(tagger, args));\n } else {\n tagger.apply(tagger, args);\n }\n\n return wire;\n };\n }; // wires are weakly created through objects.\n // Each object can have multiple wires associated\n // and this is thanks to the type + :id feature.\n\n\n var weakly = function weakly(obj, type) {\n var i = type.indexOf(':');\n var wire = wires.get(obj);\n var id = type;\n\n if (-1 < i) {\n id = type.slice(i + 1);\n type = type.slice(0, i) || 'html';\n }\n\n if (!wire) wires.set(obj, wire = {});\n return wire[id] || (wire[id] = content(type));\n }; // A document fragment loses its nodes \n // as soon as it is appended into another node.\n // This has the undesired effect of losing wired content\n // on a second render call, because (by then) the fragment would be empty:\n // no longer providing access to those sub-nodes that ultimately need to\n // stay associated with the original interpolation.\n // To prevent hyperHTML from forgetting about a fragment's sub-nodes,\n // fragments are instead returned as an Array of nodes or, if there's only one entry,\n // as a single referenced node which, unlike fragments, will indeed persist\n // wire content throughout multiple renderings.\n // The initial fragment, at this point, would be used as unique reference to this\n // array of nodes or to this single referenced node.\n\n\n var wireContent = function wireContent(node) {\n var childNodes = node.childNodes;\n var length = childNodes.length;\n return length === 1 ? childNodes[0] : length ? new Wire(childNodes) : node;\n };\n\n // are already known to hyperHTML\n\n var bewitched = new WeakMap$1(); // better known as hyper.bind(node), the render is\n // the main tag function in charge of fully upgrading\n // or simply updating, contexts used as hyperHTML targets.\n // The `this` context is either a regular DOM node or a fragment.\n\n function render() {\n var wicked = bewitched.get(this);\n var args = tta.apply(null, arguments);\n\n if (wicked && wicked.template === args[0]) {\n wicked.tagger.apply(null, args);\n } else {\n upgrade.apply(this, args);\n }\n\n return this;\n } // an upgrade is in charge of collecting template info,\n // parse it once, if unknown, to map all interpolations\n // as single DOM callbacks, relate such template\n // to the current context, and render it after cleaning the context up\n\n\n function upgrade(template) {\n var type = OWNER_SVG_ELEMENT in this ? 'svg' : 'html';\n var tagger = new Tagger(type);\n bewitched.set(this, {\n tagger: tagger,\n template: template\n });\n this.textContent = '';\n this.appendChild(tagger.apply(null, arguments));\n }\n\n /*! (c) Andrea Giammarchi (ISC) */\n // you can do the following\n // const {bind, wire} = hyperHTML;\n // and use them right away: bind(node)`hello!`;\n\n var bind = function bind(context) {\n return render.bind(context);\n };\n\n var define = Intent.define;\n var tagger = Tagger.prototype;\n hyper.Component = Component;\n hyper.bind = bind;\n hyper.define = define;\n hyper.diff = domdiff;\n hyper.hyper = hyper;\n hyper.observe = observe;\n hyper.tagger = tagger;\n hyper.wire = wire; // exported as shared utils\n // for projects based on hyperHTML\n // that don't necessarily need upfront polyfills\n // i.e. those still targeting IE\n\n hyper._ = {\n WeakMap: WeakMap$1,\n WeakSet: WeakSet$1\n }; // the wire content is the lazy defined\n // html or svg property of each hyper.Component\n\n setup(content); // everything is exported directly or through the\n // that \"magically\" understands what's the best\n // thing to do with passed arguments\n\n function hyper(HTML) {\n 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);\n }\n\n var ATTRIBUTE_CHANGED_CALLBACK = 'attributeChangedCallback';\n var O = Object;\n var classes = [];\n var defineProperty = O.defineProperty;\n var getOwnPropertyDescriptor = O.getOwnPropertyDescriptor;\n var getOwnPropertyNames = O.getOwnPropertyNames;\n /* istanbul ignore next */\n\n var getOwnPropertySymbols = O.getOwnPropertySymbols || function () {\n return [];\n };\n /* istanbul ignore next */\n\n\n var getPrototypeOf = O.getPrototypeOf || function (o) {\n return o.__proto__;\n };\n /* istanbul ignore next */\n\n\n var ownKeys = (typeof Reflect === \"undefined\" ? \"undefined\" : _typeof(Reflect)) === 'object' && Reflect.ownKeys || function (o) {\n return getOwnPropertyNames(o).concat(getOwnPropertySymbols(o));\n };\n /* istanbul ignore next */\n\n\n var setPrototypeOf = O.setPrototypeOf || function (o, p) {\n return o.__proto__ = p, o;\n };\n /* istanbul ignore stop */\n\n\n var camel = function camel(name) {\n return name.replace(/-([a-z])/g, function ($0, $1) {\n return $1.toUpperCase();\n });\n };\n\n var _attachShadow = HTMLElement.prototype.attachShadow;\n var sr = new WeakMap();\n\n var HyperHTMLElement = /*#__PURE__*/function (_HTMLElement) {\n _inherits(HyperHTMLElement, _HTMLElement);\n\n var _super = _createSuper(HyperHTMLElement);\n\n function HyperHTMLElement() {\n _classCallCheck(this, HyperHTMLElement);\n\n return _super.apply(this, arguments);\n }\n\n _createClass(HyperHTMLElement, [{\n key: \"attachShadow\",\n value: // weakly relate the shadowRoot for refs usage\n function attachShadow() {\n var shadowRoot = _attachShadow.apply(this, arguments);\n\n sr.set(this, shadowRoot);\n return shadowRoot;\n } // returns elements by ref\n\n }, {\n key: \"refs\",\n get: function get() {\n var value = {};\n\n if ('_html$' in this) {\n var all = (sr.get(this) || this).querySelectorAll('[ref]');\n\n for (var length = all.length, i = 0; i < length; i++) {\n var node = all[i];\n value[node.getAttribute('ref')] = node;\n }\n\n Object.defineProperty(this, 'refs', {\n value: value\n });\n return value;\n }\n\n return value;\n } // lazily bind once hyperHTML logic\n // to either the shadowRoot, if present and open,\n // the _shadowRoot property, if set due closed shadow root,\n // or the custom-element itself if no Shadow DOM is used.\n\n }, {\n key: \"html\",\n get: function get() {\n return this._html$ || (this.html = bind( // in a way or another, bind to the right node\n // backward compatible, first two could probably go already\n this.shadowRoot || this._shadowRoot || sr.get(this) || this));\n } // it can be set too if necessary, it won't invoke render()\n ,\n set: function set(value) {\n defineProperty(this, '_html$', {\n configurable: true,\n value: value\n });\n } // overwrite this method with your own render\n\n }, {\n key: \"render\",\n value: function render() {} // ---------------------//\n // Basic State Handling //\n // ---------------------//\n // define the default state object\n // you could use observed properties too\n\n }, {\n key: \"defaultState\",\n get: function get() {\n return {};\n } // the state with a default\n\n }, {\n key: \"state\",\n get: function get() {\n return this._state$ || (this.state = this.defaultState);\n } // it can be set too if necessary, it won't invoke render()\n ,\n set: function set(value) {\n defineProperty(this, '_state$', {\n configurable: true,\n value: value\n });\n } // currently a state is a shallow copy, like in Preact or other libraries.\n // after the state is updated, the render() method will be invoked.\n // ⚠️ do not ever call this.setState() inside this.render()\n\n }, {\n key: \"setState\",\n value: function setState(state, render) {\n var target = this.state;\n var source = typeof state === 'function' ? state.call(this, target) : state;\n\n for (var key in source) {\n target[key] = source[key];\n }\n\n if (render !== false) this.render();\n return this;\n }\n }], [{\n key: \"define\",\n value: // define a custom-element in the CustomElementsRegistry\n // class MyEl extends HyperHTMLElement {}\n // MyEl.define('my-el');\n function define(name, options) {\n var Class = this;\n var proto = Class.prototype;\n var onChanged = proto[ATTRIBUTE_CHANGED_CALLBACK];\n var hasChange = !!onChanged; // Class.booleanAttributes\n // -----------------------------------------------\n // attributes defined as boolean will have\n // an either available or not available attribute\n // regardless of the value.\n // All falsy values, or \"false\", mean attribute removed\n // while truthy values will be set as is.\n // Boolean attributes are also automatically observed.\n\n var booleanAttributes = Class.booleanAttributes || [];\n booleanAttributes.forEach(function (attribute) {\n var name = camel(attribute);\n if (!(name in proto)) defineProperty(proto, name, {\n configurable: true,\n get: function get() {\n return this.hasAttribute(attribute);\n },\n set: function set(value) {\n if (!value || value === 'false') this.removeAttribute(attribute);else this.setAttribute(attribute, '');\n }\n });\n }); // Class.observedAttributes\n // -------------------------------------------------------\n // HyperHTMLElement will directly reflect get/setAttribute\n // operation once these attributes are used, example:\n // el.observed = 123;\n // will automatically do\n // el.setAttribute('observed', 123);\n // triggering also the attributeChangedCallback\n\n var observedAttributes = (Class.observedAttributes || []).filter(function (attribute) {\n return booleanAttributes.indexOf(attribute) < 0;\n });\n observedAttributes.forEach(function (attribute) {\n // it is possible to redefine the behavior at any time\n // simply overwriting get prop() and set prop(value)\n var name = camel(attribute);\n if (!(name in proto)) defineProperty(proto, name, {\n configurable: true,\n get: function get() {\n return this.getAttribute(attribute);\n },\n set: function set(value) {\n if (value == null) this.removeAttribute(attribute);else this.setAttribute(attribute, value);\n }\n });\n }); // if these are defined, overwrite the observedAttributes getter\n // to include also booleanAttributes\n\n var attributes = booleanAttributes.concat(observedAttributes);\n if (attributes.length) defineProperty(Class, 'observedAttributes', {\n get: function get() {\n return attributes;\n }\n }); // created() {}\n // ---------------------------------\n // an initializer method that grants\n // the node is fully known to the browser.\n // It is ensured to run either after DOMContentLoaded,\n // or once there is a next sibling (stream-friendly) so that\n // you have full access to element attributes and/or childNodes.\n\n var created = proto.created || function () {\n this.render();\n }; // used to ensure create() is called once and once only\n\n\n defineProperty(proto, '_init$', {\n configurable: true,\n writable: true,\n value: true\n });\n defineProperty(proto, ATTRIBUTE_CHANGED_CALLBACK, {\n configurable: true,\n value: function aCC(name, prev, curr) {\n if (this._init$) {\n checkReady.call(this, created, attributes, booleanAttributes);\n if (this._init$) return this._init$$.push(aCC.bind(this, name, prev, curr));\n } // ensure setting same value twice\n // won't trigger twice attributeChangedCallback\n\n\n if (hasChange && prev !== curr) {\n onChanged.apply(this, arguments);\n }\n }\n });\n var onConnected = proto.connectedCallback;\n var hasConnect = !!onConnected;\n defineProperty(proto, 'connectedCallback', {\n configurable: true,\n value: function cC() {\n if (this._init$) {\n checkReady.call(this, created, attributes, booleanAttributes);\n if (this._init$) return this._init$$.push(cC.bind(this));\n }\n\n if (hasConnect) {\n onConnected.apply(this, arguments);\n }\n }\n }); // define lazily all handlers\n // class { handleClick() { ... }\n // render() { `` } }\n\n getOwnPropertyNames(proto).forEach(function (key) {\n if (/^handle[A-Z]/.test(key)) {\n var _key$ = '_' + key + '$';\n\n var method = proto[key];\n defineProperty(proto, key, {\n configurable: true,\n get: function get() {\n return this[_key$] || (this[_key$] = method.bind(this));\n }\n });\n }\n }); // whenever you want to directly use the component itself\n // as EventListener, you can pass it directly.\n // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38\n // class Reactive extends HyperHTMLElement {\n // oninput(e) { console.log(this, 'changed', e.target.value); }\n // render() { this.html``; }\n // }\n\n if (!('handleEvent' in proto)) {\n defineProperty(proto, 'handleEvent', {\n configurable: true,\n value: function value(event) {\n this[(event.currentTarget.dataset || {}).call || 'on' + event.type](event);\n }\n });\n }\n\n if (options && options[\"extends\"]) {\n var Native = document.createElement(options[\"extends\"]).constructor;\n\n var Intermediate = /*#__PURE__*/function (_Native) {\n _inherits(Intermediate, _Native);\n\n var _super2 = _createSuper(Intermediate);\n\n function Intermediate() {\n _classCallCheck(this, Intermediate);\n\n return _super2.apply(this, arguments);\n }\n\n return Intermediate;\n }(Native);\n\n var ckeys = ['length', 'name', 'arguments', 'caller', 'prototype'];\n var pkeys = [];\n var Super = null;\n var BaseClass = Class;\n\n while (Super = getPrototypeOf(BaseClass)) {\n [{\n target: Intermediate,\n base: Super,\n keys: ckeys\n }, {\n target: Intermediate.prototype,\n base: Super.prototype,\n keys: pkeys\n }].forEach(function (_ref) {\n var target = _ref.target,\n base = _ref.base,\n keys = _ref.keys;\n ownKeys(base).filter(function (key) {\n return keys.indexOf(key) < 0;\n }).forEach(function (key) {\n keys.push(key);\n defineProperty(target, key, getOwnPropertyDescriptor(base, key));\n });\n });\n BaseClass = Super;\n if (Super === HyperHTMLElement) break;\n }\n\n setPrototypeOf(Class, Intermediate);\n setPrototypeOf(proto, Intermediate.prototype);\n customElements.define(name, Class, options);\n } else {\n customElements.define(name, Class);\n }\n\n classes.push(Class);\n return Class;\n }\n }]);\n\n return HyperHTMLElement;\n }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));\n\n HyperHTMLElement.Component = Component;\n HyperHTMLElement.bind = bind;\n HyperHTMLElement.intent = define;\n HyperHTMLElement.wire = wire;\n HyperHTMLElement.hyper = hyper;\n\n try {\n if (Symbol.hasInstance) classes.push(defineProperty(HyperHTMLElement, Symbol.hasInstance, {\n enumerable: false,\n configurable: true,\n value: function value(instance) {\n return classes.some(isPrototypeOf, getPrototypeOf(instance));\n }\n }));\n } catch (meh) {}\n // DOMContentLoaded VS created() //\n // ------------------------------//\n\n var dom = {\n type: 'DOMContentLoaded',\n handleEvent: function handleEvent() {\n if (dom.ready()) {\n document.removeEventListener(dom.type, dom, false);\n dom.list.splice(0).forEach(invoke);\n } else setTimeout(dom.handleEvent);\n },\n ready: function ready() {\n return document.readyState === 'complete';\n },\n list: []\n };\n\n if (!dom.ready()) {\n document.addEventListener(dom.type, dom, false);\n }\n\n function checkReady(created, attributes, booleanAttributes) {\n if (dom.ready() || isReady.call(this, created, attributes, booleanAttributes)) {\n if (this._init$) {\n var list = this._init$$ || [];\n delete this._init$$;\n var self = defineProperty(this, '_init$', {\n value: false\n });\n booleanAttributes.forEach(function (name) {\n if (self.getAttribute(name) === 'false') self.removeAttribute(name);\n });\n attributes.forEach(function (name) {\n if (self.hasOwnProperty(name)) {\n var curr = self[name];\n delete self[name];\n list.unshift(function () {\n self[name] = curr;\n });\n }\n });\n created.call(self);\n list.forEach(invoke);\n }\n } else {\n if (!this.hasOwnProperty('_init$$')) defineProperty(this, '_init$$', {\n configurable: true,\n value: []\n });\n dom.list.push(checkReady.bind(this, created, attributes, booleanAttributes));\n }\n }\n\n function invoke(fn) {\n fn();\n }\n\n function isPrototypeOf(Class) {\n return this === Class.prototype;\n }\n\n function isReady(created, attributes, booleanAttributes) {\n var el = this;\n\n do {\n if (el.nextSibling) return true;\n } while (el = el.parentNode);\n\n setTimeout(checkReady.bind(this, created, attributes, booleanAttributes));\n return false;\n }\n\n exports['default'] = HyperHTMLElement;\n\n Object.defineProperty(exports, '__esModule', { value: true });\n\n return exports[\"default\"];\n\n}({}));\n" }, { "path": "esm/index.d.ts", "content": "import HyperHTMLElement from \"..\";\r\nexport * from '..';\r\nexport default HyperHTMLElement;" }, { "path": "esm/index.js", "content": "/*! (C) 2017-2018 Andrea Giammarchi - ISC Style License */\n\nimport {Component, bind, define, hyper, wire} from 'hyperhtml';\n\n// utils to deal with custom elements builtin extends\nconst ATTRIBUTE_CHANGED_CALLBACK = 'attributeChangedCallback';\nconst O = Object;\nconst classes = [];\nconst defineProperty = O.defineProperty;\nconst getOwnPropertyDescriptor = O.getOwnPropertyDescriptor;\nconst getOwnPropertyNames = O.getOwnPropertyNames;\n/* istanbul ignore next */\nconst getOwnPropertySymbols = O.getOwnPropertySymbols || (() => []);\n/* istanbul ignore next */\nconst getPrototypeOf = O.getPrototypeOf || (o => o.__proto__);\n/* istanbul ignore next */\nconst ownKeys = typeof Reflect === 'object' && Reflect.ownKeys ||\n (o => getOwnPropertyNames(o).concat(getOwnPropertySymbols(o)));\n/* istanbul ignore next */\nconst setPrototypeOf = O.setPrototypeOf ||\n ((o, p) => (o.__proto__ = p, o));\n/* istanbul ignore stop */\nconst camel = name => name.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase());\nconst {attachShadow} = HTMLElement.prototype;\nconst sr = new WeakMap;\n\nclass HyperHTMLElement extends HTMLElement {\n\n // define a custom-element in the CustomElementsRegistry\n // class MyEl extends HyperHTMLElement {}\n // MyEl.define('my-el');\n static define(name, options) {\n const Class = this;\n const proto = Class.prototype;\n\n const onChanged = proto[ATTRIBUTE_CHANGED_CALLBACK];\n const hasChange = !!onChanged;\n\n // Class.booleanAttributes\n // -----------------------------------------------\n // attributes defined as boolean will have\n // an either available or not available attribute\n // regardless of the value.\n // All falsy values, or \"false\", mean attribute removed\n // while truthy values will be set as is.\n // Boolean attributes are also automatically observed.\n const booleanAttributes = Class.booleanAttributes || [];\n booleanAttributes.forEach(attribute => {\n const name = camel(attribute);\n if (!(name in proto)) defineProperty(\n proto,\n name,\n {\n configurable: true,\n get() {\n return this.hasAttribute(attribute);\n },\n set(value) {\n if (!value || value === 'false')\n this.removeAttribute(attribute);\n else\n this.setAttribute(attribute, '');\n }\n }\n );\n });\n\n // Class.observedAttributes\n // -------------------------------------------------------\n // HyperHTMLElement will directly reflect get/setAttribute\n // operation once these attributes are used, example:\n // el.observed = 123;\n // will automatically do\n // el.setAttribute('observed', 123);\n // triggering also the attributeChangedCallback\n const observedAttributes = (Class.observedAttributes || []).filter(\n attribute => booleanAttributes.indexOf(attribute) < 0\n );\n observedAttributes.forEach(attribute => {\n // it is possible to redefine the behavior at any time\n // simply overwriting get prop() and set prop(value)\n const name = camel(attribute);\n if (!(name in proto)) defineProperty(\n proto,\n name,\n {\n configurable: true,\n get() {\n return this.getAttribute(attribute);\n },\n set(value) {\n if (value == null)\n this.removeAttribute(attribute);\n else\n this.setAttribute(attribute, value);\n }\n }\n );\n });\n\n // if these are defined, overwrite the observedAttributes getter\n // to include also booleanAttributes\n const attributes = booleanAttributes.concat(observedAttributes);\n if (attributes.length)\n defineProperty(Class, 'observedAttributes', {\n get() { return attributes; }\n });\n\n // created() {}\n // ---------------------------------\n // an initializer method that grants\n // the node is fully known to the browser.\n // It is ensured to run either after DOMContentLoaded,\n // or once there is a next sibling (stream-friendly) so that\n // you have full access to element attributes and/or childNodes.\n const created = proto.created || function () {\n this.render();\n };\n\n // used to ensure create() is called once and once only\n defineProperty(\n proto,\n '_init$',\n {\n configurable: true,\n writable: true,\n value: true\n }\n );\n\n defineProperty(\n proto,\n ATTRIBUTE_CHANGED_CALLBACK,\n {\n configurable: true,\n value: function aCC(name, prev, curr) {\n if (this._init$) {\n checkReady.call(this, created, attributes, booleanAttributes);\n if (this._init$)\n return this._init$$.push(aCC.bind(this, name, prev, curr));\n }\n // ensure setting same value twice\n // won't trigger twice attributeChangedCallback\n if (hasChange && prev !== curr) {\n onChanged.apply(this, arguments);\n }\n }\n }\n );\n\n const onConnected = proto.connectedCallback;\n const hasConnect = !!onConnected;\n defineProperty(\n proto,\n 'connectedCallback',\n {\n configurable: true,\n value: function cC() {\n if (this._init$) {\n checkReady.call(this, created, attributes, booleanAttributes);\n if (this._init$)\n return this._init$$.push(cC.bind(this));\n }\n if (hasConnect) {\n onConnected.apply(this, arguments);\n }\n }\n }\n );\n\n // define lazily all handlers\n // class { handleClick() { ... }\n // render() { `` } }\n getOwnPropertyNames(proto).forEach(key => {\n if (/^handle[A-Z]/.test(key)) {\n const _key$ = '_' + key + '$';\n const method = proto[key];\n defineProperty(proto, key, {\n configurable: true,\n get() {\n return this[_key$] ||\n (this[_key$] = method.bind(this));\n }\n });\n }\n });\n\n // whenever you want to directly use the component itself\n // as EventListener, you can pass it directly.\n // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38\n // class Reactive extends HyperHTMLElement {\n // oninput(e) { console.log(this, 'changed', e.target.value); }\n // render() { this.html``; }\n // }\n if (!('handleEvent' in proto)) {\n defineProperty(\n proto,\n 'handleEvent',\n {\n configurable: true,\n value(event) {\n this[\n (event.currentTarget.dataset || {}).call ||\n ('on' + event.type)\n ](event);\n }\n }\n );\n }\n\n if (options && options.extends) {\n const Native = document.createElement(options.extends).constructor;\n const Intermediate = class extends Native {};\n const ckeys = ['length', 'name', 'arguments', 'caller', 'prototype'];\n const pkeys = [];\n let Super = null;\n let BaseClass = Class;\n while (Super = getPrototypeOf(BaseClass)) {\n [\n {target: Intermediate, base: Super, keys: ckeys},\n {target: Intermediate.prototype, base: Super.prototype, keys: pkeys}\n ]\n .forEach(({target, base, keys}) => {\n ownKeys(base)\n .filter(key => keys.indexOf(key) < 0)\n .forEach((key) => {\n keys.push(key);\n defineProperty(\n target,\n key,\n getOwnPropertyDescriptor(base, key)\n );\n });\n });\n\n BaseClass = Super;\n if (Super === HyperHTMLElement)\n break;\n }\n setPrototypeOf(Class, Intermediate);\n setPrototypeOf(proto, Intermediate.prototype);\n customElements.define(name, Class, options);\n } else {\n customElements.define(name, Class);\n }\n classes.push(Class);\n return Class;\n }\n\n // weakly relate the shadowRoot for refs usage\n attachShadow() {\n const shadowRoot = attachShadow.apply(this, arguments);\n sr.set(this, shadowRoot);\n return shadowRoot;\n }\n\n // returns elements by ref\n get refs() {\n const value = {};\n if ('_html$' in this) {\n const all = (sr.get(this) || this).querySelectorAll('[ref]');\n for (let {length} = all, i = 0; i < length; i++) {\n const node = all[i];\n value[node.getAttribute('ref')] = node;\n }\n Object.defineProperty(this, 'refs', {value});\n return value;\n }\n return value;\n }\n\n // lazily bind once hyperHTML logic\n // to either the shadowRoot, if present and open,\n // the _shadowRoot property, if set due closed shadow root,\n // or the custom-element itself if no Shadow DOM is used.\n get html() {\n return this._html$ || (this.html = bind(\n // in a way or another, bind to the right node\n // backward compatible, first two could probably go already\n this.shadowRoot || this._shadowRoot || sr.get(this) || this\n ));\n }\n\n // it can be set too if necessary, it won't invoke render()\n set html(value) {\n defineProperty(this, '_html$', {configurable: true, value: value});\n }\n\n // overwrite this method with your own render\n render() {}\n\n // ---------------------//\n // Basic State Handling //\n // ---------------------//\n\n // define the default state object\n // you could use observed properties too\n get defaultState() { return {}; }\n\n // the state with a default\n get state() {\n return this._state$ || (this.state = this.defaultState);\n }\n\n // it can be set too if necessary, it won't invoke render()\n set state(value) {\n defineProperty(this, '_state$', {configurable: true, value: value});\n }\n\n // currently a state is a shallow copy, like in Preact or other libraries.\n // after the state is updated, the render() method will be invoked.\n // ⚠️ do not ever call this.setState() inside this.render()\n setState(state, render) {\n const target = this.state;\n const source = typeof state === 'function' ? state.call(this, target) : state;\n for (const key in source) target[key] = source[key];\n if (render !== false) this.render();\n return this;\n }\n\n};\n\n// exposing hyperHTML utilities\nHyperHTMLElement.Component = Component;\nHyperHTMLElement.bind = bind;\nHyperHTMLElement.intent = define;\nHyperHTMLElement.wire = wire;\nHyperHTMLElement.hyper = hyper;\n\ntry {\n if (Symbol.hasInstance) classes.push(\n defineProperty(HyperHTMLElement, Symbol.hasInstance, {\n enumerable: false,\n configurable: true,\n value(instance) {\n return classes.some(isPrototypeOf, getPrototypeOf(instance));\n }\n }));\n} catch(meh) {}\n\nexport default HyperHTMLElement;\n\n// ------------------------------//\n// DOMContentLoaded VS created() //\n// ------------------------------//\nconst dom = {\n type: 'DOMContentLoaded',\n handleEvent() {\n if (dom.ready()) {\n document.removeEventListener(dom.type, dom, false);\n dom.list.splice(0).forEach(invoke);\n }\n else\n setTimeout(dom.handleEvent);\n },\n ready() {\n return document.readyState === 'complete';\n },\n list: []\n};\n\nif (!dom.ready()) {\n document.addEventListener(dom.type, dom, false);\n}\n\nfunction checkReady(created, attributes, booleanAttributes) {\n if (dom.ready() || isReady.call(this, created, attributes, booleanAttributes)) {\n if (this._init$) {\n const list = this._init$$ || [];\n delete this._init$$;\n const self = defineProperty(this, '_init$', {value: false});\n booleanAttributes.forEach(name => {\n if (self.getAttribute(name) === 'false')\n self.removeAttribute(name);\n });\n attributes.forEach(name => {\n if (self.hasOwnProperty(name)) {\n const curr = self[name];\n delete self[name];\n list.unshift(() => { self[name] = curr; });\n }\n });\n created.call(self);\n list.forEach(invoke);\n }\n } else {\n if (!this.hasOwnProperty('_init$$'))\n defineProperty(this, '_init$$', {configurable: true, value: []});\n dom.list.push(checkReady.bind(this, created, attributes, booleanAttributes));\n }\n}\n\nfunction invoke(fn) {\n fn();\n}\n\nfunction isPrototypeOf(Class) {\n return this === Class.prototype;\n}\n\nfunction isReady(created, attributes, booleanAttributes) {\n let el = this;\n do { if (el.nextSibling) return true; }\n while (el = el.parentNode);\n setTimeout(checkReady.bind(this, created, attributes, booleanAttributes));\n return false;\n}\n" }, { "path": "esm.config.js", "content": "import resolve from 'rollup-plugin-node-resolve';\n\nexport default {\n input: 'esm/index.js',\n plugins: [\n resolve({\n module: true\n })\n ],\n context: 'null',\n moduleContext: 'null',\n output: {\n exports: 'named',\n file: 'index.js',\n format: 'iife',\n name: 'HyperHTMLElement'\n }\n};\n" }, { "path": "index.d.ts", "content": "import { bind, hyper, wire, define, Component, WiredTemplateFunction } from \"hyperhtml\";\n\ninterface HyperHTMLElement extends HTMLElement {\n onabort(ev: UIEvent): void;\n onactivate(this: HTMLElement, ev: Event): any;\n onbeforeactivate(this: HTMLElement, ev: Event): any;\n onbeforecopy(this: HTMLElement, ev: Event): any;\n onbeforecut(this: HTMLElement, ev: Event): any;\n onbeforedeactivate(this: HTMLElement, ev: Event): any;\n onbeforepaste(this: HTMLElement, ev: Event): any;\n onblur(ev: FocusEvent): void;\n oncanplay(ev: Event): void;\n oncanplaythrough(ev: Event): void;\n onchange(ev: Event): void;\n onclick(ev: MouseEvent): void;\n oncontextmenu(ev: PointerEvent): void;\n oncopy(ev: ClipboardEvent): void;\n oncuechange(ev: Event): void;\n oncut(ev: ClipboardEvent): void;\n ondblclick(ev: MouseEvent): void;\n ondeactivate(this: HTMLElement, ev: Event): any;\n ondrag(ev: DragEvent): void;\n ondragend(ev: DragEvent): void;\n ondragenter(ev: DragEvent): void;\n ondragleave(ev: DragEvent): void;\n ondragover(ev: DragEvent): void;\n ondragstart(ev: DragEvent): void;\n ondrop(ev: DragEvent): void;\n ondurationchange(ev: Event): void;\n onemptied(ev: Event): void;\n onended(this: HTMLElement, ev: Event): any;\n onerror(ev: ErrorEvent): void;\n onfocus(ev: FocusEvent): void;\n oninput(ev: Event): void;\n oninvalid(ev: Event): void;\n onkeydown(ev: KeyboardEvent): void;\n onkeypress(ev: KeyboardEvent): void;\n onkeyup(ev: KeyboardEvent): void;\n onload(ev: Event): void;\n onloadeddata(ev: Event): void;\n onloadedmetadata(ev: Event): void;\n onloadstart(ev: Event): void;\n onmousedown(ev: MouseEvent): void;\n onmouseenter(ev: MouseEvent): void;\n onmouseleave(ev: MouseEvent): void;\n onmousemove(ev: MouseEvent): void;\n onmouseout(ev: MouseEvent): void;\n onmouseover(ev: MouseEvent): void;\n onmouseup(ev: MouseEvent): void;\n onmousewheel(ev: WheelEvent): void;\n onmscontentzoom(this: HTMLElement, ev: Event): any;\n onmsmanipulationstatechanged(ev: Event): void;\n onpaste(ev: ClipboardEvent): void;\n onpause(ev: Event): void;\n onplay(ev: Event): void;\n onplaying(ev: Event): void;\n onprogress(ev: ProgressEvent): void;\n onratechange(ev: Event): void;\n onreset(ev: Event): void;\n onscroll(ev: UIEvent): void;\n onseeked(ev: Event): void;\n onseeking(ev: Event): void;\n onselect(ev: UIEvent): void;\n onselectstart(ev: Event): void;\n onstalled(ev: Event): void;\n onsubmit(ev: Event): void;\n onsuspend(ev: Event): void;\n ontimeupdate(ev: Event): void;\n onvolumechange(ev: Event): void;\n onwaiting(ev: Event): void;\n }\n\ndeclare class HyperHTMLElement {\n static readonly observedAttributes: string[];\n constructor();\n created(): void;\n attributeChangedCallback(name: string, prev: string, curr: string): void;\n handleEvent(ev: Event): void;\n html: WiredTemplateFunction;\n state: T;\n get defaultState(): T;\n render(): void;\n setState(state: Partial | ((this: this, state: T) => Partial)): void;\n static bind: typeof bind;\n static Component: typeof Component;\n static intent: typeof define;\n static hyper: typeof hyper;\n static wire: typeof wire;\n static define(name: string, options?: ElementDefinitionOptions): void;\n}\n\nexport default HyperHTMLElement;\n" }, { "path": "index.js", "content": "var HyperHTMLElement = (function (exports) {\n 'use strict';\n\n /*! (c) Andrea Giammarchi - ISC */\n var self$3 = {};\n try { self$3.WeakMap = WeakMap; }\n catch (WeakMap) {\n // this could be better but 90% of the time\n // it's everything developers need as fallback\n self$3.WeakMap = (function (id, Object) { var dP = Object.defineProperty;\n var hOP = Object.hasOwnProperty;\n var proto = WeakMap.prototype;\n proto.delete = function (key) {\n return this.has(key) && delete key[this._];\n };\n proto.get = function (key) {\n return this.has(key) ? key[this._] : void 0;\n };\n proto.has = function (key) {\n return hOP.call(key, this._);\n };\n proto.set = function (key, value) {\n dP(key, this._, {configurable: true, value: value});\n return this;\n };\n return WeakMap;\n function WeakMap(iterable) {\n dP(this, '_', {value: '_@ungap/weakmap' + id++});\n if (iterable)\n iterable.forEach(add, this);\n }\n function add(pair) {\n this.set(pair[0], pair[1]);\n }\n }(Math.random(), Object));\n }\n var WeakMap$1 = self$3.WeakMap;\n\n /*! (c) Andrea Giammarchi - ISC */\n var self$2 = {};\n try { self$2.WeakSet = WeakSet; }\n catch (WeakSet) {\n (function (id, dP) {\n var proto = WeakSet.prototype;\n proto.add = function (object) {\n if (!this.has(object))\n dP(object, this._, {value: true, configurable: true});\n return this;\n };\n proto.has = function (object) {\n return this.hasOwnProperty.call(object, this._);\n };\n proto.delete = function (object) {\n return this.has(object) && delete object[this._];\n };\n self$2.WeakSet = WeakSet;\n function WeakSet() { dP(this, '_', {value: '_@ungap/weakmap' + id++});\n }\n }(Math.random(), Object.defineProperty));\n }\n var WeakSet$1 = self$2.WeakSet;\n\n const {indexOf: indexOf$1, slice: slice$1} = [];\n\n const append = (get, parent, children, start, end, before) => {\n const isSelect = 'selectedIndex' in parent;\n let noSelection = isSelect;\n while (start < end) {\n const child = get(children[start], 1);\n parent.insertBefore(child, before);\n if (isSelect && noSelection && child.selected) {\n noSelection = !noSelection;\n let {selectedIndex} = parent;\n parent.selectedIndex = selectedIndex < 0 ?\n start :\n indexOf$1.call(parent.querySelectorAll('option'), child);\n }\n start++;\n }\n };\n\n const eqeq = (a, b) => a == b;\n\n const identity = O => O;\n\n const indexOf = (\n moreNodes,\n moreStart,\n moreEnd,\n lessNodes,\n lessStart,\n lessEnd,\n compare\n ) => {\n const length = lessEnd - lessStart;\n /* istanbul ignore if */\n if (length < 1)\n return -1;\n while ((moreEnd - moreStart) >= length) {\n let m = moreStart;\n let l = lessStart;\n while (\n m < moreEnd &&\n l < lessEnd &&\n compare(moreNodes[m], lessNodes[l])\n ) {\n m++;\n l++;\n }\n if (l === lessEnd)\n return moreStart;\n moreStart = m + 1;\n }\n return -1;\n };\n\n const isReversed = (\n futureNodes,\n futureEnd,\n currentNodes,\n currentStart,\n currentEnd,\n compare\n ) => {\n while (\n currentStart < currentEnd &&\n compare(\n currentNodes[currentStart],\n futureNodes[futureEnd - 1]\n )) {\n currentStart++;\n futureEnd--;\n } return futureEnd === 0;\n };\n\n const next = (get, list, i, length, before) => i < length ?\n get(list[i], 0) :\n (0 < i ?\n get(list[i - 1], -0).nextSibling :\n before);\n\n const remove = (get, children, start, end) => {\n while (start < end)\n drop(get(children[start++], -1));\n };\n\n // - - - - - - - - - - - - - - - - - - -\n // diff related constants and utilities\n // - - - - - - - - - - - - - - - - - - -\n\n const DELETION = -1;\n const INSERTION = 1;\n const SKIP = 0;\n const SKIP_OND = 50;\n\n const HS = (\n futureNodes,\n futureStart,\n futureEnd,\n futureChanges,\n currentNodes,\n currentStart,\n currentEnd,\n currentChanges\n ) => {\n\n let k = 0;\n /* istanbul ignore next */\n let minLen = futureChanges < currentChanges ? futureChanges : currentChanges;\n const link = Array(minLen++);\n const tresh = Array(minLen);\n tresh[0] = -1;\n\n for (let i = 1; i < minLen; i++)\n tresh[i] = currentEnd;\n\n const nodes = currentNodes.slice(currentStart, currentEnd);\n\n for (let i = futureStart; i < futureEnd; i++) {\n const index = nodes.indexOf(futureNodes[i]);\n if (-1 < index) {\n const idxInOld = index + currentStart;\n k = findK(tresh, minLen, idxInOld);\n /* istanbul ignore else */\n if (-1 < k) {\n tresh[k] = idxInOld;\n link[k] = {\n newi: i,\n oldi: idxInOld,\n prev: link[k - 1]\n };\n }\n }\n }\n\n k = --minLen;\n --currentEnd;\n while (tresh[k] > currentEnd) --k;\n\n minLen = currentChanges + futureChanges - k;\n const diff = Array(minLen);\n let ptr = link[k];\n --futureEnd;\n while (ptr) {\n const {newi, oldi} = ptr;\n while (futureEnd > newi) {\n diff[--minLen] = INSERTION;\n --futureEnd;\n }\n while (currentEnd > oldi) {\n diff[--minLen] = DELETION;\n --currentEnd;\n }\n diff[--minLen] = SKIP;\n --futureEnd;\n --currentEnd;\n ptr = ptr.prev;\n }\n while (futureEnd >= futureStart) {\n diff[--minLen] = INSERTION;\n --futureEnd;\n }\n while (currentEnd >= currentStart) {\n diff[--minLen] = DELETION;\n --currentEnd;\n }\n return diff;\n };\n\n // this is pretty much the same petit-dom code without the delete map part\n // https://github.com/yelouafi/petit-dom/blob/bd6f5c919b5ae5297be01612c524c40be45f14a7/src/vdom.js#L556-L561\n const OND = (\n futureNodes,\n futureStart,\n rows,\n currentNodes,\n currentStart,\n cols,\n compare\n ) => {\n const length = rows + cols;\n const v = [];\n let d, k, r, c, pv, cv, pd;\n outer: for (d = 0; d <= length; d++) {\n /* istanbul ignore if */\n if (d > SKIP_OND)\n return null;\n pd = d - 1;\n /* istanbul ignore next */\n pv = d ? v[d - 1] : [0, 0];\n cv = v[d] = [];\n for (k = -d; k <= d; k += 2) {\n if (k === -d || (k !== d && pv[pd + k - 1] < pv[pd + k + 1])) {\n c = pv[pd + k + 1];\n } else {\n c = pv[pd + k - 1] + 1;\n }\n r = c - k;\n while (\n c < cols &&\n r < rows &&\n compare(\n currentNodes[currentStart + c],\n futureNodes[futureStart + r]\n )\n ) {\n c++;\n r++;\n }\n if (c === cols && r === rows) {\n break outer;\n }\n cv[d + k] = c;\n }\n }\n\n const diff = Array(d / 2 + length / 2);\n let diffIdx = diff.length - 1;\n for (d = v.length - 1; d >= 0; d--) {\n while (\n c > 0 &&\n r > 0 &&\n compare(\n currentNodes[currentStart + c - 1],\n futureNodes[futureStart + r - 1]\n )\n ) {\n // diagonal edge = equality\n diff[diffIdx--] = SKIP;\n c--;\n r--;\n }\n if (!d)\n break;\n pd = d - 1;\n /* istanbul ignore next */\n pv = d ? v[d - 1] : [0, 0];\n k = c - r;\n if (k === -d || (k !== d && pv[pd + k - 1] < pv[pd + k + 1])) {\n // vertical edge = insertion\n r--;\n diff[diffIdx--] = INSERTION;\n } else {\n // horizontal edge = deletion\n c--;\n diff[diffIdx--] = DELETION;\n }\n }\n return diff;\n };\n\n const applyDiff = (\n diff,\n get,\n parentNode,\n futureNodes,\n futureStart,\n currentNodes,\n currentStart,\n currentLength,\n before\n ) => {\n const live = [];\n const length = diff.length;\n let currentIndex = currentStart;\n let i = 0;\n while (i < length) {\n switch (diff[i++]) {\n case SKIP:\n futureStart++;\n currentIndex++;\n break;\n case INSERTION:\n // TODO: bulk appends for sequential nodes\n live.push(futureNodes[futureStart]);\n append(\n get,\n parentNode,\n futureNodes,\n futureStart++,\n futureStart,\n currentIndex < currentLength ?\n get(currentNodes[currentIndex], 0) :\n before\n );\n break;\n case DELETION:\n currentIndex++;\n break;\n }\n }\n i = 0;\n while (i < length) {\n switch (diff[i++]) {\n case SKIP:\n currentStart++;\n break;\n case DELETION:\n // TODO: bulk removes for sequential nodes\n if (-1 < live.indexOf(currentNodes[currentStart]))\n currentStart++;\n else\n remove(\n get,\n currentNodes,\n currentStart++,\n currentStart\n );\n break;\n }\n }\n };\n\n const findK = (ktr, length, j) => {\n let lo = 1;\n let hi = length;\n while (lo < hi) {\n const mid = ((lo + hi) / 2) >>> 0;\n if (j < ktr[mid])\n hi = mid;\n else\n lo = mid + 1;\n }\n return lo;\n };\n\n const smartDiff = (\n get,\n parentNode,\n futureNodes,\n futureStart,\n futureEnd,\n futureChanges,\n currentNodes,\n currentStart,\n currentEnd,\n currentChanges,\n currentLength,\n compare,\n before\n ) => {\n applyDiff(\n OND(\n futureNodes,\n futureStart,\n futureChanges,\n currentNodes,\n currentStart,\n currentChanges,\n compare\n ) ||\n HS(\n futureNodes,\n futureStart,\n futureEnd,\n futureChanges,\n currentNodes,\n currentStart,\n currentEnd,\n currentChanges\n ),\n get,\n parentNode,\n futureNodes,\n futureStart,\n currentNodes,\n currentStart,\n currentLength,\n before\n );\n };\n\n const drop = node => (node.remove || dropChild).call(node);\n\n function dropChild() {\n const {parentNode} = this;\n /* istanbul ignore else */\n if (parentNode)\n parentNode.removeChild(this);\n }\n\n /*! (c) 2018 Andrea Giammarchi (ISC) */\n\n const domdiff = (\n parentNode, // where changes happen\n currentNodes, // Array of current items/nodes\n futureNodes, // Array of future items/nodes\n options // optional object with one of the following properties\n // before: domNode\n // compare(generic, generic) => true if same generic\n // node(generic) => Node\n ) => {\n if (!options)\n options = {};\n\n const compare = options.compare || eqeq;\n const get = options.node || identity;\n const before = options.before == null ? null : get(options.before, 0);\n\n const currentLength = currentNodes.length;\n let currentEnd = currentLength;\n let currentStart = 0;\n\n let futureEnd = futureNodes.length;\n let futureStart = 0;\n\n // common prefix\n while (\n currentStart < currentEnd &&\n futureStart < futureEnd &&\n compare(currentNodes[currentStart], futureNodes[futureStart])\n ) {\n currentStart++;\n futureStart++;\n }\n\n // common suffix\n while (\n currentStart < currentEnd &&\n futureStart < futureEnd &&\n compare(currentNodes[currentEnd - 1], futureNodes[futureEnd - 1])\n ) {\n currentEnd--;\n futureEnd--;\n }\n\n const currentSame = currentStart === currentEnd;\n const futureSame = futureStart === futureEnd;\n\n // same list\n if (currentSame && futureSame)\n return futureNodes;\n\n // only stuff to add\n if (currentSame && futureStart < futureEnd) {\n append(\n get,\n parentNode,\n futureNodes,\n futureStart,\n futureEnd,\n next(get, currentNodes, currentStart, currentLength, before)\n );\n return futureNodes;\n }\n\n // only stuff to remove\n if (futureSame && currentStart < currentEnd) {\n remove(\n get,\n currentNodes,\n currentStart,\n currentEnd\n );\n return futureNodes;\n }\n\n const currentChanges = currentEnd - currentStart;\n const futureChanges = futureEnd - futureStart;\n let i = -1;\n\n // 2 simple indels: the shortest sequence is a subsequence of the longest\n if (currentChanges < futureChanges) {\n i = indexOf(\n futureNodes,\n futureStart,\n futureEnd,\n currentNodes,\n currentStart,\n currentEnd,\n compare\n );\n // inner diff\n if (-1 < i) {\n append(\n get,\n parentNode,\n futureNodes,\n futureStart,\n i,\n get(currentNodes[currentStart], 0)\n );\n append(\n get,\n parentNode,\n futureNodes,\n i + currentChanges,\n futureEnd,\n next(get, currentNodes, currentEnd, currentLength, before)\n );\n return futureNodes;\n }\n }\n /* istanbul ignore else */\n else if (futureChanges < currentChanges) {\n i = indexOf(\n currentNodes,\n currentStart,\n currentEnd,\n futureNodes,\n futureStart,\n futureEnd,\n compare\n );\n // outer diff\n if (-1 < i) {\n remove(\n get,\n currentNodes,\n currentStart,\n i\n );\n remove(\n get,\n currentNodes,\n i + futureChanges,\n currentEnd\n );\n return futureNodes;\n }\n }\n\n // common case with one replacement for many nodes\n // or many nodes replaced for a single one\n /* istanbul ignore else */\n if ((currentChanges < 2 || futureChanges < 2)) {\n append(\n get,\n parentNode,\n futureNodes,\n futureStart,\n futureEnd,\n get(currentNodes[currentStart], 0)\n );\n remove(\n get,\n currentNodes,\n currentStart,\n currentEnd\n );\n return futureNodes;\n }\n\n // the half match diff part has been skipped in petit-dom\n // https://github.com/yelouafi/petit-dom/blob/bd6f5c919b5ae5297be01612c524c40be45f14a7/src/vdom.js#L391-L397\n // accordingly, I think it's safe to skip in here too\n // if one day it'll come out like the speediest thing ever to do\n // then I might add it in here too\n\n // Extra: before going too fancy, what about reversed lists ?\n // This should bail out pretty quickly if that's not the case.\n if (\n currentChanges === futureChanges &&\n isReversed(\n futureNodes,\n futureEnd,\n currentNodes,\n currentStart,\n currentEnd,\n compare\n )\n ) {\n append(\n get,\n parentNode,\n futureNodes,\n futureStart,\n futureEnd,\n next(get, currentNodes, currentEnd, currentLength, before)\n );\n return futureNodes;\n }\n\n // last resort through a smart diff\n smartDiff(\n get,\n parentNode,\n futureNodes,\n futureStart,\n futureEnd,\n futureChanges,\n currentNodes,\n currentStart,\n currentEnd,\n currentChanges,\n currentLength,\n compare,\n before\n );\n\n return futureNodes;\n };\n\n /*! (c) Andrea Giammarchi - ISC */\n var self$1 = {};\n self$1.CustomEvent = typeof CustomEvent === 'function' ?\n CustomEvent :\n (function (__p__) {\n CustomEvent[__p__] = new CustomEvent('').constructor[__p__];\n return CustomEvent;\n function CustomEvent(type, init) {\n if (!init) init = {};\n var e = document.createEvent('CustomEvent');\n e.initCustomEvent(type, !!init.bubbles, !!init.cancelable, init.detail);\n return e;\n }\n }('prototype'));\n var CustomEvent$1 = self$1.CustomEvent;\n\n /*! (c) Andrea Giammarchi - ISC */\n var self = {};\n try { self.Map = Map; }\n catch (Map) {\n self.Map = function Map() {\n var i = 0;\n var k = [];\n var v = [];\n return {\n delete: function (key) {\n var had = contains(key);\n if (had) {\n k.splice(i, 1);\n v.splice(i, 1);\n }\n return had;\n },\n forEach: function forEach(callback, context) {\n k.forEach(\n function (key, i) {\n callback.call(context, v[i], key, this);\n },\n this\n );\n },\n get: function get(key) {\n return contains(key) ? v[i] : void 0;\n },\n has: function has(key) {\n return contains(key);\n },\n set: function set(key, value) {\n v[contains(key) ? i : (k.push(key) - 1)] = value;\n return this;\n }\n };\n function contains(v) {\n i = k.indexOf(v);\n return -1 < i;\n }\n };\n }\n var Map$1 = self.Map;\n\n // hyperHTML.Component is a very basic class\n // able to create Custom Elements like components\n // including the ability to listen to connect/disconnect\n // events via onconnect/ondisconnect attributes\n // Components can be created imperatively or declaratively.\n // The main difference is that declared components\n // will not automatically render on setState(...)\n // to simplify state handling on render.\n function Component() {\n return this; // this is needed in Edge !!!\n }\n\n // Component is lazily setup because it needs\n // wire mechanism as lazy content\n function setup(content) {\n // there are various weakly referenced variables in here\n // and mostly are to use Component.for(...) static method.\n const children = new WeakMap$1;\n const create = Object.create;\n const createEntry = (wm, id, component) => {\n wm.set(id, component);\n return component;\n };\n const get = (Class, info, context, id) => {\n const relation = info.get(Class) || relate(Class, info);\n switch (typeof id) {\n case 'object':\n case 'function':\n const wm = relation.w || (relation.w = new WeakMap$1);\n return wm.get(id) || createEntry(wm, id, new Class(context));\n default:\n const sm = relation.p || (relation.p = create(null));\n return sm[id] || (sm[id] = new Class(context));\n }\n };\n const relate = (Class, info) => {\n const relation = {w: null, p: null};\n info.set(Class, relation);\n return relation;\n };\n const set = context => {\n const info = new Map$1;\n children.set(context, info);\n return info;\n };\n // The Component Class\n Object.defineProperties(\n Component,\n {\n // Component.for(context[, id]) is a convenient way\n // to automatically relate data/context to children components\n // If not created yet, the new Component(context) is weakly stored\n // and after that same instance would always be returned.\n for: {\n configurable: true,\n value(context, id) {\n return get(\n this,\n children.get(context) || set(context),\n context,\n id == null ?\n 'default' : id\n );\n }\n }\n }\n );\n Object.defineProperties(\n Component.prototype,\n {\n // all events are handled with the component as context\n handleEvent: {value(e) {\n const ct = e.currentTarget;\n this[\n ('getAttribute' in ct && ct.getAttribute('data-call')) ||\n ('on' + e.type)\n ](e);\n }},\n // components will lazily define html or svg properties\n // as soon as these are invoked within the .render() method\n // Such render() method is not provided by the base class\n // but it must be available through the Component extend.\n // Declared components could implement a\n // render(props) method too and use props as needed.\n html: lazyGetter('html', content),\n svg: lazyGetter('svg', content),\n // the state is a very basic/simple mechanism inspired by Preact\n state: lazyGetter('state', function () { return this.defaultState; }),\n // it is possible to define a default state that'd be always an object otherwise\n defaultState: {get() { return {}; }},\n // dispatch a bubbling, cancelable, custom event\n // through the first known/available node\n dispatch: {value(type, detail) {\n const {_wire$} = this;\n if (_wire$) {\n const event = new CustomEvent$1(type, {\n bubbles: true,\n cancelable: true,\n detail\n });\n event.component = this;\n return (_wire$.dispatchEvent ?\n _wire$ :\n _wire$.firstChild\n ).dispatchEvent(event);\n }\n return false;\n }},\n // setting some property state through a new object\n // or a callback, triggers also automatically a render\n // unless explicitly specified to not do so (render === false)\n setState: {value(state, render) {\n const target = this.state;\n const source = typeof state === 'function' ? state.call(this, target) : state;\n for (const key in source) target[key] = source[key];\n if (render !== false)\n this.render();\n return this;\n }}\n }\n );\n }\n\n // instead of a secret key I could've used a WeakMap\n // However, attaching a property directly will result\n // into better performance with thousands of components\n // hanging around, and less memory pressure caused by the WeakMap\n const lazyGetter = (type, fn) => {\n const secret = '_' + type + '$';\n return {\n get() {\n return this[secret] || setValue(this, secret, fn.call(this, type));\n },\n set(value) {\n setValue(this, secret, value);\n }\n };\n };\n\n // shortcut to set value on get or set(value)\n const setValue = (self, secret, value) =>\n Object.defineProperty(self, secret, {\n configurable: true,\n value: typeof value === 'function' ?\n function () {\n return (self._wire$ = value.apply(this, arguments));\n } :\n value\n })[secret]\n ;\n\n Object.defineProperties(\n Component.prototype,\n {\n // used to distinguish better than instanceof\n ELEMENT_NODE: {value: 1},\n nodeType: {value: -1}\n }\n );\n\n const attributes = {};\n const intents = {};\n const keys = [];\n const hasOwnProperty = intents.hasOwnProperty;\n\n let length = 0;\n\n var Intent = {\n\n // used to invoke right away hyper:attributes\n attributes,\n\n // hyperHTML.define('intent', (object, update) => {...})\n // can be used to define a third parts update mechanism\n // when every other known mechanism failed.\n // hyper.define('user', info => info.name);\n // hyper(node)`

${{user}}

`;\n define: (intent, callback) => {\n if (intent.indexOf('-') < 0) {\n if (!(intent in intents)) {\n length = keys.push(intent);\n }\n intents[intent] = callback;\n } else {\n attributes[intent] = callback;\n }\n },\n\n // this method is used internally as last resort\n // to retrieve a value out of an object\n invoke: (object, callback) => {\n for (let i = 0; i < length; i++) {\n let key = keys[i];\n if (hasOwnProperty.call(object, key)) {\n return intents[key](object[key], callback);\n }\n }\n }\n };\n\n var isArray = Array.isArray || /* istanbul ignore next */ (function (toString) {\n /* istanbul ignore next */\n var $ = toString.call([]);\n /* istanbul ignore next */\n return function isArray(object) {\n return toString.call(object) === $;\n };\n }({}.toString));\n\n /*! (c) Andrea Giammarchi - ISC */\n var createContent = (function (document) { var FRAGMENT = 'fragment';\n var TEMPLATE = 'template';\n var HAS_CONTENT = 'content' in create(TEMPLATE);\n\n var createHTML = HAS_CONTENT ?\n function (html) {\n var template = create(TEMPLATE);\n template.innerHTML = html;\n return template.content;\n } :\n function (html) {\n var content = create(FRAGMENT);\n var template = create(TEMPLATE);\n var childNodes = null;\n if (/^[^\\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(html)) {\n var selector = RegExp.$1;\n template.innerHTML = '' + html + '
';\n childNodes = template.querySelectorAll(selector);\n } else {\n template.innerHTML = html;\n childNodes = template.childNodes;\n }\n append(content, childNodes);\n return content;\n };\n\n return function createContent(markup, type) {\n return (type === 'svg' ? createSVG : createHTML)(markup);\n };\n\n function append(root, childNodes) {\n var length = childNodes.length;\n while (length--)\n root.appendChild(childNodes[0]);\n }\n\n function create(element) {\n return element === FRAGMENT ?\n document.createDocumentFragment() :\n document.createElementNS('http://www.w3.org/1999/xhtml', element);\n }\n\n // it could use createElementNS when hasNode is there\n // but this fallback is equally fast and easier to maintain\n // it is also battle tested already in all IE\n function createSVG(svg) {\n var content = create(FRAGMENT);\n var template = create('div');\n template.innerHTML = '' + svg + '';\n append(content, template.firstChild.childNodes);\n return content;\n }\n\n }(document));\n\n /*! (c) Andrea Giammarchi */\n function disconnected(poly) { var Event = poly.Event;\n var WeakSet = poly.WeakSet;\n var notObserving = true;\n var observer = null;\n return function observe(node) {\n if (notObserving) {\n notObserving = !notObserving;\n observer = new WeakSet;\n startObserving(node.ownerDocument);\n }\n observer.add(node);\n return node;\n };\n function startObserving(document) {\n var connected = new WeakSet;\n var disconnected = new WeakSet;\n try {\n (new MutationObserver(changes)).observe(\n document,\n {subtree: true, childList: true}\n );\n }\n catch(o_O) {\n var timer = 0;\n var records = [];\n var reschedule = function (record) {\n records.push(record);\n clearTimeout(timer);\n timer = setTimeout(\n function () {\n changes(records.splice(timer = 0, records.length));\n },\n 0\n );\n };\n document.addEventListener(\n 'DOMNodeRemoved',\n function (event) {\n reschedule({addedNodes: [], removedNodes: [event.target]});\n },\n true\n );\n document.addEventListener(\n 'DOMNodeInserted',\n function (event) {\n reschedule({addedNodes: [event.target], removedNodes: []});\n },\n true\n );\n }\n function changes(records) {\n for (var\n record,\n length = records.length,\n i = 0; i < length; i++\n ) {\n record = records[i];\n dispatchAll(record.removedNodes, 'disconnected', disconnected, connected);\n dispatchAll(record.addedNodes, 'connected', connected, disconnected);\n }\n }\n function dispatchAll(nodes, type, wsin, wsout) {\n for (var\n node,\n event = new Event(type),\n length = nodes.length,\n i = 0; i < length;\n (node = nodes[i++]).nodeType === 1 &&\n dispatchTarget(node, event, type, wsin, wsout)\n );\n }\n function dispatchTarget(node, event, type, wsin, wsout) {\n if (observer.has(node) && !wsin.has(node)) {\n wsout.delete(node);\n wsin.add(node);\n node.dispatchEvent(event);\n /*\n // The event is not bubbling (perf reason: should it?),\n // hence there's no way to know if\n // stop/Immediate/Propagation() was called.\n // Should DOM Level 0 work at all?\n // I say it's a YAGNI case for the time being,\n // and easy to implement in user-land.\n if (!event.cancelBubble) {\n var fn = node['on' + type];\n if (fn)\n fn.call(node, event);\n }\n */\n }\n for (var\n // apparently is node.children || IE11 ... ^_^;;\n // https://github.com/WebReflection/disconnected/issues/1\n children = node.children || [],\n length = children.length,\n i = 0; i < length;\n dispatchTarget(children[i++], event, type, wsin, wsout)\n );\n }\n }\n }\n\n /*! (c) Andrea Giammarchi - ISC */\n var importNode = (function (\n document,\n appendChild,\n cloneNode,\n createTextNode,\n importNode\n ) {\n var native = importNode in document;\n // IE 11 has problems with cloning templates:\n // it \"forgets\" empty childNodes. This feature-detects that.\n var fragment = document.createDocumentFragment();\n fragment[appendChild](document[createTextNode]('g'));\n fragment[appendChild](document[createTextNode](''));\n /* istanbul ignore next */\n var content = native ?\n document[importNode](fragment, true) :\n fragment[cloneNode](true);\n return content.childNodes.length < 2 ?\n function importNode(node, deep) {\n var clone = node[cloneNode]();\n for (var\n /* istanbul ignore next */\n childNodes = node.childNodes || [],\n length = childNodes.length,\n i = 0; deep && i < length; i++\n ) {\n clone[appendChild](importNode(childNodes[i], deep));\n }\n return clone;\n } :\n /* istanbul ignore next */\n (native ?\n document[importNode] :\n function (node, deep) {\n return node[cloneNode](!!deep);\n }\n );\n }(\n document,\n 'appendChild',\n 'cloneNode',\n 'createTextNode',\n 'importNode'\n ));\n\n var trim = ''.trim || /* istanbul ignore next */ function () {\n return String(this).replace(/^\\s+|\\s+/g, '');\n };\n\n /*! (c) Andrea Giammarchi - ISC */\n\n // Custom\n var UID = '-' + Math.random().toFixed(6) + '%';\n // Edge issue!\n\n var UID_IE = false;\n\n try {\n if (!(function (template, content, tabindex) {\n return content in template && (\n (template.innerHTML = '

'),\n template[content].childNodes[0].getAttribute(tabindex) == UID\n );\n }(document.createElement('template'), 'content', 'tabindex'))) {\n UID = '_dt: ' + UID.slice(1, -1) + ';';\n UID_IE = true;\n }\n } catch(meh) {}\n\n var UIDC = '';\n\n // DOM\n var COMMENT_NODE = 8;\n var ELEMENT_NODE = 1;\n var TEXT_NODE = 3;\n\n var SHOULD_USE_TEXT_CONTENT = /^(?:plaintext|script|style|textarea|title|xmp)$/i;\n var VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;\n\n /*! (c) Andrea Giammarchi - ISC */\n\n function sanitize (template) {\n return template.join(UIDC)\n .replace(selfClosing, fullClosing)\n .replace(attrSeeker, attrReplacer);\n }\n\n var spaces = ' \\\\f\\\\n\\\\r\\\\t';\n var almostEverything = '[^' + spaces + '\\\\/>\"\\'=]+';\n var attrName = '[' + spaces + ']+' + almostEverything;\n var tagName = '<([A-Za-z]+[A-Za-z0-9:._-]*)((?:';\n var attrPartials = '(?:\\\\s*=\\\\s*(?:\\'[^\\']*?\\'|\"[^\"]*?\"|<[^>]*?>|' + almostEverything.replace('\\\\/', '') + '))?)';\n\n var attrSeeker = new RegExp(tagName + attrName + attrPartials + '+)([' + spaces + ']*/?>)', 'g');\n var selfClosing = new RegExp(tagName + attrName + attrPartials + '*)([' + spaces + ']*/>)', 'g');\n var findAttributes = new RegExp('(' + attrName + '\\\\s*=\\\\s*)([\\'\"]?)' + UIDC + '\\\\2', 'gi');\n\n function attrReplacer($0, $1, $2, $3) {\n return '<' + $1 + $2.replace(findAttributes, replaceAttributes) + $3;\n }\n\n function replaceAttributes($0, $1, $2) {\n return $1 + ($2 || '\"') + UID + ($2 || '\"');\n }\n\n function fullClosing($0, $1, $2) {\n return VOID_ELEMENTS.test($1) ? $0 : ('<' + $1 + $2 + '>');\n }\n\n var umap = _ => ({\n // About: get: _.get.bind(_)\n // It looks like WebKit/Safari didn't optimize bind at all,\n // so that using bind slows it down by 60%.\n // Firefox and Chrome are just fine in both cases,\n // so let's use the approach that works fast everywhere 👍\n get: key => _.get(key),\n set: (key, value) => (_.set(key, value), value)\n });\n\n /* istanbul ignore next */\n var normalizeAttributes = UID_IE ?\n function (attributes, parts) {\n var html = parts.join(' ');\n return parts.slice.call(attributes, 0).sort(function (left, right) {\n return html.indexOf(left.name) <= html.indexOf(right.name) ? -1 : 1;\n });\n } :\n function (attributes, parts) {\n return parts.slice.call(attributes, 0);\n }\n ;\n\n function find(node, path) {\n var length = path.length;\n var i = 0;\n while (i < length)\n node = node.childNodes[path[i++]];\n return node;\n }\n\n function parse(node, holes, parts, path) {\n var childNodes = node.childNodes;\n var length = childNodes.length;\n var i = 0;\n while (i < length) {\n var child = childNodes[i];\n switch (child.nodeType) {\n case ELEMENT_NODE:\n var childPath = path.concat(i);\n parseAttributes(child, holes, parts, childPath);\n parse(child, holes, parts, childPath);\n break;\n case COMMENT_NODE:\n var textContent = child.textContent;\n if (textContent === UID) {\n parts.shift();\n holes.push(\n // basicHTML or other non standard engines\n // might end up having comments in nodes\n // where they shouldn't, hence this check.\n SHOULD_USE_TEXT_CONTENT.test(node.nodeName) ?\n Text(node, path) :\n Any(child, path.concat(i))\n );\n } else {\n switch (textContent.slice(0, 2)) {\n case '/*':\n if (textContent.slice(-2) !== '*/')\n break;\n case '\\uD83D\\uDC7B': // ghost\n node.removeChild(child);\n i--;\n length--;\n }\n }\n break;\n case TEXT_NODE:\n // the following ignore is actually covered by browsers\n // only basicHTML ends up on previous COMMENT_NODE case\n // instead of TEXT_NODE because it knows nothing about\n // special style or textarea behavior\n /* istanbul ignore if */\n if (\n SHOULD_USE_TEXT_CONTENT.test(node.nodeName) &&\n trim.call(child.textContent) === UIDC\n ) {\n parts.shift();\n holes.push(Text(node, path));\n }\n break;\n }\n i++;\n }\n }\n\n function parseAttributes(node, holes, parts, path) {\n var attributes = node.attributes;\n var cache = [];\n var remove = [];\n var array = normalizeAttributes(attributes, parts);\n var length = array.length;\n var i = 0;\n while (i < length) {\n var attribute = array[i++];\n var direct = attribute.value === UID;\n var sparse;\n if (direct || 1 < (sparse = attribute.value.split(UIDC)).length) {\n var name = attribute.name;\n // the following ignore is covered by IE\n // and the IE9 double viewBox test\n /* istanbul ignore else */\n if (cache.indexOf(name) < 0) {\n cache.push(name);\n var realName = parts.shift().replace(\n direct ?\n /^(?:|[\\S\\s]*?\\s)(\\S+?)\\s*=\\s*('|\")?$/ :\n new RegExp(\n '^(?:|[\\\\S\\\\s]*?\\\\s)(' + name + ')\\\\s*=\\\\s*(\\'|\")[\\\\S\\\\s]*',\n 'i'\n ),\n '$1'\n );\n var value = attributes[realName] ||\n // the following ignore is covered by browsers\n // while basicHTML is already case-sensitive\n /* istanbul ignore next */\n attributes[realName.toLowerCase()];\n if (direct)\n holes.push(Attr(value, path, realName, null));\n else {\n var skip = sparse.length - 2;\n while (skip--)\n parts.shift();\n holes.push(Attr(value, path, realName, sparse));\n }\n }\n remove.push(attribute);\n }\n }\n length = remove.length;\n i = 0;\n\n /* istanbul ignore next */\n var cleanValue = 0 < length && UID_IE && !('ownerSVGElement' in node);\n while (i < length) {\n // Edge HTML bug #16878726\n var attr = remove[i++];\n // IE/Edge bug lighterhtml#63 - clean the value or it'll persist\n /* istanbul ignore next */\n if (cleanValue)\n attr.value = '';\n // IE/Edge bug lighterhtml#64 - don't use removeAttributeNode\n node.removeAttribute(attr.name);\n }\n\n // This is a very specific Firefox/Safari issue\n // but since it should be a not so common pattern,\n // it's probably worth patching regardless.\n // Basically, scripts created through strings are death.\n // You need to create fresh new scripts instead.\n // TODO: is there any other node that needs such nonsense?\n var nodeName = node.nodeName;\n if (/^script$/i.test(nodeName)) {\n // this used to be like that\n // var script = createElement(node, nodeName);\n // then Edge arrived and decided that scripts created\n // through template documents aren't worth executing\n // so it became this ... hopefully it won't hurt in the wild\n var script = document.createElement(nodeName);\n length = attributes.length;\n i = 0;\n while (i < length)\n script.setAttributeNode(attributes[i++].cloneNode(true));\n script.textContent = node.textContent;\n node.parentNode.replaceChild(script, node);\n }\n }\n\n function Any(node, path) {\n return {\n type: 'any',\n node: node,\n path: path\n };\n }\n\n function Attr(node, path, name, sparse) {\n return {\n type: 'attr',\n node: node,\n path: path,\n name: name,\n sparse: sparse\n };\n }\n\n function Text(node, path) {\n return {\n type: 'text',\n node: node,\n path: path\n };\n }\n\n // globals\n\n var parsed = umap(new WeakMap$1);\n\n function createInfo(options, template) {\n var markup = (options.convert || sanitize)(template);\n var transform = options.transform;\n if (transform)\n markup = transform(markup);\n var content = createContent(markup, options.type);\n cleanContent(content);\n var holes = [];\n parse(content, holes, template.slice(0), []);\n return {\n content: content,\n updates: function (content) {\n var updates = [];\n var len = holes.length;\n var i = 0;\n var off = 0;\n while (i < len) {\n var info = holes[i++];\n var node = find(content, info.path);\n switch (info.type) {\n case 'any':\n updates.push({fn: options.any(node, []), sparse: false});\n break;\n case 'attr':\n var sparse = info.sparse;\n var fn = options.attribute(node, info.name, info.node);\n if (sparse === null)\n updates.push({fn: fn, sparse: false});\n else {\n off += sparse.length - 2;\n updates.push({fn: fn, sparse: true, values: sparse});\n }\n break;\n case 'text':\n updates.push({fn: options.text(node), sparse: false});\n node.textContent = '';\n break;\n }\n }\n len += off;\n return function () {\n var length = arguments.length;\n if (len !== (length - 1)) {\n throw new Error(\n (length - 1) + ' values instead of ' + len + '\\n' +\n template.join('${value}')\n );\n }\n var i = 1;\n var off = 1;\n while (i < length) {\n var update = updates[i - off];\n if (update.sparse) {\n var values = update.values;\n var value = values[0];\n var j = 1;\n var l = values.length;\n off += l - 2;\n while (j < l)\n value += arguments[i++] + values[j++];\n update.fn(value);\n }\n else\n update.fn(arguments[i++]);\n }\n return content;\n };\n }\n };\n }\n\n function createDetails(options, template) {\n var info = parsed.get(template) || parsed.set(template, createInfo(options, template));\n return info.updates(importNode.call(document, info.content, true));\n }\n\n var empty = [];\n function domtagger(options) {\n var previous = empty;\n var updates = cleanContent;\n return function (template) {\n if (previous !== template)\n updates = createDetails(options, (previous = template));\n return updates.apply(null, arguments);\n };\n }\n\n function cleanContent(fragment) {\n var childNodes = fragment.childNodes;\n var i = childNodes.length;\n while (i--) {\n var child = childNodes[i];\n if (\n child.nodeType !== 1 &&\n trim.call(child.textContent).length === 0\n ) {\n fragment.removeChild(child);\n }\n }\n }\n\n /*! (c) Andrea Giammarchi - ISC */\n var hyperStyle = (function (){ // from https://github.com/developit/preact/blob/33fc697ac11762a1cb6e71e9847670d047af7ce5/src/varants.js\n var IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;\n var hyphen = /([^A-Z])([A-Z]+)/g;\n return function hyperStyle(node, original) {\n return 'ownerSVGElement' in node ? svg(node, original) : update(node.style, false);\n };\n function ized($0, $1, $2) {\n return $1 + '-' + $2.toLowerCase();\n }\n function svg(node, original) {\n var style;\n if (original)\n style = original.cloneNode(true);\n else {\n node.setAttribute('style', '--hyper:style;');\n style = node.getAttributeNode('style');\n }\n style.value = '';\n node.setAttributeNode(style);\n return update(style, true);\n }\n function toStyle(object) {\n var key, css = [];\n for (key in object)\n css.push(key.replace(hyphen, ized), ':', object[key], ';');\n return css.join('');\n }\n function update(style, isSVG) {\n var oldType, oldValue;\n return function (newValue) {\n var info, key, styleValue, value;\n switch (typeof newValue) {\n case 'object':\n if (newValue) {\n if (oldType === 'object') {\n if (!isSVG) {\n if (oldValue !== newValue) {\n for (key in oldValue) {\n if (!(key in newValue)) {\n style[key] = '';\n }\n }\n }\n }\n } else {\n if (isSVG)\n style.value = '';\n else\n style.cssText = '';\n }\n info = isSVG ? {} : style;\n for (key in newValue) {\n value = newValue[key];\n styleValue = typeof value === 'number' &&\n !IS_NON_DIMENSIONAL.test(key) ?\n (value + 'px') : value;\n if (!isSVG && /^--/.test(key))\n info.setProperty(key, styleValue);\n else\n info[key] = styleValue;\n }\n oldType = 'object';\n if (isSVG)\n style.value = toStyle((oldValue = info));\n else\n oldValue = newValue;\n break;\n }\n default:\n if (oldValue != newValue) {\n oldType = 'string';\n oldValue = newValue;\n if (isSVG)\n style.value = newValue || '';\n else\n style.cssText = newValue || '';\n }\n break;\n }\n };\n }\n }());\n\n /*! (c) Andrea Giammarchi - ISC */\n var Wire = (function (slice, proto) {\n\n proto = Wire.prototype;\n\n proto.ELEMENT_NODE = 1;\n proto.nodeType = 111;\n\n proto.remove = function (keepFirst) {\n var childNodes = this.childNodes;\n var first = this.firstChild;\n var last = this.lastChild;\n this._ = null;\n if (keepFirst && childNodes.length === 2) {\n last.parentNode.removeChild(last);\n } else {\n var range = this.ownerDocument.createRange();\n range.setStartBefore(keepFirst ? childNodes[1] : first);\n range.setEndAfter(last);\n range.deleteContents();\n }\n return first;\n };\n\n proto.valueOf = function (forceAppend) {\n var fragment = this._;\n var noFragment = fragment == null;\n if (noFragment)\n fragment = (this._ = this.ownerDocument.createDocumentFragment());\n if (noFragment || forceAppend) {\n for (var n = this.childNodes, i = 0, l = n.length; i < l; i++)\n fragment.appendChild(n[i]);\n }\n return fragment;\n };\n\n return Wire;\n\n function Wire(childNodes) {\n var nodes = (this.childNodes = slice.call(childNodes, 0));\n this.firstChild = nodes[0];\n this.lastChild = nodes[nodes.length - 1];\n this.ownerDocument = nodes[0].ownerDocument;\n this._ = null;\n }\n\n }([].slice));\n\n // Node.CONSTANTS\n const DOCUMENT_FRAGMENT_NODE = 11;\n\n // SVG related constants\n const OWNER_SVG_ELEMENT = 'ownerSVGElement';\n\n // Custom Elements / MutationObserver constants\n const CONNECTED = 'connected';\n const DISCONNECTED = 'dis' + CONNECTED;\n\n const componentType = Component.prototype.nodeType;\n const wireType = Wire.prototype.nodeType;\n\n const observe = disconnected({Event: CustomEvent$1, WeakSet: WeakSet$1});\n\n // returns an intent to explicitly inject content as html\n const asHTML = html => ({html});\n\n // returns nodes from wires and components\n const asNode = (item, i) => {\n switch (item.nodeType) {\n case wireType:\n // in the Wire case, the content can be\n // removed, post-pended, inserted, or pre-pended and\n // all these cases are handled by domdiff already\n /* istanbul ignore next */\n return (1 / i) < 0 ?\n (i ? item.remove(true) : item.lastChild) :\n (i ? item.valueOf(true) : item.firstChild);\n case componentType:\n return asNode(item.render(), i);\n default:\n return item;\n }\n };\n\n // returns true if domdiff can handle the value\n const canDiff = value => 'ELEMENT_NODE' in value;\n\n // borrowed from uhandlers\n // https://github.com/WebReflection/uhandlers\n const booleanSetter = (node, key, oldValue) => newValue => {\n if (oldValue !== !!newValue) {\n if ((oldValue = !!newValue))\n node.setAttribute(key, '');\n else\n node.removeAttribute(key);\n }\n };\n\n const hyperSetter = (node, name, svg) => svg ?\n value => {\n try {\n node[name] = value;\n }\n catch (nope) {\n node.setAttribute(name, value);\n }\n } :\n value => {\n node[name] = value;\n };\n\n // when a Promise is used as interpolation value\n // its result must be parsed once resolved.\n // This callback is in charge of understanding what to do\n // with a returned value once the promise is resolved.\n const invokeAtDistance = (value, callback) => {\n callback(value.placeholder);\n if ('text' in value) {\n Promise.resolve(value.text).then(String).then(callback);\n } else if ('any' in value) {\n Promise.resolve(value.any).then(callback);\n } else if ('html' in value) {\n Promise.resolve(value.html).then(asHTML).then(callback);\n } else {\n Promise.resolve(Intent.invoke(value, callback)).then(callback);\n }\n };\n\n // quick and dirty way to check for Promise/ish values\n const isPromise_ish = value => value != null && 'then' in value;\n\n // list of attributes that should not be directly assigned\n const readOnly = /^(?:form|list)$/i;\n\n // reused every slice time\n const slice = [].slice;\n\n // simplifies text node creation\n const text = (node, text) => node.ownerDocument.createTextNode(text);\n\n function Tagger(type) {\n this.type = type;\n return domtagger(this);\n }\n\n Tagger.prototype = {\n\n // there are four kind of attributes, and related behavior:\n // * events, with a name starting with `on`, to add/remove event listeners\n // * special, with a name present in their inherited prototype, accessed directly\n // * regular, accessed through get/setAttribute standard DOM methods\n // * style, the only regular attribute that also accepts an object as value\n // so that you can style=${{width: 120}}. In this case, the behavior has been\n // fully inspired by Preact library and its simplicity.\n attribute(node, name, original) {\n const isSVG = OWNER_SVG_ELEMENT in node;\n let oldValue;\n // if the attribute is the style one\n // handle it differently from others\n if (name === 'style')\n return hyperStyle(node, original, isSVG);\n // direct accessors for and friends\n else if (name.slice(0, 1) === '.')\n return hyperSetter(node, name.slice(1), isSVG);\n // boolean accessors for and friends\n else if (name.slice(0, 1) === '?')\n return booleanSetter(node, name.slice(1));\n // the name is an event one,\n // add/remove event listeners accordingly\n else if (/^on/.test(name)) {\n let type = name.slice(2);\n if (type === CONNECTED || type === DISCONNECTED) {\n observe(node);\n }\n else if (name.toLowerCase()\n in node) {\n type = type.toLowerCase();\n }\n return newValue => {\n if (oldValue !== newValue) {\n if (oldValue)\n node.removeEventListener(type, oldValue, false);\n oldValue = newValue;\n if (newValue)\n node.addEventListener(type, newValue, false);\n }\n };\n }\n // the attribute is special ('value' in input)\n // and it's not SVG *or* the name is exactly data,\n // in this case assign the value directly\n else if (\n name === 'data' ||\n (!isSVG && name in node && !readOnly.test(name))\n ) {\n return newValue => {\n if (oldValue !== newValue) {\n oldValue = newValue;\n if (node[name] !== newValue && newValue == null) {\n // cleanup on null to avoid silly IE/Edge bug\n node[name] = '';\n node.removeAttribute(name);\n }\n else\n node[name] = newValue;\n }\n };\n }\n else if (name in Intent.attributes) {\n return any => {\n const newValue = Intent.attributes[name](node, any);\n if (oldValue !== newValue) {\n oldValue = newValue;\n if (newValue == null)\n node.removeAttribute(name);\n else\n node.setAttribute(name, newValue);\n }\n };\n }\n // in every other case, use the attribute node as it is\n // update only the value, set it as node only when/if needed\n else {\n let owner = false;\n const attribute = original.cloneNode(true);\n return newValue => {\n if (oldValue !== newValue) {\n oldValue = newValue;\n if (attribute.value !== newValue) {\n if (newValue == null) {\n if (owner) {\n owner = false;\n node.removeAttributeNode(attribute);\n }\n attribute.value = newValue;\n } else {\n attribute.value = newValue;\n if (!owner) {\n owner = true;\n node.setAttributeNode(attribute);\n }\n }\n }\n }\n };\n }\n },\n\n // in a hyper(node)`
${content}
` case\n // everything could happen:\n // * it's a JS primitive, stored as text\n // * it's null or undefined, the node should be cleaned\n // * it's a component, update the content by rendering it\n // * it's a promise, update the content once resolved\n // * it's an explicit intent, perform the desired operation\n // * it's an Array, resolve all values if Promises and/or\n // update the node with the resulting list of content\n any(node, childNodes) {\n const diffOptions = {node: asNode, before: node};\n const nodeType = OWNER_SVG_ELEMENT in node ? /* istanbul ignore next */ 'svg' : 'html';\n let fastPath = false;\n let oldValue;\n const anyContent = value => {\n switch (typeof value) {\n case 'string':\n case 'number':\n case 'boolean':\n if (fastPath) {\n if (oldValue !== value) {\n oldValue = value;\n childNodes[0].textContent = value;\n }\n } else {\n fastPath = true;\n oldValue = value;\n childNodes = domdiff(\n node.parentNode,\n childNodes,\n [text(node, value)],\n diffOptions\n );\n }\n break;\n case 'function':\n anyContent(value(node));\n break;\n case 'object':\n case 'undefined':\n if (value == null) {\n fastPath = false;\n childNodes = domdiff(\n node.parentNode,\n childNodes,\n [],\n diffOptions\n );\n break;\n }\n default:\n fastPath = false;\n oldValue = value;\n if (isArray(value)) {\n if (value.length === 0) {\n if (childNodes.length) {\n childNodes = domdiff(\n node.parentNode,\n childNodes,\n [],\n diffOptions\n );\n }\n } else {\n switch (typeof value[0]) {\n case 'string':\n case 'number':\n case 'boolean':\n anyContent({html: value});\n break;\n case 'object':\n if (isArray(value[0])) {\n value = value.concat.apply([], value);\n }\n if (isPromise_ish(value[0])) {\n Promise.all(value).then(anyContent);\n break;\n }\n default:\n childNodes = domdiff(\n node.parentNode,\n childNodes,\n value,\n diffOptions\n );\n break;\n }\n }\n } else if (canDiff(value)) {\n childNodes = domdiff(\n node.parentNode,\n childNodes,\n value.nodeType === DOCUMENT_FRAGMENT_NODE ?\n slice.call(value.childNodes) :\n [value],\n diffOptions\n );\n } else if (isPromise_ish(value)) {\n value.then(anyContent);\n } else if ('placeholder' in value) {\n invokeAtDistance(value, anyContent);\n } else if ('text' in value) {\n anyContent(String(value.text));\n } else if ('any' in value) {\n anyContent(value.any);\n } else if ('html' in value) {\n childNodes = domdiff(\n node.parentNode,\n childNodes,\n slice.call(\n createContent(\n [].concat(value.html).join(''),\n nodeType\n ).childNodes\n ),\n diffOptions\n );\n } else if ('length' in value) {\n anyContent(slice.call(value));\n } else {\n anyContent(Intent.invoke(value, anyContent));\n }\n break;\n }\n };\n return anyContent;\n },\n\n // style or textareas don't accept HTML as content\n // it's pointless to transform or analyze anything\n // different from text there but it's worth checking\n // for possible defined intents.\n text(node) {\n let oldValue;\n const textContent = value => {\n if (oldValue !== value) {\n oldValue = value;\n const type = typeof value;\n if (type === 'object' && value) {\n if (isPromise_ish(value)) {\n value.then(textContent);\n } else if ('placeholder' in value) {\n invokeAtDistance(value, textContent);\n } else if ('text' in value) {\n textContent(String(value.text));\n } else if ('any' in value) {\n textContent(value.any);\n } else if ('html' in value) {\n textContent([].concat(value.html).join(''));\n } else if ('length' in value) {\n textContent(slice.call(value).join(''));\n } else {\n textContent(Intent.invoke(value, textContent));\n }\n } else if (type === 'function') {\n textContent(value(node));\n } else {\n node.textContent = value == null ? '' : value;\n }\n }\n };\n return textContent;\n }\n };\n\n var isNoOp = typeof document !== 'object';\n\n var templateLiteral = function (tl) {\n var RAW = 'raw';\n var isBroken = function (UA) {\n return /(Firefox|Safari)\\/(\\d+)/.test(UA) &&\n !/(Chrom[eium]+|Android)\\/(\\d+)/.test(UA);\n };\n var broken = isBroken((document.defaultView.navigator || {}).userAgent);\n var FTS = !(RAW in tl) ||\n tl.propertyIsEnumerable(RAW) ||\n !Object.isFrozen(tl[RAW]);\n if (broken || FTS) {\n var forever = {};\n var foreverCache = function (tl) {\n for (var key = '.', i = 0; i < tl.length; i++)\n key += tl[i].length + '.' + tl[i];\n return forever[key] || (forever[key] = tl);\n };\n // Fallback TypeScript shenanigans\n if (FTS)\n templateLiteral = foreverCache;\n // try fast path for other browsers:\n // store the template as WeakMap key\n // and forever cache it only when it's not there.\n // this way performance is still optimal,\n // penalized only when there are GC issues\n else {\n var wm = new WeakMap$1;\n var set = function (tl, unique) {\n wm.set(tl, unique);\n return unique;\n };\n templateLiteral = function (tl) {\n return wm.get(tl) || set(tl, foreverCache(tl));\n };\n }\n } else {\n isNoOp = true;\n }\n return TL(tl);\n };\n\n function TL(tl) {\n return isNoOp ? tl : templateLiteral(tl);\n }\n\n function tta (template) {\n var length = arguments.length;\n var args = [TL(template)];\n var i = 1;\n while (i < length)\n args.push(arguments[i++]);\n return args;\n }\n /**\n * best benchmark goes here\n * https://jsperf.com/tta-bench\n * I should probably have an @ungap/template-literal-es too\n export default (...args) => {\n args[0] = unique(args[0]);\n return args;\n };\n */\n\n // all wires used per each context\n const wires = new WeakMap$1;\n\n // A wire is a callback used as tag function\n // to lazily relate a generic object to a template literal.\n // hyper.wire(user)`
${user.name}
`; => the div#user\n // This provides the ability to have a unique DOM structure\n // related to a unique JS object through a reusable template literal.\n // A wire can specify a type, as svg or html, and also an id\n // via html:id or :id convention. Such :id allows same JS objects\n // to be associated to different DOM structures accordingly with\n // the used template literal without losing previously rendered parts.\n const wire = (obj, type) => obj == null ?\n content(type || 'html') :\n weakly(obj, type || 'html');\n\n // A wire content is a virtual reference to one or more nodes.\n // It's represented by either a DOM node, or an Array.\n // In both cases, the wire content role is to simply update\n // all nodes through the list of related callbacks.\n // In few words, a wire content is like an invisible parent node\n // in charge of updating its content like a bound element would do.\n const content = type => {\n let wire, tagger, template;\n return function () {\n const args = tta.apply(null, arguments);\n if (template !== args[0]) {\n template = args[0];\n tagger = new Tagger(type);\n wire = wireContent(tagger.apply(tagger, args));\n } else {\n tagger.apply(tagger, args);\n }\n return wire;\n };\n };\n\n // wires are weakly created through objects.\n // Each object can have multiple wires associated\n // and this is thanks to the type + :id feature.\n const weakly = (obj, type) => {\n const i = type.indexOf(':');\n let wire = wires.get(obj);\n let id = type;\n if (-1 < i) {\n id = type.slice(i + 1);\n type = type.slice(0, i) || 'html';\n }\n if (!wire)\n wires.set(obj, wire = {});\n return wire[id] || (wire[id] = content(type));\n };\n\n // A document fragment loses its nodes \n // as soon as it is appended into another node.\n // This has the undesired effect of losing wired content\n // on a second render call, because (by then) the fragment would be empty:\n // no longer providing access to those sub-nodes that ultimately need to\n // stay associated with the original interpolation.\n // To prevent hyperHTML from forgetting about a fragment's sub-nodes,\n // fragments are instead returned as an Array of nodes or, if there's only one entry,\n // as a single referenced node which, unlike fragments, will indeed persist\n // wire content throughout multiple renderings.\n // The initial fragment, at this point, would be used as unique reference to this\n // array of nodes or to this single referenced node.\n const wireContent = node => {\n const childNodes = node.childNodes;\n const {length} = childNodes;\n return length === 1 ?\n childNodes[0] :\n (length ? new Wire(childNodes) : node);\n };\n\n // a weak collection of contexts that\n // are already known to hyperHTML\n const bewitched = new WeakMap$1;\n\n // better known as hyper.bind(node), the render is\n // the main tag function in charge of fully upgrading\n // or simply updating, contexts used as hyperHTML targets.\n // The `this` context is either a regular DOM node or a fragment.\n function render() {\n const wicked = bewitched.get(this);\n const args = tta.apply(null, arguments);\n if (wicked && wicked.template === args[0]) {\n wicked.tagger.apply(null, args);\n } else {\n upgrade.apply(this, args);\n }\n return this;\n }\n\n // an upgrade is in charge of collecting template info,\n // parse it once, if unknown, to map all interpolations\n // as single DOM callbacks, relate such template\n // to the current context, and render it after cleaning the context up\n function upgrade(template) {\n const type = OWNER_SVG_ELEMENT in this ? 'svg' : 'html';\n const tagger = new Tagger(type);\n bewitched.set(this, {tagger, template: template});\n this.textContent = '';\n this.appendChild(tagger.apply(null, arguments));\n }\n\n /*! (c) Andrea Giammarchi (ISC) */\n\n // all functions are self bound to the right context\n // you can do the following\n // const {bind, wire} = hyperHTML;\n // and use them right away: bind(node)`hello!`;\n const bind = context => render.bind(context);\n const define = Intent.define;\n const tagger = Tagger.prototype;\n\n hyper.Component = Component;\n hyper.bind = bind;\n hyper.define = define;\n hyper.diff = domdiff;\n hyper.hyper = hyper;\n hyper.observe = observe;\n hyper.tagger = tagger;\n hyper.wire = wire;\n\n // exported as shared utils\n // for projects based on hyperHTML\n // that don't necessarily need upfront polyfills\n // i.e. those still targeting IE\n hyper._ = {\n WeakMap: WeakMap$1,\n WeakSet: WeakSet$1\n };\n\n // the wire content is the lazy defined\n // html or svg property of each hyper.Component\n setup(content);\n\n // by default, hyperHTML is a smart function\n // that \"magically\" understands what's the best\n // thing to do with passed arguments\n function hyper(HTML) {\n return arguments.length < 2 ?\n (HTML == null ?\n content('html') :\n (typeof HTML === 'string' ?\n hyper.wire(null, HTML) :\n ('raw' in HTML ?\n content('html')(HTML) :\n ('nodeType' in HTML ?\n hyper.bind(HTML) :\n weakly(HTML, 'html')\n )\n )\n )) :\n ('raw' in HTML ?\n content('html') : hyper.wire\n ).apply(null, arguments);\n }\n\n /*! (C) 2017-2018 Andrea Giammarchi - ISC Style License */\n\n // utils to deal with custom elements builtin extends\n const ATTRIBUTE_CHANGED_CALLBACK = 'attributeChangedCallback';\n const O = Object;\n const classes = [];\n const defineProperty = O.defineProperty;\n const getOwnPropertyDescriptor = O.getOwnPropertyDescriptor;\n const getOwnPropertyNames = O.getOwnPropertyNames;\n /* istanbul ignore next */\n const getOwnPropertySymbols = O.getOwnPropertySymbols || (() => []);\n /* istanbul ignore next */\n const getPrototypeOf = O.getPrototypeOf || (o => o.__proto__);\n /* istanbul ignore next */\n const ownKeys = typeof Reflect === 'object' && Reflect.ownKeys ||\n (o => getOwnPropertyNames(o).concat(getOwnPropertySymbols(o)));\n /* istanbul ignore next */\n const setPrototypeOf = O.setPrototypeOf ||\n ((o, p) => (o.__proto__ = p, o));\n /* istanbul ignore stop */\n const camel = name => name.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase());\n const {attachShadow} = HTMLElement.prototype;\n const sr = new WeakMap;\n\n class HyperHTMLElement extends HTMLElement {\n\n // define a custom-element in the CustomElementsRegistry\n // class MyEl extends HyperHTMLElement {}\n // MyEl.define('my-el');\n static define(name, options) {\n const Class = this;\n const proto = Class.prototype;\n\n const onChanged = proto[ATTRIBUTE_CHANGED_CALLBACK];\n const hasChange = !!onChanged;\n\n // Class.booleanAttributes\n // -----------------------------------------------\n // attributes defined as boolean will have\n // an either available or not available attribute\n // regardless of the value.\n // All falsy values, or \"false\", mean attribute removed\n // while truthy values will be set as is.\n // Boolean attributes are also automatically observed.\n const booleanAttributes = Class.booleanAttributes || [];\n booleanAttributes.forEach(attribute => {\n const name = camel(attribute);\n if (!(name in proto)) defineProperty(\n proto,\n name,\n {\n configurable: true,\n get() {\n return this.hasAttribute(attribute);\n },\n set(value) {\n if (!value || value === 'false')\n this.removeAttribute(attribute);\n else\n this.setAttribute(attribute, '');\n }\n }\n );\n });\n\n // Class.observedAttributes\n // -------------------------------------------------------\n // HyperHTMLElement will directly reflect get/setAttribute\n // operation once these attributes are used, example:\n // el.observed = 123;\n // will automatically do\n // el.setAttribute('observed', 123);\n // triggering also the attributeChangedCallback\n const observedAttributes = (Class.observedAttributes || []).filter(\n attribute => booleanAttributes.indexOf(attribute) < 0\n );\n observedAttributes.forEach(attribute => {\n // it is possible to redefine the behavior at any time\n // simply overwriting get prop() and set prop(value)\n const name = camel(attribute);\n if (!(name in proto)) defineProperty(\n proto,\n name,\n {\n configurable: true,\n get() {\n return this.getAttribute(attribute);\n },\n set(value) {\n if (value == null)\n this.removeAttribute(attribute);\n else\n this.setAttribute(attribute, value);\n }\n }\n );\n });\n\n // if these are defined, overwrite the observedAttributes getter\n // to include also booleanAttributes\n const attributes = booleanAttributes.concat(observedAttributes);\n if (attributes.length)\n defineProperty(Class, 'observedAttributes', {\n get() { return attributes; }\n });\n\n // created() {}\n // ---------------------------------\n // an initializer method that grants\n // the node is fully known to the browser.\n // It is ensured to run either after DOMContentLoaded,\n // or once there is a next sibling (stream-friendly) so that\n // you have full access to element attributes and/or childNodes.\n const created = proto.created || function () {\n this.render();\n };\n\n // used to ensure create() is called once and once only\n defineProperty(\n proto,\n '_init$',\n {\n configurable: true,\n writable: true,\n value: true\n }\n );\n\n defineProperty(\n proto,\n ATTRIBUTE_CHANGED_CALLBACK,\n {\n configurable: true,\n value: function aCC(name, prev, curr) {\n if (this._init$) {\n checkReady.call(this, created, attributes, booleanAttributes);\n if (this._init$)\n return this._init$$.push(aCC.bind(this, name, prev, curr));\n }\n // ensure setting same value twice\n // won't trigger twice attributeChangedCallback\n if (hasChange && prev !== curr) {\n onChanged.apply(this, arguments);\n }\n }\n }\n );\n\n const onConnected = proto.connectedCallback;\n const hasConnect = !!onConnected;\n defineProperty(\n proto,\n 'connectedCallback',\n {\n configurable: true,\n value: function cC() {\n if (this._init$) {\n checkReady.call(this, created, attributes, booleanAttributes);\n if (this._init$)\n return this._init$$.push(cC.bind(this));\n }\n if (hasConnect) {\n onConnected.apply(this, arguments);\n }\n }\n }\n );\n\n // define lazily all handlers\n // class { handleClick() { ... }\n // render() { `` } }\n getOwnPropertyNames(proto).forEach(key => {\n if (/^handle[A-Z]/.test(key)) {\n const _key$ = '_' + key + '$';\n const method = proto[key];\n defineProperty(proto, key, {\n configurable: true,\n get() {\n return this[_key$] ||\n (this[_key$] = method.bind(this));\n }\n });\n }\n });\n\n // whenever you want to directly use the component itself\n // as EventListener, you can pass it directly.\n // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38\n // class Reactive extends HyperHTMLElement {\n // oninput(e) { console.log(this, 'changed', e.target.value); }\n // render() { this.html``; }\n // }\n if (!('handleEvent' in proto)) {\n defineProperty(\n proto,\n 'handleEvent',\n {\n configurable: true,\n value(event) {\n this[\n (event.currentTarget.dataset || {}).call ||\n ('on' + event.type)\n ](event);\n }\n }\n );\n }\n\n if (options && options.extends) {\n const Native = document.createElement(options.extends).constructor;\n const Intermediate = class extends Native {};\n const ckeys = ['length', 'name', 'arguments', 'caller', 'prototype'];\n const pkeys = [];\n let Super = null;\n let BaseClass = Class;\n while (Super = getPrototypeOf(BaseClass)) {\n [\n {target: Intermediate, base: Super, keys: ckeys},\n {target: Intermediate.prototype, base: Super.prototype, keys: pkeys}\n ]\n .forEach(({target, base, keys}) => {\n ownKeys(base)\n .filter(key => keys.indexOf(key) < 0)\n .forEach((key) => {\n keys.push(key);\n defineProperty(\n target,\n key,\n getOwnPropertyDescriptor(base, key)\n );\n });\n });\n\n BaseClass = Super;\n if (Super === HyperHTMLElement)\n break;\n }\n setPrototypeOf(Class, Intermediate);\n setPrototypeOf(proto, Intermediate.prototype);\n customElements.define(name, Class, options);\n } else {\n customElements.define(name, Class);\n }\n classes.push(Class);\n return Class;\n }\n\n // weakly relate the shadowRoot for refs usage\n attachShadow() {\n const shadowRoot = attachShadow.apply(this, arguments);\n sr.set(this, shadowRoot);\n return shadowRoot;\n }\n\n // returns elements by ref\n get refs() {\n const value = {};\n if ('_html$' in this) {\n const all = (sr.get(this) || this).querySelectorAll('[ref]');\n for (let {length} = all, i = 0; i < length; i++) {\n const node = all[i];\n value[node.getAttribute('ref')] = node;\n }\n Object.defineProperty(this, 'refs', {value});\n return value;\n }\n return value;\n }\n\n // lazily bind once hyperHTML logic\n // to either the shadowRoot, if present and open,\n // the _shadowRoot property, if set due closed shadow root,\n // or the custom-element itself if no Shadow DOM is used.\n get html() {\n return this._html$ || (this.html = bind(\n // in a way or another, bind to the right node\n // backward compatible, first two could probably go already\n this.shadowRoot || this._shadowRoot || sr.get(this) || this\n ));\n }\n\n // it can be set too if necessary, it won't invoke render()\n set html(value) {\n defineProperty(this, '_html$', {configurable: true, value: value});\n }\n\n // overwrite this method with your own render\n render() {}\n\n // ---------------------//\n // Basic State Handling //\n // ---------------------//\n\n // define the default state object\n // you could use observed properties too\n get defaultState() { return {}; }\n\n // the state with a default\n get state() {\n return this._state$ || (this.state = this.defaultState);\n }\n\n // it can be set too if necessary, it won't invoke render()\n set state(value) {\n defineProperty(this, '_state$', {configurable: true, value: value});\n }\n\n // currently a state is a shallow copy, like in Preact or other libraries.\n // after the state is updated, the render() method will be invoked.\n // ⚠️ do not ever call this.setState() inside this.render()\n setState(state, render) {\n const target = this.state;\n const source = typeof state === 'function' ? state.call(this, target) : state;\n for (const key in source) target[key] = source[key];\n if (render !== false) this.render();\n return this;\n }\n\n }\n // exposing hyperHTML utilities\n HyperHTMLElement.Component = Component;\n HyperHTMLElement.bind = bind;\n HyperHTMLElement.intent = define;\n HyperHTMLElement.wire = wire;\n HyperHTMLElement.hyper = hyper;\n\n try {\n if (Symbol.hasInstance) classes.push(\n defineProperty(HyperHTMLElement, Symbol.hasInstance, {\n enumerable: false,\n configurable: true,\n value(instance) {\n return classes.some(isPrototypeOf, getPrototypeOf(instance));\n }\n }));\n } catch(meh) {}\n\n // ------------------------------//\n // DOMContentLoaded VS created() //\n // ------------------------------//\n const dom = {\n type: 'DOMContentLoaded',\n handleEvent() {\n if (dom.ready()) {\n document.removeEventListener(dom.type, dom, false);\n dom.list.splice(0).forEach(invoke);\n }\n else\n setTimeout(dom.handleEvent);\n },\n ready() {\n return document.readyState === 'complete';\n },\n list: []\n };\n\n if (!dom.ready()) {\n document.addEventListener(dom.type, dom, false);\n }\n\n function checkReady(created, attributes, booleanAttributes) {\n if (dom.ready() || isReady.call(this, created, attributes, booleanAttributes)) {\n if (this._init$) {\n const list = this._init$$ || [];\n delete this._init$$;\n const self = defineProperty(this, '_init$', {value: false});\n booleanAttributes.forEach(name => {\n if (self.getAttribute(name) === 'false')\n self.removeAttribute(name);\n });\n attributes.forEach(name => {\n if (self.hasOwnProperty(name)) {\n const curr = self[name];\n delete self[name];\n list.unshift(() => { self[name] = curr; });\n }\n });\n created.call(self);\n list.forEach(invoke);\n }\n } else {\n if (!this.hasOwnProperty('_init$$'))\n defineProperty(this, '_init$$', {configurable: true, value: []});\n dom.list.push(checkReady.bind(this, created, attributes, booleanAttributes));\n }\n }\n\n function invoke(fn) {\n fn();\n }\n\n function isPrototypeOf(Class) {\n return this === Class.prototype;\n }\n\n function isReady(created, attributes, booleanAttributes) {\n let el = this;\n do { if (el.nextSibling) return true; }\n while (el = el.parentNode);\n setTimeout(checkReady.bind(this, created, attributes, booleanAttributes));\n return false;\n }\n\n exports['default'] = HyperHTMLElement;\n\n Object.defineProperty(exports, '__esModule', { value: true });\n\n return exports.default;\n\n}({}));\n" }, { "path": "min.js", "content": "/*! (c) Andrea Giammarchi - ISC */\nvar 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(;re==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(;an{for(;n{let r=1,i=t;for(;r>>0;n{((e,t,n,r,i,o,s,l,c)=>{const u=[],h=e.length;let d=s,p=0;for(;p{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]=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]{let l=0,c=rs;)--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{for(;r{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\"+e+\"\",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=''+e+\"\",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

',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+\">\"}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({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({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;nnull==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{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;rZe.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}({});\n" }, { "path": "package.json", "content": "{\n \"name\": \"hyperhtml-element\",\n \"version\": \"3.15.2\",\n \"description\": \"An extensible class to define hyperHTML based Custom Elements\",\n \"unpkg\": \"min.js\",\n \"module\": \"esm/index.js\",\n \"main\": \"cjs/index.js\",\n \"types\": \"index.d.ts\",\n \"scripts\": {\n \"$\": \"npm-dollar\",\n \"build\": \"npm-dollar build\",\n \"bundle\": \"npm-dollar bundle\",\n \"min\": \"npm-dollar min\",\n \"test\": \"npm-dollar test.default\",\n \"coverage\": \"mkdir -p ./coverage; nyc report --reporter=text-lcov > ./coverage/lcov.info\"\n },\n \"$\": {\n \"build\": [\n \"$ bundle\",\n \"$ test.babel\",\n \"$ minify\",\n \"$ size\",\n \"$ test\"\n ],\n \"bundle\": {\n \"cjs\": [\n \"ascjs ./esm ./cjs\"\n ],\n \"esm\": [\n \"rollup --config esm.config.js\",\n \"$ fix.esm\"\n ],\n \"es5\": [\n \"rollup --config es5.config.js\",\n \"$ fix.es5\"\n ]\n },\n \"fix\": {\n \"esm\": [\n \"sed -i.bak 's/return exports;/return exports.default;/' index.js\",\n \"rm -f index.js.bak\"\n ],\n \"es5\": [\n \"sed -i.bak 's/return exports;/return exports[\\\"default\\\"];/' es5.js\",\n \"rm -f es5.js.bak\"\n ]\n },\n \"minify\": {\n \"es6\": \"echo '/*! (c) Andrea Giammarchi - ISC */' > min.js && uglifyjs index.js --compress --mangle >> min.js\",\n \"es5\": \"echo '/*! (c) Andrea Giammarchi - ISC */' > es5.min.js && uglifyjs es5.js --compress --mangle >> es5.min.js\"\n },\n \"size\": {\n \"esm\": [\n [\n \"echo -e '\\\\x1b[1mSize for ES2015\\\\x1b[0m'; cat index.js |\",\n \"wc -c;cat min.js |\",\n \"wc -c;gzip -c min.js |\",\n \"wc -c\"\n ]\n ],\n \"es5\": [\n [\n \"echo -e '\\\\x1b[1mSize for ES5\\\\x1b[0m'; cat es5.js |\",\n \"wc -c;cat es5.min.js |\",\n \"wc -c;gzip -c es5.min.js |\",\n \"wc -c\"\n ]\n ]\n },\n \"test\": {\n \"babel\": \"babel --presets @babel/preset-env test/test.js > test/test.es5.js\",\n \"default\": \"nyc node test.js\"\n }\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/WebReflection/hyperHTML-Element.git\"\n },\n \"keywords\": [\n \"hyperHTML\",\n \"custom\",\n \"elements\",\n \"class\"\n ],\n \"author\": \"Andrea Giammarchi\",\n \"license\": \"ISC\",\n \"bugs\": {\n \"url\": \"https://github.com/WebReflection/hyperHTML-Element/issues\"\n },\n \"homepage\": \"https://github.com/WebReflection/hyperHTML-Element#readme\",\n \"greenkeeper\": {\n \"ignore\": [\n \"rollup\",\n \"rollup-plugin-babel\",\n \"rollup-plugin-node-resolve\"\n ]\n },\n \"devDependencies\": {\n \"@babel/cli\": \"^7.15.4\",\n \"@babel/core\": \"^7.15.5\",\n \"@babel/preset-env\": \"^7.15.6\",\n \"ascjs\": \"^5.0.1\",\n \"linkedom\": \"^0.11.2\",\n \"npm-dollar\": \"^2.2.1\",\n \"nyc\": \"^15.1.0\",\n \"rollup\": \"^2.56.3\",\n \"rollup-plugin-babel\": \"^4.4.0\",\n \"rollup-plugin-node-resolve\": \"^5.2.0\",\n \"tressa\": \"^0.3.1\",\n \"uglify-es\": \"^3.3.9\"\n },\n \"dependencies\": {\n \"hyperhtml\": \"^2.34.0\"\n }\n}\n" }, { "path": "test/boolean.html", "content": "\n\n\n \n \n\n\n
\n\n\n\n\n" }, { "path": "test/builtin.html", "content": "\n\n\n \n \n \n\n\n
\n\n\n\n\n" }, { "path": "test/button.html", "content": "\n\n \n HyperHTMLElement Custom Elements BuiltIn\n \n \n \n \n \n \n \n" }, { "path": "test/ce.js", "content": "/*! (c) Andrea Giammarchi @webreflection ISC */\n(function () {\n 'use strict';\n\n var Lie = typeof Promise === 'function' ? Promise : function (fn) {\n var queue = [],\n resolved = 0,\n value;\n fn(function ($) {\n value = $;\n resolved = 1;\n queue.splice(0).forEach(then);\n });\n return {\n then: then\n };\n\n function then(fn) {\n return resolved ? setTimeout(fn, 0, value) : queue.push(fn), this;\n }\n };\n\n var attributesObserver = (function (whenDefined, MutationObserver) {\n var attributeChanged = function attributeChanged(records) {\n for (var i = 0, length = records.length; i < length; i++) {\n dispatch(records[i]);\n }\n };\n\n var dispatch = function dispatch(_ref) {\n var target = _ref.target,\n attributeName = _ref.attributeName,\n oldValue = _ref.oldValue;\n target.attributeChangedCallback(attributeName, oldValue, target.getAttribute(attributeName));\n };\n\n return function (target, is) {\n var attributeFilter = target.constructor.observedAttributes;\n\n if (attributeFilter) {\n whenDefined(is).then(function () {\n new MutationObserver(attributeChanged).observe(target, {\n attributes: true,\n attributeOldValue: true,\n attributeFilter: attributeFilter\n });\n\n for (var i = 0, length = attributeFilter.length; i < length; i++) {\n if (target.hasAttribute(attributeFilter[i])) dispatch({\n target: target,\n attributeName: attributeFilter[i],\n oldValue: null\n });\n }\n });\n }\n\n return target;\n };\n });\n\n var _self = self,\n document = _self.document,\n MutationObserver = _self.MutationObserver,\n Set = _self.Set,\n WeakMap = _self.WeakMap;\n\n var elements = function elements(element) {\n return 'querySelectorAll' in element;\n };\n\n var filter = [].filter;\n var qsaObserver = (function (options) {\n var live = new WeakMap();\n\n var callback = function callback(records) {\n var query = options.query;\n\n if (query.length) {\n for (var i = 0, length = records.length; i < length; i++) {\n loop(filter.call(records[i].addedNodes, elements), true, query);\n loop(filter.call(records[i].removedNodes, elements), false, query);\n }\n }\n };\n\n var drop = function drop(elements) {\n for (var i = 0, length = elements.length; i < length; i++) {\n live[\"delete\"](elements[i]);\n }\n };\n\n var flush = function flush() {\n callback(observer.takeRecords());\n };\n\n var loop = function loop(elements, connected, query) {\n var set = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : new Set();\n\n var _loop = function _loop(_selectors, _element, i, length) {\n // guard against repeated elements within nested querySelectorAll results\n if (!set.has(_element = elements[i])) {\n set.add(_element);\n\n if (connected) {\n for (var q, m = matches(_element), _i = 0, _length = query.length; _i < _length; _i++) {\n if (m.call(_element, q = query[_i])) {\n if (!live.has(_element)) live.set(_element, new Set());\n _selectors = live.get(_element); // guard against selectors that were handled already\n\n if (!_selectors.has(q)) {\n _selectors.add(q);\n\n options.handle(_element, connected, q);\n }\n }\n }\n } // guard against elements that never became live\n else if (live.has(_element)) {\n _selectors = live.get(_element);\n live[\"delete\"](_element);\n\n _selectors.forEach(function (q) {\n options.handle(_element, connected, q);\n });\n }\n\n loop(querySelectorAll(_element), connected, query, set);\n }\n\n selectors = _selectors;\n element = _element;\n };\n\n for (var selectors, element, i = 0, length = elements.length; i < length; i++) {\n _loop(selectors, element, i);\n }\n };\n\n var matches = function matches(element) {\n return element.matches || element.webkitMatchesSelector || element.msMatchesSelector;\n };\n\n var parse = function parse(elements) {\n var connected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n loop(elements, connected, options.query);\n };\n\n var querySelectorAll = function querySelectorAll(root) {\n return query.length ? root.querySelectorAll(query) : query;\n };\n\n var observer = new MutationObserver(callback);\n var root = options.root || document;\n var query = options.query;\n observer.observe(root, {\n childList: true,\n subtree: true\n });\n parse(querySelectorAll(root));\n return {\n drop: drop,\n flush: flush,\n observer: observer,\n parse: parse\n };\n });\n\n var _self$1 = self,\n document$1 = _self$1.document,\n Map = _self$1.Map,\n MutationObserver$1 = _self$1.MutationObserver,\n Object = _self$1.Object,\n Set$1 = _self$1.Set,\n WeakMap$1 = _self$1.WeakMap,\n Element = _self$1.Element,\n HTMLElement = _self$1.HTMLElement,\n Node = _self$1.Node,\n Error = _self$1.Error,\n TypeError = _self$1.TypeError,\n Reflect = _self$1.Reflect;\n var Promise$1 = self.Promise || Lie;\n var defineProperty = Object.defineProperty,\n keys = Object.keys,\n getOwnPropertyNames = Object.getOwnPropertyNames,\n setPrototypeOf = Object.setPrototypeOf;\n var legacy = !self.customElements;\n\n if (legacy) {\n var HTMLBuiltIn = function HTMLBuiltIn() {\n var constructor = this.constructor;\n if (!classes.has(constructor)) throw new TypeError('Illegal constructor');\n var is = classes.get(constructor);\n if (override) return augment(override, is);\n var element = createElement.call(document$1, is);\n return augment(setPrototypeOf(element, constructor.prototype), is);\n };\n\n var createElement = document$1.createElement;\n var classes = new Map();\n var defined = new Map();\n var prototypes = new Map();\n var registry = new Map();\n var query = [];\n\n var handle = function handle(element, connected, selector) {\n var proto = prototypes.get(selector);\n\n if (connected && !proto.isPrototypeOf(element)) {\n override = setPrototypeOf(element, proto);\n\n try {\n new proto.constructor();\n } finally {\n override = null;\n }\n }\n\n var method = \"\".concat(connected ? '' : 'dis', \"connectedCallback\");\n if (method in proto) element[method]();\n };\n\n var _qsaObserver = qsaObserver({\n query: query,\n handle: handle\n }),\n parse = _qsaObserver.parse;\n\n var override = null;\n\n var whenDefined = function whenDefined(name) {\n if (!defined.has(name)) {\n var _,\n $ = new Lie(function ($) {\n _ = $;\n });\n\n defined.set(name, {\n $: $,\n _: _\n });\n }\n\n return defined.get(name).$;\n };\n\n var augment = attributesObserver(whenDefined, MutationObserver$1);\n defineProperty(self, 'customElements', {\n configurable: true,\n value: {\n define: function define(is, Class) {\n if (registry.has(is)) throw new Error(\"the name \\\"\".concat(is, \"\\\" has already been used with this registry\"));\n classes.set(Class, is);\n prototypes.set(is, Class.prototype);\n registry.set(is, Class);\n query.push(is);\n whenDefined(is).then(function () {\n parse(document$1.querySelectorAll(is));\n });\n\n defined.get(is)._(Class);\n },\n get: function get(is) {\n return registry.get(is);\n },\n whenDefined: whenDefined\n }\n });\n defineProperty(HTMLBuiltIn.prototype = HTMLElement.prototype, 'constructor', {\n value: HTMLBuiltIn\n });\n defineProperty(self, 'HTMLElement', {\n configurable: true,\n value: HTMLBuiltIn\n });\n defineProperty(document$1, 'createElement', {\n configurable: true,\n value: function value(name, options) {\n var is = options && options.is;\n var Class = is ? registry.get(is) : registry.get(name);\n return Class ? new Class() : createElement.call(document$1, name);\n }\n }); // in case ShadowDOM is used through a polyfill, to avoid issues\n // with builtin extends within shadow roots\n\n if (!('isConnected' in Node.prototype)) defineProperty(Node.prototype, 'isConnected', {\n configurable: true,\n get: function get() {\n return !(this.ownerDocument.compareDocumentPosition(this) & this.DOCUMENT_POSITION_DISCONNECTED);\n }\n });\n } else {\n try {\n var LI = function LI() {\n return self.Reflect.construct(HTMLLIElement, [], LI);\n };\n\n LI.prototype = HTMLLIElement.prototype;\n var is = 'extends-li';\n self.customElements.define('extends-li', LI, {\n 'extends': 'li'\n });\n legacy = document$1.createElement('li', {\n is: is\n }).outerHTML.indexOf(is) < 0;\n var _self$customElements = self.customElements,\n get = _self$customElements.get,\n _whenDefined = _self$customElements.whenDefined;\n defineProperty(self.customElements, 'whenDefined', {\n configurable: true,\n value: function value(is) {\n var _this = this;\n\n return _whenDefined.call(this, is).then(function (Class) {\n return Class || get.call(_this, is);\n });\n }\n });\n } catch (o_O) {\n legacy = !legacy;\n }\n }\n\n if (legacy) {\n var parseShadow = function parseShadow(element) {\n var _shadowRoots$get = shadowRoots.get(element),\n parse = _shadowRoots$get.parse,\n root = _shadowRoots$get.root;\n\n parse(root.querySelectorAll(this), element.isConnected);\n };\n\n var customElements = self.customElements;\n var attachShadow = Element.prototype.attachShadow;\n var _createElement = document$1.createElement;\n var define = customElements.define,\n _get = customElements.get;\n\n var _ref = Reflect || {\n construct: function construct(HTMLElement) {\n return HTMLElement.call(this);\n }\n },\n construct = _ref.construct;\n\n var shadowRoots = new WeakMap$1();\n var shadows = new Set$1();\n\n var _classes = new Map();\n\n var _defined = new Map();\n\n var _prototypes = new Map();\n\n var _registry = new Map();\n\n var shadowed = [];\n var _query = [];\n\n var getCE = function getCE(is) {\n return _registry.get(is) || _get.call(customElements, is);\n };\n\n var _handle = function _handle(element, connected, selector) {\n var proto = _prototypes.get(selector);\n\n if (connected && !proto.isPrototypeOf(element)) {\n var k = keys(element);\n var v = k.map(function (key) {\n var value = element[key];\n delete element[key];\n return value;\n });\n _override = setPrototypeOf(element, proto);\n\n try {\n new proto.constructor();\n } finally {\n _override = null;\n\n for (var i = 0, length = k.length; i < length; i++) {\n element[k[i]] = v[i];\n }\n }\n }\n\n var method = \"\".concat(connected ? '' : 'dis', \"connectedCallback\");\n if (method in proto) element[method]();\n };\n\n var _qsaObserver2 = qsaObserver({\n query: _query,\n handle: _handle\n }),\n _parse = _qsaObserver2.parse;\n\n var _qsaObserver3 = qsaObserver({\n query: shadowed,\n handle: function handle(element, connected) {\n if (shadowRoots.has(element)) {\n if (connected) shadows.add(element);else shadows[\"delete\"](element);\n if (_query.length) parseShadow.call(_query, element);\n }\n }\n }),\n parseShadowed = _qsaObserver3.parse;\n\n var _whenDefined2 = function _whenDefined2(name) {\n if (!_defined.has(name)) {\n var _,\n $ = new Promise$1(function ($) {\n _ = $;\n });\n\n _defined.set(name, {\n $: $,\n _: _\n });\n }\n\n return _defined.get(name).$;\n };\n\n var _augment = attributesObserver(_whenDefined2, MutationObserver$1);\n\n var _override = null;\n getOwnPropertyNames(self).filter(function (k) {\n return /^HTML/.test(k);\n }).forEach(function (k) {\n var HTMLElement = self[k];\n\n function HTMLBuiltIn() {\n var constructor = this.constructor;\n if (!_classes.has(constructor)) throw new TypeError('Illegal constructor');\n\n var _classes$get = _classes.get(constructor),\n is = _classes$get.is,\n tag = _classes$get.tag;\n\n if (is) {\n if (_override) return _augment(_override, is);\n\n var element = _createElement.call(document$1, tag);\n\n element.setAttribute('is', is);\n return _augment(setPrototypeOf(element, constructor.prototype), is);\n } else return construct.call(this, HTMLElement, [], constructor);\n }\n\n\n defineProperty(HTMLBuiltIn.prototype = HTMLElement.prototype, 'constructor', {\n value: HTMLBuiltIn\n });\n defineProperty(self, k, {\n value: HTMLBuiltIn\n });\n });\n defineProperty(document$1, 'createElement', {\n configurable: true,\n value: function value(name, options) {\n var is = options && options.is;\n\n if (is) {\n var Class = _registry.get(is);\n\n if (Class && _classes.get(Class).tag === name) return new Class();\n }\n\n var element = _createElement.call(document$1, name);\n\n if (is) element.setAttribute('is', is);\n return element;\n }\n });\n if (attachShadow) defineProperty(Element.prototype, 'attachShadow', {\n configurable: true,\n value: function value() {\n var root = attachShadow.apply(this, arguments);\n\n var _qsaObserver4 = qsaObserver({\n query: _query,\n root: root,\n handle: _handle\n }),\n parse = _qsaObserver4.parse;\n\n shadowRoots.set(this, {\n root: root,\n parse: parse\n });\n return root;\n }\n });\n defineProperty(customElements, 'get', {\n configurable: true,\n value: getCE\n });\n defineProperty(customElements, 'whenDefined', {\n configurable: true,\n value: _whenDefined2\n });\n defineProperty(customElements, 'define', {\n configurable: true,\n value: function value(is, Class, options) {\n if (getCE(is)) throw new Error(\"'\".concat(is, \"' has already been defined as a custom element\"));\n var selector;\n var tag = options && options[\"extends\"];\n\n _classes.set(Class, tag ? {\n is: is,\n tag: tag\n } : {\n is: '',\n tag: is\n });\n\n if (tag) {\n selector = \"\".concat(tag, \"[is=\\\"\").concat(is, \"\\\"]\");\n\n _prototypes.set(selector, Class.prototype);\n\n _registry.set(is, Class);\n\n _query.push(selector);\n } else {\n define.apply(customElements, arguments);\n shadowed.push(selector = is);\n }\n\n _whenDefined2(is).then(function () {\n if (tag) {\n _parse(document$1.querySelectorAll(selector));\n\n shadows.forEach(parseShadow, [selector]);\n } else parseShadowed(document$1.querySelectorAll(selector));\n });\n\n _defined.get(is)._(Class);\n }\n });\n }\n\n}());\n" }, { "path": "test/checked.html", "content": "\n\n\n \n \n \n \n \n \n \n\n\n\n\n" }, { "path": "test/index.html", "content": "\n\n \n \n \n \n \n \n \n
\n \n
\n builtin\n \n" }, { "path": "test/test.es5.js", "content": "\"use strict\";\n\nfunction _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); }\n\nvar _templateObject, _templateObject2, _templateObject3, _templateObject4;\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _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); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _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); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _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); }; }\n\nfunction _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); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _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; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nvar MySelf = /*#__PURE__*/function (_HyperHTMLElement) {\n _inherits(MySelf, _HyperHTMLElement);\n\n var _super = _createSuper(MySelf);\n\n function MySelf() {\n _classCallCheck(this, MySelf);\n\n return _super.apply(this, arguments);\n }\n\n _createClass(MySelf, [{\n key: \"created\",\n value: function created() {\n this.render();\n }\n }, {\n key: \"attributeChangedCallback\",\n value: function attributeChangedCallback() {\n this.render();\n }\n }, {\n key: \"render\",\n value: function render() {\n return this.html(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n Hi, my name is \", \",\\n I am \", \" \", \"\"])), this.name, this.age, this.active ? ' and still active' : '');\n }\n }], [{\n key: \"booleanAttributes\",\n get: function get() {\n return ['active'];\n }\n }, {\n key: \"observedAttributes\",\n get: function get() {\n return ['name', 'age'];\n }\n }]);\n\n return MySelf;\n}(HyperHTMLElement);\n\nMySelf.define('my-self');\n\nvar MyInput = /*#__PURE__*/function (_HyperHTMLElement2) {\n _inherits(MyInput, _HyperHTMLElement2);\n\n var _super2 = _createSuper(MyInput);\n\n function MyInput() {\n _classCallCheck(this, MyInput);\n\n return _super2.apply(this, arguments);\n }\n\n _createClass(MyInput, [{\n key: \"attributeChangedCallback\",\n value: function attributeChangedCallback() {\n this.render();\n }\n }, {\n key: \"oninput\",\n value: function oninput(e) {\n this.value = e.target.value;\n this.render();\n console.assert(this.refs.input === this.querySelector('input'), 'input as ref');\n }\n }, {\n key: \"render\",\n value: function render() {\n return this.html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([\"\\n \"])), this.value, this);\n }\n }], [{\n key: \"observedAttributes\",\n get: function get() {\n return ['value', 'boolean'];\n }\n }]);\n\n return MyInput;\n}(HyperHTMLElement);\n\nMyInput.define('my-input');\n\nvar MyLink = /*#__PURE__*/function (_HyperHTMLElement3) {\n _inherits(MyLink, _HyperHTMLElement3);\n\n var _super3 = _createSuper(MyLink);\n\n function MyLink() {\n _classCallCheck(this, MyLink);\n\n return _super3.apply(this, arguments);\n }\n\n _createClass(MyLink, [{\n key: \"created\",\n value: function created() {\n this.href = 'https://github.com/WebReflection/hyperHTML-Element/';\n this.render();\n }\n }, {\n key: \"render\",\n value: function render() {\n return this.html(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([\"it worked\"])));\n }\n }]);\n\n return MyLink;\n}(HyperHTMLElement);\n\nMyLink.define('my-link', {\n \"extends\": 'a'\n});\nsetTimeout(function () {\n HyperHTMLElement.bind(document.body.appendChild(document.createElement('div')))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([\"\"])), Math.random() < .5);\n}, 1000);\n\n" }, { "path": "test/test.js", "content": "class MySelf extends HyperHTMLElement {\n static get booleanAttributes() { return ['active']; }\n static get observedAttributes() { return ['name', 'age']; }\n created() { this.render(); }\n attributeChangedCallback() { this.render(); }\n render() { return this.html`\n Hi, my name is ${this.name},\n I am ${this.age} ${this.active ? ' and still active' : ''}`;\n }\n}\nMySelf.define('my-self');\n\nclass MyInput extends HyperHTMLElement {\n static get observedAttributes() { return ['value', 'boolean']; }\n attributeChangedCallback() { this.render(); }\n oninput(e) {\n this.value = e.target.value;\n this.render();\n console.assert(this.refs.input === this.querySelector('input'), 'input as ref');\n }\n render() { return this.html`\n `;\n }\n}\nMyInput.define('my-input');\n\nclass MyLink extends HyperHTMLElement {\n created() {\n this.href = 'https://github.com/WebReflection/hyperHTML-Element/';\n this.render();\n }\n render () {\n return this.html`it worked`;\n }\n}\nMyLink.define('my-link', {extends: 'a'});\n\n\nsetTimeout(function () {\n HyperHTMLElement.bind(document.body.appendChild(document.createElement('div')))\n ``;\n}, 1000);\n\n" }, { "path": "test.js", "content": "const tressa = require('tressa');\nconst {parseHTML} = require('linkedom');\n\nconst {document, customElements, HTMLElement, CustomEvent} = parseHTML('');\n\nglobal.document = document;\nglobal.customElements = customElements;\nglobal.HTMLElement = HTMLElement;\n\ntressa.title('HyperHTMLElement');\n\n/*\ndelete Object.getOwnPropertySymbols;\nconst getPrototypeOf = Object.getPrototypeOf;\ndelete Object.getPrototypeOf;\nlet times = 0;\nObject.defineProperty(Object, 'getPrototypeOf', {\n get() {\n return times++ < 2 ? void 0 : getPrototypeOf;\n }\n});\ndelete Object.setPrototypeOf;\ndelete Reflect.ownKeys;\n*/\n\nlet HyperHTMLElement = require('./cjs').default;\n\nclass MyElement extends HyperHTMLElement {\n\n static get booleanAttributes() {\n return ['special'];\n }\n\n get special() { return false; }\n\n static get observedAttributes() {\n return ['key'];\n }\n\n constructor(...args) {\n const self = super(...args);\n self.method = [];\n return self;\n }\n\n get nextSibling() {\n delete MyElement.prototype.nextSibling;\n return false;\n }\n\n created() {\n this.method.push('created');\n }\n\n attributeChangedCallback() {\n this.method.push('attributeChangedCallback');\n }\n\n connectedCallback() {\n this.method.push('connectedCallback');\n }\n\n render() {\n return this.html`Hello HyperHTMLElement`;\n }\n\n}\n\nMyElement.define('my-el');\n\nclass MyLink extends HyperHTMLElement {}\nMyLink.define('my-link', {extends: 'a'});\n\ntressa.assert(customElements.get('my-el') === MyElement, ' defined in the registry');\ntressa.assert(new MyLink instanceof HyperHTMLElement, ' is an instance');\n\nlet el = new MyElement();\ntressa.assert(el.special === false, 'nothing special about this el');\ndocument.body.appendChild(el).key = 'value';\nsetTimeout(function () { document.body.appendChild(document.createElement('p')); }, 50);\n\nsetTimeout(function () {\n\n document.dispatchEvent(new CustomEvent('DOMContentLoaded'));\n\n tressa.assert(el.method.length === 3, 'all methods invoked');\n tressa.assert(el.method.join('connectedCallback,attributeChangedCallback,created'), 'with the right order');\n tressa.assert(el.key === 'value' && el.getAttribute('key') === el.key, 'attribute set');\n\n el.created();\n el.key = 'value';\n tressa.assert(el.method.join('created,attributeChangedCallback,connectedCallback'), 'setting same attribute value does not trigger');\n tressa.assert(el.render() === el.render(), 'html is cached once');\n tressa.assert(el.outerHTML === 'Hello HyperHTMLElement', 'the layout is the expected one');\n\n document.readyState = 'complete';\n document.dispatchEvent(new CustomEvent('DOMContentLoaded'));\n\n delete require.cache[require.resolve('./cjs')];\n HyperHTMLElement = require('./cjs').default;\n\n class MyInput extends HyperHTMLElement {\n\n static get booleanAttributes() {\n return ['boolean'];\n }\n\n static get observedAttributes() {\n return ['value', 'another-value'];\n }\n\n get value() {\n return this.getAttribute('value');\n }\n\n set value(value) {\n this.setAttribute('value', value);\n }\n\n attributeChangedCallback() {\n this.called = true;\n }\n\n }\n\n MyInput.define('my-input');\n el = new MyInput();\n el.value = '123';\n el.value = '123';\n el.anotherValue = '456';\n el.anotherValue = '456';\n el.boolean = true;\n tressa.assert(el.value === '123' && el.anotherValue === '456', 'attributes set as expected');\n tressa.assert(el.outerHTML === '', 'input with expected output');\n\n el.boolean = 'absolutely';\n tressa.assert(el.boolean === true, 'empty attributes are returned as true');\n\n el.boolean = false;\n tressa.assert(el.outerHTML === '', 'input without boolean');\n\n el.anotherValue = null;\n tressa.assert(el.outerHTML === '', 'input without other value');\n\n // for code coverage sake\n class MyEmptiness extends HyperHTMLElement {}\n MyEmptiness.define('my-emptyness');\n el = new MyEmptiness();\n document.body.appendChild(el);\n\n class MyAttr extends HyperHTMLElement {\n static get observedAttributes() {\n return ['key'];\n }\n created() {\n tressa.assert(true, 'created invoked as expected');\n }\n attributeChangedCallback() {}\n }\n MyAttr.define('my-attr');\n el = new MyAttr();\n el.setAttribute('key', 'value');\n\n\n class MyConnect extends HyperHTMLElement {\n created() { this.counter = 0; }\n connectedCallback() {\n this.counter++;\n }\n }\n MyConnect.define('my-connect');\n el = new MyConnect();\n document.body.appendChild(el);\n document.body.removeChild(el);\n document.body.appendChild(el);\n tressa.assert(el.counter === 2, 'connected invoked twice');\n\n class MyCreate extends HyperHTMLElement {\n created() {\n tressa.assert(true, 'create invoked as expected');\n }\n }\n MyCreate.define('my-create');\n el = new MyCreate();\n document.body.appendChild(el);\n\n class MyAttrHack extends HyperHTMLElement {\n static get observedAttributes() {\n return ['key'];\n }\n attributeChangedCallback() {\n this.counter = (this.counter || 0) + 1;\n }\n }\n\n MyAttrHack.define('my-attr-hack');\n\n let cb = MyAttrHack.prototype.attributeChangedCallback;\n Object.defineProperty(\n MyAttrHack.prototype,\n 'attributeChangedCallback',\n {\n value: function (name, prev, curr) {\n cb.call(this, name, curr, curr);\n }\n }\n );\n\n el = new MyAttrHack();\n document.body.appendChild(el);\n el.key = 'value';\n tressa.assert(!el.counter, 'if same value, is not invoked');\n cb.call(el, 'key', 'value', null);\n tressa.assert(1 === el.counter, 'otherwise OK');\n\n // code coverage again\n class MyAttrHack2 extends HyperHTMLElement {\n static get observedAttributes() {\n return ['key'];\n }\n created() {\n tressa.assert(true, 'initialized correctly via attributes');\n }\n }\n\n MyAttrHack2.define('my-attr-hack2');\n\n el = new MyAttrHack2();\n document.body.appendChild(el);\n el.key = 'value';\n\n // handleEvent\n class MyHandler extends HyperHTMLElement {\n static get booleanAttributes() {\n return ['special-case'];\n }\n handleEvent() { this.value = 123; return this; }\n }\n\n MyHandler.define('my-handler');\n\n el = new MyHandler();\n el.specialCase = true;\n tressa.assert(\n el.handleEvent() === el && el.value === 123,\n 'original handleEvent preserved and bound'\n );\n\n // handleEvent\n class MyRealHandler extends HyperHTMLElement {\n onclick() { tressa.assert(true, 'click event dispatched'); }\n created() { this.html`click me`; }\n }\n\n MyRealHandler.define('my-real-handler');\n\n el = new MyRealHandler();\n document.body.insertBefore(el, document.body.lastChild);\n var evt = new CustomEvent('click');\n el.firstChild.dispatchEvent(evt);\n\n // reaches currentTarget without a dataset\n document.addEventListener('click', el);\n document.dispatchEvent(evt = new CustomEvent('click'));\n document.removeEventListener('click', el);\n\n // delegated handleEvent\n class MyDelegatedHandler extends HyperHTMLElement {\n whenClickHappens() { tressa.assert(true, 'whenClickHappens event dispatched'); }\n created() { this.html`click me`; }\n }\n\n MyDelegatedHandler.define('my-delegated-handler');\n\n el = new MyDelegatedHandler();\n tressa.assert(!el.refs.span, 'no span until created');\n document.body.appendChild(el);\n var evt = new CustomEvent('click');\n el.firstChild.dispatchEvent(evt);\n\n el.firstChild.onclick = el.whenClickHappens;\n el.firstChild.dispatchEvent(new CustomEvent('click'));\n\n tressa.assert(el.refs.span === el.querySelector('span'), 'span after creation');\n\n class MyShadow extends HyperHTMLElement {\n constructor() {\n super();\n this.attachShadow({mode: 'open'});\n this.html`

`;\n }\n }\n\n MyShadow.define('my-shadow');\n\n tressa.assert(!!(new MyShadow).refs.gotcha, 'ref works in shadow dom too');\n\n // double created\n let createdInstances = 0;\n class MyCreated extends HyperHTMLElement {\n created() { createdInstances++; }\n }\n MyCreated.define('my-created');\n\n document.body.appendChild(new MyCreated);\n document.body.appendChild(new MyCreated);\n\n tressa.assert(createdInstances === 2, 'multiple CE do not affect the class');\n\n // setState with default\n let random = Math.random();\n class StateHandlerDefault extends HyperHTMLElement {\n updateState(state) {\n this.setState(state);\n }\n }\n\n StateHandlerDefault.define('state-handler-default');\n\n el = new StateHandlerDefault();\n el.updateState({random: random});\n tressa.assert(\n el.state.random === random,\n 'state created from scratch and updated'\n );\n\n\n // setState\n class StateHandler extends HyperHTMLElement {\n get defaultState() {\n return {a: 1};\n }\n updateState(state) {\n this.setState(state, false).setState(state);\n }\n }\n\n StateHandler.define('state-handler');\n\n el = new StateHandler();\n random = Math.random();\n el.updateState({random: random});\n tressa.assert(\n el.state.random === random && el.state.a === 1,\n 'state created from default and updated'\n );\n\n // setState callback\n class StateHandlerCallback extends HyperHTMLElement {}\n\n StateHandlerCallback.define('state-handler-callback');\n\n el = new StateHandlerCallback();\n el.setState({value: 1});\n el.setState(prev => ({value: prev.value + 1}));\n tressa.assert(\n el.state.value === 2,\n 'callback executed and result assigned'\n );\n\n class DefaultState extends HyperHTMLElement {\n get defaultState() { return {a: 'a'}; }\n render() {}\n }\n DefaultState.define('default-state');\n class State extends HyperHTMLElement {}\n State.define('just-state');\n var ds = new DefaultState;\n var o = ds.state;\n tressa.assert(!ds.propertyIsEnumerable('state'), 'states are not enumerable');\n tressa.assert(!ds.propertyIsEnumerable('_state$'), 'neither their secret');\n tressa.assert(o.a === 'a', 'default state retrieved');\n var s = new State;\n s.state = o;\n tressa.assert(s.state === o, 'state can be set too');\n ds.setState({b: 'b'});\n tressa.assert(o.a === 'a' && o.b === 'b', 'state was updated');\n s.state = {z: 123};\n tressa.assert(s.state.z === 123 && !s.state.a, 'state can be re-set too');\n\n class LateToTheParty extends HyperHTMLElement {\n static get booleanAttributes() { return ['test']; }\n attributeChangedCallback(name, prev, curr) {\n tressa.assert(name === 'test', 'test reacted');\n tressa.assert(prev == null, 'test reacted without a previous value');\n tressa.assert(curr != null && this[name], 'test returns expected value');\n }\n }\n\n var lttp = document.createElement('late-to-the-party');\n lttp.test = true;\n LateToTheParty.define('late-to-the-party');\n document.body.appendChild(lttp);\n\n class KebabHouse extends HyperHTMLElement {\n static get observedAttributes() {\n return ['kebab-sold'];\n }\n\n get kebabSold () {\n return 'Yes, it is';\n }\n }\n\n KebabHouse.define('kebab-house');\n const kebabHouse = document.createElement('kebab-house');\n tressa.assert(\n kebabHouse.kebabSold === 'Yes, it is',\n `Observed attribute getters don't overwrite predefined getters`\n );\n\n setTimeout(() => {\n delete require.cache[require.resolve('./cjs')];\n global.Symbol = {};\n require('./cjs');\n }, 100);\n\n}, 100);\n" }, { "path": "typescript.md", "content": "# Usage with Typescript\nYou can import the library and use it with Typescript:\n\n```ts\nimport HyperHTMLElement from \"hyperhtml-element\";\n\nclass MySimpleElement extends HyperHTMLElement {\n render() {\n this.html`Hello from my-simple-element!`\n }\n}\n\nMySimpleElement.define('my-simple-element');\n```\n\nYou 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:\n\n```ts\nimport HyperHTMLElement from \"hyperhtml-element\";\n\ninterface MyCustomElementState {\n counter: number;\n name: string;\n}\n\nclass MyCustomElement extends HyperHTMLElement {\n\n // Observed attributes are mapped to class attributes, converted from kebab-case to camelCase\n // They should be declared for later use and declared as optional since the user is not forced to use them\n name?: string;\n\n static get observedAttributes() {\n return ['name'];\n }\n\n attributeChangedCallback(attrName: string, prev: string, curr: string) {\n if (attrName === 'name') {\n this.setState({name: curr});\n }\n }\n\n get defaultState() {\n return {\n counter: 0,\n name: this.name || ''\n };\n }\n\n created() {\n this.render();\n }\n\n oninput(e: KeyboardEvent) {\n const value = (e.target as HTMLInputElement).value;\n this.setState({name: value});\n }\n\n handleIncrement(e: Event) {\n this.setState({counter: ++this.state.counter});\n }\n\n handleDecrement(e: Event) {\n this.setState({counter: --this.state.counter});\n }\n\n render() {\n this.html`\n Owner: ${this.state.name}
\n Counter: ${this.state.counter}
\n \n ${this.state.counter < 0 ?\n HyperHTMLElement.wire()`

Warning: negative counter!
`\n : ''}\n

\n Change Owner name: \n `;\n }\n\n}\n\nMyCustomElement.define('my-custom-element');\n```\n" } ]