-A **Fast & Light Virtual DOM Alternative** available for [Node.js](https://viperhtml.js.org/viper.html) and [NativeScript](https://viperhtml.js.org/native.html) too.
+A **Fast & Light Virtual DOM Alternative**.
- - -
@@ -15,9 +29,29 @@ A **Fast & Light Virtual DOM Alternative** available for [Node.js](https://viper
- - -
+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).
+
+
+## ยตhtml
+
+The latest, smallest, iteration of all best concept from this library since 2017, have been packaged in _~2.5K_. If it's extreme minimalism and great _DX_ that you are after, check [uhtml](https://github.com/WebReflection/uhtml#readme) out.
+
+
+## hypersimple
+
+If you've just started with template literals based projects and you like components, or you'd like to understand what's _hyperHTML_ capable of, give [hypersimple](https://github.com/WebReflection/hypersimple#readme) a try ๐
+
+
+## lighterhtml ๐ก
+
+This little brother is "_showing off_" these days, claiming better performance and unprecedented ease of use.
+
+[GitHub Repository](https://github.com/WebReflection/lighterhtml)
+
+
## Neverland ๐๐ฆ
-If you like React hooks concept, don't miss this little wrap tha adds 0._something_ overhead to the already lightweight hyperHTML, bringing in very similar concepts.
+If you like React hooks concept, don't miss this little wrap that adds 0._something_ overhead to the already lightweight hyperHTML, bringing in very similar concepts.
[Blog Post](https://medium.com/@WebReflection/neverland-the-hyperhtmls-hook-a0c3e11324bb)
@@ -34,6 +68,8 @@ You can require or import _hyperHTML_ with any bundler and in different ways.
If requiring or importing from `"hyperhtml"` doesn't work, try requiring from `"hyperhtml/cjs"` for CommonJS friendly bundlers (WebPack), or `"hyperhtml/esm"` for ESM compatible bundlers (Rollup).
+See [HELPERS.md](./HELPERS.md) for a list of additional tools which can be helpful for building hyperHTML based web applications.
+
- - -
## Sponsors
@@ -55,21 +91,12 @@ This project exists thanks to all the people who contribute. [[Contribute](CONTR
- - -
-### Seamlessly Isomorphic
-No matter if you use ESM or CommonJS, you can use [hypermorphic](https://github.com/WebReflection/hypermorphic#hypermorphic-)
-to load same features on both client and server.
+### 2.34 Highlights
-```js
-// ESM example (assuming bundlers/ESM loaders in place)
-import {bind, wire} from 'hypermorphic';
-
-// CommonJS example
-const {bind, wire} = require('hypermorphic');
-```
-
-- - -
+ * 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.
### V2.5 Highlights
+
* `some ${'content'}
` -// hyperHTML finds only once per template literal, -// hence once per entire application life-cycle, -// all nodes that are related to interpolations. -// These nodes are stored as indexes used to retrieve, -// once per upgrade, nodes that will change on each future update. -// A path example is [2, 0, 1] representing the operation: -// node.childNodes[2].childNodes[0].childNodes[1] -// Attributes are addressed via their owner node and their name. -const createPath = node => { - const path = []; - let parentNode; - switch (node.nodeType) { - case ELEMENT_NODE: - case DOCUMENT_FRAGMENT_NODE: - parentNode = node; - break; - case COMMENT_NODE: - parentNode = node.parentNode; - prepend(path, parentNode, node); - break; - default: - parentNode = node.ownerElement; - break; - } - for ( - node = parentNode; - (parentNode = parentNode.parentNode); - node = parentNode - ) { - prepend(path, parentNode, node); - } - return path; -}; - -const prepend = (path, parent, node) => { - path.unshift(path.indexOf.call(parent.childNodes, node)); -}; - -Object.defineProperty(exports, '__esModule', {value: true}).default = { - create: (type, node, name) => ({type, name, node, path: createPath(node)}), - find: (node, path) => { - const length = path.length; - for (let i = 0; i < length; i++) { - node = node.childNodes[path[i]]; - } - return node; - } -} diff --git a/cjs/objects/Style.js b/cjs/objects/Style.js deleted file mode 100644 index a11a1d64..00000000 --- a/cjs/objects/Style.js +++ /dev/null @@ -1,82 +0,0 @@ -'use strict'; -// from https://github.com/developit/preact/blob/33fc697ac11762a1cb6e71e9847670d047af7ce5/src/constants.js -const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i; - -// style is handled as both string and object -// even if the target is an SVG element (consistency) -Object.defineProperty(exports, '__esModule', {value: true}).default = (node, original, isSVG) => { - if (isSVG) { - const style = original.cloneNode(true); - style.value = ''; - node.setAttributeNode(style); - return update(style, isSVG); - } - return update(node.style, isSVG); -}; - -// the update takes care or changing/replacing -// only properties that are different or -// in case of string, the whole node -const update = (style, isSVG) => { - let oldType, oldValue; - return newValue => { - switch (typeof newValue) { - case 'object': - if (newValue) { - if (oldType === 'object') { - if (!isSVG) { - if (oldValue !== newValue) { - for (const key in oldValue) { - if (!(key in newValue)) { - style[key] = ''; - } - } - } - } - } else { - if (isSVG) - style.value = ''; - else - style.cssText = ''; - } - const info = isSVG ? {} : style; - for (const key in newValue) { - const value = newValue[key]; - const styleValue = typeof value === 'number' && - !IS_NON_DIMENSIONAL.test(key) ? - (value + 'px') : value; - if (/^--/.test(key)) - info.setProperty(key, styleValue); - else - info[key] = styleValue; - } - oldType = 'object'; - if (isSVG) - style.value = toStyle((oldValue = info)); - else - oldValue = newValue; - break; - } - default: - if (oldValue != newValue) { - oldType = 'string'; - oldValue = newValue; - if (isSVG) - style.value = newValue || ''; - else - style.cssText = newValue || ''; - } - break; - } - }; -}; - -const hyphen = /([^A-Z])([A-Z]+)/g; -const ized = ($0, $1, $2) => $1 + '-' + $2.toLowerCase(); -const toStyle = object => { - const css = []; - for (const key in object) { - css.push(key.replace(hyphen, ized), ':', object[key], ';'); - } - return css.join(''); -}; \ No newline at end of file diff --git a/cjs/objects/Updates.js b/cjs/objects/Updates.js index f4a55cea..0df2e324 100644 --- a/cjs/objects/Updates.js +++ b/cjs/objects/Updates.js @@ -1,196 +1,77 @@ '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, COMMENT_NODE, DOCUMENT_FRAGMENT_NODE, ELEMENT_NODE, TEXT_NODE, OWNER_SVG_ELEMENT, SHOULD_USE_TEXT_CONTENT, G, UID, UIDC + CONNECTED, DISCONNECTED, DOCUMENT_FRAGMENT_NODE, OWNER_SVG_ELEMENT } = require('../shared/constants.js'); -const Component = (m => m.__esModule ? m.default : m)(require('../classes/Component.js')); -const Wire = (m => m.__esModule ? m.default : m)(require('../classes/Wire.js')); -const Path = (m => m.__esModule ? m.default : m)(require('./Path.js')); -const Style = (m => m.__esModule ? m.default : m)(require('./Style.js')); -const Intent = (m => m.__esModule ? m.default : m)(require('./Intent.js')); -const domdiff = (m => m.__esModule ? m.default : m)(require('../3rd/domdiff.js')); -// see /^script$/i.test(nodeName) bit down here -// import { create as createElement, text } from '../shared/easy-dom.js'; -const { text } = require('../shared/easy-dom.js'); -const { Event, WeakSet, isArray, trim } = require('../shared/poorlyfills.js'); -const { createFragment, slice } = require('../shared/utils.js'); -const disconnected = (m => m.__esModule ? m.default : m)(require('../3rd/disconnected.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 { document } = G; -const observe = disconnected({Event, WeakSet}); +const observe = disconnected({Event: CustomEvent, WeakSet}); -// a basic dictionary used to filter already cached attributes -// while looking for special hyperHTML values. -function Cache() {} -Cache.prototype = Object.create(null); +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) => { - return 'ELEMENT_NODE' in item ? - item : - (item.constructor === Wire ? + 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 */ - ((1 / i) < 0 ? - (i ? item.remove() : item.last) : - (i ? item.valueOf(true) : item.first)) : - asNode(item.render(), i)); + 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 || -value instanceof Wire || -value instanceof Component; - -// updates are created once per context upgrade -// within the main render function (../hyper/render.js) -// These are an Array of callbacks to invoke passing -// each interpolation value. -// Updates can be related to any kind of content, -// attributes, or special text-only cases such + - +\n Time: ', '\n
\n '], ['\n\n Time: ', '\n
\n ']), - _templateObject2 = _taggedTemplateLiteral(['', ' world
'], ['', ' world
']), - _templateObject3 = _taggedTemplateLiteral(['', '
'], ['', '
']), - _templateObject4 = _taggedTemplateLiteral(['click'], ['click']), - _templateObject5 = _taggedTemplateLiteral(['how cool'], ['how cool']), - _templateObject6 = _taggedTemplateLiteral(['\n1
\n2
\n '], ['\n1
\n2
\n ']), - _templateObject7 = _taggedTemplateLiteral(['\n1
\n2
\n3
\n '], ['\n1
\n2
\n3
\n ']), - _templateObject8 = _taggedTemplateLiteral(['OK
'], ['OK
']), - _templateObject9 = _taggedTemplateLiteral(['\n1
\n '], ['\n1
\n ']), - _templateObject10 = _taggedTemplateLiteral(['\n 0\n1
\n '], ['\n 0\n1
\n ']), - _templateObject11 = _taggedTemplateLiteral(['', ''], ['', '']), - _templateObject12 = _taggedTemplateLiteral(['a'], ['a']), - _templateObject13 = _taggedTemplateLiteral(['\n O'], ['\n O']), - _templateObject14 = _taggedTemplateLiteral(['\n', '
', '', '
', '', '
'], ['', '
']), - _templateObject36 = _taggedTemplateLiteral([''], ['']), - _templateObject37 = _taggedTemplateLiteral([''], ['']), - _templateObject38 = _taggedTemplateLiteral([''], ['']), - _templateObject39 = _taggedTemplateLiteral(['any content
'], ['any content
']), - _templateObject49 = _taggedTemplateLiteral([''], ['']), - _templateObject50 = _taggedTemplateLiteral(['abc'], ['abc']), - _templateObject51 = _taggedTemplateLiteral(['a', 'c
'], ['a', 'c
']), - _templateObject52 = _taggedTemplateLiteral(['a', 'c'], ['a', 'c']), - _templateObject53 = _taggedTemplateLiteral(['hello
'], ['\nhello
']), - _templateObject58 = _taggedTemplateLiteral(['\nhello
'], ['\nhello
']), - _templateObject59 = _taggedTemplateLiteral(['hello
'], ['\nhello
']), - _templateObject63 = _taggedTemplateLiteral([''], ['']), - _templateObject64 = _taggedTemplateLiteral(['I\'m grand child
'], ['\nI\'m grand child
']), - _templateObject72 = _taggedTemplateLiteral(['\na
b
'], ['a
b
']), - _templateObject77 = _taggedTemplateLiteral(['c
'], ['c
']), - _templateObject78 = _taggedTemplateLiteral(['', ' - ', ''], ['', ' - ', '']), - _templateObject79 = _taggedTemplateLiteral([''], ['']), - _templateObject80 = _taggedTemplateLiteral([''], ['']), - _templateObject81 = _taggedTemplateLiteral([''], ['']), - _templateObject82 = _taggedTemplateLiteral(['\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);
+(function () {
+ 'use strict';
+
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError("Cannot call a class as a function");
}
- tressa.assert(update('hello').innerHTML === update('hello').innerHTML, 'same text');
- done(div);
- });
-}).then(function () {
- return tressa.async(function (done) {
- tressa.log('## injecting HTML');
+ }
+
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ("value" in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== "function" && superClass !== null) {
+ throw new TypeError("Super expression must either be null or a function");
+ }
+
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ }
+
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+
+ return _setPrototypeOf(o, p);
+ }
+
+ function _isNativeReflectConstruct() {
+ if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+ if (Reflect.construct.sham) return false;
+ if (typeof Proxy === "function") return true;
+
+ try {
+ Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+ return true;
+ } catch (e) {
+ return false;
+ }
+ }
+
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+ }
+
+ return self;
+ }
+
+ function _possibleConstructorReturn(self, call) {
+ if (call && (typeof call === "object" || typeof call === "function")) {
+ return call;
+ }
+
+ return _assertThisInitialized(self);
+ }
+
+ function _createSuper(Derived) {
+ var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+ return function _createSuperInternal() {
+ var Super = _getPrototypeOf(Derived),
+ result;
+
+ if (hasNativeReflectConstruct) {
+ var NewTarget = _getPrototypeOf(this).constructor;
+
+ result = Reflect.construct(Super, arguments, NewTarget);
+ } else {
+ result = Super.apply(this, arguments);
+ }
+
+ return _possibleConstructorReturn(this, result);
+ };
+ }
+
+ function _taggedTemplateLiteral(strings, raw) {
+ if (!raw) {
+ raw = strings.slice(0);
+ }
+
+ return Object.freeze(Object.defineProperties(strings, {
+ raw: {
+ value: Object.freeze(raw)
+ }
+ }));
+ }
+
+ function _templateObject130() {
+ var data = _taggedTemplateLiteral(["
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); - var html = update('hello').innerHTML; - function update(text) { - return render(_templateObject3, ['' + text + '']); + + 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 (/^\w+<\/strong><\/p>$/i.test(html)
- );
+ return /^\s* \s*Time: \d+\.\d+<[^>]+?>\s*<\/p>\s*$/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');
+
+ 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 + '']);
}
- if (e) {
- e.preventDefault();
- e.stopPropagation();
+
+ 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);
}
- tressa.assert(true, 'onclick invoked');
- tressa.assert(!a.hasAttribute('onclick'), 'no attribute');
- update(null);
- e = document.createEvent('Event');
+
+ var a = div.querySelector('a');
+ var 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(_templateObject3, { 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(_templateObject5, 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(_templateObject6);
- };
- update().remove();
- update = function update() {
- return render(_templateObject7);
- };
- update().remove();
- tressa.assert(true, 'OK');
-}).then(function () {
- tressa.log('## the attribute id');
- var div = document.createElement('div');
- hyperHTML.bind(div)(_templateObject8, '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()');
+ }).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(_templateObject9);
+ return render(_templateObject7());
};
- 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().remove();
+
update = function update() {
- return render(_templateObject10);
+ return render(_templateObject8());
};
- 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');
+ update().remove();
+ tressa.assert(true, 'OK');
+ }).then(function () {
+ tressa.log('## the attribute id');
var div = document.createElement('div');
- render = hyperHTML.bind(div);
- render(_templateObject11, node);
- same = div.childNodes;
- tressa.assert(node[0] && node.every(function (n, i) {
- return same[i] === n;
- }), 'same list applied');
-
- function returnSame() {
- return render(_templateObject12);
- }
- 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)(_templateObject13, '\n position: absolute;\n left: ' + point.x + 'px;\n top: ' + 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');
+ 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());
}
- });
- observer.observe(div, {
- childList: true,
- subtree: true
+ 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 "));
+ }
- var counters = [];
+ try {
+ update();
+ } catch (e) {
+ console.error(e);
+ }
- 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]++;
+ 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');
}
- if (nodes[i].childNodes.length > 0) {
- trackMutations(nodes[i].childNodes, countKey);
+ });
+ 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 = [];
+ 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(/