svelte icon indicating copy to clipboard operation
svelte copied to clipboard

False "ownership_invalid_mutation" warning?

Open lts20050703 opened this issue 1 year ago • 2 comments

Describe the bug

Every time I tried to call the show_toast function from another component, I keep seeing Svelte log this to the console, is this a false warning?

Reproduction

Toast.svelte
<script context="module" lang="ts">
    let timeout: NodeJS.Timeout

    let toast = $state({
        message: "",
        background: "base" as "error" | "warning" | "success" | "primary" | "base",
        show: false
    })

    export async function show_toast(
        message: typeof toast.message,
        background: typeof toast.background,
        duration: number
    ) {
        clearTimeout(timeout)
        if (toast.show) {
            toast.show = false
            await sleep(150)
        }
        toast.show = true
        toast = {
            message,
            background,
            show: true
        }
        if (duration === Number.POSITIVE_INFINITY) return
        timeout = setTimeout(() => {
            toast.show = false // THIS IS LINE 28
        }, duration)
    }

    async function sleep(ms: number) {
        return await new Promise((r) => setTimeout(r, ms))
    }
</script>

<div
    class="pointer-events-none fixed m-1 flex w-full items-center justify-center transition-[top] {toast.show
        ? 'top-0'
        : '-top-12'}"
>
    <div
        class="rounded px-6 py-1 text-2xl {toast.background === 'error'
            ? 'bg-error'
            : toast.background === 'warning'
                ? 'bg-warning'
                : toast.background === 'success'
                    ? 'bg-success'
                    : toast.background === 'primary'
                        ? 'bg-primary'
                        : toast.background === 'base'
                            ? 'bg-base-100'
                            : ''}"
    >
        {toast.message}
    </div>
</div>

Logs

toast.svelte:28 [svelte] ownership_invalid_mutation
.../src/lib/toast.svelte mutated a value owned by .../routes/werewolf_night/+page.svelte. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
warn    @    client.js?v=c1f07bba:2639
ownership_invalid_mutation    @    chunk-HEXMXJ7S.js?v=c1f07bba:624
check_ownership    @    chunk-HEXMXJ7S.js?v=c1f07bba:783
set    @    chunk-HEXMXJ7S.js?v=c1f07bba:1894
(anonymous)    @    toast.svelte:28

System Info

System:
    OS: Linux 6.5 KDE neon 6.0 6.0
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 8.71 GB / 15.40 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 22.1.0 - ~/.local/share/nvm/v22.1.0/bin/node
    npm: 10.7.0 - ~/.local/share/nvm/v22.1.0/bin/npm
    bun: 1.1.7 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 124.1.65.130
  npmPackages:
    svelte: ^5.0.0-next.125 => 5.0.0-next.125

Severity

annoyance

lts20050703 avatar May 09 '24 17:05 lts20050703

Please provide a REPL with a proper reproduction, I can't reproduce this given the snippet.

dummdidumm avatar May 10 '24 12:05 dummdidumm

Please provide a REPL with a proper reproduction, I can't reproduce this given the snippet.

@dummdidumm Sorry about that, here's the most minimal reproduction repl I was able to do https://www.sveltelab.dev/3g1l3ut367jpkps

Please note that the error doesn't get logged to the "server" console, it gets logged to the "client" console (aka browser dev tool console)

lts20050703 avatar May 11 '24 08:05 lts20050703