diff --git a/cjs/hyper/render.js b/cjs/hyper/render.js index 8e1d4339..cbb929ba 100644 --- a/cjs/hyper/render.js +++ b/cjs/hyper/render.js @@ -1,9 +1,9 @@ 'use strict'; const WeakMap = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/weakmap')); -const unique = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/template-literal')); const {OWNER_SVG_ELEMENT} = require('../shared/constants.js'); const {Tagger} = require('../objects/Updates.js'); +const {reArguments} = require('../shared/utils.js'); // a weak collection of contexts that // are already known to hyperHTML @@ -13,12 +13,13 @@ const bewitched = new WeakMap; // the main tag function in charge of fully upgrading // or simply updating, contexts used as hyperHTML targets. // The `this` context is either a regular DOM node or a fragment. -function render(template) { +function render() { const wicked = bewitched.get(this); - if (wicked && wicked.template === unique(template)) { - wicked.tagger.apply(null, arguments); + const args = reArguments.apply(null, arguments); + if (wicked && wicked.template === args[0]) { + wicked.tagger.apply(null, args); } else { - upgrade.apply(this, arguments); + upgrade.apply(this, args); } return this; } @@ -27,13 +28,13 @@ function render(template) { // parse it once, if unknown, to map all interpolations // as single DOM callbacks, relate such template // to the current context, and render it after cleaning the context up -function upgrade(template) { - template = unique(template); +function upgrade() { + const args = reArguments.apply(null, arguments); const type = OWNER_SVG_ELEMENT in this ? 'svg' : 'html'; const tagger = new Tagger(type); - bewitched.set(this, {tagger, template}); + bewitched.set(this, {tagger, template: args[0]}); this.textContent = ''; - this.appendChild(tagger.apply(null, arguments)); + this.appendChild(tagger.apply(null, args)); } Object.defineProperty(exports, '__esModule', {value: true}).default = render; diff --git a/cjs/hyper/wire.js b/cjs/hyper/wire.js index c14d9815..8936e267 100644 --- a/cjs/hyper/wire.js +++ b/cjs/hyper/wire.js @@ -1,12 +1,12 @@ 'use strict'; const WeakMap = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/weakmap')); -const unique = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/template-literal')); const trim = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('@ungap/trim')); const {ELEMENT_NODE} = require('../shared/constants.js'); const Wire = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('../classes/Wire.js')); const {Tagger} = require('../objects/Updates.js'); +const {reArguments} = require('../shared/utils.js'); // all wires used per each context const wires = new WeakMap; @@ -17,7 +17,7 @@ const wires = new WeakMap; // This provides the ability to have a unique DOM structure // related to a unique JS object through a reusable template literal. // A wire can specify a type, as svg or html, and also an id -// via html:id or :id convention. Such :id allows same JS objects +// via the html:id or :id convention. Such :id allows same JS objects // to be associated to different DOM structures accordingly with // the used template literal without losing previously rendered parts. const wire = (obj, type) => obj == null ? @@ -32,14 +32,14 @@ const wire = (obj, type) => obj == null ? // in charge of updating its content like a bound element would do. const content = type => { let wire, tagger, template; - return function (statics) { - statics = unique(statics); - if (template !== statics) { - template = statics; + return function () { + const args = reArguments.apply(null, arguments); + if (template !== args[0]) { + template = args[0]; tagger = new Tagger(type); - wire = wireContent(tagger.apply(tagger, arguments)); + wire = wireContent(tagger.apply(tagger, args)); } else { - tagger.apply(tagger, arguments); + tagger.apply(tagger, args); } return wire; }; @@ -47,7 +47,7 @@ const content = type => { // wires are weakly created through objects. // Each object can have multiple wires associated -// and this is thanks to the type + :id feature. +// thanks to the type + :id feature. const weakly = (obj, type) => { const i = type.indexOf(':'); let wire = wires.get(obj); @@ -61,7 +61,7 @@ const weakly = (obj, type) => { return wire[id] || (wire[id] = content(type)); }; -// a document fragment loses its nodes as soon +// A document fragment loses its nodes as soon // as it's appended into another node. // This would easily lose wired content // so that on a second render call, the parent diff --git a/cjs/objects/Basic.js b/cjs/objects/Basic.js new file mode 100644 index 00000000..a52cd553 --- /dev/null +++ b/cjs/objects/Basic.js @@ -0,0 +1,160 @@ +'use strict'; +const CustomEvent = (m => m.__esModule ? m.default : m)(require('@ungap/custom-event')); +const WeakSet = (m => m.__esModule ? m.default : m)(require('@ungap/essential-weakset')); +const disconnected = (m => m.__esModule ? m.default : m)(require('disconnected')); +const domdiff = (m => m.__esModule ? m.default : m)(require('domdiff')); +const domtagger = (m => m.__esModule ? m.default : m)(require('domtagger')); +const hyperStyle = (m => m.__esModule ? m.default : m)(require('hyperhtml-style')); + +const CONNECTED = 'connected'; +const DISCONNECTED = 'dis' + CONNECTED; + +const slice = [].slice; +const observe = disconnected({Event: CustomEvent, WeakSet}); + +exports.Tagger = Tagger; +exports.observe = observe; + +// list of attributes that should not be directly assigned +const readOnly = /^(?:form|list)$/i; + +function Tagger(type) { + this.type = type; + return domtagger(this); +} + +Tagger.prototype = { + + attribute(node, name, original) { + const isSVG = 'ownerSVGElement' in node; + let oldValue; + if (name === 'style') + return hyperStyle(node); + else if ('on' === name.slice(0, 2)) { + let type = name.slice(2); + if (type === CONNECTED || type === DISCONNECTED) + observe(node); + else if (name.toLowerCase() + in node) + type = type.toLowerCase(); + return newValue => { + if (oldValue !== newValue) { + if (oldValue) + node.removeEventListener(type, oldValue, false); + oldValue = newValue; + if (newValue) + node.addEventListener(type, newValue, false); + } + }; + } + else if ( + name === 'data' || + (!isSVG && name in node && !readOnly.test(name)) + ) { + return newValue => { + if (oldValue !== newValue) { + oldValue = newValue; + if (node[name] !== newValue) { + node[name] = newValue; + if (newValue == null) { + node.removeAttribute(name); + } + } + } + }; + } + else { + let owner = false; + const attribute = original.cloneNode(true); + return newValue => { + if (oldValue !== newValue) { + oldValue = newValue; + if (attribute.value !== newValue) { + if (newValue == null) { + if (owner) { + owner = false; + node.removeAttributeNode(attribute); + } + attribute.value = newValue; + } else { + attribute.value = newValue; + if (!owner) { + owner = true; + node.setAttributeNode(attribute); + } + } + } + } + }; + } + }, + + any(node, childNodes) { + const diffOptions = {before: node}; + let fastPath = false; + let oldValue; + const anyContent = value => { + switch (typeof value) { + case 'string': + case 'number': + case 'boolean': + if (fastPath) { + if (oldValue !== value) { + oldValue = value; + childNodes[0].textContent = value; + } + } else { + fastPath = true; + oldValue = value; + childNodes = domdiff( + node.parentNode, + childNodes, + [node.ownerDocument.createTextNode(value)], + diffOptions + ); + } + break; + case 'function': + anyContent(value(node)); + break; + case 'object': + case 'undefined': + if (value == null) { + fastPath = false; + childNodes = domdiff( + node.parentNode, + childNodes, + [], + diffOptions + ); + break; + } + default: + fastPath = false; + oldValue = value; + if ('ELEMENT_NODE' in value) { + childNodes = domdiff( + node.parentNode, + childNodes, + value.nodeType === 11 ? + slice.call(value.childNodes) : + [value], + diffOptions + ); + } + break; + } + }; + return anyContent; + }, + + text(node) { + let oldValue; + return value => { + if (oldValue !== value) { + oldValue = value; + node.textContent = value == null ? '' : value; + } + }; + } +}; diff --git a/cjs/objects/Updates.js b/cjs/objects/Updates.js index a75244b4..bd45002a 100644 --- a/cjs/objects/Updates.js +++ b/cjs/objects/Updates.js @@ -7,6 +7,7 @@ const createContent = (m => m.__esModule ? /* istanbul ignore next */ m.default 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 { CONNECTED, DISCONNECTED, DOCUMENT_FRAGMENT_NODE, OWNER_SVG_ELEMENT @@ -14,7 +15,6 @@ const { 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 Style = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('./Style.js')); const Intent = (m => m.__esModule ? /* istanbul ignore next */ m.default : /* istanbul ignore next */ m)(require('./Intent.js')); const { slice, text } = require('../shared/utils.js'); @@ -89,9 +89,8 @@ Tagger.prototype = { let oldValue; // if the attribute is the style one // handle it differently from others - if (name === 'style') { - return Style(node, original, isSVG); - } + if (name === 'style') + return hyperStyle(node, original, isSVG); // the name is an event one, // add/remove event listeners accordingly else if (/^on/.test(name)) { diff --git a/cjs/objects/hyperstyle.js b/cjs/objects/hyperstyle.js new file mode 100644 index 00000000..20caaea8 --- /dev/null +++ b/cjs/objects/hyperstyle.js @@ -0,0 +1,79 @@ +'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/utils.js b/cjs/shared/utils.js index 2d9414ca..d5ae3d15 100644 --- a/cjs/shared/utils.js +++ b/cjs/shared/utils.js @@ -1,4 +1,6 @@ 'use strict'; +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; @@ -24,6 +26,15 @@ const append = 'append' in fragment(document) ? }; exports.append = append; +// normalizes the template once for all arguments cases +const reArguments = function (template) { + const args = [unique(template)]; + for (let i = 1, length = arguments.length; i < length; i++) + args[i] = arguments[i]; + return args; +} +exports.reArguments = reArguments + // just recycling a one-off array to use slice // in every needed place const slice = [].slice; diff --git a/esm.js b/esm.js index 147a04d3..d1f3b211 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(ee).replace(de,o).replace(fe,r)}function r(e,t,n,r){return"<"+t+n.replace(he,i)+r}function i(e,t,n){return t+(n||'"')+Y+(n||'"')}function o(e,t,n){return ae.test(t)?e:"<"+t+n+">"}function a(e,t,n){return{type:e,name:n,node:t,path:u(t)}}function u(e){var t,n=[];switch(e.nodeType){case re:case ne:t=e;break;case te:t=e.parentNode,f(n,t,e);break;default:t=e.ownerElement}for(;t=(e=t).parentNode;)f(n,t,e);return n}function c(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},P=function(e,t,n,r,i,o,a){var u=n+o,c=[],l=void 0,s=void 0,f=void 0,d=void 0,h=void 0,v=void 0,p=void 0;e:for(l=0;l<=u;l++){if(l>50)return null;for(p=l-1,h=l?c[l-1]:[0,0],v=c[l]=[],s=-l;s<=l;s+=2){for(d=s===-l||s!==l&&h[p+s-1]=0;l--){for(;d>0&&f>0&&a(r[i+d-1],e[t+f-1]);)m[g--]=0,d--,f--;if(!l)break;p=l-1,h=l?c[l-1]:[0,0],s=d-f,s===-l||s!==l&&h[p+s-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),U=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\"'=]+",le="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",se="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",fe=new RegExp(le+ce+se+"+)([ "+ue+"]*/?>)","g"),de=new RegExp(le+ce+se+"*)([ "+ue+"]*/>)","g"),he=new RegExp("("+ce+"\\s*=\\s*)(['\"]?)"+ee+"\\2","gi"),ve="".trim||function(){return String(this).replace(/^\s+|\s+/g,"")},pe=new N,me=new N,ge=e.defaultView,be="ownerSVGElement",we=function(e){return e.ownerDocument||e},ye=function(e){return we(e).createDocumentFragment()},Ne=function(e,t){return we(e).createTextNode(t)},xe="append"in ye(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){return{type:e,name:n,node:t,path:u(t)}}function u(e){var t,n=[];switch(e.nodeType){case re:case ne:t=e;break;case te:t=e.parentNode,f(n,t,e);break;default:t=e.ownerElement}for(;t=(e=t).parentNode;)f(n,t,e);return n}function c(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},P=function(e,t,n,r,i,o,a){var u=n+o,c=[],l=void 0,s=void 0,f=void 0,h=void 0,d=void 0,v=void 0,p=void 0;e:for(l=0;l<=u;l++){if(l>50)return null;for(p=l-1,d=l?c[l-1]:[0,0],v=c[l]=[],s=-l;s<=l;s+=2){for(h=s===-l||s!==l&&d[p+s-1]=0;l--){for(;h>0&&f>0&&a(r[i+h-1],e[t+f-1]);)m[g--]=0,h--,f--;if(!l)break;p=l-1,d=l?c[l-1]:[0,0],s=h-f,s===-l||s!==l&&d[p+s-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),U=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\"'=]+",le="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",se="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",fe=new RegExp(le+ce+se+"+)([ "+ue+"]*/?>)","g"),he=new RegExp(le+ce+se+"*)([ "+ue+"]*/>)","g"),de=new RegExp("("+ce+"\\s*=\\s*)(['\"]?)"+ee+"\\2","gi"),ve="".trim||function(){return String(this).replace(/^\s+|\s+/g,"")},pe=new N,me=new N,ge=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)}}(),be=e.defaultView,ye="ownerSVGElement",we=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)}}(),Ne=function(e){return e.ownerDocument||e},xe=function(e){return Ne(e).createDocumentFragment()},Ee=function(e,t){return Ne(e).createTextNode(t)},ke="append"in xe(e)?function(e,t){e.append.apply(e,t)}:function(e,t){for(var n=t.length,r=0;r obj == null ? // in charge of updating its content like a bound element would do. const content = type => { let wire, tagger, template; - return function (statics) { - statics = unique(statics); - if (template !== statics) { - template = statics; + return function () { + const args = reArguments.apply(null, arguments); + if (template !== args[0]) { + template = args[0]; tagger = new Tagger(type); - wire = wireContent(tagger.apply(tagger, arguments)); + wire = wireContent(tagger.apply(tagger, args)); } else { - tagger.apply(tagger, arguments); + tagger.apply(tagger, args); } return wire; }; diff --git a/esm/objects/Basic.js b/esm/objects/Basic.js new file mode 100644 index 00000000..e69de29b diff --git a/esm/objects/Style.js b/esm/objects/Style.js deleted file mode 100644 index c74ccf94..00000000 --- a/esm/objects/Style.js +++ /dev/null @@ -1,81 +0,0 @@ -// 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) -export 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/esm/objects/Updates.js b/esm/objects/Updates.js index 659ebfe7..8283e753 100644 --- a/esm/objects/Updates.js +++ b/esm/objects/Updates.js @@ -6,6 +6,7 @@ import createContent from '@ungap/create-content'; import disconnected from 'disconnected'; import domdiff from 'domdiff'; import domtagger from 'domtagger'; +import hyperStyle from 'hyperhtml-style'; import { CONNECTED, DISCONNECTED, @@ -15,7 +16,6 @@ import { import Component from '../classes/Component.js'; import Wire from '../classes/Wire.js'; -import Style from './Style.js'; import Intent from './Intent.js'; import { slice, text } from '../shared/utils.js'; @@ -89,9 +89,8 @@ Tagger.prototype = { let oldValue; // if the attribute is the style one // handle it differently from others - if (name === 'style') { - return Style(node, original, isSVG); - } + if (name === 'style') + return hyperStyle(node, original, isSVG); // the name is an event one, // add/remove event listeners accordingly else if (/^on/.test(name)) { diff --git a/esm/shared/utils.js b/esm/shared/utils.js index b5a024be..42391f27 100644 --- a/esm/shared/utils.js +++ b/esm/shared/utils.js @@ -1,3 +1,5 @@ +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(); @@ -19,6 +21,14 @@ export const append = 'append' in fragment(document) ? } }; +// normalizes the template once for all arguments cases +export const reArguments = function (template) { + const args = [unique(template)]; + for (let i = 1, length = arguments.length; i < length; i++) + args[i] = arguments[i]; + return args; +} + // just recycling a one-off array to use slice // in every needed place export const slice = [].slice; diff --git a/index.js b/index.js index 6f38c98a..b38b4084 100644 --- a/index.js +++ b/index.js @@ -457,13 +457,15 @@ var hyperHTML = (function (document) { } catch (CustomEvent) { self$3.CustomEvent = function CustomEvent(type, init) { if (!init) init = {}; - var e = document.createEvent('Event'); var bubbles = !!init.bubbles; var cancelable = !!init.cancelable; + var e = document.createEvent('Event'); e.initEvent(type, bubbles, cancelable); - e.bubbles = bubbles; - e.cancelable = cancelable; e.detail = init.detail; + try { + e.bubbles = bubbles; + e.cancelable = cancelable; + } catch (e) {} return e; }; } @@ -783,7 +785,10 @@ var hyperHTML = (function (document) { } */ } - for (var children = node.children, length = children.length, i = 0; i < length; dispatchTarget(children[i++], event, type, counter)) {} + for (var + // apparently is node.children || IE11 ... ^_^;; + // https://github.com/WebReflection/disconnected/issues/1 + children = node.children || [], length = children.length, i = 0; i < length; dispatchTarget(children[i++], event, type, counter)) {} } function Tracker() { this[CONNECTED] = new WeakSet(); @@ -1062,6 +1067,77 @@ var hyperHTML = (function (document) { }; } + /*! (c) Andrea Giammarchi - ISC */ + var hyperStyle = function () { + // 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, original) { + return 'ownerSVGElement' in node ? svg(node, original) : update(node.style, false); + }; + function ized($0, $1, $2) { + return $1 + '-' + $2.toLowerCase(); + } + function svg(node, original) { + var style; + if (original) style = original.cloneNode(true);else { + node.setAttribute('style', '--hyper:style;'); + style = node.getAttributeNode('style'); + } + style.value = ''; + node.setAttributeNode(style); + return update(style, true); + } + function toStyle(object) { + var key, + css = []; + for (key in object) { + css.push(key.replace(hyphen, ized), ':', object[key], ';'); + }return css.join(''); + } + function update(style, isSVG) { + var oldType, oldValue; + return function (newValue) { + var info, key, styleValue, value; + switch (typeof newValue) { + case 'object': + if (newValue) { + if (oldType === 'object') { + if (!isSVG) { + if (oldValue !== newValue) { + for (key in oldValue) { + if (!(key in newValue)) { + style[key] = ''; + } + } + } + } + } else { + if (isSVG) style.value = '';else style.cssText = ''; + } + info = isSVG ? {} : style; + for (key in newValue) { + value = newValue[key]; + styleValue = typeof value === 'number' && !IS_NON_DIMENSIONAL.test(key) ? value + 'px' : value; + if (!isSVG && /^--/.test(key)) info.setProperty(key, styleValue);else info[key] = styleValue; + } + oldType = 'object'; + if (isSVG) style.value = toStyle(oldValue = info);else oldValue = newValue; + break; + } + default: + if (oldValue != newValue) { + oldType = 'string'; + oldValue = newValue; + if (isSVG) style.value = newValue || '';else style.cssText = newValue || ''; + } + break; + } + }; + } + }(); + var G = document.defaultView; // Node.CONSTANTS @@ -1077,6 +1153,36 @@ var hyperHTML = (function (document) { var CONNECTED = 'connected'; var DISCONNECTED = 'dis' + CONNECTED; + var templateLiteral = function () { + + var RAW = 'raw'; + var isNoOp = false; + var _templateLiteral = function templateLiteral(tl) { + if ( + // for badly transpiled literals + !(RAW in tl) || + // for some version of TypeScript + tl.propertyIsEnumerable(RAW) || + // and some other version of TypeScript + !Object.isFrozen(tl.raw) || + // or for Firefox < 55 + /Firefox\/(\d+)/.test((document.defaultView.navigator || {}).userAgent) && parseFloat(RegExp.$1) < 55) { + var forever = {}; + _templateLiteral = function templateLiteral(tl) { + var key = RAW + tl.join(RAW); + return forever[key] || (forever[key] = tl); + }; + return _templateLiteral(tl); + } else { + isNoOp = true; + return tl; + } + }; + return function (tl) { + return isNoOp ? tl : _templateLiteral(tl); + }; + }(); + // these are tiny helpers to simplify most common operations needed here var doc = function doc(node) { return node.ownerDocument || node; @@ -1102,6 +1208,14 @@ var hyperHTML = (function (document) { } }; + // normalizes the template once for all arguments cases + var reArguments = function reArguments(template) { + var args = [templateLiteral(template)]; + for (var i = 1, length = arguments.length; i < length; i++) { + args[i] = arguments[i]; + }return args; + }; + // just recycling a one-off array to use slice // in every needed place var slice = [].slice; @@ -1139,77 +1253,6 @@ var hyperHTML = (function (document) { return first; }; - // from https://github.com/developit/preact/blob/33fc697ac11762a1cb6e71e9847670d047af7ce5/src/constants.js - var 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) - var Style = (function (node, original, isSVG) { - if (isSVG) { - var 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 - var update = function update(style, isSVG) { - var oldType = void 0, - oldValue = void 0; - return function (newValue) { - switch (typeof newValue) { - case 'object': - if (newValue) { - if (oldType === 'object') { - if (!isSVG) { - if (oldValue !== newValue) { - for (var key in oldValue) { - if (!(key in newValue)) { - style[key] = ''; - } - } - } - } - } else { - if (isSVG) style.value = '';else style.cssText = ''; - } - var info = isSVG ? {} : style; - for (var _key in newValue) { - var value = newValue[_key]; - var 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; - } - }; - }; - - var hyphen = /([^A-Z])([A-Z]+)/g; - var ized = function ized($0, $1, $2) { - return $1 + '-' + $2.toLowerCase(); - }; - var toStyle = function toStyle(object) { - var css = []; - for (var key in object) { - css.push(key.replace(hyphen, ized), ':', object[key], ';'); - } - return css.join(''); - }; - var observe = disconnected({ Event: CustomEvent$1, WeakSet: WeakSet$1 }); // returns an intent to explicitly inject content as html @@ -1276,9 +1319,7 @@ var hyperHTML = (function (document) { var oldValue = void 0; // if the attribute is the style one // handle it differently from others - if (name === 'style') { - return Style(node, original, isSVG); - } + if (name === 'style') return hyperStyle(node, original, isSVG); // the name is an event one, // add/remove event listeners accordingly else if (/^on/.test(name)) { @@ -1475,36 +1516,6 @@ var hyperHTML = (function (document) { } }; - var templateLiteral = function () { - - var RAW = 'raw'; - var isNoOp = false; - var _templateLiteral = function templateLiteral(tl) { - if ( - // for badly transpiled literals - !(RAW in tl) || - // for some version of TypeScript - tl.propertyIsEnumerable(RAW) || - // and some other version of TypeScript - !Object.isFrozen(tl.raw) || - // or for Firefox < 55 - /Firefox\/(\d+)/.test((document.defaultView.navigator || {}).userAgent) && parseFloat(RegExp.$1) < 55) { - var forever = {}; - _templateLiteral = function templateLiteral(tl) { - var key = RAW + tl.join(RAW); - return forever[key] || (forever[key] = tl); - }; - return _templateLiteral(tl); - } else { - isNoOp = true; - return tl; - } - }; - return function (tl) { - return isNoOp ? tl : _templateLiteral(tl); - }; - }(); - // all wires used per each context var wires = new WeakMap$1(); @@ -1514,7 +1525,7 @@ var hyperHTML = (function (document) { // This provides the ability to have a unique DOM structure // related to a unique JS object through a reusable template literal. // A wire can specify a type, as svg or html, and also an id - // via html:id or :id convention. Such :id allows same JS objects + // via the html:id or :id convention. Such :id allows same JS objects // to be associated to different DOM structures accordingly with // the used template literal without losing previously rendered parts. var wire = function wire(obj, type) { @@ -1531,14 +1542,14 @@ var hyperHTML = (function (document) { var wire = void 0, tagger = void 0, template = void 0; - return function (statics) { - statics = templateLiteral(statics); - if (template !== statics) { - template = statics; + return function () { + var args = reArguments.apply(null, arguments); + if (template !== args[0]) { + template = args[0]; tagger = new Tagger(type); - wire = wireContent(tagger.apply(tagger, arguments)); + wire = wireContent(tagger.apply(tagger, args)); } else { - tagger.apply(tagger, arguments); + tagger.apply(tagger, args); } return wire; }; @@ -1546,7 +1557,7 @@ var hyperHTML = (function (document) { // wires are weakly created through objects. // Each object can have multiple wires associated - // and this is thanks to the type + :id feature. + // thanks to the type + :id feature. var weakly = function weakly(obj, type) { var i = type.indexOf(':'); var wire = wires.get(obj); @@ -1559,7 +1570,7 @@ var hyperHTML = (function (document) { return wire[id] || (wire[id] = content(type)); }; - // a document fragment loses its nodes as soon + // A document fragment loses its nodes as soon // as it's appended into another node. // This would easily lose wired content // so that on a second render call, the parent @@ -1590,12 +1601,13 @@ var hyperHTML = (function (document) { // the main tag function in charge of fully upgrading // or simply updating, contexts used as hyperHTML targets. // The `this` context is either a regular DOM node or a fragment. - function render(template) { + function render() { var wicked = bewitched.get(this); - if (wicked && wicked.template === templateLiteral(template)) { - wicked.tagger.apply(null, arguments); + var args = reArguments.apply(null, arguments); + if (wicked && wicked.template === args[0]) { + wicked.tagger.apply(null, args); } else { - upgrade.apply(this, arguments); + upgrade.apply(this, args); } return this; } @@ -1604,13 +1616,13 @@ var hyperHTML = (function (document) { // parse it once, if unknown, to map all interpolations // as single DOM callbacks, relate such template // to the current context, and render it after cleaning the context up - function upgrade(template) { - template = templateLiteral(template); + function upgrade() { + var args = reArguments.apply(null, arguments); var type = OWNER_SVG_ELEMENT in this ? 'svg' : 'html'; var tagger = new Tagger(type); - bewitched.set(this, { tagger: tagger, template: template }); + bewitched.set(this, { tagger: tagger, template: args[0] }); this.textContent = ''; - this.appendChild(tagger.apply(null, arguments)); + this.appendChild(tagger.apply(null, args)); } /*! (c) Andrea Giammarchi (ISC) */ diff --git a/min.js b/min.js index 9399762a..a592a8ba 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(ee).replace(de,o).replace(fe,r)}function r(e,t,n,r){return"<"+t+n.replace(he,i)+r}function i(e,t,n){return t+(n||'"')+Y+(n||'"')}function o(e,t,n){return ae.test(t)?e:"<"+t+n+">"}function a(e,t,n){return{type:e,name:n,node:t,path:u(t)}}function u(e){var t,n=[];switch(e.nodeType){case re:case ne:t=e;break;case te:t=e.parentNode,f(n,t,e);break;default:t=e.ownerElement}for(;t=(e=t).parentNode;)f(n,t,e);return n}function c(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},P=function(e,t,n,r,i,o,a){var u=n+o,c=[],l=void 0,s=void 0,f=void 0,d=void 0,h=void 0,v=void 0,p=void 0;e:for(l=0;l<=u;l++){if(l>50)return null;for(p=l-1,h=l?c[l-1]:[0,0],v=c[l]=[],s=-l;s<=l;s+=2){for(d=s===-l||s!==l&&h[p+s-1]=0;l--){for(;d>0&&f>0&&a(r[i+d-1],e[t+f-1]);)m[g--]=0,d--,f--;if(!l)break;p=l-1,h=l?c[l-1]:[0,0],s=d-f,s===-l||s!==l&&h[p+s-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),U=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\"'=]+",le="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",se="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",fe=new RegExp(le+ce+se+"+)([ "+ue+"]*/?>)","g"),de=new RegExp(le+ce+se+"*)([ "+ue+"]*/>)","g"),he=new RegExp("("+ce+"\\s*=\\s*)(['\"]?)"+ee+"\\2","gi"),ve="".trim||function(){return String(this).replace(/^\s+|\s+/g,"")},pe=new N,me=new N,ge=e.defaultView,be="ownerSVGElement",we=function(e){return e.ownerDocument||e},ye=function(e){return we(e).createDocumentFragment()},Ne=function(e,t){return we(e).createTextNode(t)},xe="append"in ye(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){return{type:e,name:n,node:t,path:u(t)}}function u(e){var t,n=[];switch(e.nodeType){case re:case ne:t=e;break;case te:t=e.parentNode,f(n,t,e);break;default:t=e.ownerElement}for(;t=(e=t).parentNode;)f(n,t,e);return n}function c(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},P=function(e,t,n,r,i,o,a){var u=n+o,c=[],l=void 0,s=void 0,f=void 0,h=void 0,d=void 0,v=void 0,p=void 0;e:for(l=0;l<=u;l++){if(l>50)return null;for(p=l-1,d=l?c[l-1]:[0,0],v=c[l]=[],s=-l;s<=l;s+=2){for(h=s===-l||s!==l&&d[p+s-1]=0;l--){for(;h>0&&f>0&&a(r[i+h-1],e[t+f-1]);)m[g--]=0,h--,f--;if(!l)break;p=l-1,d=l?c[l-1]:[0,0],s=h-f,s===-l||s!==l&&d[p+s-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),U=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\"'=]+",le="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",se="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",fe=new RegExp(le+ce+se+"+)([ "+ue+"]*/?>)","g"),he=new RegExp(le+ce+se+"*)([ "+ue+"]*/>)","g"),de=new RegExp("("+ce+"\\s*=\\s*)(['\"]?)"+ee+"\\2","gi"),ve="".trim||function(){return String(this).replace(/^\s+|\s+/g,"")},pe=new N,me=new N,ge=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)}}(),be=e.defaultView,ye="ownerSVGElement",we=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)}}(),Ne=function(e){return e.ownerDocument||e},xe=function(e){return Ne(e).createDocumentFragment()},Ee=function(e,t){return Ne(e).createTextNode(t)},ke="append"in xe(e)?function(e,t){e.append.apply(e,t)}:function(e,t){for(var n=t.length,r=0;r + '], ['']), + _templateObject38 = _taggedTemplateLiteral([''], ['']), _templateObject39 = _taggedTemplateLiteral([''], ['']), _templateObject40 = _taggedTemplateLiteral(['\n '], ['\n ']), _templateObject41 = _taggedTemplateLiteral(['\n
First name: ', '
\n

'], ['\n
First name: ', '
\n

']), @@ -673,6 +673,17 @@ tressa.async(function (done) { }).then(function () { tressa.log('## any content extras'); var div = document.createElement('div'); + var html = hyperHTML.bind(div); + setContent(undefined); + tressa.assert(/

<\/p>/.test(div.innerHTML), 'expected layout'); + setContent({ text: '' }); + tressa.assert(/

<img(?: ?\/)?><\/p>/.test(div.innerHTML), 'expected text'); + function setContent(which) { + return html(_templateObject3, which); + } +}).then(function () { + tressa.log('## any different content extras'); + var div = document.createElement('div'); hyperHTML.bind(div)(_templateObject3, undefined); tressa.assert(/

<\/p>/.test(div.innerHTML), 'expected layout'); hyperHTML.bind(div)(_templateObject3, { text: '' }); @@ -798,11 +809,11 @@ tressa.async(function (done) { _inherits(Rect, _hyperHTML$Component2); function Rect(state) { - var _this2; - _classCallCheck(this, Rect); - (_this2 = _possibleConstructorReturn(this, (Rect.__proto__ || Object.getPrototypeOf(Rect)).call(this)), _this2).setState(state, false); + var _this2 = _possibleConstructorReturn(this, (Rect.__proto__ || Object.getPrototypeOf(Rect)).call(this)); + + _this2.setState(state, false); return _this2; } @@ -820,11 +831,11 @@ tressa.async(function (done) { _inherits(Paragraph, _hyperHTML$Component3); function Paragraph(state) { - var _this3; - _classCallCheck(this, Paragraph); - (_this3 = _possibleConstructorReturn(this, (Paragraph.__proto__ || Object.getPrototypeOf(Paragraph)).call(this)), _this3).setState(state); + var _this3 = _possibleConstructorReturn(this, (Paragraph.__proto__ || Object.getPrototypeOf(Paragraph)).call(this)); + + _this3.setState(state); return _this3; } @@ -1108,7 +1119,7 @@ tressa.async(function (done) { p('font-size: 18px'); tressa.assert(node.style.fontSize, node.style.fontSize); p({ '--custom-color': 'red' }); - tressa.assert(node.style.getPropertyValue('--custom-color') === 'red', 'custom style'); + 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('## '); var div = hyperHTML.wire()(_templateObject64, 1); @@ -1421,7 +1432,7 @@ tressa.async(function (done) { }).then(function () { tressa.log('## define(hyper-attribute, callback)'); var a = document.createElement('div'); - var random = Math.random(); + var random = Math.random().toPrecision(6); // IE < 11 var result = []; hyperHTML.define('hyper-attribute', function (target, value) { result.push(target, value); diff --git a/test/test.js b/test/test.js index 7897384b..ae739f34 100644 --- a/test/test.js +++ b/test/test.js @@ -486,7 +486,7 @@ tressa.async(function (done) { var div = document.createElement('div'); document.body.appendChild(div); hyperHTML.bind(div)`