VRaw is not hydratable

[dmeijboom]

Problem
Now that #2842 is implemented we can finally use raw HTML using server-side rendering 🎉
Unfortunately, it seems like hydration is not supported at this time when using this feature.

I would like to understand why this is the case and as a follow-up question: should it be supported?

Steps To Reproduce

1. Use VNode::from_html_unchecked
2. Enable SSR + Hydration
3. Error: VRaw is not hydratable (raw HTML string cannot be hydrated)

Expected behavior
The best outcome would be that hydration is supported but I have no clue wether that's possible.

Environment:

• Yew version: master
• Rust version: 1.65.0

Questionnaire

• I'm interested in fixing this myself but don't know where to start
• I would like to fix (and I have a solution) <- s/have a solution/will probably figure it out as I got more information now/
• I don't have time to fix this right now, but maybe later

[dmeijboom]

@hamza1311 Can you maybe provide some insight on this?

[hamza1311]

VRaw can't be hydrated because there's nothing to hydrate. It's a simple HTML string

Maybe panicking is a bad idea. Would you mind PRing a fix to remove the panic?

[WorldSEnder]

During hydration, one would still have to figure out the number of children to collect and perhaps in debug mode assert that the inner_html matches (although the latter part might cause unexpected mismatches if done too naively, because the parsed html is sometimes slightly "fixed" by the browser, e.g. the insertion of tbody tags and more). The former part could be done by inserting additional comments like is done around <Suspense> - would have to be matched on server-side during SSR too.

[dmeijboom]

VRaw can't be hydrated because there's nothing to hydrate. It's a simple HTML string

Check, that makes sense

Maybe panicking is a bad idea. Would you mind PRing a fix to remove the panic?

Yes, will do by the end of this week!

[dmeijboom]

During hydration, one would still have to figure out the number of children to collect and perhaps in debug mode assert that the inner_html matches (although the latter part might cause unexpected mismatches if done too naively, because the parsed html is sometimes slightly "fixed" by the browser, e.g. the insertion of tbody tags and more). The former part could be done by inserting additional comments like is done around <Suspense> - would have to be matched on server-side during SSR too.

I will have a look. Are you okay with removing the panic first? Or do you want to implement this before that?

[futursolo]

I think simply removing panicking would not work as next_sibling will also need to be pointed properly for the component / element before VRaw or any update to the element before VRaw will cause it to be inserted to the end of the child nodes of their common parent.

[dmeijboom]

I'll take some time this week to figure out how this works. Thanks everyone for the feedback and insight. Seems like it's not that easy as I initially thought but that's life!
Edit: seems to be more work than anticipated, unfortunately I don't have the knowledge nor the time to work on this.

I implemented hydration for VRaw similar to how the Suspense element works. Will create a PR 🎉