Preact: Hydration fails when there are HTML comments

[luisherranz]

We found what I think is a bug in Preact's hydration. By default, if Preact finds HTML comments during the hydration, it removes them. The problem is that while doing so, it also recreates (removes and adds again) the next DOM node.

I've reproduced the issue in this repository: https://github.com/luisherranz/preact-comments-hydration-bug

I've also checked it in Preact's own tests, and it's also happening there: luisherranz/preact@004d25b

I've recorded a video to show the repository and tests:

https://www.loom.com/share/89dbe2ac14164bb9a35457cd27e10cce

[luisherranz]

I've opened an issue in Preact's repo:

• Hydration removes and add nodes again when there are HTML comments just before them preactjs/preact#3767

cc: @DAreRodz @michalczaplinski

[luisherranz]

Ok, so this doesn't seem to be a bug in Preact, but the expected behavior.

I would try the following implementation here:

• While doing the DOM -> vDOM (toVdom), remove the comments from the DOM, but keep the string and a reference to its location (parent or previous sibling).
• Right after the hydrate, add them back.

[luisherranz]

This seems to work fine. It should be just as fast, if not faster:

- const children = [].map.call(node.childNodes, toVdom).filter(exists);
+ const children = [];
+ for (let i = 0; i < childNodes.length; i++) {
+   const child = childNodes[i];
+   if (child.nodeType === 8) {
+     child.remove();
+     i--;
+   } else {
+     children.push(toVdom(child));
+   }
+ }

Kudos to @DAreRodz for noticing that we need to modify the index when removing child nodes.

[luisherranz]

Let's not add the comments back just yet to avoid introducing complexity prematurely and see what happens when we test this in real sites.

[luisherranz]

Already solved in #84.