Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

False "ownership_invalid_mutation" warning? #11525

Closed
lts20050703 opened this issue May 9, 2024 · 2 comments · Fixed by #11812
Closed

False "ownership_invalid_mutation" warning? #11525

lts20050703 opened this issue May 9, 2024 · 2 comments · Fixed by #11812
Labels
Milestone

Comments

@lts20050703
Copy link

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

@dummdidumm dummdidumm added this to the 5.0 milestone May 10, 2024
@dummdidumm
Copy link
Member

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

@dummdidumm dummdidumm added the awaiting submitter needs a reproduction, or clarification label May 10, 2024
@lts20050703
Copy link
Author

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)

@dummdidumm dummdidumm added bug and removed awaiting submitter needs a reproduction, or clarification labels May 16, 2024
dummdidumm added a commit that referenced this issue May 28, 2024
When a proxy is reassigned, we call `$.proxy` again. There are cases where there's a component context set but the reassignment actually happens for variable that is ownerless within shared state or somewhere else. In that case we get false positives right now. The fix is to pass the previous value in to copy over the owners from it.

Fixes #11525
dummdidumm added a commit that referenced this issue May 29, 2024
When a proxy is reassigned, we call `$.proxy` again. There are cases where there's a component context set but the reassignment actually happens for variable that is ownerless within shared state or somewhere else. In that case we get false positives right now. The inverse is also true where reassigning can delete owners (because no component context exists) and result in false negatives. The fix is to pass the previous value in to copy over the owners from it.

Fixes #11525
dummdidumm added a commit that referenced this issue May 29, 2024
…11812)

When a proxy is reassigned, we call `$.proxy` again. There are cases where there's a component context set but the reassignment actually happens for variable that is ownerless within shared state or somewhere else. In that case we get false positives right now. The inverse is also true where reassigning can delete owners (because no component context exists) and result in false negatives. The fix is to pass the previous value in to copy over the owners from it.

Fixes #11525
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants