keisei/KeiSeiKit-1.0
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
KeiSeiKit-1.0/_blocks/stack-sveltekit.md

2.5 KiB
Raw Blame History

STACK — SvelteKit (Svelte 5 Runes + TS)

Use for animation-heavy sites, mobile-first interactive surfaces, and apps where smallest-possible runtime matters. Svelte 5 compiles to minimal JS; Runes replace the legacy reactive-label syntax.

Scaffold: npm create svelte@latest <app> → choose "SvelteKit", TypeScript strict, ESLint + Prettier.

Routing: file-based (src/routes/). Each route is a folder containing +page.svelte (UI) + optionally +page.server.ts (server load / actions) / +page.ts (universal load) / +layout.svelte. Dynamic routes via [slug]/+page.svelte.

Runes (Svelte 5):

  • $state(x) — reactive value (replaces let x = ... + $: label)
  • $derived(expr) — computed (replaces $: derivations)
  • $effect(() => {...}) — side effect (replaces $: statements with side effects)
  • $props() — component props (replaces export let)
  • $bindable() — two-way binding opt-in

No more legacy export let / $: foo = bar in new code. Runes are the canonical API from Svelte 5 onwards.

Data flow:

  • +page.server.ts load({ fetch, params }) — runs on server only, DB/secrets OK.
  • +page.ts load(...) — runs both server (SSR) + client (navigation) — no secrets.
  • Form actions: export const actions = { default: async ({ request }) => {...} } in +page.server.ts. Use <form method="POST"> + progressive enhancement — works without JS.

Env vars:

  • $env/static/private + $env/dynamic/private — server-only, secrets OK.
  • $env/static/public + $env/dynamic/public — must be prefixed PUBLIC_, ships to client.
  • SvelteKit refuses to build if a private env is imported into a client module — enforcement built in.

Deploy adapter (Cloudflare default): npm i -D @sveltejs/adapter-cloudflare and set it in svelte.config.js. Alternatives: adapter-node, adapter-vercel, adapter-static. Cloudflare adapter supports KV / R2 / D1 via platform.env.* inside load functions.

Stores (legacy, still supported): writable, readable, derived from svelte/store. Prefer $state in components; use stores only for cross-component shared state that truly needs it.

Testing: Vitest for unit + @testing-library/svelte for components + Playwright for E2E.

Forbidden: legacy export let + $: label syntax for NEW code (use Runes), $env/static/private imported into a client-reachable module, mixing runes + legacy reactivity in the same component, hardcoded secrets in svelte.config.js (ships to client bundle), adding React/Vue into a SvelteKit app without a very specific reason.