fix: rewrite SSR client-side hydration #6067
Conversation
johnjenkins
changed the title
|
@johnjenkins awesome work 👏 I am reviewing this, please give me until next week. I feel confident we can merge and publish this relatively quickly when test pass and coverage was adjusted properly. |
There was a problem hiding this comment.
Fantastic work 👏 I really appreciate you helping out with these essential runtime improvements. I've been working on Stencil now for more than a year and still feel very confused in many areas here. So while I still don't 100% understand all code changes I feel confident moving forward with this as the code is clearly written, comments added and test coverage increased. I would love to schedule a session with you enventually for some learn more about everything you know about this.
Thanks a ton!
|
Absolute pleasure. |
What is the current behavior?
There are lots of rough edges around the use of Stencil's proprietary non-shadow components during SSR
GitHub Issue Number:
shadow: trueandscoped: truecomponents during SSR hydration #6065scoped: truecomponent gets duplicated during SSR hydration #6064scoped: truecomponent changes order of markup during SSR hydration #6063scoped: truecomponent slot fallback content gets hidden during SSR hydration #6062What is the new behavior?
A partial re-write of
client-hydrate.ts(and few minor tweaks in the accompanying files) fixes all these issues.Documentation
Does this introduce a breaking change?
^ no breaking changes, but I should mention that during / after hydrating now, there are some changes to the outputted markup:
These changes could potentially cause users' test snapshots to fail.
Users would just need to update their snapshots
Testing
New spec tests. New e2e tests.
Other information
Referring to the linked issues, here's the same repo with the fixes applied:
I appreciate, with a re-factor to
client-hydrate.tsthis big, there's a degree of 'trust me bra' involved - it's difficult to grok. I've done my best to add lots of comments to help elucidate it's dark magic, but if it's too much or too little just let me know. If you'd like me to talk through what it's doing just let me know :)