code-style-svelte

Svelte Code Style

REQUIRED SUB-SKILL: invoke svelte-5:composition-svelte before you build or restructure a complex feature (wrapper or provider components, snippet APIs, shared state, third-party DOM bridging).

Ask the user whether to invoke svelte-5:composition-svelte to refactor a component when either holds:

• its .svelte file is longer than 300 lines, not counting its <style> block
• it is complex enough that it should be split into several files

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.