Hydration removes and add nodes again when there are HTML comments just before them

• Check if updating to the latest Preact version resolves the issue

Describe the bug

Preact unnecessarily removes and adds the DOM nodes that it finds after HTML comments during hydration.

<div id="root">
    <div>I'm going to be preserved in the DOM</div>
    <!-- I'm a comment, so I'll be removed, which is also fine -->
    <div>I'll be removed and added back again</div>
</div>

To Reproduce

I reproduced the bug in this repository: https://github.com/luisherranz/preact-comments-hydration-bug (Open with Stackblitz Codeflow)

And this is a branch with a Mutation Observer added to the current hydration tests.

Steps to reproduce the behavior:

1. Add a comment to the SSR’ed HTML
2. Monitor changes to the DOM
3. Hydrate it with Preact
4. The nodes after the HTML comment are removed and added again

There is a video with a longer explanation on this other issue.

Expected behavior

Preact should remove the comments, but it should preserve the rest of the DOM nodes.

[luisherranz]

I’m going to close this issue as this works as expected, and we will manually remove the HTML comments during our DOM -> vDOM step. I’ll keep an eye on what you release for streaming in case we can adopt it in the future!

[luisherranz]

the pending areas need to be marked with HTML comments

Oh, interesting (and exciting) 🙂

What’s your idea about that part? (for example, is the idea to keep vnode representations of those HTML comments in the vdom while the rest of the HTML is streamed?)