Svelte Component Generator

Svelte 5 introduced runes — a set of compiler hints prefixed with $ that make reactivity explicit. Instead of `let count = 0` (Svelte 4, where any top-level let was reactive), you now write `let count = $state(0)`. Similarly, $props() replaces `export let`, $derived() replaces `$:` reactive declarations, and $effect() replaces `onMount` + reactive blocks. Runes work inside any .svelte.ts file, not just components.

In Svelte 5, props are declared with `$props()`: `let { title, count = 0 }: { title: string; count?: number } = $props()`. You can destructure with defaults inline. This replaces `export let title: string` from Svelte 4. For spread props, use `let { ...rest } = $props()`. The TypeScript interface provides type safety without a separate `defineProps` call.

In Svelte 4, components emitted events via `createEventDispatcher`. Svelte 5 replaces this with callback props — you accept an `onEventName` function prop and call it directly, which is more TypeScript-friendly and avoids event bubbling surprises. Example: `let { onSubmit }: { onSubmit: (data: FormData) => void } = $props()`. In templates, use `onclick` (lowercase) instead of `on:click`.

$effect() runs a side effect whenever its reactive dependencies change — similar to React's useEffect but without a dependency array. It tracks dependencies automatically. Return a cleanup function to run before the effect re-runs or the component unmounts. Use $effect.pre() to run before DOM updates. For one-time setup, $effect() with no reactive reads acts like onMount.

$derived() creates a reactive value that recomputes whenever its dependencies change. Use it for values computed from state: `let total = $derived(items.reduce((s, i) => s + i.price, 0))`. Unlike $effect(), $derived() is pure (no side effects) and lazy (only recomputes when read). For complex multi-statement derivations, use `$derived.by(() => { ... return value; })`.

A .svelte file has three optional sections: `<script>` (or `<script lang='ts'>`) for logic, the template (HTML with Svelte directives, no wrapper tag needed), and `<style>` for scoped CSS. In Svelte 5, use `<script lang='ts'>` at the top. Svelte automatically scopes styles to the component, so `.button` in a component won't affect other `.button` elements globally.