[Documentation] $app-state#page immutable but not documented

[mmailaender]

Describe the bug

I learned today that $app-state#page is immutable.

I think it would make sense to add this to the documentation, as I tried to mutate it in the first place and wondered why the state was not propagated to another component that derived from page.

Reproduction

I tried to mutate in the first place page.data.user = null; and derived in the other component $derived(page.data.user ? JSON.parse(page.data.user) : null); which was not updating.

<script lang="ts">
    import { type User } from '$lib/auth/user';
    import SignOutButton from '$lib/auth/SignOutButton.svelte';
    import { page } from '$app/state'; 

    $inspect("routes/+page.svelte\n", page.data.user);
    
    let user: User | null = $derived(page.data.user ? JSON.parse(page.data.user) : null);

</script>

<div class="flex min-h-screen flex-col items-center justify-center gap-6">
    {#if user}
        Hello {user.email}
        <SignOutButton />
    {:else}
        <a href="/sign-in">Sign in</a>
    {/if}
</div>

<script lang="ts">
    import { goto } from '$app/navigation';
    import { page } from '$app/state';

    interface Props {
        redirectUrl?: string;
        className?: string;
        children: import('svelte').Snippet;
    }

    let { redirectUrl, className = 'btn', children }: Props = $props();

    async function handleSignOut() {
        try {
            const response = await fetch('/api/auth/sign-out');
            if (response.ok) {
                page.data.user = null;

                if (redirectUrl) {
                    goto(redirectUrl);
                }
            } else {
                console.error('Sign-out failed');
            }
        } catch (error) {
            console.error('Error during sign-out:', error);
        }
    }
</script>

<button class={className} onclick={handleSignOut}>
    {@render children()}
</button>

Logs

No response

System Info

-

Severity

annoyance