History state is overwritten to `{}` during navigation since `next.208`

[gustavopch]

Describe the bug

Since @sveltejs/kit@1.0.0-next.208, goto()'s state parameter stopped working. This line is overwriting the state to {} whenever navigation occurs:

kit/packages/kit/src/runtime/client/router.js

Line 281 in 1a6adc8

history.replaceState({}, '', info.url);

This is the commit that introduced the bug: d17f459.

Reproduction

• Open the repro: https://stackblitz.com/edit/sveltekit-xfxpb3
• Click the button "Goto with state".
• It will take you to another route where the History state will be visible.
• You'll see the state will be empty. It should be what was passed to goto().

Logs

No response

System Info

System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1
    Memory: 112.81 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.asdf/installs/nodejs/16.13.1/bin/node
    Yarn: 1.22.17 - ~/.asdf/installs/nodejs/16.13.1/.npm/bin/yarn
    npm: 8.2.0 - ~/.asdf/installs/nodejs/16.13.1/.npm/bin/npm
    Watchman: 2021.11.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 97.0.4692.71
    Safari: 15.1
  npmPackages:
    @sveltejs/adapter-auto: 1.0.0-next.9 => 1.0.0-next.9 
    @sveltejs/kit: 1.0.0-next.208 => 1.0.0-next.208 
    svelte: 3.44.3 => 3.44.3

Severity

blocking all usage of SvelteKit

Additional Information

No response

[benmccann]

@gustavopch thanks for the investigation! care to send a PR?

[gustavopch]

@benmccann This would fix the problem, but I'm not sure if it might break some other behavior. What do you think?

- history.replaceState({}, '', info.url);
+ history.replaceState(history.state, '', info.url);

[pavelbelyaev98]

This won't be needed once #3241 is merged

[benmccann]

Rich sent #3312 to remove this feature, which would in effect close this issue.

Regarding the severity of "blocking all usage of SvelteKit" - I don't think there's anything you could do with this API that you couldn't do with local storage? But if there's a usercase you have for this feature, you may want to chime in on #1641 to help make it clearer what it's being used for

[gustavopch]

@benmccann Local storage, session storage, and history state are not interchangeable. They have different lifecycles and serve different needs.

• Local storage: data persists when you close the tab.
• Session storage: data persists when you navigate to other routes, but not when you close the tab.
• History state: data is linked to that particular history entry.

Whenever you have data that only makes sense for a specific route, history state is the way to go.

Actual use case: history-controlled modals

<script>
  import { goto } from '$app/navigation'
  import { historyState } from './store'
</script>

<button on:click={() => goto('', { state: { modal: 'first' } })}>Open first modal</button>

<Modal open={$historyState.modal === 'first'}>
  <button on:click={() => goto('', { state: { modal: 'second' } })}>Open second modal</button>
</Modal>

<Modal open={$historyState.modal === 'second'}>
  <button on:click={() => history.go(-2)}>Close</button>
</Modal>

I have historyState which is a store that listens to history.state. To open the modal, I add a history entry with its state determining that the modal should be open. If the user presses the back button, the modal will automatically close. It's as simple as it can get. Using local storage or session storage would require me to basically keep them in sync with the history.

That said, I think there would be no problem if I had to call history.pushState directly instead of using goto. 🤔

[gustavopch]

I'm closing since it was fixed in e3cb69b.