From fd247c81be0153c40549df596622be9ccdab322f Mon Sep 17 00:00:00 2001 From: Andrea Giammarchi Date: Thu, 10 Jan 2019 19:34:01 +0100 Subject: [PATCH 1/2] Using external hyperhtml-wire module --- cjs/classes/Component.js | 2 +- cjs/classes/Wire.js | 38 ---- cjs/hyper/wire.js | 9 +- cjs/objects/Basic.js | 1 - cjs/objects/Engine.js | 46 ----- cjs/objects/Path.js | 58 ------ cjs/objects/Style.js | 82 --------- cjs/objects/Updates.js | 4 +- cjs/objects/hyperstyle.js | 79 -------- cjs/shared/easy-dom.js | 8 - cjs/shared/features-detection.js | 6 - cjs/shared/re.js | 23 --- cjs/shared/utils.js | 23 +-- esm.js | 6 +- esm/classes/Component.js | 2 +- esm/classes/Wire.js | 36 ---- esm/hyper/wire.js | 9 +- esm/objects/Updates.js | 4 +- esm/shared/utils.js | 20 +- index.js | 112 ++++++------ min.js | 6 +- package.json | 3 +- test/ie/test/test.js | 304 +++++++++++++------------------ test/test.js | 28 +-- umd.js | 6 +- 25 files changed, 221 insertions(+), 694 deletions(-) delete mode 100644 cjs/classes/Wire.js delete mode 100644 cjs/objects/Basic.js delete mode 100644 cjs/objects/Engine.js delete mode 100644 cjs/objects/Path.js delete mode 100644 cjs/objects/Style.js delete mode 100644 cjs/objects/hyperstyle.js delete mode 100644 cjs/shared/easy-dom.js delete mode 100644 cjs/shared/features-detection.js delete mode 100644 cjs/shared/re.js delete mode 100644 esm/classes/Wire.js 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+">"}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=u;){for(var c=t,l=i;ca;)--c;l=u+r-c;var g=Array(l),b=s[c];for(--n;b;){for(var y=b,w=y.newi,N=y.oldi;n>w;)g[--l]=1,--n;for(;a>N;)g[--l]=-1,--a;g[--l]=0,--n,--a,b=b.prev}for(;n>=t;)g[--l]=1,--n;for(;a>=o;)g[--l]=-1,--a;return g},L=function(e,t,n,r,i,o,a){var u,c,l,s,f,h,d,p=n+o,v=[];e:for(u=0;u<=p;u++){if(u>50)return null;for(d=u-1,f=u?v[u-1]:[0,0],h=v[u]=[],c=-u;c<=u;c+=2){for(s=c===-u||c!==u&&f[d+c-1]=0;u--){for(;s>0&&l>0&&a(r[i+s-1],e[t+l-1]);)m[g--]=0,s--,l--;if(!u)break;d=u-1,f=u?v[u-1]:[0,0],c=s-l,c===-u||c!==u&&f[d+c-1]>>0;n",t(r,o.firstChild.childNodes),r}var i="fragment",o="content"in n("template"),a=o?function(e){var t=n("template");return t.innerHTML=e,t.content}:function(e){var r=n(i),o=n("template"),a=null;if(/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(e)){var u=RegExp.$1;o.innerHTML=""+e+"
",a=o.querySelectorAll(u)}else o.innerHTML=e,a=o.childNodes;return t(r,a),r};return function(e,t){return("svg"===t?r:a)(e)}}(e),Q=function(e,t,n,r,i){var o="importNode"in e,a=e.createDocumentFragment();return a.appendChild(e.createTextNode("g")),a.appendChild(e.createTextNode("")),(o?e.importNode(a,!0):a.cloneNode(!0)).childNodes.length<2?function u(e,t){for(var n=e.cloneNode(),r=e.childNodes||[],i=r.length,o=0;t&&o

',e.content.childNodes[0].getAttribute("tabindex")==X)})(e.createElement("template"))||(X="_dt: "+X.slice(1,-1)+";");var Y="\x3c!--"+X+"--\x3e",ee=8,te=1,ne=3,re=/^(?:style|textarea)$/i,ie=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,oe=" \\f\\n\\r\\t",ae="[ "+oe+"]+[^ \\f\\n\\r\\t\\/>\"'=]+",ue="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",ce="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",le=new RegExp(ue+ae+ce+"+)([ "+oe+"]*/?>)","g"),se=new RegExp(ue+ae+ce+"*)([ "+oe+"]*/>)","g"),fe=new RegExp("("+ae+"\\s*=\\s*)(['\"]?)"+Y+"\\2","gi"),he=new w,de=new w,pe=function(){function e(e,t,n){return t+"-"+n.toLowerCase()}function t(e,t){var n;return t?n=t.cloneNode(!0):(e.setAttribute("style","--hyper:style;"),n=e.getAttributeNode("style")),n.value="",e.setAttributeNode(n),r(n,!0)}function n(t){var n,r=[];for(n in t)r.push(n.replace(o,e),":",t[n],";");return r.join("")}function r(e,t){var r,o;return function(a){var u,c,l,s;switch(typeof a){case"object":if(a){if("object"===r){if(!t&&o!==a)for(c in o)c in a||(e[c]="")}else t?e.value="":e.cssText="";u=t?{}:e;for(c in a)s=a[c],l="number"!=typeof s||i.test(c)?s:s+"px",!t&&/^--/.test(c)?u.setProperty(c,l):u[c]=l;r="object",t?e.value=n(o=u):o=a;break}default:o!=a&&(r="string",o=a,t?e.value=a||"":e.cssText=a||"")}}}var i=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,o=/([^A-Z])([A-Z]+)/g;return function(e,n){return"ownerSVGElement"in e?t(e,n):r(e.style,!1)}}(),ve="ownerSVGElement",me=function(){var t=!1,n=function(r){if(!("raw"in r)||r.propertyIsEnumerable("raw")||!Object.isFrozen(r.raw)||/Firefox\/(\d+)/.test((e.defaultView.navigator||{}).userAgent)&&parseFloat(RegExp.$1)<55){var i={};return(n=function(e){var t="raw"+e.join("raw");return i[t]||(i[t]=e)})(r)}return t=!0,r};return function(e){return t?e:n(e)}}(),ge=function(e){return e.ownerDocument||e},be=function(e){return ge(e).createDocumentFragment()},ye=function(e,t){return ge(e).createTextNode(t)},we="append"in be(e)?function(e,t){e.append.apply(e,t)}:function(e,t){for(var n=t.length,r=0;r"}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=u;){for(var c=t,l=i;ca;)--c;l=u+r-c;var g=Array(l),b=s[c];for(--n;b;){for(var w=b,y=w.newi,N=w.oldi;n>y;)g[--l]=1,--n;for(;a>N;)g[--l]=-1,--a;g[--l]=0,--n,--a,b=b.prev}for(;n>=t;)g[--l]=1,--n;for(;a>=o;)g[--l]=-1,--a;return g},_=function(e,t,n,r,i,o,a){var u,c,l,s,f,h,d,v=n+o,p=[];e:for(u=0;u<=v;u++){if(u>50)return null;for(d=u-1,f=u?p[u-1]:[0,0],h=p[u]=[],c=-u;c<=u;c+=2){for(s=c===-u||c!==u&&f[d+c-1]=0;u--){for(;s>0&&l>0&&a(r[i+s-1],e[t+l-1]);)m[g--]=0,s--,l--;if(!u)break;d=u-1,f=u?p[u-1]:[0,0],c=s-l,c===-u||c!==u&&f[d+c-1]>>0;n",t(r,o.firstChild.childNodes),r}var i="fragment",o="content"in n("template"),a=o?function(e){var t=n("template");return t.innerHTML=e,t.content}:function(e){var r=n(i),o=n("template"),a=null;if(/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(e)){var u=RegExp.$1;o.innerHTML=""+e+"
",a=o.querySelectorAll(u)}else o.innerHTML=e,a=o.childNodes;return t(r,a),r};return function(e,t){return("svg"===t?r:a)(e)}}(e),K=function(e,t,n,r,i){var o="importNode"in e,a=e.createDocumentFragment();return a.appendChild(e.createTextNode("g")),a.appendChild(e.createTextNode("")),(o?e.importNode(a,!0):a.cloneNode(!0)).childNodes.length<2?function u(e,t){for(var n=e.cloneNode(),r=e.childNodes||[],i=r.length,o=0;t&&o

',e.content.childNodes[0].getAttribute("tabindex")==U)})(e.createElement("template"))||(U="_dt: "+U.slice(1,-1)+";");var X="\x3c!--"+U+"--\x3e",Y=8,ee=1,te=3,ne=/^(?:style|textarea)$/i,re=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,ie=" \\f\\n\\r\\t",oe="[ "+ie+"]+[^ \\f\\n\\r\\t\\/>\"'=]+",ae="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",ue="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",ce=new RegExp(ae+oe+ue+"+)([ "+ie+"]*/?>)","g"),le=new RegExp(ae+oe+ue+"*)([ "+ie+"]*/>)","g"),se=new RegExp("("+oe+"\\s*=\\s*)(['\"]?)"+X+"\\2","gi"),fe=new w,he=new w,de=function(){function e(e,t,n){return t+"-"+n.toLowerCase()}function t(e,t){var n;return t?n=t.cloneNode(!0):(e.setAttribute("style","--hyper:style;"),n=e.getAttributeNode("style")),n.value="",e.setAttributeNode(n),r(n,!0)}function n(t){var n,r=[];for(n in t)r.push(n.replace(o,e),":",t[n],";");return r.join("")}function r(e,t){var r,o;return function(a){var u,c,l,s;switch(typeof a){case"object":if(a){if("object"===r){if(!t&&o!==a)for(c in o)c in a||(e[c]="")}else t?e.value="":e.cssText="";u=t?{}:e;for(c in a)s=a[c],l="number"!=typeof s||i.test(c)?s:s+"px",!t&&/^--/.test(c)?u.setProperty(c,l):u[c]=l;r="object",t?e.value=n(o=u):o=a;break}default:o!=a&&(r="string",o=a,t?e.value=a||"":e.cssText=a||"")}}}var i=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,o=/([^A-Z])([A-Z]+)/g;return function(e,n){return"ownerSVGElement"in e?t(e,n):r(e.style,!1)}}(),ve="ownerSVGElement",pe=function(e,t){function n(t){var n=this.n=e.call(t,0),r=n[0];this.first=r,this.last=n[n.length-1],this.d=r.ownerDocument||r,this.f=null}return t=n.prototype,t.remove=function(e){var t=this.n,n=this.first,r=this.last;if(this.f=null,e&&2===t.length)r.parentNode.removeChild(r);else{var i=this.d.createRange();i.setStartBefore(e?t[1]:n),i.setEndAfter(r),i.deleteContents()}return n},t.valueOf=function(e){var t=this.f,n=null==t;if(n&&(t=this.f=this.d.createDocumentFragment()),n||e)for(var r=this.n,i=0,o=r.length;i { // 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); }; export { content, weakly }; diff --git a/esm/objects/Updates.js b/esm/objects/Updates.js index b74863d1..8b34c9bb 100644 --- a/esm/objects/Updates.js +++ b/esm/objects/Updates.js @@ -15,7 +15,7 @@ import { } from '../shared/constants.js'; import Component from '../classes/Component.js'; -import Wire from '../classes/Wire.js'; +import Wire from 'hyperhtml-wire'; import Intent from './Intent.js'; import { slice, text } from '../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/esm/shared/utils.js b/esm/shared/utils.js index 42391f27..d2de2957 100644 --- a/esm/shared/utils.js +++ b/esm/shared/utils.js @@ -1,25 +1,7 @@ import unique from '@ungap/template-literal'; // these are tiny helpers to simplify most common operations needed here -export const doc = node => node.ownerDocument || node; -export const fragment = node => doc(node).createDocumentFragment(); -export const text = (node, text) => doc(node).createTextNode(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 -export 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]); - } - }; +export const text = (node, text) => node.ownerDocument.createTextNode(text); // normalizes the template once for all arguments cases export const reArguments = function (template) { diff --git a/index.js b/index.js index 7f813b39..8d779d99 100644 --- a/index.js +++ b/index.js @@ -635,7 +635,7 @@ var hyperHTML = (function (document) { detail: detail }); event.component = this; - return (_wire$.dispatchEvent ? _wire$ : _wire$.childNodes[0]).dispatchEvent(event); + return (_wire$.dispatchEvent ? _wire$ : _wire$.n[0]).dispatchEvent(event); } return false; @@ -1275,6 +1275,54 @@ var hyperHTML = (function (document) { var CONNECTED = 'connected'; var DISCONNECTED = 'dis' + CONNECTED; + /*! (c) Andrea Giammarchi - ISC */ + var Wire = function (slice, proto) { + proto = Wire.prototype; + + proto.remove = function (keepFirst) { + var childNodes = this.n; + var first = this.first; + var last = this.last; + this.f = null; + + if (keepFirst && childNodes.length === 2) { + last.parentNode.removeChild(last); + } else { + var range = this.d.createRange(); + range.setStartBefore(keepFirst ? childNodes[1] : first); + range.setEndAfter(last); + range.deleteContents(); + } + + return first; + }; + + proto.valueOf = function (forceAppend) { + var frag = this.f; + var noFrag = frag == null; + if (noFrag) frag = this.f = this.d.createDocumentFragment(); + + if (noFrag || forceAppend) { + for (var n = this.n, i = 0, l = n.length; i < l; i++) { + frag.appendChild(n[i]); + } + } + + return frag; + }; + + return Wire; + + function Wire(childNodes) { + var nodes = this.n = slice.call(childNodes, 0); + var first = nodes[0]; + this.first = first; + this.last = nodes[nodes.length - 1]; + this.d = first.ownerDocument || first; + this.f = null; + } + }([].slice); + var templateLiteral = function () { var RAW = 'raw'; @@ -1305,28 +1353,8 @@ var hyperHTML = (function (document) { }; }(); - var doc = function doc(node) { - return node.ownerDocument || node; - }; - var fragment = function fragment(node) { - return doc(node).createDocumentFragment(); - }; var text = function text(node, _text) { - return doc(node).createTextNode(_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 - - var append$1 = 'append' in fragment(document) ? function (node, childNodes) { - node.append.apply(node, childNodes); - } : function (node, childNodes) { - var length = childNodes.length; - - for (var i = 0; i < length; i++) { - node.appendChild(childNodes[i]); - } + return node.ownerDocument.createTextNode(_text); }; // normalizes the template once for all arguments cases var reArguments = function reArguments(template) { @@ -1342,41 +1370,6 @@ var hyperHTML = (function (document) { var slice = [].slice; - function Wire(childNodes) { - this.childNodes = childNodes; - this.length = childNodes.length; - this.first = childNodes[0]; - this.last = childNodes[this.length - 1]; - this._ = null; - } // when a wire is inserted, all its nodes will follow - - Wire.prototype.valueOf = function valueOf(different) { - var noFragment = this._ == null; - if (noFragment) this._ = fragment(this.first); - /* istanbul ignore else */ - - if (noFragment || different) append$1(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; - var first = this.first; - var last = this.last; - - if (this.length === 2) { - last.parentNode.removeChild(last); - } else { - var range = doc(first).createRange(); - range.setStartBefore(this.childNodes[1]); - range.setEndAfter(last); - range.deleteContents(); - } - - return first; - }; - var observe = disconnected({ Event: CustomEvent$1, WeakSet: WeakSet$1 @@ -1395,7 +1388,7 @@ var hyperHTML = (function (document) { // 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); + 1 / i < 0 ? i ? item.remove(true) : item.last : i ? item.valueOf(true) : item.first : asNode(item.render(), i); }; // returns true if domdiff can handle the value @@ -1738,7 +1731,8 @@ var hyperHTML = (function (document) { var wireContent = function wireContent(node) { var childNodes = node.childNodes; - return childNodes.length === 1 ? childNodes[0] : new Wire(slice.call(childNodes, 0)); + var length = childNodes.length; + return length === 1 ? childNodes[0] : length ? new Wire(childNodes) : node; }; // are already known to hyperHTML diff --git a/min.js b/min.js index d0a5e98f..264adb9c 100644 --- a/min.js +++ b/min.js @@ -1,3 +1,3 @@ -/*! (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+">"}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=u;){for(var c=t,l=i;ca;)--c;l=u+r-c;var g=Array(l),b=s[c];for(--n;b;){for(var y=b,w=y.newi,N=y.oldi;n>w;)g[--l]=1,--n;for(;a>N;)g[--l]=-1,--a;g[--l]=0,--n,--a,b=b.prev}for(;n>=t;)g[--l]=1,--n;for(;a>=o;)g[--l]=-1,--a;return g},L=function(e,t,n,r,i,o,a){var u,c,l,s,f,h,d,p=n+o,v=[];e:for(u=0;u<=p;u++){if(u>50)return null;for(d=u-1,f=u?v[u-1]:[0,0],h=v[u]=[],c=-u;c<=u;c+=2){for(s=c===-u||c!==u&&f[d+c-1]=0;u--){for(;s>0&&l>0&&a(r[i+s-1],e[t+l-1]);)m[g--]=0,s--,l--;if(!u)break;d=u-1,f=u?v[u-1]:[0,0],c=s-l,c===-u||c!==u&&f[d+c-1]>>0;n",t(r,o.firstChild.childNodes),r}var i="fragment",o="content"in n("template"),a=o?function(e){var t=n("template");return t.innerHTML=e,t.content}:function(e){var r=n(i),o=n("template"),a=null;if(/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(e)){var u=RegExp.$1;o.innerHTML=""+e+"
",a=o.querySelectorAll(u)}else o.innerHTML=e,a=o.childNodes;return t(r,a),r};return function(e,t){return("svg"===t?r:a)(e)}}(e),Q=function(e,t,n,r,i){var o="importNode"in e,a=e.createDocumentFragment();return a.appendChild(e.createTextNode("g")),a.appendChild(e.createTextNode("")),(o?e.importNode(a,!0):a.cloneNode(!0)).childNodes.length<2?function u(e,t){for(var n=e.cloneNode(),r=e.childNodes||[],i=r.length,o=0;t&&o

',e.content.childNodes[0].getAttribute("tabindex")==X)})(e.createElement("template"))||(X="_dt: "+X.slice(1,-1)+";");var Y="\x3c!--"+X+"--\x3e",ee=8,te=1,ne=3,re=/^(?:style|textarea)$/i,ie=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,oe=" \\f\\n\\r\\t",ae="[ "+oe+"]+[^ \\f\\n\\r\\t\\/>\"'=]+",ue="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",ce="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",le=new RegExp(ue+ae+ce+"+)([ "+oe+"]*/?>)","g"),se=new RegExp(ue+ae+ce+"*)([ "+oe+"]*/>)","g"),fe=new RegExp("("+ae+"\\s*=\\s*)(['\"]?)"+Y+"\\2","gi"),he=new w,de=new w,pe=function(){function e(e,t,n){return t+"-"+n.toLowerCase()}function t(e,t){var n;return t?n=t.cloneNode(!0):(e.setAttribute("style","--hyper:style;"),n=e.getAttributeNode("style")),n.value="",e.setAttributeNode(n),r(n,!0)}function n(t){var n,r=[];for(n in t)r.push(n.replace(o,e),":",t[n],";");return r.join("")}function r(e,t){var r,o;return function(a){var u,c,l,s;switch(typeof a){case"object":if(a){if("object"===r){if(!t&&o!==a)for(c in o)c in a||(e[c]="")}else t?e.value="":e.cssText="";u=t?{}:e;for(c in a)s=a[c],l="number"!=typeof s||i.test(c)?s:s+"px",!t&&/^--/.test(c)?u.setProperty(c,l):u[c]=l;r="object",t?e.value=n(o=u):o=a;break}default:o!=a&&(r="string",o=a,t?e.value=a||"":e.cssText=a||"")}}}var i=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,o=/([^A-Z])([A-Z]+)/g;return function(e,n){return"ownerSVGElement"in e?t(e,n):r(e.style,!1)}}(),ve="ownerSVGElement",me=function(){var t=!1,n=function(r){if(!("raw"in r)||r.propertyIsEnumerable("raw")||!Object.isFrozen(r.raw)||/Firefox\/(\d+)/.test((e.defaultView.navigator||{}).userAgent)&&parseFloat(RegExp.$1)<55){var i={};return(n=function(e){var t="raw"+e.join("raw");return i[t]||(i[t]=e)})(r)}return t=!0,r};return function(e){return t?e:n(e)}}(),ge=function(e){return e.ownerDocument||e},be=function(e){return ge(e).createDocumentFragment()},ye=function(e,t){return ge(e).createTextNode(t)},we="append"in be(e)?function(e,t){e.append.apply(e,t)}:function(e,t){for(var n=t.length,r=0;r"}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=u;){for(var c=t,l=i;ca;)--c;l=u+r-c;var g=Array(l),b=s[c];for(--n;b;){for(var w=b,y=w.newi,N=w.oldi;n>y;)g[--l]=1,--n;for(;a>N;)g[--l]=-1,--a;g[--l]=0,--n,--a,b=b.prev}for(;n>=t;)g[--l]=1,--n;for(;a>=o;)g[--l]=-1,--a;return g},_=function(e,t,n,r,i,o,a){var u,c,l,s,f,h,d,v=n+o,p=[];e:for(u=0;u<=v;u++){if(u>50)return null;for(d=u-1,f=u?p[u-1]:[0,0],h=p[u]=[],c=-u;c<=u;c+=2){for(s=c===-u||c!==u&&f[d+c-1]=0;u--){for(;s>0&&l>0&&a(r[i+s-1],e[t+l-1]);)m[g--]=0,s--,l--;if(!u)break;d=u-1,f=u?p[u-1]:[0,0],c=s-l,c===-u||c!==u&&f[d+c-1]>>0;n",t(r,o.firstChild.childNodes),r}var i="fragment",o="content"in n("template"),a=o?function(e){var t=n("template");return t.innerHTML=e,t.content}:function(e){var r=n(i),o=n("template"),a=null;if(/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(e)){var u=RegExp.$1;o.innerHTML=""+e+"
",a=o.querySelectorAll(u)}else o.innerHTML=e,a=o.childNodes;return t(r,a),r};return function(e,t){return("svg"===t?r:a)(e)}}(e),K=function(e,t,n,r,i){var o="importNode"in e,a=e.createDocumentFragment();return a.appendChild(e.createTextNode("g")),a.appendChild(e.createTextNode("")),(o?e.importNode(a,!0):a.cloneNode(!0)).childNodes.length<2?function u(e,t){for(var n=e.cloneNode(),r=e.childNodes||[],i=r.length,o=0;t&&o

',e.content.childNodes[0].getAttribute("tabindex")==U)})(e.createElement("template"))||(U="_dt: "+U.slice(1,-1)+";");var X="\x3c!--"+U+"--\x3e",Y=8,ee=1,te=3,ne=/^(?:style|textarea)$/i,re=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,ie=" \\f\\n\\r\\t",oe="[ "+ie+"]+[^ \\f\\n\\r\\t\\/>\"'=]+",ae="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",ue="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",ce=new RegExp(ae+oe+ue+"+)([ "+ie+"]*/?>)","g"),le=new RegExp(ae+oe+ue+"*)([ "+ie+"]*/>)","g"),se=new RegExp("("+oe+"\\s*=\\s*)(['\"]?)"+X+"\\2","gi"),fe=new w,he=new w,de=function(){function e(e,t,n){return t+"-"+n.toLowerCase()}function t(e,t){var n;return t?n=t.cloneNode(!0):(e.setAttribute("style","--hyper:style;"),n=e.getAttributeNode("style")),n.value="",e.setAttributeNode(n),r(n,!0)}function n(t){var n,r=[];for(n in t)r.push(n.replace(o,e),":",t[n],";");return r.join("")}function r(e,t){var r,o;return function(a){var u,c,l,s;switch(typeof a){case"object":if(a){if("object"===r){if(!t&&o!==a)for(c in o)c in a||(e[c]="")}else t?e.value="":e.cssText="";u=t?{}:e;for(c in a)s=a[c],l="number"!=typeof s||i.test(c)?s:s+"px",!t&&/^--/.test(c)?u.setProperty(c,l):u[c]=l;r="object",t?e.value=n(o=u):o=a;break}default:o!=a&&(r="string",o=a,t?e.value=a||"":e.cssText=a||"")}}}var i=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,o=/([^A-Z])([A-Z]+)/g;return function(e,n){return"ownerSVGElement"in e?t(e,n):r(e.style,!1)}}(),ve="ownerSVGElement",pe=function(e,t){function n(t){var n=this.n=e.call(t,0),r=n[0];this.first=r,this.last=n[n.length-1],this.d=r.ownerDocument||r,this.f=null}return t=n.prototype,t.remove=function(e){var t=this.n,n=this.first,r=this.last;if(this.f=null,e&&2===t.length)r.parentNode.removeChild(r);else{var i=this.d.createRange();i.setStartBefore(e?t[1]:n),i.setEndAfter(r),i.deleteContents()}return n},t.valueOf=function(e){var t=this.f,n=null==t;if(n&&(t=this.f=this.d.createDocumentFragment()),n||e)for(var r=this.n,i=0,o=r.length;i"]); - - _templateObject137 = function _templateObject137() { - return data; - }; - - return data; - } - - function _templateObject136() { - var data = _taggedTemplateLiteral([""]); - - _templateObject136 = function _templateObject136() { - return data; - }; - - return data; - } - - function _templateObject135() { - var data = _taggedTemplateLiteral([""]); - - _templateObject135 = function _templateObject135() { - return data; - }; - - return data; - } - - function _templateObject134() { - var data = _taggedTemplateLiteral(["

"]); - - _templateObject134 = function _templateObject134() { - return data; - }; - - return data; - } - - function _templateObject133() { - var data = _taggedTemplateLiteral(["", " - ", ""]); - - _templateObject133 = function _templateObject133() { - return data; - }; - - return data; - } - - function _templateObject132() { - var data = _taggedTemplateLiteral(["", ""]); - - _templateObject132 = function _templateObject132() { - return data; - }; - - return data; - } - - function _templateObject131() { - var data = _taggedTemplateLiteral(["

c

"]); - - _templateObject131 = function _templateObject131() { - return data; - }; - - return data; - } - function _templateObject130() { - var data = _taggedTemplateLiteral(["

a

b

"]); + var data = _taggedTemplateLiteral([""]); _templateObject130 = function _templateObject130() { return data; @@ -163,7 +93,7 @@ } function _templateObject129() { - var data = _taggedTemplateLiteral(["", ""]); + var data = _taggedTemplateLiteral([""]); _templateObject129 = function _templateObject129() { return data; @@ -173,7 +103,7 @@ } function _templateObject128() { - var data = _taggedTemplateLiteral(["", ""]); + var data = _taggedTemplateLiteral([""]); _templateObject128 = function _templateObject128() { return data; @@ -183,7 +113,7 @@ } function _templateObject127() { - var data = _taggedTemplateLiteral(["\n
  • ", "
    • \n "]); + var data = _taggedTemplateLiteral(["

    "]); _templateObject127 = function _templateObject127() { return data; @@ -193,7 +123,7 @@ } function _templateObject126() { - var data = _taggedTemplateLiteral(["\n

    A simple menu
    \n
      \n ", "\n
    \n "]); + var data = _taggedTemplateLiteral(["", " - ", ""]); _templateObject126 = function _templateObject126() { return data; @@ -203,7 +133,7 @@ } function _templateObject125() { - var data = _taggedTemplateLiteral(["\n
    A simple menu
    \n
      \n ", "\n
    \n "]); + var data = _taggedTemplateLiteral(["", ""]); _templateObject125 = function _templateObject125() { return data; @@ -213,7 +143,7 @@ } function _templateObject124() { - var data = _taggedTemplateLiteral(["\n
    I'm parent\n ", "\n
    \n "]); + var data = _taggedTemplateLiteral(["

    c

    "]); _templateObject124 = function _templateObject124() { return data; @@ -223,7 +153,7 @@ } function _templateObject123() { - var data = _taggedTemplateLiteral(["\n
    I'm child\n ", "\n
    \n "]); + var data = _taggedTemplateLiteral(["

    a

    b

    "]); _templateObject123 = function _templateObject123() { return data; @@ -233,7 +163,7 @@ } function _templateObject122() { - var data = _taggedTemplateLiteral(["\n

    I'm grand child

    "]); + var data = _taggedTemplateLiteral(["", ""]); _templateObject122 = function _templateObject122() { return data; @@ -243,7 +173,7 @@ } function _templateObject121() { - var data = _taggedTemplateLiteral(["\n
    \n