Progressive enhancement vs hydration

[fcrozatier]

Describe the bug

Currently the way components are hydrated gets in the way of progressive enhancement.

Even if a component works in both js or non-js scenarios, the user experience can't benefit from it: when js kicks in the state is restored which can be frustrating with menus closing etc.

This means progressive enhancement is limited to js vs no-js (for a good experience). However there is a huge territory between, and it would be great to be able to have great experiences for slow networks too (most people in the world).

Example: here's a disclosure component. It works with or without js. But when js kicks in it closes, so even though it's immediately interactive, it's not great. And trying something like "onMount read the state from the checkbox" doesn't work

Enregistrement.de.l.ecran.2024-10-14.a.19.05.33.mov

Maybe something like a hydration hook or a marker would allow to say something like "this is enhanced, don't wipe out this element" and "pick up the state from this checkbox instead of the props"?

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE72VXW_bIBSG_8opijRby5x7N3G1j0qb1EmTtrtSqRgfJygYLMBZq8z_fWDsfKjduu1iuQkQ3nOe8wIne1ILiZbkt3uiWIMkJ2_blsyJe2zDxO5QOvRzqzvDw8rSciNaV1BFnWhabRx8EJZLbTuDUBvdACXZ4riWxRiUXFK1XBzVanmiWxQ-R6MrUQusSO5Mh_38gHTc-AdkIJlaryhxlhKfB0Cigz0w7sQOYQWzUqiKlRKTmkmLKfT54eccSq0lMgV92Nka3dokvQy0MY7tmoaZxxw-fvt8cy2xQeXgB3SqwloorILKOuZwUEUN3yDflvohij6ptnMvKoN2sYAvRq8NWhvIUW2Y4oNuiuzY-iijRLISJSWTfoZ1jdwlSQqrAvZhCUDUkIxFgFBe6UPqeiC7CfKRLJ32A3CtrPckk3rtc4wUMUvc8GvOHAyyCnhnTKh24IxXZPIEkkqjVa8cfNdmC8wCPrQeGqt0Cn84uIuLSXWVDSOsDgzHXww2enc0MXyiTZSUnXNaDRcxLPfhq_9Xt94NwV6ySwrrUKE59WsMeJWxqrreefXNuMnv51LwLSVzOMM4tyGODuH69D_WMxzhM8VkFXPMost0i8pD3s_2EbO_f0J33gQqsRte6TI-6BzHp-E2wq72_uh6CA82j_MxXQ9cMuvnniiuUNIXMdFShBd2KpouRw-hd_jWMC1QAuNFWk24vhPFMF_HuAFtcc5WRIeX1vsrtBpZfFitXHidpHgfR14YtxSh6lipH1n3KHFIk6-lLplMsqmvbJhNChgqyEe0FF5DNoZO58-pboP5b4Lzoe351knJ3aloOsxK2FYy37xKqfl2OJc-lvJbDqVdcoD5S5qhxb6Eo7TCicZbNrrz9A_hrv8JuEyfva8GAAA=

Logs

No response

System Info

none

Severity

blocking all usage of svelte

[trueadm]

Svelte's hydration is designed to run on the initial page load, it's not meant to be progressively used later. This is how Svelte has always worked and to change that to support this use-case isn't something that's possible at this point in time. You can however use effects in your component to intercept already rendered content to progressively load state from the DOM to avoid some of the cases you mention.

[fcrozatier]

Would you have a hint of how this can be achieved? I'd love to be able to progressively enhance components this way but for now I didn't manage to set this up.

In the linked example I have a dynamic element label and checkbox for the no-js case and on mount change element into a button and remove the checkbox (js case). How can I use an effect to progressively load the active state from the checkbox state? I've tried on line 21 without success

Thank you :)