Svelte

mizu new ./my-svelte-app --template frontend/svelte
cd my-svelte-app
make dev

┌─────────────────────────────────────────────────────────────┐
│                         Browser                              │
│  ┌───────────────────────────────────────────────────────┐  │
│  │  Svelte App (HMR enabled, compiled components)         │  │
│  │  ┌─────────┐  ┌─────────┐  ┌──────────┐               │  │
│  │  │ Router  │→ │ Pages   │→ │ API Call │               │  │
│  │  └─────────┘  └─────────┘  └──────────┘               │  │
│  └───────────────────────────────────────────────────────┘  │
│         ↑ HMR WebSocket           ↓ /api/tasks              │
└─────────┼──────────────────────────┼────────────────────────┘
          │                          │
┌─────────┼──────────────────────────┼────────────────────────┐
│  Mizu Server (:3000)               │                         │
│         │                          ↓                         │
│    ┌────┴─────────┐        ┌────────────┐                   │
│    │   Proxy to   │        │ API Routes │                   │
│    │ Vite (:5173) │        │ (Go)       │                   │
│    └──────────────┘        └────────────┘                   │
│         ↑                                                    │
└─────────┼────────────────────────────────────────────────────┘
          │
┌─────────┼────────────────────────────────────────────────────┐
│  Vite Dev Server (:5173)                                     │
│    ┌──────────────┐  ┌─────────────┐                        │
│    │ Svelte       │  │ HMR Engine  │                        │
│    │ Compiler     │  │             │                        │
│    └──────────────┘  └─────────────┘                        │
└──────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                         Browser                              │
│  ┌───────────────────────────────────────────────────────┐  │
│  │  Svelte App (compiled to vanilla JS, minified)         │  │
│  │  ┌─────────┐  ┌─────────┐  ┌──────────┐               │  │
│  │  │ Router  │→ │ Pages   │→ │ API Call │               │  │
│  │  └─────────┘  └─────────┘  └──────────┘               │  │
│  └───────────────────────────────────────────────────────┘  │
│         ↑ index.html + assets     ↓ /api/tasks              │
└─────────┼──────────────────────────┼────────────────────────┘
          │                          │
┌─────────┼──────────────────────────┼────────────────────────┐
│  Mizu Server (single binary)       │                         │
│         │                          ↓                         │
│    ┌────┴─────────┐        ┌────────────┐                   │
│    │ Embedded FS  │        │ API Routes │                   │
│    │ (dist/...)   │        │ (Go)       │                   │
│    └──────────────┘        └────────────┘                   │
│  ←────────────────────────────────────────────────────────  │
│  Static files served from Go binary (//go:embed all:dist)   │
└──────────────────────────────────────────────────────────────┘

my-svelte-app/
├── cmd/
│   └── server/
│       └── main.go              # Entry point
├── app/
│   └── server/
│       ├── app.go               # Mizu app setup
│       ├── config.go            # Configuration
│       └── routes.go            # API routes
├── frontend/                      # Svelte application
│   ├── src/
│   │   ├── main.ts              # App entry point
│   │   ├── App.svelte           # Root component
│   │   ├── components/
│   │   │   └── Layout.svelte    # Layout component
│   │   ├── pages/
│   │   │   ├── Home.svelte      # Home page
│   │   │   └── About.svelte     # About page
│   │   ├── stores/              # Svelte stores
│   │   └── styles/
│   │       └── index.css        # Global styles
│   ├── public/
│   ├── index.html
│   ├── package.json
│   ├── vite.config.ts
│   ├── svelte.config.js
│   └── tsconfig.json
├── dist/                        # Built files
└── Makefile

package server

import (
    "embed"
    "io/fs"

    "github.com/go-mizu/mizu"
    "github.com/go-mizu/mizu/frontend"
)

//go:embed all:../../dist
var distFS embed.FS

func New(cfg *Config) *mizu.App {
    app := mizu.New()

    // API routes
    setupRoutes(app)

    // Frontend middleware
    dist, _ := fs.Sub(distFS, "dist")
    app.Use(frontend.WithOptions(frontend.Options{
        Mode:        frontend.ModeAuto,
        FS:          dist,
        DevServer:   "http://localhost:" + cfg.DevPort,
        IgnorePaths: []string{"/api"},
    }))

    return app
}

// app/server/routes.go
package server

import "github.com/go-mizu/mizu"

type Task struct {
    ID     int    `json:"id"`
    Title  string `json:"title"`
    Done   bool   `json:"done"`
}

func setupRoutes(app *mizu.App) {
    // GET /api/tasks
    app.GET("/api/tasks", func(c *mizu.Ctx) error {
        tasks := []Task{
            {ID: 1, Title: "Learn Svelte", Done: true},
            {ID: 2, Title: "Build app with Mizu", Done: false},
        }
        return c.JSON(tasks)
    })

    // POST /api/tasks
    app.POST("/api/tasks", func(c *mizu.Ctx) error {
        var task Task
        if err := c.BodyParser(&task); err != nil {
            return err
        }
        task.ID = 3 // In real app, generate from DB
        return c.Status(201).JSON(task)
    })

    // DELETE /api/tasks/:id
    app.DELETE("/api/tasks/:id", func(c *mizu.Ctx) error {
        return c.Status(204).Send(nil)
    })
}

import App from './App.svelte'
import './styles/index.css'

const app = new App({
  target: document.getElementById('app')!,
})

export default app

<script lang="ts">
  import Layout from './components/Layout.svelte'
  import Home from './pages/Home.svelte'
  import About from './pages/About.svelte'

  let currentPage = 'home'

  function navigate(page: string) {
    currentPage = page
    window.history.pushState({}, '', `/${page === 'home' ? '' : page}`)
  }

  // Handle browser back/forward
  window.addEventListener('popstate', () => {
    const path = window.location.pathname.slice(1) || 'home'
    currentPage = path
  })
</script>

<Layout>
  {#if currentPage === 'home'}
    <Home on:navigate={(e) => navigate(e.detail)} />
  {:else if currentPage === 'about'}
    <About on:navigate={(e) => navigate(e.detail)} />
  {/if}
</Layout>

<script lang="ts">
  import { createEventDispatcher } from 'svelte'

  const dispatch = createEventDispatcher()

  function navigate(page: string) {
    dispatch('navigate', page)
  }
</script>

<div class="app">
  <nav>
    <a href="/" on:click|preventDefault={() => navigate('home')}>Home</a>
    <a href="/about" on:click|preventDefault={() => navigate('about')}>About</a>
  </nav>

  <main>
    <slot />
  </main>

  <footer>
    <p>Built with Mizu and Svelte</p>
  </footer>
</div>

<style>
  nav {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f5f5f5;
  }

  nav a {
    color: #ff3e00;
    text-decoration: none;
  }

  nav a:hover {
    text-decoration: underline;
  }

  main {
    padding: 2rem;
  }

  footer {
    margin-top: 4rem;
    text-align: center;
    color: #666;
  }
</style>

<script lang="ts">
  import { onMount } from 'svelte'

  interface User {
    id: number
    name: string
    email: string
  }

  let users: User[] = []
  let loading = true
  let error: string | null = null

  onMount(async () => {
    try {
      const response = await fetch('/api/users')
      if (!response.ok) throw new Error('Failed to fetch users')
      users = await response.json()
    } catch (err) {
      error = err instanceof Error ? err.message : 'Unknown error'
    } finally {
      loading = false
    }
  })
</script>

<div>
  <h1>Users</h1>

  {#if loading}
    <p>Loading...</p>
  {:else if error}
    <p class="error">Error: {error}</p>
  {:else}
    <ul>
      {#each users as user (user.id)}
        <li>{user.name} ({user.email})</li>
      {/each}
    </ul>
  {/if}
</div>

<style>
  .error {
    color: red;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  li {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
  }
</style>

<script lang="ts">
  let count = 0

  // Assignment triggers update
  function increment() {
    count = count + 1  // or count++
  }
</script>

<p>{count}</p>
<button on:click={increment}>Increment</button>

<script lang="ts">
  let count = 0

  // Reactive declaration - updates when count changes
  $: doubled = count * 2

  // Reactive statement - runs when count changes
  $: if (count > 10) {
    console.log('Count is getting high!')
  }

  // Reactive block - multiple statements
  $: {
    console.log('Count changed to', count)
    console.log('Doubled is', doubled)
  }
</script>

<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<button on:click={() => count++}>Increment</button>

<script lang="ts">
  let firstName = 'John'
  let lastName = 'Doe'

  // Automatically re-runs when firstName or lastName change
  $: fullName = `${firstName} ${lastName}`

  // Multiple dependencies
  $: initials = `${firstName[0]}${lastName[0]}`
</script>

<input bind:value={firstName} />
<input bind:value={lastName} />
<p>Full name: {fullName}</p>
<p>Initials: {initials}</p>

<script lang="ts">
  let numbers = [1, 2, 3]

  // ❌ Does NOT trigger update
  function addWrong() {
    numbers.push(4)
  }

  // ✅ Triggers update (assignment)
  function addCorrect() {
    numbers = [...numbers, 4]
  }

  // ✅ Alternative with assignment
  function addAlternative() {
    numbers.push(4)
    numbers = numbers  // Trigger update
  }

  // Objects work the same way
  let user = { name: 'Alice', age: 30 }

  // ❌ Does NOT trigger update
  function updateAgeWrong() {
    user.age = 31
  }

  // ✅ Triggers update
  function updateAgeCorrect() {
    user = { ...user, age: 31 }
  }
</script>

<p>Numbers: {numbers.join(', ')}</p>
<button on:click={addCorrect}>Add Number</button>

<!-- UserCard.svelte -->
<script lang="ts">
  interface User {
    id: number
    name: string
    email: string
  }

  // Exported variables become props
  export let user: User
  export let showEmail = true  // Default value
</script>

<div class="card">
  <h3>{user.name}</h3>
  {#if showEmail}
    <p>{user.email}</p>
  {/if}
</div>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
</style>

<!-- Parent.svelte -->
<script lang="ts">
  import UserCard from './UserCard.svelte'

  const user = { id: 1, name: 'Alice', email: 'alice@example.com' }
</script>

<UserCard {user} showEmail={true} />
<!-- Shorthand when variable name matches prop name: -->
<UserCard {user} />

<!-- Counter.svelte -->
<script lang="ts">
  import { createEventDispatcher } from 'svelte'

  export let count = 0

  const dispatch = createEventDispatcher<{
    increment: number
    decrement: number
  }>()

  function handleIncrement() {
    count++
    dispatch('increment', count)
  }

  function handleDecrement() {
    count--
    dispatch('decrement', count)
  }
</script>

<div>
  <p>Count: {count}</p>
  <button on:click={handleIncrement}>+</button>
  <button on:click={handleDecrement}>-</button>
</div>

<!-- Parent.svelte -->
<script lang="ts">
  import Counter from './Counter.svelte'

  function handleIncrement(event: CustomEvent<number>) {
    console.log('Count incremented to', event.detail)
  }
</script>

<Counter on:increment={handleIncrement} on:decrement={(e) => console.log(e.detail)} />

<!-- Button.svelte -->
<button on:click>
  <slot />
</button>

<!-- Parent.svelte -->
<script lang="ts">
  import Button from './Button.svelte'
</script>

<!-- Event automatically forwarded -->
<Button on:click={() => console.log('Clicked!')}>
  Click me
</Button>

<!-- Parent.svelte -->
<script lang="ts">
  import { setContext } from 'svelte'
  import Child from './Child.svelte'

  const theme = {
    primary: '#ff3e00',
    background: '#ffffff'
  }

  setContext('theme', theme)
</script>

<Child />

<!-- Child.svelte (deeply nested) -->
<script lang="ts">
  import { getContext } from 'svelte'

  interface Theme {
    primary: string
    background: string
  }

  const theme = getContext<Theme>('theme')
</script>

<div style="color: {theme.primary}; background: {theme.background}">
  Themed content
</div>

<!-- Card.svelte -->
<div class="card">
  <header>
    <slot name="header">
      <h2>Default Header</h2>
    </slot>
  </header>

  <main>
    <slot />  <!-- Default slot -->
  </main>

  <footer>
    <slot name="footer" />
  </footer>
</div>

<!-- Parent.svelte -->
<script lang="ts">
  import Card from './Card.svelte'
</script>

<Card>
  <h2 slot="header">Custom Header</h2>

  <!-- Default slot content -->
  <p>This is the card body</p>

  <div slot="footer">
    <button>OK</button>
    <button>Cancel</button>
  </div>
</Card>

<!-- List.svelte -->
<script lang="ts">
  export let items: any[]
</script>

<ul>
  {#each items as item, index (item.id)}
    <li>
      <!-- Expose item and index to parent -->
      <slot {item} {index} />
    </li>
  {/each}
</ul>

<!-- Parent.svelte -->
<script lang="ts">
  import List from './List.svelte'

  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
  ]
</script>

<List items={users} let:item let:index>
  <strong>{index + 1}.</strong> {item.name}
</List>

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

export const count = writable(0)

// Methods
export function increment() {
  count.update(n => n + 1)
}

export function decrement() {
  count.update(n => n - 1)
}

export function reset() {
  count.set(0)
}

<!-- Component.svelte -->
<script lang="ts">
  import { count, increment, decrement, reset } from './stores/counter'
</script>

<!-- $ prefix auto-subscribes -->
<p>Count: {$count}</p>
<button on:click={increment}>+</button>
<button on:click={decrement}>-</button>
<button on:click={reset}>Reset</button>

// stores/time.ts
import { readable } from 'svelte/store'

export const time = readable(new Date(), (set) => {
  const interval = setInterval(() => {
    set(new Date())
  }, 1000)

  // Cleanup function
  return () => clearInterval(interval)
})

<script lang="ts">
  import { time } from './stores/time'
</script>

<p>Current time: {$time.toLocaleTimeString()}</p>

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

interface User {
  id: number
  name: string
  email: string
}

export const users = writable<User[]>([])

// Derived from users store
export const userCount = derived(users, $users => $users.length)

export const userNames = derived(users, $users => $users.map(u => u.name))

// Derived from multiple stores
import { count } from './counter'
export const info = derived(
  [users, count],
  ([$users, $count]) => `${$users.length} users, count: ${$count}`
)

<script lang="ts">
  import { users, userCount, userNames } from './stores/user'
</script>

<p>Total users: {$userCount}</p>
<p>Names: {$userNames.join(', ')}</p>

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

interface Task {
  id: number
  title: string
  done: boolean
}

function createTaskStore() {
  const { subscribe, set, update } = writable<Task[]>([])

  return {
    subscribe,
    add: (title: string) => update(tasks => {
      const newTask = {
        id: Date.now(),
        title,
        done: false
      }
      return [...tasks, newTask]
    }),
    toggle: (id: number) => update(tasks =>
      tasks.map(task =>
        task.id === id ? { ...task, done: !task.done } : task
      )
    ),
    remove: (id: number) => update(tasks =>
      tasks.filter(task => task.id !== id)
    ),
    reset: () => set([])
  }
}

export const tasks = createTaskStore()

<script lang="ts">
  import { tasks } from './stores/tasks'

  let newTaskTitle = ''

  function addTask() {
    if (newTaskTitle.trim()) {
      tasks.add(newTaskTitle)
      newTaskTitle = ''
    }
  }
</script>

<input bind:value={newTaskTitle} on:keydown={(e) => e.key === 'Enter' && addTask()} />
<button on:click={addTask}>Add Task</button>

<ul>
  {#each $tasks as task (task.id)}
    <li>
      <input type="checkbox" checked={task.done} on:change={() => tasks.toggle(task.id)} />
      <span class:done={task.done}>{task.title}</span>
      <button on:click={() => tasks.remove(task.id)}>Delete</button>
    </li>
  {/each}
</ul>

<style>
  .done {
    text-decoration: line-through;
    opacity: 0.6;
  }
</style>

import type { Writable } from 'svelte/store'
import { writable } from 'svelte/store'

interface UserStore extends Writable<User[]> {
  fetchUsers: () => Promise<void>
}

export const users: UserStore = (() => {
  const { subscribe, set, update } = writable<User[]>([])

  return {
    subscribe,
    set,
    update,
    fetchUsers: async () => {
      const res = await fetch('/api/users')
      const data = await res.json()
      set(data)
    }
  }
})()

cd frontend
npm install svelte-spa-router

<!-- App.svelte -->
<script lang="ts">
  import Router from 'svelte-spa-router'
  import Home from './pages/Home.svelte'
  import About from './pages/About.svelte'
  import UserDetail from './pages/UserDetail.svelte'
  import NotFound from './pages/NotFound.svelte'

  const routes = {
    '/': Home,
    '/about': About,
    '/users/:id': UserDetail,
    '*': NotFound,  // 404 catch-all
  }
</script>

<Router {routes} />

<!-- pages/UserDetail.svelte -->
<script lang="ts">
  export let params: { id: string }

  let user = null
  let loading = true

  $: if (params?.id) {
    fetchUser(params.id)
  }

  async function fetchUser(id: string) {
    loading = true
    const res = await fetch(`/api/users/${id}`)
    user = await res.json()
    loading = false
  }
</script>

<div>
  {#if loading}
    <p>Loading user...</p>
  {:else if user}
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  {:else}
    <p>User not found</p>
  {/if}
</div>

<script lang="ts">
  import { push, pop, replace } from 'svelte-spa-router'

  function goToUser(id: number) {
    push(`/users/${id}`)
  }

  function goBack() {
    pop()
  }

  function replaceRoute() {
    replace('/home')
  }
</script>

<button on:click={() => goToUser(123)}>View User 123</button>
<button on:click={goBack}>Go Back</button>

<script lang="ts">
  import Router from 'svelte-spa-router'
  import { wrap } from 'svelte-spa-router/wrap'

  function authGuard(detail) {
    const token = localStorage.getItem('token')
    if (!token) {
      return false  // Prevent navigation
    }
    return true
  }

  const routes = {
    '/': Home,
    '/login': Login,
    '/dashboard': wrap({
      component: Dashboard,
      conditions: [authGuard]
    })
  }
</script>

<Router {routes} />

<script lang="ts">
  import { onMount, onDestroy, beforeUpdate, afterUpdate, tick } from 'svelte'

  let count = 0

  // Runs after component is first rendered to DOM
  onMount(() => {
    console.log('Component mounted')

    // Return cleanup function
    return () => {
      console.log('Cleanup on unmount')
    }
  })

  // Runs before component is destroyed
  onDestroy(() => {
    console.log('Component will be destroyed')
  })

  // Runs before DOM is updated
  beforeUpdate(() => {
    console.log('About to update DOM')
  })

  // Runs after DOM is updated
  afterUpdate(() => {
    console.log('DOM updated')
  })

  async function incrementAndLog() {
    count++
    // Wait for DOM to update
    await tick()
    console.log('DOM has updated with new count')
  }
</script>

<p>{count}</p>
<button on:click={incrementAndLog}>Increment</button>

<script lang="ts">
  let text = ''
  let number = 0
  let checked = false
  let group: string[] = []
  let radio = ''
  let selected = ''
  let files: FileList
</script>

<!-- Text input -->
<input bind:value={text} />

<!-- Number input -->
<input type="number" bind:value={number} />

<!-- Checkbox -->
<input type="checkbox" bind:checked />

<!-- Checkbox group (array) -->
<input type="checkbox" value="a" bind:group />
<input type="checkbox" value="b" bind:group />

<!-- Radio buttons -->
<input type="radio" value="yes" bind:group={radio} />
<input type="radio" value="no" bind:group={radio} />

<!-- Select -->
<select bind:value={selected}>
  <option value="a">A</option>
  <option value="b">B</option>
</select>

<!-- File input -->
<input type="file" bind:files />

<script lang="ts">
  let canvas: HTMLCanvasElement

  function draw() {
    const ctx = canvas.getContext('2d')
    if (ctx) {
      ctx.fillRect(0, 0, 100, 100)
    }
  }
</script>

<canvas bind:this={canvas} width="200" height="200"></canvas>
<button on:click={draw}>Draw</button>

<!-- Input.svelte -->
<script lang="ts">
  export let value = ''
</script>

<input bind:value />

<!-- Parent.svelte -->
<script lang="ts">
  import Input from './Input.svelte'

  let text = 'Hello'
</script>

<!-- Two-way binding to child component -->
<Input bind:value={text} />
<p>Text: {text}</p>

<script lang="ts">
  let clientWidth: number
  let scrollY: number
</script>

<div bind:clientWidth>
  Width: {clientWidth}px
</div>

<svelte:window bind:scrollY />
<p>Scrolled: {scrollY}px</p>

<script lang="ts">
  let count = 0
</script>

{#if count === 0}
  <p>Count is zero</p>
{:else if count < 5}
  <p>Count is less than 5</p>
{:else}
  <p>Count is {count}</p>
{/if}

<script lang="ts">
  let items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' }
  ]
</script>

<!-- With key for efficient updates -->
{#each items as item (item.id)}
  <p>{item.name}</p>
{/each}

<!-- With index -->
{#each items as item, index (item.id)}
  <p>{index + 1}. {item.name}</p>
{/each}

<!-- Empty state -->
{#each items as item}
  <p>{item.name}</p>
{:else}
  <p>No items found</p>
{/each}

<script lang="ts">
  async function fetchUser(id: number) {
    const res = await fetch(`/api/users/${id}`)
    return res.json()
  }

  let promise = fetchUser(1)
</script>

{#await promise}
  <p>Loading...</p>
{:then user}
  <p>{user.name}</p>
{:catch error}
  <p class="error">{error.message}</p>
{/await}

<!-- Or just handle then/catch -->
{#await promise then user}
  <p>{user.name}</p>
{/await}

<script lang="ts">
  let value = 0
</script>

<!-- Component re-mounts when value changes -->
{#key value}
  <div transition:fade>
    Value: {value}
  </div>
{/key}

<button on:click={() => value++}>Change</button>

<!-- Tree.svelte -->
<script lang="ts">
  export let node: { name: string, children?: any[] }
</script>

<li>
  {node.name}
  {#if node.children}
    <ul>
      {#each node.children as child}
        <svelte:self node={child} />
      {/each}
    </ul>
  {/if}
</li>

<script lang="ts">
  import ComponentA from './ComponentA.svelte'
  import ComponentB from './ComponentB.svelte'

  let selected = 'A'

  $: component = selected === 'A' ? ComponentA : ComponentB
</script>

<select bind:value={selected}>
  <option value="A">Component A</option>
  <option value="B">Component B</option>
</select>

<svelte:component this={component} />

<script lang="ts">
  let scrollY: number
  let innerWidth: number

  function handleKeydown(event: KeyboardEvent) {
    console.log('Key pressed:', event.key)
  }
</script>

<svelte:window
  bind:scrollY
  bind:innerWidth
  on:keydown={handleKeydown}
/>

<p>Scroll: {scrollY}px, Width: {innerWidth}px</p>

<script lang="ts">
  function handleClick(event: MouseEvent) {
    console.log('Clicked at', event.clientX, event.clientY)
  }
</script>

<svelte:body on:click={handleClick} />

<svelte:head>
  <title>My Page Title</title>
  <meta name="description" content="Page description" />
  <link rel="stylesheet" href="/custom.css" />
</svelte:head>

<script lang="ts">
  import { fade, fly, slide, scale, blur } from 'svelte/transition'

  let visible = true
</script>

<button on:click={() => visible = !visible}>Toggle</button>

{#if visible}
  <div transition:fade>Fades in and out</div>

  <div transition:fly={{ y: 200, duration: 300 }}>
    Flies in and out
  </div>

  <div transition:slide>Slides in and out</div>

  <div transition:scale={{ start: 0.5 }}>Scales in and out</div>

  <div transition:blur>Blurs in and out</div>
{/if}

<script lang="ts">
  import { fade, fly } from 'svelte/transition'

  let visible = true
</script>

{#if visible}
  <div in:fly={{ y: 200 }} out:fade>
    Flies in, fades out
  </div>
{/if}

<script lang="ts">
  import { cubicOut } from 'svelte/easing'

  function spin(node: Element, { duration = 400 }) {
    return {
      duration,
      css: (t: number) => {
        const eased = cubicOut(t)
        return `
          transform: rotate(${eased * 360}deg);
          opacity: ${t};
        `
      }
    }
  }

  let visible = true
</script>

{#if visible}
  <div transition:spin={{ duration: 600 }}>
    Spins in and out
  </div>
{/if}

<script lang="ts">
  import { fade } from 'svelte/transition'

  function handleIntroStart() {
    console.log('Transition started')
  }

  function handleIntroEnd() {
    console.log('Transition ended')
  }
</script>

<div
  transition:fade
  on:introstart={handleIntroStart}
  on:introend={handleIntroEnd}
  on:outrostart={() => console.log('Outro started')}
  on:outroend={() => console.log('Outro ended')}
>
  Content
</div>

<script lang="ts">
  import { flip } from 'svelte/animate'
  import { fade } from 'svelte/transition'

  let items = [1, 2, 3, 4, 5]

  function shuffle() {
    items = items.sort(() => Math.random() - 0.5)
  }
</script>

<button on:click={shuffle}>Shuffle</button>

{#each items as item (item)}
  <div animate:flip={{ duration: 300 }} transition:fade>
    Item {item}
  </div>
{/each}

<script lang="ts">
  import { tweened } from 'svelte/motion'
  import { cubicOut } from 'svelte/easing'

  const progress = tweened(0, {
    duration: 400,
    easing: cubicOut
  })

  function reset() {
    progress.set(0)
  }

  function fill() {
    progress.set(100)
  }
</script>

<progress value={$progress / 100}></progress>
<p>{$progress.toFixed(0)}%</p>

<button on:click={reset}>Reset</button>
<button on:click={fill}>Fill</button>