Bug - Morph text nodes.

[SimoTod]

patchChildren uses firstChild to select the first child node which works correctly with DOM elements and text nodes but then it uses nextElementSibling to get the next node which only returns DOM elements. As a consequence, if the children list is a mix of DOM elements and text nodes (for example, a paragraph content with <br> tags), any text node that is not the first child will be ignored and left in the previous status.

Flagged by #2463

Failing test: https://github.com/alpinejs/alpine/runs/4619366189?check_suite_focus=true#step:6:1106

[SimoTod]

Not relevant to this bug but I believe it's a typo as nodes should be a function call

[calebporzio]

Good call, should be yeah

[earthboundkid]

Totally dumb question, but I just learned about https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker. Would that be useful for the traversals or is it not relevant?

[SimoTod]

I don't know, i never used it. it would change the original implementation quite a lot so you need to ask Caleb.

[calebporzio]

Great question @carlmjohnson!

When I cracked into this problem I started there, but there are two problems with TreeWalker:
A) Oddly enough, t's actually slower than manually crawling in almost every case. I just recently checked it's performance again, and still, slower.
B) That's enough to not use it, but more than that, to my knowledge, there is no way to "skip" a subtree with the TreeWalker and that is required functionality here.

[SimoTod]

Relevant change. When getting the next element for the next loop iteration, we want to use nodes() so we don’t skip text nodes.

[calebporzio]

Thanks @SimoTod!