From d71dcc5e946775d785a39281bcb61ff9d384d6e1 Mon Sep 17 00:00:00 2001 From: Pierre-Yves Gerardy Date: Thu, 4 Aug 2016 03:45:44 +0200 Subject: [PATCH 1/6] `is` should be passed as `{is: is}` --- render/render.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/render/render.js b/render/render.js index 50d2404c..83b77a32 100644 --- a/render/render.js +++ b/render/render.js @@ -70,8 +70,8 @@ module.exports = function($window) { var is = attrs && attrs.is var element = ns ? - is ? $doc.createElementNS(ns, tag, is) : $doc.createElementNS(ns, tag) : - is ? $doc.createElement(tag, is) : $doc.createElement(tag) + is ? $doc.createElementNS(ns, tag, {is: is}) : $doc.createElementNS(ns, tag) : + is ? $doc.createElement(tag, {is: is}) : $doc.createElement(tag) vnode.dom = element if (attrs != null) { From f0082473f97ed178f2167dadcd1d0ddce61c70f8 Mon Sep 17 00:00:00 2001 From: Gaspar Date: Thu, 11 Aug 2016 12:32:06 +0200 Subject: [PATCH 2/6] Update style using element.style.cssText instead of element.cssText --- render/render.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/render/render.js b/render/render.js index 09daa105..f17094a2 100644 --- a/render/render.js +++ b/render/render.js @@ -441,11 +441,11 @@ module.exports = function($window) { //style function updateStyle(element, old, style) { - if (old === style) element.cssText = "", old = null - if (style == null) element.cssText = "" - else if (typeof style === "string") element.cssText = style + if (old === style) element.style.cssText = "", old = null + if (style == null) element.style.cssText = "" + else if (typeof style === "string") element.style.cssText = style else { - if (typeof old === "string") element.cssText = "" + if (typeof old === "string") element.style.cssText = "" for (var key in style) { element.style[key] = style[key] } From bffe87e0534699bc2ecaf749555ac34614b08a1d Mon Sep 17 00:00:00 2001 From: Pierre-Yves Gerardy Date: Thu, 11 Aug 2016 13:43:15 +0200 Subject: [PATCH 3/6] Fix the domMock cssText implementation --- test-utils/domMock.js | 73 +++++++++++++++++++++++++------- test-utils/tests/test-domMock.js | 46 +++++++++++++++++--- 2 files changed, 99 insertions(+), 20 deletions(-) diff --git a/test-utils/domMock.js b/test-utils/domMock.js index cde58a24..d6821aec 100644 --- a/test-utils/domMock.js +++ b/test-utils/domMock.js @@ -75,11 +75,69 @@ module.exports = function() { function removeAttribute(name) { delete this.attributes[name] } + var declListTokenizer = /;|"(?:\\.|[^"\n])*"|'(?:\\.|[^'\n])*'/g + /** + * This will split a semicolon-separated CSS declaration list into an array of + * individual declarations, ignoring semicolons in strings. + * + * Comments are also stripped. + * + * @param {string} declList + * @return {string[]} + */ + function splitDeclList(declList) { + var indices = [], res = [], inParen = 0, match + + // remove comments, preserving comments in strings. + declList = declList.replace( + /("(?:\\.|[^"\n])*"|'(?:\\.|[^'\n])*')|\/\*[\s\S]*?\*\//g, + function(m, str){ + return str || '' + } + ) + /*eslint-disable no-cond-assign*/ + while (match = declListTokenizer.exec(declList)) { + if (match[0] === ";") indices.push(match.index) + } + /*eslint-enable no-cond-assign*/ + for (var i = indices.length; i--;){ + res.unshift(declList.slice(indices[i] + 1)) + declList = declList.slice(0, indices[i]) + } + res.unshift(declList) + return res + } + var activeElement var $window = { document: { createElement: function(tag, is) { + var cssText = "" var style = {} + Object.defineProperty(style, "cssText", { + get: function() {return cssText}, + set: function (value) { + var buf = [] + if (typeof value === "string") { + for (var key in style) style[key] = "" + var rules = splitDeclList(value) + for (var i = 0; i < rules.length; i++) { + var rule = rules[i] + var colonIndex = rule.indexOf(":") + if (colonIndex > -1) { + var rawKey = rule.slice(0, colonIndex).trim() + var key = rawKey.replace(/-\D/g, function(match) {return match[1].toUpperCase()}) + var value = rule.slice(colonIndex + 1).trim() + if (key !== "cssText") { + style[key] = value + buf.push(rawKey + ": " + value + ";") + } + } + } + cssText = buf.join(" ") + } + } + }) var events = {} var element = { nodeType: 1, @@ -140,21 +198,6 @@ module.exports = function() { // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style#Setting_style throw new Error("setting element.style is not portable") }, - set cssText(value) { - if (typeof value === "string") { - for (var key in style) style[key] = "" - var rules = value.split(";") - for (var i = 0; i < rules.length; i++) { - var rule = rules[i] - var colonIndex = rule.indexOf(":") - if (colonIndex > -1) { - var key = rule.slice(0, colonIndex).trim().replace(/-\D/g, function(match) {return match[1].toUpperCase()}) - var value = rule.slice(colonIndex + 1).trim() - style[key] = value - } - } - } - }, get className() { return this.attributes["class"] ? this.attributes["class"].nodeValue : "" }, diff --git a/test-utils/tests/test-domMock.js b/test-utils/tests/test-domMock.js index 2b589673..b08df230 100644 --- a/test-utils/tests/test-domMock.js +++ b/test-utils/tests/test-domMock.js @@ -474,20 +474,56 @@ o.spec("domMock", function() { o(typeof div.style).equals("object") }) - o("setting cssText string works", function() { + o("setting style.cssText string works", function() { var div = $document.createElement("div") - div.cssText = "background-color: red; border-bottom: 1px solid red;" + div.style.cssText = "background-color: red; border-bottom: 1px solid red;" o(div.style.backgroundColor).equals("red") o(div.style.borderBottom).equals("1px solid red") }) - o("removing via setting cssText string works", function() { + o("removing via setting style.cssText string works", function() { var div = $document.createElement("div") - div.cssText = "background: red;" - div.cssText = "" + div.style.cssText = "background: red;" + div.style.cssText = "" o(div.style.background).equals("") }) + o("the final semicolon is optional when setting style.cssText", function() { + var div = $document.createElement("div") + div.style.cssText = "background: red" + + o(div.style.background).equals("red") + o(div.style.cssText).equals("background: red;") + }) + o("'cssText' as a property name is ignored when setting style.cssText", function(){ + var div = $document.createElement("div") + div.style.cssText = "cssText: red;" + + o(div.style.cssText).equals("") + }) + o("setting style.cssText that has a semi-colon in a strings", function(){ + var div = $document.createElement("div") + div.style.cssText = "background: url(';'); font-family: \";\"" + + o(div.style.background).equals("url(';')") + o(div.style.fontFamily).equals("\";\"") + o(div.style.cssText).equals("background: url(';'); font-family: \";\";") + }) + o("comments in style.cssText are stripped", function(){ + var div = $document.createElement("div") + div.style.cssText = "/**/background/*:*/: /*>;)*/red/**/;/**/" + + o(div.style.background).equals("red") + o(div.style.cssText).equals("background: red;") + + }) + o("comments in strings in style.cssText are preserved", function(){ + var div = $document.createElement("div") + div.style.cssText = "background: url('/*foo*/')" + + o(div.style.background).equals("url('/*foo*/')") + + }) o("setting style throws", function () { var err = false try { From b32d0cdea33aa3932f5be132e14308e4b8e41f55 Mon Sep 17 00:00:00 2001 From: Gandalf-the-Bot Date: Thu, 11 Aug 2016 16:16:07 +0000 Subject: [PATCH 4/6] Bundled output for commit f9f7bcd7878b1610fc8c93e0d9eced32f9ee5b7c [skip ci] --- mithril.js | 8 ++++---- mithril.min.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/mithril.js b/mithril.js index bb6edd23..e38b46a6 100644 --- a/mithril.js +++ b/mithril.js @@ -680,11 +680,11 @@ var renderService = function($window) { } //style function updateStyle(element, old, style) { - if (old === style) element.cssText = "", old = null - if (style == null) element.cssText = "" - else if (typeof style === "string") element.cssText = style + if (old === style) element.style.cssText = "", old = null + if (style == null) element.style.cssText = "" + else if (typeof style === "string") element.style.cssText = style else { - if (typeof old === "string") element.cssText = "" + if (typeof old === "string") element.style.cssText = "" for (var key in style) { element.style[key] = style[key] } diff --git a/mithril.min.js b/mithril.min.js index 6e99b40e..2c36935b 100644 --- a/mithril.min.js +++ b/mithril.min.js @@ -21,10 +21,10 @@ c&&(f.domSize=c)}break;default:a=m;h=f.dom=c.dom;switch(f.tag){case "svg":a="htt c,null,!1),g(a,d(f,b,void 0),h)}function l(a){var c=a.domSize;if(null!=c||null==a.dom){var f=x.createDocumentFragment();if(0a.indexOf("?")?"?":"&";a+=h+d}return a}function e(a){try{return""!== a?JSON.parse(a):null}catch(b){throw Error(a);}}function k(a){return a.responseText}function q(a,b){if("function"===typeof a)if(b instanceof Array)for(var d=0;d Date: Thu, 11 Aug 2016 21:21:17 +0200 Subject: [PATCH 5/6] Remove an unused variable --- test-utils/domMock.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test-utils/domMock.js b/test-utils/domMock.js index d6821aec..f32d49b6 100644 --- a/test-utils/domMock.js +++ b/test-utils/domMock.js @@ -79,14 +79,14 @@ module.exports = function() { /** * This will split a semicolon-separated CSS declaration list into an array of * individual declarations, ignoring semicolons in strings. - * + * * Comments are also stripped. * * @param {string} declList * @return {string[]} */ function splitDeclList(declList) { - var indices = [], res = [], inParen = 0, match + var indices = [], res = [], match // remove comments, preserving comments in strings. declList = declList.replace( From ad659ce0e3fe0b2d77795b3da9c63e938c1de451 Mon Sep 17 00:00:00 2001 From: Gandalf-the-Bot Date: Thu, 11 Aug 2016 19:55:33 +0000 Subject: [PATCH 6/6] Bundled output for commit 4b9e88d89607b6747d90e53bcf9f239828d30e8f [skip ci] --- mithril.js | 4 ++-- mithril.min.js | 32 ++++++++++++++++---------------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/mithril.js b/mithril.js index e38b46a6..e279e368 100644 --- a/mithril.js +++ b/mithril.js @@ -319,8 +319,8 @@ var renderService = function($window) { var attrs = vnode.attrs var is = attrs && attrs.is var element = ns ? - is ? $doc.createElementNS(ns, tag, is) : $doc.createElementNS(ns, tag) : - is ? $doc.createElement(tag, is) : $doc.createElement(tag) + is ? $doc.createElementNS(ns, tag, {is: is}) : $doc.createElementNS(ns, tag) : + is ? $doc.createElement(tag, {is: is}) : $doc.createElement(tag) vnode.dom = element if (attrs != null) { setAttrs(vnode, attrs, ns) diff --git a/mithril.min.js b/mithril.min.js index 2c36935b..30736343 100644 --- a/mithril.min.js +++ b/mithril.min.js @@ -9,22 +9,22 @@ a)},combine:G,reject:function(a){var b=y();b.error(a);return b},HALT:D};u.normal if("string"===typeof a&&void 0===K[a]){for(var b,d,e=[],k={};b=ka.exec(a);){var q=b[1],l=b[2];""===q&&""!==l?d=l:"#"===q?k.id=l:"."===q?e.push(l):"["===b[3][0]&&((q=b[6])&&(q=q.replace(/\\(["'])/g,"$1").replace(/\\\\/g,"\\")),k[b[4]]=q||!0)}0=r&&B>=A;){var t=c[r],w=f[A];if(t===w)r++,A++;else if(null!=t&&null!=w&&t.key===w.key)r++,A++,q(a,t,w,e, -m(c,r,h),z,k),z&&t.tag===w.tag&&g(a,l(t),h);else if(t=c[v],t===w)v--,A++;else if(null!=t&&null!=w&&t.key===w.key)q(a,t,w,e,m(c,v+1,h),z,k),A=r&&B>=A;){t=c[v];w=f[B];if(t===w)v--;else if(null!=t&&null!=w&&t.key===w.key)q(a,t,w,e,m(c,v+1,h),z,k),z&&t.tag===w.tag&&g(a,l(t),h),null!=t.dom&&(h=t.dom),v--;else{if(!u){u=c;var t=v,n={},x;for(x=0;x=r&&B>=A;){var t=c[r],w=f[A];if(t===w)r++,A++;else if(null!=t&&null!=w&&t.key=== +w.key)r++,A++,q(a,t,w,e,m(c,r,h),z,k),z&&t.tag===w.tag&&g(a,l(t),h);else if(t=c[v],t===w)v--,A++;else if(null!=t&&null!=w&&t.key===w.key)q(a,t,w,e,m(c,v+1,h),z,k),A=r&&B>=A;){t=c[v];w=f[B];if(t===w)v--;else if(null!=t&&null!=w&&t.key===w.key)q(a,t,w,e,m(c,v+1,h),z,k),z&&t.tag===w.tag&&g(a,l(t),h),null!=t.dom&&(h=t.dom),v--;else{if(!u){u=c;var t=v,n={},x;for(x=0;xa.indexOf("?")?"?":"&";a+=h+d}return a}function e(a){try{return""!== a?JSON.parse(a):null}catch(b){throw Error(a);}}function k(a){return a.responseText}function q(a,b){if("function"===typeof a)if(b instanceof Array)for(var d=0;d