svelte

• always use typescript, the script should be
• use svelte 5 (runes, snippets, etc.) syntax
• use remote functions where you can, they are the preferred way to fetch data from the server
• use the new async svelte features when it makes sense to with <svelte:boundary> and await. it's very similar to how suspense works in react
• if you need to use lucide icons, you can import them from @lucide/svelte (<script> import { Skull } from '@lucide/svelte'; </script>)

Svelte 5 Migration Guide

[!NOTE] Svelte 5 Migration Changes

For a comprehensive migration guide, see: https://svelte.dev/docs/svelte/v5-migration-guide/llms.txt

Key Changes:

• Runes API: Replaced implicit reactivity ($:) with explicit runes ($state, $derived, $effect)
• Props: Changed from export let to $props() rune with destructuring
• Events: Changed from on:click to onclick (no colon)
• Event Modifiers: Event modifiers are no longer supported. Instead of <button on:click|once|preventDefault={handler}>, use onclick and handle modifiers in the handler function
• Slots to Snippets: Replaced <slot> with {#snippet} and {@render}
• Actions: Replaced use: directive with @attach
• Component API: Components are now functions instead of classes
• Two-way Binding: Requires explicit $bindable rune for bindable props
• Server Rendering: Components no longer have render() method; use render() from svelte/server for SSR

svelte 5 docs:

Core Principles & Setup:

• Svelte 5 Mandate: MUST use Svelte 5 API (Runes). Unchanged syntax ({#if}) reused from S4 knowledge.
• Runes Overview: Built-in keywords ($) controlling compiler. CORRECT: Use as language keywords. AVOID: Importing/calling runes like functions. Valid in .svelte, .svelte.js, .svelte.ts files.
• .svelte Files: Optional <script>, <script module>, <style>, markup sections.
  • <script>: Runs per component instance. Use runes here.
  • <script module>: Runs once per module load. Can export non-default bindings. Variables accessible in instance script, not vice-versa.
  • <style>: CSS scoped to the component by default.
• .svelte.js/.svelte.ts Files: Regular JS/TS modules supporting runes for reactive logic/state sharing.

  // store.svelte.js
  export let count = $state(0); // Export reactive state
  export const increment = () => count++;
  

• DOM Event Syntax: USE onclick={...} (Replaces S4 on:click={...}). No colon.