Svelte · CLI and AI tooling · all subjects

svelte-core-bestpractices

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Modern Svelte runes and features to prefer

Always use runes mode for new code and avoid features with more modern replacements: use $state instead of implicit reactivity (let count = 0; count += 1); use $derived and $effect instead of $: assignments and statements; use $props instead of export let, $$props and $$restProps; use onclick={...} instead of on:click={...}; use {#snippet ...} and {@render ...} instead of <slot>, $$slots and <svelte:fragment>; use <DynamicComponent> instead of <svelte:component this={DynamicComponent}>; use import Self from './ThisComponent.svelte' and <Self> instead of <svelte:self>; use classes with $state fields to share reactivity between components instead of stores; use {@attach ...} instead of use:action; use clsx-style arrays and objects in class attributes instead of class: directive.

$state rune best practice

Use the $state rune only for variables that should be reactive — variables that cause an $effect, $derived or template expression to update. Everything else should be a normal variable. Objects and arrays ($state({...}) or $state([...])) are made deeply reactive, meaning mutation will trigger updates. For large objects that are only reassigned rather than mutated, use $state.raw instead to avoid performance overhead from proxying.

$derived rune best practice

Use $derived rather than $effect to compute something from state. $derived is given an expression, not a function. If needed to use a function (for complex expressions), use $derived.by. Deriveds are writable — you can assign to them like $state, and they will re-evaluate when their expression changes. If the derived expression is an object or array, it will be returned as-is, not made deeply reactive.

$effect rune best practice

Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects. Never wrap the contents of an effect in if (browser) {...} or similar — effects do not run on the server. Instead: use {@attach ...} to sync state to external libraries like D3; put code directly in event handlers for user interaction; use $inspect for debugging; use createSubscriber to observe something external to Svelte.

$props rune best practice

Treat props as though they will change. Values that depend on props should usually use $derived so they update when props change. Do not compute derived values directly from props without $derived, as they will not update if the prop changes.

Event listener syntax in Svelte

Any element attribute starting with 'on' is treated as an event listener. Examples: <button onclick={() => {...}}>click me</button>, attribute shorthand {onclick}, and spread attributes {...props}. For window or document listeners, use <svelte:window onkeydown={...} /> and <svelte:document onvisibilitychange={...} />. Avoid using onMount or $effect for this.

Experimental feature: remoteFunctions

The 'remoteFunctions' experimental feature enables remote functions.

Experimental feature: explicitEnvironmentVariables

The 'explicitEnvironmentVariables' experimental feature enables explicit environment variables and is only available in SvelteKit version 2 or higher.

Experimental feature: handleRenderingErrors

The 'handleRenderingErrors' experimental feature enables rendering error boundaries.

Experimental feature: forkPreloads

The 'forkPreloads' experimental feature enables forked preloading.

Experimental feature: async

The 'async' experimental feature enables await in components.

Give your agent this brain