diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 00000000..943f5e9f
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,8 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # not working due missing www.
+open_collective: hyperHTML
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+custom: https://www.patreon.com/webreflection
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
new file mode 100644
index 00000000..58f187be
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,2 @@
+
\ No newline at end of file
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
new file mode 100644
index 00000000..73cf8d65
--- /dev/null
+++ b/.github/workflows/node.js.yml
@@ -0,0 +1,31 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: build
+
+on: [push, pull_request]
+
+jobs:
+ build:
+
+ runs-on: ubuntu-latest
+
+ strategy:
+ matrix:
+ node-version: [16]
+
+ steps:
+ - uses: actions/checkout@v2
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v2
+ with:
+ node-version: ${{ matrix.node-version }}
+ cache: 'npm'
+ - run: npm ci
+ - run: npm run build --if-present
+ - run: npm test
+ - run: npm run coverage --if-present
+ - name: Coveralls
+ uses: coverallsapp/github-action@master
+ with:
+ github-token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 58b805fe..3cb01d4d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
.DS_Store
-node_modules/
\ No newline at end of file
+node_modules/
+coverage/
+
diff --git a/.npmignore b/.npmignore
index 98e0593f..2b02e166 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,8 +1,14 @@
-dist/*
-docs/*
+coverage/*
+esm/.eslintrc
+logo/*
node_modules/*
test/*
_config.yml
.DS_Store
.gitignore
-.travis.yml
\ No newline at end of file
+.travis.yml
+.github/ISSUE_TEMPLATE.md
+babel-plugins.json
+CHANGELOG.md
+package-lock.json
+rollup.config.js
diff --git a/.travis.yml b/.travis.yml
index 85e9c12e..cc127136 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,8 +1,11 @@
language: node_js
node_js:
- - 7
+ - stable
git:
depth: 1
branches:
only:
- master
+ - /^greenkeeper/.*$/
+after_success:
+ - "npm run coveralls"
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 00000000..60ac2164
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,147 @@
+# hyper(html) Changelog
+
+### v.2.23
+ * monkey patched rollup generated code to export once the same module shared within sub-modules
+
+### v2.22
+ * using latest domtagger
+
+### v2.21
+ * refactored out all dependencies
+
+### v2.20
+ * re-tested every single supported browser nd fixed few outstanding issues with the 2.19 release
+
+### v2.19
+ * refactored out most of the code
+ * finally managed to have coveralls show coverage stats
+ * attributes can have spaces around as per DOM standard - [#244](https://github.com/WebReflection/hyperHTML/issues/224)
+ * fixed SVG (non-critical) errors when interpolations are used for numerically expected values
+ * fixed minor issues with Edge attributes
+ * changed the unique id so if any of your logic was trusting `_hyper: ....;` comments you need to update your logic - [#300](https://github.com/WebReflection/hyperHTML/issues/300)
+
+### v2.16.8
+ * improved MutationObserver and fallback so that double `dis/connected` events won't happen again
+ * exposed `observe` utility for 3rd parts so that it is possible to observe any node, not only those defined via template literals. Once observed, a node can have `connected` and `disconnected` listeners that will be triggered automatically.
+
+### v2.16
+ * modified `Wire` class to better handle "_same target_" case, making the `haunted.html` demo work same way as if it was bound to the node, through `valueOf()` invoke which would result in just exactly the same node if the wired content produced a node instead of a fragment. While regular users won't be affected, this is an implementation detail that changes a lot for libraries integrating `hyperHTML.wire` in their logic, making wires as fast as `bind` in most component related use cases.
+
+### v2.15
+ * added [invokable slots](https://github.com/WebReflection/hyperHTML/pull/282#issuecomment-433614081) to let developers explore patterns through callbacks that will receive a unique live node for weak references while rendered.
+
+### v2.14
+ * updated [domdiff](https://github.com/WebReflection/domdiff#domdiff) to match [petit-dom](https://github.com/yelouafi/petit-dom) performance
+ * up to 3X performance on huge lists
+ * improved reliability over random changes
+ * unfortunately there's a +0.6K overall size increase due amount of extra logic involved
+
+### v2.13.2
+ * added support for custom CSS properties as object keys.
+
+### v2.13.1
+ * worked around [TypeScript transpilation bug with Template Literals](https://twitter.com/WebReflection/status/1038115439539363840).
+
+### v2.13
+ * added the ability to define custom attributes via `hyperHTML.define("hyper-attribute", callback)`, so that `
` would invoke `callback(target, anyValue)` where `p` would be the target.
+
+### v2.12
+ * added `hyper.Component#dispatch(type, detail)` method to simplify events dispatching between lightweight components, bubbling a cancelable Custom Event with a `.component` property that points at the dispatcher, while the `event.currentTarget` will be the first node found within the component render.
+
+### v2.11
+ * updated [domdiff](https://github.com/WebReflection/domdiff#domdiff) to v1.0
+
+### v2.10.12
+ * patched missing `.children` in SVG node in IE / Edge https://github.com/WebReflection/hyperHTML/issues/244
+
+### v2.10.10
+ * updated [domdiff](https://github.com/WebReflection/domdiff#domdiff) to solve issue #243 (breaking with some sorted list)
+
+### v2.10.5
+ * various fixes and changes after [changes applied to ECMAScript 2015](https://github.com/tc39/ecma262/pull/890)
+
+### v2.8.0
+ * updated [domdiff](https://github.com/WebReflection/domdiff#domdiff) engine to boost performance with segments and lists
+
+### v2.7.2
+ * fixed #218 which was a variant of #200
+
+### v2.7.0
+ * the `Component.for(obj)` is now created first time via `new Component(obj)` - #216
+
+### v2.6.0
+ * declarative hyper.Component via `Component.for(context, uid?)` - #202
+ * hyperHTML TypeScript information - #201
+
+### v2.5.12
+ * fixed #200: textarea/style with initial undefined value
+
+### v2.5.11
+ * fixed #198: connected/disconnected events for nested components
+
+### v2.5.10
+ * more rigid / explicit RegExp to avoid glitches with self-closing tags
+
+### v2.5.8
+ * improved `VOID_ELEMENTS` regular expression (aligned with the _viperHTML_ one)
+
+### v2.5.7
+ * fixed `no.js` patch when wrong count of args is passed
+
+### v2.5.6
+ * added `no.js` file for environments without the ability to use modern JS or based on other languages such Dart.
+
+### v2.5.5
+ * build runs on macOS too
+ * added umd.js file
+
+### v2.5.2
+ * fixed weird SVG case (see #172)
+
+### v2.5.1
+ * improved self-closing reliability recycling and sharing attributes RegExp
+
+### v2.5.0
+ * updated `domdiff` library to the latest version
+ * implemented self-closing tags (and after various tests)
+
+### v2.4.3
+ * ensure attributes values are updated when different from previous one
+ * avoid the usage of the word `global` in the whole code
+
+### v2.4.2
+ * fix scripts with actual content too.
+
+### v2.4.1
+ * fix a bug with scripts that don't trigger network requests in both Firefox and Safari (see bug #152)
+
+### v2.4.0
+ * created a `Wire` class to handle via `domdiff` multiple wired nodes.
+ * brought back multi nodes per wire, a feature lost since **v2.0**
+ * simplified `Component` handling too, making it compatible again with multi wired content.
+ * fixed some check to make IE9+ tests green again
+
+### v2.3.0
+ * dropped the `engine` already. Too complex, no real benefits, refactored the whole internal logic to use [domdiff](https://github.com/WebReflection/domdiff) instead. Deprecated [hyperhtml-majinbuu](https://github.com/WebReflection/hyperhtml-majinbuu) and solved diffing "_forever_".
+
+### v2.2.0
+ * the whole `hyperHTML.engine` has been refactored to use [dom-splicer](https://github.com/WebReflection/dom-splicer) as an effort to make engine development easier
+
+### v2.1.3
+ * the MutationObserver is installed only once and only if there are components that have _on(dis)?connect_ handlers.
+
+### v2.1.2
+ * using a new folders convention with `esm/index.js` as main module and `cjs/index.js` as transformed artifact. This plays very well with bundlers when you `import {hyper} from 'hyperhtml/esm'` or `const {hyper} = require('hyperhtml/cjs');`
+
+### v2.1.1
+ * fast changes where prepending or appending same lists; now dropping upfront or removing at the end are part of the fast path too.
+
+### v2.1.0
+
+ * created a simple default merge engine focused on performance
+ * remove majinbuu as core dependency, created [hyperhtml-majinbuu](https://github.com/WebReflection/hyperhtml-majinbuu) project to swap it back via `hyperHTML.engine = require('hyperhtml-majinbuu')` or as ESM
+ * reduced final bundle size down to 4.1K via brotli
+
+## v2.0.0
+
+Refactoring following ticket #140
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 00000000..fb3f291f
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,67 @@
+# Contribute
+
+## Introduction
+
+First, thank you for considering contributing to hyperhtml! It's people like you that make the open source community such a great community! ๐
+
+We welcome any type of contribution, not only code. You can help with
+- **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open)
+- **Marketing**: writing blog posts, howto's, printing stickers, ...
+- **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ...
+- **Code**: take a look at the [open issues](issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them.
+- **Money**: we welcome financial contributions in full transparency on our [open collective](https://opencollective.com/hyperhtml).
+
+## Your First Contribution
+
+Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
+
+## Submitting code
+
+Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests.
+
+## Code review process
+
+The bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge.
+It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you?
+
+## Financial contributions
+
+We also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/hyperhtml).
+Anyone can file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.
+
+## Questions
+
+If you have any questions, create an [issue](issue) (protip: do a quick search first to see if someone else didn't ask the same question before!).
+You can also reach us at hello@hyperhtml.opencollective.com.
+
+## Credits
+
+### Contributors
+
+Thank you to all the people who have already contributed to hyperhtml!
+
+
+
+### Backers
+
+Thank you to all our backers! [[Become a backer](https://opencollective.com/hyperhtml#backer)]
+
+
+
+
+### Sponsors
+
+Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/hyperhtml#sponsor))
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/DEEPDIVE.md b/DEEPDIVE.md
deleted file mode 100644
index 214523e5..00000000
--- a/DEEPDIVE.md
+++ /dev/null
@@ -1,231 +0,0 @@
-# hyperHTML Developer DeepDive
-
-Being extremely lightweight and simple, there's not much to learn about `hyperHTML`, but there's surely more to discuss about patterns floating around it.
-
-This document aim is to provide as many details as possible per each operation that's possible via `hyperHTML`.
-
-
-## How can the template be unique
-
-One thing I have recently discovered about template literals, and I wish I knew it before, is that these are as static as any other string.
-
-This means that not only ``(`a` === `a`)`` is true, but also ``((a=>a)`a${1}b` === (a=>a)`a${2}b`)``.
-
-This is the first bit to understand: each template string is unique and if the target node has been using this template before, it won't actually parse it again at all and it will simply use the rest of the arguments passed along to update nested bits already known.
-
-
-#### How are known nodes discovered
-
-The very first time a new template is used against a node, its full content is injected into such node using a special `` random comment instead of real values.
-
-Such comment is used to discover both attributes, text nodes, and whole fragments or HTML content, the very first time only.
-
-```js
-// simulation of initial fake injection
-function fakeContent(statics, ...values) {
- const content = statics.join('');
- this.innerHTML = content;
-}
-
-const render = fakeContent.bind(document.body);
-
-// inject fakeContent to the target
-render`a ${'b'} c`;
-
-// check its content
-console.log(
- document.body.childNodes
-);
-// [text, comment, text]
-```
-
-As basic example, it would be now possible to drop that `comment` with a text node that will update its content when `values[0]` is passed on, and once all nodes have been mapped 1:1 to the amount of extra arguments passed along to update each sub-value, real data is used and real data will be used from that very moment on to populate nodes and attributes.
-
-At this point `hyperHTML` uses an [expando property](https://developer.mozilla.org/en-US/docs/Glossary/Expando), for the sake of wider compatibility and to avoid too much [GC pressure](https://mail.mozilla.org/pipermail/es-discuss/2014-December/040565.html) due a potentially heavily populated WeakMap, to save the list of callbacks used to update only what's needed to be updated, being specific text nodes, attributes, or fragments, and together with the static template reference.
-
-From now on, every time the same template is used, all `hyperHTML` has to do is the following:
-
-```js
-// used when the template is known
-function update(statics, ...values) {
- // list of callbacks that target directly the node
- const updates = this[EXPANDO].updates;
- // per each value passed along
- values.forEach((value, i) =>
- // update the related content
- updates[i](value));
- // it's a 1:1 DOM relationships
-}
-```
-
-
-## How are attributes updated
-
-Quite often developers thinks about DOM attributes as something you can get or set via `node.setAttribute(name, value)`.
-Well, that's half of the story, 'cause [attributes are just nodes](https://dom.spec.whatwg.org/#interface-attr) like anything else in the DOM.
-
-This means that a generic attribute can be updated simply setting its `.value` property, like an `input` element would update its view when we set its value. It'd be silly to `input.setAttribute('value', content)` when we can just `input.value = content`, right?
-
-And that's how attributes are updated here. Trapped in a closure, a new template render will simply target the specific attribute and change its value, with the only exception of those attributes prefixed with `on`.
-
-These are meant to be event handlers. And since nobody likes to deal with handlers as string content, `hyperHTML` recognizes these attributes and it actually remove them from the node, but it will assign to the attribute owner, the node, the DOM Level 0 event.
-
-```js
-// simulation of the attribute update mechanism
-if (attribute.name.indexOf('on') === 0) {
- node.removeAttribute(attribute.name);
- updateAttributeUsing(callback => {
- node[attribute.name] = callback;
- });
-} else {
- updateAttributeUsing(value => {
- attribute.value = value;
- });
-}
-```
-
-#### Attributes, the right way
-
-I'm pretty sure at some point someone will file a bug about having the following situation not working:
-```js
-function update(render, state) {
- // WRONG WAY TO SET ATTRIBUTES
- render`
-
- ${state.whatever}
-
- `;
-}
-```
-
-The performance oriented simplicity of `hyperHTML` simply looks for mutable attributes, it doesn't bother with partially mutable attributes. You can also agree with me above code is [YAGNI](https://en.wikipedia.org/wiki/You_aren't_gonna_need_it) at its best.
-
-Following **the correct way** to obtain the exact same result:
-```js
-function update(render, state) {
- render`
-
- ${state.whatever}
-
- `;
-}
-```
-That's it, really, you have a `class` attribute that will update when changes happen, end of all troubles ^_^
-
-
-## How are text nodes updated
-
-Text nodes have a very simple rule: if they are in the wild, they'll be targeted and created.
-```js
-function update(render) {
- render`
-
- ${'text node'}
-
${'html' || node || array}
- ${'text node'}
-
${
- // no surrounding chars is HTML
- 'html' || node || array
- }
-
- ${new Date && 'text node'}
-
- `;
-}
-```
-
-**Remember:** raw text nodes updates are the fastest, cheapest thing to do. Since also CSS ignores spaces around text, unless of course the node is a special one, don't put content right next to tags. Put a space and it'll be faster and safer!
-
-```js
-function update(render) {
- render`
-
-
${'this will accept HTML'}
-
-
- ${'this will update a raw textNode'}
-
- `;
-}
-
-// test it!
-update(hyperHTML.bind(document.body));
-```
-
-
-## How are HTML and Document Fragments managed
-
-This is "_the hard core_" bit. By this time, you should have understood how to hook yourself into HTML and fragments world.
-
-Literally check the example right before this chapter to remember that you **must not have spaces** or any other char around your fragment, being a table row, a list, or anything else, literally!
-
-```js
-function update(render) {
- render`${
- 'even this is a fragment'
- }`;
-}
-
-function update(render) {
- render`
-
-
-
${
- 'so is this'
- }
${
- 'and even this!!!'
- }
-
- `;
-}
-```
-
-Got it? Put a single space around your `${template entry points}` and goodbye HTML or fragments.
-
-#### Good!
-
-Now we can return few different kind of things per each fragment:
-
- * a generic DOM `node`, probably the most common case, it will just be there where you expect it when you need it!
- * a `string`, in such case `innerHTML` will kick in like there's no tomorrow
- * a `boolean` or a `number`, that will be injected through the cheap `textContent` instead of `innerHTML`
- * a `DocumentFragment` which will be compared through its childNodes, and if already there, nothing will happen 'cause fragments are just an indirection to reach real updates, and these also lose nodes once appended
- * an `Array` of _strings_, that will be injected through `innerHTML` and a brutal `.join('')`
- * an `Array` of _nodes_, that if not already the same on the DOM, will be replaced all at once through a runtime fragment.
-
-I think I've managed to not forget any case (please [file a bug](issues/) if I did!),
-but the annoying bit is when you use a fragment as a target.
-
-
-### Binding A Document Fragment
-
-Document fragments lose their content as soon as you `appendChild(them)`.
-Unless you really know what you are doing, don't bind fragments directly.
-
-```js
-// IT DOESN'T WORK AS EXPECTED
-var render = hyperHTML.bind(
- document.createDocumentFragment()
-);
-
-// first time will return the fragment
-document.body.appendChild(
- render`
Hello and Goodbye
`
-);
-
-// but second time it will be empty
-render`
Hello and Goodbye
` // empty
-```
-
-To simplify the boilerplate needed to make fragments work as expected, `hyperHTML` offers a method called **wire**.
-
-Instead of returning the fragment directly, a `.wire()` connects directly the rendered node to the template.
-
-```js
-var render = hyperHTML.wire();
-render`
Hello Again!
` ===
-render`
Hello Again!
`; // true
-
-render`
Hello Again!
`;
-//
Hello Again!
-```
diff --git a/GETTING_STARTED.md b/GETTING_STARTED.md
deleted file mode 100644
index c2bdec41..00000000
--- a/GETTING_STARTED.md
+++ /dev/null
@@ -1,243 +0,0 @@
-# Getting Started with _hyperHTML_
-
-To describe it in a sentence, `hyperHTML` is a just-in-time ([JIT](https://en.wikipedia.org/wiki/Just-in-time_compilation)) template literals compiler that maps 1:1 interpolations to DOM nodes or attributes.
-
-Its strategy consists in creating a generic HTML content once, through an `innerHTML`_-like_ operation,
-and map only parts of the resulting DOM tree to a collection of callbacks that will pass along interpolated values.
-
-Even if it all sounds complex, the algorithm behind `hyperHTML` fits into less than 2KB minified and gzipped,
-it's absolutely cross browser, it delivers extreme performance even on mobile, and its usage is the opposite of complex.
-
-To complete this quick introduction, unless you are targeting also old browsers,
-`hyperHTML` doesn't necessarily need transpilers, compilers, or even source maps;
-it's entirely based on the [ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/) Standard
-and it has zero dependencies.
-
-
-### About Template Literals
-
-[Template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals)
-are a modern and standard JavaScript way to create strings through back-ticks (`` ` ``) with the following peculiarities:
-
- * these can be *multi-line* without needing special escaping
- * these can have interpolated `${placeholders}` containing *any* JavaScript content
- * these can be tagged through a `callback` used as prefix
- * these are always statically unique, even if defined in different places, and even if tagged
-
-```js
-const tlBasic = `basic
-template literal`;
-
-const tlInt = `Interpolating 1 + 2 = ${1 + 2}`;
-
-const tag = (statics, ...values) => console.log(statics, values);
-
-tag`look mom, ${Math.random() < .5 ? '()' : 'no'} brackets`;
-
-// ["look mom, ", " brackets"] | ["no"]
-// list of statics parts | dynamic values
-```
-
-Being tags callbacks, it is also possible to bind them to a specific context, like a DOM node,
-and this is the basic concept that gives `hyperHTML` super powers.
-
-
-## How To Define _hyperHTML_ Templates
-
-There are two basic but fundamental rules to remember:
-
- 1. **attributes**, as well as eventual **callbacks**, must be defined inside single or double quoted attributes
- 2. if there's any char different from `>` and `<` surrounding the interpolation, that content will be text, instead of HTML
-
-Both text content and attributes are automatically sanitized by native DOM functionalities, making templates automatically more secure.
-
-The following template summarizes above cases:
-```js
-const update = (render) => render`
- ${'this is text'}
-
${'this is html'}
${
- 'this is also html '
- }
- ${'but this is text'}
-
- ${'this is text'}
- do you get it?
-`;
-```
-
-The resulting layout would look like the following one:
-```html
- this is text
-
this is html
this is also html
- but this is text
-
- this is text
- do you get it?
-```
-
-If you would like to have an overview of real-world templates and their applications,
-you can check the [header](https://github.com/WebReflection/hypermvc/blob/master/js/views/header.js),
-[main](https://github.com/WebReflection/hypermvc/blob/master/js/views/main.js),
-or [footer](https://github.com/WebReflection/hypermvc/blob/master/js/views/footer.js) parts
-of the [app](https://github.com/WebReflection/hypermvc/blob/master/js/app.js) that renders
-the [TodoMVC version of hyperHTML](https://webreflection.github.io/hypermvc/).
-
-
-### Remember: you cannot do partial attributes
-
-In case you are wondering how to partially update a node attribute, remember the following:
-
-```js
-// THIS IS BROKEN, IT WON'T WORK
-const update = (render, extra) => render`
-
-`;
-
-// while THIS IS THE CORRECT WAY ๐
-const update = (render, extra) => render`
-
-`;
-```
-
-This simplifies both the discovery of an interpolated attribute at compilation time,
-and it will also grant best performance changing complex attributes at once instead of _N_ partial times.
-
-
-### Rendering Multiple Nodes
-If the interpolation returns an array of fragments, or _wires_,
-`hyperTHML` will figure out which one needs to be placed in the document,
-replaced, removed, or be completely untouched, if it was already there.
-
-```js
-const update = (render, listOfItems) => render`
-
${listOfItems.map(item => hyperHTML.wire(item)`
-
${item.name}
- `)}
-`;
-
-```
-
-If you have a generic DOM node as target, and its content is created through fragments or wires,
-you can also pass through `hyperHTML` logic simply sneaking in the array of fragments.
-
-```js
-const render = hyperHTML.bind(document.body);
-
-const update = (render) => render`${[
- // previously defined as wire or nodes
- header, main, footer
-]}`;
-
-update(render);
-```
-
-## What is a _.wire()_ ?
-
-There are basically two ways to define a _rendered_ with `hyperHTML`:
-
- 1. bind directly a specific node like in `const footer = hyperHTML.bind($('footer'));`
- 2. use a new wire or weakly map any object with it: `const article = hyperHTML.wire();`
-
-When the `bind` is known and directly related to a DOM node, `hyperHTML` will take care of **its content**.
-```js
-// in a page similar to:
-//
-
-const cart = hyperHTML.bind(document.querySelector('#cart'));
-
-// the render will populate the cart node
-const updateCart = (render, info) =>render`
-
${
- // however, the list of items is dynamic
- // and here items define their own content
- // same item object, same wire applied
- // new item, new wire
- menu.items.map(item => hyperHTML.wire(item))`
-
${item.name}
`
- }
-`;
-
-updateCart(cart, {class: '', items: [
- {name: 't-shirt'},
- {name: 'pants'}
-]});
-```
-
-A wire can be craeted at any time, and its content will be discovered as soon as its used to render a specific template.
-
-```js
-// empty wire
-const wire = hyperHTML.wire();
-
-// now it will populate itself with the template content
-// if such content contains only one node, that'd be used
-// instead of a fragment. If there are multiple nodes
-// the fragment will bridge all nodes each render
-wire`
-
I will be the wire node
-`;
-
-// if used with a different template
-// previous content and references will be trashed
-wire`
-
I will be the new wire node
-
so am I, we're now a fragment!
-`;
-
-```
-
-If performance is a concern, always use one wire per template.
-
-If objects are passed around and rendered in different places, consider creating per each of them
-one wire per each place, since `hyperHTML.wire(sameObject)` applied to different templates,
-will trash every time the previous wire.
-
-Wires are fast anyway, but if constantly trashed these lose most of their performance boost.
-
-
-### Remember: to see content you need a live node
-Wires are cool because abstract away a lot of troubles,
-but these are also created off the document,
-meaning if these are never attached to a live node,
-these will never be visualized.
-
-```js
-// this will do pretty much nothing
-// visually speaking
-
-const render = hyperHTML.wire();
-
-const update = (render) => render`
-
- Where am I? Can anyone see me?
-
-`;
-
-update(render);
-```
-
-To make that wire visible to the user, target any live content so it will render.
-
-```js
-const containerRender = hyperHTML.bind(
- document.query('.container')
-);
-
-containerRender`${
- update(render)
-}`
-
-```
-
-The container will know how to show up that div.
-
diff --git a/HELPERS.md b/HELPERS.md
new file mode 100644
index 00000000..d0f8aefb
--- /dev/null
+++ b/HELPERS.md
@@ -0,0 +1,57 @@
+## [babel-plugin-remove-ungap]
+
+Remove the [@ungap ponyfill modules] from your bundle. This will decrease the size of
+your bundle if you are targeting modern browsers only or if your build already includes
+other polyfills. This has been tested with [hyperHTML] and [lighterhtml] bundles.
+
+
+## [babel-plugin-template-html-minifier]
+
+Run [html-minifier] on hyperHTML templates.
+
+
+## [babel-plugin-bare-import-rewrite]
+
+This can be used as an alternative to [rollup-plugin-node-resolve], or can be used with certain node.js
+web servers to allow browsing live from source.
+
+Known web server integrations:
+* [fastify-babel] plugin for [fastify] enables running any babel plugins, generally expects `payload.filename` as set by [fastify-static]
+* [express-transform-bare-module-specifiers] for [express] servers
+
+
+## [vinyl-rollup]
+
+This module copies the output of rollup builds to a stream of vinyl-fs objects for [gulp].
+In addition it optionally adds files from modules that were bundled into the stream. This
+makes it easy to ensure that LICENSE and package.json files associated with bundled modules
+are published on the web server without publishing node.js server-side dependencies to the web.
+This can also be used to copy complete modules if required for licensing or if bundled code
+requires additional assets that are not part of the bundled JS (images for example).
+
+
+## [babel-plugin-bundled-import-meta]
+
+If `node_modules/some-web-component/index.js` uses `import.meta.url` to calculate the actual
+path to `node_modules/some-web-components/image.png`, rollup does not compensate. This babel
+plugin rewrites references to `import.meta.url` so it points to the original location where
+it is expected that the additional assets (images and such) can be found. This plugin works
+well with `vinyl-rollup` with `copyModules: true`.
+
+
+[babel-plugin-remove-ungap]: https://github.com/cfware/babel-plugin-remove-ungap#readme
+[@ungap ponyfill modules]: https://github.com/ungap/ungap.github.io#readme
+[hyperHTML]: https://github.com/WebReflection/hyperHTML#readme
+[lighterhtml]: https://github.com/WebReflection/lighterhtml#readme
+[babel-plugin-template-html-minifier]: https://github.com/cfware/babel-plugin-template-html-minifier#readme
+[html-minifier]: https://github.com/kangax/html-minifier#readme
+[babel-plugin-bare-import-rewrite]: https://github.com/cfware/babel-plugin-bare-import-rewrite#readme
+[rollup-plugin-node-resolve]: https://github.com/rollup/rollup-plugin-node-resolve#readme
+[fastify]: https://github.com/fastify/fastify#readme
+[fastify-babel]: https://github.com/cfware/fastify-babel#readme
+[fastify-static]: https://github.com/fastify/fastify-static#readme
+[express-transform-bare-module-specifiers]: https://github.com/nodecg/express-transform-bare-module-specifiers#readme
+[express]: https://github.com/expressjs/express#readme
+[vinyl-rollup]: https://github.com/cfware/vinyl-rollup#readme
+[gulp]: https://github.com/gulpjs/gulp#readme
+[babel-plugin-bundled-import-meta]: https://github.com/cfware/babel-plugin-bundled-import-meta#readme
diff --git a/LICENSE.txt b/LICENSE.txt
index deddd54d..9b3119f5 100644
--- a/LICENSE.txt
+++ b/LICENSE.txt
@@ -1,19 +1,15 @@
-Copyright (C) 2017 by Andrea Giammarchi - @WebReflection
+ISC License
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Copyright (c) 2017, Andrea Giammarchi, @WebReflection
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
diff --git a/README.md b/README.md
index e3800c42..72f7e51a 100644
--- a/README.md
+++ b/README.md
@@ -1,230 +1,204 @@
-# hyperHTML [](https://travis-ci.org/WebReflection/hyperHTML)
+# hyper(HTML)
+
+### Maintainance Only
+
+This module is great, works great, and served me greatly, but there's a pletora of modern, faster, more capable alternatives me, among many other OSS developers, offer so that if obvious bugs are proven to exist, these will be fixed, but there won't be a major release and I won't remove legacy support for stuff that, as previously mentioned, works just fine and it's battle-tested from IE to the latest Chrome.
+
+Removing that legacy support brings pretty much nothing in terms of size too: this module is already smaller than 90% of alternatives out there, dropping 0.xK so that there's less code that, behind feature detection, is not even used in modern browsers, won't benefit anyone.
+
+Thansk for your understanding and for not opening PRs which goal is to drop a check for legacy browsers ... these won't likely be merged ever as that'd be a major release update and I don't think anyone is interested in that.
+
+### ๐ฃ Community Announcement
+
+Please ask questions in the [dedicated discussions repository](https://github.com/WebReflection/discussions), to help the community around this project grow โฅ
-A Fast & Light Virtual DOM Alternative - [release post](https://medium.com/@WebReflection/hyperhtml-a-virtual-dom-alternative-279db455ee0e#.lc65pz9vd),
-now [available for both client and server](https://github.com/WebReflection/viperHTML).
- - -
-## How To Define _hyperHTML_ Templates
-There are two basic but fundamental rules to remember:
+
- 1. **attributes**, as well as eventual **callbacks**, must be defined inside single or double quoted attributes
- 2. if there's any char different from `>` and `<` surrounding the interpolation, that content will be text, instead of HTML
+A **Fast & Light Virtual DOM Alternative**.
-Please read the [Getting Started](https://github.com/WebReflection/hyperHTML/blob/master/GETTING_STARTED.md#how-to-define-hyperhtml-templates) for more examples.
+- - -
+[](https://github.com/WebReflection/donate) [](#backers) [](#sponsors) 
-## Basic Example
-The easiest way to describe `hyperHTML` is through [an example](https://webreflection.github.io/hyperHTML/test/tick.html).
-```js
-// this is React's first tick example
-// https://facebook.github.io/react/docs/state-and-lifecycle.html
-function tick() {
- const element = (
-
- `;
-}
-setInterval(tick, 1000,
- hyperHTML.bind(document.getElementById('root'))
-);
-```
+- - -
-## Compatibility
+Following an overview of projects related, or inspired by, _hyperHTML_. For a deep comparison of current libraries, feel free to [check this gist out](https://gist.github.com/WebReflection/761052d6dae7c8207d2fcba7cdede295).
- * every modern browser (Chrome, Edge, Firefox, Safari)
- * IE9 to IE11 on both Mobile and Desktop
- * every other Mobile or Desktop browser compatible with Babel transpilation
+## ยตhtml
-## Features
+The latest, smallest, iteration of all best concept from this library since 2017, have been packaged in _~2.5K_. If it's extreme minimalism and great _DX_ that you are after, check [uhtml](https://github.com/WebReflection/uhtml#readme) out.
- * Zero dependencies and it fits in **less than 2KB** (minzipped)
- * Uses directly native DOM instead of inventing new syntax/APIs, DOM diffing, or virtual DOM
- * Designed for [template literals](http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals), a templating feature built in to JS
- * Compatible with vanilla DOM elements and vanilla JS data structures `*`
- * Also compatible with Babel transpiled output, hence suitable for every browser you can think of
-`*` actually, this is just a 100% vanilla JS utility, that's why is most likely the fastest and also the smallest. I also feel like I'm writing Assembly these days ... anyway ...
+## hypersimple
+If you've just started with template literals based projects and you like components, or you'd like to understand what's _hyperHTML_ capable of, give [hypersimple](https://github.com/WebReflection/hypersimple#readme) a try ๐
-## Usage
-You have a `hyperHTML` function that is suitable for parsing template literals but it needs a DOM node context to operate.
-If you want to render many times the same template for a specific node, bind it once and boost up performance for free.
-No new nodes, or innerHTML, will be ever used in such case: safe listeners, faster DOM.
+## lighterhtml ๐ก
-You can also check the [TodoMVC repository](https://github.com/WebReflection/hypermvc/tree/master/js) or its [live demo](https://webreflection.github.io/hypermvc/index.html).
+This little brother is "_showing off_" these days, claiming better performance and unprecedented ease of use.
+[GitHub Repository](https://github.com/WebReflection/lighterhtml)
-### Wait ... there is a wire โฐ in the code!
-The helper `hyperHTML.wire(obj?)` is the solution to a common use case:
-using `hyperHTML` to _define not the content_ of a node, _but the node_ itself, or a list of nodes.
-In this case binding a `DocumentFragment` would work but it will also lose its content as soon as it's appended.
-Using `hyperHTML.wire()` will grant that render will always work as expected, without ever losing knowledge of its initial content.
+## Neverland ๐๐ฆ
-It wires render updates to whatever content is holding.
+If you like React hooks concept, don't miss this little wrap that adds 0._something_ overhead to the already lightweight hyperHTML, bringing in very similar concepts.
-```js
-// hyperHTML.wire() returns a new wire
-const render = hyperHTML.wire();
-// which can be used multiple times
-const update = () => render`
-
- List of ${state.paragraphs.length} paragraphs:
-
${
- state.paragraphs
- .map(p => `
${p.title}
`)
- }
-
+
+
Hello, world!
+
It is ${new Date().toLocaleTimeString()}.
+
`;
}
-
-update(
- hyperHTML.bind(articleElement),
- {
- title: 'True story',
- magic: true,
- paragraphs: [
- {title: 'touching'},
- {title: 'incredible'},
- {title: 'doge'}
- ]
- }
+setInterval(tick, 1000,
+ hyperHTML(document.getElementById('root'))
);
```
-Since most of the time templates are 70% static text and 30% or less dynamic, `hyperHTML` passes through the resulting string only once, finds all attributes and content that is dynamic, and maps it 1:1 to the node to make updates as cheap as possible for both node attributes and node content.
+## Features
+ * Zero dependencies, no polyfills needed, and it fits in about **4.6KB** (minified + brotli)
+ * Uses directly native DOM, no virtual DOM involved
+ * Designed for [template literals](http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals), a templating feature built in to JS
+ * Compatible with plain DOM elements and plain JS data structures
+ * Also compatible with Babel transpiled output, hence suitable for every browser you can think of
-### Caveats
+## Compatibility
-Following a list of `hyperHTML` caveats.
+IE9+ , iOS8+ , Android 4+ and every modern Mobile or Desktop Browser.
+You can verify directly through the following links:
-#### Quotes are mandatory for dynamic attributes
-To achieve best performance at setup time, a special `` is used the first time as template values.
+ * [100% code coverage](https://webreflection.github.io/hyperHTML/test/) for browsers natively compatible with string literals
+ * [100% code coverage](https://webreflection.github.io/hyperHTML/test/ie/) for IE9+ and browsers that need transpiled code
+
+#### Weakmap error on ie < 11
-This makes it possible to quickly walk through the DOM tree and setup behaviors, but it's also the value looked for within attributes.
+'@ungap/weakmap': object is not extensible
-Unfortunately, if you have html such `
class="any">
` the result is broken, while using single or double quotes will grant a successful operation. This is the biggest, and so far only, real caveat.
+Babel freezes the template literals by spec but that causes problems with the weakmap polyfill. To fix this error add the fix explained on [ungap/weakmap](https://github.com/ungap/weakmap#transpiled-code-and-frozen-objects-in-legacy-browsers)
-In summary, always write `` instead of ``, or the layout will break, even if the attribute is a number or a boolean.
+## HTML Syntax Highlight
-In this way you'll also ensure whatever value you'll pass later on won't ever break the layout. It's a bit annoying, yet a win.
+If you are using Visual Studio Code you can install `literally-html` to highlight all literals handled by `hyperHTML` and others.
+
-#### Attributes resolved offline might show warnings
-Attributes like image `src` or `srcset` might involve failing network requests or some overly-scary console error even if nothing would be really compromised.
+## Prettier Templates
-This is caused by the fact `hyperHTML` uses a place holder for all attributes but some browser might try to load such string even if not a valid URL.
+If you'd like to make your templates prettier than usual, don't miss this plugin: https://github.com/sgtpep/prettier-plugin-html-template-literals
-Eventually, this console warning would happen only once per container or wire, but you can always augment network sensible attributes in two steps.
+## Questions ?
-```js
-const srcset = ["foo.png 200w"];
+Please ask anything you'd like to know in [StackOverflow](https://stackoverflow.com) using the tag [`hyperhtml`](https://stackoverflow.com/questions/tagged/hyperhtml) so that others can benefit from answers and examples.
-// use this update
-function withSrcset(srcset, alt) {
- var img = toImage(alt);
- img.srcset = srcset.join(" ");
- return img;
-}
+#### hyper or lit ?
-// instead of just this one
-function toImage(alt) {
- return hyperHTML.wire()
- ``;
-}
-```
+You can read more on this [hyperHTML vs lit-html](https://medium.com/@WebReflection/lit-html-vs-hyperhtml-vs-lighterhtml-c084abfe1285) comparison.
+#### installation?
+```js
+npm install hyperhtml
+```
+If your bundler does not work with the following:
+```js
+// ES6
+import hyperHTML from 'hyperhtml';
-## Compatibility
-If your string literals are transpiled, this project should be compatible with every single browser, old or new.
+// CJS
+const hyperHTML = require('hyperhtml');
+```
+You can try any of these other options.
+```js
+import hyperHTML from 'hyperhtml/esm';
+// or
+import {hyper, wire, bind, Component} from 'hyperhtml/esm';
+// or
+import hyperHTML from 'https://unpkg.com/hyperhtml?module';
-If you don't transpile string literals, check the [test page](https://webreflection.github.io/hyperHTML/test/) and wait 'till it's green.
-- - -
-(C) 2017 Andrea Giammarchi - MIT Style License
+const hyperHTML = require('hyperhtml/cjs').default;
+// or
+const {hyper, wire, bind, Component} = require('hyperhtml/cjs');
+```
+
+In alternative, there is a pre-bundled `require("hyperhtml/umd")` or via unpkg as [UMD module](https://unpkg.com/hyperhtml@latest/umd.js).
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index 9da9a029..00000000
--- a/_config.yml
+++ /dev/null
@@ -1 +0,0 @@
-theme: jekyll-theme-dinky
\ No newline at end of file
diff --git a/babel-plugins.json b/babel-plugins.json
new file mode 100644
index 00000000..d982204a
--- /dev/null
+++ b/babel-plugins.json
@@ -0,0 +1,13 @@
+[
+ "check-es2015-constants",
+ "transform-es2015-arrow-functions",
+ "transform-es2015-block-scoped-functions",
+ "transform-es2015-block-scoping",
+ "transform-es2015-computed-properties",
+ "transform-es2015-destructuring",
+ "transform-es2015-duplicate-keys",
+ "transform-es2015-function-name",
+ "transform-es2015-literals",
+ "transform-es2015-shorthand-properties",
+ "transform-es2015-spread"
+]
\ No newline at end of file
diff --git a/cjs/classes/Component.js b/cjs/classes/Component.js
new file mode 100644
index 00000000..632986bf
--- /dev/null
+++ b/cjs/classes/Component.js
@@ -0,0 +1,166 @@
+'use strict';
+const CustomEvent = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/custom-event'));
+const Map = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/essential-map'));
+const WeakMap = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/weakmap'));
+
+// hyperHTML.Component is a very basic class
+// able to create Custom Elements like components
+// including the ability to listen to connect/disconnect
+// events via onconnect/ondisconnect attributes
+// Components can be created imperatively or declaratively.
+// The main difference is that declared components
+// will not automatically render on setState(...)
+// to simplify state handling on render.
+function Component() {
+ return this; // this is needed in Edge !!!
+}
+Object.defineProperty(exports, '__esModule', {value: true}).default = Component
+
+// Component is lazily setup because it needs
+// wire mechanism as lazy content
+function setup(content) {
+ // there are various weakly referenced variables in here
+ // and mostly are to use Component.for(...) static method.
+ const children = new WeakMap;
+ const create = Object.create;
+ const createEntry = (wm, id, component) => {
+ wm.set(id, component);
+ return component;
+ };
+ const get = (Class, info, context, id) => {
+ const relation = info.get(Class) || relate(Class, info);
+ switch (typeof id) {
+ case 'object':
+ case 'function':
+ const wm = relation.w || (relation.w = new WeakMap);
+ return wm.get(id) || createEntry(wm, id, new Class(context));
+ default:
+ const sm = relation.p || (relation.p = create(null));
+ return sm[id] || (sm[id] = new Class(context));
+ }
+ };
+ const relate = (Class, info) => {
+ const relation = {w: null, p: null};
+ info.set(Class, relation);
+ return relation;
+ };
+ const set = context => {
+ const info = new Map;
+ children.set(context, info);
+ return info;
+ };
+ // The Component Class
+ Object.defineProperties(
+ Component,
+ {
+ // Component.for(context[, id]) is a convenient way
+ // to automatically relate data/context to children components
+ // If not created yet, the new Component(context) is weakly stored
+ // and after that same instance would always be returned.
+ for: {
+ configurable: true,
+ value(context, id) {
+ return get(
+ this,
+ children.get(context) || set(context),
+ context,
+ id == null ?
+ 'default' : id
+ );
+ }
+ }
+ }
+ );
+ Object.defineProperties(
+ Component.prototype,
+ {
+ // all events are handled with the component as context
+ handleEvent: {value(e) {
+ const ct = e.currentTarget;
+ this[
+ ('getAttribute' in ct && ct.getAttribute('data-call')) ||
+ ('on' + e.type)
+ ](e);
+ }},
+ // components will lazily define html or svg properties
+ // as soon as these are invoked within the .render() method
+ // Such render() method is not provided by the base class
+ // but it must be available through the Component extend.
+ // Declared components could implement a
+ // render(props) method too and use props as needed.
+ html: lazyGetter('html', content),
+ svg: lazyGetter('svg', content),
+ // the state is a very basic/simple mechanism inspired by Preact
+ state: lazyGetter('state', function () { return this.defaultState; }),
+ // it is possible to define a default state that'd be always an object otherwise
+ defaultState: {get() { return {}; }},
+ // dispatch a bubbling, cancelable, custom event
+ // through the first known/available node
+ dispatch: {value(type, detail) {
+ const {_wire$} = this;
+ if (_wire$) {
+ const event = new CustomEvent(type, {
+ bubbles: true,
+ cancelable: true,
+ detail
+ });
+ event.component = this;
+ return (_wire$.dispatchEvent ?
+ _wire$ :
+ _wire$.firstChild
+ ).dispatchEvent(event);
+ }
+ return false;
+ }},
+ // setting some property state through a new object
+ // or a callback, triggers also automatically a render
+ // unless explicitly specified to not do so (render === false)
+ setState: {value(state, render) {
+ const target = this.state;
+ const source = typeof state === 'function' ? state.call(this, target) : state;
+ for (const key in source) target[key] = source[key];
+ if (render !== false)
+ this.render();
+ return this;
+ }}
+ }
+ );
+}
+exports.setup = setup
+
+// instead of a secret key I could've used a WeakMap
+// However, attaching a property directly will result
+// into better performance with thousands of components
+// hanging around, and less memory pressure caused by the WeakMap
+const lazyGetter = (type, fn) => {
+ const secret = '_' + type + '$';
+ return {
+ get() {
+ return this[secret] || setValue(this, secret, fn.call(this, type));
+ },
+ set(value) {
+ setValue(this, secret, value);
+ }
+ };
+};
+
+// shortcut to set value on get or set(value)
+const setValue = (self, secret, value) =>
+ Object.defineProperty(self, secret, {
+ configurable: true,
+ value: typeof value === 'function' ?
+ function () {
+ return (self._wire$ = value.apply(this, arguments));
+ } :
+ value
+ })[secret]
+;
+
+Object.defineProperties(
+ Component.prototype,
+ {
+ // used to distinguish better than instanceof
+ ELEMENT_NODE: {value: 1},
+ nodeType: {value: -1}
+ }
+);
diff --git a/cjs/hyper/render.js b/cjs/hyper/render.js
new file mode 100644
index 00000000..a401a66b
--- /dev/null
+++ b/cjs/hyper/render.js
@@ -0,0 +1,39 @@
+'use strict';
+const WeakMap = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/weakmap'));
+const tta = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/template-tag-arguments'));
+
+const {OWNER_SVG_ELEMENT} = require('../shared/constants.js');
+const {Tagger} = require('../objects/Updates.js');
+
+// a weak collection of contexts that
+// are already known to hyperHTML
+const bewitched = new WeakMap;
+
+// better known as hyper.bind(node), the render is
+// the main tag function in charge of fully upgrading
+// or simply updating, contexts used as hyperHTML targets.
+// The `this` context is either a regular DOM node or a fragment.
+function render() {
+ const wicked = bewitched.get(this);
+ const args = tta.apply(null, arguments);
+ if (wicked && wicked.template === args[0]) {
+ wicked.tagger.apply(null, args);
+ } else {
+ upgrade.apply(this, args);
+ }
+ return this;
+}
+
+// an upgrade is in charge of collecting template info,
+// parse it once, if unknown, to map all interpolations
+// as single DOM callbacks, relate such template
+// to the current context, and render it after cleaning the context up
+function upgrade(template) {
+ const type = OWNER_SVG_ELEMENT in this ? 'svg' : 'html';
+ const tagger = new Tagger(type);
+ bewitched.set(this, {tagger, template: template});
+ this.textContent = '';
+ this.appendChild(tagger.apply(null, arguments));
+}
+
+Object.defineProperty(exports, '__esModule', {value: true}).default = render;
diff --git a/cjs/hyper/wire.js b/cjs/hyper/wire.js
new file mode 100644
index 00000000..139eaaba
--- /dev/null
+++ b/cjs/hyper/wire.js
@@ -0,0 +1,84 @@
+'use strict';
+const WeakMap = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/weakmap'));
+const tta = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/template-tag-arguments'));
+
+const Wire = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('hyperhtml-wire'));
+
+const {Tagger} = require('../objects/Updates.js');
+
+// all wires used per each context
+const wires = new WeakMap;
+
+// A wire is a callback used as tag function
+// to lazily relate a generic object to a template literal.
+// hyper.wire(user)`
${user.name}
`; => the div#user
+// This provides the ability to have a unique DOM structure
+// related to a unique JS object through a reusable template literal.
+// A wire can specify a type, as svg or html, and also an id
+// via html:id or :id convention. Such :id allows same JS objects
+// to be associated to different DOM structures accordingly with
+// the used template literal without losing previously rendered parts.
+const wire = (obj, type) => obj == null ?
+ content(type || 'html') :
+ weakly(obj, type || 'html');
+
+// A wire content is a virtual reference to one or more nodes.
+// It's represented by either a DOM node, or an Array.
+// In both cases, the wire content role is to simply update
+// all nodes through the list of related callbacks.
+// In few words, a wire content is like an invisible parent node
+// in charge of updating its content like a bound element would do.
+const content = type => {
+ let wire, tagger, template;
+ return function () {
+ const args = tta.apply(null, arguments);
+ if (template !== args[0]) {
+ template = args[0];
+ tagger = new Tagger(type);
+ wire = wireContent(tagger.apply(tagger, args));
+ } else {
+ tagger.apply(tagger, args);
+ }
+ return wire;
+ };
+};
+
+// wires are weakly created through objects.
+// Each object can have multiple wires associated
+// and this is thanks to the type + :id feature.
+const weakly = (obj, type) => {
+ const i = type.indexOf(':');
+ let wire = wires.get(obj);
+ let id = type;
+ if (-1 < i) {
+ id = type.slice(i + 1);
+ type = type.slice(0, i) || 'html';
+ }
+ if (!wire)
+ wires.set(obj, wire = {});
+ return wire[id] || (wire[id] = content(type));
+};
+
+// A document fragment loses its nodes
+// as soon as it is appended into another node.
+// This has the undesired effect of losing wired content
+// on a second render call, because (by then) the fragment would be empty:
+// no longer providing access to those sub-nodes that ultimately need to
+// stay associated with the original interpolation.
+// To prevent hyperHTML from forgetting about a fragment's sub-nodes,
+// fragments are instead returned as an Array of nodes or, if there's only one entry,
+// as a single referenced node which, unlike fragments, will indeed persist
+// wire content throughout multiple renderings.
+// The initial fragment, at this point, would be used as unique reference to this
+// array of nodes or to this single referenced node.
+const wireContent = node => {
+ const childNodes = node.childNodes;
+ const {length} = childNodes;
+ return length === 1 ?
+ childNodes[0] :
+ (length ? new Wire(childNodes) : node);
+};
+
+exports.content = content;
+exports.weakly = weakly;
+Object.defineProperty(exports, '__esModule', {value: true}).default = wire;
diff --git a/cjs/index.js b/cjs/index.js
new file mode 100644
index 00000000..04ed734a
--- /dev/null
+++ b/cjs/index.js
@@ -0,0 +1,77 @@
+'use strict';
+/*! (c) Andrea Giammarchi (ISC) */
+const WeakMap = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/weakmap'));
+const WeakSet = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/essential-weakset'));
+
+const diff = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('domdiff'));
+const Component = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('./classes/Component.js'));
+const {setup} = require('./classes/Component.js');
+const Intent = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('./objects/Intent.js'));
+const {observe, Tagger} = require('./objects/Updates.js');
+const wire = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('./hyper/wire.js'));
+const {content, weakly} = require('./hyper/wire.js');
+const render = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('./hyper/render.js'));
+
+// all functions are self bound to the right context
+// you can do the following
+// const {bind, wire} = hyperHTML;
+// and use them right away: bind(node)`hello!`;
+const bind = context => render.bind(context);
+const define = Intent.define;
+const tagger = Tagger.prototype;
+
+hyper.Component = Component;
+hyper.bind = bind;
+hyper.define = define;
+hyper.diff = diff;
+hyper.hyper = hyper;
+hyper.observe = observe;
+hyper.tagger = tagger;
+hyper.wire = wire;
+
+// exported as shared utils
+// for projects based on hyperHTML
+// that don't necessarily need upfront polyfills
+// i.e. those still targeting IE
+hyper._ = {
+ WeakMap,
+ WeakSet
+};
+
+// the wire content is the lazy defined
+// html or svg property of each hyper.Component
+setup(content);
+
+// everything is exported directly or through the
+// hyperHTML callback, when used as top level script
+exports.Component = Component;
+exports.bind = bind;
+exports.define = define;
+exports.diff = diff;
+exports.hyper = hyper;
+exports.observe = observe;
+exports.tagger = tagger;
+exports.wire = wire;
+
+// by default, hyperHTML is a smart function
+// that "magically" understands what's the best
+// thing to do with passed arguments
+function hyper(HTML) {
+ return arguments.length < 2 ?
+ (HTML == null ?
+ content('html') :
+ (typeof HTML === 'string' ?
+ hyper.wire(null, HTML) :
+ ('raw' in HTML ?
+ content('html')(HTML) :
+ ('nodeType' in HTML ?
+ hyper.bind(HTML) :
+ weakly(HTML, 'html')
+ )
+ )
+ )) :
+ ('raw' in HTML ?
+ content('html') : hyper.wire
+ ).apply(null, arguments);
+}
+Object.defineProperty(exports, '__esModule', {value: true}).default = hyper
diff --git a/cjs/objects/Intent.js b/cjs/objects/Intent.js
new file mode 100644
index 00000000..ef791d77
--- /dev/null
+++ b/cjs/objects/Intent.js
@@ -0,0 +1,40 @@
+'use strict';
+const attributes = {};
+const intents = {};
+const keys = [];
+const hasOwnProperty = intents.hasOwnProperty;
+
+let length = 0;
+
+Object.defineProperty(exports, '__esModule', {value: true}).default = {
+
+ // used to invoke right away hyper:attributes
+ attributes,
+
+ // hyperHTML.define('intent', (object, update) => {...})
+ // can be used to define a third parts update mechanism
+ // when every other known mechanism failed.
+ // hyper.define('user', info => info.name);
+ // hyper(node)`
${{user}}
`;
+ define: (intent, callback) => {
+ if (intent.indexOf('-') < 0) {
+ if (!(intent in intents)) {
+ length = keys.push(intent);
+ }
+ intents[intent] = callback;
+ } else {
+ attributes[intent] = callback;
+ }
+ },
+
+ // this method is used internally as last resort
+ // to retrieve a value out of an object
+ invoke: (object, callback) => {
+ for (let i = 0; i < length; i++) {
+ let key = keys[i];
+ if (hasOwnProperty.call(object, key)) {
+ return intents[key](object[key], callback);
+ }
+ }
+ }
+};
diff --git a/cjs/objects/Updates.js b/cjs/objects/Updates.js
new file mode 100644
index 00000000..0df2e324
--- /dev/null
+++ b/cjs/objects/Updates.js
@@ -0,0 +1,377 @@
+'use strict';
+const CustomEvent = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/custom-event'));
+const WeakSet = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/essential-weakset'));
+const isArray = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/is-array'));
+const createContent = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/create-content'));
+
+const disconnected = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('disconnected'));
+const domdiff = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('domdiff'));
+const domtagger = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('domtagger'));
+const hyperStyle = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('hyperhtml-style'));
+const Wire = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('hyperhtml-wire'));
+
+const {
+ CONNECTED, DISCONNECTED, DOCUMENT_FRAGMENT_NODE, OWNER_SVG_ELEMENT
+} = require('../shared/constants.js');
+
+const Component = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('../classes/Component.js'));
+const Intent = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('./Intent.js'));
+
+const componentType = Component.prototype.nodeType;
+const wireType = Wire.prototype.nodeType;
+
+const observe = disconnected({Event: CustomEvent, WeakSet});
+
+exports.Tagger = Tagger;
+exports.observe = observe;
+
+// returns an intent to explicitly inject content as html
+const asHTML = html => ({html});
+
+// returns nodes from wires and components
+const asNode = (item, i) => {
+ switch (item.nodeType) {
+ case wireType:
+ // in the Wire case, the content can be
+ // removed, post-pended, inserted, or pre-pended and
+ // all these cases are handled by domdiff already
+ /* istanbul ignore next */
+ return (1 / i) < 0 ?
+ (i ? item.remove(true) : item.lastChild) :
+ (i ? item.valueOf(true) : item.firstChild);
+ case componentType:
+ return asNode(item.render(), i);
+ default:
+ return item;
+ }
+}
+
+// returns true if domdiff can handle the value
+const canDiff = value => 'ELEMENT_NODE' in value;
+
+// borrowed from uhandlers
+// https://github.com/WebReflection/uhandlers
+const booleanSetter = (node, key, oldValue) => newValue => {
+ if (oldValue !== !!newValue) {
+ if ((oldValue = !!newValue))
+ node.setAttribute(key, '');
+ else
+ node.removeAttribute(key);
+ }
+};
+
+const hyperSetter = (node, name, svg) => svg ?
+ value => {
+ try {
+ node[name] = value;
+ }
+ catch (nope) {
+ node.setAttribute(name, value);
+ }
+ } :
+ value => {
+ node[name] = value;
+ };
+
+// when a Promise is used as interpolation value
+// its result must be parsed once resolved.
+// This callback is in charge of understanding what to do
+// with a returned value once the promise is resolved.
+const invokeAtDistance = (value, callback) => {
+ callback(value.placeholder);
+ if ('text' in value) {
+ Promise.resolve(value.text).then(String).then(callback);
+ } else if ('any' in value) {
+ Promise.resolve(value.any).then(callback);
+ } else if ('html' in value) {
+ Promise.resolve(value.html).then(asHTML).then(callback);
+ } else {
+ Promise.resolve(Intent.invoke(value, callback)).then(callback);
+ }
+};
+
+// quick and dirty way to check for Promise/ish values
+const isPromise_ish = value => value != null && 'then' in value;
+
+// list of attributes that should not be directly assigned
+const readOnly = /^(?:form|list)$/i;
+
+// reused every slice time
+const slice = [].slice;
+
+// simplifies text node creation
+const text = (node, text) => node.ownerDocument.createTextNode(text);
+
+function Tagger(type) {
+ this.type = type;
+ return domtagger(this);
+}
+
+Tagger.prototype = {
+
+ // there are four kind of attributes, and related behavior:
+ // * events, with a name starting with `on`, to add/remove event listeners
+ // * special, with a name present in their inherited prototype, accessed directly
+ // * regular, accessed through get/setAttribute standard DOM methods
+ // * style, the only regular attribute that also accepts an object as value
+ // so that you can style=${{width: 120}}. In this case, the behavior has been
+ // fully inspired by Preact library and its simplicity.
+ attribute(node, name, original) {
+ const isSVG = OWNER_SVG_ELEMENT in node;
+ let oldValue;
+ // if the attribute is the style one
+ // handle it differently from others
+ if (name === 'style')
+ return hyperStyle(node, original, isSVG);
+ // direct accessors for and friends
+ else if (name.slice(0, 1) === '.')
+ return hyperSetter(node, name.slice(1), isSVG);
+ // boolean accessors for and friends
+ else if (name.slice(0, 1) === '?')
+ return booleanSetter(node, name.slice(1));
+ // the name is an event one,
+ // add/remove event listeners accordingly
+ else if (/^on/.test(name)) {
+ let type = name.slice(2);
+ if (type === CONNECTED || type === DISCONNECTED) {
+ observe(node);
+ }
+ else if (name.toLowerCase()
+ in node) {
+ type = type.toLowerCase();
+ }
+ return newValue => {
+ if (oldValue !== newValue) {
+ if (oldValue)
+ node.removeEventListener(type, oldValue, false);
+ oldValue = newValue;
+ if (newValue)
+ node.addEventListener(type, newValue, false);
+ }
+ };
+ }
+ // the attribute is special ('value' in input)
+ // and it's not SVG *or* the name is exactly data,
+ // in this case assign the value directly
+ else if (
+ name === 'data' ||
+ (!isSVG && name in node && !readOnly.test(name))
+ ) {
+ return newValue => {
+ if (oldValue !== newValue) {
+ oldValue = newValue;
+ if (node[name] !== newValue && newValue == null) {
+ // cleanup on null to avoid silly IE/Edge bug
+ node[name] = '';
+ node.removeAttribute(name);
+ }
+ else
+ node[name] = newValue;
+ }
+ };
+ }
+ else if (name in Intent.attributes) {
+ oldValue;
+ return any => {
+ const newValue = Intent.attributes[name](node, any);
+ if (oldValue !== newValue) {
+ oldValue = newValue;
+ if (newValue == null)
+ node.removeAttribute(name);
+ else
+ node.setAttribute(name, newValue);
+ }
+ };
+ }
+ // in every other case, use the attribute node as it is
+ // update only the value, set it as node only when/if needed
+ else {
+ let owner = false;
+ const attribute = original.cloneNode(true);
+ return newValue => {
+ if (oldValue !== newValue) {
+ oldValue = newValue;
+ if (attribute.value !== newValue) {
+ if (newValue == null) {
+ if (owner) {
+ owner = false;
+ node.removeAttributeNode(attribute);
+ }
+ attribute.value = newValue;
+ } else {
+ attribute.value = newValue;
+ if (!owner) {
+ owner = true;
+ node.setAttributeNode(attribute);
+ }
+ }
+ }
+ }
+ };
+ }
+ },
+
+ // in a hyper(node)`
${content}
` case
+ // everything could happen:
+ // * it's a JS primitive, stored as text
+ // * it's null or undefined, the node should be cleaned
+ // * it's a component, update the content by rendering it
+ // * it's a promise, update the content once resolved
+ // * it's an explicit intent, perform the desired operation
+ // * it's an Array, resolve all values if Promises and/or
+ // update the node with the resulting list of content
+ any(node, childNodes) {
+ const diffOptions = {node: asNode, before: node};
+ const nodeType = OWNER_SVG_ELEMENT in node ? /* istanbul ignore next */ 'svg' : 'html';
+ let fastPath = false;
+ let oldValue;
+ const anyContent = value => {
+ switch (typeof value) {
+ case 'string':
+ case 'number':
+ case 'boolean':
+ if (fastPath) {
+ if (oldValue !== value) {
+ oldValue = value;
+ childNodes[0].textContent = value;
+ }
+ } else {
+ fastPath = true;
+ oldValue = value;
+ childNodes = domdiff(
+ node.parentNode,
+ childNodes,
+ [text(node, value)],
+ diffOptions
+ );
+ }
+ break;
+ case 'function':
+ anyContent(value(node));
+ break;
+ case 'object':
+ case 'undefined':
+ if (value == null) {
+ fastPath = false;
+ childNodes = domdiff(
+ node.parentNode,
+ childNodes,
+ [],
+ diffOptions
+ );
+ break;
+ }
+ default:
+ fastPath = false;
+ oldValue = value;
+ if (isArray(value)) {
+ if (value.length === 0) {
+ if (childNodes.length) {
+ childNodes = domdiff(
+ node.parentNode,
+ childNodes,
+ [],
+ diffOptions
+ );
+ }
+ } else {
+ switch (typeof value[0]) {
+ case 'string':
+ case 'number':
+ case 'boolean':
+ anyContent({html: value});
+ break;
+ case 'object':
+ if (isArray(value[0])) {
+ value = value.concat.apply([], value);
+ }
+ if (isPromise_ish(value[0])) {
+ Promise.all(value).then(anyContent);
+ break;
+ }
+ default:
+ childNodes = domdiff(
+ node.parentNode,
+ childNodes,
+ value,
+ diffOptions
+ );
+ break;
+ }
+ }
+ } else if (canDiff(value)) {
+ childNodes = domdiff(
+ node.parentNode,
+ childNodes,
+ value.nodeType === DOCUMENT_FRAGMENT_NODE ?
+ slice.call(value.childNodes) :
+ [value],
+ diffOptions
+ );
+ } else if (isPromise_ish(value)) {
+ value.then(anyContent);
+ } else if ('placeholder' in value) {
+ invokeAtDistance(value, anyContent);
+ } else if ('text' in value) {
+ anyContent(String(value.text));
+ } else if ('any' in value) {
+ anyContent(value.any);
+ } else if ('html' in value) {
+ childNodes = domdiff(
+ node.parentNode,
+ childNodes,
+ slice.call(
+ createContent(
+ [].concat(value.html).join(''),
+ nodeType
+ ).childNodes
+ ),
+ diffOptions
+ );
+ } else if ('length' in value) {
+ anyContent(slice.call(value));
+ } else {
+ anyContent(Intent.invoke(value, anyContent));
+ }
+ break;
+ }
+ };
+ return anyContent;
+ },
+
+ // style or textareas don't accept HTML as content
+ // it's pointless to transform or analyze anything
+ // different from text there but it's worth checking
+ // for possible defined intents.
+ text(node) {
+ let oldValue;
+ const textContent = value => {
+ if (oldValue !== value) {
+ oldValue = value;
+ const type = typeof value;
+ if (type === 'object' && value) {
+ if (isPromise_ish(value)) {
+ value.then(textContent);
+ } else if ('placeholder' in value) {
+ invokeAtDistance(value, textContent);
+ } else if ('text' in value) {
+ textContent(String(value.text));
+ } else if ('any' in value) {
+ textContent(value.any);
+ } else if ('html' in value) {
+ textContent([].concat(value.html).join(''));
+ } else if ('length' in value) {
+ textContent(slice.call(value).join(''));
+ } else {
+ textContent(Intent.invoke(value, textContent));
+ }
+ } else if (type === 'function') {
+ textContent(value(node));
+ } else {
+ node.textContent = value == null ? '' : value;
+ }
+ }
+ };
+ return textContent;
+ }
+};
diff --git a/cjs/package.json b/cjs/package.json
new file mode 100644
index 00000000..0292b995
--- /dev/null
+++ b/cjs/package.json
@@ -0,0 +1 @@
+{"type":"commonjs"}
\ No newline at end of file
diff --git a/cjs/shared/constants.js b/cjs/shared/constants.js
new file mode 100644
index 00000000..ebe14667
--- /dev/null
+++ b/cjs/shared/constants.js
@@ -0,0 +1,18 @@
+'use strict';
+// Node.CONSTANTS
+// 'cause some engine has no global Node defined
+// (i.e. Node, NativeScript, basicHTML ... )
+const ELEMENT_NODE = 1;
+exports.ELEMENT_NODE = ELEMENT_NODE;
+const DOCUMENT_FRAGMENT_NODE = 11;
+exports.DOCUMENT_FRAGMENT_NODE = DOCUMENT_FRAGMENT_NODE;
+
+// SVG related constants
+const OWNER_SVG_ELEMENT = 'ownerSVGElement';
+exports.OWNER_SVG_ELEMENT = OWNER_SVG_ELEMENT;
+
+// Custom Elements / MutationObserver constants
+const CONNECTED = 'connected';
+exports.CONNECTED = CONNECTED;
+const DISCONNECTED = 'dis' + CONNECTED;
+exports.DISCONNECTED = DISCONNECTED;
diff --git a/cjs/shared/utils.js b/cjs/shared/utils.js
new file mode 100644
index 00000000..ad9a93a7
--- /dev/null
+++ b/cjs/shared/utils.js
@@ -0,0 +1 @@
+'use strict';
diff --git a/dist/test/js/ie.js b/dist/test/js/ie.js
deleted file mode 100644
index 621dacb5..00000000
--- a/dist/test/js/ie.js
+++ /dev/null
@@ -1,32 +0,0 @@
-'use strict';
-
-var _templateObject = _taggedTemplateLiteral(['\n \n
');
-};
\ No newline at end of file
diff --git a/esm.js b/esm.js
new file mode 100644
index 00000000..1ded632c
--- /dev/null
+++ b/esm.js
@@ -0,0 +1,3 @@
+/*! (c) Andrea Giammarchi (ISC) */var hyperHTML=function(N){"use strict";var t={};try{t.WeakMap=WeakMap}catch(e){t.WeakMap=function(t,e){var n=e.defineProperty,r=e.hasOwnProperty,i=a.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},a;function a(e){n(this,"_",{value:"_@ungap/weakmap"+t++}),e&&e.forEach(o,this)}function o(e){this.set(e[0],e[1])}}(Math.random(),Object)}var s=t.WeakMap,i={};try{i.WeakSet=WeakSet}catch(e){!function(e,t){var n=r.prototype;function r(){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._]},i.WeakSet=r}(Math.random(),Object.defineProperty)}function m(e,t,n,r,i,a){for(var o=("selectedIndex"in t),u=o;ro;)--c;l=u+r-c;var m=Array(l),y=s[c];for(--n;y;){for(var b=y.newi,w=y.oldi;b>>0;n"+e+"",r.querySelectorAll(t)):(r.innerHTML=e,r.childNodes)),n},function(e,t){return("svg"===t?function(e){var t=H(O),n=H("div");return n.innerHTML='",F(t,n.firstChild.childNodes),t}:M)(e)});function F(e,t){for(var n=t.length;n--;)e.appendChild(t[0])}function H(e){return e===O?S.createDocumentFragment():S.createElementNS("http://www.w3.org/1999/xhtml",e)}var I,z,V,Z,G,q,B,J,K,Q,U=(z="appendChild",V="cloneNode",Z="createTextNode",q=(G="importNode")in(I=N),(B=I.createDocumentFragment())[z](I[Z]("g")),B[z](I[Z]("")),(q?I[G](B,!0):B[V](!0)).childNodes.length<2?function e(t,n){for(var r=t[V](),i=t.childNodes||[],a=i.length,o=0;n&&o',J[K].childNodes[0].getAttribute(Q)==Y)||(Y="_dt: "+Y.slice(1,-1)+";",ee=!0)}catch(e){}var te="\x3c!--"+Y+"--\x3e",ne=8,re=1,ie=3,ae=/^(?:style|textarea)$/i,oe=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;var ue=" \\f\\n\\r\\t",ce="[^"+ue+"\\/>\"'=]+",le="["+ue+"]+"+ce,se="<([A-Za-z]+[A-Za-z0-9:._-]*)((?:",fe="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|"+ce.replace("\\/","")+"))?)",he=new RegExp(se+le+fe+"+)(["+ue+"]*/?>)","g"),de=new RegExp(se+le+fe+"*)(["+ue+"]*/>)","g"),ve=new RegExp("("+le+"\\s*=\\s*)(['\"]?)"+te+"\\2","gi");function pe(e,t,n,r){return"<"+t+n.replace(ve,ge)+r}function ge(e,t,n){return t+(n||'"')+Y+(n||'"')}function me(e,t,n){return oe.test(t)?e:"<"+t+n+">"}var ye=ee?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 be(e,t,n,r){for(var i=e.childNodes,a=i.length,o=0;o {
+ wm.set(id, component);
+ return component;
+ };
+ const get = (Class, info, context, id) => {
+ const relation = info.get(Class) || relate(Class, info);
+ switch (typeof id) {
+ case 'object':
+ case 'function':
+ const wm = relation.w || (relation.w = new WeakMap);
+ return wm.get(id) || createEntry(wm, id, new Class(context));
+ default:
+ const sm = relation.p || (relation.p = create(null));
+ return sm[id] || (sm[id] = new Class(context));
+ }
+ };
+ const relate = (Class, info) => {
+ const relation = {w: null, p: null};
+ info.set(Class, relation);
+ return relation;
+ };
+ const set = context => {
+ const info = new Map;
+ children.set(context, info);
+ return info;
+ };
+ // The Component Class
+ Object.defineProperties(
+ Component,
+ {
+ // Component.for(context[, id]) is a convenient way
+ // to automatically relate data/context to children components
+ // If not created yet, the new Component(context) is weakly stored
+ // and after that same instance would always be returned.
+ for: {
+ configurable: true,
+ value(context, id) {
+ return get(
+ this,
+ children.get(context) || set(context),
+ context,
+ id == null ?
+ 'default' : id
+ );
+ }
+ }
+ }
+ );
+ Object.defineProperties(
+ Component.prototype,
+ {
+ // all events are handled with the component as context
+ handleEvent: {value(e) {
+ const ct = e.currentTarget;
+ this[
+ ('getAttribute' in ct && ct.getAttribute('data-call')) ||
+ ('on' + e.type)
+ ](e);
+ }},
+ // components will lazily define html or svg properties
+ // as soon as these are invoked within the .render() method
+ // Such render() method is not provided by the base class
+ // but it must be available through the Component extend.
+ // Declared components could implement a
+ // render(props) method too and use props as needed.
+ html: lazyGetter('html', content),
+ svg: lazyGetter('svg', content),
+ // the state is a very basic/simple mechanism inspired by Preact
+ state: lazyGetter('state', function () { return this.defaultState; }),
+ // it is possible to define a default state that'd be always an object otherwise
+ defaultState: {get() { return {}; }},
+ // dispatch a bubbling, cancelable, custom event
+ // through the first known/available node
+ dispatch: {value(type, detail) {
+ const {_wire$} = this;
+ if (_wire$) {
+ const event = new CustomEvent(type, {
+ bubbles: true,
+ cancelable: true,
+ detail
+ });
+ event.component = this;
+ return (_wire$.dispatchEvent ?
+ _wire$ :
+ _wire$.firstChild
+ ).dispatchEvent(event);
+ }
+ return false;
+ }},
+ // setting some property state through a new object
+ // or a callback, triggers also automatically a render
+ // unless explicitly specified to not do so (render === false)
+ setState: {value(state, render) {
+ const target = this.state;
+ const source = typeof state === 'function' ? state.call(this, target) : state;
+ for (const key in source) target[key] = source[key];
+ if (render !== false)
+ this.render();
+ return this;
+ }}
+ }
+ );
+}
+
+// instead of a secret key I could've used a WeakMap
+// However, attaching a property directly will result
+// into better performance with thousands of components
+// hanging around, and less memory pressure caused by the WeakMap
+const lazyGetter = (type, fn) => {
+ const secret = '_' + type + '$';
+ return {
+ get() {
+ return this[secret] || setValue(this, secret, fn.call(this, type));
+ },
+ set(value) {
+ setValue(this, secret, value);
+ }
+ };
+};
+
+// shortcut to set value on get or set(value)
+const setValue = (self, secret, value) =>
+ Object.defineProperty(self, secret, {
+ configurable: true,
+ value: typeof value === 'function' ?
+ function () {
+ return (self._wire$ = value.apply(this, arguments));
+ } :
+ value
+ })[secret]
+;
+
+Object.defineProperties(
+ Component.prototype,
+ {
+ // used to distinguish better than instanceof
+ ELEMENT_NODE: {value: 1},
+ nodeType: {value: -1}
+ }
+);
diff --git a/esm/hyper/render.js b/esm/hyper/render.js
new file mode 100644
index 00000000..b3c4c863
--- /dev/null
+++ b/esm/hyper/render.js
@@ -0,0 +1,38 @@
+import WeakMap from '@ungap/weakmap';
+import tta from '@ungap/template-tag-arguments';
+
+import {OWNER_SVG_ELEMENT} from '../shared/constants.js';
+import {Tagger} from '../objects/Updates.js';
+
+// a weak collection of contexts that
+// are already known to hyperHTML
+const bewitched = new WeakMap;
+
+// better known as hyper.bind(node), the render is
+// the main tag function in charge of fully upgrading
+// or simply updating, contexts used as hyperHTML targets.
+// The `this` context is either a regular DOM node or a fragment.
+function render() {
+ const wicked = bewitched.get(this);
+ const args = tta.apply(null, arguments);
+ if (wicked && wicked.template === args[0]) {
+ wicked.tagger.apply(null, args);
+ } else {
+ upgrade.apply(this, args);
+ }
+ return this;
+}
+
+// an upgrade is in charge of collecting template info,
+// parse it once, if unknown, to map all interpolations
+// as single DOM callbacks, relate such template
+// to the current context, and render it after cleaning the context up
+function upgrade(template) {
+ const type = OWNER_SVG_ELEMENT in this ? 'svg' : 'html';
+ const tagger = new Tagger(type);
+ bewitched.set(this, {tagger, template: template});
+ this.textContent = '';
+ this.appendChild(tagger.apply(null, arguments));
+}
+
+export default render;
diff --git a/esm/hyper/wire.js b/esm/hyper/wire.js
new file mode 100644
index 00000000..3911fbc7
--- /dev/null
+++ b/esm/hyper/wire.js
@@ -0,0 +1,82 @@
+import WeakMap from '@ungap/weakmap';
+import tta from '@ungap/template-tag-arguments';
+
+import Wire from 'hyperhtml-wire';
+
+import {Tagger} from '../objects/Updates.js';
+
+// all wires used per each context
+const wires = new WeakMap;
+
+// A wire is a callback used as tag function
+// to lazily relate a generic object to a template literal.
+// hyper.wire(user)`
${user.name}
`; => the div#user
+// This provides the ability to have a unique DOM structure
+// related to a unique JS object through a reusable template literal.
+// A wire can specify a type, as svg or html, and also an id
+// via html:id or :id convention. Such :id allows same JS objects
+// to be associated to different DOM structures accordingly with
+// the used template literal without losing previously rendered parts.
+const wire = (obj, type) => obj == null ?
+ content(type || 'html') :
+ weakly(obj, type || 'html');
+
+// A wire content is a virtual reference to one or more nodes.
+// It's represented by either a DOM node, or an Array.
+// In both cases, the wire content role is to simply update
+// all nodes through the list of related callbacks.
+// In few words, a wire content is like an invisible parent node
+// in charge of updating its content like a bound element would do.
+const content = type => {
+ let wire, tagger, template;
+ return function () {
+ const args = tta.apply(null, arguments);
+ if (template !== args[0]) {
+ template = args[0];
+ tagger = new Tagger(type);
+ wire = wireContent(tagger.apply(tagger, args));
+ } else {
+ tagger.apply(tagger, args);
+ }
+ return wire;
+ };
+};
+
+// wires are weakly created through objects.
+// Each object can have multiple wires associated
+// and this is thanks to the type + :id feature.
+const weakly = (obj, type) => {
+ const i = type.indexOf(':');
+ let wire = wires.get(obj);
+ let id = type;
+ if (-1 < i) {
+ id = type.slice(i + 1);
+ type = type.slice(0, i) || 'html';
+ }
+ if (!wire)
+ wires.set(obj, wire = {});
+ return wire[id] || (wire[id] = content(type));
+};
+
+// A document fragment loses its nodes
+// as soon as it is appended into another node.
+// This has the undesired effect of losing wired content
+// on a second render call, because (by then) the fragment would be empty:
+// no longer providing access to those sub-nodes that ultimately need to
+// stay associated with the original interpolation.
+// To prevent hyperHTML from forgetting about a fragment's sub-nodes,
+// fragments are instead returned as an Array of nodes or, if there's only one entry,
+// as a single referenced node which, unlike fragments, will indeed persist
+// wire content throughout multiple renderings.
+// The initial fragment, at this point, would be used as unique reference to this
+// array of nodes or to this single referenced node.
+const wireContent = node => {
+ const childNodes = node.childNodes;
+ const {length} = childNodes;
+ return length === 1 ?
+ childNodes[0] :
+ (length ? new Wire(childNodes) : node);
+};
+
+export { content, weakly };
+export default wire;
diff --git a/esm/index.d.ts b/esm/index.d.ts
new file mode 100644
index 00000000..02ce463a
--- /dev/null
+++ b/esm/index.d.ts
@@ -0,0 +1,3 @@
+import hyper from "..";
+export * from '..';
+export default hyper;
diff --git a/esm/index.js b/esm/index.js
new file mode 100644
index 00000000..254708a6
--- /dev/null
+++ b/esm/index.js
@@ -0,0 +1,66 @@
+/*! (c) Andrea Giammarchi (ISC) */
+import WeakMap from '@ungap/weakmap';
+import WeakSet from '@ungap/essential-weakset';
+
+import diff from 'domdiff';
+import Component, {setup} from './classes/Component.js';
+import Intent from './objects/Intent.js';
+import {observe, Tagger} from './objects/Updates.js';
+import wire, {content, weakly} from './hyper/wire.js';
+import render from './hyper/render.js';
+
+// all functions are self bound to the right context
+// you can do the following
+// const {bind, wire} = hyperHTML;
+// and use them right away: bind(node)`hello!`;
+const bind = context => render.bind(context);
+const define = Intent.define;
+const tagger = Tagger.prototype;
+
+hyper.Component = Component;
+hyper.bind = bind;
+hyper.define = define;
+hyper.diff = diff;
+hyper.hyper = hyper;
+hyper.observe = observe;
+hyper.tagger = tagger;
+hyper.wire = wire;
+
+// exported as shared utils
+// for projects based on hyperHTML
+// that don't necessarily need upfront polyfills
+// i.e. those still targeting IE
+hyper._ = {
+ WeakMap,
+ WeakSet
+};
+
+// the wire content is the lazy defined
+// html or svg property of each hyper.Component
+setup(content);
+
+// everything is exported directly or through the
+// hyperHTML callback, when used as top level script
+export {Component, bind, define, diff, hyper, observe, tagger, wire};
+
+// by default, hyperHTML is a smart function
+// that "magically" understands what's the best
+// thing to do with passed arguments
+export default function hyper(HTML) {
+ return arguments.length < 2 ?
+ (HTML == null ?
+ content('html') :
+ (typeof HTML === 'string' ?
+ hyper.wire(null, HTML) :
+ ('raw' in HTML ?
+ content('html')(HTML) :
+ ('nodeType' in HTML ?
+ hyper.bind(HTML) :
+ weakly(HTML, 'html')
+ )
+ )
+ )) :
+ ('raw' in HTML ?
+ content('html') : hyper.wire
+ ).apply(null, arguments);
+}
diff --git a/esm/objects/Intent.js b/esm/objects/Intent.js
new file mode 100644
index 00000000..a18dab89
--- /dev/null
+++ b/esm/objects/Intent.js
@@ -0,0 +1,39 @@
+const attributes = {};
+const intents = {};
+const keys = [];
+const hasOwnProperty = intents.hasOwnProperty;
+
+let length = 0;
+
+export default {
+
+ // used to invoke right away hyper:attributes
+ attributes,
+
+ // hyperHTML.define('intent', (object, update) => {...})
+ // can be used to define a third parts update mechanism
+ // when every other known mechanism failed.
+ // hyper.define('user', info => info.name);
+ // hyper(node)`
${{user}}
`;
+ define: (intent, callback) => {
+ if (intent.indexOf('-') < 0) {
+ if (!(intent in intents)) {
+ length = keys.push(intent);
+ }
+ intents[intent] = callback;
+ } else {
+ attributes[intent] = callback;
+ }
+ },
+
+ // this method is used internally as last resort
+ // to retrieve a value out of an object
+ invoke: (object, callback) => {
+ for (let i = 0; i < length; i++) {
+ let key = keys[i];
+ if (hasOwnProperty.call(object, key)) {
+ return intents[key](object[key], callback);
+ }
+ }
+ }
+};
diff --git a/esm/objects/Updates.js b/esm/objects/Updates.js
new file mode 100644
index 00000000..103b45ff
--- /dev/null
+++ b/esm/objects/Updates.js
@@ -0,0 +1,377 @@
+import CustomEvent from '@ungap/custom-event';
+import WeakSet from '@ungap/essential-weakset';
+import isArray from '@ungap/is-array';
+import createContent from '@ungap/create-content';
+
+import disconnected from 'disconnected';
+import domdiff from 'domdiff';
+import domtagger from 'domtagger';
+import hyperStyle from 'hyperhtml-style';
+import Wire from 'hyperhtml-wire';
+
+import {
+ CONNECTED, DISCONNECTED,
+ DOCUMENT_FRAGMENT_NODE,
+ OWNER_SVG_ELEMENT
+} from '../shared/constants.js';
+
+import Component from '../classes/Component.js';
+import Intent from './Intent.js';
+
+const componentType = Component.prototype.nodeType;
+const wireType = Wire.prototype.nodeType;
+
+const observe = disconnected({Event: CustomEvent, WeakSet});
+
+export {Tagger, observe};
+
+// returns an intent to explicitly inject content as html
+const asHTML = html => ({html});
+
+// returns nodes from wires and components
+const asNode = (item, i) => {
+ switch (item.nodeType) {
+ case wireType:
+ // in the Wire case, the content can be
+ // removed, post-pended, inserted, or pre-pended and
+ // all these cases are handled by domdiff already
+ /* istanbul ignore next */
+ return (1 / i) < 0 ?
+ (i ? item.remove(true) : item.lastChild) :
+ (i ? item.valueOf(true) : item.firstChild);
+ case componentType:
+ return asNode(item.render(), i);
+ default:
+ return item;
+ }
+}
+
+// returns true if domdiff can handle the value
+const canDiff = value => 'ELEMENT_NODE' in value;
+
+// borrowed from uhandlers
+// https://github.com/WebReflection/uhandlers
+const booleanSetter = (node, key, oldValue) => newValue => {
+ if (oldValue !== !!newValue) {
+ if ((oldValue = !!newValue))
+ node.setAttribute(key, '');
+ else
+ node.removeAttribute(key);
+ }
+};
+
+const hyperSetter = (node, name, svg) => svg ?
+ value => {
+ try {
+ node[name] = value;
+ }
+ catch (nope) {
+ node.setAttribute(name, value);
+ }
+ } :
+ value => {
+ node[name] = value;
+ };
+
+// when a Promise is used as interpolation value
+// its result must be parsed once resolved.
+// This callback is in charge of understanding what to do
+// with a returned value once the promise is resolved.
+const invokeAtDistance = (value, callback) => {
+ callback(value.placeholder);
+ if ('text' in value) {
+ Promise.resolve(value.text).then(String).then(callback);
+ } else if ('any' in value) {
+ Promise.resolve(value.any).then(callback);
+ } else if ('html' in value) {
+ Promise.resolve(value.html).then(asHTML).then(callback);
+ } else {
+ Promise.resolve(Intent.invoke(value, callback)).then(callback);
+ }
+};
+
+// quick and dirty way to check for Promise/ish values
+const isPromise_ish = value => value != null && 'then' in value;
+
+// list of attributes that should not be directly assigned
+const readOnly = /^(?:form|list)$/i;
+
+// reused every slice time
+const slice = [].slice;
+
+// simplifies text node creation
+const text = (node, text) => node.ownerDocument.createTextNode(text);
+
+function Tagger(type) {
+ this.type = type;
+ return domtagger(this);
+}
+
+Tagger.prototype = {
+
+ // there are four kind of attributes, and related behavior:
+ // * events, with a name starting with `on`, to add/remove event listeners
+ // * special, with a name present in their inherited prototype, accessed directly
+ // * regular, accessed through get/setAttribute standard DOM methods
+ // * style, the only regular attribute that also accepts an object as value
+ // so that you can style=${{width: 120}}. In this case, the behavior has been
+ // fully inspired by Preact library and its simplicity.
+ attribute(node, name, original) {
+ const isSVG = OWNER_SVG_ELEMENT in node;
+ let oldValue;
+ // if the attribute is the style one
+ // handle it differently from others
+ if (name === 'style')
+ return hyperStyle(node, original, isSVG);
+ // direct accessors for and friends
+ else if (name.slice(0, 1) === '.')
+ return hyperSetter(node, name.slice(1), isSVG);
+ // boolean accessors for and friends
+ else if (name.slice(0, 1) === '?')
+ return booleanSetter(node, name.slice(1));
+ // the name is an event one,
+ // add/remove event listeners accordingly
+ else if (/^on/.test(name)) {
+ let type = name.slice(2);
+ if (type === CONNECTED || type === DISCONNECTED) {
+ observe(node);
+ }
+ else if (name.toLowerCase()
+ in node) {
+ type = type.toLowerCase();
+ }
+ return newValue => {
+ if (oldValue !== newValue) {
+ if (oldValue)
+ node.removeEventListener(type, oldValue, false);
+ oldValue = newValue;
+ if (newValue)
+ node.addEventListener(type, newValue, false);
+ }
+ };
+ }
+ // the attribute is special ('value' in input)
+ // and it's not SVG *or* the name is exactly data,
+ // in this case assign the value directly
+ else if (
+ name === 'data' ||
+ (!isSVG && name in node && !readOnly.test(name))
+ ) {
+ return newValue => {
+ if (oldValue !== newValue) {
+ oldValue = newValue;
+ if (node[name] !== newValue && newValue == null) {
+ // cleanup on null to avoid silly IE/Edge bug
+ node[name] = '';
+ node.removeAttribute(name);
+ }
+ else
+ node[name] = newValue;
+ }
+ };
+ }
+ else if (name in Intent.attributes) {
+ oldValue;
+ return any => {
+ const newValue = Intent.attributes[name](node, any);
+ if (oldValue !== newValue) {
+ oldValue = newValue;
+ if (newValue == null)
+ node.removeAttribute(name);
+ else
+ node.setAttribute(name, newValue);
+ }
+ };
+ }
+ // in every other case, use the attribute node as it is
+ // update only the value, set it as node only when/if needed
+ else {
+ let owner = false;
+ const attribute = original.cloneNode(true);
+ return newValue => {
+ if (oldValue !== newValue) {
+ oldValue = newValue;
+ if (attribute.value !== newValue) {
+ if (newValue == null) {
+ if (owner) {
+ owner = false;
+ node.removeAttributeNode(attribute);
+ }
+ attribute.value = newValue;
+ } else {
+ attribute.value = newValue;
+ if (!owner) {
+ owner = true;
+ node.setAttributeNode(attribute);
+ }
+ }
+ }
+ }
+ };
+ }
+ },
+
+ // in a hyper(node)`
${content}
` case
+ // everything could happen:
+ // * it's a JS primitive, stored as text
+ // * it's null or undefined, the node should be cleaned
+ // * it's a component, update the content by rendering it
+ // * it's a promise, update the content once resolved
+ // * it's an explicit intent, perform the desired operation
+ // * it's an Array, resolve all values if Promises and/or
+ // update the node with the resulting list of content
+ any(node, childNodes) {
+ const diffOptions = {node: asNode, before: node};
+ const nodeType = OWNER_SVG_ELEMENT in node ? /* istanbul ignore next */ 'svg' : 'html';
+ let fastPath = false;
+ let oldValue;
+ const anyContent = value => {
+ switch (typeof value) {
+ case 'string':
+ case 'number':
+ case 'boolean':
+ if (fastPath) {
+ if (oldValue !== value) {
+ oldValue = value;
+ childNodes[0].textContent = value;
+ }
+ } else {
+ fastPath = true;
+ oldValue = value;
+ childNodes = domdiff(
+ node.parentNode,
+ childNodes,
+ [text(node, value)],
+ diffOptions
+ );
+ }
+ break;
+ case 'function':
+ anyContent(value(node));
+ break;
+ case 'object':
+ case 'undefined':
+ if (value == null) {
+ fastPath = false;
+ childNodes = domdiff(
+ node.parentNode,
+ childNodes,
+ [],
+ diffOptions
+ );
+ break;
+ }
+ default:
+ fastPath = false;
+ oldValue = value;
+ if (isArray(value)) {
+ if (value.length === 0) {
+ if (childNodes.length) {
+ childNodes = domdiff(
+ node.parentNode,
+ childNodes,
+ [],
+ diffOptions
+ );
+ }
+ } else {
+ switch (typeof value[0]) {
+ case 'string':
+ case 'number':
+ case 'boolean':
+ anyContent({html: value});
+ break;
+ case 'object':
+ if (isArray(value[0])) {
+ value = value.concat.apply([], value);
+ }
+ if (isPromise_ish(value[0])) {
+ Promise.all(value).then(anyContent);
+ break;
+ }
+ default:
+ childNodes = domdiff(
+ node.parentNode,
+ childNodes,
+ value,
+ diffOptions
+ );
+ break;
+ }
+ }
+ } else if (canDiff(value)) {
+ childNodes = domdiff(
+ node.parentNode,
+ childNodes,
+ value.nodeType === DOCUMENT_FRAGMENT_NODE ?
+ slice.call(value.childNodes) :
+ [value],
+ diffOptions
+ );
+ } else if (isPromise_ish(value)) {
+ value.then(anyContent);
+ } else if ('placeholder' in value) {
+ invokeAtDistance(value, anyContent);
+ } else if ('text' in value) {
+ anyContent(String(value.text));
+ } else if ('any' in value) {
+ anyContent(value.any);
+ } else if ('html' in value) {
+ childNodes = domdiff(
+ node.parentNode,
+ childNodes,
+ slice.call(
+ createContent(
+ [].concat(value.html).join(''),
+ nodeType
+ ).childNodes
+ ),
+ diffOptions
+ );
+ } else if ('length' in value) {
+ anyContent(slice.call(value));
+ } else {
+ anyContent(Intent.invoke(value, anyContent));
+ }
+ break;
+ }
+ };
+ return anyContent;
+ },
+
+ // style or textareas don't accept HTML as content
+ // it's pointless to transform or analyze anything
+ // different from text there but it's worth checking
+ // for possible defined intents.
+ text(node) {
+ let oldValue;
+ const textContent = value => {
+ if (oldValue !== value) {
+ oldValue = value;
+ const type = typeof value;
+ if (type === 'object' && value) {
+ if (isPromise_ish(value)) {
+ value.then(textContent);
+ } else if ('placeholder' in value) {
+ invokeAtDistance(value, textContent);
+ } else if ('text' in value) {
+ textContent(String(value.text));
+ } else if ('any' in value) {
+ textContent(value.any);
+ } else if ('html' in value) {
+ textContent([].concat(value.html).join(''));
+ } else if ('length' in value) {
+ textContent(slice.call(value).join(''));
+ } else {
+ textContent(Intent.invoke(value, textContent));
+ }
+ } else if (type === 'function') {
+ textContent(value(node));
+ } else {
+ node.textContent = value == null ? '' : value;
+ }
+ }
+ };
+ return textContent;
+ }
+};
diff --git a/esm/shared/constants.js b/esm/shared/constants.js
new file mode 100644
index 00000000..667b8e9d
--- /dev/null
+++ b/esm/shared/constants.js
@@ -0,0 +1,12 @@
+// Node.CONSTANTS
+// 'cause some engine has no global Node defined
+// (i.e. Node, NativeScript, basicHTML ... )
+export const ELEMENT_NODE = 1;
+export const DOCUMENT_FRAGMENT_NODE = 11;
+
+// SVG related constants
+export const OWNER_SVG_ELEMENT = 'ownerSVGElement';
+
+// Custom Elements / MutationObserver constants
+export const CONNECTED = 'connected';
+export const DISCONNECTED = 'dis' + CONNECTED;
diff --git a/hyperhtml.js b/hyperhtml.js
deleted file mode 100644
index c6e5b525..00000000
--- a/hyperhtml.js
+++ /dev/null
@@ -1,541 +0,0 @@
-var hyperHTML = (function () {'use strict';
-
- /*! (C) 2017 Andrea Giammarchi @WebReflection (MIT) */
-
- // hyperHTML \o/
- //
- // var render = hyperHTML.bind(document.body);
- // setInterval(() => render`
- //
โก๏ธ hyperHTML โก๏ธ
- //
- // ${(new Date).toLocaleString()}
- //
- // `, 1000);
- function hyperHTML(statics) {
- return EXPANDO in this &&
- this[EXPANDO].s === statics ?
- update.apply(this, arguments) :
- upgrade.apply(this, arguments);
- }
-
- // A wire โฐ is a bridge between a document fragment
- // and its inevitably lost list of rendered nodes
- //
- // var render = hyperHTML.wire();
- // render`
- //
Hello Wired!
- // `;
- //
- // Every single invocation will return that div
- // or the list of elements it contained as Array.
- // This simplifies most task where hyperHTML
- // is used to create the node itself, instead of
- // populating an already known and bound one.
- hyperHTML.wire = function wire(obj, type) {
- return arguments.length < 1 ?
- wireContent('html') :
- (obj == null ?
- wireContent(type || 'html') :
- (wm.get(obj) || wireWeakly(obj, type || 'html'))
- );
- };
-
- // - - - - - - - - - - - - - - - - - - - - - - -
-
- // -------------------------
- // DOM parsing & traversing
- // -------------------------
-
- // setup attributes for updates
- //
- //
- //
- // Note: always use quotes around attributes, even for events,
- // booleans, or numbers, otherwise this function fails.
- function attributesSeeker(node, actions) {
- for (var
- attribute,
- value = IE ? uid : uidc,
- attributes = slice.call(node.attributes),
- i = 0,
- length = attributes.length;
- i < length; i++
- ) {
- attribute = attributes[i];
- if (attribute.value === value) {
- // with IE the order doesn't really matter
- // as long as the right attribute is addressed
- actions.push(setAttribute(node, IE ?
- node.getAttributeNode(IEAttributes.shift()) :
- attribute
- ));
- }
- }
- }
-
- // traverse the whole node in search of editable content
- // decide what each future update should change
- //
- //
- //
${some.HTML}
- //
- // ${some.text}
- //
- //
- function lukeTreeWalker(node, actions) {
- for (var
- child, text,
- childNodes = slice.call(node.childNodes),
- length = childNodes.length,
- i = 0; i < length; i++
- ) {
- child = childNodes[i];
- switch (child.nodeType) {
- case 1:
- attributesSeeker(child, actions);
- lukeTreeWalker(child, actions);
- break;
- case 8:
- if (child.textContent === uid) {
- if (length === 1) {
- actions.push(setAnyContent(node));
- node.removeChild(child);
- } else if (
- (i < 1 || childNodes[i - 1].nodeType === 1) &&
- (i + 1 === length || childNodes[i + 1].nodeType === 1)
- ) {
- actions.push(setVirtualContent(child));
- } else {
- text = node.ownerDocument.createTextNode('');
- actions.push(setTextContent(text));
- node.replaceChild(text, child);
- }
- }
- break;
- }
- }
- }
-
-
- // -------------------------
- // DOM manipulating
- // -------------------------
-
- // update regular bound nodes
- //
- // var render = hyperHTML.bind(node);
- // function update() {
- // render`template`;
- // }
- function setAnyContent(node) {
- return function any(value) {
- switch (typeof value) {
- case 'string':
- node.innerHTML = value;
- break;
- case 'number':
- case 'boolean':
- node.textContent = value;
- break;
- default:
- if (Array.isArray(value)) {
- if (value.length === 1) {
- any(value[0]);
- } else if(typeof value[0] === 'string') {
- any(value.join(''));
- } else {
- var i = indexOfDiffereces(node.childNodes, value);
- if (-1 < i) {
- updateViaArray(node, value, i);
- }
- }
- } else {
- populateNode(node, value);
- }
- break;
- }
- };
- }
-
- // update attributes node
- //
- // render`${name}`;
- //
- // Note: attributes with `on` prefix are set directly as callbacks.
- // These won't ever be transformed into strings while other
- // attributes will be automatically sanitized.
- function setAttribute(node, attribute) {
- var
- name = attribute.name,
- isSpecial = SPECIAL_ATTRIBUTE.test(name)
- ;
- if (isSpecial) node.removeAttribute(name);
- return isSpecial ?
- function event(value) {
- node[name] = value;
- } :
- function attr(value) {
- attribute.value = value;
- };
- }
-
- // update the "emptiness"
- // this function is used when template literals
- // have sneaky html/fragment capable
- // updates in the wild (no spaces around)
- //
- // render`
- //
Content before
${
- // 'any content in between'
- // }
Content after
- // `;
- //
- // Note: this is the most expensive
- // update of them all.
- function setVirtualContent(node) {
- var
- fragment = document.createDocumentFragment(),
- childNodes = []
- ;
- return function any(value) {
- var i, parentNode = node.parentNode;
- switch (typeof value) {
- case 'string':
- case 'number':
- case 'boolean':
- removeNodeList(childNodes, 0);
- injectHTML(fragment, value);
- childNodes = slice.call(fragment.childNodes);
- parentNode.insertBefore(fragment, node);
- break;
- default:
- if (Array.isArray(value)) {
- if (value.length === 0) {
- any(value[0]);
- } else if(typeof value[0] === 'string') {
- any(value.join(''));
- } else {
- i = indexOfDiffereces(childNodes, value);
- if (-1 < i) {
- removeNodeList(childNodes, i);
- value = value.slice(i);
- appendNodes(fragment, value);
- parentNode.insertBefore(fragment, node);
- childNodes.push.apply(childNodes, value);
- }
- }
- } else {
- removeNodeList(childNodes, 0);
- childNodes = value.nodeType === 11 ?
- slice.call(value.childNodes) :
- [value];
- parentNode.insertBefore(value, node);
- }
- break;
- }
- };
- }
-
- // basic closure to update nodes textContent
- //
- // render`
- //
- // ${'spaces around means textContent'}
- //
`;
- function setTextContent(node) {
- return function text(value) {
- node.textContent = value;
- };
- }
-
-
- // -------------------------
- // Helpers
- // -------------------------
-
- // it does exactly what it says
- function appendNodes(node, childNodes) {
- for (var
- i = 0,
- length = childNodes.length;
- i < length; i++
- ) {
- node.appendChild(childNodes[i]);
- }
- }
-
- // given two collections, find
- // the first index that has different content.
- // If the two lists are the same, return -1
- // to indicate no differences were found.
- function indexOfDiffereces(a, b) {
- if (a === b) return -1;
- var
- i = 0,
- aLength = a.length,
- bLength = b.length
- ;
- while (i < aLength) {
- if (i < bLength && a[i] === b[i]) i++;
- else return i;
- }
- return i === bLength ? -1 : i;
- }
-
- // inject HTML into a template node
- // and populate a fragment with resulting nodes
- //
- // IE9~IE11 are not compatible with the template tag.
- // If the content is a partial part of a table there is a fallback.
- // Not the most elegant/robust way but good enough for common cases.
- // (I don't want to include a whole DOM parser for IE only here).
- function injectHTML(fragment, html) {
- var
- fallback = IE && /^[^\S]*?<(t(?:head|body|foot|r|d|h))/i.test(html),
- template = fragment.ownerDocument.createElement('template')
- ;
- template.innerHTML = fallback ? ('
' + html + '
') : html;
- if (fallback) {
- template = {childNodes: template.querySelectorAll(RegExp.$1)};
- }
- appendNodes(
- fragment,
- slice.call((template.content || template).childNodes)
- );
- }
-
- // accordingly with the kind of child
- // it put its content into a parent node
- function populateNode(parent, child) {
- switch (child.nodeType) {
- case 1:
- var childNodes = parent.childNodes;
- if (childNodes.length !== 1 || childNodes[0] !== child) {
- resetAndPopulate(parent, child);
- }
- break;
- case 11:
- if (-1 < indexOfDiffereces(parent.childNodes, child.childNodes)) {
- resetAndPopulate(parent, child);
- }
- break;
- case 3:
- parent.textContent = child.textContent;
- break;
- }
- }
-
- // it does exactly what it says
- function removeNodeList(list, startIndex) {
- var length = list.length, child;
- while (startIndex < length--) {
- child = list[length];
- child.parentNode.removeChild(child);
- }
- }
-
- // drop all nodes and append a node
- function resetAndPopulate(parent, child) {
- parent.textContent = '';
- parent.appendChild(child);
- }
-
- // the first time a hyperHTML.wire() is invoked
- // remember the list of nodes that should be updated
- // at every consequent render call.
- // The resulting function might return the very first node
- // or the Array of all nodes that might need updates.
- function setupAndGetContent(node) {
- for (var
- child,
- children = [],
- childNodes = node.childNodes,
- i = 0,
- length = childNodes.length;
- i < length; i++
- ) {
- child = childNodes[i];
- if (
- 1 === child.nodeType ||
- 0 < trim.call(child.textContent).length
- ) {
- children.push(child);
- }
- }
- length = children.length;
- return length < 2 ?
- ((child = length < 1 ? node : children[0]),
- function () { return child; }) :
- function () { return children; };
- }
-
- // remove and/or and a list of nodes through an array
- function updateViaArray(node, childNodes, i) {
- var fragment = node.ownerDocument.createDocumentFragment();
- if (0 < i) {
- removeNodeList(node.childNodes, i);
- appendNodes(fragment, childNodes.slice(i));
- node.appendChild(fragment);
- } else {
- appendNodes(fragment, childNodes);
- resetAndPopulate(node, fragment);
- }
- }
-
- // create a new wire for generic DOM content
- function wireContent(type) {
- var content, container, fragment, render, setup, template;
- return function update(statics) {
- if (template !== statics) {
- setup = true;
- template = statics;
- fragment = document.createDocumentFragment();
- container = type === 'svg' ?
- document.createElementNS('http://www.w3.org/2000/svg', 'svg') :
- fragment;
- render = hyperHTML.bind(container);
- }
- render.apply(null, arguments);
- if (setup) {
- setup = false;
- if (type === 'svg') {
- appendNodes(fragment, slice.call(container.childNodes));
- }
- content = setupAndGetContent(fragment);
- }
- return content();
- };
- }
-
- // get or create a wired weak reference
- function wireWeakly(obj, type) {
- var wire = wireContent(type);
- wm.set(obj, wire);
- return wire;
- }
-
- // -------------------------
- // Template setup
- // -------------------------
-
- // each known hyperHTML update is
- // kept as simple as possible.
- function update() {
- for (var
- i = 1,
- length = arguments.length,
- updates = this[EXPANDO].u;
- i < length; i++
- ) {
- updates[i - 1](arguments[i]);
- }
- return this;
- }
-
- // but the first time, it needs to be setup.
- // From now on, only update(statics) will be called
- // unless this node won't be used for other renderings.
- function upgrade(statics) {
- var
- updates = [],
- html = statics.join(uidc)
- ;
- if (IE) {
- IEAttributes = [];
- injectHTML(this, html.replace(no, comments));
- } else if (this.nodeType === 1) {
- this.innerHTML = html;
- } else {
- injectHTML(this, html);
- }
- lukeTreeWalker(this, updates);
- this[EXPANDO] = {s: statics, u: updates};
- return update.apply(this, arguments);
- }
-
- // -------------------------
- // the trash bin
- // -------------------------
-
- // IE used to suck.
- /*
- // even in a try/catch this throw an error
- // since it's reliable though, I'll keep it around
- function isIE() {
- var p = document.createElement('p');
- p.innerHTML = '';
- return p.childNodes[0].onclick == null;
- }
- //*/
-
- // remove and/or and a list of nodes through a fragment
- /* temporarily removed until it's demonstrated it's needed
- function updateViaFragment(node, fragment, i) {
- if (0 < i) {
- removeNodeList(node.childNodes, i);
- var slim = fragment.cloneNode();
- appendNodes(slim, slice.call(fragment.childNodes, i));
- node.appendChild(fragment, slim);
- } else {
- resetAndPopulate(node, fragment);
- }
- }
- //*/
-
- // -------------------------
- // local variables
- // -------------------------
-
- var
- // decide special attributes behavior
- SPECIAL_ATTRIBUTE = /^(?:on[a-z]+|async|autofocus|autoplay|capture|checked|controls|deferred|disabled|formnovalidate|hidden|loop|multiple|muted|required)$/,
- // avoids WeakMap to avoid memory pressure, use CSS compatible syntax for IE
- EXPANDO = '_hyper_html: ',
- // use a pseudo unique id to avoid conflicts and normalize CSS style for IE
- uid = EXPANDO + ((Math.random() * new Date) | 0) + ';',
- // use comment nodes with pseudo unique content to setup
- uidc = '',
- // threat it differently
- IE = 'documentMode' in document,
- no = IE && new RegExp('([^\\S][a-z]+[a-z0-9_-]*=)([\'"])' + uidc + '\\2', 'g'),
- comments = IE && function ($0, $1, $2) {
- IEAttributes.push($1.slice(1, -1));
- return $1 + $2 + uid + $2;
- },
- // verify empty textContent on .wire() setup
- trim = EXPANDO.trim || function () {
- return this.replace(/^\s+|\s+$/g, '');
- },
- // convert DOM.childNodes into arrays to avoid
- // DOM mutation backfiring on loops
- slice = [].slice,
- // used for weak references
- // if WeakMap is not available
- // it uses a configurable, non enumerable,
- // quick and dirty expando property.
- wm = typeof WeakMap === typeof wm ?
- {
- get: function (obj) { return obj[EXPANDO]; },
- set: function (obj, value) {
- Object.defineProperty(obj, EXPANDO, {
- configurable: true,
- value: value
- });
- }
- } :
- new WeakMap(),
- IEAttributes
- ;
-
- // Simply to avoid duplicated RegExp in viperHTML
- hyperHTML.SPECIAL_ATTRIBUTE = SPECIAL_ATTRIBUTE;
-
- // -------------------------
- // โก๏ธ ๏ธ๏ธThe End โฐ
- // -------------------------
- return hyperHTML;
-
-}());
-
-// umd.KISS
-try { module.exports = hyperHTML; } catch(o_O) {}
diff --git a/index.d.ts b/index.d.ts
new file mode 100644
index 00000000..8fe28e62
--- /dev/null
+++ b/index.d.ts
@@ -0,0 +1,51 @@
+type TemplateFunction = (template: TemplateStringsArray, ...values: any[]) => T;
+export type BoundTemplateFunction = TemplateFunction;
+export type WiredTemplateFunction = TemplateFunction;
+
+export declare class Component {
+ static for(this: new() => TComponent, context: object, identity?: any): TComponent;
+ handleEvent(e: Event): void;
+ html: WiredTemplateFunction;
+ svg: WiredTemplateFunction;
+ state: T;
+ get defaultState(): T;
+ setState(state: Partial | ((this: this, state: T) => Partial), render?: boolean): this;
+ dispatch(type: string, detail?: any): boolean;
+}
+
+export declare function bind(element: T): BoundTemplateFunction;
+
+export declare function define(intent: string, callback: Function): void;
+
+export declare function wire(identity?: object | null, type?: 'html' | 'svg'): WiredTemplateFunction;
+export declare function wire(identity?: object | null, type_id?: string): WiredTemplateFunction;
+
+export declare const hyper: {
+ Component: typeof Component;
+ bind: typeof bind;
+ define: typeof define;
+ hyper: typeof hyper;
+ wire: typeof wire;
+
+ // hyper(null, 'html')`HTML`
+ (identity: null | undefined, type?: 'html' | 'svg'): WiredTemplateFunction;
+
+ // hyper('html')`HTML`
+ (type: 'html' | 'svg'): WiredTemplateFunction;
+
+ // hyper(element)`HTML`
+ (element: T): BoundTemplateFunction;
+
+ // hyper`HTML`
+ (template: TemplateStringsArray, ...values: any[]): any;
+
+ // hyper(obj, 'html:id')`HTML`
+ // hyper(obj)`HTML`
+ (identity: object, type?: 'html' | 'svg'): WiredTemplateFunction;
+ (identity: object, type_id?: string): WiredTemplateFunction;
+
+ // hyper()`HTML`
+ (): WiredTemplateFunction;
+};
+
+export default hyper;
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..f9649b1c
--- /dev/null
+++ b/index.js
@@ -0,0 +1,2020 @@
+var hyperHTML = (function (document) {
+ 'use strict';
+
+ /*! (c) Andrea Giammarchi - ISC */
+ var self = {};
+
+ try {
+ self.WeakMap = WeakMap;
+ } catch (WeakMap) {
+ // this could be better but 90% of the time
+ // it's everything developers need as fallback
+ self.WeakMap = function (id, Object) {
+
+ var dP = Object.defineProperty;
+ var hOP = Object.hasOwnProperty;
+ var proto = WeakMap.prototype;
+
+ proto["delete"] = function (key) {
+ return this.has(key) && delete key[this._];
+ };
+
+ proto.get = function (key) {
+ return this.has(key) ? key[this._] : void 0;
+ };
+
+ proto.has = function (key) {
+ return hOP.call(key, this._);
+ };
+
+ proto.set = function (key, value) {
+ dP(key, this._, {
+ configurable: true,
+ value: value
+ });
+ return this;
+ };
+
+ return WeakMap;
+
+ function WeakMap(iterable) {
+ dP(this, '_', {
+ value: '_@ungap/weakmap' + id++
+ });
+ if (iterable) iterable.forEach(add, this);
+ }
+
+ function add(pair) {
+ this.set(pair[0], pair[1]);
+ }
+ }(Math.random(), Object);
+ }
+
+ var WeakMap$1 = self.WeakMap;
+
+ /*! (c) Andrea Giammarchi - ISC */
+ var self$1 = {};
+
+ try {
+ self$1.WeakSet = WeakSet;
+ } catch (WeakSet) {
+ (function (id, dP) {
+ var proto = WeakSet.prototype;
+
+ proto.add = function (object) {
+ if (!this.has(object)) dP(object, this._, {
+ value: true,
+ configurable: true
+ });
+ return this;
+ };
+
+ proto.has = function (object) {
+ return this.hasOwnProperty.call(object, this._);
+ };
+
+ proto["delete"] = function (object) {
+ return this.has(object) && delete object[this._];
+ };
+
+ self$1.WeakSet = WeakSet;
+
+ function WeakSet() {
+
+ dP(this, '_', {
+ value: '_@ungap/weakmap' + id++
+ });
+ }
+ })(Math.random(), Object.defineProperty);
+ }
+
+ var WeakSet$1 = self$1.WeakSet;
+
+ var _ref = [],
+ indexOf = _ref.indexOf;
+
+ var append = function append(get, parent, children, start, end, before) {
+ var isSelect = ('selectedIndex' in parent);
+ var noSelection = isSelect;
+
+ while (start < end) {
+ var child = get(children[start], 1);
+ parent.insertBefore(child, before);
+
+ if (isSelect && noSelection && child.selected) {
+ noSelection = !noSelection;
+ var selectedIndex = parent.selectedIndex;
+ parent.selectedIndex = selectedIndex < 0 ? start : indexOf.call(parent.querySelectorAll('option'), child);
+ }
+
+ start++;
+ }
+ };
+ var eqeq = function eqeq(a, b) {
+ return a == b;
+ };
+ var identity = function identity(O) {
+ return O;
+ };
+ var indexOf$1 = function indexOf(moreNodes, moreStart, moreEnd, lessNodes, lessStart, lessEnd, compare) {
+ var length = lessEnd - lessStart;
+ /* istanbul ignore if */
+
+ if (length < 1) return -1;
+
+ while (moreEnd - moreStart >= length) {
+ var m = moreStart;
+ var l = lessStart;
+
+ while (m < moreEnd && l < lessEnd && compare(moreNodes[m], lessNodes[l])) {
+ m++;
+ l++;
+ }
+
+ if (l === lessEnd) return moreStart;
+ moreStart = m + 1;
+ }
+
+ return -1;
+ };
+ var isReversed = function isReversed(futureNodes, futureEnd, currentNodes, currentStart, currentEnd, compare) {
+ while (currentStart < currentEnd && compare(currentNodes[currentStart], futureNodes[futureEnd - 1])) {
+ currentStart++;
+ futureEnd--;
+ }
+ return futureEnd === 0;
+ };
+ var next = function next(get, list, i, length, before) {
+ return i < length ? get(list[i], 0) : 0 < i ? get(list[i - 1], -0).nextSibling : before;
+ };
+ var remove = function remove(get, children, start, end) {
+ while (start < end) {
+ drop(get(children[start++], -1));
+ }
+ }; // - - - - - - - - - - - - - - - - - - -
+ // diff related constants and utilities
+ // - - - - - - - - - - - - - - - - - - -
+
+ var DELETION = -1;
+ var INSERTION = 1;
+ var SKIP = 0;
+ var SKIP_OND = 50;
+
+ var HS = function HS(futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges) {
+ var k = 0;
+ /* istanbul ignore next */
+
+ var minLen = futureChanges < currentChanges ? futureChanges : currentChanges;
+ var link = Array(minLen++);
+ var tresh = Array(minLen);
+ tresh[0] = -1;
+
+ for (var i = 1; i < minLen; i++) {
+ tresh[i] = currentEnd;
+ }
+
+ var nodes = currentNodes.slice(currentStart, currentEnd);
+
+ for (var _i = futureStart; _i < futureEnd; _i++) {
+ var index = nodes.indexOf(futureNodes[_i]);
+
+ if (-1 < index) {
+ var idxInOld = index + currentStart;
+ k = findK(tresh, minLen, idxInOld);
+ /* istanbul ignore else */
+
+ if (-1 < k) {
+ tresh[k] = idxInOld;
+ link[k] = {
+ newi: _i,
+ oldi: idxInOld,
+ prev: link[k - 1]
+ };
+ }
+ }
+ }
+
+ k = --minLen;
+ --currentEnd;
+
+ while (tresh[k] > currentEnd) {
+ --k;
+ }
+
+ minLen = currentChanges + futureChanges - k;
+ var diff = Array(minLen);
+ var ptr = link[k];
+ --futureEnd;
+
+ while (ptr) {
+ var _ptr = ptr,
+ newi = _ptr.newi,
+ oldi = _ptr.oldi;
+
+ while (futureEnd > newi) {
+ diff[--minLen] = INSERTION;
+ --futureEnd;
+ }
+
+ while (currentEnd > oldi) {
+ diff[--minLen] = DELETION;
+ --currentEnd;
+ }
+
+ diff[--minLen] = SKIP;
+ --futureEnd;
+ --currentEnd;
+ ptr = ptr.prev;
+ }
+
+ while (futureEnd >= futureStart) {
+ diff[--minLen] = INSERTION;
+ --futureEnd;
+ }
+
+ while (currentEnd >= currentStart) {
+ diff[--minLen] = DELETION;
+ --currentEnd;
+ }
+
+ return diff;
+ }; // this is pretty much the same petit-dom code without the delete map part
+ // https://github.com/yelouafi/petit-dom/blob/bd6f5c919b5ae5297be01612c524c40be45f14a7/src/vdom.js#L556-L561
+
+
+ var OND = function OND(futureNodes, futureStart, rows, currentNodes, currentStart, cols, compare) {
+ var length = rows + cols;
+ var v = [];
+ var d, k, r, c, pv, cv, pd;
+
+ outer: for (d = 0; d <= length; d++) {
+ /* istanbul ignore if */
+ if (d > SKIP_OND) return null;
+ pd = d - 1;
+ /* istanbul ignore next */
+
+ pv = d ? v[d - 1] : [0, 0];
+ cv = v[d] = [];
+
+ for (k = -d; k <= d; k += 2) {
+ if (k === -d || k !== d && pv[pd + k - 1] < pv[pd + k + 1]) {
+ c = pv[pd + k + 1];
+ } else {
+ c = pv[pd + k - 1] + 1;
+ }
+
+ r = c - k;
+
+ while (c < cols && r < rows && compare(currentNodes[currentStart + c], futureNodes[futureStart + r])) {
+ c++;
+ r++;
+ }
+
+ if (c === cols && r === rows) {
+ break outer;
+ }
+
+ cv[d + k] = c;
+ }
+ }
+
+ var diff = Array(d / 2 + length / 2);
+ var diffIdx = diff.length - 1;
+
+ for (d = v.length - 1; d >= 0; d--) {
+ while (c > 0 && r > 0 && compare(currentNodes[currentStart + c - 1], futureNodes[futureStart + r - 1])) {
+ // diagonal edge = equality
+ diff[diffIdx--] = SKIP;
+ c--;
+ r--;
+ }
+
+ if (!d) break;
+ pd = d - 1;
+ /* istanbul ignore next */
+
+ pv = d ? v[d - 1] : [0, 0];
+ k = c - r;
+
+ if (k === -d || k !== d && pv[pd + k - 1] < pv[pd + k + 1]) {
+ // vertical edge = insertion
+ r--;
+ diff[diffIdx--] = INSERTION;
+ } else {
+ // horizontal edge = deletion
+ c--;
+ diff[diffIdx--] = DELETION;
+ }
+ }
+
+ return diff;
+ };
+
+ var applyDiff = function applyDiff(diff, get, parentNode, futureNodes, futureStart, currentNodes, currentStart, currentLength, before) {
+ var live = [];
+ var length = diff.length;
+ var currentIndex = currentStart;
+ var i = 0;
+
+ while (i < length) {
+ switch (diff[i++]) {
+ case SKIP:
+ futureStart++;
+ currentIndex++;
+ break;
+
+ case INSERTION:
+ // TODO: bulk appends for sequential nodes
+ live.push(futureNodes[futureStart]);
+ append(get, parentNode, futureNodes, futureStart++, futureStart, currentIndex < currentLength ? get(currentNodes[currentIndex], 0) : before);
+ break;
+
+ case DELETION:
+ currentIndex++;
+ break;
+ }
+ }
+
+ i = 0;
+
+ while (i < length) {
+ switch (diff[i++]) {
+ case SKIP:
+ currentStart++;
+ break;
+
+ case DELETION:
+ // TODO: bulk removes for sequential nodes
+ if (-1 < live.indexOf(currentNodes[currentStart])) currentStart++;else remove(get, currentNodes, currentStart++, currentStart);
+ break;
+ }
+ }
+ };
+
+ var findK = function findK(ktr, length, j) {
+ var lo = 1;
+ var hi = length;
+
+ while (lo < hi) {
+ var mid = (lo + hi) / 2 >>> 0;
+ if (j < ktr[mid]) hi = mid;else lo = mid + 1;
+ }
+
+ return lo;
+ };
+
+ var smartDiff = function smartDiff(get, parentNode, futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges, currentLength, compare, before) {
+ applyDiff(OND(futureNodes, futureStart, futureChanges, currentNodes, currentStart, currentChanges, compare) || HS(futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges), get, parentNode, futureNodes, futureStart, currentNodes, currentStart, currentLength, before);
+ };
+
+ var drop = function drop(node) {
+ return (node.remove || dropChild).call(node);
+ };
+
+ function dropChild() {
+ var parentNode = this.parentNode;
+ /* istanbul ignore else */
+
+ if (parentNode) parentNode.removeChild(this);
+ }
+
+ /*! (c) 2018 Andrea Giammarchi (ISC) */
+
+ var domdiff = function domdiff(parentNode, // where changes happen
+ currentNodes, // Array of current items/nodes
+ futureNodes, // Array of future items/nodes
+ options // optional object with one of the following properties
+ // before: domNode
+ // compare(generic, generic) => true if same generic
+ // node(generic) => Node
+ ) {
+ if (!options) options = {};
+ var compare = options.compare || eqeq;
+ var get = options.node || identity;
+ var before = options.before == null ? null : get(options.before, 0);
+ var currentLength = currentNodes.length;
+ var currentEnd = currentLength;
+ var currentStart = 0;
+ var futureEnd = futureNodes.length;
+ var futureStart = 0; // common prefix
+
+ while (currentStart < currentEnd && futureStart < futureEnd && compare(currentNodes[currentStart], futureNodes[futureStart])) {
+ currentStart++;
+ futureStart++;
+ } // common suffix
+
+
+ while (currentStart < currentEnd && futureStart < futureEnd && compare(currentNodes[currentEnd - 1], futureNodes[futureEnd - 1])) {
+ currentEnd--;
+ futureEnd--;
+ }
+
+ var currentSame = currentStart === currentEnd;
+ var futureSame = futureStart === futureEnd; // same list
+
+ if (currentSame && futureSame) return futureNodes; // only stuff to add
+
+ if (currentSame && futureStart < futureEnd) {
+ append(get, parentNode, futureNodes, futureStart, futureEnd, next(get, currentNodes, currentStart, currentLength, before));
+ return futureNodes;
+ } // only stuff to remove
+
+
+ if (futureSame && currentStart < currentEnd) {
+ remove(get, currentNodes, currentStart, currentEnd);
+ return futureNodes;
+ }
+
+ var currentChanges = currentEnd - currentStart;
+ var futureChanges = futureEnd - futureStart;
+ var i = -1; // 2 simple indels: the shortest sequence is a subsequence of the longest
+
+ if (currentChanges < futureChanges) {
+ i = indexOf$1(futureNodes, futureStart, futureEnd, currentNodes, currentStart, currentEnd, compare); // inner diff
+
+ if (-1 < i) {
+ append(get, parentNode, futureNodes, futureStart, i, get(currentNodes[currentStart], 0));
+ append(get, parentNode, futureNodes, i + currentChanges, futureEnd, next(get, currentNodes, currentEnd, currentLength, before));
+ return futureNodes;
+ }
+ }
+ /* istanbul ignore else */
+ else if (futureChanges < currentChanges) {
+ i = indexOf$1(currentNodes, currentStart, currentEnd, futureNodes, futureStart, futureEnd, compare); // outer diff
+
+ if (-1 < i) {
+ remove(get, currentNodes, currentStart, i);
+ remove(get, currentNodes, i + futureChanges, currentEnd);
+ return futureNodes;
+ }
+ } // common case with one replacement for many nodes
+ // or many nodes replaced for a single one
+
+ /* istanbul ignore else */
+
+
+ if (currentChanges < 2 || futureChanges < 2) {
+ append(get, parentNode, futureNodes, futureStart, futureEnd, get(currentNodes[currentStart], 0));
+ remove(get, currentNodes, currentStart, currentEnd);
+ return futureNodes;
+ } // the half match diff part has been skipped in petit-dom
+ // https://github.com/yelouafi/petit-dom/blob/bd6f5c919b5ae5297be01612c524c40be45f14a7/src/vdom.js#L391-L397
+ // accordingly, I think it's safe to skip in here too
+ // if one day it'll come out like the speediest thing ever to do
+ // then I might add it in here too
+ // Extra: before going too fancy, what about reversed lists ?
+ // This should bail out pretty quickly if that's not the case.
+
+
+ if (currentChanges === futureChanges && isReversed(futureNodes, futureEnd, currentNodes, currentStart, currentEnd, compare)) {
+ append(get, parentNode, futureNodes, futureStart, futureEnd, next(get, currentNodes, currentEnd, currentLength, before));
+ return futureNodes;
+ } // last resort through a smart diff
+
+
+ smartDiff(get, parentNode, futureNodes, futureStart, futureEnd, futureChanges, currentNodes, currentStart, currentEnd, currentChanges, currentLength, compare, before);
+ return futureNodes;
+ };
+
+
+
+ /*! (c) Andrea Giammarchi - ISC */
+ var self$2 = {};
+ self$2.CustomEvent = typeof CustomEvent === 'function' ? CustomEvent : function (__p__) {
+ CustomEvent[__p__] = new CustomEvent('').constructor[__p__];
+ return CustomEvent;
+
+ function CustomEvent(type, init) {
+ if (!init) init = {};
+ var e = document.createEvent('CustomEvent');
+ e.initCustomEvent(type, !!init.bubbles, !!init.cancelable, init.detail);
+ return e;
+ }
+ }('prototype');
+ var CustomEvent$1 = self$2.CustomEvent;
+
+ /*! (c) Andrea Giammarchi - ISC */
+ var self$3 = {};
+
+ try {
+ self$3.Map = Map;
+ } catch (Map) {
+ self$3.Map = function Map() {
+ var i = 0;
+ var k = [];
+ var v = [];
+ return {
+ "delete": function _delete(key) {
+ var had = contains(key);
+
+ if (had) {
+ k.splice(i, 1);
+ v.splice(i, 1);
+ }
+
+ return had;
+ },
+ forEach: function forEach(callback, context) {
+ k.forEach(function (key, i) {
+ callback.call(context, v[i], key, this);
+ }, this);
+ },
+ get: function get(key) {
+ return contains(key) ? v[i] : void 0;
+ },
+ has: function has(key) {
+ return contains(key);
+ },
+ set: function set(key, value) {
+ v[contains(key) ? i : k.push(key) - 1] = value;
+ return this;
+ }
+ };
+
+ function contains(v) {
+ i = k.indexOf(v);
+ return -1 < i;
+ }
+ };
+ }
+
+ var Map$1 = self$3.Map;
+
+ // able to create Custom Elements like components
+ // including the ability to listen to connect/disconnect
+ // events via onconnect/ondisconnect attributes
+ // Components can be created imperatively or declaratively.
+ // The main difference is that declared components
+ // will not automatically render on setState(...)
+ // to simplify state handling on render.
+
+ function Component() {
+ return this; // this is needed in Edge !!!
+ } // Component is lazily setup because it needs
+ // wire mechanism as lazy content
+
+ function setup(content) {
+ // there are various weakly referenced variables in here
+ // and mostly are to use Component.for(...) static method.
+ var children = new WeakMap$1();
+ var create = Object.create;
+
+ var createEntry = function createEntry(wm, id, component) {
+ wm.set(id, component);
+ return component;
+ };
+
+ var get = function get(Class, info, context, id) {
+ var relation = info.get(Class) || relate(Class, info);
+
+ switch (typeof(id)) {
+ case 'object':
+ case 'function':
+ var wm = relation.w || (relation.w = new WeakMap$1());
+ return wm.get(id) || createEntry(wm, id, new Class(context));
+
+ default:
+ var sm = relation.p || (relation.p = create(null));
+ return sm[id] || (sm[id] = new Class(context));
+ }
+ };
+
+ var relate = function relate(Class, info) {
+ var relation = {
+ w: null,
+ p: null
+ };
+ info.set(Class, relation);
+ return relation;
+ };
+
+ var set = function set(context) {
+ var info = new Map$1();
+ children.set(context, info);
+ return info;
+ }; // The Component Class
+
+
+ Object.defineProperties(Component, {
+ // Component.for(context[, id]) is a convenient way
+ // to automatically relate data/context to children components
+ // If not created yet, the new Component(context) is weakly stored
+ // and after that same instance would always be returned.
+ "for": {
+ configurable: true,
+ value: function value(context, id) {
+ return get(this, children.get(context) || set(context), context, id == null ? 'default' : id);
+ }
+ }
+ });
+ Object.defineProperties(Component.prototype, {
+ // all events are handled with the component as context
+ handleEvent: {
+ value: function value(e) {
+ var ct = e.currentTarget;
+ this['getAttribute' in ct && ct.getAttribute('data-call') || 'on' + e.type](e);
+ }
+ },
+ // components will lazily define html or svg properties
+ // as soon as these are invoked within the .render() method
+ // Such render() method is not provided by the base class
+ // but it must be available through the Component extend.
+ // Declared components could implement a
+ // render(props) method too and use props as needed.
+ html: lazyGetter('html', content),
+ svg: lazyGetter('svg', content),
+ // the state is a very basic/simple mechanism inspired by Preact
+ state: lazyGetter('state', function () {
+ return this.defaultState;
+ }),
+ // it is possible to define a default state that'd be always an object otherwise
+ defaultState: {
+ get: function get() {
+ return {};
+ }
+ },
+ // dispatch a bubbling, cancelable, custom event
+ // through the first known/available node
+ dispatch: {
+ value: function value(type, detail) {
+ var _wire$ = this._wire$;
+
+ if (_wire$) {
+ var event = new CustomEvent$1(type, {
+ bubbles: true,
+ cancelable: true,
+ detail: detail
+ });
+ event.component = this;
+ return (_wire$.dispatchEvent ? _wire$ : _wire$.firstChild).dispatchEvent(event);
+ }
+
+ return false;
+ }
+ },
+ // setting some property state through a new object
+ // or a callback, triggers also automatically a render
+ // unless explicitly specified to not do so (render === false)
+ setState: {
+ value: function value(state, render) {
+ var target = this.state;
+ var source = typeof state === 'function' ? state.call(this, target) : state;
+
+ for (var key in source) {
+ target[key] = source[key];
+ }
+
+ if (render !== false) this.render();
+ return this;
+ }
+ }
+ });
+ } // instead of a secret key I could've used a WeakMap
+ // However, attaching a property directly will result
+ // into better performance with thousands of components
+ // hanging around, and less memory pressure caused by the WeakMap
+
+ var lazyGetter = function lazyGetter(type, fn) {
+ var secret = '_' + type + '$';
+ return {
+ get: function get() {
+ return this[secret] || setValue(this, secret, fn.call(this, type));
+ },
+ set: function set(value) {
+ setValue(this, secret, value);
+ }
+ };
+ }; // shortcut to set value on get or set(value)
+
+
+ var setValue = function setValue(self, secret, value) {
+ return Object.defineProperty(self, secret, {
+ configurable: true,
+ value: typeof value === 'function' ? function () {
+ return self._wire$ = value.apply(this, arguments);
+ } : value
+ })[secret];
+ };
+
+ Object.defineProperties(Component.prototype, {
+ // used to distinguish better than instanceof
+ ELEMENT_NODE: {
+ value: 1
+ },
+ nodeType: {
+ value: -1
+ }
+ });
+
+ var attributes = {};
+ var intents = {};
+ var keys = [];
+ var hasOwnProperty = intents.hasOwnProperty;
+ var length = 0;
+ var Intent = {
+ // used to invoke right away hyper:attributes
+ attributes: attributes,
+ // hyperHTML.define('intent', (object, update) => {...})
+ // can be used to define a third parts update mechanism
+ // when every other known mechanism failed.
+ // hyper.define('user', info => info.name);
+ // hyper(node)`
${{user}}
`;
+ define: function define(intent, callback) {
+ if (intent.indexOf('-') < 0) {
+ if (!(intent in intents)) {
+ length = keys.push(intent);
+ }
+
+ intents[intent] = callback;
+ } else {
+ attributes[intent] = callback;
+ }
+ },
+ // this method is used internally as last resort
+ // to retrieve a value out of an object
+ invoke: function invoke(object, callback) {
+ for (var i = 0; i < length; i++) {
+ var key = keys[i];
+
+ if (hasOwnProperty.call(object, key)) {
+ return intents[key](object[key], callback);
+ }
+ }
+ }
+ };
+
+ var isArray = Array.isArray ||
+ /* istanbul ignore next */
+ function (toString) {
+ /* istanbul ignore next */
+ var $ = toString.call([]);
+ /* istanbul ignore next */
+
+ return function isArray(object) {
+ return toString.call(object) === $;
+ };
+ }({}.toString);
+
+ /*! (c) Andrea Giammarchi - ISC */
+ var createContent = function (document) {
+
+ var FRAGMENT = 'fragment';
+ var TEMPLATE = 'template';
+ var HAS_CONTENT = ('content' in create(TEMPLATE));
+ var createHTML = HAS_CONTENT ? function (html) {
+ var template = create(TEMPLATE);
+ template.innerHTML = html;
+ return template.content;
+ } : function (html) {
+ var content = create(FRAGMENT);
+ var template = create(TEMPLATE);
+ var childNodes = null;
+
+ if (/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(html)) {
+ var selector = RegExp.$1;
+ template.innerHTML = '
' + html + '
';
+ childNodes = template.querySelectorAll(selector);
+ } else {
+ template.innerHTML = html;
+ childNodes = template.childNodes;
+ }
+
+ append(content, childNodes);
+ return content;
+ };
+ return function createContent(markup, type) {
+ return (type === 'svg' ? createSVG : createHTML)(markup);
+ };
+
+ function append(root, childNodes) {
+ var length = childNodes.length;
+
+ while (length--) {
+ root.appendChild(childNodes[0]);
+ }
+ }
+
+ function create(element) {
+ return element === FRAGMENT ? document.createDocumentFragment() : document.createElementNS('http://www.w3.org/1999/xhtml', element);
+ } // it could use createElementNS when hasNode is there
+ // but this fallback is equally fast and easier to maintain
+ // it is also battle tested already in all IE
+
+
+ function createSVG(svg) {
+ var content = create(FRAGMENT);
+ var template = create('div');
+ template.innerHTML = '';
+ append(content, template.firstChild.childNodes);
+ return content;
+ }
+ }(document);
+
+ /*! (c) Andrea Giammarchi */
+ function disconnected(poly) {
+
+ var Event = poly.Event;
+ var WeakSet = poly.WeakSet;
+ var notObserving = true;
+ var observer = null;
+ return function observe(node) {
+ if (notObserving) {
+ notObserving = !notObserving;
+ observer = new WeakSet();
+ startObserving(node.ownerDocument);
+ }
+
+ observer.add(node);
+ return node;
+ };
+
+ function startObserving(document) {
+ var connected = new WeakSet();
+ var disconnected = new WeakSet();
+
+ try {
+ new MutationObserver(changes).observe(document, {
+ subtree: true,
+ childList: true
+ });
+ } catch (o_O) {
+ var timer = 0;
+ var records = [];
+
+ var reschedule = function reschedule(record) {
+ records.push(record);
+ clearTimeout(timer);
+ timer = setTimeout(function () {
+ changes(records.splice(timer = 0, records.length));
+ }, 0);
+ };
+
+ document.addEventListener('DOMNodeRemoved', function (event) {
+ reschedule({
+ addedNodes: [],
+ removedNodes: [event.target]
+ });
+ }, true);
+ document.addEventListener('DOMNodeInserted', function (event) {
+ reschedule({
+ addedNodes: [event.target],
+ removedNodes: []
+ });
+ }, true);
+ }
+
+ function changes(records) {
+ for (var record, length = records.length, i = 0; i < length; i++) {
+ record = records[i];
+ dispatchAll(record.removedNodes, 'disconnected', disconnected, connected);
+ dispatchAll(record.addedNodes, 'connected', connected, disconnected);
+ }
+ }
+
+ function dispatchAll(nodes, type, wsin, wsout) {
+ for (var node, event = new Event(type), length = nodes.length, i = 0; i < length; (node = nodes[i++]).nodeType === 1 && dispatchTarget(node, event, type, wsin, wsout)) {
+ }
+ }
+
+ function dispatchTarget(node, event, type, wsin, wsout) {
+ if (observer.has(node) && !wsin.has(node)) {
+ wsout["delete"](node);
+ wsin.add(node);
+ node.dispatchEvent(event);
+ /*
+ // The event is not bubbling (perf reason: should it?),
+ // hence there's no way to know if
+ // stop/Immediate/Propagation() was called.
+ // Should DOM Level 0 work at all?
+ // I say it's a YAGNI case for the time being,
+ // and easy to implement in user-land.
+ if (!event.cancelBubble) {
+ var fn = node['on' + type];
+ if (fn)
+ fn.call(node, event);
+ }
+ */
+ }
+
+ for (var // apparently is node.children || IE11 ... ^_^;;
+ // https://github.com/WebReflection/disconnected/issues/1
+ children = node.children || [], length = children.length, i = 0; i < length; dispatchTarget(children[i++], event, type, wsin, wsout)) {
+ }
+ }
+ }
+ }
+
+ /*! (c) Andrea Giammarchi - ISC */
+ var importNode = function (document, appendChild, cloneNode, createTextNode, importNode) {
+ var _native = (importNode in document); // IE 11 has problems with cloning templates:
+ // it "forgets" empty childNodes. This feature-detects that.
+
+
+ var fragment = document.createDocumentFragment();
+ fragment[appendChild](document[createTextNode]('g'));
+ fragment[appendChild](document[createTextNode](''));
+ /* istanbul ignore next */
+
+ var content = _native ? document[importNode](fragment, true) : fragment[cloneNode](true);
+ return content.childNodes.length < 2 ? function importNode(node, deep) {
+ var clone = node[cloneNode]();
+
+ for (var
+ /* istanbul ignore next */
+ childNodes = node.childNodes || [], length = childNodes.length, i = 0; deep && i < length; i++) {
+ clone[appendChild](importNode(childNodes[i], deep));
+ }
+
+ return clone;
+ } :
+ /* istanbul ignore next */
+ _native ? document[importNode] : function (node, deep) {
+ return node[cloneNode](!!deep);
+ };
+ }(document, 'appendChild', 'cloneNode', 'createTextNode', 'importNode');
+
+ var trim = ''.trim ||
+ /* istanbul ignore next */
+ function () {
+ return String(this).replace(/^\s+|\s+/g, '');
+ };
+
+ /*! (c) Andrea Giammarchi - ISC */
+ // Custom
+ var UID = '-' + Math.random().toFixed(6) + '%'; // Edge issue!
+
+ var UID_IE = false;
+
+ try {
+ if (!function (template, content, tabindex) {
+ return content in template && (template.innerHTML = '', template[content].childNodes[0].getAttribute(tabindex) == UID);
+ }(document.createElement('template'), 'content', 'tabindex')) {
+ UID = '_dt: ' + UID.slice(1, -1) + ';';
+ UID_IE = true;
+ }
+ } catch (meh) {}
+
+ var UIDC = ''; // DOM
+
+ var COMMENT_NODE = 8;
+ var ELEMENT_NODE = 1;
+ var TEXT_NODE = 3;
+ var SHOULD_USE_TEXT_CONTENT = /^(?:style|textarea)$/i;
+ var VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
+
+ /*! (c) Andrea Giammarchi - ISC */
+ function sanitize (template) {
+ return template.join(UIDC).replace(selfClosing, fullClosing).replace(attrSeeker, attrReplacer);
+ }
+ var spaces = ' \\f\\n\\r\\t';
+ var almostEverything = '[^' + spaces + '\\/>"\'=]+';
+ var attrName = '[' + spaces + ']+' + almostEverything;
+ var tagName = '<([A-Za-z]+[A-Za-z0-9:._-]*)((?:';
+ var attrPartials = '(?:\\s*=\\s*(?:\'[^\']*?\'|"[^"]*?"|<[^>]*?>|' + almostEverything.replace('\\/', '') + '))?)';
+ var attrSeeker = new RegExp(tagName + attrName + attrPartials + '+)([' + spaces + ']*/?>)', 'g');
+ var selfClosing = new RegExp(tagName + attrName + attrPartials + '*)([' + spaces + ']*/>)', 'g');
+ var findAttributes = new RegExp('(' + attrName + '\\s*=\\s*)([\'"]?)' + UIDC + '\\2', 'gi');
+
+ function attrReplacer($0, $1, $2, $3) {
+ return '<' + $1 + $2.replace(findAttributes, replaceAttributes) + $3;
+ }
+
+ function replaceAttributes($0, $1, $2) {
+ return $1 + ($2 || '"') + UID + ($2 || '"');
+ }
+
+ function fullClosing($0, $1, $2) {
+ return VOID_ELEMENTS.test($1) ? $0 : '<' + $1 + $2 + '>';
+ }
+
+ var umap = (function (_) {
+ return {
+ // About: get: _.get.bind(_)
+ // It looks like WebKit/Safari didn't optimize bind at all,
+ // so that using bind slows it down by 60%.
+ // Firefox and Chrome are just fine in both cases,
+ // so let's use the approach that works fast everywhere ๐
+ get: function get(key) {
+ return _.get(key);
+ },
+ set: function set(key, value) {
+ return _.set(key, value), value;
+ }
+ };
+ });
+
+ /* istanbul ignore next */
+
+ var normalizeAttributes = UID_IE ? function (attributes, parts) {
+ var html = parts.join(' ');
+ return parts.slice.call(attributes, 0).sort(function (left, right) {
+ return html.indexOf(left.name) <= html.indexOf(right.name) ? -1 : 1;
+ });
+ } : function (attributes, parts) {
+ return parts.slice.call(attributes, 0);
+ };
+
+ function find(node, path) {
+ var length = path.length;
+ var i = 0;
+
+ while (i < length) {
+ node = node.childNodes[path[i++]];
+ }
+
+ return node;
+ }
+
+ function parse(node, holes, parts, path) {
+ var childNodes = node.childNodes;
+ var length = childNodes.length;
+ var i = 0;
+
+ while (i < length) {
+ var child = childNodes[i];
+
+ switch (child.nodeType) {
+ case ELEMENT_NODE:
+ var childPath = path.concat(i);
+ parseAttributes(child, holes, parts, childPath);
+ parse(child, holes, parts, childPath);
+ break;
+
+ case COMMENT_NODE:
+ var textContent = child.textContent;
+
+ if (textContent === UID) {
+ parts.shift();
+ holes.push( // basicHTML or other non standard engines
+ // might end up having comments in nodes
+ // where they shouldn't, hence this check.
+ SHOULD_USE_TEXT_CONTENT.test(node.nodeName) ? Text(node, path) : Any(child, path.concat(i)));
+ } else {
+ switch (textContent.slice(0, 2)) {
+ case '/*':
+ if (textContent.slice(-2) !== '*/') break;
+
+ case "\uD83D\uDC7B":
+ // ghost
+ node.removeChild(child);
+ i--;
+ length--;
+ }
+ }
+
+ break;
+
+ case TEXT_NODE:
+ // the following ignore is actually covered by browsers
+ // only basicHTML ends up on previous COMMENT_NODE case
+ // instead of TEXT_NODE because it knows nothing about
+ // special style or textarea behavior
+
+ /* istanbul ignore if */
+ if (SHOULD_USE_TEXT_CONTENT.test(node.nodeName) && trim.call(child.textContent) === UIDC) {
+ parts.shift();
+ holes.push(Text(node, path));
+ }
+
+ break;
+ }
+
+ i++;
+ }
+ }
+
+ function parseAttributes(node, holes, parts, path) {
+ var attributes = node.attributes;
+ var cache = [];
+ var remove = [];
+ var array = normalizeAttributes(attributes, parts);
+ var length = array.length;
+ var i = 0;
+
+ while (i < length) {
+ var attribute = array[i++];
+ var direct = attribute.value === UID;
+ var sparse;
+
+ if (direct || 1 < (sparse = attribute.value.split(UIDC)).length) {
+ var name = attribute.name; // the following ignore is covered by IE
+ // and the IE9 double viewBox test
+
+ /* istanbul ignore else */
+
+ if (cache.indexOf(name) < 0) {
+ cache.push(name);
+ var realName = parts.shift().replace(direct ? /^(?:|[\S\s]*?\s)(\S+?)\s*=\s*('|")?$/ : new RegExp('^(?:|[\\S\\s]*?\\s)(' + name + ')\\s*=\\s*(\'|")[\\S\\s]*', 'i'), '$1');
+ var value = attributes[realName] || // the following ignore is covered by browsers
+ // while basicHTML is already case-sensitive
+
+ /* istanbul ignore next */
+ attributes[realName.toLowerCase()];
+ if (direct) holes.push(Attr(value, path, realName, null));else {
+ var skip = sparse.length - 2;
+
+ while (skip--) {
+ parts.shift();
+ }
+
+ holes.push(Attr(value, path, realName, sparse));
+ }
+ }
+
+ remove.push(attribute);
+ }
+ }
+
+ length = remove.length;
+ i = 0;
+ /* istanbul ignore next */
+
+ var cleanValue = 0 < length && UID_IE && !('ownerSVGElement' in node);
+
+ while (i < length) {
+ // Edge HTML bug #16878726
+ var attr = remove[i++]; // IE/Edge bug lighterhtml#63 - clean the value or it'll persist
+
+ /* istanbul ignore next */
+
+ if (cleanValue) attr.value = ''; // IE/Edge bug lighterhtml#64 - don't use removeAttributeNode
+
+ node.removeAttribute(attr.name);
+ } // This is a very specific Firefox/Safari issue
+ // but since it should be a not so common pattern,
+ // it's probably worth patching regardless.
+ // Basically, scripts created through strings are death.
+ // You need to create fresh new scripts instead.
+ // TODO: is there any other node that needs such nonsense?
+
+
+ var nodeName = node.nodeName;
+
+ if (/^script$/i.test(nodeName)) {
+ // this used to be like that
+ // var script = createElement(node, nodeName);
+ // then Edge arrived and decided that scripts created
+ // through template documents aren't worth executing
+ // so it became this ... hopefully it won't hurt in the wild
+ var script = document.createElement(nodeName);
+ length = attributes.length;
+ i = 0;
+
+ while (i < length) {
+ script.setAttributeNode(attributes[i++].cloneNode(true));
+ }
+
+ script.textContent = node.textContent;
+ node.parentNode.replaceChild(script, node);
+ }
+ }
+
+ function Any(node, path) {
+ return {
+ type: 'any',
+ node: node,
+ path: path
+ };
+ }
+
+ function Attr(node, path, name, sparse) {
+ return {
+ type: 'attr',
+ node: node,
+ path: path,
+ name: name,
+ sparse: sparse
+ };
+ }
+
+ function Text(node, path) {
+ return {
+ type: 'text',
+ node: node,
+ path: path
+ };
+ }
+
+ // globals
+ var parsed = umap(new WeakMap$1());
+
+ function createInfo(options, template) {
+ var markup = (options.convert || sanitize)(template);
+ var transform = options.transform;
+ if (transform) markup = transform(markup);
+ var content = createContent(markup, options.type);
+ cleanContent(content);
+ var holes = [];
+ parse(content, holes, template.slice(0), []);
+ return {
+ content: content,
+ updates: function updates(content) {
+ var updates = [];
+ var len = holes.length;
+ var i = 0;
+ var off = 0;
+
+ while (i < len) {
+ var info = holes[i++];
+ var node = find(content, info.path);
+
+ switch (info.type) {
+ case 'any':
+ updates.push({
+ fn: options.any(node, []),
+ sparse: false
+ });
+ break;
+
+ case 'attr':
+ var sparse = info.sparse;
+ var fn = options.attribute(node, info.name, info.node);
+ if (sparse === null) updates.push({
+ fn: fn,
+ sparse: false
+ });else {
+ off += sparse.length - 2;
+ updates.push({
+ fn: fn,
+ sparse: true,
+ values: sparse
+ });
+ }
+ break;
+
+ case 'text':
+ updates.push({
+ fn: options.text(node),
+ sparse: false
+ });
+ node.textContent = '';
+ break;
+ }
+ }
+
+ len += off;
+ return function () {
+ var length = arguments.length;
+
+ if (len !== length - 1) {
+ throw new Error(length - 1 + ' values instead of ' + len + '\n' + template.join('${value}'));
+ }
+
+ var i = 1;
+ var off = 1;
+
+ while (i < length) {
+ var update = updates[i - off];
+
+ if (update.sparse) {
+ var values = update.values;
+ var value = values[0];
+ var j = 1;
+ var l = values.length;
+ off += l - 2;
+
+ while (j < l) {
+ value += arguments[i++] + values[j++];
+ }
+
+ update.fn(value);
+ } else update.fn(arguments[i++]);
+ }
+
+ return content;
+ };
+ }
+ };
+ }
+
+ function createDetails(options, template) {
+ var info = parsed.get(template) || parsed.set(template, createInfo(options, template));
+ return info.updates(importNode.call(document, info.content, true));
+ }
+
+ var empty = [];
+
+ function domtagger(options) {
+ var previous = empty;
+ var updates = cleanContent;
+ return function (template) {
+ if (previous !== template) updates = createDetails(options, previous = template);
+ return updates.apply(null, arguments);
+ };
+ }
+
+ function cleanContent(fragment) {
+ var childNodes = fragment.childNodes;
+ var i = childNodes.length;
+
+ while (i--) {
+ var child = childNodes[i];
+
+ if (child.nodeType !== 1 && trim.call(child.textContent).length === 0) {
+ fragment.removeChild(child);
+ }
+ }
+ }
+
+ /*! (c) Andrea Giammarchi - ISC */
+ var hyperStyle = function () {
+
+ var IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;
+ var hyphen = /([^A-Z])([A-Z]+)/g;
+ return function hyperStyle(node, original) {
+ return 'ownerSVGElement' in node ? svg(node, original) : update(node.style, false);
+ };
+
+ function ized($0, $1, $2) {
+ return $1 + '-' + $2.toLowerCase();
+ }
+
+ function svg(node, original) {
+ var style;
+ if (original) style = original.cloneNode(true);else {
+ node.setAttribute('style', '--hyper:style;');
+ style = node.getAttributeNode('style');
+ }
+ style.value = '';
+ node.setAttributeNode(style);
+ return update(style, true);
+ }
+
+ function toStyle(object) {
+ var key,
+ css = [];
+
+ for (key in object) {
+ css.push(key.replace(hyphen, ized), ':', object[key], ';');
+ }
+
+ return css.join('');
+ }
+
+ function update(style, isSVG) {
+ var oldType, oldValue;
+ return function (newValue) {
+ var info, key, styleValue, value;
+
+ switch (typeof(newValue)) {
+ case 'object':
+ if (newValue) {
+ if (oldType === 'object') {
+ if (!isSVG) {
+ if (oldValue !== newValue) {
+ for (key in oldValue) {
+ if (!(key in newValue)) {
+ style[key] = '';
+ }
+ }
+ }
+ }
+ } else {
+ if (isSVG) style.value = '';else style.cssText = '';
+ }
+
+ info = isSVG ? {} : style;
+
+ for (key in newValue) {
+ value = newValue[key];
+ styleValue = typeof value === 'number' && !IS_NON_DIMENSIONAL.test(key) ? value + 'px' : value;
+ if (!isSVG && /^--/.test(key)) info.setProperty(key, styleValue);else info[key] = styleValue;
+ }
+
+ oldType = 'object';
+ if (isSVG) style.value = toStyle(oldValue = info);else oldValue = newValue;
+ break;
+ }
+
+ default:
+ if (oldValue != newValue) {
+ oldType = 'string';
+ oldValue = newValue;
+ if (isSVG) style.value = newValue || '';else style.cssText = newValue || '';
+ }
+
+ break;
+ }
+ };
+ }
+ }();
+
+ /*! (c) Andrea Giammarchi - ISC */
+ var Wire = function (slice, proto) {
+ proto = Wire.prototype;
+ proto.ELEMENT_NODE = 1;
+ proto.nodeType = 111;
+
+ proto.remove = function (keepFirst) {
+ var childNodes = this.childNodes;
+ var first = this.firstChild;
+ var last = this.lastChild;
+ this._ = null;
+
+ if (keepFirst && childNodes.length === 2) {
+ last.parentNode.removeChild(last);
+ } else {
+ var range = this.ownerDocument.createRange();
+ range.setStartBefore(keepFirst ? childNodes[1] : first);
+ range.setEndAfter(last);
+ range.deleteContents();
+ }
+
+ return first;
+ };
+
+ proto.valueOf = function (forceAppend) {
+ var fragment = this._;
+ var noFragment = fragment == null;
+ if (noFragment) fragment = this._ = this.ownerDocument.createDocumentFragment();
+
+ if (noFragment || forceAppend) {
+ for (var n = this.childNodes, i = 0, l = n.length; i < l; i++) {
+ fragment.appendChild(n[i]);
+ }
+ }
+
+ return fragment;
+ };
+
+ return Wire;
+
+ function Wire(childNodes) {
+ var nodes = this.childNodes = slice.call(childNodes, 0);
+ this.firstChild = nodes[0];
+ this.lastChild = nodes[nodes.length - 1];
+ this.ownerDocument = nodes[0].ownerDocument;
+ this._ = null;
+ }
+ }([].slice);
+
+ // Node.CONSTANTS
+ var DOCUMENT_FRAGMENT_NODE = 11; // SVG related constants
+
+ var OWNER_SVG_ELEMENT = 'ownerSVGElement'; // Custom Elements / MutationObserver constants
+
+ var CONNECTED = 'connected';
+ var DISCONNECTED = 'dis' + CONNECTED;
+
+ var componentType = Component.prototype.nodeType;
+ var wireType = Wire.prototype.nodeType;
+ var observe = disconnected({
+ Event: CustomEvent$1,
+ WeakSet: WeakSet$1
+ });
+
+ var asHTML = function asHTML(html) {
+ return {
+ html: html
+ };
+ }; // returns nodes from wires and components
+
+
+ var asNode = function asNode(item, i) {
+ switch (item.nodeType) {
+ case wireType:
+ // in the Wire case, the content can be
+ // removed, post-pended, inserted, or pre-pended and
+ // all these cases are handled by domdiff already
+
+ /* istanbul ignore next */
+ return 1 / i < 0 ? i ? item.remove(true) : item.lastChild : i ? item.valueOf(true) : item.firstChild;
+
+ case componentType:
+ return asNode(item.render(), i);
+
+ default:
+ return item;
+ }
+ }; // returns true if domdiff can handle the value
+
+
+ var canDiff = function canDiff(value) {
+ return 'ELEMENT_NODE' in value;
+ }; // borrowed from uhandlers
+ // https://github.com/WebReflection/uhandlers
+
+
+ var booleanSetter = function booleanSetter(node, key, oldValue) {
+ return function (newValue) {
+ if (oldValue !== !!newValue) {
+ if (oldValue = !!newValue) node.setAttribute(key, '');else node.removeAttribute(key);
+ }
+ };
+ };
+
+ var hyperSetter = function hyperSetter(node, name, svg) {
+ return svg ? function (value) {
+ try {
+ node[name] = value;
+ } catch (nope) {
+ node.setAttribute(name, value);
+ }
+ } : function (value) {
+ node[name] = value;
+ };
+ }; // when a Promise is used as interpolation value
+ // its result must be parsed once resolved.
+ // This callback is in charge of understanding what to do
+ // with a returned value once the promise is resolved.
+
+
+ var invokeAtDistance = function invokeAtDistance(value, callback) {
+ callback(value.placeholder);
+
+ if ('text' in value) {
+ Promise.resolve(value.text).then(String).then(callback);
+ } else if ('any' in value) {
+ Promise.resolve(value.any).then(callback);
+ } else if ('html' in value) {
+ Promise.resolve(value.html).then(asHTML).then(callback);
+ } else {
+ Promise.resolve(Intent.invoke(value, callback)).then(callback);
+ }
+ }; // quick and dirty way to check for Promise/ish values
+
+
+ var isPromise_ish = function isPromise_ish(value) {
+ return value != null && 'then' in value;
+ }; // list of attributes that should not be directly assigned
+
+
+ var readOnly = /^(?:form|list)$/i; // reused every slice time
+
+ var slice = [].slice; // simplifies text node creation
+
+ var text = function text(node, _text) {
+ return node.ownerDocument.createTextNode(_text);
+ };
+
+ function Tagger(type) {
+ this.type = type;
+ return domtagger(this);
+ }
+
+ Tagger.prototype = {
+ // there are four kind of attributes, and related behavior:
+ // * events, with a name starting with `on`, to add/remove event listeners
+ // * special, with a name present in their inherited prototype, accessed directly
+ // * regular, accessed through get/setAttribute standard DOM methods
+ // * style, the only regular attribute that also accepts an object as value
+ // so that you can style=${{width: 120}}. In this case, the behavior has been
+ // fully inspired by Preact library and its simplicity.
+ attribute: function attribute(node, name, original) {
+ var isSVG = (OWNER_SVG_ELEMENT in node);
+ var oldValue; // if the attribute is the style one
+ // handle it differently from others
+
+ if (name === 'style') return hyperStyle(node, original, isSVG); // direct accessors for and friends
+ else if (name.slice(0, 1) === '.') return hyperSetter(node, name.slice(1), isSVG); // boolean accessors for and friends
+ else if (name.slice(0, 1) === '?') return booleanSetter(node, name.slice(1)); // the name is an event one,
+ // add/remove event listeners accordingly
+ else if (/^on/.test(name)) {
+ var type = name.slice(2);
+
+ if (type === CONNECTED || type === DISCONNECTED) {
+ observe(node);
+ } else if (name.toLowerCase() in node) {
+ type = type.toLowerCase();
+ }
+
+ return function (newValue) {
+ if (oldValue !== newValue) {
+ if (oldValue) node.removeEventListener(type, oldValue, false);
+ oldValue = newValue;
+ if (newValue) node.addEventListener(type, newValue, false);
+ }
+ };
+ } // the attribute is special ('value' in input)
+ // and it's not SVG *or* the name is exactly data,
+ // in this case assign the value directly
+ else if (name === 'data' || !isSVG && name in node && !readOnly.test(name)) {
+ return function (newValue) {
+ if (oldValue !== newValue) {
+ oldValue = newValue;
+
+ if (node[name] !== newValue && newValue == null) {
+ // cleanup on null to avoid silly IE/Edge bug
+ node[name] = '';
+ node.removeAttribute(name);
+ } else node[name] = newValue;
+ }
+ };
+ } else if (name in Intent.attributes) {
+ return function (any) {
+ var newValue = Intent.attributes[name](node, any);
+
+ if (oldValue !== newValue) {
+ oldValue = newValue;
+ if (newValue == null) node.removeAttribute(name);else node.setAttribute(name, newValue);
+ }
+ };
+ } // in every other case, use the attribute node as it is
+ // update only the value, set it as node only when/if needed
+ else {
+ var owner = false;
+ var attribute = original.cloneNode(true);
+ return function (newValue) {
+ if (oldValue !== newValue) {
+ oldValue = newValue;
+
+ if (attribute.value !== newValue) {
+ if (newValue == null) {
+ if (owner) {
+ owner = false;
+ node.removeAttributeNode(attribute);
+ }
+
+ attribute.value = newValue;
+ } else {
+ attribute.value = newValue;
+
+ if (!owner) {
+ owner = true;
+ node.setAttributeNode(attribute);
+ }
+ }
+ }
+ }
+ };
+ }
+ },
+ // in a hyper(node)`
${content}
` case
+ // everything could happen:
+ // * it's a JS primitive, stored as text
+ // * it's null or undefined, the node should be cleaned
+ // * it's a component, update the content by rendering it
+ // * it's a promise, update the content once resolved
+ // * it's an explicit intent, perform the desired operation
+ // * it's an Array, resolve all values if Promises and/or
+ // update the node with the resulting list of content
+ any: function any(node, childNodes) {
+ var diffOptions = {
+ node: asNode,
+ before: node
+ };
+ var nodeType = OWNER_SVG_ELEMENT in node ?
+ /* istanbul ignore next */
+ 'svg' : 'html';
+ var fastPath = false;
+ var oldValue;
+
+ var anyContent = function anyContent(value) {
+ switch (typeof(value)) {
+ case 'string':
+ case 'number':
+ case 'boolean':
+ if (fastPath) {
+ if (oldValue !== value) {
+ oldValue = value;
+ childNodes[0].textContent = value;
+ }
+ } else {
+ fastPath = true;
+ oldValue = value;
+ childNodes = domdiff(node.parentNode, childNodes, [text(node, value)], diffOptions);
+ }
+
+ break;
+
+ case 'function':
+ anyContent(value(node));
+ break;
+
+ case 'object':
+ case 'undefined':
+ if (value == null) {
+ fastPath = false;
+ childNodes = domdiff(node.parentNode, childNodes, [], diffOptions);
+ break;
+ }
+
+ default:
+ fastPath = false;
+ oldValue = value;
+
+ if (isArray(value)) {
+ if (value.length === 0) {
+ if (childNodes.length) {
+ childNodes = domdiff(node.parentNode, childNodes, [], diffOptions);
+ }
+ } else {
+ switch (typeof(value[0])) {
+ case 'string':
+ case 'number':
+ case 'boolean':
+ anyContent({
+ html: value
+ });
+ break;
+
+ case 'object':
+ if (isArray(value[0])) {
+ value = value.concat.apply([], value);
+ }
+
+ if (isPromise_ish(value[0])) {
+ Promise.all(value).then(anyContent);
+ break;
+ }
+
+ default:
+ childNodes = domdiff(node.parentNode, childNodes, value, diffOptions);
+ break;
+ }
+ }
+ } else if (canDiff(value)) {
+ childNodes = domdiff(node.parentNode, childNodes, value.nodeType === DOCUMENT_FRAGMENT_NODE ? slice.call(value.childNodes) : [value], diffOptions);
+ } else if (isPromise_ish(value)) {
+ value.then(anyContent);
+ } else if ('placeholder' in value) {
+ invokeAtDistance(value, anyContent);
+ } else if ('text' in value) {
+ anyContent(String(value.text));
+ } else if ('any' in value) {
+ anyContent(value.any);
+ } else if ('html' in value) {
+ childNodes = domdiff(node.parentNode, childNodes, slice.call(createContent([].concat(value.html).join(''), nodeType).childNodes), diffOptions);
+ } else if ('length' in value) {
+ anyContent(slice.call(value));
+ } else {
+ anyContent(Intent.invoke(value, anyContent));
+ }
+
+ break;
+ }
+ };
+
+ return anyContent;
+ },
+ // style or textareas don't accept HTML as content
+ // it's pointless to transform or analyze anything
+ // different from text there but it's worth checking
+ // for possible defined intents.
+ text: function text(node) {
+ var oldValue;
+
+ var textContent = function textContent(value) {
+ if (oldValue !== value) {
+ oldValue = value;
+
+ var type = typeof(value);
+
+ if (type === 'object' && value) {
+ if (isPromise_ish(value)) {
+ value.then(textContent);
+ } else if ('placeholder' in value) {
+ invokeAtDistance(value, textContent);
+ } else if ('text' in value) {
+ textContent(String(value.text));
+ } else if ('any' in value) {
+ textContent(value.any);
+ } else if ('html' in value) {
+ textContent([].concat(value.html).join(''));
+ } else if ('length' in value) {
+ textContent(slice.call(value).join(''));
+ } else {
+ textContent(Intent.invoke(value, textContent));
+ }
+ } else if (type === 'function') {
+ textContent(value(node));
+ } else {
+ node.textContent = value == null ? '' : value;
+ }
+ }
+ };
+
+ return textContent;
+ }
+ };
+
+ var isNoOp = false;
+
+ var _templateLiteral = function templateLiteral(tl) {
+ var RAW = 'raw';
+
+ var isBroken = function isBroken(UA) {
+ return /(Firefox|Safari)\/(\d+)/.test(UA) && !/(Chrom[eium]+|Android)\/(\d+)/.test(UA);
+ };
+
+ var broken = isBroken((document.defaultView.navigator || {}).userAgent);
+ var FTS = !(RAW in tl) || tl.propertyIsEnumerable(RAW) || !Object.isFrozen(tl[RAW]);
+
+ if (broken || FTS) {
+ var forever = {};
+
+ var foreverCache = function foreverCache(tl) {
+ for (var key = '.', i = 0; i < tl.length; i++) {
+ key += tl[i].length + '.' + tl[i];
+ }
+
+ return forever[key] || (forever[key] = tl);
+ }; // Fallback TypeScript shenanigans
+
+
+ if (FTS) _templateLiteral = foreverCache; // try fast path for other browsers:
+ // store the template as WeakMap key
+ // and forever cache it only when it's not there.
+ // this way performance is still optimal,
+ // penalized only when there are GC issues
+ else {
+ var wm = new WeakMap$1();
+
+ var set = function set(tl, unique) {
+ wm.set(tl, unique);
+ return unique;
+ };
+
+ _templateLiteral = function templateLiteral(tl) {
+ return wm.get(tl) || set(tl, foreverCache(tl));
+ };
+ }
+ } else {
+ isNoOp = true;
+ }
+
+ return TL(tl);
+ };
+
+ function TL(tl) {
+ return isNoOp ? tl : _templateLiteral(tl);
+ }
+
+ function tta (template) {
+ var length = arguments.length;
+ var args = [TL(template)];
+ var i = 1;
+
+ while (i < length) {
+ args.push(arguments[i++]);
+ }
+
+ return args;
+ }
+ /**
+ * best benchmark goes here
+ * https://jsperf.com/tta-bench
+ * I should probably have an @ungap/template-literal-es too
+ export default (...args) => {
+ args[0] = unique(args[0]);
+ return args;
+ };
+ */
+
+ var wires = new WeakMap$1(); // A wire is a callback used as tag function
+ // to lazily relate a generic object to a template literal.
+ // hyper.wire(user)`
- 1. **attributes**, as well as eventual **callbacks**, must be defined inside single or double quoted attributes
- 2. if there's any char different from `>` and `<` surrounding the interpolation, that content will be text, instead of HTML
+A **Fast & Light Virtual DOM Alternative**.
-Please read the [Getting Started](https://github.com/WebReflection/hyperHTML/blob/master/GETTING_STARTED.md#how-to-define-hyperhtml-templates) for more examples.
+- - -
+[](https://github.com/WebReflection/donate) [](#backers) [](#sponsors) 
-## Basic Example
-The easiest way to describe `hyperHTML` is through [an example](https://webreflection.github.io/hyperHTML/test/tick.html).
-```js
-// this is React's first tick example
-// https://facebook.github.io/react/docs/state-and-lifecycle.html
-function tick() {
- const element = (
- 
+
+
+### Backers
+
+Thank you to all our backers! [[Become a backer](https://opencollective.com/hyperhtml#backer)]
+
+
+
+
+### Sponsors
+
+Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/hyperhtml#sponsor))
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/DEEPDIVE.md b/DEEPDIVE.md
deleted file mode 100644
index 214523e5..00000000
--- a/DEEPDIVE.md
+++ /dev/null
@@ -1,231 +0,0 @@
-# hyperHTML Developer DeepDive
-
-Being extremely lightweight and simple, there's not much to learn about `hyperHTML`, but there's surely more to discuss about patterns floating around it.
-
-This document aim is to provide as many details as possible per each operation that's possible via `hyperHTML`.
-
-
-## How can the template be unique
-
-One thing I have recently discovered about template literals, and I wish I knew it before, is that these are as static as any other string.
-
-This means that not only ``(`a` === `a`)`` is true, but also ``((a=>a)`a${1}b` === (a=>a)`a${2}b`)``.
-
-This is the first bit to understand: each template string is unique and if the target node has been using this template before, it won't actually parse it again at all and it will simply use the rest of the arguments passed along to update nested bits already known.
-
-
-#### How are known nodes discovered
-
-The very first time a new template is used against a node, its full content is injected into such node using a special `` random comment instead of real values.
-
-Such comment is used to discover both attributes, text nodes, and whole fragments or HTML content, the very first time only.
-
-```js
-// simulation of initial fake injection
-function fakeContent(statics, ...values) {
- const content = statics.join('');
- this.innerHTML = content;
-}
-
-const render = fakeContent.bind(document.body);
-
-// inject fakeContent to the target
-render`a ${'b'} c`;
-
-// check its content
-console.log(
- document.body.childNodes
-);
-// [text, comment, text]
-```
-
-As basic example, it would be now possible to drop that `comment` with a text node that will update its content when `values[0]` is passed on, and once all nodes have been mapped 1:1 to the amount of extra arguments passed along to update each sub-value, real data is used and real data will be used from that very moment on to populate nodes and attributes.
-
-At this point `hyperHTML` uses an [expando property](https://developer.mozilla.org/en-US/docs/Glossary/Expando), for the sake of wider compatibility and to avoid too much [GC pressure](https://mail.mozilla.org/pipermail/es-discuss/2014-December/040565.html) due a potentially heavily populated WeakMap, to save the list of callbacks used to update only what's needed to be updated, being specific text nodes, attributes, or fragments, and together with the static template reference.
-
-From now on, every time the same template is used, all `hyperHTML` has to do is the following:
-
-```js
-// used when the template is known
-function update(statics, ...values) {
- // list of callbacks that target directly the node
- const updates = this[EXPANDO].updates;
- // per each value passed along
- values.forEach((value, i) =>
- // update the related content
- updates[i](value));
- // it's a 1:1 DOM relationships
-}
-```
-
-
-## How are attributes updated
-
-Quite often developers thinks about DOM attributes as something you can get or set via `node.setAttribute(name, value)`.
-Well, that's half of the story, 'cause [attributes are just nodes](https://dom.spec.whatwg.org/#interface-attr) like anything else in the DOM.
-
-This means that a generic attribute can be updated simply setting its `.value` property, like an `input` element would update its view when we set its value. It'd be silly to `input.setAttribute('value', content)` when we can just `input.value = content`, right?
-
-And that's how attributes are updated here. Trapped in a closure, a new template render will simply target the specific attribute and change its value, with the only exception of those attributes prefixed with `on`.
-
-These are meant to be event handlers. And since nobody likes to deal with handlers as string content, `hyperHTML` recognizes these attributes and it actually remove them from the node, but it will assign to the attribute owner, the node, the DOM Level 0 event.
-
-```js
-// simulation of the attribute update mechanism
-if (attribute.name.indexOf('on') === 0) {
- node.removeAttribute(attribute.name);
- updateAttributeUsing(callback => {
- node[attribute.name] = callback;
- });
-} else {
- updateAttributeUsing(value => {
- attribute.value = value;
- });
-}
-```
-
-#### Attributes, the right way
-
-I'm pretty sure at some point someone will file a bug about having the following situation not working:
-```js
-function update(render, state) {
- // WRONG WAY TO SET ATTRIBUTES
- render`
-