Skip to content

Make vnode.domSize assignment consistent between create and update. #3055

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dead-claudia merged 3 commits into from
Nov 8, 2025
Merged

Make vnode.domSize assignment consistent between create and update. #3055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c5b0f4
Make `vnode.domSize` assignment consistent between create and update.
kfule Nov 1, 2025
d635dd9
Remove unnecessary comment.
kfule Nov 1, 2025
18b47e9
add tests to check domSize
kfule Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 6 additions & 12 deletions render/render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,6 @@ module.exports = function() {
}
vnode.dom = temp.firstChild
vnode.domSize = temp.childNodes.length
// Capture nodes to remove, so we don't confuse them.
var fragment = getDocument(parent).createDocumentFragment()
var child
while (child = temp.firstChild) {
Expand Down Expand Up @@ -162,7 +161,7 @@ module.exports = function() {
if (vnode.instance != null) {
createNode(parent, vnode.instance, hooks, ns, nextSibling)
vnode.dom = vnode.instance.dom
vnode.domSize = vnode.dom != null ? vnode.instance.domSize : 0
vnode.domSize = vnode.instance.domSize
}
else {
vnode.domSize = 0
Expand Down Expand Up @@ -446,8 +445,8 @@ module.exports = function() {
domSize += child.domSize || 1
}
}
if (domSize !== 1) vnode.domSize = domSize
}
vnode.domSize = domSize
}
function updateElement(old, vnode, hooks, ns) {
var element = vnode.dom = old.dom
Expand All @@ -471,14 +470,9 @@ module.exports = function() {
vnode.dom = vnode.instance.dom
vnode.domSize = vnode.instance.domSize
}
else if (old.instance != null) {
removeNode(parent, old.instance)
vnode.dom = undefined
vnode.domSize = 0
}
else {
vnode.dom = old.dom
vnode.domSize = old.domSize
if (old.instance != null) removeNode(parent, old.instance)
vnode.domSize = 0
}
}
function getKeyMap(vnodes, start, end) {
Expand Down Expand Up @@ -550,7 +544,7 @@ module.exports = function() {
function moveDOM(parent, vnode, nextSibling) {
if (vnode.dom != null) {
var target
if (vnode.domSize == null) {
if (vnode.domSize == null || vnode.domSize === 1) {
// don't allocate for the common case
target = vnode.dom
} else {
Expand Down Expand Up @@ -615,7 +609,7 @@ module.exports = function() {
}
function removeDOM(parent, vnode) {
if (vnode.dom == null) return
if (vnode.domSize == null) {
if (vnode.domSize == null || vnode.domSize === 1) {
parent.removeChild(vnode.dom)
} else {
for (var dom of domFor(vnode)) parent.removeChild(dom)
Expand Down
236 changes: 236 additions & 0 deletions render/tests/test-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -870,6 +870,242 @@ o.spec("component", function() {
}
})
})
o.spec("vnode.domSize (vnode.instance == null)", function() {
o("create and update", function() {
var component = createComponent({
view: function() {return null}
})
// create
var v1 = m(component)
render(root, v1)
o(v1.domSize).equals(0)
o(v1.instance).equals(null)
// update
var v2 = m(component)
render(root, v2)
o(v2.domSize).equals(0)
o(v2.instance).equals(null)
})
o("remove instance", function() {
var v
var component = createComponent({
view: function() {return v}
})
// create (return element vnode)
v = m("a")
var v1 = m(component)
render(root, v1)
o(v1.instance.tag).equals("a")
o(v1.domSize).equals(undefined)
o(v1.instance.domSize).equals(undefined)
// remove instance (return null)
v = null
var v2 = m(component)
render(root, v2)
o(v2.domSize).equals(0)
o(v2.instance).equals(null)
})
o("nested component", function() {
var childComponent = createComponent({
view: function() {return null}
})
var parentComponent = createComponent({
view: function() {return m(childComponent)}
})
// create
var v1 = m(parentComponent)
render(root, v1)
o(v1.domSize).equals(0)
o(v1.instance.domSize).equals(0)
o(v1.instance.instance).equals(null)
// update
var v2 = m(parentComponent)
render(root, v2)
o(v2.domSize).equals(0)
o(v2.instance.domSize).equals(0)
o(v2.instance.instance).equals(null)
})
})
o.spec("vnode.domSize equals vnode.instance.domSize (vnode.instance != null)", function() {
o("text", function() {
var component = createComponent({
view: function() {return "text"}
})
// create
var v1 = m(component)
render(root, v1)
o(v1.instance.tag).equals("#")
o(v1.domSize).equals(undefined)
o(v1.instance.domSize).equals(undefined)
o(v1.dom).equals(v1.instance.dom)
// update
var v2 = m(component)
render(root, v2)
o(v2.instance.tag).equals("#")
o(v2.domSize).equals(undefined)
o(v2.instance.domSize).equals(undefined)
o(v2.dom).equals(v2.instance.dom)
})
o("element", function() {
var component = createComponent({
view: function() {return m("a")}
})
// create
var v1 = m(component)
render(root, v1)
o(v1.instance.tag).equals("a")
o(v1.domSize).equals(undefined)
o(v1.instance.domSize).equals(undefined)
o(v1.dom).equals(v1.instance.dom)
// update
var v2 = m(component)
render(root, v2)
o(v2.instance.tag).equals("a")
o(v2.domSize).equals(undefined)
o(v2.instance.domSize).equals(undefined)
o(v2.dom).equals(v2.instance.dom)
})
o("trust(0)", function() {
var component = createComponent({
view: function() {return m.trust("")}
})
// create
var v1 = m(component)
render(root, v1)
o(v1.instance.tag).equals("<")
o(v1.domSize).equals(0)
o(v1.instance.domSize).equals(0)
o(v1.dom).equals(v1.instance.dom)
// update
var v2 = m(component)
render(root, v2)
o(v2.instance.tag).equals("<")
o(v2.domSize).equals(0)
o(v2.instance.domSize).equals(0)
o(v2.dom).equals(v2.instance.dom)
})
o("trust(1)", function() {
var component = createComponent({
view: function() {return m.trust("<a></a>")}
})
// create
var v1 = m(component)
render(root, v1)
o(v1.instance.tag).equals("<")
o(v1.domSize).equals(1)
o(v1.instance.domSize).equals(1)
o(v1.dom).equals(v1.instance.dom)
// update
var v2 = m(component)
render(root, v2)
o(v2.instance.tag).equals("<")
o(v2.domSize).equals(1)
o(v2.instance.domSize).equals(1)
o(v2.dom).equals(v2.instance.dom)
})
o("trust(2)", function() {
var component = createComponent({
view: function() {return m.trust("<a></a><b></b>")}
})
// create
var v1 = m(component)
render(root, v1)
o(v1.instance.tag).equals("<")
o(v1.domSize).equals(2)
o(v1.instance.domSize).equals(2)
o(v1.dom).equals(v1.instance.dom)
// update
var v2 = m(component)
render(root, v2)
o(v2.instance.tag).equals("<")
o(v2.domSize).equals(2)
o(v2.instance.domSize).equals(2)
o(v2.dom).equals(v2.instance.dom)
})
o("fragment(0)", function() {
var component = createComponent({
view: function() {return []}
})
// create
var v1 = m(component)
render(root, v1)
o(v1.instance.tag).equals("[")
o(v1.domSize).equals(0)
o(v1.instance.domSize).equals(0)
o(v1.dom).equals(v1.instance.dom)
// update
var v2 = m(component)
render(root, v2)
o(v2.instance.tag).equals("[")
o(v2.domSize).equals(0)
o(v2.instance.domSize).equals(0)
o(v2.dom).equals(v2.instance.dom)
})
o("fragment(1)", function() {
var component = createComponent({
view: function() {return [m("a")]}
})
// create
var v1 = m(component)
render(root, v1)
o(v1.instance.tag).equals("[")
o(v1.domSize).equals(1)
o(v1.instance.domSize).equals(1)
o(v1.dom).equals(v1.instance.dom)
// update
var v2 = m(component)
render(root, v2)
o(v2.instance.tag).equals("[")
o(v2.domSize).equals(1)
o(v2.instance.domSize).equals(1)
o(v2.dom).equals(v2.instance.dom)
})
o("fragment(2)", function() {
var component = createComponent({
view: function() {return [m("a"), m("b")]}
})
// create
var v1 = m(component)
render(root, v1)
o(v1.instance.tag).equals("[")
o(v1.domSize).equals(2)
o(v1.instance.domSize).equals(2)
o(v1.dom).equals(v1.instance.dom)
// update
var v2 = m(component)
render(root, v2)
o(v2.instance.tag).equals("[")
o(v2.domSize).equals(2)
o(v2.instance.domSize).equals(2)
o(v2.dom).equals(v2.instance.dom)
})
o("nested component", function() {
var childComponent = createComponent({
view: function() {return [m("a"), m("b")]}
})
var parentComponent = createComponent({
view: function() {return m(childComponent)}
})
// create
var v1 = m(parentComponent)
render(root, v1)
o(v1.instance.instance.tag).equals("[")
o(v1.domSize).equals(2)
o(v1.instance.domSize).equals(2)
o(v1.instance.instance.domSize).equals(2)
o(v1.dom).equals(v1.instance.dom)
o(v1.instance.dom).equals(v1.instance.instance.dom)
// update
var v2 = m(parentComponent)
render(root, v2)
o(v2.instance.instance.tag).equals("[")
o(v2.domSize).equals(2)
o(v2.instance.domSize).equals(2)
o(v2.instance.instance.domSize).equals(2)
o(v2.dom).equals(v2.instance.dom)
o(v2.instance.dom).equals(v2.instance.instance.dom)
})
})
})
})
o.spec("Tests specific to certain component kinds", function() {
Expand Down
2 changes: 2 additions & 0 deletions render/tests/test-createFragment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ o.spec("createFragment", function() {
render(root, vnode)

o(vnode.dom.nodeName).equals("A")
o(vnode.domSize).equals(1)
})
o("handles empty fragment", function() {
var vnode = fragment()
Expand Down Expand Up @@ -48,5 +49,6 @@ o.spec("createFragment", function() {

o(vnode.dom).notEquals(null)
o(vnode.dom.nodeName).equals("TD")
o(vnode.domSize).equals(1)
})
})
4 changes: 4 additions & 0 deletions render/tests/test-createHTML.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@ o.spec("createHTML", function() {
render(root, vnode)

o(vnode.dom.nodeName).equals("A")
o(vnode.domSize).equals(1)
})
o("creates text HTML", function() {
var vnode = trust("a")
render(root, vnode)

o(vnode.dom.nodeValue).equals("a")
o(vnode.domSize).equals(1)
})
o("handles empty HTML", function() {
var vnode = trust("")
Expand Down Expand Up @@ -59,12 +61,14 @@ o.spec("createHTML", function() {

o(vnode.dom.nodeName).equals("g")
o(vnode.dom.namespaceURI).equals("http://www.w3.org/2000/svg")
o(vnode.domSize).equals(1)
})
o("creates text SVG", function() {
var vnode = trust("a")
render(root, m("svg", vnode))

o(vnode.dom.nodeValue).equals("a")
o(vnode.domSize).equals(1)
})
o("handles empty SVG", function() {
var vnode = trust("")
Expand Down
3 changes: 3 additions & 0 deletions render/tests/test-updateFragment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ o.spec("updateFragment", function() {

o(updated.dom).equals(root.firstChild)
o(updated.dom.nodeName).equals("B")
o(updated.domSize).equals(1)
})
o("adds els", function() {
var vnode = fragment()
Expand Down Expand Up @@ -57,6 +58,7 @@ o.spec("updateFragment", function() {

o(updated.dom).equals(root.firstChild)
o(updated.dom.nodeName).equals("A")
o(updated.domSize).equals(1)
})
o("updates to childless fragment", function() {
var vnode = fragment(m("a"))
Expand All @@ -66,6 +68,7 @@ o.spec("updateFragment", function() {
render(root, updated)

o(updated.dom).equals(null)
o(updated.domSize).equals(0)
o(root.childNodes.length).equals(0)
})
})
Loading
⬇