diff --git a/cjs/objects/Updates.js b/cjs/objects/Updates.js
index 157c5c05..9e813a96 100644
--- a/cjs/objects/Updates.js
+++ b/cjs/objects/Updates.js
@@ -49,6 +49,19 @@ const asNode = (item, i) => {
// returns true if domdiff can handle the value
const canDiff = value => 'ELEMENT_NODE' in value;
+const hyperSetter = (node, name, svg) => svg ?
+ value => {
+ try {
+ node[name] = value;
+ }
+ catch (nope) {
+ node.setAttribute(name, value);
+ }
+ } :
+ value => {
+ node[name] = value;
+ };
+
// when a Promise is used as interpolation value
// its result must be parsed once resolved.
// This callback is in charge of understanding what to do
@@ -99,6 +112,9 @@ Tagger.prototype = {
// handle it differently from others
if (name === 'style')
return hyperStyle(node, original, isSVG);
+ // direct accessors for and friends
+ else if (name.slice(0, 1) === '.')
+ return hyperSetter(node, name.slice(1), isSVG);
// the name is an event one,
// add/remove event listeners accordingly
else if (/^on/.test(name)) {
diff --git a/esm.js b/esm.js
index edf12124..dc128c2e 100644
--- a/esm.js
+++ b/esm.js
@@ -1,15 +1,15 @@
/*! (c) Andrea Giammarchi (ISC) */var hyperHTML=function(N){"use strict";
/*! (c) Andrea Giammarchi - ISC */var t={};try{t.WeakMap=WeakMap}catch(e){t.WeakMap=function(t,e){var n=e.defineProperty,r=e.hasOwnProperty,i=a.prototype;return i.delete=function(e){return this.has(e)&&delete e[this._]},i.get=function(e){return this.has(e)?e[this._]:void 0},i.has=function(e){return r.call(e,this._)},i.set=function(e,t){return n(e,this._,{configurable:!0,value:t}),this},a;function a(e){n(this,"_",{value:"_@ungap/weakmap"+t++}),e&&e.forEach(o,this)}function o(e){this.set(e[0],e[1])}}(Math.random(),Object)}var s=t.WeakMap,i={};
-/*! (c) Andrea Giammarchi - ISC */try{i.WeakSet=WeakSet}catch(e){!function(e,t){var n=r.prototype;function r(){t(this,"_",{value:"_@ungap/weakmap"+e++})}n.add=function(e){return this.has(e)||t(e,this._,{value:!0,configurable:!0}),this},n.has=function(e){return this.hasOwnProperty.call(e,this._)},n.delete=function(e){return this.has(e)&&delete e[this._]},i.WeakSet=r}(Math.random(),Object.defineProperty)}function m(e,t,n,r,i,a){for(var o=("selectedIndex"in t),u=o;ro;)--l;c=u+r-l;var m=Array(c),y=s[l];for(--n;y;){for(var b=y.newi,w=y.oldi;b>>0;n"+e+"",r=n.querySelectorAll(i)}else n.innerHTML=e,r=n.childNodes;return F(t,r),t},function(e,t){return("svg"===t?function(e){var t=H(O),n=H("div");return n.innerHTML='",F(t,n.firstChild.childNodes),t}:M)(e)});function F(e,t){for(var n=t.length;n--;)e.appendChild(t[0])}function H(e){return e===O?A.createDocumentFragment():A.createElementNS("http://www.w3.org/1999/xhtml",e)}
+/*! (c) Andrea Giammarchi - ISC */try{i.WeakSet=WeakSet}catch(e){!function(e,t){var n=r.prototype;function r(){t(this,"_",{value:"_@ungap/weakmap"+e++})}n.add=function(e){return this.has(e)||t(e,this._,{value:!0,configurable:!0}),this},n.has=function(e){return this.hasOwnProperty.call(e,this._)},n.delete=function(e){return this.has(e)&&delete e[this._]},i.WeakSet=r}(Math.random(),Object.defineProperty)}function m(e,t,n,r,i,a){for(var o=("selectedIndex"in t),u=o;ro;)--c;l=u+r-c;var m=Array(l),y=s[c];for(--n;y;){for(var b=y.newi,w=y.oldi;b>>0;n"+e+"",r=n.querySelectorAll(i)}else n.innerHTML=e,r=n.childNodes;return F(t,r),t},function(e,t){return("svg"===t?function(e){var t=H(O),n=H("div");return n.innerHTML='",F(t,n.firstChild.childNodes),t}:M)(e)});function F(e,t){for(var n=t.length;n--;)e.appendChild(t[0])}function H(e){return e===O?S.createDocumentFragment():S.createElementNS("http://www.w3.org/1999/xhtml",e)}
/*! (c) Andrea Giammarchi - ISC */
-var I,z,V,Z,G,q,B,J,K,Q,U=(z="appendChild",V="cloneNode",Z="createTextNode",q=(G="importNode")in(I=N),(B=I.createDocumentFragment())[z](I[Z]("g")),B[z](I[Z]("")),(q?I[G](B,!0):B[V](!0)).childNodes.length<2?function e(t,n){for(var r=t[V](),i=t.childNodes||[],a=i.length,o=0;n&&o',J[K].childNodes[0].getAttribute(Q)==Y)||(Y="_dt: "+Y.slice(1,-1)+";",ee=!0)}catch(e){}var te="\x3c!--"+Y+"--\x3e",ne=8,re=1,ie=3,ae=/^(?:style|textarea)$/i,oe=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;var ue=" \\f\\n\\r\\t",le="[^"+ue+"\\/>\"'=]+",ce="["+ue+"]+"+le,se="<([A-Za-z]+[A-Za-z0-9:._-]*)((?:",fe="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|"+le.replace("\\/","")+"))?)",he=new RegExp(se+ce+fe+"+)(["+ue+"]*/?>)","g"),de=new RegExp(se+ce+fe+"*)(["+ue+"]*/>)","g"),ve=new RegExp("("+ce+"\\s*=\\s*)(['\"]?)"+te+"\\2","gi");function pe(e,t,n,r){return"<"+t+n.replace(ve,ge)+r}function ge(e,t,n){return t+(n||'"')+Y+(n||'"')}function me(e,t,n){return oe.test(t)?e:"<"+t+n+">"}var ye=ee?function(e,t){var n=t.join(" ");return t.slice.call(e,0).sort(function(e,t){return n.indexOf(e.name)<=n.indexOf(t.name)?-1:1})}:function(e,t){return t.slice.call(e,0)};function be(e,t){for(var n=t.length,r=0;r',J[K].childNodes[0].getAttribute(Q)==Y)||(Y="_dt: "+Y.slice(1,-1)+";",ee=!0)}catch(e){}var te="\x3c!--"+Y+"--\x3e",ne=8,re=1,ie=3,ae=/^(?:style|textarea)$/i,oe=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;var ue=" \\f\\n\\r\\t",ce="[^"+ue+"\\/>\"'=]+",le="["+ue+"]+"+ce,se="<([A-Za-z]+[A-Za-z0-9:._-]*)((?:",fe="(?:\\s*=\\s*(?:'[^']*?'|\"[^\"]*?\"|<[^>]*?>|"+ce.replace("\\/","")+"))?)",he=new RegExp(se+le+fe+"+)(["+ue+"]*/?>)","g"),de=new RegExp(se+le+fe+"*)(["+ue+"]*/>)","g"),ve=new RegExp("("+le+"\\s*=\\s*)(['\"]?)"+te+"\\2","gi");function pe(e,t,n,r){return"<"+t+n.replace(ve,ge)+r}function ge(e,t,n){return t+(n||'"')+Y+(n||'"')}function me(e,t,n){return oe.test(t)?e:"<"+t+n+">"}var ye=ee?function(e,t){var n=t.join(" ");return t.slice.call(e,0).sort(function(e,t){return n.indexOf(e.name)<=n.indexOf(t.name)?-1:1})}:function(e,t){return t.slice.call(e,0)};function be(e,t){for(var n=t.length,r=0;r {
// returns true if domdiff can handle the value
const canDiff = value => 'ELEMENT_NODE' in value;
+const hyperSetter = (node, name, svg) => svg ?
+ value => {
+ try {
+ node[name] = value;
+ }
+ catch (nope) {
+ node.setAttribute(name, value);
+ }
+ } :
+ value => {
+ node[name] = value;
+ };
+
// when a Promise is used as interpolation value
// its result must be parsed once resolved.
// This callback is in charge of understanding what to do
@@ -99,6 +112,9 @@ Tagger.prototype = {
// handle it differently from others
if (name === 'style')
return hyperStyle(node, original, isSVG);
+ // direct accessors for and friends
+ else if (name.slice(0, 1) === '.')
+ return hyperSetter(node, name.slice(1), isSVG);
// 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 ec147e48..670e7de2 100644
--- a/index.js
+++ b/index.js
@@ -1470,6 +1470,18 @@ var hyperHTML = (function (document) {
var canDiff = function canDiff(value) {
return 'ELEMENT_NODE' in value;
+ };
+
+ var hyperSetter = function hyperSetter(node, name, svg) {
+ return svg ? function (value) {
+ try {
+ node[name] = value;
+ } catch (nope) {
+ node.setAttribute(name, value);
+ }
+ } : function (value) {
+ node[name] = value;
+ };
}; // when a Promise is used as interpolation value
// its result must be parsed once resolved.
// This callback is in charge of understanding what to do
@@ -1522,77 +1534,78 @@ var hyperHTML = (function (document) {
var oldValue; // if the attribute is the style one
// handle it differently from others
- if (name === 'style') return hyperStyle(node, original, isSVG); // the name is an event one,
- // add/remove event listeners accordingly
- else if (/^on/.test(name)) {
- var type = name.slice(2);
-
- if (type === CONNECTED || type === DISCONNECTED) {
- observe(node);
- } else if (name.toLowerCase() in node) {
- type = type.toLowerCase();
- }
+ if (name === 'style') return hyperStyle(node, original, isSVG); // direct accessors for and friends
+ else if (name.slice(0, 1) === '.') return hyperSetter(node, name.slice(1), isSVG); // the name is an event one,
+ // add/remove event listeners accordingly
+ else if (/^on/.test(name)) {
+ var type = name.slice(2);
- return function (newValue) {
- if (oldValue !== newValue) {
- if (oldValue) node.removeEventListener(type, oldValue, false);
- oldValue = newValue;
- if (newValue) node.addEventListener(type, newValue, false);
+ if (type === CONNECTED || type === DISCONNECTED) {
+ observe(node);
+ } else if (name.toLowerCase() in node) {
+ type = type.toLowerCase();
}
- };
- } // the attribute is special ('value' in input)
- // and it's not SVG *or* the name is exactly data,
- // in this case assign the value directly
- else if (name === 'data' || !isSVG && name in node && !readOnly.test(name)) {
- return function (newValue) {
- if (oldValue !== newValue) {
- oldValue = newValue;
-
- if (node[name] !== newValue && newValue == null) {
- // cleanup on null to avoid silly IE/Edge bug
- node[name] = '';
- node.removeAttribute(name);
- } else node[name] = newValue;
- }
- };
- } else if (name in Intent.attributes) {
- return function (any) {
- var newValue = Intent.attributes[name](node, any);
+ return function (newValue) {
if (oldValue !== newValue) {
+ if (oldValue) node.removeEventListener(type, oldValue, false);
oldValue = newValue;
- if (newValue == null) node.removeAttribute(name);else node.setAttribute(name, newValue);
+ if (newValue) node.addEventListener(type, newValue, false);
}
};
- } // in every other case, use the attribute node as it is
- // update only the value, set it as node only when/if needed
- else {
- var owner = false;
- var attribute = original.cloneNode(true);
+ } // the attribute is special ('value' in input)
+ // and it's not SVG *or* the name is exactly data,
+ // in this case assign the value directly
+ else if (name === 'data' || !isSVG && name in node && !readOnly.test(name)) {
return function (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 (node[name] !== newValue && newValue == null) {
+ // cleanup on null to avoid silly IE/Edge bug
+ node[name] = '';
+ node.removeAttribute(name);
+ } else node[name] = newValue;
+ }
+ };
+ } else if (name in Intent.attributes) {
+ return function (any) {
+ var newValue = Intent.attributes[name](node, any);
- if (!owner) {
- owner = true;
- node.setAttributeNode(attribute);
+ if (oldValue !== newValue) {
+ oldValue = newValue;
+ if (newValue == null) node.removeAttribute(name);else node.setAttribute(name, newValue);
+ }
+ };
+ } // in every other case, use the attribute node as it is
+ // update only the value, set it as node only when/if needed
+ else {
+ var owner = false;
+ var attribute = original.cloneNode(true);
+ return function (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);
+ }
}
}
}
- }
- };
- }
+ };
+ }
},
// in a hyper(node)`