Preact: Hydration fails when there are HTML comments about block-interactivity-experiments

[luisherranz]

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

• 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.