## Demo: data-loading

### DataLoading.svelte
```svelte
<script>
  import { params } from 'mochi-framework';
  import { pokemonCache } from '../../lib/cache';
  import DemoPage from '../../components/DemoPage.svelte';
  import PokemonHeader from './PokemonHeader.svelte';
  import PokemonMeta from './PokemonMeta.svelte';
  import PokemonStats from './PokemonStats.svelte';
  import PokemonSelector from './PokemonSelector.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { files } from './files.ts';

  const sources = await loadSources(files);

  const id = (params.id ?? 'pikachu').toLowerCase();

  const [pokemon, options] = await Promise.all([
    pokemonCache.fetch(`pokemon:${id}`, async () => {
      const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${encodeURIComponent(id)}`);
      return res.ok ? await res.json() : null;
    }),
    pokemonCache.fetch('pokemon:list:151', async () => {
      const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=151');
      const data = await res.json();
      return data.results;
    }),
  ]);

  const types = pokemon?.types.map((t) => t.type.name) ?? [];
  const abilities = pokemon?.abilities.map((a) => a.ability.name) ?? [];
  const stats = pokemon?.stats.map((s) => ({ name: s.stat.name, value: s.base_stat })) ?? [];
</script>

<DemoPage
  title="Data Loading"
  description="You can fetch server-side data inside any non-hydrated Svelte component by loading it at the top level — no special API needed. Wrap the fetch in MochiCache for fast, cached access across requests."
  {sources}
>
  <PokemonSelector mochi:hydrate current={id} {options} />

  {#if pokemon}
    <div class="card">
      <PokemonHeader id={pokemon.id} name={pokemon.name} sprite={pokemon.sprites.front_default} />
      <div class="divider"></div>
      <PokemonMeta {types} height={pokemon.height} weight={pokemon.weight} baseXp={pokemon.base_experience} {abilities} />
      <div class="divider"></div>
      <PokemonStats mochi:hydrate {stats} />
    </div>
  {:else}
    <p class="not-found">No Pokémon found for "{id}".</p>
  {/if}
</DemoPage>

<style>
  .card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--border);
  }

  .divider {
    height: 1px;
    background: var(--border);
    margin: 0 1.5rem;
  }

  .not-found {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 0;
  }
</style>
```

### PokemonSelector.svelte
```svelte
<script lang="ts">
  let { current, options }: { current: string; options: { name: string }[] } = $props();

  function onChange(event: Event) {
    (event.currentTarget as HTMLSelectElement).form?.requestSubmit();
  }

  function capitalize(name: string) {
    return name.charAt(0).toUpperCase() + name.slice(1);
  }
</script>

<form class="selector" method="POST">
  <label for="pokemon-select">Pick a Pokémon:</label>
  <select id="pokemon-select" name="pokemon" value={current} onchange={onChange}>
    {#each options as option (option.name)}
      <option value={option.name} selected={option.name === current}>
        {capitalize(option.name)}
      </option>
    {/each}
  </select>
  <noscript>
    <button type="submit">Go</button>
  </noscript>
</form>

<style>
  .selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }

  label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
  }

  select {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    transition:
      border-color 0.12s ease,
      box-shadow 0.12s ease;
  }

  select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
  }

  button {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--accent-text);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease;
  }

  button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }
</style>
```

### PokemonHeader.svelte
```svelte
<script>
  import { isServer, isDev } from 'mochi-framework';
  // console.log('Running on:', isServer ? 'SERVER' : 'BROWSER', '|', isDev ? 'DEV' : 'PROD');

  const { id, name, sprite } = $props();
</script>

<svelte:head>
  <script type="module">
    console.log('Hello world! from the client!');
  </script>
</svelte:head>

<p class="env-badge">{isServer ? 'SERVER' : 'BROWSER'} | {isDev ? 'DEV' : 'PROD'}</p>

<div class="header">
  <img src={sprite} alt={name} class="sprite" />
  <div class="title">
    <span class="id">#{String(id).padStart(3, '0')}</span>
    <h1>{name}</h1>
  </div>
</div>

<style>
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1.5rem 0;
  }

  .sprite {
    width: 140px;
    height: 140px;
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
  }

  .title {
    text-align: center;
  }

  .id {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.05em;
  }

  h1 {
    margin: 0.1rem 0 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    text-transform: capitalize;
    letter-spacing: 0.02em;
  }

  .env-badge {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    display: table;
    margin: 0.5rem auto;
  }
</style>
```

### PokemonMeta.svelte
```svelte
<script>
  const { types, height, weight, baseXp, abilities } = $props();

  const typeColors = {
    normal: '#A8A878',
    fire: '#F08030',
    water: '#6890F0',
    electric: '#F8D030',
    grass: '#78C850',
    ice: '#98D8D8',
    fighting: '#C03028',
    poison: '#A040A0',
    ground: '#E0C068',
    flying: '#A890F0',
    psychic: '#F85888',
    bug: '#A8B820',
    rock: '#B8A038',
    ghost: '#705898',
    dragon: '#7038F8',
    dark: '#705848',
    steel: '#B8B8D0',
    fairy: '#EE99AC',
  };

  function textOn(hex) {
    const n = parseInt(hex.slice(1), 16);
    const r = (n >> 16) & 255,
      g = (n >> 8) & 255,
      b = n & 255;
    return (r * 299 + g * 587 + b * 114) / 1000 >= 140 ? '#1f2a24' : '#fff';
  }
</script>

<div class="meta">
  <div class="types">
    {#each types as t (t)}
      <span class="type-badge" style="background:{typeColors[t] ?? '#888'};color:{textOn(typeColors[t] ?? '#888')}">{t}</span>
    {/each}
  </div>

  <div class="stats-grid">
    <div class="stat-item">
      <span class="label">Height</span>
      <span class="value">{(height / 10).toFixed(1)} m</span>
    </div>
    <div class="stat-item">
      <span class="label">Weight</span>
      <span class="value">{(weight / 10).toFixed(1)} kg</span>
    </div>
    <div class="stat-item">
      <span class="label">Base XP</span>
      <span class="value">{baseXp}</span>
    </div>
    <div class="stat-item">
      <span class="label">Abilities</span>
      <span class="value abilities">{abilities.join(', ')}</span>
    </div>
  </div>
</div>

<style>
  .meta {
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .types {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
  }

  .type-badge {
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .stat-item {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
  }

  .value {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 500;
    text-transform: capitalize;
  }

  .abilities {
    font-size: 0.85rem;
  }
</style>
```

### PokemonStats.svelte
```svelte
<script>
  import { isBrowser, logger } from 'mochi-framework';
  if (isBrowser) {
    logger.info('PokemonStats is hydrating!');
  }
  const { stats } = $props();
  const maxStat = 255;
  let filter = $state('');
  const filtered = $derived(filter.trim() === '' ? stats : stats.filter((s) => s.name.toLowerCase().includes(filter.toLowerCase())));
</script>

<div class="stats">
  <h2>Base Stats</h2>
  <input class="filter" type="search" placeholder="Filter stats…" bind:value={filter} />
  {#each filtered as s (s.name)}
    <div class="row">
      <span class="name">{s.name}</span>
      <span class="num">{s.value}</span>
      <div class="bar-track">
        <div class="bar" style="width:{Math.round((s.value / maxStat) * 100)}%"></div>
      </div>
    </div>
  {/each}
</div>

<style>
  .stats {
    padding: 0 1.5rem 1.5rem;
  }

  .stats h2 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    margin: 0 0 0.75rem;
  }

  .row {
    display: grid;
    grid-template-columns: 80px 36px 1fr;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
  }

  .name {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .num {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font-mono);
    text-align: right;
  }

  .filter {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    outline: none;
    transition:
      border-color 0.12s ease,
      box-shadow 0.12s ease;
  }

  .filter:focus-visible {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
  }

  .bar-track {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
  }

  .bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-soft), var(--accent));
    min-width: 4px;
  }
</style>
```

### routes.ts
```ts
import { Mochi, fail, redirect } from 'mochi-framework';
import type { MochiRouteValue } from 'mochi-framework';

export const routes: Record<string, MochiRouteValue> = {
  '/demos/data-loading': (req: Request) => Response.redirect(new URL('/demos/data-loading/pikachu', req.url), 302),
  '/demos/data-loading/:id': Mochi.page('./src/demos/data-loading/DataLoading.svelte', {
    actions: {
      default: async ({ formData }) => {
        const pokemon = String(formData.get('pokemon') ?? '')
          .trim()
          .toLowerCase();
        if (!pokemon) {
          return fail(400, { error: 'Pokemon required' });
        }
        return redirect(303, `/demos/data-loading/${encodeURIComponent(pokemon)}`);
      },
    },
  }),
};
```

### cache.ts
```ts
import { MochiCache } from 'mochi-framework';

export const pokemonCache = new MochiCache({
  minTimeToStale: 10_000,
  maxTimeToLive: 300_000,
});
```

### index.ts
```ts
import { Mochi, logger } from 'mochi-framework';

await Mochi.serve({
  port: 3333,
  development: process.env.MODE === 'development',
  routes: {
    '/': Mochi.page('./src/Home.svelte'),
  },
});

logger.info('Server running at http://localhost:3333');
```