code-style-svelte

Svelte Code Style

Optional snippet rendering

Use {@render snippet?.()} instead of {#if snippet}{@render snippet()}{/if}. The optional chaining form is shorter and idiomatic Svelte 5.

No $effect for setting state

NEVER use $effect to set state. If you need derived state, use $derived instead. Effects that write to state create unnecessary re-renders and are a sign of wrong reactive design.

No bare async in onMount or $effect

NEVER pass an async function directly to onMount or $effect:

// BAD — cleanup function is lost, dependency tracking breaks
onMount(async () => { ... });
$effect(async () => { ... });

// GOOD — async IIFE inside a sync wrapper
onMount(() => {
 (async () => { ... })();
 return () => { /* cleanup */ };
});

Two reasons:

1. Cleanup is lost. Both onMount and $effect expect the callback to optionally return a teardown function. An async function always returns a Promise, so the teardown never runs: intervals won't clear, subscriptions won't unsubscribe, listeners won't detach.
2. Dependency tracking breaks ($effect only). $effect tracks reactive dependencies that are read synchronously. Anything read after an await is invisible to the tracker and won't trigger re-runs.

No addEventListener / removeEventListener

NEVER use addEventListener or removeEventListener in Svelte components. Svelte 5 has multiple declarative mechanisms for event handling, on* attributes, callback props, svelte:window, svelte:document, svelte:body, and the on action from svelte/events. These handle cleanup automatically and integrate with Svelte's reactivity.

When unsure which pattern to use, invoke the Svelte MCP autofixer (mcp__svelte__svelte-autofixer) or fetch the relevant docs via mcp__svelte__get-documentation (sections: svelte-events, svelte-window, svelte-document, svelte-body).

Svelte 5 parent + Svelte 4 child: use slot=, not {#snippet}

TODO: verify this is still needed after sveltejs/language-tools#2716 is resolved