Broken reactivity on $page store

[moonmeister]

Describe the bug

I have a component that subscribes to $page.url. On that page, I change some app config that gets saved to the URL search params using goto from $app/navigation . This all works great. But I'm trying to render other components using that data from the url and they don't update on changes. It seems subscriptions (auto and manual) are broken with the $page store, or at least $page.url.

Reproduction

Svelte Lab Repl

Logs

No response

System Info

System:
    OS: Linux 6.2 Pop!_OS 22.04 LTS
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 1.17 GB / 15.05 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Firefox: 113.0.1
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0 
    @sveltejs/kit: ^1.5.0 => 1.18.0 
    svelte: ^3.54.0 => 3.59.1 
    vite: ^4.3.0 => 4.3.8

Severity

serious, but I can work around it

Additional Information

I think the workaround is basically manually managing another store, annoying but possible.

[moonmeister]

Possibly related to #9374

[gtm-nayan]

@moonmeister Can you please recreate the repro as a plain git repo? SvelteLab neither has a download nor does it allow opening the output in a new window which makes it really difficult for us to debug.

[gtm-nayan]

It happens because you're mutating the searchParams on $page.url. That corrupts the internal state of the router so when you navigate it sees that the URL is unchanged and doesn't update the page store.

Create a new URL or URLSearchParams from $page.url instead of mutating it and use that in the goto.

[moonmeister]

Confirmed, makes sense, thanks @gtm-nayan. Maybe a linter error could be written to protect against this?

[paoloricciuti]

@moonmeister Can you please recreate the repro as a plain git repo? SvelteLab neither has a download nor does it allow opening the output in a new window which makes it really difficult for us to debug.

Just for info: you can both download the code and open the preview in a new window...to download the code press CMD+k and search for the download command. To open the preview in another window just click the little icon after the url bar over the preview.

[gtm-nayan]

To open the preview in another window just click the little icon after the url bar over the preview.

That fails after clicking Connect to project but glad to know download works. Thanks. Is there anyway to download/clone it from the CLI directly?

[paoloricciuti]

To open the preview in another window just click the little icon after the url bar over the preview.

That fails after clicking Connect to project but glad to know download works. Thanks. Is there anyway to download/clone it from the CLI directly?

Oh that's an issue with StackBlitz and it only happens in certain browsers. I'll investigate btw.

Do you mean download/clone without accessing svelltelab? Or from the cli inside sveltelab?