From 2c803d48bcd06e0869b0e59e913d59055b188427 Mon Sep 17 00:00:00 2001 From: Andrea Giammarchi Date: Thu, 29 Nov 2018 18:04:02 +0100 Subject: [PATCH 1/3] using external hyperhtml-style too --- cjs/hyper/wire.js | 6 +- cjs/objects/Basic.js | 161 ++++++++++++++++++++++++++++++++++++++ cjs/objects/Updates.js | 7 +- cjs/objects/hyperstyle.js | 79 +++++++++++++++++++ esm.js | 6 +- esm/objects/Basic.js | 158 +++++++++++++++++++++++++++++++++++++ esm/objects/Updates.js | 7 +- index.js | 146 ++++++++++++++++------------------ min.js | 6 +- package.json | 1 + umd.js | 6 +- 11 files changed, 486 insertions(+), 97 deletions(-) create mode 100644 cjs/objects/Basic.js create mode 100644 cjs/objects/hyperstyle.js create mode 100644 esm/objects/Basic.js diff --git a/cjs/hyper/wire.js b/cjs/hyper/wire.js index c14d9815..fd5d9964 100644 --- a/cjs/hyper/wire.js +++ b/cjs/hyper/wire.js @@ -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 ? @@ -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..fc76d60e --- /dev/null +++ b/cjs/objects/Basic.js @@ -0,0 +1,161 @@ +'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('./hyperstyle.js')); + +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..0ac1d4b6 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); // 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/esm.js b/esm.js index 147a04d3..180578bf 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,s=i;ca;)--c;s=u+r-c;var g=Array(s),b=l[c];for(--n;b;){for(var w=b,y=w.newi,N=w.oldi;n>y;)g[--s]=1,--n;for(;a>N;)g[--s]=-1,--a;g[--s]=0,--n,--a,b=b.prev}for(;n>=t;)g[--s]=1,--n;for(;a>=o;)g[--s]=-1,--a;return g},P=function(e,t,n,r,i,o,a){var u=n+o,c=[],s=void 0,l=void 0,f=void 0,h=void 0,d=void 0,v=void 0,p=void 0;e:for(s=0;s<=u;s++){if(s>50)return null;for(p=s-1,d=s?c[s-1]:[0,0],v=c[s]=[],l=-s;l<=s;l+=2){for(h=l===-s||l!==s&&d[p+l-1]=0;s--){for(;h>0&&f>0&&a(r[i+h-1],e[t+f-1]);)m[g--]=0,h--,f--;if(!s)break;p=s-1,d=s?c[s-1]:[0,0],l=h-f,l===-s||l!==s&&d[p+l-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\"'=]+",se="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",le="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",fe=new RegExp(se+ce+le+"+)([ "+ue+"]*/?>)","g"),he=new RegExp(se+ce+le+"*)([ "+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){return e.setAttribute("style",""),r(e.getAttributeNode("style"),!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,s,l;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)l=a[c],s="number"!=typeof l||i.test(c)?l:l+"px",!t&&/^--/.test(c)?u.setProperty(c,s):u[c]=s;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){return"ownerSVGElement"in e?t(e):r(e.style,!1)}}(),be=e.defaultView,we="ownerSVGElement",ye=function(e){return e.ownerDocument||e},Ne=function(e){return ye(e).createDocumentFragment()},xe=function(e,t){return ye(e).createTextNode(t)},Ee="append"in Ne(e)?function(e,t){e.append.apply(e,t)}:function(e,t){for(var n=t.length,r=0;r { + 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/esm/objects/Updates.js b/esm/objects/Updates.js index 659ebfe7..df7d09e0 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); // the name is an event one, // add/remove event listeners accordingly else if (/^on/.test(name)) { diff --git a/index.js b/index.js index 6f38c98a..24cbceda 100644 --- a/index.js +++ b/index.js @@ -1062,6 +1062,71 @@ 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) { + 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; + } + }; + } + }(); + var G = document.defaultView; // Node.CONSTANTS @@ -1139,77 +1204,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 +1270,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); // the name is an event one, // add/remove event listeners accordingly else if (/^on/.test(name)) { @@ -1514,7 +1506,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) { @@ -1546,7 +1538,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 +1551,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 diff --git a/min.js b/min.js index 9399762a..9a8da036 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,s=i;ca;)--c;s=u+r-c;var g=Array(s),b=l[c];for(--n;b;){for(var w=b,y=w.newi,N=w.oldi;n>y;)g[--s]=1,--n;for(;a>N;)g[--s]=-1,--a;g[--s]=0,--n,--a,b=b.prev}for(;n>=t;)g[--s]=1,--n;for(;a>=o;)g[--s]=-1,--a;return g},P=function(e,t,n,r,i,o,a){var u=n+o,c=[],s=void 0,l=void 0,f=void 0,h=void 0,d=void 0,v=void 0,p=void 0;e:for(s=0;s<=u;s++){if(s>50)return null;for(p=s-1,d=s?c[s-1]:[0,0],v=c[s]=[],l=-s;l<=s;l+=2){for(h=l===-s||l!==s&&d[p+l-1]=0;s--){for(;h>0&&f>0&&a(r[i+h-1],e[t+f-1]);)m[g--]=0,h--,f--;if(!s)break;p=s-1,d=s?c[s-1]:[0,0],l=h-f,l===-s||l!==s&&d[p+l-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\"'=]+",se="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",le="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",fe=new RegExp(se+ce+le+"+)([ "+ue+"]*/?>)","g"),he=new RegExp(se+ce+le+"*)([ "+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){return e.setAttribute("style",""),r(e.getAttributeNode("style"),!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,s,l;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)l=a[c],s="number"!=typeof l||i.test(c)?l:l+"px",!t&&/^--/.test(c)?u.setProperty(c,s):u[c]=s;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){return"ownerSVGElement"in e?t(e):r(e.style,!1)}}(),be=e.defaultView,we="ownerSVGElement",ye=function(e){return e.ownerDocument||e},Ne=function(e){return ye(e).createDocumentFragment()},xe=function(e,t){return ye(e).createTextNode(t)},Ee="append"in Ne(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 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,s=i;ca;)--c;s=u+r-c;var g=Array(s),b=l[c];for(--n;b;){for(var w=b,y=w.newi,N=w.oldi;n>y;)g[--s]=1,--n;for(;a>N;)g[--s]=-1,--a;g[--s]=0,--n,--a,b=b.prev}for(;n>=t;)g[--s]=1,--n;for(;a>=o;)g[--s]=-1,--a;return g},P=function(e,t,n,r,i,o,a){var u=n+o,c=[],s=void 0,l=void 0,f=void 0,h=void 0,d=void 0,v=void 0,p=void 0;e:for(s=0;s<=u;s++){if(s>50)return null;for(p=s-1,d=s?c[s-1]:[0,0],v=c[s]=[],l=-s;l<=s;l+=2){for(h=l===-s||l!==s&&d[p+l-1]=0;s--){for(;h>0&&f>0&&a(r[i+h-1],e[t+f-1]);)m[g--]=0,h--,f--;if(!s)break;p=s-1,d=s?c[s-1]:[0,0],l=h-f,l===-s||l!==s&&d[p+l-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\"'=]+",se="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",le="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",fe=new RegExp(se+ce+le+"+)([ "+ue+"]*/?>)","g"),he=new RegExp(se+ce+le+"*)([ "+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){return e.setAttribute("style",""),r(e.getAttributeNode("style"),!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,s,l;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)l=a[c],s="number"!=typeof l||i.test(c)?l:l+"px",!t&&/^--/.test(c)?u.setProperty(c,s):u[c]=s;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){return"ownerSVGElement"in e?t(e):r(e.style,!1)}}(),be=e.defaultView,we="ownerSVGElement",ye=function(e){return e.ownerDocument||e},Ne=function(e){return ye(e).createDocumentFragment()},xe=function(e,t){return ye(e).createTextNode(t)},Ee="append"in Ne(e)?function(e,t){e.append.apply(e,t)}:function(e,t){for(var n=t.length,r=0;r Date: Fri, 30 Nov 2018 13:27:56 +0100 Subject: [PATCH 2/3] tested against Firefox 51 --- cjs/hyper/render.js | 19 +++++---- cjs/hyper/wire.js | 14 +++---- cjs/objects/Basic.js | 3 +- cjs/shared/utils.js | 11 +++++ esm.js | 6 +-- esm/hyper/render.js | 19 +++++---- esm/hyper/wire.js | 14 +++---- esm/shared/utils.js | 10 +++++ index.js | 97 ++++++++++++++++++++++++-------------------- min.js | 6 +-- package.json | 1 + test/ie/test/test.js | 25 ++++++++---- test/test.js | 20 +++++++-- umd.js | 6 +-- 14 files changed, 154 insertions(+), 97 deletions(-) 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 fd5d9964..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; @@ -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; }; diff --git a/cjs/objects/Basic.js b/cjs/objects/Basic.js index fc76d60e..a52cd553 100644 --- a/cjs/objects/Basic.js +++ b/cjs/objects/Basic.js @@ -4,8 +4,7 @@ const WeakSet = (m => m.__esModule ? m.default : m)(require('@ungap/essential-we 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('./hyperstyle.js')); +const hyperStyle = (m => m.__esModule ? m.default : m)(require('hyperhtml-style')); const CONNECTED = 'connected'; const DISCONNECTED = 'dis' + CONNECTED; 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 180578bf..e7781619 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(he,o).replace(fe,r)}function r(e,t,n,r){return"<"+t+n.replace(de,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,s=i;ca;)--c;s=u+r-c;var g=Array(s),b=l[c];for(--n;b;){for(var w=b,y=w.newi,N=w.oldi;n>y;)g[--s]=1,--n;for(;a>N;)g[--s]=-1,--a;g[--s]=0,--n,--a,b=b.prev}for(;n>=t;)g[--s]=1,--n;for(;a>=o;)g[--s]=-1,--a;return g},P=function(e,t,n,r,i,o,a){var u=n+o,c=[],s=void 0,l=void 0,f=void 0,h=void 0,d=void 0,v=void 0,p=void 0;e:for(s=0;s<=u;s++){if(s>50)return null;for(p=s-1,d=s?c[s-1]:[0,0],v=c[s]=[],l=-s;l<=s;l+=2){for(h=l===-s||l!==s&&d[p+l-1]=0;s--){for(;h>0&&f>0&&a(r[i+h-1],e[t+f-1]);)m[g--]=0,h--,f--;if(!s)break;p=s-1,d=s?c[s-1]:[0,0],l=h-f,l===-s||l!==s&&d[p+l-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\"'=]+",se="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",le="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",fe=new RegExp(se+ce+le+"+)([ "+ue+"]*/?>)","g"),he=new RegExp(se+ce+le+"*)([ "+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){return e.setAttribute("style",""),r(e.getAttributeNode("style"),!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,s,l;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)l=a[c],s="number"!=typeof l||i.test(c)?l:l+"px",!t&&/^--/.test(c)?u.setProperty(c,s):u[c]=s;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){return"ownerSVGElement"in e?t(e):r(e.style,!1)}}(),be=e.defaultView,we="ownerSVGElement",ye=function(e){return e.ownerDocument||e},Ne=function(e){return ye(e).createDocumentFragment()},xe=function(e,t){return ye(e).createTextNode(t)},Ee="append"in Ne(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 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,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){return e.setAttribute("style",""),r(e.getAttributeNode("style"),!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){return"ownerSVGElement"in e?t(e):r(e.style,!1)}}(),be=e.defaultView,we="ownerSVGElement",ye=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/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 24cbceda..82b4adf5 100644 --- a/index.js +++ b/index.js @@ -1142,6 +1142,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; @@ -1167,6 +1197,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; @@ -1467,36 +1505,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(); @@ -1523,14 +1531,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; }; @@ -1582,12 +1590,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; } @@ -1596,13 +1605,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 9a8da036..7670a623 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(he,o).replace(fe,r)}function r(e,t,n,r){return"<"+t+n.replace(de,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,s=i;ca;)--c;s=u+r-c;var g=Array(s),b=l[c];for(--n;b;){for(var w=b,y=w.newi,N=w.oldi;n>y;)g[--s]=1,--n;for(;a>N;)g[--s]=-1,--a;g[--s]=0,--n,--a,b=b.prev}for(;n>=t;)g[--s]=1,--n;for(;a>=o;)g[--s]=-1,--a;return g},P=function(e,t,n,r,i,o,a){var u=n+o,c=[],s=void 0,l=void 0,f=void 0,h=void 0,d=void 0,v=void 0,p=void 0;e:for(s=0;s<=u;s++){if(s>50)return null;for(p=s-1,d=s?c[s-1]:[0,0],v=c[s]=[],l=-s;l<=s;l+=2){for(h=l===-s||l!==s&&d[p+l-1]=0;s--){for(;h>0&&f>0&&a(r[i+h-1],e[t+f-1]);)m[g--]=0,h--,f--;if(!s)break;p=s-1,d=s?c[s-1]:[0,0],l=h-f,l===-s||l!==s&&d[p+l-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\"'=]+",se="<([A-Za-z]+[A-Za-z0-9:_-]*)((?:",le="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|[^ \\f\\n\\r\\t\\/>\"'=]+))?)",fe=new RegExp(se+ce+le+"+)([ "+ue+"]*/?>)","g"),he=new RegExp(se+ce+le+"*)([ "+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){return e.setAttribute("style",""),r(e.getAttributeNode("style"),!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,s,l;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)l=a[c],s="number"!=typeof l||i.test(c)?l:l+"px",!t&&/^--/.test(c)?u.setProperty(c,s):u[c]=s;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){return"ownerSVGElement"in e?t(e):r(e.style,!1)}}(),be=e.defaultView,we="ownerSVGElement",ye=function(e){return e.ownerDocument||e},Ne=function(e){return ye(e).createDocumentFragment()},xe=function(e,t){return ye(e).createTextNode(t)},Ee="append"in Ne(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 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,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){return e.setAttribute("style",""),r(e.getAttributeNode("style"),!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){return"ownerSVGElement"in e?t(e):r(e.style,!1)}}(),be=e.defaultView,we="ownerSVGElement",ye=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\n _templateObject35 = _taggedTemplateLiteral(['

', '

'], ['

', '

']), _templateObject36 = _taggedTemplateLiteral([''], ['']), _templateObject37 = _taggedTemplateLiteral(['

'], ['

']), - _templateObject38 = _taggedTemplateLiteral([''], ['']), + _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; } diff --git a/test/test.js b/test/test.js index 7897384b..eae6ad61 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)`