glimmer-vm
glimmer-vm copied to clipboard
glimmerjs
Rehydration Should be More Resilient In Mismatch Scenarios
Given:
Component: A
<p class="a">{{yield}}</p>
Component: B
<div class="b">{{yield}}</div>
Component: Main
<A><B>Hello</B></A>
This will serialize to roughly the following:
<!--block+:0-->
<!--block+:1-->
<p class="a">
<!--block+:2-->
<div class="b">
<!--block+:3-->
Hello
<!--block-:3-->
</div>
<!--block-:2-->
</p>
<!--block-:1-->
<!--block-:0-->
The issue is because of similar reasons outlined in #622 the browsers Treebuilder will produce the following DOM.
<!--block+:0-->
<!--block+:1-->
<p class="a">
<!--block+:2-->
<!--block-:2-->
</p>
<div class="b">
<!--block+:3-->
Hello
<!--block-:3-->
</div>
<!--block-:1-->
<!--block-:0-->
This leaves the rehydration process in pretty bad place. Furthermore, from a developer experience point of view it is not immediately obvious that you are composing 2 tags together that produce invalid HTML.
The solution, clearly, is to only support <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
we can make the serializer add, the html is not parsable, only buildable and I don't know how far we should go to support bad html.
there is no way to render this in a SSR friendly way but we could detect during serialization and leave it out, that would also fix rehydration.
