` 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 d5293ce1..00000000
--- a/DEEPDIVE.md
+++ /dev/null
@@ -1,239 +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 or a fragment, 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, but 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 a WeakMap, where available, or an [expando property](https://developer.mozilla.org/en-US/docs/Glossary/Expando), 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 a reference to the static template literal it's representing.
-
-From now on, every time the same template literal 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 special attributes inherited through the prototype.
-
-These are usually meant to be booleans or event handlers ( i.e. _onclick_ ).
-
-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`
-
${'this will accept HTML'}
- -
- ${'this will update a raw
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 4bb0bb57..00000000 --- a/GETTING_STARTED.md +++ /dev/null @@ -1,244 +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` -
+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.
-A Fast & Light Virtual DOM Alternative - [release post](https://medium.com/@WebReflection/hyperhtml-a-virtual-dom-alternative-279db455ee0e#.lc65pz9vd),
-now [available for both client, server](https://github.com/WebReflection/viperHTML)
-and also [simplified for Custom Elements](https://github.com/WebReflection/hyperHTML-Element).
-- - -
-**New Experimental .adopt(node) API**
+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.
-Since version _0.12_ you can `hyperHTML.adopt(node)` instead of `hyperHTML.bind(node)` in case you have already rendered
-a node on the server via [viperHTML](https://github.com/WebReflection/viperHTML) and you are sharing the same template.
+### ๐ฃ Community Announcement
+
+Please ask questions in the [dedicated discussions repository](https://github.com/WebReflection/discussions), to help the community around this project grow โฅ
-Adopting a node will not trash the node content, it will map it to the existent one.
- - -
-Don't miss the [viperHTML](https://github.com/WebReflection/viperHTML) version of **Hacker News**
-Live: https://viperhtml-164315.appspot.com/
+
+
+A **Fast & Light Virtual DOM Alternative**.
-Repo: https://github.com/WebReflection/viper-news
- - -
-## How To Define _hyperHTML_ Templates
-There are two basic but fundamental rules to remember:
+[](https://github.com/WebReflection/donate) [](#backers) [](#sponsors) 
- 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
+[](https://coveralls.io/github/WebReflection/hyperHTML?branch=master)
+[](https://travis-ci.org/WebReflection/hyperHTML)
+[](https://opensource.org/licenses/ISC)
+[](https://greenkeeper.io/) 
-Please read the [Getting Started](https://github.com/WebReflection/hyperHTML/blob/master/GETTING_STARTED.md#how-to-define-hyperhtml-templates) for more examples.
+- - -
+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).
-## 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 = (
-
-// same item used to render an li
-hyperHTML.wire(obj, ':li')`
-
+## Contributors
-### FAQs
+This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+
- * _will input lose focus?_ Nope, as [you can test](https://webreflection.github.io/hyperHTML/test/form.html), only what needs to be updated will be updated.
+- - -
+
+### 2.34 Highlights
- * _are events stringified?_ Nope, even if visually set as `` events are treated differently from other attributes. That `help.click` will be indeed directly assigned as `a.onclick = help.click` so don't worry ๐
+ * the new `?boolean=${value}` syntax from [ยตhtml](https://github.com/WebReflection/uhtml#readme) has landed in *hyperHTML* too. Feel free to [read this long discussion](https://github.com/WebReflection/discussions/discussions/13) to better understand *why* this syntax is necessary.
- * _how can I differentiate between textContent only and HTML or DOM nodes?_
- If there's any space or char around the value, that'd be a textContent.
- Otherwise it can be strings, used as html, or DOM nodes.
- As summary: ```render`This is: ${'text'}
`;``` for text, and ```render`${'html' || node || array}
`;``` for other cases. - An array will result into html, if its content has strings, or a document fragment, if it contains nodes. - I've thought a pinch of extra handy magic would've been nice there ๐. +### V2.5 Highlights - * _can I use different renders for a single node?_ - Sure thing. However, the best performance gain is reached with nodes that always use the same template string. - If you have a very unpredictable conditional template, you might want to create two different nodes and apply `hyperHTML` with the same template for both of them, swapping them when necessary. - In every other case, the new template will create new content and map it once per change. + * `${{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)`| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 -100 -101 -102 -103 -104 -105 -106 -107 -108 -109 -110 -111 -112 -113 -114 -115 -116 -117 -118 -119 -120 -121 -122 -123 -124 -125 -126 -127 -128 -129 -130 -131 -132 -133 -134 -135 -136 -137 -138 -139 -140 -141 -142 -143 -144 -145 -146 -147 -148 -149 -150 -151 -152 -153 -154 -155 -156 -157 -158 -159 -160 -161 -162 -163 -164 -165 -166 -167 -168 -169 -170 -171 -172 -173 -174 -175 -176 -177 -178 -179 -180 -181 -182 -183 -184 -185 -186 -187 -188 -189 -190 -191 -192 -193 -194 -195 -196 -197 -198 -199 -200 -201 -202 -203 -204 -205 -206 -207 -208 -209 -210 -211 -212 -213 -214 -215 -216 -217 -218 -219 -220 -221 -222 -223 -224 -225 -226 -227 -228 -229 -230 -231 -232 -233 -234 -235 -236 -237 -238 -239 -240 -241 -242 -243 -244 -245 -246 -247 -248 -249 -250 -251 -252 -253 -254 -255 -256 -257 -258 -259 -260 -261 -262 -263 -264 -265 -266 -267 -268 -269 -270 -271 -272 -273 -274 -275 -276 -277 -278 -279 -280 -281 -282 -283 -284 -285 -286 -287 -288 -289 -290 -291 -292 -293 -294 -295 -296 -297 -298 -299 -300 -301 -302 -303 -304 -305 -306 -307 -308 -309 -310 -311 -312 -313 -314 -315 -316 -317 -318 -319 -320 -321 -322 -323 -324 -325 -326 -327 -328 -329 -330 -331 -332 -333 -334 -335 -336 -337 -338 -339 -340 -341 -342 -343 -344 -345 -346 -347 -348 -349 -350 -351 -352 -353 -354 -355 -356 -357 -358 -359 -360 -361 -362 -363 -364 -365 -366 -367 -368 -369 -370 -371 -372 -373 -374 -375 -376 -377 -378 -379 -380 -381 -382 -383 -384 -385 -386 -387 -388 -389 -390 -391 -392 -393 -394 -395 -396 -397 -398 -399 -400 -401 -402 -403 -404 -405 -406 -407 -408 -409 -410 -411 -412 -413 -414 -415 -416 -417 -418 -419 -420 -421 -422 -423 -424 -425 -426 -427 -428 -429 -430 -431 -432 -433 -434 -435 -436 -437 -438 -439 -440 -441 -442 -443 -444 -445 -446 -447 -448 -449 -450 -451 -452 -453 -454 -455 -456 -457 -458 -459 -460 -461 -462 -463 -464 -465 -466 -467 -468 -469 -470 -471 -472 -473 -474 -475 -476 -477 -478 -479 -480 -481 -482 -483 -484 -485 -486 -487 -488 -489 -490 -491 -492 -493 -494 -495 -496 -497 -498 -499 -500 -501 -502 -503 -504 -505 -506 -507 -508 -509 -510 -511 -512 -513 -514 -515 -516 -517 -518 -519 -520 -521 -522 -523 -524 -525 -526 -527 -528 -529 -530 -531 -532 -533 -534 -535 -536 -537 -538 -539 -540 -541 -542 -543 -544 -545 -546 -547 -548 -549 -550 -551 -552 -553 -554 -555 -556 -557 -558 -559 -560 -561 -562 -563 -564 -565 -566 -567 -568 -569 -570 -571 -572 -573 -574 -575 -576 -577 -578 -579 -580 -581 -582 -583 -584 -585 -586 -587 -588 -589 -590 -591 -592 -593 -594 -595 -596 -597 -598 -599 -600 -601 -602 -603 -604 -605 -606 -607 -608 -609 -610 -611 -612 -613 -614 -615 -616 -617 -618 -619 -620 -621 -622 -623 -624 -625 -626 -627 -628 -629 -630 -631 -632 -633 -634 -635 -636 -637 -638 -639 -640 -641 -642 -643 -644 -645 -646 -647 -648 -649 -650 -651 -652 -653 -654 -655 -656 -657 -658 -659 -660 -661 -662 -663 -664 -665 -666 -667 -668 -669 -670 -671 -672 -673 -674 -675 -676 -677 -678 -679 -680 -681 -682 -683 -684 -685 -686 -687 -688 -689 -690 -691 -692 -693 -694 -695 -696 -697 -698 -699 -700 -701 -702 -703 -704 -705 -706 -707 -708 -709 -710 -711 -712 -713 -714 -715 -716 -717 -718 -719 -720 -721 -722 -723 -724 -725 -726 -727 -728 -729 -730 -731 -732 -733 -734 -735 -736 -737 -738 -739 -740 -741 -742 -743 -744 -745 -746 -747 -748 -749 -750 -751 -752 -753 -754 -755 -756 -757 -758 -759 -760 -761 -762 -763 -764 -765 -766 -767 -768 -769 -770 -771 -772 -773 -774 -775 -776 -777 -778 -779 -780 -781 -782 -783 -784 -785 -786 -787 -788 -789 -790 -791 -792 -793 -794 -795 -796 -797 -798 -799 -800 -801 -802 -803 -804 -805 -806 -807 -808 -809 -810 -811 -812 -813 -814 -815 -816 -817 -818 -819 -820 -821 -822 -823 -824 -825 -826 -827 -828 -829 -830 -831 -832 -833 -834 -835 -836 -837 -838 -839 -840 -841 -842 -843 -844 -845 -846 -847 -848 -849 -850 -851 -852 -853 -854 -855 -856 -857 -858 -859 -860 -861 -862 -863 -864 -865 -866 -867 -868 -869 -870 -871 -872 -873 -874 -875 -876 -877 -878 -879 -880 -881 -882 -883 -884 -885 -886 -887 -888 -889 -890 -891 -892 -893 -894 -895 -896 -897 -898 -899 -900 -901 -902 -903 -904 -905 -906 -907 -908 -909 -910 -911 -912 -913 -914 -915 -916 -917 -918 -919 -920 -921 -922 -923 -924 -925 -926 -927 -928 -929 -930 -931 -932 -933 -934 -935 -936 -937 -938 -939 -940 -941 -942 -943 -944 -945 -946 -947 -948 -949 -950 -951 -952 -953 -954 -955 -956 -957 -958 -959 -960 -961 -962 -963 -964 -965 -966 -967 -968 -969 -970 -971 -972 -973 -974 -975 -976 -977 -978 -979 -980 -981 -982 -983 -984 -985 -986 -987 -988 -989 -990 -991 -992 -993 -994 -995 -996 -997 -998 -999 -1000 -1001 -1002 -1003 -1004 -1005 -1006 -1007 -1008 -1009 -1010 -1011 -1012 -1013 -1014 -1015 -1016 -1017 -1018 -1019 -1020 -1021 -1022 -1023 -1024 -1025 -1026 -1027 -1028 -1029 -1030 -1031 -1032 -1033 -1034 -1035 -1036 -1037 -1038 -1039 -1040 -1041 -1042 -1043 -1044 -1045 -1046 -1047 -1048 -1049 -1050 -1051 -1052 -1053 -1054 -1055 -1056 -1057 -1058 -1059 -1060 -1061 -1062 -1063 -1064 -1065 -1066 -1067 -1068 -1069 -1070 -1071 -1072 -1073 -1074 -1075 -1076 -1077 -1078 -1079 -1080 -1081 -1082 -1083 -1084 -1085 -1086 -1087 -1088 -1089 -1090 -1091 -1092 -1093 -1094 -1095 -1096 -1097 -1098 -1099 -1100 -1101 -1102 -1103 -1104 -1105 -1106 -1107 -1108 -1109 -1110 -1111 -1112 -1113 -1114 -1115 -1116 -1117 | 2ร - - - - - - - - - -2ร - - -1ร -180ร -180ร - - - -100ร -100ร - -180ร -180ร - - - -2ร -28ร -32ร -32ร -32ร -32ร - - - - -2ร -2ร - - - -2ร -52ร - - - - - - - - - - - - - - - - -2ร -2ร -2ร -2ร -2ร - - -2ร -2ร - -2ร -2ร -2ร -2ร - - - - - - - -1ร -38ร - - - - -38ร -26ร -12ร - -26ร - - - - - -1ร -22ร - -12ร -12ร -6ร -6ร - -6ร -6ร - -6ร -4ร - -6ร - -2ร -2ร - - - - -1ร -50ร -50ร -18ร -18ร - - - - -1ร -90ร -90ร - - - -1ร -14ร -14ร -2ร -2ร -2ร - -12ร -12ร - - - - - - - - -1ร -26ร -92ร - - - -22ร -22ร - -6ร -6ร - -64ร -40ร -40ร -12ร - -28ร - - - -8ร -8ร - -2ร -2ร -4ร - -2ร -2ร -2ร - -16ร -2ร - -16ร -2ร -2ร - - -16ร -16ร -16ร - - -24ร -2ร - -22ร - -64ร - - - - - - - - -1ร -26ร - - - - - - - - - - - -26ร -26ร - -22ร -14ร -14ร -14ร - - - - -10ร -6ร - - -6ร -4ร - - - - -20ร -16ร - - -16ร -14ร - - - - - - - -1ร -30ร -30ร -48ร -34ร -34ร - - - - - -1ร -24ร -50ร - - - -20ร -20ร -20ร -20ร -20ร - -2ร -2ร - -28ร -18ร -2ร -2ร - -16ร - - - -4ร -4ร - -2ร -2ร -2ร - -2ร -2ร - -10ร -2ร - -10ร -2ร -2ร - - -8ร -8ร - - -10ร -2ร - -8ร - - - - - - - -28ร - - - - - - - - - -1ร -92ร - - - - - - -32ร -32ร -26ร - - - - - - - - - - - - - - -1ร -174ร - - - - - -250ร -250ร - -92ร -92ร -92ร - -60ร -58ร -16ร -42ร - - - -22ร - -20ร -20ร -20ร - - -60ร - -98ร -4ร - -98ร - - - - - - - -2ร - - - - -2ร - - - - - -2ร -2ร -2ร -2ร - - - - -2ร - - - - - - -2ร - - -2ร -2ร - - - - - - -1ร -4ร - - - -1ร -36ร - - - - - - - -56ร -56ร - - - -40ร - - -36ร - - - -1ร -127ร - - - - -1ร -102ร - - - - - - - -1ร -100ร -100ร -100ร -100ร -100ร -100ร - -47ร - - - - - - -47ร - -100ร - - - -1ร -1ร -1ร - -99ร -99ร -53ร - -46ร - - -100ร - - - -1ร -2ร -2ร -2ร -2ร -2ร -2ร - - - -1ร -68ร - - - - -1ร -46ร - - - - - - - - -72ร - -8ร -8ร -6ร - -8ร -8ร - -26ร - - -16ร -16ร -16ร -26ร -26ร -10ร - -16ร - - -16ร -16ร -14ร - -16ร -16ร -14ร - -16ร -16ร - - -10ร -10ร -10ร -10ร -10ร -10ร -10ร -10ร - - - - - -2ร -2ร - - -2ร - - -8ร -8ร - -10ร - - - -10ร - - - - - -10ร -8ร - -10ร - -26ร - - -38ร - - - - - -38ร -38ร - - -46ร - - - -1ร -26ร - - - -1ร -32ร -32ร - -32ร -60ร -60ร -28ร - -32ร - - - - - -1ร -60ร - - - -1ร -100ร -14ร - - - - -1ร -10ร -10ร -2ร -2ร - - - - -1ร -106ร -106ร - -26ร -26ร - -26ร -26ร - -30ร -30ร - -24ร -24ร - -106ร - - - - -1ร -16ร -16ร -12ร -12ร -12ร -12ร -12ร -12ร -12ร - - - - -1ร -88ร - - - - - - - -2ร - -2ร -109ร - -58ร - - - - - - - - - -2ร - -1ร -1ร - -50ร - - - - - -41ร - - - - - - - - -2ร - -1ร - - -1ร -1ร -59ร - - - - -2ร -12ร - - - - - - -2ร -2ร -1ร -1ร -135ร -135ร - - - - - -2ร - -63ร - - -16ร - - - - -24ร - - - - -2ร -124ร - - -2ร - -102ร - - - - - - -289ร -289ร -161ร - -102ร - -61ร - - - -2ร - -57ร -79ร -79ร - -41ร -41ร - -38ร -38ร - - -57ร - - -57ร -79ร - -57ร - - - -2ร -1ร -1ร -1ร -13ร -13ร - - - - -2ร - -6ร -6ร - -6ร - -2ร - -5ร -5ร - -5ร - - -2ร - - -2ร - - -2ร - - -2ร - - - -2ร -2ร -2ร -2ร - -119ร - - - - - -85ร - -119ร - - -34ร - - - - - - - - - -1ร -82ร -82ร -82ร -41ร -41ร - -82ร -82ร -82ร -82ร -82ร - - - - - -1ร -88ร -88ร -88ร - - -20ร -20ร - - -42ร -42ร - - - -42ร - - -26ร -26ร -26ร - -88ร - - - - -64ร - -88ร - - - - - -1ร -68ร - - - - - - -60ร -60ร -60ร -6ร -6ร - -60ร - -68ร -68ร - - - -1ร -32ร - - - - - - -46ร -46ร -46ร - - - - - - -32ร -32ร - - - -1ร -180ร -198ร - - - - - -1ร -100ร -100ร -100ร - -100ร -68ร -68ร -68ร - -32ร - -100ร - - - - - - - -1ร -32ร - -1ร -34ร -34ร - - -34ร - - -1ร -58ร -36ร -36ร -4ร - -36ร - -58ร - - -32ร - -14ร -14ร -14ร -10ร -10ร -10ร -14ร -10ร -2ร -2ร - - - - -2ร - -8ร -8ร - - -14ร -14ร - - -14ร - - -44ร -44ร -26ร -26ร -26ร - -44ร -44ร - - - - -1ร -38ร -38ร -38ร -38ร -8ร -8ร - -38ร -16ร -16ร - -38ร - - - - - -2ร - - - - -2ร - | var hyperHTML = (function (globalDocument) {'use strict';
-
- /*! (c) 2017 Andrea Giammarchi @WebReflection, (ISC) */
-
- // ---------------------------------------------
- // hyperHTML Public API
- // ---------------------------------------------
-
- // The document must be swap-able at runtime.
- // Needed by both basicHTML and nativeHTML
- hyperHTML.document = globalDocument;
-
- // hyperHTML.bind(el) โก๏ธ
- function hyperHTML(template) {
- var hyper = hypers.get(this);
- if (
- !hyper ||
- hyper.template !== (FF ? unique(template) : template)
- ) {
- hyper = upgrade.apply(this, arguments);
- hypers.set(this, hyper);
- }
- update.apply(hyper.updates, arguments);
- return this;
- }
-
- // hyperHTML.adopt(el) ๐ฃ
- hyperHTML.adopt = function adopt(node) {
- return function () {
- notAdopting = false;
- hyperHTML.apply(node, arguments);
- notAdopting = true;
- return node;
- };
- };
-
- // hyperHTML.escape('<html>') => '<text>'
- hyperHTML.escape = function escape(html) {
- return html.replace(reEscape, fnEscape);
- };
-
- // hyperHTML.wire(obj, 'type:ID') โฐ
- hyperHTML.wire = function wire(obj, type) {
- return arguments.length < 1 ?
- wireContent('html') :
- (obj == null ?
- wireContent(type || 'html') :
- wireWeakly(obj, type || 'html')
- );
- };
-
- // - - - - - - - - - - - - - - - - - - - - - - -
-
- // ---------------------------------------------
- // Constants
- // ---------------------------------------------
-
- // Node.CONSTANTS
- // without assuming Node is globally available
- // since this project is used on the backend too
- var ELEMENT_NODE = 1;
- var ATTRIBUTE_NODE = 2;
- var TEXT_NODE = 3;
- var COMMENT_NODE = 8;
- var DOCUMENT_FRAGMENT_NODE = 11;
-
- // SVG related
- var OWNER_SVG_ELEMENT = 'ownerSVGElement';
- var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
-
- var SHOULD_USE_ATTRIBUTE = /^style$/i;
- var EXPANDO = '_hyper_html: ';
- var UID = EXPANDO + ((Math.random() * new Date) | 0) + ';';
- var UIDC = '<!--' + UID + '-->';
-
- // ---------------------------------------------
- // DOM Manipulation
- // ---------------------------------------------
-
- // return -1 if no differences are found
- // the index where differences starts otherwise
- function indexOfDifferences(a, b) {
- 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;
- }
-
- // accordingly with the content type
- // it replace the content of a node
- // with the give child
- function populateNode(parent, child) {
- switch (child.nodeType) {
- case ELEMENT_NODE:
- var childNodes = parent.childNodes;
- if (childNodes[0] === child) {
- removeNodeList(childNodes, 1);
- break;
- }
- resetAndPopulate(parent, child);
- break;
- case DOCUMENT_FRAGMENT_NODE:
- if (indexOfDifferences(parent.childNodes, child.childNodes) !== -1) {
- resetAndPopulate(parent, child);
- }
- break;
- case TEXT_NODE:
- parent.textContent = child.textContent;
- break;
- }
- }
-
- // remove a list of nodes from startIndex to list.length
- function removeNodeList(list, startIndex) {
- var length = list.length, child;
- while (startIndex < length--) {
- child = list[length];
- child.parentNode.removeChild(child);
- }
- }
-
- // erase a node content and populate it
- function resetAndPopulate(parent, child) {
- parent.textContent = '';
- parent.appendChild(child);
- }
-
- // append childNodes to a node from a specific index
- function updateViaArray(node, childNodes, i) {
- var fragment = emptyFragment(node);
- if (i !== 0) {
- removeNodeList(node.childNodes, i);
- appendNodes(fragment, childNodes.slice(i));
- node.appendChild(fragment);
- } else {
- appendNodes(fragment, childNodes);
- resetAndPopulate(node, fragment);
- }
- }
-
- // ---------------------------------------------
- // hyperHTML Operations
- // ---------------------------------------------
-
- // `<div>${'any'}</div>`
- function setAnyContent(node) {
- return function any(value) {
- switch (typeof value) {
- case 'string':
- case 'number':
- case 'boolean':
- node.innerHTML = value;
- break;
- case 'function':
- any(value(node, node.children, 0));
- break;
- default:
- if (isArray(value)) {
- var i, length = value.length;
- if (length === 1) {
- any(value[0]);
- } else {
- switch (length === 0 ? '' : typeof value[0]) {
- case 'string':
- case 'number':
- case 'boolean':
- any(value.join(''));
- break;
- case 'function':
- var children = slice.call(node.children);
- for (i = 0, length = value.length; i < length; i++) {
- value[i] = value[i](node, children, i);
- }
- removeNodeList(children, i);
- any(value.concat.apply([], value));
- break;
- case 'object':
- if (isArray(value[0])) {
- value = value.concat.apply([], value);
- }
- if (isPromise_ish(value[0])) {
- Promise.all(value).then(any);
- break;
- }
- default:
- i = indexOfDifferences(node.childNodes, value);
- if (i !== -1) updateViaArray(node, value, i);
- break;
- }
- }
- } else if (isPromise_ish(value)) {
- value.then(any);
- } else {
- populateNode(node, value);
- }
- break;
- }
- };
- }
-
- // `<div class="${'attr'}"></div>`
- // `<div onclick="${function () {... }}"></div>`
- // `<div onclick="${{handleEvent(){ ... }}}"></div>`
- // `<div contenteditable="${true}"></div>`
- function setAttribute(attribute, removeAttributes) {
- var
- name = attribute.name,
- node = attribute.ownerElement,
- isEvent = /^on/.test(name),
- isSpecial = name in node && !(
- // always use set attribute with SVGs
- OWNER_SVG_ELEMENT in node ||
- SHOULD_USE_ATTRIBUTE.test(name)
- ),
- type = isEvent ? name.slice(2) : '',
- oldValue
- ;
- if (isSpecial || isEvent) removeAttributes.push(node, name);
- return isEvent ?
- function eventAttr(newValue) {
- if (oldValue !== newValue) {
- if (oldValue) node.removeEventListener(type, oldValue, false);
- oldValue = newValue;
- if (newValue) node.addEventListener(type, newValue, false);
- }
- } :
- (isSpecial ?
- function specialAttr(newValue) {
- if (oldValue !== newValue) {
- oldValue = newValue;
- // WebKit moves the cursor if input.value
- // is set again, even if same value
- if (node[name] !== newValue) {
- node[name] = newValue;
- }
- }
- } :
- function normalAttr(newValue) {
- if (oldValue !== newValue) {
- oldValue = newValue;
- // WebKit moves the cursor if input.value
- // is set again, even if same value
- if (attribute.value !== newValue) {
- attribute.value = newValue;
- }
- }
- }
- );
- }
-
- // `<div> ${'text'} </div>`
- function setTextContent(node) {
- var oldValue;
- return function text(newValue) {
- if (oldValue !== newValue) {
- oldValue = newValue;
- node.textContent = newValue;
- }
- };
- }
-
- // `<li>a</li>${'virtual'}<li>c</li>`
- function setVirtualContent(node, childNodes) {
- return function anyVirtual(value) {
- switch (typeof value) {
- case 'string':
- case 'number':
- case 'boolean':
- removeNodeList(childNodes, 0);
- var fragment = createFragment(node, value);
- childNodes = slice.call(fragment.childNodes);
- node.parentNode.insertBefore(fragment, node);
- break;
- case 'function':
- anyVirtual(value(node.parentNode, childNodes, 0));
- break;
- default:
- if (isArray(value)) {
- if (value.length === 0) {
- removeNodeList(childNodes, 0);
- childNodes = [];
- } else {
- switch (typeof value[0]) {
- case 'string':
- case 'number':
- case 'boolean':
- anyVirtual(value.join(''));
- break;
- case 'function':
- var parentNode = node.parentNode;
- for (var i = 0, length = value.length; i < length; i++) {
- value[i] = value[i](parentNode, childNodes, i);
- }
- anyVirtual(value.concat.apply([], value));
- break;
- case 'object':
- if (isArray(value[0])) {
- value = value.concat.apply([], value);
- }
- if (isPromise_ish(value[0])) {
- Promise.all(value).then(anyVirtual);
- break;
- }
- default:
- updateVirtualNodes(node, childNodes, value);
- break;
- }
- }
- } else if (isPromise_ish(value)) {
- value.then(anyVirtual);
- } else {
- updateVirtualNodes(
- node,
- childNodes,
- value.nodeType === DOCUMENT_FRAGMENT_NODE ?
- slice.call(value.childNodes) :
- [value]
- );
- }
- break;
- }
- };
- }
-
- // ---------------------------------------------
- // DOM Traversing
- // ---------------------------------------------
-
- // look for attributes that contains the comment text
- function attributesSeeker(node, paths) {
- for (var
- attribute,
- value = IE ? UID : UIDC,
- attributes = node.attributes,
- i = 0, length = attributes.length;
- i < length; i++
- ) {
- attribute = attributes[i];
- if (attribute.value === value) {
- paths.push(
- Path(
- 'attr',
- // with IE the order doesn't really matter
- // as long as the right attribute is addressed
- IE ?
- node.attributes[IEAttributes.shift()] :
- attribute
- )
- );
- }
- }
- }
-
- // walk the fragment tree in search of comments
- function commentsSeeker(node, paths) {
- for (var
- child, text,
- childNodes = node.childNodes,
- length = childNodes.length,
- i = 0; i < length; i++
- ) {
- child = childNodes[i];
- switch (child.nodeType) {
- case ELEMENT_NODE:
- attributesSeeker(child, paths);
- commentsSeeker(child, paths);
- break;
- case COMMENT_NODE:
- if (child.textContent === UID) {
- if (length === 1) {
- paths.push(Path('any', node));
- } else if (
- (i < 1 || childNodes[i - 1].nodeType === ELEMENT_NODE) &&
- (i + 1 === length || childNodes[i + 1].nodeType === ELEMENT_NODE)
- ) {
- paths.push(Path('virtual', child));
- } else {
- text = createText(child, '');
- child.parentNode.replaceChild(text, child);
- paths.push(Path('text', text));
- }
- }
- break;
- case TEXT_NODE:
- if (SHOULD_USE_ATTRIBUTE.test(node.nodeName) && child.textContent === UIDC) {
- paths.push(Path('text', node));
- }
- break;
- }
- }
- }
-
- // ---------------------------------------------
- // Features detection / ugly UA sniffs
- // ---------------------------------------------
- var featureFragment = createDocumentFragment(globalDocument);
-
- // Firefox < 55 has non standard template literals.
- // https://bugzilla.mozilla.org/show_bug.cgi?id=1108941
- // TODO: is there any better way to feature detect this ?
- var FF = typeof navigator === 'object' &&
- /Firefox\/(\d+)/.test(navigator.userAgent) &&
- parseFloat(RegExp.$1) < 55;
-
- // If attributes order is shuffled, threat the browser differently
- // Usually this is a well known IE only limitation but some older FF does the same.
- var IE = (function () {
- var p = globalDocument.createElement('p');
- p.innerHTML = '<i data-i="" class=""></i>';
- return /class/i.test(p.firstChild.attributes[0].name);
- }());
-
-
- // beside IE, old WebKit browsers don't have `children` in DocumentFragment
- var WK = !('children' in featureFragment);
-
- // ---------------------------------------------
- // Helpers
- // ---------------------------------------------
-
- // used to convert childNodes to Array
- var slice = [].slice;
-
- // used to sanitize html
- var reEscape = /[&<>'"]/g;
- var oEscape = {
- '&': '&',
- '<': '<',
- '>': '>',
- "'": ''',
- '"': '"'
- };
- function fnEscape(m) {
- return oEscape[m];
- }
-
- // return a single node or an Array or nodes
- function createContent(node) {
- for (var
- child,
- content = [],
- childNodes = node.childNodes,
- i = 0,
- length = childNodes.length;
- i < length; i++
- ) {
- child = childNodes[i];
- if (
- child.nodeType === ELEMENT_NODE ||
- trim.call(child.textContent).length !== 0
- ) {
- content.push(child);
- }
- }
- return content.length === 1 ? content[0] : content;
- }
-
- // just a minifier friendly indirection
- function createDocumentFragment(document) {
- return document.createDocumentFragment();
- }
-
- // given a node, inject some html and return
- // the resulting template document fragment
- function createFragment(node, html) {
- return (
- OWNER_SVG_ELEMENT in node ?
- createSVGFragment :
- createHTMLFragment
- )(node, html);
- }
-
- // create fragment for HTML
- function createHTMLFragment(node, html) {
- var fragment;
- var document = node.ownerDocument;
- var container = document.createElement('template');
- var hasContent = 'content' in container;
- var needsTableWrap = false;
- if (!hasContent) {
- // DO NOT MOVE THE FOLLOWING LINE ELSEWHERE
- fragment = createDocumentFragment(document);
- // (a jsdom + nodejs tests coverage gotcha)
-
- // el.innerHTML = '<td></td>'; is not possible
- // if the content is a partial internal table content
- // it needs to be wrapped around once injected.
- // HTMLTemplateElement does not suffer this issue.
- needsTableWrap = /^[^\S]*?<(t(?:head|body|foot|r|d|h))/i.test(html);
- }
- if (needsTableWrap) {
- // secure the RegExp.$1 result ASAP to avoid issues
- // in case a non-browser DOM library uses RegExp internally
- // when HTML content is injected (basicHTML / jsdom / others...)
- var selector = RegExp.$1;
- container.innerHTML = '<table>' + html + '</table>';
- appendNodes(fragment, slice.call(container.querySelectorAll(selector)));
- } else {
- container.innerHTML = html;
- if (hasContent) {
- fragment = container.content;
- } else {
- appendNodes(fragment, slice.call(container.childNodes));
- }
- }
- return fragment;
- }
-
- // create a fragment for SVG
- function createSVGFragment(node, html) {
- var document = node.ownerDocument;
- var fragment = createDocumentFragment(document);
- var container = document.createElementNS(SVG_NAMESPACE, 'svg');
- container.innerHTML = html;
- appendNodes(fragment, slice.call(container.childNodes));
- return fragment;
- }
-
- // given a node, it does what is says
- function createText(node, text) {
- return node.ownerDocument.createTextNode(text);
- }
-
- // given an info, tries to find out the best option
- // to replace or update the content
- function discoverNode(parentNode, virtual, info, childNodes) {
- for (var
- target = parentNode,
- document = parentNode.ownerDocument,
- path = info.path,
- virtualNode = getNode(virtual, path),
- i = 0,
- length = path.length;
- i < length; i++
- ) {
- switch (path[i++]) {
- case 'attributes':
- var name = virtualNode.name;
- if (!parentNode.hasAttribute(name)) {
- parentNode.setAttribute(name, '');
- }
- target = parentNode.attributes[name];
- break;
- case 'childNodes':
- switch (info.type) {
- // TODO: supports multiple text per element ?
- case 'text':
- var before = getTextContent(virtualNode, 'previous');
- var after = getTextContent(virtualNode, 'next');
- do {
- target = parentNode.firstChild;
- if (target && target.nodeType === TEXT_NODE) {
- parentNode.removeChild(target);
- } else {
- break;
- }
- } while (target);
- var fragment = createDocumentFragment(document);
- if (before.length) {
- fragment.appendChild(createText(parentNode, before));
- }
- target = fragment.appendChild(createText(parentNode, ''));
- if (after.length) {
- fragment.appendChild(createText(parentNode, after));
- }
- parentNode.insertBefore(fragment, parentNode.firstChild);
- break;
- // TODO: supports multiple virtual content per element ?
- case 'virtual':
- var children = getChildren(parentNode);
- var virtualChildren = getChildren(virtualNode.parentNode);
- target = previousElementSibling(virtualNode);
- var before = target ? (path.indexOf.call(virtualChildren, target) + 1) : -1;
- target = nextElementSibling(virtualNode);
- var after = target ? path.indexOf.call(virtualChildren, target) : -1;
- target = document.createComment(UID);
- switch (true) {
- // `${'virtual'}` is actually resolved as `${'any'}`
- // case before < 0 && after < 0: before = 0;
-
- // `</a>${'virtual'}`
- case after < 0:
- after = children.length;
- break;
- // `${'virtual'}<b>`
- case before < 0:
- before = 0;
- // `</a>${'virtual'}<b>`
- default:
- after = -(virtualChildren.length - after);
- break;
- }
- childNodes.push.apply(
- childNodes,
- slice.call(children, before, after)
- );
- parentNode.insertBefore(
- target,
- childNodes.length ?
- nextElementSibling(childNodes[childNodes.length - 1]) :
- slice.call(children, after)[0]
- );
- if (childNodes.length === 0) {
- removePreviousText(parentNode, target);
- }
- break;
- }
- break;
- default:
- // if the node is not there, create it
- target = getChildren(parentNode)[path[i]] ||
- parentNode.appendChild(
- parentNode.ownerDocument.createElement(
- getNode(virtual, path.slice(0, i + 1)).nodeName
- )
- );
- parentNode = target;
- break;
- }
- }
- return target;
- }
-
- // create an empty fragment from a generic node
- function emptyFragment(node) {
- return createDocumentFragment(node.ownerDocument);
- }
-
- // given a node, returns text content before it or after it
- function getTextContent(node, direction) {
- var content = [];
- var method = direction === 'next' ?
- content.push : content.unshift;
- do {
- node = node[direction + 'Sibling'];
- if (node && node.nodeType === TEXT_NODE) {
- method.call(content, node.textContent);
- } else {
- return content.join('');
- }
- } while (true);
- }
-
- // quick and dirty Promise check
- function isPromise_ish(value) {
- return value != null && 'then' in value;
- }
-
- // remove a list of [node, attribute]
- function removeAttributeList(list) {
- for (var i = 0, length = list.length; i < length; i++) {
- list[i++].removeAttribute(list[i]);
- }
- }
-
- // remove all text nodes from a virtual space
- function removePreviousText(parentNode, node) {
- var previousSibling = node.previousSibling;
- if (previousSibling && previousSibling.nodeType === TEXT_NODE) {
- parentNode.removeChild(previousSibling);
- removePreviousText(parentNode, node);
- }
- }
-
- // specify the content to update
- function setContent(type, target, removeAttributes, childNodes) {
- var update;
- switch (type) {
- case 'any':
- update = setAnyContent(target);
- break;
- case 'attr':
- update = setAttribute(target, removeAttributes);
- break;
- case 'text':
- update = setTextContent(target);
- break;
- case 'virtual':
- update = setVirtualContent(target, childNodes);
- break;
- }
- return update;
- }
-
- // update partially or fully the list of virtual nodes
- // it modifies in place the childNodes list if necessary
- function updateVirtualNodes(node, childNodes, value) {
- var i = indexOfDifferences(childNodes, value);
- if (i !== -1) {
- var fragment = emptyFragment(node);
- removeNodeList(childNodes, i);
- childNodes.splice(i);
- value = value.slice(i);
- appendNodes(fragment, value);
- node.parentNode.insertBefore(fragment, node);
- childNodes.push.apply(childNodes, value);
- }
- }
-
- // used for common path creation.
- function Path(type, node) {
- return {type: type, path: createPath(node)};
- }
-
- // ---------------------------------------------
- // Hybrid Shims
- // ---------------------------------------------
-
- // WeakMap with partial EXPANDO fallback
- var $WeakMap = typeof WeakMap === typeof $WeakMap ?
- function () {
- return {
- get: function (obj) { return obj[EXPANDO]; },
- set: function (obj, value) {
- Object.defineProperty(obj, EXPANDO, {
- configurable: true,
- value: value
- });
- }
- };
- } :
- WeakMap;
-
- // Map with partial double Array fallback
- var $Map = typeof Map === typeof $Map ?
- function () {
- var k = [], v = [];
- return {
- get: function (obj) {
- return v[k.indexOf(obj)];
- },
- // being used with unique template literals
- // there is never a case when a value is overwritten
- // no need to check upfront for the indexOf
- set: function (obj, value) {
- v[k.push(obj) - 1] = value;
- }
- };
- } :
- Map;
-
- // TODO: which browser needs these partial polyfills here?
-
- // BB7 and webOS need this
- var isArray = Array.isArray ||
- (function () {
- var toString = {}.toString;
- // I once had an engine returning [array Array]
- // and I've got scared since!
- var s = toString.call([]);
- return function (a) {
- return toString.call(a) === s;
- };
- }());
-
- // older WebKit need this
- var trim = EXPANDO.trim ||
- function () { return this.replace(/^\s+|\s+$/g, ''); };
-
- // ---------------------------------------------
- // Shared variables
- // ---------------------------------------------
-
- // normalize Firefox issue with template literals
- var templateObjects, unique;
- if (FF) {
- templateObjects = Object.create(null);
- unique = function (template) {
- var key = template.join(UID);
- return templateObjects[key] ||
- (templateObjects[key] = template);
- };
- }
-
- // use native .append(...childNodes) where available
- var appendNodes = 'append' in featureFragment ?
- function (node, childNodes) {
- node.append.apply(node, childNodes);
- } :
- function appendNodes(node, childNodes) {
- for (var
- i = 0,
- length = childNodes.length;
- i < length; i++
- ) {
- node.appendChild(childNodes[i]);
- }
- };
-
- // traps function bind once (useful in destructuring)
- var bind = hyperHTML.bind;
- hyperHTML.bind = function () { return bind.apply(hyperHTML, arguments); };
-
- // returns children or retrieve them in IE/Edge
- var getChildren = WK ?
- function (node) {
- for (var
- child,
- children = [],
- childNodes = node.childNodes,
- j = 0, i = 0, length = childNodes.length;
- i < length; i++
- ) {
- child = childNodes[i];
- if (child.nodeType === ELEMENT_NODE)
- children[j++] = child;
- }
- return children;
- } :
- function (node) { return node.children; };
-
- // return the correct node walking through a path
- // fixes IE/Edge issues with attributes and children (fixes old WebKit too)
- var getNode = IE || WK ?
- function (parentNode, path) {
- for (var name, i = 0, length = path.length; i < length; i++) {
- name = path[i++];
- switch (name) {
- case 'children':
- parentNode = getChildren(parentNode)[path[i]];
- break;
- default:
- parentNode = parentNode[name][path[i]];
- break;
- }
- }
- return parentNode;
- } :
- function (parentNode, path) {
- for (var i = 0, length = path.length; i < length; i++) {
- parentNode = parentNode[path[i++]][path[i]];
- }
- return parentNode;
- };
-
- // fixes IE problems with comments
- if (IE) {
- var IEAttributes;
- var no = new RegExp('([^\\S][a-z]+[a-z0-9_-]*=)([\'"])' + UIDC + '\\2', 'g');
- var comments = function ($0, $1, $2) {
- IEAttributes.push($1.slice(1, -1));
- return $1 + $2 + UID + $2;
- };
- }
-
- // IE/Edge gotcha with comment nodes
- var nextElementSibling = IE ?
- function (node) {
- node = node.nextSibling;
- return node && node.nodeType === ELEMENT_NODE ? node : undefined;
- } :
- function (node) { return node.nextElementSibling; };
-
- var previousElementSibling = IE ?
- function (node) {
- node = node.previousSibling;
- return node && node.nodeType === ELEMENT_NODE ? node : undefined;
- } :
- function (node) { return node.previousElementSibling; };
-
- // [element] = {template, updates};
- var hypers = new $WeakMap;
-
- // [element] = {template, updates};
- var wires = new $WeakMap;
-
- // [template] = {fragment, paths};
- var templates = new $Map;
-
- // internal signal to switch adoption
- var notAdopting = true;
-
- // IE 11 has problems with cloning templates too
- // it "forgets" empty childNodes
- var cloneNode = (function () {
- featureFragment.appendChild(createText(featureFragment, 'g'));
- featureFragment.appendChild(createText(featureFragment, ''));
- return featureFragment.cloneNode(true).childNodes.length === 1 ?
- function (node) {
- for (var
- clone = node.cloneNode(),
- childNodes = node.childNodes || [],
- i = 0, length = childNodes.length;
- i < length; i++
- ) {
- clone.appendChild(cloneNode(childNodes[i]));
- }
- return clone;
- } :
- function (fragment) {
- return fragment.cloneNode(true);
- };
- }());
-
- // ---------------------------------------------
- // Template related utilities
- // ---------------------------------------------
-
- // given a unique template object
- // create, parse, and store retrieved info
- function createTemplate(template) {
- var paths = [];
- var html = template.join(UIDC);
- if (IE) {
- IEAttributes = [];
- html = html.replace(no, comments);
- }
- var fragment = createFragment(this, html);
- var info = {fragment: fragment, paths: paths};
- commentsSeeker(fragment, paths);
- templates.set(template, info);
- return info;
- }
-
- // given a generic node, returns a path capable
- // of retrieving such path back again.
- // TODO: worth passing the index when available ?
- function createPath(node) {
- var path = [];
- var parentNode;
- switch(node.nodeType) {
- case ELEMENT_NODE:
- case DOCUMENT_FRAGMENT_NODE:
- parentNode = node;
- break;
- case TEXT_NODE:
- case COMMENT_NODE:
- parentNode = node.parentNode;
- path.unshift(
- 'childNodes',
- path.indexOf.call(parentNode.childNodes, node)
- );
- break;
- case ATTRIBUTE_NODE:
- default: // jsdom here does not provide a nodeType 2 ...
- parentNode = node.ownerElement;
- path.unshift('attributes', node.name);
- break;
- }
- for (
- node = parentNode;
- parentNode = parentNode.parentNode;
- node = parentNode
- ) {
- path.unshift('children', path.indexOf.call(getChildren(parentNode), node));
- }
- return path;
- }
-
- // given a root node and a list of paths
- // creates an array of updates to invoke
- // whenever the next interpolation happens
- function createUpdates(fragment, paths) {
- for (var
- info, target,
- updates = [],
- removeAttributes = [],
- i = 0, length = paths.length;
- i < length; i++
- ) {
- info = paths[i];
- target = getNode(fragment, info.path);
- if (target.nodeType === DOCUMENT_FRAGMENT_NODE) {
- removeNodeList(target.childNodes, 0);
- target = this;
- }
- updates[i] = setContent(info.type, target, removeAttributes, []);
- }
- removeAttributeList(removeAttributes);
- return updates;
- }
-
- // like createUpdates but for nodes with already a content
- function discoverUpdates(fragment, paths) {
- for (var
- info, childNodes,
- updates = [],
- removeAttributes = [],
- i = 0, length = paths.length;
- i < length; i++
- ) {
- childNodes = [];
- info = paths[i];
- updates[i] = setContent(
- info.type,
- discoverNode(this, fragment, info, childNodes),
- removeAttributes,
- childNodes
- );
- }
- removeAttributeList(removeAttributes);
- return updates;
- }
-
- // invokes each update function passing interpolated value
- function update() {
- for (var i = 1, length = arguments.length; i < length; i++) {
- this[i - 1](arguments[i]);
- }
- }
-
- // create a template, if unknown
- // upgrade a node to use such template for future updates
- function upgrade(template) {
- if (FF) template = unique(template);
- var updates;
- var info = templates.get(template) ||
- createTemplate.call(this, template);
- if (notAdopting) {
- var fragment = cloneNode(info.fragment);
- updates = createUpdates.call(this, fragment, info.paths);
- resetAndPopulate(this, fragment);
- } else {
- updates = discoverUpdates.call(this, info.fragment, info.paths);
- }
- return {template: template, updates: updates};
- }
-
- // ---------------------------------------------
- // Wires
- // ---------------------------------------------
-
- // create a new wire for generic DOM content
- function wireContent(type) {
- var adopter, content, container, fragment, render, setup, template;
-
- function before(document) {
- fragment = createDocumentFragment(document);
- container = type === 'svg' ?
- document.createElementNS(SVG_NAMESPACE, 'svg') :
- fragment;
- render = hyperHTML.bind(container);
- }
-
- function after() {
- if (setup) {
- setup = false;
- if (type === 'svg') {
- appendNodes(fragment, slice.call(container.childNodes));
- }
- content = createContent(fragment);
- }
- return content;
- }
-
- return type === 'adopt' ?
- function adopt(statics) {
- var args = arguments;
- if (FF) statics = unique(statics);
- if (template !== statics) {
- setup = true;
- template = statics;
- adopter = function (parentNode, children, i) {
- if (setup) {
- if (i < children.length) {
- container = children[i];
- fragment = {
- ownerDocument: container.ownerDocument,
- childNodes: [container],
- children: [container]
- };
- render = hyperHTML.adopt(fragment);
- } else {
- if (OWNER_SVG_ELEMENT in parentNode) type = 'svg';
- before(parentNode.ownerDocument);
- }
- }
- render.apply(null, args);
- return after();
- };
- }
- return adopter;
- } :
- function update(statics) {
- if (FF) statics = unique(statics);
- if (template !== statics) {
- setup = true;
- template = statics;
- before(hyperHTML.document);
- }
- render.apply(null, arguments);
- return after();
- };
- }
-
- // setup a weak reference if needed and return a wire by ID
- function wireWeakly(obj, type) {
- var wire = wires.get(obj);
- var i = type.indexOf(':');
- var id = type;
- if (-1 < i) {
- id = type.slice(i + 1);
- type = type.slice(0, i) || 'html';
- }
- if (!wire) {
- wire = {};
- wires.set(obj, wire);
- }
- return wire[id] || (wire[id] = wireContent(type));
- }
-
- // ---------------------------------------------
- // โก๏ธ ๏ธ๏ธThe End โฐ
- // ---------------------------------------------
- return hyperHTML;
-
-}(document));
-
-// umd.KISS
-try { module.exports = hyperHTML; } catch(o_O) {}
- |
| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| hyperhtml.js | -100% | -506/506 | -100% | -277/277 | -100% | -78/78 | -100% | -495/495 | -
| 1 -2 | 1ร -28ร | var hyperHTML=function(){"use strict";/*! (C) 2017 Andrea Giammarchi @WebReflection (MIT) */
-function e(e){return C in this&&this[C].s===e?y.apply(this,arguments):b.apply(this,arguments)}function t(e,t){for(var n,r=k?T:x,i=E.call(e.attributes),c=0,a=i.length;c<a;c++)n=i[c],n.value===r&&t.push(o(e,k?e.getAttributeNode(N.shift()):n))}function n(e,o){for(var a,l,u=E.call(e.childNodes),s=u.length,h=0;h<s;h++)switch(a=u[h],a.nodeType){case 1:t(a,o),n(a,o);break;case 8:a.textContent===T&&(1===s?(o.push(r(e)),e.removeChild(a)):!(h<1||1===u[h-1].nodeType)||h+1!==s&&1!==u[h+1].nodeType?(l=e.ownerDocument.createTextNode(""),o.push(c(l)),e.replaceChild(l,a)):o.push(i(a)));break;case 3:"STYLE"===e.nodeName&&a.textContent===x&&o.push(c(e))}}function r(e){return function t(n){switch(typeof n){case"string":e.innerHTML=n;break;case"number":case"boolean":e.textContent=n;break;default:if(Array.isArray(n))Iif(1===n.length)t(n[0]);else Iif("string"==typeof n[0])t(n.join(""));else{var r=l(e.childNodes,n);-1<r&&p(e,n,r)}else s(e,n)}}}function o(e,t){var n,r=t.name,o="on"===r.slice(0,2),i=r in e&&!w.test(r);return i&&e.removeAttribute(r),i?function(t){n!==t&&(n=t,e[r]=o&&"handleEvent"in t?t.handleEvent.bind(t):t)}:function(e){n!==e&&(t.value=n=e)}}function i(e){var t=document.createDocumentFragment(),n=[];return function r(o){var i,c=e.parentNode;switch(typeof o){case"string":case"number":case"boolean":h(n,0),u(t,o),n=E.call(t.childNodes),c.insertBefore(t,e);break;default:Array.isArray(o)?0===o.length?r(o[0]):"string"==typeof o[0]?r(o.join("")):-1<(i=l(n,o))&&(h(n,i),o=o.slice(i),a(t,o),c.insertBefore(t,e),n.push.apply(n,o)):(h(n,0),n=11===o.nodeType?E.call(o.childNodes):[o],c.insertBefore(o,e))}}}function c(e){var t;return function(n){t!==n&&(e.textContent=t=n)}}function a(e,t){for(var n=0,r=t.length;n<r;n++)e.appendChild(t[n])}function l(e,t){Iif(e===t)return-1;for(var n=0,r=e.length,o=t.length;n<r;){if(!(n<o&&e[n]===t[n]))return n;n++}return n===o?-1:n}function u(e,t){var n=k&&/^[^\S]*?<(t(?:head|body|foot|r|d|h))/i.test(t),r=e.ownerDocument.createElement("template");r.innerHTML=n?"<table>"+t+"</table>":t,n&&(r={childNodes:r.querySelectorAll(RegExp.$1)}),a(e,E.call((r.content||r).childNodes))}function s(e,t){switch(t.nodeType){case 1:var n=e.childNodes;if(0<n.length&&n[0]===t){h(n,1);break}d(e,t);break;case 11:-1<l(e.childNodes,t.childNodes)&&d(e,t);break;case 3:e.textContent=t.textContent}}function h(e,t){for(var n,r=e.length;t<r--;)n=e[r],n.parentNode.removeChild(n)}function d(e,t){e.textContent="",e.appendChild(t)}function f(e){for(var t,n=[],r=e.childNodes,o=0,i=r.length;o<i;o++)t=r[o],(1===t.nodeType||0<D.call(t.textContent).length)&&n.push(t);return i=n.length,i<2?(t=i<1?e:n[0],function(){return t}):function(){return n}}function p(e,t,n){var r=e.ownerDocument.createDocumentFragment();0<n?(h(e.childNodes,n),a(r,t.slice(n)),e.appendChild(r)):(a(r,t),d(e,r))}function g(t){var n,r,o,i,c,l;return function(u){return l!==u&&(c=!0,l=u,o=document.createDocumentFragment(),r="svg"===t?document.createElementNS("http://www.w3.org/2000/svg","svg"):o,i=e.bind(r)),i.apply(null,arguments),c&&(c=!1,"svg"===t&&a(o,E.call(r.childNodes)),n=f(o)),n()}}function m(e,t,n){return e[t]||(e[t]=g(n))}function v(e,t){var n=L.get(e)||(L.set(e,n={}),n),r=t.indexOf(":");return r<0?m(n,t,t):m(n,t.slice(r+1),t.slice(0,r)||"html")}function y(){for(var e=1,t=arguments.length,n=this[C].u;e<t;e++)n[e-1](arguments[e]);return this}function b(e){var t=[],r=e.join(x);return k?(N=[],u(this,r.replace(M,A))):1===this.nodeType?this.innerHTML=r:u(this,r),n(this,t),this[C]={s:e,u:t},y.apply(this,arguments)}e.wire=function(e,t){return arguments.length<1?g("html"):null==e?g(t||"html"):v(e,t||"html")};var N,w=/^style$/i,C="_hyper_html: ",T=C+(Math.random()*new Date|0)+";",x="<!--"+T+"-->",k="documentMode"in document,M=k&&new RegExp("([^\\S][a-z]+[a-z0-9_-]*=)(['\"])"+x+"\\2","g"),A=k&&function(e,t,n){return N.push(t.slice(1,-1)),t+n+T+n},D=C.trim||function(){return this.replace(/^\s+|\s+$/g,"")},E=[].slice,L=typeof WeakMap==typeof L?{get:function(e){return e[C]},set:function(e,t){Object.defineProperty(e,C,{configurable:!0,value:t})}}:new WeakMap;return e}();try{module.exports=hyperHTML}catch(e){} |
| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| hyperHTML/ | -100% | -506/506 | -100% | -277/277 | -100% | -78/78 | -100% | -495/495 | -
${{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)`${{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 = '๐ฑ
++ powered by hyper(HTML) +
+c
"]); + + _templateObject124 = function _templateObject124() { + return data; + }; + + return data; + } + + function _templateObject123() { + var data = _taggedTemplateLiteral(["a
b
"]); + + _templateObject123 = function _templateObject123() { + return data; + }; + + return data; + } + + function _templateObject122() { + var data = _taggedTemplateLiteral(["", ""]); + + _templateObject122 = function _templateObject122() { + return data; + }; + + return data; + } + + function _templateObject121() { + var data = _taggedTemplateLiteral(["", ""]); + + _templateObject121 = function _templateObject121() { + return data; + }; + + return data; + } + + function _templateObject120() { + var data = _taggedTemplateLiteral(["\nI'm grand child
"]); + + _templateObject115 = function _templateObject115() { + return data; + }; + + return data; + } + + function _templateObject114() { + var data = _taggedTemplateLiteral(["\n "]); + + _templateObject114 = function _templateObject114() { + return data; + }; + + return data; + } + + function _templateObject113() { + var data = _taggedTemplateLiteral(["\n "]); + + _templateObject113 = function _templateObject113() { + return data; + }; + + return data; + } + + function _templateObject112() { + var data = _taggedTemplateLiteral(["\n "]); + + _templateObject112 = function _templateObject112() { + return data; + }; + + return data; + } + + function _templateObject111() { + var data = _taggedTemplateLiteral(["\n "]); + + _templateObject111 = function _templateObject111() { + return data; + }; + + return data; + } + + function _templateObject110() { + var data = _taggedTemplateLiteral(["\nhello
"]); + + _templateObject106 = function _templateObject106() { + return data; + }; + + return data; + } + + function _templateObject105() { + var data = _taggedTemplateLiteral(["hello
"]); + + _templateObject102 = function _templateObject102() { + return data; + }; + + return data; + } + + function _templateObject101() { + var data = _taggedTemplateLiteral(["", ""]); + + _templateObject101 = function _templateObject101() { + return data; + }; + + return data; + } + + function _templateObject100() { + var data = _taggedTemplateLiteral(["", ""]); + + _templateObject100 = function _templateObject100() { + return data; + }; + + return data; + } + + function _templateObject99() { + var data = _taggedTemplateLiteral(["", ""]); + + _templateObject99 = function _templateObject99() { + return data; + }; + + return data; + } + + function _templateObject98() { + var data = _taggedTemplateLiteral(["\nhello
"]); + + _templateObject98 = function _templateObject98() { + return data; + }; + + return data; + } + + function _templateObject97() { + var data = _taggedTemplateLiteral(["\na", "c
"]); + + _templateObject93 = function _templateObject93() { + return data; + }; + + return data; + } + + function _templateObject92() { + var data = _taggedTemplateLiteral(["abc"]); + + _templateObject92 = function _templateObject92() { + return data; + }; + + return data; + } + + function _templateObject91() { + var data = _taggedTemplateLiteral(["a", "c
"]); + + _templateObject91 = function _templateObject91() { + return data; + }; + + return data; + } + + function _templateObject90() { + var data = _taggedTemplateLiteral(["abc"]); + + _templateObject90 = function _templateObject90() { + return data; + }; + + return data; + } + + function _templateObject89() { + var data = _taggedTemplateLiteral(["a", "c"]); + + _templateObject89 = function _templateObject89() { + return data; + }; + + return data; + } + + function _templateObject88() { + var data = _taggedTemplateLiteral(["abc"]); + + _templateObject88 = function _templateObject88() { + return data; + }; + + return data; + } + + function _templateObject87() { + var data = _taggedTemplateLiteral(["a", "c
"]); + + _templateObject87 = function _templateObject87() { + return data; + }; + + return data; + } + + function _templateObject86() { + var data = _taggedTemplateLiteral(["abc"]); + + _templateObject86 = function _templateObject86() { + return data; + }; + + return data; + } + + function _templateObject85() { + var data = _taggedTemplateLiteral(["", "
"]); + + _templateObject85 = function _templateObject85() { + return data; + }; + + return data; + } + + function _templateObject84() { + var data = _taggedTemplateLiteral(["", "
"]); + + _templateObject84 = function _templateObject84() { + return data; + }; + + return data; + } + + function _templateObject83() { + var data = _taggedTemplateLiteral(["", "
"]); + + _templateObject83 = function _templateObject83() { + return data; + }; + + return data; + } + + function _templateObject82() { + var data = _taggedTemplateLiteral(["a=", ""]); + + _templateObject82 = function _templateObject82() { + return data; + }; + + return data; + } + + function _templateObject81() { + var data = _taggedTemplateLiteral(["", "
"]); + + _templateObject81 = function _templateObject81() { + return data; + }; + + return data; + } + + function _templateObject80() { + var data = _taggedTemplateLiteral([""]); + + _templateObject80 = function _templateObject80() { + return data; + }; + + return data; + } + + function _templateObject79() { + var data = _taggedTemplateLiteral(["any content
"]); + + _templateObject79 = function _templateObject79() { + return data; + }; + + return data; + } + + function _templateObject78() { + var data = _taggedTemplateLiteral(["a=", ""]); + + _templateObject78 = function _templateObject78() { + return data; + }; + + return data; + } + + function _templateObject77() { + var data = _taggedTemplateLiteral(["", "
"]); + + _templateObject77 = function _templateObject77() { + return data; + }; + + return data; + } + + function _templateObject76() { + var data = _taggedTemplateLiteral(["a=", ""]); + + _templateObject76 = function _templateObject76() { + return data; + }; + + return data; + } + + function _templateObject75() { + var data = _taggedTemplateLiteral(["a ", ""]); + + _templateObject75 = function _templateObject75() { + return data; + }; + + return data; + } + + function _templateObject74() { + var data = _taggedTemplateLiteral(["a ", ""]); + + _templateObject74 = function _templateObject74() { + return data; + }; + + return data; + } + + function _templateObject73() { + var data = _taggedTemplateLiteral(["a ", ""]); + + _templateObject73 = function _templateObject73() { + return data; + }; + + return data; + } + + function _templateObject72() { + var data = _taggedTemplateLiteral(["a ", ""]); + + _templateObject72 = function _templateObject72() { + return data; + }; + + return data; + } + + function _templateObject71() { + var data = _taggedTemplateLiteral(["a ", ""]); + + _templateObject71 = function _templateObject71() { + return data; + }; + + return data; + } + + function _templateObject70() { + var data = _taggedTemplateLiteral(["", "
"]); + + _templateObject70 = function _templateObject70() { + return data; + }; + + return data; + } + + function _templateObject69() { + var data = _taggedTemplateLiteral(["", "
"]); + + _templateObject69 = function _templateObject69() { + return data; + }; + + return data; + } + + function _templateObject68() { + var data = _taggedTemplateLiteral(["", "
"]); + + _templateObject68 = function _templateObject68() { + return data; + }; + + return data; + } + + function _templateObject67() { + var data = _taggedTemplateLiteral([""]); + + _templateObject67 = function _templateObject67() { + return data; + }; + + return data; + } + + function _templateObject66() { + var data = _taggedTemplateLiteral([""]); + + _templateObject66 = function _templateObject66() { + return data; + }; + + return data; + } + + function _templateObject65() { + var data = _taggedTemplateLiteral([""]); + + _templateObject65 = function _templateObject65() { + return data; + }; + + return data; + } + + function _templateObject64() { + var data = _taggedTemplateLiteral(["\n ", ""]); + + _templateObject64 = function _templateObject64() { + return data; + }; + + return data; + } + + function _templateObject63() { + var data = _taggedTemplateLiteral(["\n ", ""]); + + _templateObject63 = function _templateObject63() { + return data; + }; + + return data; + } + + function _templateObject62() { + var data = _taggedTemplateLiteral(["", ""]); + + _templateObject62 = function _templateObject62() { + return data; + }; + + return data; + } + + function _templateObject61() { + var data = _taggedTemplateLiteral(["\n", "
"]); + + _templateObject45 = function _templateObject45() { + return data; + }; + + return data; + } + + function _templateObject44() { + var data = _taggedTemplateLiteral([""]); + + _templateObject44 = function _templateObject44() { + return data; + }; + + return data; + } + + function _templateObject43() { + var data = _taggedTemplateLiteral([""]); + + _templateObject43 = function _templateObject43() { + return data; + }; + + return data; + } + + function _templateObject42() { + var data = _taggedTemplateLiteral(["", "
", "1
\n "]); + + _templateObject11 = function _templateObject11() { + return data; + }; + + return data; + } + + function _templateObject10() { + var data = _taggedTemplateLiteral(["\n1
\n "]); + + _templateObject10 = function _templateObject10() { + return data; + }; + + return data; + } + + function _templateObject9() { + var data = _taggedTemplateLiteral(["OK
"]); + + _templateObject9 = function _templateObject9() { + return data; + }; + + return data; + } + + function _templateObject8() { + var data = _taggedTemplateLiteral(["\n1
\n2
\n3
\n "]); + + _templateObject8 = function _templateObject8() { + return data; + }; + + return data; + } + + function _templateObject7() { + var data = _taggedTemplateLiteral(["\n1
\n2
\n "]); + + _templateObject7 = function _templateObject7() { + return data; + }; + + return data; + } + + function _templateObject6() { + var data = _taggedTemplateLiteral(["how cool"]); + + _templateObject6 = function _templateObject6() { + return data; + }; + + return data; + } + + function _templateObject5() { + var data = _taggedTemplateLiteral(["", "
"]); + + _templateObject5 = function _templateObject5() { + return data; + }; + + return data; + } + + function _templateObject4() { + var data = _taggedTemplateLiteral(["click"]); + + _templateObject4 = function _templateObject4() { + return data; + }; + + return data; + } + + function _templateObject3() { + var data = _taggedTemplateLiteral(["", "
"]); + + _templateObject3 = function _templateObject3() { + return data; + }; + + return data; + } + + function _templateObject2() { + var data = _taggedTemplateLiteral(["", " world
"]); + + _templateObject2 = function _templateObject2() { + return data; + }; + + return data; + } + + function _templateObject() { + var data = _taggedTemplateLiteral(["\n\n Time: ", "\n
\n "]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; + } + + tressa.title('HyperHTML'); + tressa.assert(typeof hyperHTML === 'function', 'hyperHTML is a function'); + + try { + tressa.log(''); + } catch (e) { + tressa.log = console.log.bind(console); + } + + tressa.async(function (done) { + tressa.log('## injecting text and attributes'); + var i = 0; + var div = document.body.appendChild(document.createElement('div')); + var render = hyperHTML.bind(div); + + function update(i) { + return render(_templateObject(), i, // IE Edge mobile did something funny here + // as template string returned xxx.xxxx + // but as innerHTML returned xxx.xx + (Math.random() * new Date()).toFixed(2)); + } + + function compare(html) { + return /^\s*\s*Time: \d+\.\d+<[^>]+?>\s*<\/p>\s*$/i.test(html); + } + + var html = update(i++).innerHTML; + var p = div.querySelector('p'); + var attr = p.attributes[0]; + tressa.assert(compare(html), 'correct HTML'); + tressa.assert(html === div.innerHTML, 'correctly returned'); + setTimeout(function () { + tressa.log('## updating same nodes'); + var html = update(i++).innerHTML; + tressa.assert(compare(html), 'correct HTML update'); + tressa.assert(html === div.innerHTML, 'update applied'); + tressa.assert(p === div.querySelector('p'), 'no node was changed'); + tressa.assert(attr === p.attributes[0], 'no attribute was changed'); + done(); + }); + }).then(function () { + return tressa.async(function (done) { + tressa.log('## perf: same virtual text twice'); + var div = document.body.appendChild(document.createElement('div')); + var render = hyperHTML.bind(div); + var html = (update('hello').innerHTML, update('hello').innerHTML); + + function update(text) { + return render(_templateObject2(), text); + } + + tressa.assert(update('hello').innerHTML === update('hello').innerHTML, 'same text'); + done(div); + }); + }).then(function () { + return tressa.async(function (done) { + tressa.log('## injecting HTML'); + var div = document.body.appendChild(document.createElement('div')); + var render = hyperHTML.bind(div); + var html = update('hello').innerHTML; + + function update(text) { + return render(_templateObject3(), ['' + text + '']); + } + + function compare(html) { + return /^
\w+<\/strong><\/p>$/i.test(html);
+ }
+
+ tressa.assert(compare(html), 'HTML injected');
+ tressa.assert(html === div.innerHTML, 'HTML returned');
+ done(div);
+ });
+ }).then(function (div) {
+ return tressa.async(function (done) {
+ tressa.log('## function attributes');
+ var render = hyperHTML.bind(div);
+ var times = 0;
+ update(function (e) {
+ console.log(e.type);
+
+ if (++times > 1) {
+ return tressa.assert(false, 'events are broken');
+ }
+
+ if (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+ tressa.assert(true, 'onclick invoked');
+ tressa.assert(!a.hasAttribute('onclick'), 'no attribute');
+ update(null);
+ e = document.createEvent('Event');
+ e.initEvent('click', false, false);
+ a.dispatchEvent(e);
+ done(div);
+ });
+
+ function update(click) {
+ // also test case-insensitive builtin events
+ return render(_templateObject4(), click);
+ }
+
+ var a = div.querySelector('a');
+ var e = document.createEvent('Event');
+ e.initEvent('click', false, false);
+ a.dispatchEvent(e);
+ });
+ }).then(function (div) {
+ return tressa.async(function (done) {
+ tressa.log('## changing template');
+ var render = hyperHTML.bind(div);
+ var html = update('hello').innerHTML;
+
+ function update(text) {
+ return render(_templateObject5(), {
+ any: ['' + text + '']
+ });
+ }
+
+ function compare(html) {
+ return /^ \w+<\/em><\/p>$/i.test(html);
+ }
+
+ tressa.assert(compare(html), 'new HTML injected');
+ tressa.assert(html === div.innerHTML, 'new HTML returned');
+ done(div);
+ });
+ }).then(function () {
+ return tressa.async(function (done) {
+ tressa.log('## custom events');
+ var render = hyperHTML.bind(document.createElement('p'));
+ var e = document.createEvent('Event');
+ e.initEvent('Custom-EVENT', true, true);
+ render(_templateObject6(), function (e) {
+ tressa.assert(e.type === 'Custom-EVENT', 'event triggered');
+ done();
+ }).firstElementChild.dispatchEvent(e);
+ });
+ }).then(function () {
+ tressa.log('## multi wire removal');
+ var render = hyperHTML.wire();
+
+ var update = function update() {
+ return render(_templateObject7());
+ };
+
+ update().remove();
+
+ update = function update() {
+ return render(_templateObject8());
+ };
+
+ update().remove();
+ tressa.assert(true, 'OK');
+ }).then(function () {
+ tressa.log('## the attribute id');
+ var div = document.createElement('div');
+ hyperHTML.bind(div)(_templateObject9(), 'id');
+ tressa.assert(div.firstChild.id === 'id', 'the id is preserved');
+ tressa.assert(div.firstChild.className === 'class', 'the class is preserved');
+ }).then(function () {
+ return tressa.async(function (done) {
+ tressa.log('## hyperHTML.wire()');
+ var render = hyperHTML.wire();
+
+ var update = function update() {
+ return render(_templateObject10());
+ };
+
+ var node = update();
+ tressa.assert(node.nodeName.toLowerCase() === 'p', 'correct node');
+ var same = update();
+ tressa.assert(node === same, 'same node returned');
+ render = hyperHTML.wire(null);
+
+ update = function update() {
+ return render(_templateObject11());
+ };
+
+ node = update().childNodes;
+ tressa.assert(Array.isArray(node), 'list of nodes');
+ same = update().childNodes;
+ tressa.assert(node.length === same.length && node[0] && node.every(function (n, i) {
+ return same[i] === n;
+ }), 'same list returned');
+ var div = document.createElement('div');
+ render = hyperHTML.bind(div);
+ render(_templateObject12(), node);
+ same = div.childNodes;
+ tressa.assert(node[0] && node.every(function (n, i) {
+ return same[i] === n;
+ }), 'same list applied');
+
+ function returnSame() {
+ return render(_templateObject13());
+ }
+
+ render = hyperHTML.wire();
+ tressa.assert(returnSame() === returnSame(), 'template sensible wire');
+ done();
+ });
+ }).then(function () {
+ return tressa.async(function (done) {
+ tressa.log('## hyperHTML.wire(object)');
+ var point = {
+ x: 1,
+ y: 2
+ };
+
+ function update() {
+ return hyperHTML.wire(point)(_templateObject14(), "\n position: absolute;\n left: ".concat(point.x, "px;\n top: ").concat(point.y, "px;\n "));
+ }
+
+ try {
+ update();
+ } catch (e) {
+ console.error(e);
+ }
+
+ tressa.assert(update() === update(), 'same output');
+ tressa.assert(hyperHTML.wire(point) === hyperHTML.wire(point), 'same wire');
+ done();
+ });
+ }).then(function () {
+ if (typeof MutationObserver === 'undefined') return;
+ return tressa.async(function (done) {
+ tressa.log('## preserve first child where first child is the same as incoming');
+ var div = document.body.appendChild(document.createElement('div'));
+ var render = hyperHTML.bind(div);
+ var observer = new MutationObserver(function (mutations) {
+ for (var i = 0, len = mutations.length; i < len; i++) {
+ trackMutations(mutations[i].addedNodes, 'added');
+ trackMutations(mutations[i].removedNodes, 'removed');
+ }
+ });
+ observer.observe(div, {
+ childList: true,
+ subtree: true
+ });
+ var counters = [];
+
+ function trackMutations(nodes, countKey) {
+ for (var i = 0, len = nodes.length, counter, key; i < len; i++) {
+ if (nodes[i] && nodes[i].getAttribute && nodes[i].getAttribute('data-test')) {
+ key = nodes[i].getAttribute('data-test');
+ counter = counters[key] || (counters[key] = {
+ added: 0,
+ removed: 0
+ });
+ counter[countKey]++;
+ }
+
+ if (nodes[i].childNodes.length > 0) {
+ trackMutations(nodes[i].childNodes, countKey);
+ }
+ }
+ }
+
+ var listItems = [];
+
+ function update(items) {
+ render(_templateObject15(), items.map(function (item, i) {
+ return hyperHTML.wire(listItems[i] || (listItems[i] = {}))(_templateObject16(), i, function () {
+ return item.text;
+ });
+ }));
+ }
+
+ update([]);
+ setTimeout(function () {
+ update([{
+ text: 'test1'
+ }]);
+ }, 10);
+ setTimeout(function () {
+ update([{
+ text: 'test1'
+ }, {
+ text: 'test2'
+ }]);
+ }, 20);
+ setTimeout(function () {
+ update([{
+ text: 'test1'
+ }]);
+ }, 30);
+ setTimeout(function () {
+ if (counters.length) {
+ tressa.assert(counters[0].added === 1, 'first item added only once');
+ tressa.assert(counters[0].removed === 0, 'first item never removed');
+ }
+
+ done();
+ }, 100);
+ });
+ }).then(function () {
+ tressa.log('## rendering one node');
+ var div = document.createElement('div');
+ var br = document.createElement('br');
+ var hr = document.createElement('hr');
+ hyperHTML.bind(div)(_templateObject17(), br);
+ tressa.assert(div.firstChild.firstChild === br, 'one child is added');
+ hyperHTML.bind(div)(_templateObject18(), hr);
+ tressa.assert(div.firstChild.firstChild === hr, 'one child is changed');
+ hyperHTML.bind(div)(_templateObject19(), [hr, br]);
+ tressa.assert(div.firstChild.childNodes[0] === hr && div.firstChild.childNodes[1] === br, 'more children are added');
+ hyperHTML.bind(div)(_templateObject20(), [br, hr]);
+ tressa.assert(div.firstChild.childNodes[0] === br && div.firstChild.childNodes[1] === hr, 'children can be swapped');
+ hyperHTML.bind(div)(_templateObject21(), br);
+ tressa.assert(div.firstChild.firstChild === br, 'one child is kept');
+ hyperHTML.bind(div)(_templateObject22(), []);
+ tressa.assert(/<\/div>/.test(div.innerHTML), 'dropped all children');
+ }).then(function () {
+ tressa.log('## wire by id');
+ var ref = {};
+ var wires = {
+ a: function a() {
+ return hyperHTML.wire(ref, ':a')(_templateObject23());
+ },
+ p: function p() {
+ return hyperHTML.wire(ref, ':p')(_templateObject24());
+ }
+ };
+ tressa.assert(wires.a().nodeName.toLowerCase() === 'a', ' is correct');
+ tressa.assert(wires.p().nodeName.toLowerCase() === 'p', '