Intro

<!-- ===== The idea ===== -->
<!-- Svelte takes your .svelte files and COMPILES them into surgical DOM updates. -->
<!-- No runtime framework loaded; the output is the framework. -->

<!-- App.svelte -->
<script>
  let count = 0;
  $: doubled = count * 2;     // reactive declaration
</script>

<button on:click={() => count++}>
  clicks: {count} (x2 = {doubled})
</button>

<style>
  button { padding: 0.5rem 1rem; }
</style>

<!-- ===== Props + events ===== -->
<!-- Counter.svelte -->
<script>
  export let start = 0;
  let v = start;
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function bump() { v++; dispatch('change', v); }
</script>

<button on:click={bump}>{v}</button>

<!-- App.svelte -->
<script>
  import Counter from './Counter.svelte';
</script>
<Counter start={10} on:change={(e) => console.log(e.detail)} />

<!-- ===== Stores ===== -->
<!-- stores.js -->
import { writable, derived } from 'svelte/store';
export const cart = writable([]);
export const total = derived(cart, ($c) => $c.reduce((s, l) => s + l.price, 0));

<!-- AnyComponent.svelte -->
<script>
  import { cart, total } from './stores.js';
</script>
<p>items: {$cart.length}, total: {$total}</p>

<!-- ===== Ecosystem ===== -->
<!-- SvelteKit       full-stack meta-framework (SSR/SSG/edge) -->
<!-- Vite            powering the build -->
<!-- svelte-check    type-checking -->

<!-- ===== When Svelte wins ===== -->
<!-- - Tiny bundles -> low latency / edge runtimes -->
<!-- - Simple mental model (compiler does the diff) -->
<!-- - Fast iteration; templates feel like HTML -->

<!-- ===== When Svelte hurts ===== -->
<!-- - Smaller third-party ecosystem than React -->
<!-- - Two reactivity styles in the wild (Svelte 4 $:, Svelte 5 runes) -->
<!-- - Less hiring depth than React in some markets -->

<!-- ===== Patterns to internalise ===== -->
<!-- - Reassign to trigger reactivity: arr = [...arr, x] (not arr.push) -->
<!-- - Stores for cross-component state -->
<!-- - Slots for content projection -->
<!-- - SvelteKit when you need a meta-framework; pure Svelte when you don't -->

<!-- ===== Pitfalls ===== -->
<!-- - Mutating arrays in place doesn't reflect in UI -->
<!-- - Skipping bind: where two-way binding is genuinely needed (forms) -->
<!-- - Stores everywhere -> consider context for parent-tree state -->
<!-- - Forgetting on:click prefix in templates (it's on:event, not @event) -->

// Svelte is a compiler — it writes the JS for you.
// No virtual DOM, tiny runtime.