swap set and removal order of attributes/style properties

Author: kfule

render/render.js

@@ -746,11 +746,8 @@ module.exports = function() {
 		if (old && old === attrs) {
 			console.warn("Don't reuse attrs object, use new object for every redraw, this will throw in next major")
 		}
-		if (attrs != null) {
-			for (var key in attrs) {
-				setAttr(vnode, key, old && old[key], attrs[key], ns)
-			}
-		}
+		// Some attributes may NOT be case-sensitive (e.g. data-***),
+		// so removal should be done first to prevent accidental removal for newly setting values.
 		var val
 		if (old != null) {
 			for (var key in old) {
@@ -759,6 +756,11 @@ module.exports = function() {
 				}
 			}
 		}
+		if (attrs != null) {
+			for (var key in attrs) {
+				setAttr(vnode, key, old && old[key], attrs[key], ns)
+			}
+		}
 	}
 	function isFormAttribute(vnode, attr) {
 		return attr === "value" || attr === "checked" || attr === "selectedIndex" || attr === "selected" && vnode.dom === activeElement(vnode.dom) || vnode.tag === "option" && vnode.dom.parentNode === activeElement(vnode.dom)
@@ -799,6 +801,15 @@ module.exports = function() {
 				}
 			}
 		} else {
+			// Remove style properties that no longer exist.
+			// Style properties may have two cases(dash-case and camelCase),
+			// so removal should be done first to prevent accidental removal for newly setting values.
+			for (var key in old) {
+				if (old[key] != null && style[key] == null) {
+					if (key[0] === "-" && key[1] === "-") element.style.removeProperty(key)
+					else element.style[key] = ""
+				}
+			}
 			// Both old & new are (different) objects.
 			// Update style properties that have changed
 			for (var key in style) {
@@ -808,13 +819,6 @@ module.exports = function() {
 					else element.style[key] = value
 				}
 			}
-			// Remove style properties that no longer exist
-			for (var key in old) {
-				if (old[key] != null && style[key] == null) {
-					if (key[0] === "-" && key[1] === "-") element.style.removeProperty(key)
-					else element.style[key] = ""
-				}
-			}
 		}
 	}