Svelte

What I do

• Build reactive web applications with less boilerplate
• Use Svelte's reactivity system with stores
• Create component animations and transitions
• Write scoped CSS in components
• Use SvelteKit for full-stack apps
• Handle server-side rendering
• Implement context API for dependency injection

When to use me

When building highly performant web apps with minimal JavaScript output.

Component Syntax

<script>
  let count = 0
  let doubled = $derived(count * 2)
  
  function increment() {
    count += 1
  }
  
  $: console.log('count is', count)
</script>

<button on:click={increment}>
  Clicks: {count}
  Doubled: {doubled}
</button>

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

Stores

// stores.ts
import { writable, derived } from 'svelte/store'

export const count = writable(0)

export const doubled = derived(count, $count => $count * 2)

// Custom store
function createTimer() {
  const { subscribe, set, update } = writable(0)
  
  return {
    subscribe,
    start() {
      setInterval(() => update(n => n + 1), 1000)
    },
    reset() {
      set(0)
    }
  }
}

export const timer = createTimer()

Reactive Statements

<script>
  let count = 0
  let numbers = [1, 2, 3]
  
  // Runs when count changes
  $: doubled = count * 2
  
  // Runs when any referenced variable changes
  $: {
    console.log('count changed:', count)
    if (count > 10) {
      console.log('count is large!')
    }
  }
  
  // Reactive object destructuring
  $: ({ a, b } = { a: count, b: count * 2 })
</script>

Event Handling

<script>
  function handleClick(event) {
    console.log(event.target)
  }
  
  function handleKeydown(event) {
    if (event.key === 'Escape') {
      // handle escape
    }
  }
</script>

<button on:click={handleClick}>Click me</button>
<input on:keydown={handleKeydown} />

<!-- Event modifiers -->
<button on:click|once|preventDefault={handleClick}>
  Click once, prevent default
</button>

<!-- Forward events -->
<button on:click>Forwarded</button>

Lifecycle & Context

<script>
  import { onMount, onDestroy } from 'svelte'
  import { setContext, getContext } from 'svelte'
  
  onMount(() => {
    console.log('component mounted')
  })
  
  onDestroy(() => {
    console.log('cleanup')
  })
  
  // Context
  setContext('theme', 'dark')
  const theme = getContext('theme')
</script>

SvelteKit

// +page.svelte
<script>
  export let data
</script>

{data.message}

// +page.server.ts
export const load = async ({ params }) => {
  return { message: 'Hello' }
}

// +server.ts (API route)
export const POST = async ({ request }) => {
  const data = await request.formData()
  return new Response('ok')
}