Improve handling of is-elements and Fix tiny bugs of setAttr()/update…

…Style() (#2988) * setAttr/removeAttr: remove `key === "is"`, fixes #2799 This allows the "is" attribute to be set or removed like any other attribute. * swap set and removal order of attributes/style properties * bypass css text This is a leftover from #2811. * Vnode: add vnode.is to handle is-element This seems to give better performance than simply adding a `(old.attrs && old.attrs.is) == (vnode.attrs && vnode.attrs.is)` evaluation to updateNode(). * refactor isEmpty() * move `old.is === vnode.is` evaluation to the top of updateNode() It seems better to evaluate `old.is === vnode.is` before process that assumes node update. * revert isEmpty() back * hasPropertyKey: evaluate `vnode.is` instead of `vnode.attrs.is` * execSelector: use `attrs.is != null` instead of `hasOwn.call(attrs, "is")` * Vnode: initialize `is` with undefined * add manual test * Update hyperscript.js Signed-off-by: Claudia Meadows <[email protected]> --------- Signed-off-by: Claudia Meadows <[email protected]> Co-authored-by: Claudia Meadows <[email protected]>
MithrilJS · Feb 8, 2025 · 2f56c8e · 2f56c8e
1 parent f5fc394
commit 2f56c8e
Show file tree

Hide file tree

Showing 6 changed files with 247 additions and 26 deletions.
diff --git a/render/hyperscript.js b/render/hyperscript.js
@@ -62,6 +62,9 @@ function execSelector(state, vnode) {
 		attrs = Object.assign({type: attrs.type}, attrs)
 	}
 
+	// This reduces the complexity of the evaluation of "is" within the render function.
+	vnode.is = attrs.is
+
 	vnode.attrs = attrs
 
 	return vnode

diff --git a/render/render.js b/render/render.js
@@ -114,7 +114,7 @@ module.exports = function() {
 	function createElement(parent, vnode, hooks, ns, nextSibling) {
 		var tag = vnode.tag
 		var attrs = vnode.attrs
-		var is = attrs && attrs.is
+		var is = vnode.is
 
 		ns = getNameSpace(vnode) || ns
 
@@ -396,7 +396,7 @@ module.exports = function() {
 	}
 	function updateNode(parent, old, vnode, hooks, nextSibling, ns) {
 		var oldTag = old.tag, tag = vnode.tag
-		if (oldTag === tag) {
+		if (oldTag === tag && old.is === vnode.is) {
 			vnode.state = old.state
 			vnode.events = old.events
 			if (shouldNotUpdate(vnode, old)) return
@@ -643,7 +643,7 @@ module.exports = function() {
 		}
 	}
 	function setAttr(vnode, key, old, value, ns) {
-		if (key === "key" || key === "is" || value == null || isLifecycleMethod(key) || (old === value && !isFormAttribute(vnode, key)) && typeof value !== "object") return
+		if (key === "key" || value == null || isLifecycleMethod(key) || (old === value && !isFormAttribute(vnode, key)) && typeof value !== "object") return
 		if (key[0] === "o" && key[1] === "n") return updateEvent(vnode, 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)
@@ -676,7 +676,7 @@ module.exports = function() {
 		}
 	}
 	function removeAttr(vnode, key, old, ns) {
-		if (key === "key" || key === "is" || old == null || isLifecycleMethod(key)) return
+		if (key === "key" || old == null || isLifecycleMethod(key)) return
 		if (key[0] === "o" && key[1] === "n") updateEvent(vnode, key, undefined)
 		else if (key === "style") updateStyle(vnode.dom, old, null)
 		else if (
@@ -710,22 +710,24 @@ module.exports = function() {
 		if ("selectedIndex" in attrs) setAttr(vnode, "selectedIndex", null, attrs.selectedIndex, undefined)
 	}
 	function updateAttrs(vnode, old, attrs, ns) {
-		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) {
+			if (old === attrs) {
+				console.warn("Don't reuse attrs object, use new object for every redraw, this will throw in next major")
+			}
 			for (var key in old) {
 				if (((val = old[key]) != null) && (attrs == null || attrs[key] == null)) {
 					removeAttr(vnode, key, val, ns)
 				}
 			}
 		}
+		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)
@@ -737,7 +739,7 @@ module.exports = function() {
 		// Filter out namespaced keys
 		return ns === undefined && (
 			// If it's a custom element, just keep it.
-			vnode.tag.indexOf("-") > -1 || vnode.attrs != null && vnode.attrs.is ||
+			vnode.tag.indexOf("-") > -1 || vnode.is ||
 			// If it's a normal element, let's try to avoid a few browser bugs.
 			key !== "href" && key !== "list" && key !== "form" && key !== "width" && key !== "height"// && key !== "type"
 			// Defer the property check until *after* we check everything.
@@ -756,7 +758,7 @@ module.exports = function() {
 			element.style = style
 		} else if (old == null || typeof old !== "object") {
 			// `old` is missing or a string, `style` is an object.
-			element.style.cssText = ""
+			element.style = ""
 			// Add new style properties
 			for (var key in style) {
 				var value = style[key]
@@ -767,6 +769,15 @@ module.exports = function() {
 			}
 		} else {
 			// Both old & new are (different) objects.
+			// 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.includes("-")) element.style.removeProperty(key)
+					else element.style[key] = ""
+				}
+			}
 			// Update style properties that have changed
 			for (var key in style) {
 				var value = style[key]
@@ -775,13 +786,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.includes("-")) element.style.removeProperty(key)
-					else element.style[key] = ""
-				}
-			}
 		}
 	}
 

diff --git a/render/tests/manual/case-handling.html b/render/tests/manual/case-handling.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <p>This is a test for special case-handling of attribute and style properties. (#2988).</p>
+        <p>Open your browser's Developer Console and follow these steps:</p>
+        <ol>
+            <li>Check the background color of the "foo" below.</li>
+            <ul>
+                <li>If it is light green, it is correct. The style has been updated properly.</li>
+                <li>If it is red or yellow, the style has not been updated properly.</li>
+            </ul>
+            <li>Check the logs displayed in the console.</li>
+            <ul>
+                <li>If the attribute has been updated correctly, you should see the following message: "If you see this message, the update process is correct."</li>
+                <li>If "null" is displayed, the attribute has not been updated properly.</li>
+            </ul>
+        </ol>
+
+        <div id="root" style="background-color: red;"></div>
+        <script src="../../../mithril.js"></script>
+        <script>
+            // data-*** is NOT case-sensitive
+            // style properties have two cases (camelCase and dash-case)
+            var a = m("div#a", {"data-sampleId": "If you see this message, something is wrong.", style: {backgroundColor: "yellow"}}, "foo")
+            var b = m("div#a", {"data-sampleid": "If you see this message, the update process is correct.", style: {"background-color": "lightgreen"}}, "foo")
+
+            // background color is yellow
+            m.render(document.getElementById("root"), a)
+
+            // background color is lightgreen?
+            m.render(document.getElementById("root"), b)
+
+            // data-sampleid is "If you see this message, the update process is correct."?
+            console.log(document.querySelector("#a").getAttribute("data-sampleid"))
+        </script>
+    </body>
+</html>
diff --git a/render/tests/test-attributes.js b/render/tests/test-attributes.js
@@ -80,8 +80,8 @@ o.spec("attributes", function() {
 			o(spies[0].callCount).equals(0)
 			o(spies[2].callCount).equals(0)
 			o(spies[3].calls).deepEquals([{this: spies[3].elem, args: ["custom", "x"]}])
-			o(spies[4].calls).deepEquals([{this: spies[4].elem, args: ["custom", "x"]}])
-			o(spies[5].calls).deepEquals([{this: spies[5].elem, args: ["custom", "x"]}])
+			o(spies[4].calls).deepEquals([{this: spies[4].elem, args: ["is", "something-special"]}, {this: spies[4].elem, args: ["custom", "x"]}])
+			o(spies[5].calls).deepEquals([{this: spies[5].elem, args: ["is", "something-special"]}, {this: spies[5].elem, args: ["custom", "x"]}])
 		})
 
 		o("when vnode is customElement with property, custom setAttribute not called", function(){
@@ -124,8 +124,8 @@ o.spec("attributes", function() {
 			o(spies[1].callCount).equals(0)
 			o(spies[2].callCount).equals(0)
 			o(spies[3].callCount).equals(0)
-			o(spies[4].callCount).equals(0)
-			o(spies[5].callCount).equals(0)
+			o(spies[4].callCount).equals(1) // setAttribute("is", "something-special") is called
+			o(spies[5].callCount).equals(1) // setAttribute("is", "something-special") is called
 			o(getters[0].callCount).equals(0)
 			o(getters[1].callCount).equals(0)
 			o(getters[2].callCount).equals(0)

diff --git a/render/tests/test-updateElement.js b/render/tests/test-updateElement.js
@@ -388,4 +388,178 @@ o.spec("updateElement", function() {
 		o(root.childNodes.length).equals(3)
 		o(x).notEquals(y) // this used to be a recycling pool test
 	})
+	o.spec("element node with `is` attribute", function() {
+		o("recreate element node with `is` attribute (set `is`)", function() {
+			var vnode = m("a")
+			var updated = m("a", {is: "bar"})
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).notEquals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("A")
+			o(updated.dom.getAttribute("is")).equals("bar")
+		})
+		o("recreate element node without `is` attribute (remove `is`)", function() {
+			var vnode = m("a", {is: "foo"})
+			var updated = m("a")
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).notEquals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("A")
+			o(updated.dom.getAttribute("is")).equals(null)
+		})
+		o("recreate element node with `is` attribute (same tag, different `is`)", function() {
+			var vnode = m("a", {is: "foo"})
+			var updated = m("a", {is: "bar"})
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).notEquals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("A")
+			o(updated.dom.getAttribute("is")).equals("bar")
+		})
+		o("recreate element node with `is` attribute (different tag, same `is`)", function() {
+			var vnode = m("a", {is: "foo"})
+			var updated = m("b", {is: "foo"})
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).notEquals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("B")
+			o(updated.dom.getAttribute("is")).equals("foo")
+		})
+		o("recreate element node with `is` attribute (different tag, different `is`)", function() {
+			var vnode = m("a", {is: "foo"})
+			var updated = m("b", {is: "bar"})
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).notEquals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("B")
+			o(updated.dom.getAttribute("is")).equals("bar")
+		})
+		o("keep element node with `is` attribute (same tag, same `is`)", function() {
+			var vnode = m("a", {is: "foo"})
+			var updated = m("a", {is: "foo"}, "x")
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).equals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("A")
+			o(updated.dom.getAttribute("is")).equals("foo")
+			o(updated.dom.firstChild.nodeValue).equals("x")
+		})
+		o("recreate element node with `is` attribute (set `is`, CSS selector)", function() {
+			var vnode = m("a")
+			var updated = m("a[is=bar]")
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).notEquals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("A")
+			o(updated.dom.getAttribute("is")).equals("bar")
+		})
+		o("recreate element node without `is` attribute (remove `is`, CSS selector)", function() {
+			var vnode = m("a[is=foo]")
+			var updated = m("a")
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).notEquals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("A")
+			o(updated.dom.getAttribute("is")).equals(null)
+		})
+		o("recreate element node with `is` attribute (same tag, different `is`, CSS selector)", function() {
+			var vnode = m("a[is=foo]")
+			var updated = m("a[is=bar]")
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).notEquals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("A")
+			o(updated.dom.getAttribute("is")).equals("bar")
+		})
+		o("recreate element node with `is` attribute (different tag, same `is`, CSS selector)", function() {
+			var vnode = m("a[is=foo]")
+			var updated = m("b[is=foo]")
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).notEquals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("B")
+			o(updated.dom.getAttribute("is")).equals("foo")
+		})
+		o("recreate element node with `is` attribute (different tag, different `is`, CSS selector)", function() {
+			var vnode = m("a[is=foo]")
+			var updated = m("b[is=bar]")
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).notEquals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("B")
+			o(updated.dom.getAttribute("is")).equals("bar")
+		})
+		o("keep element node with `is` attribute (same tag, same `is`, CSS selector)", function() {
+			var vnode = m("a[is=foo]")
+			var updated = m("a[is=foo]", "x")
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).equals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("A")
+			o(updated.dom.getAttribute("is")).equals("foo")
+			o(updated.dom.firstChild.nodeValue).equals("x")
+		})
+		o("keep element node with `is` attribute (same tag, same `is`, from attrs to CSS selector)", function() {
+			var vnode = m("a", {is: "foo"})
+			var updated = m("a[is=foo]", "x")
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).equals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("A")
+			o(updated.dom.getAttribute("is")).equals("foo")
+			o(updated.dom.firstChild.nodeValue).equals("x")
+		})
+		o("keep element node with `is` attribute (same tag, same `is`, from CSS selector to attrs)", function() {
+			var vnode = m("a[is=foo]")
+			var updated = m("a", {is: "foo"}, "x")
+
+			render(root, vnode)
+			render(root, updated)
+
+			o(vnode.dom).equals(root.firstChild)
+			o(updated.dom).equals(root.firstChild)
+			o(updated.dom.nodeName).equals("A")
+			o(updated.dom.getAttribute("is")).equals("foo")
+			o(updated.dom.firstChild.nodeValue).equals("x")
+		})
+	})
 })
diff --git a/render/vnode.js b/render/vnode.js
@@ -1,7 +1,7 @@
 "use strict"
 
 function Vnode(tag, key, attrs, children, text, dom) {
-	return {tag: tag, key: key, attrs: attrs, children: children, text: text, dom: dom, domSize: undefined, state: undefined, events: undefined, instance: undefined}
+	return {tag: tag, key: key, attrs: attrs, children: children, text: text, dom: dom, is: undefined, domSize: undefined, state: undefined, events: undefined, instance: undefined}
 }
 Vnode.normalize = function(node) {
 	if (Array.isArray(node)) return Vnode("[", undefined, undefined, Vnode.normalizeChildren(node), undefined, undefined)