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

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:

https://github.com/sveltejs/kit/blob/1a6adc8a7edbb19cb10762af1a236090dcce97b5/packages/kit/src/runtime/client/router.js#L281

This is the commit that introduced the bug: https://github.com/sveltejs/kit/commit/d17f459ef35f07f012d77ff7c8665e26380448cd.

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

[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 https://github.com/sveltejs/kit/commit/e3cb69b716b7e1c71580c665a606b906fb670b2c.