## Directories ### introduction Svelte is a compiler framework for building UIs with components that combine HTML, CSS, and JavaScript, with setup via SvelteKit or Vite. ## Overview Svelte is a compiler-based framework that transforms declarative components into optimized JavaScript. Components are written in `.svelte` files combining HTML, CSS, and JavaScript. ## Setup **SvelteKit (recommended):** ```sh npx sv create myapp cd myapp npm run dev ``` **Vite:** ```sh npm create vite@latest npm run build ``` ## Component Structure `.svelte` files contain three optional sections: ```svelte ``` - ` ``` Store reactive state in context by mutating objects rather than reassigning. Use `createContext` for type-safe context: ```ts export const [getUserContext, setUserContext] = createContext(); ``` Available: `setContext`, `getContext`, `hasContext`, `getAllContexts`. ## Lifecycle Hooks **onMount** - Runs after component mounts to DOM. Can return cleanup function. ```js onMount(() => { const interval = setInterval(() => {}, 1000); return () => clearInterval(interval); }); ``` **onDestroy** - Runs before unmount. Only hook that runs in SSR. **tick** - Returns promise resolving after pending state changes apply to DOM. ```js await tick(); ``` Replace deprecated `beforeUpdate`/`afterUpdate` with `$effect.pre` and `$effect`. ## Imperative Component API **mount(Component, { target, props })** - Instantiate and mount component to DOM element. **unmount(component, { outro })** - Remove mounted component. Returns promise if `outro: true`. **render(Component, { props })** - Server-only SSR function returning `{ body, head }`. **hydrate(Component, { target, props })** - Mount component reusing SSR HTML output. ### advanced_topics_&_migration Advanced patterns, testing strategies, TypeScript integration, custom elements, and migration guides for Svelte 4 and 5. ## Testing **Unit & Component Tests with Vitest** - Configure `vite.config.js` with `resolve: { conditions: ['browser'] }` for browser entry points - Name test files `.svelte.test.js` to use runes; wrap effects in `$effect.root()` and use `flushSync()` - Use Svelte's `mount` API for component testing: ```js const component = mount(Component, { target: document.body, props: { initial: 0 } }); expect(document.body.innerHTML).toBe(''); document.body.querySelector('button').click(); flushSync(); unmount(component); ``` - Use `@testing-library/svelte` for higher-level testing **Storybook** - Install via `npx sv add storybook` - Create stories with interaction tests using `play` function **E2E Tests with Playwright** - Configure `playwright.config.js` with `webServer` to start application - Write tests that interact with DOM: ```js test('home page has expected h1', async ({ page }) => { await page.goto('/'); await expect(page.locator('h1')).toBeVisible(); }); ``` ## TypeScript - Add `lang="ts"` to script tags; configure preprocessor in `svelte.config.js` for full support - Set `tsconfig.json`: `target: ES2015+`, `verbatimModuleSyntax: true`, `isolatedModules: true` - Type props with interface and `$props()`: ```ts interface Props { requiredProperty: number; optionalProperty?: boolean; snippetWithStringArgument: Snippet<[string]>; } let { requiredProperty, optionalProperty, snippetWithStringArgument }: Props = $props(); ``` - Use `generics` attribute for generic props: ` ``` Reactive statements use `$:` prefix and re-run when dependencies change. Dependencies are determined at compile time by direct variable references (not function calls): ```svelte ``` ## Props and Exports Props declared with `export` keyword; defaults apply when prop is `undefined`: ```svelte ``` Access all props with `$$props` and undeclared props with `$$restProps`: ```svelte ``` ## Events Attach handlers with `on:` directive; supports modifiers (`preventDefault`, `stopPropagation`, `capture`, `once`, `self`, `trusted`, etc.): ```svelte ``` Dispatch custom events with `createEventDispatcher`: ```svelte ``` ## Slots Default and named slots with fallback content: ```svelte Default button

Custom content

``` Check which slots were provided with `$$slots`: ```svelte {#if $$slots.description} {/if} ``` Use `` to place multiple elements in a named slot without a wrapper. ## Dynamic Components `` destroys and recreates when component reference changes. `` allows recursive self-reference (must be in conditional or slot to prevent infinite loops). ## Imperative API Components are classes instantiated with target, props, and options: ```ts import App from './App.svelte'; const app = new App({ target: document.body, props: { answer: 42 } }); app.$set({ answer: 43 }); const off = app.$on('event', callback); app.$destroy(); ``` With `accessors: true`, props become getters/setters with synchronous updates. Server-side rendering exposes `render()` method returning `{ head, html, css }`.

sveltejs/svelte