search

sveltejs / sapper

The next small thing in web development, powered by Svelte
https://sapper.svelte.dev
MIT License
7k stars 434 forks source link

Integrate with angular/preboot or something like that? #1131

Open khuongduybui opened 4 years ago

khuongduybui commented 4 years ago

Is your feature request related to a problem? Please describe.

Maybe I'm not doing this correctly but when I bind a value to a form input (first load, page rendered by ssr) and change the HTML input value before client-side rehydration takes place, my changes are lost. The rehydration resets my value to ssr'ed value.

I did not recognize this when browsing my site normally. I recognized it (took me a while to figure out) when using Cypress to run automated in-browser tests. Since Cypress uses browser hooks, it manages to emit input events into the HTML form control BEFORE Sapper rehydration takes place (which is fast enough that a normal user might not notice).

Describe the solution you'd like

Angular Universal solves this problem by introducing https://github.com/angular/preboot, which basically casts an overlay on the entire window, capturing all input events, and pass them through to your application once it completely loads.

How important is this feature to you?

Like I said, since rehydration is fast enough, normal users proabbly won't see the problems. However, autofill may not work correctly (such as LastPass go to site + autofill login form feature). It's a logic gap that I would love to see properly bridged anyway.

antony commented 4 years ago

This sounds like a duplicate of https://github.com/sveltejs/sapper/issues/911 - can you confirm?

khuongduybui commented 4 years ago

The problem, I guess, is two-fold. So it is not exactly a duplicate.

ONE: Per #911, server-rendered HTML elements are discarded then recreated under certain circumstances. Changes made to these elements before that happens will also be discarded => true.

But also TWO: Even if the elements are NOT discarded / recreated, if input events are emitted from the elements before client-side Svelte gets a chance to attach its listeners, these input events are missed too.