Reactivity regression since 5.0.0-next.177

[kran6a]

Describe the bug

Values returned from +page.ts load functions stopped being reactive on 5.0.0-next.177 and are still not reactive on 5.0.0-next.183.
In the reproduction I provide a minimal sveltekit app that prints values from an array returned from a load function.
On +page.svelte I add a value to the array every second, logging in the console the value of the item I am pushing into the array.

The example works "as intended" on 5.0.0-next.176. If you update the package.json to install a newer version, the reactivity will break and items appended to the array will never be rendered.

There is also no indication of a breaking reactivity change in the changelog.

Reproduction

https://github.com/kran6a/kit-reactivity-bug

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 3600XT 6-Core Processor
    Memory: 18.70 GB / 63.93 GB
  Binaries:
    Node: 22.2.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.5.0 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.1.20 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (126.0.2592.102)
    Internet Explorer: 11.0.22621.3527

Severity

blocking an upgrade

[paoloricciuti]

I feel is related to this because the issue was very similar

#12348

I will investigate a bit better it this behavior is actually intended.

[trueadm]

Props are only shallow reactive in legacy components, just like Svelte 4, so mutating the array which is deep, won't have any affect. This wasn't working as intended before.

[paoloricciuti]

Props are only shallow reactive in legacy components, just like Svelte 4, so mutating the array which is deep, won't have any affect. This wasn't working as intended before.

Oh yeah I forgot to comment back sorry @kran6a

[kran6a]

Props are only shallow reactive in legacy components, just like Svelte 4, so mutating the array which is deep, won't have any affect. This wasn't working as intended before.

Why is https://github.com/kran6a/kit-reactivity-bug/blob/master/src/routes/%2Bpage.svelte considered a legacy component even if it is using the $props rune and no export let? Is it possible to opt-out of this behavior globally?

Since I use +page.ts files for data fetching and client-side data manipulation/transformation on SPAs so that I can create +page.svelte files that has UI-only code, I would like to have deeply-reactive props.

[trueadm]

@kran6a It's more that SvelteKit is using a legacy wrapper for compatibility reasons. You can always create the array in a function from a .svelte.ts module and import that and use it in your load function and mutate it there.

[dummdidumm]

This works as intended, and the given code also doesn't work in Svelte 4. In general, it's best to reassign data if you want to change it, instead of mutating it.

<script lang="ts">
	import {onMount} from "svelte";

	let {data}: {data: PageData} = $props();
	onMount(()=>{
		const interval = setInterval(()=>{
			const new_element = data.items.at(-1)+1;
			console.log(`Adding ${new_element} to data.items`);
			data = { ...data, items: [...data.items, new_element] }
		}, 1000);
		return ()=>clearInterval(interval);
	})
</script>

{#each data.items as i}
	<p>{i}</p>
{/each}