Closed
Description
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