Summary

# ===== Core mental model =====
# Svelte COMPILES components to surgical DOM updates.
# No virtual DOM. Smaller bundles. Faster runtime.
# 'Write what changes; the compiler does the diff.'

# ===== Daily reflexes =====
# - Components: SFC with script + markup + scoped style
# - Reactivity: $: derived in Svelte 4; runes ($state, $derived) in Svelte 5
# - Props: export let (4) / $props (5)
# - Events: createEventDispatcher (4) / callback props (5)
# - Stores: writable, readable, derived for cross-component state
# - Bindings: bind:value, bind:this, bind:group
# - Lifecycle: onMount, onDestroy, tick

# ===== SvelteKit reflexes =====
# - File-based routing: +page.svelte, +layout.svelte
# - Data loading: +page.ts (universal), +page.server.ts (server-only)
# - Form actions: progressive enhancement; works without JS
# - hooks.server.ts for cross-cutting (auth, request id)
# - Adapters for hosting target

# ===== What Svelte 5 adds =====
# - Runes: $state, $derived, $effect for explicit reactivity
# - Snippets: reusable markup fragments
# - Callback props instead of createEventDispatcher
# - Less magic; more explicit

# ===== Ecosystem =====
# - SvelteKit (the meta-framework)
# - Skeleton UI / Carbon Components / DaisyUI for design systems
# - vitest + playwright for testing
# - svelte-headlessui / Bits UI for accessible primitives

# ===== When Svelte wins =====
# - Small bundles, fast UX
# - Simple mental model
# - Greenfield apps where ecosystem size is OK
# - Edge / serverless deploys

# ===== When Svelte hurts =====
# - You need maximum hiring pool (React still wins)
# - Third-party React-first libraries (charts, complex UI kits)
# - Mid-migration from Svelte 4 to 5 (idiom split)

# ===== What to learn next =====
# - SvelteKit's adapter ecosystem (Cloudflare, Vercel, Node)
# - Server endpoints + form actions for full-stack
# - Animation: tweens, transitions, motion library
# - State libraries (Tanstack Query, XState) integrate well

# ===== Books + resources =====
# - svelte.dev/tutorial (the canonical onboarding)
# - kit.svelte.dev for SvelteKit docs
# - Joy of Code YouTube channel
# - Svelte Society community

# ===== Patterns to internalise =====
# - Reassign to mutate ([...arr, x] not arr.push)
# - Stores for cross-component state
# - {#key id} to reset subtrees
# - Adapter chosen on day one
# - Migrate to Svelte 5 idioms incrementally

# ===== Closing thought =====
# Svelte is built on the bet that the compiler can do more than the runtime.
# That bet paid off — smaller bundles, simpler mental model, real perf wins.
# Reach for it when you want a framework that disappears at runtime; reach for
# React when the ecosystem size matters more than every kilobyte.

// Next: SvelteKit advanced patterns, runes deep dive, deployment adapters.