afterNavigate not firing in dev mode after a code change

[johnnysprinkles]

Describe the bug

In dev mode, after I make a code change, the route component re-mounts itself but it never re-calls afterNavigate. This leaves things in an inconsistent state. Not a huge annoyance but I do have to do ctrl+R in development.

Reproduction

Repro is this branch of this repo:
https://github.com/johnnysprinkles/sveltekit_after_navigate_bug/tree/after_nv

It's the Demo app from create-svelte, but extended to have a parameterized route. The final commit in the history just adds some console.log statements to see what's going on in the lifecycle events.

To repro just clone that and run it with "npm run dev", and create some TODO items, then navigate to one of them (using the newly added "i" icon, or directly via URL e.g. http://localhost:3000/todos/4110e0d9-56a9-4106-9d83-1fada5087660

Now if you make an arbitrary change to routes/todos/[uid].svelte you'll see how onMount runs but afterNavigate doesn't. Looks like:

Logs

No response

System Info

System:
    OS: macOS 11.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4750HQ CPU @ 2.00GHz
    Memory: 510.79 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.4.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 100.0
    Safari: 14.1.2
    Safari Technology Preview: 15.4
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.33
    @sveltejs/kit: next => 1.0.0-next.302
    svelte: ^3.46.0 => 3.46.4

Severity

annoyance

Additional Information

No response

[Rich-Harris]

This one is tricky — since the component accepts the hot update, the main client.js has no opportunity to detect that that's happened and re-run afterNavigate functions that were added during the update. (The Vite client does emit events, but not the ones we need AFAICT.)

We can't just run afterNavigate functions as soon as they're registered, because that would incorrectly cause functions to run when a component was rendered outside a navigation.

I don't have any bright ideas for fixing this, but maybe someone with more Vite expertise would.

[johnnysprinkles]

Cool, definitely not blocking SvelteKit 1.0 or anything, and really not that big a deal.

[ciscoheat]

I ran into this issue as well, when trying to use before/afterNavigate to modify the session, containing a flash message that's displayed somewhere on the page after a POST, but should be cleared when navigating elsewhere.

[ciscoheat]

I don't know why, but suddenly they started to work in dev mode as well!