diff --git a/cjs/classes/Component.js b/cjs/classes/Component.js index ebe3ffa4..0ce489cb 100644 --- a/cjs/classes/Component.js +++ b/cjs/classes/Component.js @@ -107,7 +107,7 @@ function setup(content) { event.component = this; return (_wire$.dispatchEvent ? _wire$ : - _wire$.childNodes[0] + _wire$.n[0] ).dispatchEvent(event); } return false; diff --git a/cjs/classes/Wire.js b/cjs/classes/Wire.js deleted file mode 100644 index 2d1983ee..00000000 --- a/cjs/classes/Wire.js +++ /dev/null @@ -1,38 +0,0 @@ -'use strict'; -const { append, doc, fragment } = require('../shared/utils.js'); - -function Wire(childNodes) { - this.childNodes = childNodes; - this.length = childNodes.length; - this.first = childNodes[0]; - this.last = childNodes[this.length - 1]; - this._ = null; -} -Object.defineProperty(exports, '__esModule', {value: true}).default = Wire - -// when a wire is inserted, all its nodes will follow -Wire.prototype.valueOf = function valueOf(different) { - const noFragment = this._ == null; - if (noFragment) - this._ = fragment(this.first); - /* istanbul ignore else */ - if (noFragment || different) - append(this._, this.childNodes); - return this._; -}; - -// when a wire is removed, all its nodes must be removed as well -Wire.prototype.remove = function remove() { - this._ = null; - const first = this.first; - const last = this.last; - if (this.length === 2) { - last.parentNode.removeChild(last); - } else { - const range = doc(first).createRange(); - range.setStartBefore(this.childNodes[1]); - range.setEndAfter(last); - range.deleteContents(); - } - return first; -}; diff --git a/cjs/hyper/wire.js b/cjs/hyper/wire.js index d2d6f895..39e62547 100644 --- a/cjs/hyper/wire.js +++ b/cjs/hyper/wire.js @@ -1,10 +1,10 @@ 'use strict'; const WeakMap = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/weakmap')); -const Wire = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('../classes/Wire.js')); +const Wire = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('hyperhtml-wire')); const {Tagger} = require('../objects/Updates.js'); -const {reArguments, slice} = require('../shared/utils.js'); +const {reArguments} = require('../shared/utils.js'); // all wires used per each context const wires = new WeakMap; @@ -73,9 +73,10 @@ const weakly = (obj, type) => { // array of nodes or to this single referenced node. const wireContent = node => { const childNodes = node.childNodes; - return childNodes.length === 1 ? + const {length} = childNodes; + return length === 1 ? childNodes[0] : - new Wire(slice.call(childNodes, 0)); + (length ? new Wire(childNodes) : node); }; exports.content = content; diff --git a/cjs/objects/Basic.js b/cjs/objects/Basic.js deleted file mode 100644 index ad9a93a7..00000000 --- a/cjs/objects/Basic.js +++ /dev/null @@ -1 +0,0 @@ -'use strict'; diff --git a/cjs/objects/Engine.js b/cjs/objects/Engine.js deleted file mode 100644 index b5195357..00000000 --- a/cjs/objects/Engine.js +++ /dev/null @@ -1,46 +0,0 @@ -'use strict'; -Object.defineProperty(exports, '__esModule', {value: true}).default = { - update: ( - utils, - liveNodes, liveStart, liveEnd, liveLength, - virtualNodes, virtualStart, virtualEnd /*, virtualLength */ - ) => { - const { splicer } = utils; - while (liveStart < liveEnd && virtualStart < virtualEnd) { - const liveValue = liveNodes[liveStart]; - const virtualValue = virtualNodes[virtualStart]; - const status = liveValue === virtualValue ? - 0 : (liveNodes.indexOf(virtualValue) < 0 ? 1 : -1); - // nodes can be either removed ... - if (status < 0) { - splicer.splice(liveStart, 1); - liveEnd--; - liveLength--; - } - // ... appended ... - else if (0 < status) { - splicer.splice(liveStart, 0, virtualValue); - liveStart++; - liveEnd++; - liveLength++; - virtualStart++; - } - // ... or ignored, since it's the same ... - else { - liveStart++; - virtualStart++; - } - } - if (liveStart < liveEnd) { - splicer.splice(liveStart, liveEnd - liveStart); - } - if (virtualStart < virtualEnd) { - splicer.splice.apply( - splicer, - [liveEnd, 0].concat( - virtualNodes.slice(virtualStart, virtualEnd) - ) - ); - } - } -}; \ No newline at end of file diff --git a/cjs/objects/Path.js b/cjs/objects/Path.js deleted file mode 100644 index aef883cf..00000000 --- a/cjs/objects/Path.js +++ /dev/null @@ -1,58 +0,0 @@ -'use strict'; -const { - COMMENT_NODE, - DOCUMENT_FRAGMENT_NODE, - ELEMENT_NODE -} = require('../shared/constants.js'); - -// every template literal interpolation indicates -// a precise target in the DOM the template is representing. -// `
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 9b177723..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 (!isSVG && /^--/.test(key)) - info.setProperty(key, styleValue); - else - info[key] = styleValue; - } - oldType = 'object'; - if (isSVG) - style.value = toStyle((oldValue = info)); - else - oldValue = newValue; - break; - } - default: - if (oldValue != newValue) { - oldType = 'string'; - oldValue = newValue; - if (isSVG) - style.value = newValue || ''; - else - style.cssText = newValue || ''; - } - break; - } - }; -}; - -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(''); -}; diff --git a/cjs/objects/Updates.js b/cjs/objects/Updates.js index 08d795ad..a1b3648b 100644 --- a/cjs/objects/Updates.js +++ b/cjs/objects/Updates.js @@ -14,7 +14,7 @@ const { } = require('../shared/constants.js'); const Component = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('../classes/Component.js')); -const Wire = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('../classes/Wire.js')); +const Wire = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('hyperhtml-wire')); const Intent = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('./Intent.js')); const { slice, text } = require('../shared/utils.js'); @@ -36,7 +36,7 @@ const asNode = (item, i) => { // all these cases are handled by domdiff already /* istanbul ignore next */ ((1 / i) < 0 ? - (i ? item.remove() : item.last) : + (i ? item.remove(true) : item.last) : (i ? item.valueOf(true) : item.first)) : asNode(item.render(), i)); } diff --git a/cjs/objects/hyperstyle.js b/cjs/objects/hyperstyle.js deleted file mode 100644 index 20caaea8..00000000 --- a/cjs/objects/hyperstyle.js +++ /dev/null @@ -1,79 +0,0 @@ -'use strict'; -var hyperStyle = (function (){'use strict'; - // from https://github.com/developit/preact/blob/33fc697ac11762a1cb6e71e9847670d047af7ce5/src/varants.js - var IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i; - var hyphen = /([^A-Z])([A-Z]+)/g; - return function hyperStyle(node) { - return 'ownerSVGElement' in node ? svg(node) : update(node.style, false); - }; - function ized($0, $1, $2) { - return $1 + '-' + $2.toLowerCase(); - } - function svg(node) { - node.setAttribute('style', ''); - return update(node.getAttributeNode('style'), true); - } - function toStyle(object) { - var key, css = []; - for (key in object) { - css.push(key.replace(hyphen, ized), ':', object[key], ';'); - } - return css.join(''); - } - function update(style, isSVG) { - var oldType, oldValue; - return function (newValue) { - var info, key, styleValue, value; - switch (typeof newValue) { - case 'object': - if (newValue) { - if (oldType === 'object') { - if (!isSVG) { - if (oldValue !== newValue) { - for (key in oldValue) { - if (!(key in newValue)) { - style[key] = ''; - } - } - } - } - } else { - if (isSVG) - style.value = ''; - else - style.cssText = ''; - } - info = isSVG ? {} : style; - for (key in newValue) { - value = newValue[key]; - styleValue = typeof value === 'number' && - !IS_NON_DIMENSIONAL.test(key) ? - (value + 'px') : value; - if (!isSVG && /^--/.test(key)) - info.setProperty(key, styleValue); - else - info[key] = styleValue; - } - oldType = 'object'; - if (isSVG) - style.value = toStyle((oldValue = info)); - else - oldValue = newValue; - break; - } - default: - if (oldValue != newValue) { - oldType = 'string'; - oldValue = newValue; - if (isSVG) - style.value = newValue || ''; - else - style.cssText = newValue || ''; - } - break; - } - }; - } -}()); - -Object.defineProperty(exports, '__esModule', {value: true}).default = hyperStyle; diff --git a/cjs/shared/easy-dom.js b/cjs/shared/easy-dom.js deleted file mode 100644 index e5fd2186..00000000 --- a/cjs/shared/easy-dom.js +++ /dev/null @@ -1,8 +0,0 @@ -'use strict'; -// these are tiny helpers to simplify most common operations needed here -const doc = node => node.ownerDocument || node; -exports.doc = doc; -const fragment = node => doc(node).createDocumentFragment(); -exports.fragment = fragment; -const text = (node, text) => doc(node).createTextNode(text); -exports.text = text; diff --git a/cjs/shared/features-detection.js b/cjs/shared/features-detection.js deleted file mode 100644 index f5980ac4..00000000 --- a/cjs/shared/features-detection.js +++ /dev/null @@ -1,6 +0,0 @@ -'use strict'; -const {fragment} = require('./easy-dom.js'); - -// DOM4 node.append(...many) -const hasAppend = 'append' in fragment(document); -exports.hasAppend = hasAppend; diff --git a/cjs/shared/re.js b/cjs/shared/re.js deleted file mode 100644 index 07897d90..00000000 --- a/cjs/shared/re.js +++ /dev/null @@ -1,23 +0,0 @@ -'use strict'; -// TODO: I'd love to code-cover RegExp too here -// these are fundamental for this library - -const spaces = ' \\f\\n\\r\\t'; -const almostEverything = '[^ ' + spaces + '\\/>"\'=]+'; -const attrName = '[ ' + spaces + ']+' + almostEverything; -const tagName = '<([A-Za-z]+[A-Za-z0-9:_-]*)((?:'; -const attrPartials = '(?:=(?:\'[^\']*?\'|"[^"]*?"|<[^>]*?>|' + almostEverything + '))?)'; - -const attrSeeker = new RegExp( - tagName + attrName + attrPartials + '+)([ ' + spaces + ']*/?>)', - 'g' -); - -const selfClosing = new RegExp( - tagName + attrName + attrPartials + '*)([ ' + spaces + ']*/>)', - 'g' -); - -exports.attrName = attrName; -exports.attrSeeker = attrSeeker; -exports.selfClosing = selfClosing; diff --git a/cjs/shared/utils.js b/cjs/shared/utils.js index d5ae3d15..60200eba 100644 --- a/cjs/shared/utils.js +++ b/cjs/shared/utils.js @@ -2,30 +2,9 @@ const unique = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/template-literal')); // these are tiny helpers to simplify most common operations needed here -const doc = node => node.ownerDocument || node; -exports.doc = doc; -const fragment = node => doc(node).createDocumentFragment(); -exports.fragment = fragment; -const text = (node, text) => doc(node).createTextNode(text); +const text = (node, text) => node.ownerDocument.createTextNode(text); exports.text = text; -// appends an array of nodes -// to a generic node/fragment -// When available, uses append passing all arguments at once -// hoping that's somehow faster, even if append has more checks on type -// istanbul ignore next -const append = 'append' in fragment(document) ? - (node, childNodes) => { - node.append.apply(node, childNodes); - } : - (node, childNodes) => { - const length = childNodes.length; - for (let i = 0; i < length; i++) { - node.appendChild(childNodes[i]); - } - }; -exports.append = append; - // normalizes the template once for all arguments cases const reArguments = function (template) { const args = [unique(template)]; diff --git a/esm.js b/esm.js index 7be9c95f..21219ea0 100644 --- a/esm.js +++ b/esm.js @@ -1,5 +1,5 @@ -/*! (c) Andrea Giammarchi (ISC) */var hyperHTML=function(e){"use strict";function t(){return this}function n(e){return e.join(Y).replace(se,o).replace(le,r)}function r(e,t,n,r){return"<"+t+n.replace(fe,i)+r}function i(e,t,n){return t+(n||'"')+X+(n||'"')}function o(e,t,n){return ie.test(t)?e:"<"+t+n+">"+t+">"}function a(e,t,n,r){return{name:r,node:t,path:n,type:e}}function u(e,t){for(var n=t.length,r=0;rc
"]); - - _templateObject131 = function _templateObject131() { - return data; - }; - - return data; - } - function _templateObject130() { - var data = _taggedTemplateLiteral(["a
b
"]); + var data = _taggedTemplateLiteral(["c
"]); _templateObject124 = function _templateObject124() { return data; @@ -223,7 +153,7 @@ } function _templateObject123() { - var data = _taggedTemplateLiteral(["\na
b
"]); _templateObject123 = function _templateObject123() { return data; @@ -233,7 +163,7 @@ } function _templateObject122() { - var data = _taggedTemplateLiteral(["\nI'm grand child
"]); + var data = _taggedTemplateLiteral(["", ""]); _templateObject122 = function _templateObject122() { return data; @@ -243,7 +173,7 @@ } function _templateObject121() { - var data = _taggedTemplateLiteral(["\n "]); + var data = _taggedTemplateLiteral(["", ""]); _templateObject121 = function _templateObject121() { return data; @@ -253,7 +183,7 @@ } function _templateObject120() { - var data = _taggedTemplateLiteral(["\n "]); + var data = _taggedTemplateLiteral(["\nI'm grand child
"]); _templateObject115 = function _templateObject115() { return data; @@ -313,7 +243,7 @@ } function _templateObject114() { - var data = _taggedTemplateLiteral([""]); + var data = _taggedTemplateLiteral(["\n "]); _templateObject114 = function _templateObject114() { return data; @@ -323,7 +253,7 @@ } function _templateObject113() { - var data = _taggedTemplateLiteral(["\nhello
"]); + var data = _taggedTemplateLiteral(["\n "]); _templateObject113 = function _templateObject113() { return data; @@ -333,7 +263,7 @@ } function _templateObject112() { - var data = _taggedTemplateLiteral(["hello
"]); + var data = _taggedTemplateLiteral(["hello
"]); _templateObject106 = function _templateObject106() { return data; @@ -403,7 +333,7 @@ } function _templateObject105() { - var data = _taggedTemplateLiteral(["\nhello
"]); + var data = _taggedTemplateLiteral(["hello
"]); _templateObject102 = function _templateObject102() { return data; @@ -443,7 +373,7 @@ } function _templateObject101() { - var data = _taggedTemplateLiteral(["a", "c
"]); + var data = _taggedTemplateLiteral(["", ""]); _templateObject100 = function _templateObject100() { return data; @@ -463,7 +393,7 @@ } function _templateObject99() { - var data = _taggedTemplateLiteral(["abc"]); + var data = _taggedTemplateLiteral(["", ""]); _templateObject99 = function _templateObject99() { return data; @@ -473,7 +403,7 @@ } function _templateObject98() { - var data = _taggedTemplateLiteral(["a", "c
"]); + var data = _taggedTemplateLiteral(["\nhello
"]); _templateObject98 = function _templateObject98() { return data; @@ -483,7 +413,7 @@ } function _templateObject97() { - var data = _taggedTemplateLiteral(["abc"]); + var data = _taggedTemplateLiteral(["\na", "c
"]); + var data = _taggedTemplateLiteral(["a", "c
"]); _templateObject93 = function _templateObject93() { return data; @@ -533,7 +463,7 @@ } function _templateObject92() { - var data = _taggedTemplateLiteral(["", "
"]); + var data = _taggedTemplateLiteral(["abc"]); _templateObject92 = function _templateObject92() { return data; @@ -543,7 +473,7 @@ } function _templateObject91() { - var data = _taggedTemplateLiteral(["", "
"]); + var data = _taggedTemplateLiteral(["a", "c
"]); _templateObject91 = function _templateObject91() { return data; @@ -553,7 +483,7 @@ } function _templateObject90() { - var data = _taggedTemplateLiteral(["", "
"]); + var data = _taggedTemplateLiteral(["abc"]); _templateObject90 = function _templateObject90() { return data; @@ -563,7 +493,7 @@ } function _templateObject89() { - var data = _taggedTemplateLiteral(["a=", ""]); + var data = _taggedTemplateLiteral(["a", "c"]); _templateObject89 = function _templateObject89() { return data; @@ -573,7 +503,7 @@ } function _templateObject88() { - var data = _taggedTemplateLiteral(["", "
"]); + var data = _taggedTemplateLiteral(["abc"]); _templateObject88 = function _templateObject88() { return data; @@ -583,7 +513,7 @@ } function _templateObject87() { - var data = _taggedTemplateLiteral([""]); + var data = _taggedTemplateLiteral(["a", "c
"]); _templateObject87 = function _templateObject87() { return data; @@ -593,7 +523,7 @@ } function _templateObject86() { - var data = _taggedTemplateLiteral([""]); + var data = _taggedTemplateLiteral(["abc"]); _templateObject86 = function _templateObject86() { return data; @@ -603,7 +533,7 @@ } function _templateObject85() { - var data = _taggedTemplateLiteral([""]); + var data = _taggedTemplateLiteral(["", "
"]); _templateObject85 = function _templateObject85() { return data; @@ -613,7 +543,7 @@ } function _templateObject84() { - var data = _taggedTemplateLiteral([""]); + var data = _taggedTemplateLiteral(["", "
"]); _templateObject84 = function _templateObject84() { return data; @@ -623,7 +553,7 @@ } function _templateObject83() { - var data = _taggedTemplateLiteral(["any content
"]); + var data = _taggedTemplateLiteral(["", "
"]); _templateObject83 = function _templateObject83() { return data; @@ -633,7 +563,7 @@ } function _templateObject82() { - var data = _taggedTemplateLiteral(["any content
"]); + var data = _taggedTemplateLiteral(["a=", ""]); _templateObject82 = function _templateObject82() { return data; @@ -643,7 +573,7 @@ } function _templateObject81() { - var data = _taggedTemplateLiteral(["any content
"]); + var data = _taggedTemplateLiteral(["", "
"]); _templateObject81 = function _templateObject81() { return data; @@ -653,7 +583,7 @@ } function _templateObject80() { - var data = _taggedTemplateLiteral(["any content
"]); + var data = _taggedTemplateLiteral([""]); _templateObject80 = function _templateObject80() { return data; @@ -1633,9 +1563,9 @@ return render(_templateObject11()); }; - node = update().childNodes; + node = update().n; tressa.assert(Array.isArray(node), 'list of nodes'); - same = update().childNodes; + same = update().n; tressa.assert(node.length === same.length && node[0] && node.every(function (n, i) { return same[i] === n; }), 'same list returned'); @@ -2178,34 +2108,44 @@ }).then(function () { tressa.log('## attributes with null values'); var div = document.createElement('div'); - hyperHTML.bind(div)(_templateObject79(), '1'); + + var anyAttr = function anyAttr(value) { + hyperHTML.bind(div)(_templateObject79(), value); + }; + + anyAttr('1'); tressa.assert(div.firstChild.hasAttribute('any-attr') && div.firstChild.getAttribute('any-attr') === '1', 'regular attribute'); - hyperHTML.bind(div)(_templateObject80(), null); + anyAttr(null); tressa.assert(!div.firstChild.hasAttribute('any-attr') && div.firstChild.getAttribute('any-attr') == null, 'can be removed'); - hyperHTML.bind(div)(_templateObject81(), undefined); + anyAttr(undefined); tressa.assert(!div.firstChild.hasAttribute('any-attr') && div.firstChild.getAttribute('any-attr') == null, 'multiple times'); - hyperHTML.bind(div)(_templateObject82(), '2'); + anyAttr('2'); tressa.assert(div.firstChild.hasAttribute('any-attr') && div.firstChild.getAttribute('any-attr') === '2', 'but can be also reassigned'); - hyperHTML.bind(div)(_templateObject83(), '3'); + anyAttr('3'); tressa.assert(div.firstChild.hasAttribute('any-attr') && div.firstChild.getAttribute('any-attr') === '3', 'many other times'); - hyperHTML.bind(div)(_templateObject84(), 'test'); + + var inputName = function inputName(value) { + hyperHTML.bind(div)(_templateObject80(), value); + }; + + inputName('test'); tressa.assert(div.firstChild.hasAttribute('name') && div.firstChild.name === 'test', 'special attributes are set too'); - hyperHTML.bind(div)(_templateObject85(), null); + inputName(null); tressa.assert(!div.firstChild.hasAttribute('name') && !div.firstChild.name, 'but can also be removed'); - hyperHTML.bind(div)(_templateObject86(), undefined); + inputName(undefined); tressa.assert(!div.firstChild.hasAttribute('name') && !div.firstChild.name, 'with either null or undefined'); - hyperHTML.bind(div)(_templateObject87(), 'back'); + inputName('back'); tressa.assert(div.firstChild.hasAttribute('name') && div.firstChild.name === 'back', 'and can be put back'); }).then(function () { return tressa.async(function (done) { tressa.log('## placeholder'); var div = document.createElement('div'); var vdiv = document.createElement('div'); - hyperHTML.bind(div)(_templateObject88(), { + hyperHTML.bind(div)(_templateObject81(), { eUC: 'b c', placeholder: 'z' }); - hyperHTML.bind(vdiv)(_templateObject89(), { + hyperHTML.bind(vdiv)(_templateObject82(), { eUC: 'b c', placeholder: 'z' }); @@ -2214,19 +2154,19 @@ setTimeout(function () { tressa.assert(/b%20c<\/p>/.test(div.innerHTML), 'expected inner resolved layout'); tressa.assert(/a=b%20c<[^>]+?>/.test(vdiv.innerHTML), 'expected virtual resolved layout'); - hyperHTML.bind(div)(_templateObject90(), { + hyperHTML.bind(div)(_templateObject83(), { text: 1, placeholder: '9' }); setTimeout(function () { tressa.assert(/
1<\/p>/.test(div.innerHTML), 'placeholder with text'); - hyperHTML.bind(div)(_templateObject91(), { + hyperHTML.bind(div)(_templateObject84(), { any: [1, 2], placeholder: '9' }); setTimeout(function () { tressa.assert(/
12<\/p>/.test(div.innerHTML), 'placeholder with any'); - hyperHTML.bind(div)(_templateObject92(), { + hyperHTML.bind(div)(_templateObject85(), { html: '3', placeholder: '9' }); @@ -2242,23 +2182,23 @@ tressa.log('## hyper(...)'); var hyper = hyperHTML.hyper; tressa.assert(typeof hyper() === 'function', 'empty hyper() is a wire tag'); - tressa.assert(hyper(_templateObject93()).textContent === 'abc', 'hyper`abc`'); - tressa.assert(hyper(_templateObject94(), 2).textContent === 'a2c', 'hyper`
a${2}c
`'); - tressa.assert(hyper(document.createElement('div'))(_templateObject95()).textContent === 'abc', 'hyper(div)`abc`'); - tressa.assert(hyper(document.createElement('div'))(_templateObject96(), 'b').textContent === 'abc', 'hyper(div)`a${"b"}c`'); // WFT jsdom ?! + tressa.assert(hyper(_templateObject86()).textContent === 'abc', 'hyper`abc`'); + tressa.assert(hyper(_templateObject87(), 2).textContent === 'a2c', 'hyper`a${2}c
`'); + tressa.assert(hyper(document.createElement('div'))(_templateObject88()).textContent === 'abc', 'hyper(div)`abc`'); + tressa.assert(hyper(document.createElement('div'))(_templateObject89(), 'b').textContent === 'abc', 'hyper(div)`a${"b"}c`'); // WFT jsdom ?! delete Object.prototype.nodeType; - tressa.assert(hyper({})(_templateObject97()).textContent === 'abc', 'hyper({})`abc`'); - tressa.assert(hyper({})(_templateObject98(), 'b').textContent === 'abc', 'hyper({})`a${\'b\'}c
`'); - tressa.assert(hyper({}, ':id')(_templateObject99()).textContent === 'abc', 'hyper({}, \':id\')`abc`'); - tressa.assert(hyper({}, ':id')(_templateObject100(), 'b').textContent === 'abc', 'hyper({}, \':id\')`a${\'b\'}c
`'); - tressa.assert(hyper('svg')(_templateObject101()), 'hyper("svg")`a${\'b\'}c
`'); + tressa.assert(hyper({}, ':id')(_templateObject92()).textContent === 'abc', 'hyper({}, \':id\')`abc`'); + tressa.assert(hyper({}, ':id')(_templateObject93(), 'b').textContent === 'abc', 'hyper({}, \':id\')`a${\'b\'}c
`'); + tressa.assert(hyper('svg')(_templateObject94()), 'hyper("svg")` is defined');
p.render().click();
tressa.assert(p.clicked, 'the event worked');
- render(_templateObject108(), [hyperHTML.Component.for.call(Rect, {
+ render(_templateObject101(), [hyperHTML.Component.for.call(Rect, {
x: 789,
y: 123
})]);
@@ -2396,7 +2336,7 @@
}, {
key: "render",
value: function render() {
- return this.html(_templateObject109(), this);
+ return this.html(_templateObject102(), this);
}
}]);
@@ -2464,7 +2404,7 @@
customElements.define('dumb-element', DumbElement);
function update(wire) {
- return wire(_templateObject110(), true, 'qwe', true);
+ return wire(_templateObject103(), true, 'qwe', true);
}
var div = update(hyperHTML.wire());
@@ -2565,8 +2505,8 @@
tressa.assert(/^\s+create Code Pen\s*publish online\s*write documentation\s+$/.test(div.textContent), 'correct order');
function update() {
- hyperHTML.bind(div)(_templateObject111(), todo.map(function (item) {
- return hyperHTML.wire(item)(_templateObject112(), item.id, item.text);
+ hyperHTML.bind(div)(_templateObject104(), todo.map(function (item) {
+ return hyperHTML.wire(item)(_templateObject105(), item.id, item.text);
}));
}
}).then(function () {
@@ -2601,7 +2541,7 @@
}, {
key: "render",
value: function render() {
- return this.html(_templateObject113(), this, this);
+ return this.html(_templateObject106(), this, this);
}
}]);
@@ -2647,7 +2587,7 @@
var render = hyperHTML.wire();
function p(style) {
- return render(_templateObject114(), style);
+ return render(_templateObject107(), style);
}
var node = p({
@@ -2664,17 +2604,17 @@
if (node.style.cssText !== '') tressa.assert(node.style.getPropertyValue('--custom-color') === 'red', 'custom style');else console.log('skipping CSS properties for IE');
}).then(function () {
tressa.log('##
1
`; }; - node = update().childNodes; + node = update().n; tressa.assert(Array.isArray(node), 'list of nodes'); - same = update().childNodes; + same = update().n; tressa.assert( node.length === same.length && node[0] && @@ -697,55 +697,61 @@ tressa.async(function (done) { .then(function () { tressa.log('## attributes with null values'); var div = document.createElement('div'); - hyperHTML.bind(div)`any content
`; + var anyAttr = function (value) { + hyperHTML.bind(div)`any content
`; + }; + anyAttr('1'); tressa.assert( div.firstChild.hasAttribute('any-attr') && div.firstChild.getAttribute('any-attr') === '1', 'regular attribute' ); - hyperHTML.bind(div)`any content
`; + anyAttr(null); tressa.assert( !div.firstChild.hasAttribute('any-attr') && div.firstChild.getAttribute('any-attr') == null, 'can be removed' ); - hyperHTML.bind(div)`any content
`; + anyAttr(undefined); tressa.assert( !div.firstChild.hasAttribute('any-attr') && div.firstChild.getAttribute('any-attr') == null, 'multiple times' ); - hyperHTML.bind(div)`any content
`; + anyAttr('2'); tressa.assert( div.firstChild.hasAttribute('any-attr') && div.firstChild.getAttribute('any-attr') === '2', 'but can be also reassigned' ); - hyperHTML.bind(div)`any content
`; + anyAttr('3'); tressa.assert( div.firstChild.hasAttribute('any-attr') && div.firstChild.getAttribute('any-attr') === '3', 'many other times' ); - hyperHTML.bind(div)``; + var inputName = function (value) { + hyperHTML.bind(div)``; + }; + inputName('test'); tressa.assert( div.firstChild.hasAttribute('name') && div.firstChild.name === 'test', 'special attributes are set too' ); - hyperHTML.bind(div)``; + inputName(null); tressa.assert( !div.firstChild.hasAttribute('name') && !div.firstChild.name, 'but can also be removed' ); - hyperHTML.bind(div)``; + inputName(undefined); tressa.assert( !div.firstChild.hasAttribute('name') && !div.firstChild.name, 'with either null or undefined' ); - hyperHTML.bind(div)``; + inputName('back'); tressa.assert( div.firstChild.hasAttribute('name') && div.firstChild.name === 'back', diff --git a/umd.js b/umd.js index b25b3874..bdfc2383 100644 --- a/umd.js +++ b/umd.js @@ -1,5 +1,5 @@ (function(A,G){if(typeof define=='function'&&define.amd)define([],G);else if(typeof module=='object'&&module.exports)module.exports=G();else A.hyperHTML=G()}(typeof self!='undefined'?self:this,function(){ -/*! (c) Andrea Giammarchi (ISC) */var hyperHTML=function(e){"use strict";function t(){return this}function n(e){return e.join(Y).replace(se,o).replace(le,r)}function r(e,t,n,r){return"<"+t+n.replace(fe,i)+r}function i(e,t,n){return t+(n||'"')+X+(n||'"')}function o(e,t,n){return ie.test(t)?e:"<"+t+n+">"+t+">"}function a(e,t,n,r){return{name:r,node:t,path:n,type:e}}function u(e,t){for(var n=t.length,r=0;r