Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preserve history state on refresh when SSR is disabled #9868

Open
raythurnvoid opened this issue May 8, 2023 · 3 comments · May be fixed by #12409
Open

Preserve history state on refresh when SSR is disabled #9868

raythurnvoid opened this issue May 8, 2023 · 3 comments · May be fixed by #12409

Comments

@raythurnvoid
Copy link

Describe the bug

At this line svelte kit can pass state: history.state.

This would prevent history state loss when refreshing the page.

Current workaround:
Save the state in the root +layout.js and restore it the root +layout.svelte using history.replaceState(...data.savedState, null, location.href)

Reproduction

https://stackblitz.com/edit/sveltekit-preserve-history-state-bug?file=src/routes/+layout.js

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.1 
    @sveltejs/kit: ^1.5.0 => 1.16.2 
    svelte: ^3.54.0 => 3.59.0 
    vite: ^4.3.0 => 4.3.5

Severity

annoyance

Additional Information

No response
@Rich-Harris
Copy link
Member

This seems like a reasonable change. I'm curious about what sort of history.state you're keeping? As of #9847, using SvelteKit's pushState and replaceState will become the recommended way to attach state to history entries — would that make sense in your case?

@raythurnvoid
Copy link
Author

raythurnvoid commented May 9, 2023 •
edited
Loading

I am using replaceState to keep the values of the fields and pushState to create a new history entry on form submit, allowing the user to navigate between searches with back and forward. I am not using the snapshots API because the restore callbacks occur after the initialization of components and as opposed to it I can directly call replaceState from child components instead of passing the data through props or context. These two "limitations" make the code significantly more complicated when using Snapshots API.

I don't want to be rude but I've checked the PR, and I see that sveltekit is going to save a history index inside the state. but I don't quite understand why all this is needed when we can just directly use the browser API. I mean as long as I keep the sveltekit data with the rest operator, sveltekit is happy because I'm not changing stuff that it added, and I can basically save whatever I want and then retrieve it at any moment.

That said, probably I'm missing something, and maybe the Sveltekit way makes everything easier for most of the cases, but I wouldn't add a warning that wraps the history methods because you never know whether for any reason you have to use them and having many "expected" warnings is not the best.

@yahao87
Copy link

yahao87 commented Aug 23, 2023 •
edited
Loading

I'm having the same problem with prerender.

@PatrickG PatrickG linked a pull request Jul 1, 2024 that will close this issue
Open
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: restore history.state on refresh yahao87/kit
3 participants
@Rich-Harris @yahao87 @raythurnvoid