More accurate style object diffs

This commit is contained in:
spacejack 2017-08-13 18:32:32 -04:00
parent c29e269c2c
commit 1e56f7763e
2 changed files with 25 additions and 0 deletions

View file

@ -552,6 +552,18 @@ module.exports = function($window) {
//style
function updateStyle(element, old, style) {
if (old != null && style != null && typeof old === "object" && typeof style === "object" && style !== old) {
// Both old & new are (different) objects.
// Update style properties that have changed
for (var key in style) {
if (style[key] !== old[key]) element.style[key] = style[key]
}
// Remove style properties that no longer exist
for (var key in old) {
if (!(key in style)) element.style[key] = ""
}
return
}
if (old === style) element.style.cssText = "", old = null
if (style == null) element.style.cssText = ""
else if (typeof style === "string") element.style.cssText = style

View file

@ -192,6 +192,19 @@ o.spec("updateElement", function() {
o(updated.dom.style.backgroundColor).equals("")
o(updated.dom.style.color).equals("gold")
})
o("does not re-render element styles for equivalent style objects", function() {
var style = {color: "gold"}
var vnode = {tag: "a", attrs: {style: style}}
render(root, [vnode])
root.firstChild.style.color = "red"
style = {color: "gold"}
var updated = {tag: "a", attrs: {style: style}}
render(root, [updated])
o(updated.dom.style.color).equals("red")
})
o("replaces el", function() {
var vnode = {tag: "a"}
var updated = {tag: "b"}