the page doesn't re-render when router params changes

[anuragkumar19]

Describe the bug

Assume we have a route /todo/[id]/.
When user visit todo/1 the the page is rendered with the data. But now when user visit /todo/2 from /todo/1 then only data: PageData changes not whole script tag will run as it will if we visit from other route other than /todo/[id]. It is not the expected behavior by default.

Reproduction

Repo: https://github.com/anuragkumar19/sveltekit-issue
Live URL: https://sveltekit-issue.vercel.app/todo/1

Logs

No response

System Info

I use github codespaces

  System:
    OS: Linux 6.2 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (2) x64 AMD EPYC 7763 64-Core Processor
    Memory: 5.45 GB / 7.74 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.8.1 - ~/nvm/current/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 10.1.0 - ~/nvm/current/bin/npm
    pnpm: 8.9.2 - ~/nvm/current/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0 
    @sveltejs/kit: ^1.20.4 => 1.27.1 
    svelte: ^4.0.5 => 4.2.2 
    vite: ^4.4.2 => 4.5.0

Severity

annoyance

Additional Information

No response

[anuragkumar19]

https://kit.svelte.dev/docs/state-management#component-state-is-preserved

[anuragkumar19]

I have tried the $: but it cannot be updated, so it cannot be bind into an input

[eltigerchino]

Can you further clarify what you mean?

https://github.com/anuragkumar19/sveltekit-issue/blob/main/src/routes/todo/%5Bid%5D/%2Bpage.svelte

[anuragkumar19]

I have tried
$: title = data.todo.title
as suggested in docs but it will doesn't work as you cannot update computed properties directly

[anuragkumar19]

What I wanted is a local state title which can be bind to an input and whose initial value is equal to that of data.todo.title. So that I can only show save btn when its changes

[eltigerchino]

You can try something like this:

<script>
    import { afterNavigate } from "$app/navigation";

	export let data;

	let title = data?.todo?.id;

	// update title when changing pages
	afterNavigate(() => {
	    title = data?.todo?.id;
	})
</script>

<input type="text" bind:value={title} />

{#if title !== data?.todo?.id}
	<button>Save</button>
{/if}

https://stackblitz.com/edit/sveltejs-kit-template-default-4jjle5?file=src%2Froutes%2F%2Blayout.svelte

[anuragkumar19]

The workaround I found is similar to that you suggest.

<script>
        import { writable } from 'svelte/store'

	export let data;

	let title = writable(data.todo.title)
        $: title.set(data.todo.title)
</script>

<input type="text" bind:value={$title} />

{#if $title !== data.todo.title}
	<button>Save</button>
{/if}

It uses svelte store and update the title when data changes. I use svelte store because this will not work as it define new calculated value title.

let title = data.todo.title
$:title=data.todo.title