<script> is not executed when browsing from a [slug].svelte route to itself even with a different slug

[ufoscout]

Describe the bug

If you have a [slug].svelte route page that has a link to itself, when you click on the link, the page <script> is not executed as expected. This causes all the page variables not to be refreshed and the page renders the previous values instead of the new ones.

Reproduction

To reproduce the issue:

• Create a new sveltekit project
• Create /routes/test/[slug].svelte file with this code:

<script lang="ts" context="module">
	import type { Load } from '@sveltejs/kit';

	export const load: Load = async ({
		params
	}): Promise<{
		props: { data: {
			slug: string 
		}
		};
	}> => {
		const { slug } = params;
		return {
			props: {
				data: {
					slug
				}
			}
		};
	};
</script>

<script lang="ts">
	export let data: {
		slug: string;
	};

	let slugWas = data.slug;
</script>

<br/>
SLUG WAS: {slugWas}
<br/><br/>
SLUG IS: {data.slug}
<br/>

<br/>
links:
<br/> <a href="/test/slug1">slug1</a>
<br/> <a href="/test/slug2">slug2</a>

• start svelte in dev: npm run dev
• browse to http://localhost:3000/test/slug1
• Now the page renders (correct):

SLUG WAS: slug1
SLUG IS: slug1

• Click on the slug2 link. Now the page renders (correct):

SLUG WAS: slug2
SLUG IS: slug2

• Click on the slug1 link. Now the page renders (WRONG, the slugWas variable is not updated):

SLUG WAS: slug2
SLUG IS: slug1

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 13.88 GB / 31.31 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.13.1 - ~/Programs/node/bin/node
    Yarn: 1.22.17 - ~/Programs/node/bin/yarn
    npm: 8.1.2 - ~/Programs/node/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Chromium: 101.0.4951.64
    Firefox: 100.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.40 
    @sveltejs/kit: next => 1.0.0-next.326 
    svelte: ^3.44.0 => 3.48.0 
    vite: ^2.8.6 => 2.9.8

Severity

blocking all usage of SvelteKit

Additional Information

No response

[Rich-Harris]

This is expected — components aren't destroyed and recreated when you navigate, partly because it's inefficient but mostly because it prevents you from e.g. making smooth page transitions (by tweening between values and so on). Effectively this is what's happening:

<YourPage data={{ slug }}/>

As slug changes, the data prop updates, but let slugWas = data.slug is not re-evaluated. You have a couple of options, depending on your exact use case:

$: slugWas = data.slug;

afterNavigate(() => {
  slugWas = data.slug;
});

There is a bug shown above — clicking slug2 yields slug2/slug2 when it should yield slug1/slug2 — but that's because of an unrelated HMR issue that will be fixed by #4891.

[ufoscout]

@Rich-Harris thanks for the explanation.
This is somehow surprising as it seems that it can easily lead to unexpected errors. Anyway, to avoid this problem, are you suggesting that I should create EVERY variable using the reactive syntax $: variable = ...?