diff --git a/docs/change-log.md b/docs/change-log.md index b38fdb03..682af63c 100644 --- a/docs/change-log.md +++ b/docs/change-log.md @@ -40,9 +40,7 @@ - API: `m.route.set()` causes all mount points to be redrawn ([#1592](https://github.com/MithrilJS/mithril.js/pull/1592)) - render/attrs: Using style objects in hyperscript calls will now properly diff style properties from one render to another as opposed to re-writing all element style properties every render. -- render/attrs: `xlink:href` attributes are now correctly removed -- render/attrs: fix element value don't change if new value is undefined [#2082](https://github.com/MithrilJS/mithril.js/issues/2082) -(https://github.com/MithrilJS/mithril.js/pull/2130) +- render/attrs All vnodes attributes are properly removed when absent or set to `null` or `undefined` [#1804](https://github.com/MithrilJS/mithril.js/issues/1804) [#2082](https://github.com/MithrilJS/mithril.js/issues/2082) ([#1865](https://github.com/MithrilJS/mithril.js/pull/1865), [#2130](https://github.com/MithrilJS/mithril.js/pull/2130)) - render/core: Render state correctly on select change event [#1916](https://github.com/MithrilJS/mithril.js/issues/1916) ([#1918](https://github.com/MithrilJS/mithril.js/pull/1918) [@robinchew](https://github.com/robinchew), [#2052](https://github.com/MithrilJS/mithril.js/pull/2052)) - render/core: fix various updateNodes/removeNodes issues when the pool and fragments are involved [#1990](https://github.com/MithrilJS/mithril.js/issues/1990), [#1991](https://github.com/MithrilJS/mithril.js/issues/1991), [#2003](https://github.com/MithrilJS/mithril.js/issues/2003), [#2021](https://github.com/MithrilJS/mithril.js/pull/2021) - render/core: fix crashes when the keyed vnodes with the same `key` had different `tag` values [#2128](https://github.com/MithrilJS/mithril.js/issues/2128) [@JacksonJN](https://github.com/JacksonJN) ([#2130](https://github.com/MithrilJS/mithril.js/pull/2130)) diff --git a/render/render.js b/render/render.js index 8fc19d79..7323a583 100644 --- a/render/render.js +++ b/render/render.js @@ -688,7 +688,7 @@ module.exports = function($window) { if (key === "key" || key === "is" || isLifecycleMethod(key)) return if (key[0] === "o" && key[1] === "n") return updateEvent(vnode, key, value) if ((old === value && !isFormAttribute(vnode, key)) && typeof value !== "object" || value == null) return - if (key.slice(0, 6) === "xlink:") vnode.dom.setAttributeNS("http://www.w3.org/1999/xlink", key, value) + if (key.slice(0, 6) === "xlink:") vnode.dom.setAttributeNS("http://www.w3.org/1999/xlink", key.slice(6), value) else if (key === "style") updateStyle(vnode.dom, old, value) else if (key in vnode.dom && !isAttribute(key) && ns === undefined && !isCustomElement(vnode.tag, vnode.attrs)) { if (key === "value") { @@ -713,11 +713,7 @@ module.exports = function($window) { } function removeAttr(vnode, key, old, ns) { if (key === "key" || key === "is" || old == null || isLifecycleMethod(key)) return - var nsLastIndex = key.indexOf(":") - if (nsLastIndex > -1 && key.substr(0, nsLastIndex) === "xlink") { - vnode.dom.removeAttributeNS("http://www.w3.org/1999/xlink", key.slice(nsLastIndex + 1)) - } - else if (key[0] === "o" && key[1] === "n" && !isLifecycleMethod(key)) updateEvent(vnode, key, undefined) + if (key[0] === "o" && key[1] === "n" && !isLifecycleMethod(key)) updateEvent(vnode, key, undefined) else if (key === "style") updateStyle(vnode.dom, old, null) else if ( key in vnode.dom && !isAttribute(key) @@ -729,6 +725,8 @@ module.exports = function($window) { ) { vnode.dom[key] = null } else { + var nsLastIndex = key.indexOf(":") + if (nsLastIndex !== -1) key = key.slice(nsLastIndex + 1) if (old !== false) vnode.dom.removeAttribute(key === "className" ? "class" : key) } } diff --git a/render/tests/test-attributes.js b/render/tests/test-attributes.js index 379939e9..ed41961e 100644 --- a/render/tests/test-attributes.js +++ b/render/tests/test-attributes.js @@ -357,24 +357,27 @@ o.spec("attributes", function() { o(a.dom.attributes["class"].value).equals("test") }) - o("removes xlink:href", function() { + /* eslint-disable no-script-url */ + o("handles xlink:href", function() { var vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", children: [ {tag: "a", ns: "http://www.w3.org/2000/svg", attrs: {"xlink:href": "javascript:;"}} ]} render(root, [vnode]) - + o(vnode.dom.nodeName).equals("svg") - o(vnode.dom.firstChild.attributes["xlink:href"].value).equals("javascript:;") - o(vnode.dom.firstChild.attributes["xlink:href"].namespaceURI).equals("http://www.w3.org/1999/xlink") - + o(vnode.dom.firstChild.attributes["href"].value).equals("javascript:;") + o(vnode.dom.firstChild.attributes["href"].namespaceURI).equals("http://www.w3.org/1999/xlink") + vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", children: [ {tag: "a", ns: "http://www.w3.org/2000/svg", attrs: {}} ]} render(root, [vnode]) - + o(vnode.dom.nodeName).equals("svg") - o(vnode.dom.firstChild.attributes["xlink:href"]).equals(undefined) + o("href" in vnode.dom.firstChild.attributes).equals(false) }) + /* eslint-enable no-script-url */ + }) o.spec("option.value", function() { diff --git a/render/tests/test-createElement.js b/render/tests/test-createElement.js index c2dc1d90..ea4d01c8 100644 --- a/render/tests/test-createElement.js +++ b/render/tests/test-createElement.js @@ -1,4 +1,3 @@ -/* eslint-disable no-script-url */ "use strict" var o = require("../../ospec/ospec") @@ -54,6 +53,7 @@ o.spec("createElement", function() { o(vnode.dom.childNodes[0].nodeName).equals("A") o(vnode.dom.childNodes[1].nodeName).equals("B") }) + /* eslint-disable no-script-url */ o("creates svg", function() { var vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", children: [ {tag: "a", ns: "http://www.w3.org/2000/svg", attrs: {"xlink:href": "javascript:;"}}, @@ -65,36 +65,19 @@ o.spec("createElement", function() { o(vnode.dom.namespaceURI).equals("http://www.w3.org/2000/svg") o(vnode.dom.firstChild.nodeName).equals("a") o(vnode.dom.firstChild.namespaceURI).equals("http://www.w3.org/2000/svg") - o(vnode.dom.firstChild.attributes["xlink:href"].value).equals("javascript:;") - o(vnode.dom.firstChild.attributes["xlink:href"].namespaceURI).equals("http://www.w3.org/1999/xlink") + o(vnode.dom.firstChild.attributes["href"].value).equals("javascript:;") + o(vnode.dom.firstChild.attributes["href"].namespaceURI).equals("http://www.w3.org/1999/xlink") o(vnode.dom.childNodes[1].nodeName).equals("foreignObject") o(vnode.dom.childNodes[1].firstChild.nodeName).equals("body") o(vnode.dom.childNodes[1].firstChild.namespaceURI).equals("http://www.w3.org/1999/xhtml") }) + /* eslint-enable no-script-url */ o("sets attributes correctly for svg", function() { var vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", attrs: {viewBox: "0 0 100 100"}} render(root, [vnode]) o(vnode.dom.attributes["viewBox"].value).equals("0 0 100 100") }) - o("removes xlink:href", function() { - var vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", children: [ - {tag: "a", ns: "http://www.w3.org/2000/svg", attrs: {"xlink:href": "javascript:;"}} - ]} - render(root, [vnode]) - - o(vnode.dom.nodeName).equals("svg") - o(vnode.dom.firstChild.attributes["xlink:href"].value).equals("javascript:;") - o(vnode.dom.firstChild.attributes["xlink:href"].namespaceURI).equals("http://www.w3.org/1999/xlink") - - vnode = {tag: "svg", ns: "http://www.w3.org/2000/svg", children: [ - {tag: "a", ns: "http://www.w3.org/2000/svg", attrs: {}} - ]} - render(root, [vnode]) - - o(vnode.dom.nodeName).equals("svg") - o(vnode.dom.firstChild.attributes["xlink:href"]).equals(undefined) - }) o("creates mathml", function() { var vnode = {tag: "math", ns: "http://www.w3.org/1998/Math/MathML", children: [{tag: "mrow", ns: "http://www.w3.org/1998/Math/MathML"}]} render(root, [vnode])