svelte/window-events

Dlaczego

A listener added by hand in onMount or $effect has to be removed by hand; forgetting the cleanup leaves handlers firing after the component is gone and doubles them when it comes back. The special elements add and remove the listener with the component and are safe in server rendering.

Poprawka

<svelte:window onkeydown={onKey} />, <svelte:document onvisibilitychange={sync} />, and bind:innerWidth, bind:scrollY or bind:online on <svelte:window> for the common values. For an element listener that needs options, use an attachment ({@attach}) that returns its cleanup.

Przykłady

<!-- bad -->
<script>
  import { onMount } from 'svelte'
  onMount(() => window.addEventListener('keydown', onKey))
</script>
<!-- good -->
<svelte:window onkeydown={onKey} />

Źródła

• Svelte docs, Best practices (events)
• Svelte docs, svelte:window

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain svelte/window-events