vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix bugs about recycling in components, and styles when reusing style object

Browse source
This commit is contained in:
Leo Horie 2016-06-02 21:42:18 -04:00
parent 86673f8d16
commit f9ef480b34
5 changed files with 157 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

9
render/render.js
View file

@ -325,7 +325,7 @@ module.exports = function($window) {
}
}
if (vnode.dom.parentNode != null) parent.removeChild(vnode.dom)
if (context != null && vnode.domSize == null && !hasIntegrationMethods(vnode)) { //TODO test custom elements
if (context != null && vnode.domSize == null && !hasIntegrationMethods(vnode.attrs) && !(typeof vnode.tag !== "string" && hasIntegrationMethods(vnode.tag))) { //TODO test custom elements
if (!context.pool) context.pool = [vnode]
else context.pool.push(vnode)
}
@ -352,7 +352,7 @@ module.exports = function($window) {
}
function setAttr(vnode, key, old, value) {
var element = vnode.dom
if (key === "key" || (old === value && !isFormAttribute(vnode, key)) || typeof value === "undefined" || isLifecycleMethod(key)) return
if (key === "key" || (old === value && !isFormAttribute(vnode, key)) && typeof value !== "object" || typeof value === "undefined" || isLifecycleMethod(key)) return
var nsLastIndex = key.indexOf(":")
if (nsLastIndex > -1 && key.substr(0, nsLastIndex) === "xlink") {
element.setAttributeNS("http://www.w3.org/1999/xlink", key.slice(nsLastIndex + 1), value)
@ -402,12 +402,13 @@ module.exports = function($window) {
function isAttribute(attr) {
return attr === "href" || attr === "list" || attr === "form"// || attr === "type" || attr === "width" || attr === "height"
}
function hasIntegrationMethods(vnode) {
return vnode.attrs != null && (vnode.attrs.oncreate || vnode.attrs.onupdate || vnode.attrs.onbeforeremove || vnode.attrs.onremove)
function hasIntegrationMethods(source) {
return source != null && (source.oncreate || source.onupdate || source.onbeforeremove || source.onremove)
}
//style
function updateStyle(element, old, style) {
if (old === style) element.style = "", old = null
if (style == null) element.style = ""
else if (typeof style === "string") element.style = style
else {

17
render/tests/test-component.js
View file

@ -537,6 +537,23 @@ o.spec("component", function() {
o(called).equals(1)
o(root.childNodes.length).equals(0)
})
o("does not recycle when there's an onupdate", function() {
var component = {
onupdate: function() {},
view: function() {
return {tag: "div"}
}
}
var update = o.spy()
var vnode = {tag: component, key: 1}
var updated = {tag: component, key: 1}
render(root, [vnode])
render(root, [])
render(root, [updated])
o(vnode.dom).notEquals(updated.dom)
})
})
o.spec("state", function() {
o("deep copies state", function() {

31
render/tests/test-updateElement.js
View file

@ -92,6 +92,24 @@ o.spec("updateElement", function() {
o(updated.dom.style.backgroundColor).equals("green")
})
o("handles noop style change when style is string", function() {
var vnode = {tag: "a", attrs: {style: "background-color:green;"}}
var updated = {tag: "a", attrs: {style: "background-color:green;"}}
render(root, [vnode])
render(root, [updated])
o(updated.dom.style.backgroundColor).equals("green")
})
o("handles noop style change when style is object", function() {
var vnode = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
var updated = {tag: "a", attrs: {style: {backgroundColor: "red"}}}
render(root, [vnode])
render(root, [updated])
o(updated.dom.style.backgroundColor).equals("red")
})
o("updates style from string to object", function() {
var vnode = {tag: "a", attrs: {style: "background-color:red;"}}
var updated = {tag: "a", attrs: {style: {backgroundColor: "green"}}}
@ -150,6 +168,19 @@ o.spec("updateElement", function() {
o(updated.dom.style.backgroundColor).equals("red")
o(updated.dom.style.border).equals("")
})
o("updates style when it's same object but mutated", function() {
var style = {backgroundColor: "red", color: "gold"}
var vnode = {tag: "a", attrs: {style: style}}
render(root, [vnode])
delete style.backgroundColor
var updated = {tag: "a", attrs: {style: style}}
render(root, [updated])
o(updated.dom.style.backgroundColor).equals("")
o(updated.dom.style.color).equals("gold")
})
o("replaces el", function() {
var vnode = {tag: "a"}
var updated = {tag: "b"}