## docs/svelte/01-introduction/01-overview.md

# Overview

Svelte compiles declarative components (HTML, CSS, JS) into optimized JavaScript.

## Basic Component

```svelte
<!file: App.svelte>
<script>
	function greet() {
		alert('Welcome to Svelte!');
	}
</script>

<button onclick={greet}>click me</button>

<style>
	button {
		font-size: 2em;
	}
</style>
```

Use for standalone components or full apps with SvelteKit.

**Resources:** [Tutorial](/tutorial) | [Playground](/playground) | [StackBlitz](https://sveltekit.new)

## docs/svelte/01-introduction/02-getting-started.md

# Getting started

## Create project

```sh
npx sv create myapp
cd myapp
npm install
npm run dev
```

Uses SvelteKit (official framework) + Vite.

## Alternatives

- **Vite standalone**: `npm create vite@latest` → select `svelte` option
  - Generates HTML/JS/CSS in `dist/`
  - Need to add routing library separately
  - For SPAs (also possible with SvelteKit)
- **Other bundlers**: Plugins available, but Vite recommended

## Editor tooling

- [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
- CLI check: `npx sv check`

## Help

- [Discord](/chat)
- [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte)

## docs/svelte/01-introduction/03-svelte-files.md

# .svelte files

Components are written in `.svelte` files. All three sections are optional.

```svelte
/// file: MyComponent.svelte
<script module>
	// module-level logic (rarely used)
</script>

<script>
	// instance-level logic
</script>

<!-- markup -->

<style>
	/* styles */
</style>
```

## `<script>`

Runs when component instance is created. Top-level variables can be referenced in markup. Use runes for props and reactivity.

## `<script module>`

Runs once when module first evaluates (not per instance). Variables declared here accessible in component, but not vice versa.

```svelte
<script module>
	let total = 0;
</script>

<script>
	total += 1;
	console.log(`instantiated ${total} times`);
</script>
```

Can `export` bindings (becomes module exports). Cannot `export default` (component is default export).

> **Note:** Svelte 4 used `<script context="module">`

## `<style>`

CSS scoped to component only.

```svelte
<style>
	p {
		/* only affects <p> in this component */
		color: burlywood;
	}
</style>
```

## docs/svelte/01-introduction/04-svelte-js-files.md

# .svelte.js and .svelte.ts files

`.svelte.js` and `.svelte.ts` files behave like regular `.js`/`.ts` modules but support runes.

**Use cases:**
- Reusable reactive logic
- Sharing reactive state across app

**Gotcha:** Cannot export reassigned state (see `$state` docs)

## docs/svelte/02-runes/01-what-are-runes.md

# Runes

Runes are compiler keywords with `$` prefix that control Svelte behavior in `.svelte` and `.svelte.js`/`.svelte.ts` files.

```js
let message = $state('hello');
```

**Key characteristics:**
- No import needed (globals)
- Not values (can't assign/pass as arguments)
- Position-specific like JS keywords
- Svelte 5+ only

## docs/svelte/02-runes/02-$state.md

# $state

Creates reactive state that updates the UI when changed.

```svelte
<script>
	let count = $state(0);
</script>

<button onclick={() => count++}>
	clicks: {count}
</button>
```

`count` is just a number - update it like any variable.

## Deep state

Arrays and plain objects become deeply reactive proxies. Updates trigger granular UI changes.

```js
let todos = $state([
	{
		done: false,
		text: 'add more todos'
	}
]);

// triggers updates for this specific property
todos[0].done = !todos[0].done;

// new objects are also proxified
todos.push({
	done: false,
	text: 'eat lunch'
});
```

**Gotcha:** Destructuring breaks reactivity (values evaluated at destructure time):

```js
let { done, text } = todos[0];
// this will NOT affect `done`
todos[0].done = !todos[0].done;
```

## Classes

Use `$state` in class fields or first assignment in constructor:

```js
class Todo {
	done = $state(false);

	constructor(text) {
		this.text = $state(text);
	}

	reset() {
		this.text = '';
		this.done = false;
	}
}
```

**Gotcha:** `this` binding in methods. Use inline function or arrow function:

```svelte
<!-- Won't work - wrong `this` -->
<button onclick={todo.reset}>reset</button>

<!-- Works -->
<button onclick={() => todo.reset()}>reset</button>
```

Or use arrow function in class:

```js
class Todo {
	done = $state(false);

	constructor(text) {
		this.text = $state(text);
	}

	reset = () => {
		this.text = '';
		this.done = false;
	}
}
```

**Built-in classes:** Import reactive `Set`, `Map`, `Date`, `URL` from `svelte/reactivity`.

## $state.raw

Non-deep reactive state. Can only reassign, not mutate:

```js
let person = $state.raw({
	name: 'Heraclitus',
	age: 49
});

// no effect
person.age += 1;

// works - reassignment
person = {
	name: 'Heraclitus',
	age: 50
};
```

Use for performance with large arrays/objects you won't mutate. Raw state can contain reactive state.

## $state.snapshot

Takes static snapshot of reactive proxy:

```svelte
<script>
	let counter = $state({ count: 0 });

	function onclick() {
		// Logs `{ count: ... }` not `Proxy { ... }`
		console.log($state.snapshot(counter));
	}
</script>
```

Useful for external libraries/APIs that don't expect proxies (e.g., `structuredClone`).

## $state.eager

Updates UI immediately instead of waiting for `await` synchronization:

```svelte
<nav>
	<a href="/" aria-current={$state.eager(pathname) === '/' ? 'page' : null}>home</a>
	<a href="/about" aria-current={$state.eager(pathname) === '/about' ? 'page' : null}>about</a>
</nav>
```

Use sparingly - only for immediate user feedback.

## Passing state into functions

JavaScript is pass-by-value. To pass current values, use functions:

```js
function add(getA, getB) {
	return() => getA() + getB();
}

let a = 1;
let b = 2;
let total = add(() => a, () => b);
console.log(total()); // 3

a = 3;
b = 4;
console.log(total()); // 7
```

Or use getters:

```js
function add(input) {
	return {
		get value() {
			return input.a + input.b;
		}
	};
}

let input = $state({ a: 1, b: 2 });
let total = add(input);
console.log(total.value); // 3

input.a = 3;
input.b = 4;
console.log(total.value); // 7
```

## Passing state across modules

Can't directly export reassignable state from `.svelte.js`/`.svelte.ts`:

```js
// ❌ Won't work
export let count = $state(0);
```

**Option 1:** Don't reassign (update properties instead):

```js
export const counter = $state({
	count: 0
});

export function increment() {
	counter.count += 1;
}
```

**Option 2:** Don't directly export:

```js
let count = $state(0);

export function getCount() {
	return count;
}

export function increment() {
	count += 1;
}
```

## docs/svelte/02-runes/03-$derived.md

# $derived

Derived state recalculates when dependencies change:

```svelte
<script>
	let count = $state(0);
	let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>
	{doubled}
</button>

<p>{count} doubled is {doubled}</p>
```

**Rules:**
- Expression must be side-effect free (no `count++`)
- Can mark class fields as `$derived`
- Without `$derived`, values don't update when dependencies change

## `$derived.by`

For complex derivations, use `$derived.by` with a function:

```svelte
<script>
	let numbers = $state([1, 2, 3]);
	let total = $derived.by(() => {
		let total = 0;
		for (const n of numbers) {
			total += n;
		}
		return total;
	});
</script>

<button onclick={() => numbers.push(numbers.length + 1)}>
	{numbers.join(' + ')} = {total}
</button>
```

`$derived(expression)` equals `$derived.by(() => expression)`

## Dependencies

Anything read synchronously inside `$derived` is a dependency. With `await`, state after the `await` is also tracked:

```js
let a = Promise.resolve(1);
let b = 2;
//cut
let total = $derived(await a + b);
```

Both `a` and `b` are tracked. Use `untrack` to exempt state from dependency tracking.

## Overriding Values

Derived values can be temporarily reassigned (unless `const`). Useful for optimistic UI:

```svelte
<script>
	let { post, like } = $props();

	let likes = $derived(post.likes);

	async function onclick() {
		// increment the `likes` count immediately...
		likes += 1;

		// and tell the server, which will eventually update `post`
		try {
			await like();
		} catch {
			// failed! roll back the change
			likes -= 1;
		}
	}
</script>

<button {onclick}>🧡 {likes}</button>
```

## Deriveds and Reactivity

`$derived` values are not deeply reactive (unlike `$state`):

```js
// @errors: 7005
let items = $state([ /*...*/ ]);

let index = $state(0);
let selected = $derived(items[index]);
```

Mutating `selected` affects the underlying `items` array.

## Destructuring

Destructured variables are all reactive:

```js
function stuff() { return { a: 1, b: 2, c: 3 } }
//cut
let { a, b, c } = $derived(stuff());
```

Equivalent to:

```js
function stuff() { return { a: 1, b: 2, c: 3 } }
//cut
let _stuff = $derived(stuff());
let a = $derived(_stuff.a);
let b = $derived(_stuff.b);
let c = $derived(_stuff.c);
```

## Update Propagation

**Push-pull reactivity:** Dependencies are notified immediately (push), but deriveds only recalculate when read (pull).

If a derived's new value is referentially identical to its previous value, downstream updates are skipped:

```svelte
<script>
	let count = $state(0);
	let large = $derived(count > 10);
</script>

<button onclick={() => count++}>
	{large}
</button>
```

Button only updates when `large` changes, not when `count` changes.

## docs/svelte/02-runes/04-$effect.md

# $effect

Effects run when state updates. Run in browser only, not during SSR.

**Don't update state inside effects** - leads to complexity and infinite loops. See alternatives below.

## Basic Usage

```svelte
<script>
	let size = $state(50);
	let color = $state('#ff3e00');

	let canvas;

	$effect(() => {
		const context = canvas.getContext('2d');
		context.clearRect(0, 0, canvas.width, canvas.height);

		// re-runs whenever `color` or `size` change
		context.fillStyle = color;
		context.fillRect(0, 0, size, size);
	});
</script>

<canvas bind:this={canvas} width="100" height="100"></canvas>
```

Svelte tracks which state is accessed and re-runs when it changes.

## Lifecycle

- Runs after component mounts
- Re-runs in microtask after state changes
- Re-runs are batched
- Can be used anywhere, not just top level

### Teardown Functions

```svelte
<script>
	let count = $state(0);
	let milliseconds = $state(1000);

	$effect(() => {
		const interval = setInterval(() => {
			count += 1;
		}, milliseconds);

		return () => {
			// runs before re-run and when component destroyed
			clearInterval(interval);
		};
	});
</script>

<h1>{count}</h1>

<button onclick={() => (milliseconds *= 2)}>slower</button>
<button onclick={() => (milliseconds /= 2)}>faster</button>
```

## Dependencies

Auto-tracks reactive values (`$state`, `$derived`, `$props`) read **synchronously**.

**Async reads not tracked:**

```ts
$effect(() => {
	const context = canvas.getContext('2d');
	context.clearRect(0, 0, canvas.width, canvas.height);

	// re-runs when `color` changes
	context.fillStyle = color;

	setTimeout(() => {
		// does NOT re-run when `size` changes
		context.fillRect(0, 0, size, size);
	}, 0);
});
```

**Object vs property reads:**

```svelte
<script>
	let state = $state({ value: 0 });
	let derived = $derived({ value: state.value * 2 });

	// runs once - `state` never reassigned
	$effect(() => {
		state;
	});

	// re-runs when `state.value` changes
	$effect(() => {
		state.value;
	});

	// re-runs - `derived` is new object each time
	$effect(() => {
		derived;
	});
</script>

<button onclick={() => (state.value += 1)}>
	{state.value}
</button>

<p>{state.value} doubled is {derived.value}</p>
```

**Conditional dependencies:**

```ts
import confetti from 'canvas-confetti';

let condition = $state(true);
let color = $state('#ff3e00');

$effect(() => {
	if (condition) {
		confetti({ colors: [color] }); // depends on `condition` and `color`
	} else {
		confetti(); // only depends on `condition`
	}
});
```

Effect only depends on values read in last run.

## `$effect.pre`

Runs **before** DOM updates:

```svelte
<script>
	import { tick } from 'svelte';

	let div = $state();
	let messages = $state([]);

	$effect.pre(() => {
		if (!div) return;

		messages.length; // track dependency

		// autoscroll when new messages added
		if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {
			tick().then(() => {
				div.scrollTo(0, div.scrollHeight);
			});
		}
	});
</script>

<div bind:this={div}>
	{#each messages as message}
		<p>{message}</p>
	{/each}
</div>
```

## `$effect.tracking`

Returns `true` if code runs inside tracking context (effect or template):

```svelte
<script>
	console.log('in component setup:', $effect.tracking()); // false

	$effect(() => {
		console.log('in effect:', $effect.tracking()); // true
	});
</script>

<p>in template: {$effect.tracking()}</p>
```

Used for abstractions like `createSubscriber`.

## `$effect.pending`

Returns count of pending promises in current boundary (excludes child boundaries):

```svelte
<script>
	let a = $state(1);
	let b = $state(2);

	async function add(a, b) {
		await new Promise((f) => setTimeout(f, 500));
		return a + b;
	}
</script>

<button onclick={() => a++}>a++</button>
<button onclick={() => b++}>b++</button>

<p>{a} + {b} = {await add(a, b)}</p>

{#if $effect.pending()}
	<p>pending promises: {$effect.pending()}</p>
{/if}
```

## `$effect.root`

Creates non-tracked scope without auto-cleanup. For manual control and effects outside component init:

```js
const destroy = $effect.root(() => {
	$effect(() => {
		// setup
	});

	return () => {
		// cleanup
	};
});

// later...
destroy();
```

## When NOT to Use

### ❌ Don't synchronize state:

```svelte
<script>
	let count = $state(0);
	let doubled = $state();

	// don't do this!
	$effect(() => {
		doubled = count * 2;
	});
</script>
```

### ✅ Use `$derived`:

```svelte
<script>
	let count = $state(0);
	let doubled = $derived(count * 2);
</script>
```

For complex logic, use `$derived.by`. Deriveds can be [directly overridden](since 5.25) for optimistic UI.

### ❌ Don't link values with effects:

```svelte
<script>
	const total = 100;
	let spent = $state(0);
	let left = $state(total);

	$effect(() => {
		left = total - spent;
	});

	$effect(() => {
		spent = total - left;
	});
</script>

<label>
	<input type="range" bind:value={spent} max={total} />
	{spent}/{total} spent
</label>

<label>
	<input type="range" bind:value={left} max={total} />
	{left}/{total} left
</label>
```

### ✅ Use callbacks or function bindings:

```svelte
<script>
	const total = 100;
	let spent = $state(0);
	let left = $derived(total - spent);

	function updateLeft(left) {
		spent = total - left;
	}
</script>

<label>
	<input type="range" bind:value={spent} max={total} />
	{spent}/{total} spent
</label>

<label>
	<input type="range" bind:value={() => left, updateLeft} max={total} />
	{left}/{total} left
</label>
```

**If you must update `$state` in effect and hit infinite loop, use `untrack`.**

## docs/svelte/02-runes/05-$props.md

# $props

Pass props to components like attributes:

```svelte
<!file: App.svelte>
<script>
	import MyComponent from './MyComponent.svelte';
</script>

<MyComponent adjective="cool" />
```

Receive with `$props()` rune (destructuring common):

```svelte
<!file: MyComponent.svelte>
<script>
	let { adjective } = $props();
</script>

<p>this component is {adjective}</p>
```

## Fallback values

```js
let { adjective = 'happy' } = $props();
```

> Fallback values are NOT reactive proxies

## Renaming props

```js
let { super: trouper = 'lights are gonna find me' } = $props();
```

## Rest props

```js
let { a, b, c, ...others } = $props();
```

## Updating props

Props update when parent changes. Child can temporarily **reassign** but should NOT **mutate**.

**Reassignment (OK):**
```svelte
<!file: Child.svelte>
<script>
	let { count } = $props();
</script>

<button onclick={() => (count += 1)}>
	clicks (child): {count}
</button>
```

**Mutation (DON'T):**
- Regular object mutation: no effect
- Reactive state proxy mutation: works but triggers `ownership_invalid_mutation` warning
- Fallback value mutation: no effect

Use callback props or [`$bindable`]($bindable) for shared state changes.

## Type safety

**TypeScript:**
```svelte
<script lang="ts">
	let { adjective }: { adjective: string } = $props();
</script>
```

**JSDoc:**
```svelte
<script>
	/** @type {{ adjective: string }} */
	let { adjective } = $props();
</script>
```

**Interface:**
```svelte
<script lang="ts">
	interface Props {
		adjective: string;
	}

	let { adjective }: Props = $props();
</script>
```

Type snippets with `Snippet` from `'svelte'`. Native DOM element interfaces in `svelte/elements`.

## `$props.id()`

Generates unique ID per component instance (server/client consistent):

```svelte
<script>
	const uid = $props.id();
</script>

<form>
	<label for="{uid}-firstname">First Name: </label>
	<input id="{uid}-firstname" type="text" />

	<label for="{uid}-lastname">Last Name: </label>
	<input id="{uid}-lastname" type="text" />
</form>
```

## docs/svelte/02-runes/06-$bindable.md

# $bindable

Props normally flow parent → child. `$bindable` allows two-way binding so data can flow child → parent. Use sparingly.

## Basic Usage

**Child component** - mark prop as bindable:

```svelte
/// file: FancyInput.svelte
<script>
	let { value = $bindable(), ...props } = $props();
</script>

<input bind:value={value} {...props} />

<style>
	input {
		font-family: 'Comic Sans MS';
		color: deeppink;
	}
</style>
```

**Parent component** - use `bind:` directive:

```svelte
/// file: App.svelte
<script>
	import FancyInput from './FancyInput.svelte';

	let message = $state('hello');
</script>

<FancyInput bind:value={message} />
<p>{message}</p>
```

## Key Points

- Parent can pass normal prop without `bind:` - child won't update parent
- Allows child to mutate state proxies
- Fallback value when no prop passed:

```js
/// file: FancyInput.svelte
let { value = $bindable('fallback'), ...props } = $props();
```

> **Warning:** Mutating normal (non-bindable) props triggers warnings. Don't mutate state you don't own.

## docs/svelte/02-runes/07-$inspect.md

# $inspect

> **Note:** Dev-only. Noop in production.

Reactive `console.log` - re-runs when arguments change. Tracks deeply (objects/arrays).

```svelte
<script>
	let count = $state(0);
	let message = $state('hello');

	$inspect(count, message); // logs when count or message change
</script>

<button onclick={() => count++}>Increment</button>
<input bind:value={message} />
```

Prints stack trace on updates (except in playground).

## $inspect(...).with

Custom callback instead of `console.log`. First arg is `"init"` or `"update"`, rest are inspected values.

```svelte
<script>
	let count = $state(0);

	$inspect(count).with((type, count) => {
		if (type === 'update') {
			debugger; // or console.trace, etc
		}
	});
</script>

<button onclick={() => count++}>Increment</button>
```

## $inspect.trace(...)

Traces function re-runs in `$effect` or `$derived`. Shows which reactive state caused re-run.

```svelte
<script>
	import { doSomeWork } from './elsewhere';

	$effect(() => {
		// Must be first statement in function body
		$inspect.trace();
		doSomeWork();
	});
</script>
```

Optional first arg for label.

## docs/svelte/02-runes/08-$host.md

# $host

Provides access to the host element when compiling a component as a custom element.

## Usage

```svelte
/// file: Stepper.svelte
<svelte:options customElement="my-stepper" />

<script>
	function dispatch(type) {
		$host().dispatchEvent(new CustomEvent(type));
	}
</script>

<button onclick={() => dispatch('decrement')}>decrement</button>
<button onclick={() => dispatch('increment')}>increment</button>
```

```svelte
/// file: App.svelte
<script>
	import './Stepper.svelte';

	let count = $state(0);
</script>

<my-stepper
	ondecrement={() => count -= 1}
	onincrement={() => count += 1}
></my-stepper>

<p>count: {count}</p>
```

**Key use case:** Dispatching custom events from custom elements.

## docs/svelte/03-template-syntax/01-basic-markup.md

# Basic Markup

## Tags

Lowercase tags = HTML elements. Capitalized/dot notation = components.

```svelte
<script>
	import Widget from './Widget.svelte';
</script>

<div>
	<Widget />
</div>
```

## Element Attributes

Attributes work like HTML. Values can contain or be JavaScript expressions.

```svelte
<input type=checkbox />
<a href="page/{p}">page {p}</a>
<button disabled={!clickable}>...</button>
```

**Boolean attributes:** Included if truthy, excluded if falsy.
**Other attributes:** Included unless nullish (`null`/`undefined`).

```svelte
<input required={false} placeholder="This input field is not required" />
<div title={null}>This div has no title attribute</div>
```

**Shorthand:** `{name}` replaces `name={name}`.

```svelte
<button {disabled}>...</button>
```

## Component Props

Same rules as attributes. Use shorthand when name matches value.

```svelte
<Widget foo={bar} answer={42} text="hello" />
```

## Spread Attributes

Pass multiple attributes/props at once. Order matters for precedence.

```svelte
<Widget a="b" {...things} c="d" />
```

## Events

Event attributes start with `on`. Case sensitive (`onclick` ≠ `onClick`).

```svelte
<button onclick={() => console.log('clicked')}>click me</button>
```

- Shorthand and spread work: `<button {onclick}>` or `<button {...events}>`
- Fire after bindings (e.g., `oninput` after `bind:value`)
- `ontouchstart`/`ontouchmove` are passive for performance

### Event Delegation

Svelte delegates certain events to app root for performance. 

**Gotchas:**
- Manual dispatch needs `{ bubbles: true }`
- Avoid `stopPropagation` with `addEventListener` directly
- Use `on` from `svelte/events` instead of `addEventListener`

**Delegated events:** `beforeinput`, `click`, `change`, `dblclick`, `contextmenu`, `focusin`, `focusout`, `input`, `keydown`, `keyup`, `mousedown`, `mousemove`, `mouseout`, `mouseover`, `mouseup`, `pointerdown`, `pointermove`, `pointerout`, `pointerover`, `pointerup`, `touchend`, `touchmove`, `touchstart`

## Text Expressions

JavaScript in curly braces. `null`/`undefined` omitted, others coerced to strings.

```svelte
<h1>Hello {name}!</h1>
<p>{a} + {b} = {a + b}.</p>

<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>
```

**HTML entities for braces:** `&lbrace;` `&lcub;` `&#123;` for `{`, `&rbrace;` `&rcub;` `&#125;` for `}`

**Render HTML (escaped by default):**

```svelte
{@html potentiallyUnsafeHtmlString}
```

> Escape strings to prevent XSS attacks.

## Comments

HTML comments work. `svelte-ignore` disables warnings for next markup block.

```svelte

<input bind:value={name} autofocus />
```

`@component` comments show on hover in other files.

````svelte

<script>
	let { name } = $props();
</script>

<main>
	<h1>
		Hello, {name}
	</h1>
</main>
````

## docs/svelte/03-template-syntax/02-if.md

# {#if ...}

Conditionally render content.

## Syntax

```svelte
{#if expression}...{/if}
{#if expression}...{:else if expression}...{/if}
{#if expression}...{:else}...{/if}
```

## Examples

```svelte
{#if answer === 42}
	<p>what was the question?</p>
{/if}
```

```svelte
{#if porridge.temperature > 100}
	<p>too hot!</p>
{:else if 80 > porridge.temperature}
	<p>too cold!</p>
{:else}
	<p>just right!</p>
{/if}
```

**Note:** Blocks can wrap elements or text within elements.

## docs/svelte/03-template-syntax/03-each.md

# {#each ...}

Iterate over arrays, array-like objects (with `length`), or iterables (Map, Set). Internally converted to arrays with `Array.from`. `null`/`undefined` treated as empty arrays.

## Basic syntax

```svelte
{#each items as item}
	<li>{item.name} x {item.qty}</li>
{/each}
```

## With index

```svelte
{#each items as item, i}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}
```

## Keyed each blocks

Use keys to intelligently update lists (insert/move/delete items) instead of updating in place. Keys should be unique identifiers (strings/numbers recommended).

```svelte
{#each items as item (item.id)}
	<li>{item.name} x {item.qty}</li>
{/each}

{#each items as item, i (item.id)}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}
```

## Destructuring

```svelte
{#each items as { id, name, qty }, i (id)}
	<li>{i + 1}: {name} x {qty}</li>
{/each}

{#each objects as { id, ...rest }}
	<li><span>{id}</span><MyComponent {...rest} /></li>
{/each}

{#each items as [id, ...rest]}
	<li><span>{id}</span><MyComponent values={rest} /></li>
{/each}
```

## Without item (render n times)

```svelte
<!file: App.svelte>
<div class="chess-board">
	{#each { length: 8 }, rank}
		{#each { length: 8 }, file}
			<div class:black={(rank + file) % 2 === 1}></div>
		{/each}
	{/each}
</div>

<style>
	.chess-board {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: repeat(8, 1fr);
		border: 1px solid black;
		aspect-ratio: 1;

		.black {
			background: black;
		}
	}
</style>
```

## Else blocks

Rendered when list is empty.

```svelte
{#each todos as todo}
	<p>{todo.text}</p>
{:else}
	<p>No tasks today!</p>
{/each}
```

## docs/svelte/03-template-syntax/04-key.md

# {#key ...}

```svelte
{#key expression}...{/key}
```

Destroys and recreates contents when expression changes.

**Reinstantiate components:**
```svelte
{#key value}
	<Component />
{/key}
```

**Replay transitions on value change:**
```svelte
{#key value}
	<div transition:fade>{value}</div>
{/key}
```

## docs/svelte/03-template-syntax/05-await.md

# {#await ...}

Branches on Promise states: pending, fulfilled, rejected.

## Syntax

```svelte
<!copy: false>
{#await expression}...{:then name}...{:catch name}...{/await}
{#await expression}...{:then name}...{/await}
{#await expression then name}...{/await}
{#await expression catch name}...{/await}
```

## Examples

**Full syntax:**
```svelte
{#await promise}
	<p>waiting for the promise to resolve...</p>
{:then value}
	<p>The value is {value}</p>
{:catch error}
	<p>Something went wrong: {error.message}</p>
{/await}
```

**Omit catch:**
```svelte
{#await promise}
	<p>waiting for the promise to resolve...</p>
{:then value}
	<p>The value is {value}</p>
{/await}
```

**Omit pending:**
```svelte
{#await promise then value}
	<p>The value is {value}</p>
{/await}
```

**Only error state:**
```svelte
{#await promise catch error}
	<p>The error is {error}</p>
{/await}
```

## Gotchas

- **SSR**: Only pending branch renders on server. If expression isn't a Promise, only `:then` renders (including SSR).
- **Lazy components**: Use with `import()`:
  ```svelte
  {#await import('./Component.svelte') then { default: Component }}
  	<Component />
  {/await}
  ```

## docs/svelte/03-template-syntax/06-snippet.md

# {#snippet ...}

## Syntax

```svelte
{#snippet name()}...{/snippet}
{#snippet name(param1, param2, paramN)}...{/snippet}
```

Snippets create reusable markup chunks. Use with `{@render}` tags.

## Basic Usage

```svelte
{#snippet figure(image)}
	<figure>
		<img src={image.src} alt={image.caption} width={image.width} height={image.height} />
		<figcaption>{image.caption}</figcaption>
	</figure>
{/snippet}

{#each images as image}
	{#if image.href}
		<a href={image.href}>
			{@render figure(image)}
		</a>
	{:else}
		{@render figure(image)}
	{/if}
{/each}
```

- Support arbitrary parameters with defaults
- Support destructuring
- No rest parameters

## Scope

Snippets reference values from outer scope:

```svelte
<script>
	let { message = `it's great to see you!` } = $props();
</script>

{#snippet hello(name)}
	<p>hello {name}! {message}!</p>
{/snippet}

{@render hello('alice')}
{@render hello('bob')}
```

Visible to siblings and their children. Can reference themselves/each other:

```svelte
{#snippet blastoff()}
	<span>🚀</span>
{/snippet}

{#snippet countdown(n)}
	{#if n > 0}
		<span>{n}...</span>
		{@render countdown(n - 1)}
	{:else}
		{@render blastoff()}
	{/if}
{/snippet}

{@render countdown(10)}
```

## Passing to Components

### Explicit props

```svelte
<!-- App.svelte -->
<script>
	import Table from './Table.svelte';
	const fruits = [
		{ name: 'apples', qty: 5, price: 2 },
		{ name: 'bananas', qty: 10, price: 1 },
		{ name: 'cherries', qty: 20, price: 0.5 }
	];
</script>

{#snippet header()}
	<th>fruit</th>
	<th>qty</th>
	<th>price</th>
	<th>total</th>
{/snippet}

{#snippet row(d)}
	<td>{d.name}</td>
	<td>{d.qty}</td>
	<td>{d.price}</td>
	<td>{d.qty * d.price}</td>
{/snippet}

<Table data={fruits} {header} {row}/>
```

```svelte
<!-- Table.svelte -->
<script>
	let { data, header, row } = $props();
</script>

<table>
	{#if header}
		<thead>
			<tr>{@render header()}</tr>
		</thead>
	{/if}
	<tbody>
		{#each data as d}
			<tr>{@render row(d)}</tr>
		{/each}
	</tbody>
</table>
```

### Implicit props

Snippets declared inside component tags become props automatically:

```svelte
<!-- App.svelte -->
<Table data={fruits}>
	{#snippet header()}
		<th>fruit</th>
		<th>qty</th>
		<th>price</th>
		<th>total</th>
	{/snippet}

	{#snippet row(d)}
		<td>{d.name}</td>
		<td>{d.qty}</td>
		<td>{d.price}</td>
		<td>{d.qty * d.price}</td>
	{/snippet}
</Table>
```

### Implicit `children` snippet

Non-snippet content becomes `children` snippet:

```svelte
<!-- App.svelte -->
<Button>click me</Button>
```

```svelte
<!-- Button.svelte -->
<script>
	let { children } = $props();
</script>

<button>{@render children()}</button>
```

> Avoid props named `children` if component has content inside tags

### Optional snippets

```svelte
<script>
    let { children } = $props();
</script>

{@render children?.()}
```

Or with fallback:

```svelte
{#if children}
    {@render children()}
{:else}
    fallback content
{/if}
```

## TypeScript

```svelte
<script lang="ts">
	import type { Snippet } from 'svelte';

	interface Props {
		data: any[];
		children: Snippet;
		row: Snippet<[any]>;
	}

	let { data, children, row }: Props = $props();
</script>
```

With generics:

```svelte
<script lang="ts" generics="T">
	import type { Snippet } from 'svelte';

	let {
		data,
		children,
		row
	}: {
		data: T[];
		children: Snippet;
		row: Snippet<[T]>;
	} = $props();
</script>
```

## Exporting Snippets

Top-level snippets can be exported from `<script module>` (requires Svelte 5.5+):

```svelte
<!-- snippets.svelte -->
<script module>
	export { add };
</script>

{#snippet add(a, b)}
	{a} + {b} = {a + b}
{/snippet}
```

```svelte
<!-- App.svelte -->
<script>
	import { add } from './snippets.svelte';
</script>

{@render add(1, 2)}
```

> Must not reference non-module `<script>` declarations

## Programmatic Snippets

Use [`createRawSnippet`](svelte#createRawSnippet) API for advanced cases.

## Migration

Snippets replace Svelte 4 slots (now deprecated).

## docs/svelte/03-template-syntax/07-@render.md

# {@render ...}

Renders a [snippet](snippet).

```svelte
{#snippet sum(a, b)}
	<p>{a} + {b} = {a + b}</p>
{/snippet}

{@render sum(1, 2)}
{@render sum(3, 4)}
{@render sum(5, 6)}
```

Expression can be any JavaScript:

```svelte
{@render (cool ? coolSnippet : lameSnippet)()}
```

## Optional snippets

Use optional chaining for potentially undefined snippets (e.g., props):

```svelte
{@render children?.()}
```

Or `{#if}` with fallback:

```svelte
{#if children}
	{@render children()}
{:else}
	<p>fallback content</p>
{/if}
```

## docs/svelte/03-template-syntax/08-@html.md

# {@html ...}

Injects raw HTML into component:

```svelte
<article>
	{@html content}
</article>
```

> [!NOTE] Escape strings or use trusted values only to prevent XSS attacks. Never render unsanitized content.

**Gotchas:**
- Expression must be valid standalone HTML (can't split tags)
- Does not compile Svelte code

## Styling

`{@html}` content is invisible to scoped styles. Use `:global` modifier:

```svelte
<style>
	article:global{
		a { color: hotpink }
		img { width: 100% }
	}
</style>
```

## docs/svelte/03-template-syntax/09-@attach.md

# {@attach ...}

Attachments are functions that run in an effect when an element mounts or when state updates. Can return cleanup function.

## Basic usage

```svelte
<script>
	/** @type {import('svelte/attachments').Attachment} */
	function myAttachment(element) {
		console.log(element.nodeName); // 'DIV'

		return () => {
			console.log('cleaning up');
		};
	}
</script>

<div {@attach myAttachment}>...</div>
```

Multiple attachments per element allowed.

## Attachment factories

Functions that return attachments. Re-run when dependencies change:

```svelte
<script>
	import tippy from 'tippy.js';

	let content = $state('Hello!');

	/**
	 * @param {string} content
	 * @returns {import('svelte/attachments').Attachment}
	 */
	function tooltip(content) {
		return (element) => {
			const tooltip = tippy(element, { content });
			return tooltip.destroy;
		};
	}
</script>

<input bind:value={content} />

<button {@attach tooltip(content)}>
	Hover me
</button>
```

## Inline attachments

```svelte
<canvas
	width={32}
	height={32}
	{@attach (canvas) => {
		const context = canvas.getContext('2d');

		$effect(() => {
			context.fillStyle = color;
			context.fillRect(0, 0, canvas.width, canvas.height);
		});
	}}
></canvas>
```

Nested effect runs on `color` changes; outer effect runs once.

## Conditional attachments

Falsy values = no attachment:

```svelte
<div {@attach enabled && myAttachment}>...</div>
```

## With components

Attachments on components create Symbol props. Spread props to pass to elements:

```svelte
<!file: Button.svelte>
<script>
	/** @type {import('svelte/elements').HTMLButtonAttributes} */
	let { children, ...props } = $props();
</script>

<button {...props}>
	{@render children?.()}
</button>
```

```svelte
<!file: App.svelte>
<script>
	import tippy from 'tippy.js';
	import Button from './Button.svelte';

	let content = $state('Hello!');

	/**
	 * @param {string} content
	 * @returns {import('svelte/attachments').Attachment}
	 */
	function tooltip(content) {
		return (element) => {
			const tooltip = tippy(element, { content });
			return tooltip.destroy;
		};
	}
</script>

<input bind:value={content} />

<Button {@attach tooltip(content)}>
	Hover me
</Button>
```

## Controlling re-runs

Attachments are fully reactive: `{@attach foo(bar)}` re-runs on changes to `foo`, `bar`, or any state read inside.

To prevent expensive re-runs, pass data via function and read in child effect:

```js
// @errors: 7006 2304 2552
function foo(getBar) {
	return (node) => {
		veryExpensiveSetupWork(node);

		$effect(() => {
			update(node, getBar());
		});
	}
}
```

## Utilities

- [`createAttachmentKey`](svelte-attachments#createAttachmentKey): Add attachments to spread objects
- [`fromAction`](svelte-attachments#fromAction): Convert actions to attachments

## docs/svelte/03-template-syntax/10-@const.md

# {@const ...}

**LEGACY:** Use `{const x = $derived(y)}` instead.

Defines local constant. Only allowed as immediate child of blocks (`{#if}`, `{#each}`, `{#snippet}`), `<Component />`, or `<svelte:boundary>`.

```svelte
{#each boxes as box}
	{@const area = box.width * box.height}
	{box.width} * {box.height} = {area}
{/each}
```

## docs/svelte/03-template-syntax/11-@debug.md

# {@debug ...}

Logs variable values when they change and pauses execution in devtools.

```svelte
<script>
	let user = {
		firstname: 'Ada',
		lastname: 'Lovelace'
	};
</script>

{@debug user}

<h1>Hello {user.firstname}!</h1>
```

## Usage

**Accepts comma-separated variable names only** (not expressions):

```svelte
{@debug user}
{@debug user1, user2, user3}
```

**Invalid** (expressions not allowed):
```svelte
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}
```

**No arguments** = triggers on any state change:
```svelte
{@debug}
```

## docs/svelte/03-template-syntax/11-declaration-tags.md

# {let/const ...}

Declaration tags define local variables inside markup:

```svelte
<!file: App.svelte>
<script>
	let boxes = [{ width: 10, height: 10 }, { width: 15, height: 15 }];
</script>

{#each boxes as box}
	{const area = box.width * box.height}
	{const label = `${box.width} ⨉ ${box.height} = ${area}`}

	<p>{label}</p>
{/each}
```

> Available since Svelte 5.56. Replaces legacy `{@const ...}` syntax.

## With Runes

Use `$state` and `$derived` for reactive values:

```svelte
<!file: App.svelte>
<script>
	let user = $state({ name: 'Svelte' });
	let editing = $state(false);
</script>

<p>Hello {user.name}</p>
<button onclick={() => editing = true}>edit name</button>

{#if editing}
	{let name = $state(user.name)}
	{const greeting = $derived(`Hello ${name}`)}

	<hr>
	<input bind:value={name} />
	<p>{greeting}</p>

	<button onclick={() => {
		user.name = name;
		editing = false;
	}}>save</button>
{/if}
```

## Scoping

Declaration tags follow lexical scoping - visible to siblings and their children:

```svelte
<!file: App.svelte>
{const hello = 'hello'}
{hello} 
<div>
	{const hello = 'hi'}
	{hello} 
	<div>
		{hello} 
	</div>
</div>
{hello} 
```

## docs/svelte/03-template-syntax/12-bind.md

# bind:

Data flows down (parent → child). `bind:` flows data up (child → parent).

Syntax: `bind:property={expression}` or `bind:property` (shorthand when names match)

```svelte
<input bind:value={value} />
<input bind:value />
```

Svelte creates event listeners to update bound values. Most bindings are two-way; some are readonly.

## Function bindings

Use `bind:property={get, set}` for validation/transformation:

```svelte
<input bind:value={
	() => value,
	(v) => value = v.toLowerCase()}
/>
```

For readonly bindings, set `get` to `null`:

```svelte
<div
	bind:clientWidth={null, redraw}
	bind:clientHeight={null, redraw}
>...</div>
```

## `<input bind:value>`

Binds input's `value` property:

```svelte
<script>
	let message = $state('hello');
</script>

<input bind:value={message} />
<p>{message}</p>
```

Numeric inputs (`type="number"` or `type="range"`) coerce to number:

```svelte
<!file: App.svelte>
<script>
	let a = $state(1);
	let b = $state(2);
</script>

<label>
	<input type="number" bind:value={a} min="0" max="10" />
	<input type="range" bind:value={a} min="0" max="10" />
</label>

<label>
	<input type="number" bind:value={b} min="0" max="10" />
	<input type="range" bind:value={b} min="0" max="10" />
</label>

<p>{a} + {b} = {a + b}</p>
```

Empty/invalid value is `undefined`.

Since 5.6.0: `defaultValue` reverts on form reset (unless binding is `null`/`undefined`):

```svelte
<script>
	let value = $state('');
</script>

<form>
	<input bind:value defaultValue="not the empty string">
	<input type="reset" value="Reset">
</form>
```

## `<input bind:checked>`

For checkboxes:

```svelte
<label>
	<input type="checkbox" bind:checked={accepted} />
	Accept terms and conditions
</label>
```

Since 5.6.0: `defaultChecked` reverts on form reset:

```svelte
<script>
	let checked = $state(true);
</script>

<form>
	<input type="checkbox" bind:checked defaultChecked={true}>
	<input type="reset" value="Reset">
</form>
```

## `<input bind:indeterminate>`

For indeterminate checkbox state:

```svelte
<script>
	let checked = $state(false);
	let indeterminate = $state(true);
</script>

<form>
	<input type="checkbox" bind:checked bind:indeterminate>

	{#if indeterminate}
		waiting...
	{:else if checked}
		checked
	{:else}
		unchecked
	{/if}
</form>
```

## `<input bind:group>`

For radio/checkbox groups:

```svelte
<!file: App.svelte>
<script>
	let tortilla = $state('Plain');

	/** @type {string[]} */
	let fillings = $state([]);
</script>

<h1>Customize your burrito</h1>


<label><input type="radio" bind:group={tortilla} value="Plain" /> Plain</label>
<label><input type="radio" bind:group={tortilla} value="Whole wheat" /> Whole wheat</label>
<label><input type="radio" bind:group={tortilla} value="Spinach" /> Spinach</label>


<label><input type="checkbox" bind:group={fillings} value="Rice" /> Rice</label>
<label><input type="checkbox" bind:group={fillings} value="Beans" /> Beans</label>
<label><input type="checkbox" bind:group={fillings} value="Cheese" /> Cheese</label>
<label><input type="checkbox" bind:group={fillings} value="Guac (extra)" /> Guac (extra)</label>

<p>Tortilla: {tortilla}</p>
<p>Fillings: {fillings.join(', ') || 'None'}</p>

<style>
	label {
		display: block;
	}
</style>
```

**Note:** Only works if inputs are in same component.

## `<input bind:files>`

For `type="file"`:

```svelte
<script>
	let files = $state();

	function clear() {
		files = new DataTransfer().files; // null or undefined does not work
	}
</script>

<label for="avatar">Upload a picture:</label>
<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
<button onclick={clear}>clear</button>
```

`FileList` is readonly. Create new `DataTransfer` to modify.

## `<select bind:value>`

Binds to selected `<option>` value (any type, not just strings):

```svelte
<select bind:value={selected}>
	<option value={a}>a</option>
	<option value={b}>b</option>
	<option value={c}>c</option>
</select>
```

`<select multiple>` binds to array:

```svelte
<select multiple bind:value={fillings}>
	<option value="Rice">Rice</option>
	<option value="Beans">Beans</option>
	<option value="Cheese">Cheese</option>
	<option value="Guac (extra)">Guac (extra)</option>
</select>
```

Omit `value` if it matches text:

```svelte
<select multiple bind:value={fillings}>
	<option>Rice</option>
	<option>Beans</option>
	<option>Cheese</option>
	<option>Guac (extra)</option>
</select>
```

Use `selected` attribute for default (reverts on form reset):

```svelte
<select bind:value={selected}>
	<option value={a}>a</option>
	<option value={b} selected>b</option>
	<option value={c}>c</option>
</select>
```

## `<audio>`

**Two-way bindings:**
- `currentTime`, `playbackRate`, `paused`, `volume`, `muted`

**Readonly bindings:**
- `duration`, `buffered`, `seekable`, `seeking`, `ended`, `readyState`, `played`

```svelte
<audio src={clip} bind:duration bind:currentTime bind:paused></audio>
```

## `<video>`

Same as `<audio>` plus readonly `videoWidth` and `videoHeight`.

## `<img>`

**Readonly bindings:**
- `naturalWidth`, `naturalHeight`

## `<details bind:open>`

```svelte
<details bind:open={isOpen}>
	<summary>How do you comfort a JavaScript bug?</summary>
	<p>You console it.</p>
</details>
```

## Contenteditable bindings

For `contenteditable` elements:
- `innerHTML`, `innerText`, `textContent`

```svelte
<div contenteditable="true" bind:innerHTML={html}></div>
```

## Dimensions

**Readonly bindings** (via `ResizeObserver`):
- `clientWidth`, `clientHeight`, `offsetWidth`, `offsetHeight`
- `contentRect`, `contentBoxSize`, `borderBoxSize`, `devicePixelContentBoxSize`

```svelte
<div bind:offsetWidth={width} bind:offsetHeight={height}>
	<Chart {width} {height} />
</div>
```

**Note:** `display: inline` elements (except intrinsic dimensions like `<img>`) can't be observed. Use `inline-block` or similar.

## bind:this

Get DOM node reference (available after mount):

```svelte
<script>
	/** @type {HTMLCanvasElement} */
	let canvas;

	$effect(() => {
		const ctx = canvas.getContext('2d');
		drawStuff(ctx);
	});
</script>

<canvas bind:this={canvas}></canvas>
```

For component instances:

```svelte
<!file: App.svelte>
<ShoppingCart bind:this={cart} />

<button onclick={() => cart.empty()}> Empty shopping cart </button>
```

```svelte
<!file: ShoppingCart.svelte>
<script>
	// All instance exports are available on the instance object
	export function empty() {
		// ...
	}
</script>
```

## bind:property (components)

Bind to component props:

```svelte
<Keypad bind:value={pin} />
```

Mark props as bindable with `$bindable`:

```svelte
<script>
	let { readonlyProperty, bindableProperty = $bindable() } = $props();
</script>
```

Bindable props _can_ use `bind:`, not _must_.

With fallback (only applies when not bound):

```svelte
<script>
	let { bindableProperty = $bindable('fallback value') } = $props();
</script>
```

When bound with fallback, parent must provide non-`undefined` value or runtime error occurs.

## docs/svelte/03-template-syntax/13-use.md

# use: (Actions)

> [!NOTE]
> Svelte 5.29+: Consider using [attachments](@attach) instead - more flexible and composable.

Actions are functions called when an element mounts. Use `use:` directive with `$effect` for cleanup:

```svelte
<script>
	/** @type {import('svelte/action').Action} */
	function myaction(node) {
		// node mounted in DOM

		$effect(() => {
			// setup

			return () => {
				// teardown
			};
		});
	}
</script>

<div use:myaction>...</div>
```

## With Arguments

```svelte
<script>
	/** @type {import('svelte/action').Action} */
	function myaction(node, data) {
		// ...
	}
</script>

<div use:myaction={data}>...</div>
```

**Key:** Action called once on mount (not SSR). Does NOT re-run if argument changes.

## Typing

`Action<NodeType, Parameter, CustomEvents>`:

```svelte
<script>
	/**
	 * @type {import('svelte/action').Action<
	 * 	HTMLDivElement,
	 * 	undefined,
	 * 	{
	 * 		onswiperight: (e: CustomEvent) => void;
	 * 		onswipeleft: (e: CustomEvent) => void;
	 * 	}
	 * >}
	 */
	function gestures(node) {
		$effect(() => {
			// ...
			node.dispatchEvent(new CustomEvent('swipeleft'));
			// ...
			node.dispatchEvent(new CustomEvent('swiperight'));
		});
	}
</script>

<div
	use:gestures
	onswipeleft={next}
	onswiperight={prev}
>...</div>
```

## docs/svelte/03-template-syntax/14-transition.md

# transition:

Transitions trigger when elements enter/leave DOM due to state changes. All elements in a transitioning block stay in DOM until all transitions complete.

`transition:` = bidirectional (smoothly reversible).

```svelte
<script>
	import { fade } from 'svelte/transition';

	let visible = $state(false);
</script>

<button onclick={() => visible = !visible}>toggle</button>

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

## Local vs Global

**Local** (default): plays only when own block created/destroyed.
**Global**: plays when any parent block changes.

```svelte
{#if x}
	{#if y}
		<p transition:fade>fades in and out only when y changes</p>

		<p transition:fade|global>fades in and out when x or y change</p>
	{/if}
{/if}
```

## Built-in Transitions

Import from [`svelte/transition`](svelte-transition).

## Parameters

```svelte
{#if visible}
	<div transition:fade={{ duration: 2000 }}>fades in and out over two seconds</div>
{/if}
```

## Custom Transitions

```js
transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {
	delay?: number,
	duration?: number,
	easing?: (t: number) => number,
	css?: (t: number, u: number) => string,
	tick?: (t: number, u: number) => void
}
```

- `t`: `0` to `1` after easing (_in_: `0→1`, _out_: `1→0`)
- `u`: `1 - t`
- `css`: generates web animation keyframes (preferred - runs off main thread)
- `tick`: called during transition (use only if `css` not possible)

```svelte
<script>
	import { elasticOut } from 'svelte/easing';

	/** @type {boolean} */
	export let visible;

	/**
	 * @param {HTMLElement} node
	 * @param {{ delay?: number, duration?: number, easing?: (t: number) => number }} params
	 */
	function whoosh(node, params) {
		const existingTransform = getComputedStyle(node).transform.replace('none', '');

		return {
			delay: params.delay || 0,
			duration: params.duration || 400,
			easing: params.easing || elasticOut,
			css: (t, u) => `transform: ${existingTransform} scale(${t})`
		};
	}
</script>

{#if visible}
	<div in:whoosh>whooshes in</div>
{/if}
```

**With `tick`:**

```svelte
<script>
	export let visible = false;

	/**
	 * @param {HTMLElement} node
	 * @param {{ speed?: number }} params
	 */
	function typewriter(node, { speed = 1 }) {
		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;

		if (!valid) {
			throw new Error(`This transition only works on elements with a single text node child`);
		}

		const text = node.textContent;
		const duration = text.length / (speed * 0.01);

		return {
			duration,
			tick: (t) => {
				const i = ~~(text.length * t);
				node.textContent = text.slice(0, i);
			}
		};
	}
</script>

{#if visible}
	<p in:typewriter={{ speed: 1 }}>The quick brown fox jumps over the lazy dog</p>
{/if}
```

**Returning function:** Called in next microtask, enables crossfade effects.

**Third argument `options`:** Contains `direction` (`'in'`, `'out'`, or `'both'`).

## Events

- `introstart`
- `introend`
- `outrostart`
- `outroend`

```svelte
{#if visible}
	<p
		transition:fly={{ y: 200, duration: 2000 }}
		onintrostart={() => (status = 'intro started')}
		onoutrostart={() => (status = 'outro started')}
		onintroend={() => (status = 'intro ended')}
		onoutroend={() => (status = 'outro ended')}
	>
		Flies in and out
	</p>
{/if}
```

## docs/svelte/03-template-syntax/15-in-and-out.md

# in: and out:

`in:` and `out:` directives work like [`transition:`](transition) but are **not bidirectional** — they don't reverse if interrupted. If an out transition is aborted, transitions restart from scratch.

```svelte
<script>
  import { fade, fly } from 'svelte/transition';

  let visible = $state(false);
</script>

<label>
  <input type="checkbox" bind:checked={visible}>
  visible
</label>

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

## docs/svelte/03-template-syntax/16-animate.md

# animate:

Triggers when contents of a keyed each block are re-ordered. Only runs on index changes, not add/remove. Must be on immediate child of keyed each block.

## Basic Usage

```svelte
{#each list as item, index (item)}
	<li animate:flip>{item}</li>
{/each}
```

## Parameters

```svelte
{#each list as item, index (item)}
	<li animate:flip={{ delay: 500 }}>{item}</li>
{/each}
```

## Custom Animation Functions

**Signature:**
```js
animation = (node: HTMLElement, { from: DOMRect, to: DOMRect }, params: any) => {
	delay?: number,
	duration?: number,
	easing?: (t: number) => number,
	css?: (t: number, u: number) => string,
	tick?: (t: number, u: number) => void
}
```

- `from`: DOMRect at start position
- `to`: DOMRect at end position
- `t`: easing-applied value from 0→1
- `u`: equals `1 - t`

**CSS method (preferred - runs off main thread):**

```svelte
<script>
	import { cubicOut } from 'svelte/easing';

	/**
	 * @param {HTMLElement} node
	 * @param {{ from: DOMRect; to: DOMRect }} states
	 * @param {any} params
	 */
	function whizz(node, { from, to }, params) {
		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`
		};
	}
</script>

{#each list as item, index (item)}
	<div animate:whizz>{item}</div>
{/each}
```

**Tick method (runs during animation):**

```svelte
<script>
	import { cubicOut } from 'svelte/easing';

	/**
	 * @param {HTMLElement} node
	 * @param {{ from: DOMRect; to: DOMRect }} states
	 * @param {any} params
	 */
	function whizz(node, { from, to }, params) {
		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			tick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })
		};
	}
</script>

{#each list as item, index (item)}
	<div animate:whizz>{item}</div>
{/each}
```

> Prefer `css` over `tick` - web animations run off main thread, preventing jank.

## docs/svelte/03-template-syntax/17-style.md

# style:

Shorthand for setting styles on elements.

## Basic Usage

```svelte
<div style:color="red">...</div>
<!-- equivalent to -->
<div style="color: red;">...</div>
```

## Dynamic Values

```svelte
<div style:color={myColor}>...</div>
```

## Shorthand

```svelte
<div style:color>...</div>
```

## Multiple Styles

```svelte
<div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div>
```

## Important Modifier

```svelte
<div style:color|important="red">...</div>
```

## Precedence

`style:` directives always take precedence over `style` attributes, even over `!important`:

```svelte
<div style:color="red" style="color: blue">This will be red</div>
<div style:color="red" style="color: blue !important">This will still be red</div>
```

## CSS Custom Properties

```svelte
<div style:--columns={columns}>...</div>
```

## docs/svelte/03-template-syntax/18-class.md

# class

Two ways to set classes: `class` attribute and `class:` directive.

## Attributes

Basic usage:

```svelte
<div class={large ? 'large' : 'small'}>...</div>
```

> **Note:** Falsy values are stringified (`class="false"`), except `undefined`/`null` which omit the attribute.

### Objects and arrays (Svelte 5.16+)

Uses [clsx](https://github.com/lukeed/clsx) internally.

**Object** - truthy keys are added:

```svelte
<script>
	let { cool } = $props();
</script>


<div class={{ cool, lame: !cool }}>...</div>
```

**Array** - truthy values combined:

```svelte

<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>
```

**Nested arrays/objects** - automatically flattened:

```svelte
<!file: Button.svelte>
<script>
	let props = $props();
</script>

<button {...props} class={['cool-button', props.class]}>
	{@render props.children?.()}
</button>
```

```svelte
<!file: App.svelte>
<script>
	import Button from './Button.svelte';
	let useTailwind = $state(false);
</script>

<Button
	onclick={() => useTailwind = true}
	class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
>
	Accept the inevitability of Tailwind
</Button>
```

**TypeScript** (Svelte 5.19+):

```svelte
<script lang="ts">
	import type { ClassValue } from 'svelte/elements';

	const props: { class: ClassValue } = $props();
</script>

<div class={['original', props.class]}>...</div>
```

## `class:` directive

Legacy conditional class syntax (pre-5.16):

```svelte

<div class={{ cool, lame: !cool }}>...</div>
<div class:cool={cool} class:lame={!cool}>...</div>
```

Shorthand when name matches value:

```svelte
<div class:cool class:lame={!cool}>...</div>
```

> **Note:** Prefer `class` attribute over `class:` - more powerful and composable.

## docs/svelte/03-template-syntax/19-await-expressions.md

# await

**Experimental feature (Svelte 5.36+)** - Opt in via config:

```js
/// file: svelte.config.js
export default {
	compilerOptions: {
		experimental: {
			async: true
		}
	}
};
```

Use `await` in three places:
- Top level of `<script>`
- Inside `$derived(...)`
- Inside markup

## Synchronized updates

State changes wait for async work to complete before UI updates, preventing inconsistent states:

```svelte
<script>
	let a = $state(1);
	let b = $state(2);

	async function add(a, b) {
		await new Promise((f) => setTimeout(f, 500));
		return a + b;
	}
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {await add(a, b)}</p>
```

Incrementing `a` won't show `2 + 2 = 3`, waits to show `2 + 2 = 4`.

## Concurrency

Independent `await` expressions run in parallel:

```svelte
<p>{await one(x)}</p>
<p>{await two(y)}</p>
```

Sequential `await` in `<script>` runs normally. Independent `$derived` update independently after initial creation:

```js
let a = $derived(await one(x));
let b = $derived(await two(y));
```

> [!NOTE] Expect [`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall) warning

## Loading states

**Placeholder UI**: Use `<svelte:boundary>` with `pending` snippet (shows on first load only)

**Subsequent updates**: Use `$effect.pending()` for spinners, validation indicators

**Wait for completion**: Use `settled()`:

```js
import { tick, settled } from 'svelte';

async function onclick() {
	updating = true;
	await tick();

	color = 'octarine';
	answer = 42;

	await settled();
	updating = false;
}
```

## Error handling

Errors bubble to nearest [error boundary](svelte-boundary).

## SSR

Await the `render()` call:

```js
/// file: server.js
import { render } from 'svelte/server';
import App from './App.svelte';

const { head, body } = await render(App);
```

`<svelte:boundary>` with `pending` renders the snippet during SSR. Other `await` expressions resolve before `render()` returns.

## Forking

`fork()` (5.42+) preloads async work:

```svelte
<script>
	import { fork } from 'svelte';
	import Menu from './Menu.svelte';

	let open = $state(false);

	/** @type {import('svelte').Fork | null} */
	let pending = null;

	function preload() {
		pending ??= fork(() => {
			open = true;
		});
	}

	function discard() {
		pending?.discard();
		pending = null;
	}
</script>

<button
	onfocusin={preload}
	onfocusout={discard}
	onpointerenter={preload}
	onpointerleave={discard}
	onclick={() => {
		pending?.commit();
		pending = null;
		open = true;
	}}
>open menu</button>

{#if open}
	<Menu onclose={() => open = false} />
{/if}
```

## Breaking changes

With `experimental.async: true`, block effects (`{#if}`, `{#each}`) run before `$effect.pre`/`beforeUpdate` in same component. Rarely causes issues if updating state inside effects (avoid this).

## docs/svelte/04-styling/01-scoped-styles.md

# Scoped Styles

## Basics

CSS in `<style>` is scoped by default via hash-based classes (e.g. `svelte-123xyz`).

```svelte
<style>
	p {
		/* this will only affect <p> elements in this component */
		color: burlywood;
	}
</style>
```

## Specificity

Scoped selectors get +0-1-0 specificity from the scoping class. Component `p` selector beats global `p` selector, even if global loads later.

Multiple scoping classes use `:where(.svelte-xyz123)` after the first to avoid further specificity increases.

## Scoped Keyframes

`@keyframes` names are hashed per-component. `animation` rules auto-adjusted.

```svelte
<style>
	.bouncy {
		animation: bounce 10s;
	}

	/* these keyframes are only accessible inside this component */
	@keyframes bounce {
		/* ... */
	}
</style>
```

## docs/svelte/04-styling/02-global-styles.md

# Global Styles

## :global(...)

Apply styles to a single selector globally:

```svelte
<style>
	:global(body) {
		/* applies to <body> */
		margin: 0;
	}

	div :global(strong) {
		/* applies to all <strong> elements, in any component,
		   that are inside <div> elements belonging
		   to this component */
		color: goldenrod;
	}

	p:global(.big.red) {
		/* applies to all <p> elements belonging to this component
		   with `class="big red"`, even if it is applied
		   programmatically (for example by a library) */
	}
</style>
```

**Global keyframes:** Prepend with `-global-`, which gets removed at compile time:

```svelte
<style>
	@keyframes -global-my-animation-name {
		/* code goes here */
	}
</style>
```

## :global {...}

Apply styles to multiple selectors globally:

```svelte
<style>
	:global {
		/* applies to every <div> in your application */
		div { ... }

		/* applies to every <p> in your application */
		p { ... }
	}

	.a :global {
		/* applies to every `.b .c .d` element, in any component,
		   that is inside an `.a` element in this component */
		.b .c .d {...}
	}
</style>
```

## docs/svelte/04-styling/03-custom-properties.md

# Custom Properties

## Passing CSS Custom Properties

Pass static and dynamic CSS custom properties to components:

```svelte
<Slider
	bind:value
	min={0}
	max={100}
	--track-color="black"
	--thumb-color="rgb({r} {g} {b})"
/>
```

## How It Works

Desugars to a wrapper with inline styles:

```svelte
<svelte-css-wrapper style="display: contents; --track-color: black; --thumb-color: rgb({r} {g} {b})">
	<Slider
		bind:value
		min={0}
		max={100}
	/>
</svelte-css-wrapper>
```

For SVG elements, uses `<g>` instead:

```svelte
<g style="--track-color: black; --thumb-color: rgb({r} {g} {b})">
	<Slider
		bind:value
		min={0}
		max={100}
	/>
</g>
```

## Using Custom Properties

Read custom properties with `var()` and provide fallbacks:

```svelte
<style>
	.track {
		background: var(--track-color, #aaa);
	}

	.thumb {
		background: var(--thumb-color, blue);
	}
</style>
```

## Inheritance

Custom properties inherit from parent elements. Define on `:root` in global stylesheet for app-wide availability.

> **Gotcha:** Wrapper element affects CSS selectors using `>` combinator targeting direct children.

## docs/svelte/04-styling/04-nested-style-elements.md

# Nested `<style>` elements

Only one top-level `<style>` per component. Nested `<style>` tags (inside elements/logic blocks) are inserted as-is into DOM with **no scoping or processing**.

```svelte
<div>
	<style>
		/* this style tag will be inserted as-is */
		div {
			/* this will apply to all `<div>` elements in the DOM */
			color: red;
		}
	</style>
</div>
```

## docs/svelte/05-special-elements/01-svelte-boundary.md

# `<svelte:boundary>`

```svelte
<svelte:boundary onerror={handler}>...</svelte:boundary>
```

Boundaries provide:
- UI for pending `await` expressions
- Error handling during rendering/effects with fallback UI

When boundary handles error, existing content is removed.

> Errors in event handlers or async work (outside rendering) are NOT caught.

## Properties

### `pending`

Shows until all `await` expressions inside resolve:

```svelte
<svelte:boundary>
	<p>{await delayed('hello!')}</p>

	{#snippet pending()}
		<p>loading...</p>
	{/snippet}
</svelte:boundary>
```

Only shows on first render. For subsequent updates, use [`$effect.pending()`]($effect#$effect.pending).

### `failed`

Renders when error thrown. Receives `error` and `reset` function:

```svelte
<svelte:boundary>
	<FlakyComponent />

	{#snippet failed(error, reset)}
		<button onclick={reset}>oops! try again</button>
	{/snippet}
</svelte:boundary>
```

Can pass explicitly: `<svelte:boundary {failed}>` or implicitly as shown above.

### `onerror`

Called with `error` and `reset`. Useful for error tracking or external state:

```svelte
<script>
	let error = $state(null);
	let reset = $state(() => {});

	function onerror(e, r) {
		error = e;
		reset = r;
	}
</script>

<svelte:boundary {onerror}>
	<FlakyComponent />
</svelte:boundary>

{#if error}
	<button onclick={() => {
		error = null;
		reset();
	}}>
		oops! try again
	</button>
{/if}
```

Errors in `onerror` bubble to parent boundary.

## `transformError`

Control server-side error handling with `transformError` in `render()`:

```js
// @errors: 1005
import { render } from 'svelte/server';
import App from './App.svelte';

const { head, body } = await render(App, {
	transformError: (error) => {
		// log the original error, with the stack trace...
		console.error(error);

		// ...and return a sanitized user-friendly error
		// to display in the `failed` snippet
		return {
			message: 'An error occurred!'
		};
	};
});
```

- Returns JSON-stringifiable object for `failed` snippet
- Object is serialized and used for hydration
- If throws, entire `render()` fails
- `onerror` called on hydration with deserialized error

> Redact sensitive info from server errors before sending to browser.

`mount()` and `hydrate()` also accept `transformError` (defaults to identity function).

## docs/svelte/05-special-elements/02-svelte-window.md

# `<svelte:window>`

```svelte
<svelte:window onevent={handler} />
<svelte:window bind:prop={value} />
```

Adds event listeners to `window` without manual cleanup. Auto-handles SSR. Must be at component top level (not inside blocks/elements).

## Event Listeners

```svelte
<script>
	function handleKeydown(event) {
		alert(`pressed the ${event.key} key`);
	}
</script>

<svelte:window onkeydown={handleKeydown} />
```

## Bindable Properties

**Readonly:**
- `innerWidth`, `innerHeight`
- `outerWidth`, `outerHeight`
- `online` (alias for `window.navigator.onLine`)
- `devicePixelRatio`

**Writable:**
- `scrollX`, `scrollY`

```svelte
<svelte:window bind:scrollY={y} />
```

> **Note:** Initial binding doesn't scroll the page (accessibility). Only subsequent changes trigger scrolling. To scroll on render, use `scrollTo()` in `$effect`.

## docs/svelte/05-special-elements/03-svelte-document.md

# `<svelte:document>`

```svelte
<svelte:document onevent={handler} />
<svelte:document bind:prop={value} />
```

Adds event listeners to `document` for events that don't fire on `window` (e.g., `visibilitychange`). Supports [attachments](@attach).

**Rules:**
- Must be at top level of component
- Cannot be inside blocks or elements

## Example

```svelte
<svelte:document onvisibilitychange={handleVisibilityChange} {@attach someAttachment} />
```

## Bindable Properties (readonly)

- `activeElement`
- `fullscreenElement`
- `pointerLockElement`
- `visibilityState`

## docs/svelte/05-special-elements/04-svelte-body.md

# `<svelte:body>`

```svelte
<svelte:body onevent={handler} />
```

Adds event listeners to `document.body` for events that don't fire on `window` (e.g., `mouseenter`, `mouseleave`). Also supports [actions](use).

**Constraints:**
- Must be at top level of component
- Cannot be inside blocks or elements

```svelte
<svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />
```

## docs/svelte/05-special-elements/05-svelte-head.md

# `<svelte:head>`

```svelte
<svelte:head>...</svelte:head>
```

Inserts elements into `document.head`. During SSR, `head` content is exposed separately from `body`.

**Rules:**
- Must be at top level of component
- Cannot be inside blocks or elements

**Example:**
```svelte
<svelte:head>
	<title>Hello world!</title>
	<meta name="description" content="This is where the description goes for SEO" />
</svelte:head>
```

## docs/svelte/05-special-elements/06-svelte-element.md

# `<svelte:element>`

```svelte
<svelte:element this={expression} />
```

Renders dynamic elements (e.g., from CMS). Properties and event listeners are applied to the element.

**Key points:**
- Only `bind:this` binding supported
- If `this` is nullish, nothing renders
- Void elements (e.g., `br`) cannot have children (throws error in dev)
- `this` must be valid DOM tag (not `#text` or `svelte:head`)

**Example:**

```svelte
<script>
	let tag = $state('hr');
</script>

<svelte:element this={tag}>
	This text cannot appear inside an hr element
</svelte:element>
```

**Explicit namespace:**

```svelte
<svelte:element this={tag} xmlns="http://www.w3.org/2000/svg" />
```

## docs/svelte/05-special-elements/07-svelte-options.md

# `<svelte:options>`

```svelte
<svelte:options option={value} />
```

Per-component compiler options.

## Options

- `runes={true}` — force runes mode
- `runes={false}` — force legacy mode
- `namespace="..."` — namespace: `"html"` (default), `"svg"`, or `"mathml"`
- `customElement={...}` — [custom element options](custom-elements#Component-options). String value used as `tag`
- `css="injected"` — inject styles inline: `<style>` tag in `head` (SSR) or via JS (client)

## Example

```svelte
<svelte:options customElement="my-custom-element" />
```

## Deprecated (Svelte 4, non-functional in runes mode)

- `immutable={true|false}` — referential equality checks
- `accessors={true|false}` — getters/setters for props

## docs/svelte/06-runtime/01-stores.md

# Stores

A store is an object that allows reactive access to a value via a store contract. The `svelte/store` module contains minimal store implementations.

## `$` prefix syntax

Access store values in components by prefixing with `$`. Svelte auto-subscribes/unsubscribes. Assignments to `$`-prefixed variables call the store's `.set` method.

Store must be declared at top level of component (not inside `if` blocks or functions).

```svelte
<script>
	import { writable } from 'svelte/store';

	const count = writable(0);
	console.log($count); // logs 0

	count.set(1);
	console.log($count); // logs 1

	$count = 2;
	console.log($count); // logs 2
</script>
```

## When to use stores

In Svelte 5, runes are preferred for most use cases:

**Use runes for:**
- Extracting logic (runes work in `.svelte.js`/`.svelte.ts` files)
- Shared state

```ts
/// file: state.svelte.js
export const userState = $state({
	name: 'name',
	/* ... */
});
```

```svelte
<!file: App.svelte>
<script>
	import { userState } from './state.svelte.js';
</script>

<p>User name: {userState.name}</p>
<button onclick={() => {
	userState.name = 'new name';
}}>
	change name
</button>
```

**Use stores for:**
- Complex asynchronous data streams
- Manual control over updates/subscriptions

## svelte/store

### `writable`

Store with `set` and `update` methods for external updates.

```js
/// file: store.js
import { writable } from 'svelte/store';

const count = writable(0);

count.subscribe((value) => {
	console.log(value);
}); // logs '0'

count.set(1); // logs '1'

count.update((n) => n + 1); // logs '2'
```

Optional second argument: function called when subscribers go from 0→1. Must return cleanup function called when subscribers go from 1→0.

```js
/// file: store.js
import { writable } from 'svelte/store';

const count = writable(0, () => {
	console.log('got a subscriber');
	return () => console.log('no more subscribers');
});

count.set(1); // does nothing

const unsubscribe = count.subscribe((value) => {
	console.log(value);
}); // logs 'got a subscriber', then '1'

unsubscribe(); // logs 'no more subscribers'
```

### `readable`

Store whose value cannot be set externally. Same second argument as `writable`.

```ts
import { readable } from 'svelte/store';

const time = readable(new Date(), (set) => {
	set(new Date());

	const interval = setInterval(() => {
		set(new Date());
	}, 1000);

	return () => clearInterval(interval);
});

const ticktock = readable('tick', (set, update) => {
	const interval = setInterval(() => {
		update((sound) => (sound === 'tick' ? 'tock' : 'tick'));
	}, 1000);

	return () => clearInterval(interval);
});
```

### `derived`

Derives store from one or more stores. Callback runs on first subscription and when dependencies change.

```ts
// @filename: ambient.d.ts
import { type Writable } from 'svelte/store';

declare global {
	const a: Writable<number>;
}

export {};

// @filename: index.ts
//cut
import { derived } from 'svelte/store';

const doubled = derived(a, ($a) => $a * 2);
```

Async with `set`/`update` (third arg is initial value):

```ts
// @filename: ambient.d.ts
import { type Writable } from 'svelte/store';

declare global {
	const a: Writable<number>;
}

export {};

// @filename: index.ts
// @errors: 18046 2769 7006
//cut
import { derived } from 'svelte/store';

const delayed = derived(
	a,
	($a, set) => {
		setTimeout(() => set($a), 1000);
	},
	2000
);

const delayedIncrement = derived(a, ($a, set, update) => {
	set($a);
	setTimeout(() => update((x) => x + 1), 1000);
	// every time $a produces a value, this produces two
	// values, $a immediately and then $a + 1 a second later
});
```

Return function for cleanup:

```ts
// @filename: ambient.d.ts
import { type Writable } from 'svelte/store';

declare global {
	const frequency: Writable<number>;
}

export {};

// @filename: index.ts
//cut
import { derived } from 'svelte/store';

const tick = derived(
	frequency,
	($frequency, set) => {
		const interval = setInterval(() => {
			set(Date.now());
		}, 1000 / $frequency);

		return () => {
			clearInterval(interval);
		};
	},
	2000
);
```

Multiple stores:

```ts
// @filename: ambient.d.ts
import { type Writable } from 'svelte/store';

declare global {
	const a: Writable<number>;
	const b: Writable<number>;
}

export {};

// @filename: index.ts

//cut
import { derived } from 'svelte/store';

const summed = derived([a, b], ([$a, $b]) => $a + $b);

const delayed = derived([a, b], ([$a, $b], set) => {
	setTimeout(() => set($a + $b), 1000);
});
```

### `readonly`

Makes a store readonly. Can still subscribe to changes.

```js
import { readonly, writable } from 'svelte/store';

const writableStore = writable(1);
const readableStore = readonly(writableStore);

readableStore.subscribe(console.log);

writableStore.set(2); // console: 2
// @errors: 2339
readableStore.set(2); // ERROR
```

### `get`

Retrieves store value without subscribing. Not recommended in hot code paths.

```ts
// @filename: ambient.d.ts
import { type Writable } from 'svelte/store';

declare global {
	const store: Writable<string>;
}

export {};

// @filename: index.ts
//cut
import { get } from 'svelte/store';

const value = get(store);
```

## Store contract

```ts
// @noErrors
store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }
```

Create custom stores by implementing:

1. `.subscribe` method that accepts subscription function, immediately calls it with current value, and calls all active subscriptions when value changes
2. `.subscribe` returns unsubscribe function that stops the subscription
3. Optional `.set` method that accepts new value and synchronously calls all active subscriptions (makes it a _writable store_)

**Note:** `.subscribe` can return object with `.unsubscribe` method (RxJS compatibility), but value will be `undefined` until first synchronous call.

## docs/svelte/06-runtime/02-context.md

# Context

Context allows components to access values from parent components without prop-drilling.

## `createContext`

Create a `[get, set]` pair to set context in parent and get in child:

```svelte
<!file: App.svelte>
<script>
	import Parent from './Parent.svelte';
	import Child from './Child.svelte';
</script>

<Parent>
	<Child />
</Parent>
```

```svelte
<!file: Parent.svelte>
<script>
	import { setUserContext } from './context';

	let { children } = $props();

	setUserContext({ name: 'world' });
</script>

{@render children()}
```

```svelte
<!file: Child.svelte>
<script>
	import { getUserContext } from './context';

	const user = getUserContext();
</script>

<h1>hello {user.name}, inside Child.svelte</h1>
```

```ts
/// file: context.ts
import { createContext } from 'svelte';

interface User {
	name: string;
}

export const [getUserContext, setUserContext] = createContext<User>();
```

> Added in v5.40. Use `setContext`/`getContext` in earlier versions.

## `setContext` and `getContext`

Alternative to `createContext`:

```svelte
<!file: Parent.svelte>
<script>
	import { setContext } from 'svelte';

	setContext('my-context', 'hello from Parent.svelte');
</script>
```

```svelte
<!file: Child.svelte>
<script>
	import { getContext } from 'svelte';

	const message = getContext('my-context');
</script>

<h1>{message}, inside Child.svelte</h1>
```

Key and value can be any JavaScript value. `createContext` preferred for type safety.

Also available: `hasContext`, `getAllContexts`.

## Context with State

Store reactive state in context:

```svelte
<!file: App.svelte>
<script>
	import { setCounter } from './context.ts';
	import Child from './Child.svelte';

	let counter = $state({
		count: 0
	});

	setCounter(counter);
</script>

<button onclick={() => counter.count += 1}>
	increment
</button>

<Child />
<Child />
<Child />

<button onclick={() => counter.count = 0}>
	reset
</button>
```

```svelte
<!file: Child.svelte>
<script>
	import { getCounter } from './context.ts';

	const counter = getCounter();
</script>

<p>{counter.count}</p>
```

```ts
/// file: context.ts
import { createContext } from 'svelte';

interface Counter {
	count: number;
}

export const [getCounter, setCounter] = createContext<Counter>();
```

**Gotcha:** Mutate properties, don't reassign:
- ✅ `counter.count = 0`
- ❌ `counter = { count: 0 }` (breaks reactivity)

For primitives, use functions (see Passing state into functions).

## Component Testing

Create wrapper to set context in tests (v5.49+):

```js
import { mount, unmount } from 'svelte';
import { expect, test } from 'vitest';
import { setUserContext } from './context';
import MyComponent from './MyComponent.svelte';

test('MyComponent', () => {
	function Wrapper(...args) {
		setUserContext({ name: 'Bob' });
		return MyComponent(...args);
	}

	const component = mount(Wrapper, {
		target: document.body
	});

	expect(document.body.innerHTML).toBe('<h1>Hello Bob!</h1>');

	unmount(component);
});
```

Works with `hydrate` and `render` too.

## Replacing Global State

Avoid global state modules in SSR:

```js
/// file: state.svelte.js
export const myGlobalState = $state({
	user: {
		// ...
	}
	// ...
});
```

Mutating during SSR can leak data between requests. Context is request-scoped and solves this.

## docs/svelte/06-runtime/03-lifecycle-hooks.md

# Lifecycle Hooks

Svelte 5 lifecycle = creation + destruction. No "before/after update" hooks — effects react to specific state changes, not component-wide updates.

## `onMount`

Runs when component mounts to DOM. Doesn't run on server.

```svelte
<script>
	import { onMount } from 'svelte';

	onMount(() => {
		console.log('the component has mounted');
	});
</script>
```

**Cleanup:** Return function from `onMount` to run on unmount.

```svelte
<script>
	import { onMount } from 'svelte';

	onMount(() => {
		const interval = setInterval(() => {
			console.log('beep');
		}, 1000);

		return () => clearInterval(interval);
	});
</script>
```

> Only works with synchronous functions. `async` functions return `Promise`.

## `onDestroy`

Runs before component unmounts. **Only lifecycle hook that runs server-side.**

```svelte
<script>
	import { onDestroy } from 'svelte';

	onDestroy(() => {
		console.log('the component is being destroyed');
	});
</script>
```

## `tick`

Returns promise that resolves after pending state changes apply.

```svelte
<script>
	import { tick } from 'svelte';

	$effect.pre(() => {
		console.log('the component is about to update');
		tick().then(() => {
				console.log('the component just updated');
		});
	});
</script>
```

## Deprecated: `beforeUpdate` / `afterUpdate`

**Don't use in runes mode.** Use `$effect.pre` (before DOM update) and `$effect` (after DOM update) instead — more granular, only react to relevant changes.

### Migration Example: Chat Autoscroll

`beforeUpdate` fires on _every_ update (even unrelated ones). `$effect.pre` only runs when `messages` changes.

```svelte
<script>
	import { tick } from 'svelte';

	let theme = $state('dark');
	let messages = $state([]);

	let viewport;

	$effect.pre(() => {
		messages;
		const autoscroll = viewport && viewport.offsetHeight + viewport.scrollTop > viewport.scrollHeight - 50;

		if (autoscroll) {
			tick().then(() => {
				viewport.scrollTo(0, viewport.scrollHeight);
			});
		}
	});

	function handleKeydown(event) {
		if (event.key === 'Enter') {
			const text = event.target.value;
			if (!text) return;

			messages = [...messages, text];
			event.target.value = '';
		}
	}

	function toggle() {
		theme = theme === 'dark' ? 'light' : 'dark';
	}
</script>

<div class:dark={theme === 'dark'}>
	<div bind:this={viewport}>
		{#each messages as message}
			<p>{message}</p>
		{/each}
	</div>

	<input onkeydown={handleKeydown} />

	<button onclick={toggle}> Toggle dark mode </button>
</div>
```

## docs/svelte/06-runtime/04-imperative-component-api.md

# Imperative Component API

## `mount`

Instantiates and mounts a component to a target element:

```js
// @errors: 2322
import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, {
	target: document.querySelector('#app'),
	props: { some: 'property' }
});
```

**Key points:**
- Can mount multiple components per page
- Effects (including `onMount`, actions) don't run during `mount`
- Use `flushSync()` to force pending effects to run

## `unmount`

Unmounts a component created with `mount` or `hydrate`:

```js
import { mount, unmount } from 'svelte';
import App from './App.svelte';

const app = mount(App, { target: document.body });

// later
unmount(app, { outro: true });
```

- `options.outro: true` plays transitions before removal
- Returns `Promise` that resolves after transitions (if `outro: true`) or immediately

## `render`

Server-only. Returns `body` and `head` HTML for SSR:

```js
// @errors: 2724 2305 2307
import { render } from 'svelte/server';
import App from './App.svelte';

const result = render(App, {
	props: { some: 'property' }
});
result.body; // HTML for somewhere in this <body> tag
result.head; // HTML for somewhere in this <head> tag
```

## `hydrate`

Like `mount`, but reuses SSR HTML and makes it interactive:

```js
// @errors: 2322
import { hydrate } from 'svelte';
import App from './App.svelte';

const app = hydrate(App, {
	target: document.querySelector('#app'),
	props: { some: 'property' }
});
```

- Effects don't run during `hydrate` — use `flushSync()` if needed

## docs/svelte/06-runtime/05-hydratable.md

# Hydratable Data

## Problem

Awaiting async data in components causes redundant work during hydration:

```svelte
<script>
  import { getUser } from 'my-database-library';

  // Gets user on server AND again during client hydration (wasteful)
  const user = await getUser();
</script>

<h1>{user.name}</h1>
```

## Solution: `hydratable()`

Serializes server data and reuses it during hydration:

```svelte
<script>
  import { hydratable } from 'svelte';
  import { getUser } from 'my-database-library';

  // Server: runs getUser(), serializes result to <head>
  // Hydration: uses serialized data, skips getUser()
  // Post-hydration: runs getUser() normally
  const user = await hydratable('user', () => getUser());
</script>

<h1>{user.name}</h1>
```

**Use for:** Stable random/time values between server and client:

```ts
import { hydratable } from 'svelte';
const rand = hydratable('random', () => Math.random());
```

**Library authors:** Prefix keys with library name to avoid conflicts.

## Serialization

Uses [`devalue`](https://npmjs.com/package/devalue) - supports JSON plus `Map`, `Set`, `URL`, `BigInt`, and promises:

```svelte
<script>
  import { hydratable } from 'svelte';
  const promises = hydratable('random', () => {
    return {
      one: Promise.resolve(1),
      two: Promise.resolve(2)
    }
  });
</script>

{await promises.one}
{await promises.two}
```

## CSP

`hydratable` adds inline `<script>` to `<head>`. For CSP compliance:

**Dynamic rendering (use `nonce`):**

```js
const nonce = crypto.randomUUID();

const { head, body } = await render(App, {
	csp: { nonce }
});

response.headers.set(
  'Content-Security-Policy',
  `script-src 'nonce-${nonce}'`
);
```

**Static HTML (use `hash`):**

```js
const { head, body, hashes } = await render(App, {
	csp: { hash: true }
});

response.headers.set(
  'Content-Security-Policy',
  `script-src ${hashes.script.map((hash) => `'${hash}'`).join(' ')}`
);
```

**Prefer `nonce`** - `hash` interferes with future streaming SSR.

## docs/svelte/07-misc/01-best-practices.md

# Svelte 5 Best Practices

## `$state`

Only use `$state` for reactive variables that trigger `$effect`, `$derived`, or template updates. Everything else is a normal variable.

Use `$state.raw` for large objects that are only reassigned (not mutated), like API responses. Avoids proxy overhead.

```js
let data = $state.raw(apiResponse); // reassign only
let user = $state({ name: 'Alice' }); // will mutate
```

## `$derived`

Compute from state with `$derived`, NOT `$effect`:

```js
// ✅ do this
let square = $derived(num * num);

// ❌ don't do this
let square;
$effect(() => {
	square = num * num;
});
```

Use `$derived.by` for complex expressions requiring a function.

Deriveds are writable and re-evaluate when dependencies change. Objects/arrays are NOT made deeply reactive unless you use `$state` inside `$derived.by`.

## `$effect`

Escape hatch - avoid when possible. Never update state inside effects.

**Alternatives:**
- External library sync → use [`{@attach ...}`](@attach)
- User interaction → use event handlers or function bindings
- Debugging → use [`$inspect`]($inspect)
- External observation → use [`createSubscriber`](svelte-reactivity#createSubscriber)

Never wrap effects in `if (browser)` - effects don't run on server.

## `$props`

Treat props as changing. Use `$derived` for computed values:

```js
let { type } = $props();

// ✅ do this
let color = $derived(type === 'danger' ? 'red' : 'green');

// ❌ don't do this - won't update
let color = type === 'danger' ? 'red' : 'green';
```

## `$inspect.trace`

Debug reactivity issues. Add as first line in `$effect` or `$derived.by` to trace dependencies:

```js
$inspect.trace(label)
```

## Events

Attributes starting with `on` are event listeners:

```svelte
<button onclick={() => {...}}>click me</button>
<button {onclick}>...</button>
<button {...props}>...</button>
```

For `window`/`document`, use special elements:

```svelte
<svelte:window onkeydown={...} />
<svelte:document onvisibilitychange={...} />
```

Avoid `onMount` or `$effect` for this.

## Snippets

Reusable markup chunks:

```svelte
{#snippet greeting(name)}
  <p>hello {name}!</p>
{/snippet}

{@render greeting('world')}
```

Top-level snippets are accessible in `<script>`. Non-state snippets in `<script module>` can be exported.

## Each blocks

Use keyed each blocks for performance:

```svelte
{#each items as item (item.id)}
  ...
{/each}
```

Key must uniquely identify the object. Never use index as key.

Avoid destructuring if mutating items (e.g., `bind:value={item.count}`).

## CSS Variables

Use `style:` directive for JS variables in CSS:

```svelte
<div style:--columns={columns}>...</div>

<style>
	div { grid-template-columns: repeat(var(--columns), 1fr); }
</style>
```

## Styling Child Components

Use CSS custom properties:

```svelte
<!-- Parent.svelte -->
<Child --color="red" />

<!-- Child.svelte -->
<h1>Hello</h1>
<style>
	h1 { color: var(--color); }
</style>
```

If impossible (library components), use `:global`:

```svelte
<div>
	<Child />
</div>

<style>
	div :global {
		h1 { color: red; }
	}
</style>
```

## Context

Use context instead of shared modules to scope state and prevent SSR leaks between users.

Use `createContext` for type safety over `setContext`/`getContext`.

## Async Svelte

v5.36+: Use await expressions and hydratable for promises in components. Requires `experimental.async` in `svelte.config.js`.

## Avoid Legacy Features

**Use modern replacements:**
- `$state` not implicit reactivity
- `$derived`/`$effect` not `$:` (minimize effects)
- `$props` not `export let`, `$$props`, `$$restProps`
- `onclick={...}` not `on:click={...}`
- `{#snippet ...}`/`{@render ...}` not `<slot>`, `$$slots`, `<svelte:fragment>`
- `<DynamicComponent>` not `<svelte:component this={...}>`
- `import Self` and `<Self>` not `<svelte:self>`
- Classes with `$state` fields not stores
- `{@attach ...}` not `use:action`
- clsx-style arrays/objects in `class` not `class:` directive

## docs/svelte/07-misc/02-testing.md

# Testing

Svelte is unopinionated about testing frameworks. Use [Vitest](https://vitest.dev/), [Jasmine](https://jasmine.github.io/), [Cypress](https://www.cypress.io/), [Playwright](https://playwright.dev/), etc.

## Unit and Component Tests with Vitest

### Setup

Install Vitest (or use [Svelte CLI](/docs/cli/vitest)):

```sh
npm install -D vitest
```

Configure `vite.config.js`:

```js
/// file: vite.config.js
import { defineConfig } from'vitest/config';

export default defineConfig({
	// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node
	resolve: process.env.VITEST
		? {
				conditions: ['browser']
			}
		: undefined
});
```

### Unit Tests

```js
/// file: multiplier.svelte.test.js
// @filename: multiplier.svelte.ts
export function multiplier(initial: number, k: number) {
	let count = $state(initial);

	return {
		get value() {
			return count * k;
		},
		set: (c: number) => {
			count = c;
		}
	};
}
// @filename: multiplier.svelte.test.js
//cut
import { flushSync } from 'svelte';
import { expect, test } from 'vitest';
import { multiplier } from './multiplier.svelte.js';

test('Multiplier', () => {
	let double = multiplier(0, 2);

	expect(double.value).toEqual(0);

	double.set(5);

	expect(double.value).toEqual(10);
});
```

### Using Runes in Tests

Use runes in test files with `.svelte` extension:

```js
/// file: multiplier.svelte.test.js
// @filename: multiplier.svelte.ts
export function multiplier(getCount: () => number, k: number) {
	return {
		get value() {
			return getCount() * k;
		}
	};
}
// @filename: multiplier.svelte.test.js
//cut
import { flushSync } from 'svelte';
import { expect, test } from 'vitest';
import { multiplier } from './multiplier.svelte.js';

test('Multiplier', () => {
	let count = $state(0);
	let double = multiplier(() => count, 2);

	expect(double.value).toEqual(0);

	count = 5;

	expect(double.value).toEqual(10);
});
```

For effects, wrap tests in `$effect.root`:

```js
/// file: logger.svelte.test.js
// @filename: logger.svelte.ts
export function logger(fn: () => void) {}
// @filename: logger.svelte.test.js
//cut
import { flushSync } from 'svelte';
import { expect, test } from 'vitest';
import { logger } from './logger.svelte.js';

test('Effect', () => {
	const cleanup = $effect.root(() => {
		let count = $state(0);

		// logger uses an $effect to log updates of its input
		let log = logger(() => count);

		// effects normally run after a microtask,
		// use flushSync to execute all pending effects synchronously
		flushSync();
		expect(log).toEqual([0]);

		count = 1;
		flushSync();

		expect(log).toEqual([0, 1]);
	});

	cleanup();
});
```

### Component Testing

Install jsdom:

```sh
npm install -D jsdom
```

Configure `vite.config.js`:

```js
/// file: vite.config.js
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [
		/* ... */
	],
	test: {
		// If you are testing components client-side, you need to set up a DOM environment.
		// If not all your files should have this environment, you can use a
		// `// @vitest-environment jsdom` comment at the top of the test files instead.
		environment: 'jsdom'
	},
	// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node
	resolve: process.env.VITEST
		? {
				conditions: ['browser']
			}
		: undefined
});
```

Basic component test:

```js
/// file: component.test.js
import { flushSync, mount, unmount } from 'svelte';
import { expect, test } from 'vitest';
import Component from './Component.svelte';

test('Component', () => {
	// Instantiate the component using Svelte's `mount` API
	const component = mount(Component, {
		target: document.body, // `document` exists because of jsdom
		props: { initial: 0 }
	});

	expect(document.body.innerHTML).toBe('<button>0</button>');

	// Click the button, then flush the changes so you can synchronously write expectations
	document.body.querySelector('button')?.click();
	flushSync();

	expect(document.body.innerHTML).toBe('<button>1</button>');

	// Remove the component from the DOM
	unmount(component);
});
```

Using [@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro/):

```js
// @errors: 2339
/// file: component.test.js
import { render, screen } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import { expect, test } from 'vitest';
import Component from './Component.svelte';

test('Component', async () => {
	const user = userEvent.setup();
	render(Component);

	const button = screen.getByRole('button');
	expect(button).toHaveTextContent(0);

	await user.click(button);
	expect(button).toHaveTextContent(1);
});
```

**Note:** For two-way bindings, context, or snippet props, create a wrapper component. See [@testing-library/svelte examples](https://testing-library.com/docs/svelte-testing-library/example).

## Component Tests with Storybook

[Storybook](https://storybook.js.org) tests run with Vitest's browser mode. Install via `npx sv add storybook` or follow [Storybook testing docs](https://storybook.js.org/docs/writing-tests?renderer=svelte).

Example with [play function](https://storybook.js.org/docs/writing-tests/interaction-testing?renderer=svelte#writing-interaction-tests):

```svelte
/// file: LoginForm.stories.svelte
<script module>
	import { defineMeta } from '@storybook/addon-svelte-csf';
	import { expect, fn } from 'storybook/test';

	import LoginForm from './LoginForm.svelte';

	const { Story } = defineMeta({
		component: LoginForm,
		args: {
			// Pass a mock function to the `onSubmit` prop
			onSubmit: fn(),
		}
	});
</script>

<Story name="Empty Form" />

<Story
	name="Filled Form"
	play={async ({ args, canvas, userEvent }) => {
		// Simulate a user filling out the form
		await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
		await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
		await userEvent.click(canvas.getByRole('button'));

		// Run assertions
		await expect(args.onSubmit).toHaveBeenCalledTimes(1);
		await expect(canvas.getByText('You're in!')).toBeInTheDocument();
	}}
/>
```

## E2E Tests with Playwright

Use [Svelte CLI](/docs/cli/playwright) or `npm init playwright`. May need [VS Code extension](https://playwright.dev/docs/getting-started-vscode).

Configure `playwright.config.js`:

```js
/// file: playwright.config.js
const config = {
	webServer: {
		command: 'npm run build && npm run preview',
		port: 4173
	},
	testDir: 'tests',
	testMatch: /(.+\.)?(test|spec)\.[jt]s/
};

export default config;
```

Write tests (framework-agnostic):

```js
// @errors: 2307 7031
/// file: tests/hello-world.spec.js
import { expect, test } from '@playwright/test';

test('home page has expected h1', async ({ page }) => {
	await page.goto('/');
	await expect(page.locator('h1')).toBeVisible();
});
```

## docs/svelte/07-misc/03-typescript.md

# TypeScript

## `<script lang="ts">`

Add `lang="ts"` to use TypeScript:

```svelte
<script lang="ts">
	let name: string = 'world';

	function greet(name: string) {
		alert(`Hello, ${name}!`);
	}
</script>

<button onclick={(e: Event) => greet(e.target.innerText)}>
	{name as string}
</button>
```

**Limitations:** Only type-only features supported (types, interfaces). Not supported:
- enums
- `private`/`protected`/`public` with initializers
- Non-stage-4 ECMAScript features

For these, setup a preprocessor.

## Preprocessor Setup

### Vite/SvelteKit

```ts
/// file: svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
	preprocess: vitePreprocess({ script: true })
};

export default config;
```

### Other tools
Use `svelte-preprocess` with Rollup/Webpack plugins.

## tsconfig.json

Required settings:
- `target`: `ES2015` minimum
- `verbatimModuleSyntax`: `true`
- `isolatedModules`: `true`

## Typing `$props`

```svelte
<script lang="ts">
	import type { Snippet } from 'svelte';

	interface Props {
		requiredProperty: number;
		optionalProperty?: boolean;
		snippetWithStringArgument: Snippet<[string]>;
		eventHandler: (arg: string) => void;
		[key: string]: unknown;
	}

	let {
		requiredProperty,
		optionalProperty,
		snippetWithStringArgument,
		eventHandler,
		...everythingElse
	}: Props = $props();
</script>

<button onclick={() => eventHandler('clicked button')}>
	{@render snippetWithStringArgument('hello')}
</button>
```

## Generic `$props`

Use `generics` attribute for type relationships:

```svelte
<script lang="ts" generics="Item extends { text: string }">
	interface Props {
		items: Item[];
		select(item: Item): void;
	}

	let { items, select }: Props = $props();
</script>

{#each items as item}
	<button onclick={() => select(item)}>
		{item.text}
	</button>
{/each}
```

## Typing Wrapper Components

Use `svelte/elements` types:

```svelte
<script lang="ts">
	import type { HTMLButtonAttributes } from 'svelte/elements';

	let { children, ...rest }: HTMLButtonAttributes = $props();
</script>

<button {...rest}>
	{@render children?.()}
</button>
```

For elements without dedicated types:

```svelte
<script lang="ts">
	import type { SvelteHTMLElements } from 'svelte/elements';

	let { children, ...rest }: SvelteHTMLElements['div'] = $props();
</script>

<div {...rest}>
	{@render children?.()}
</div>
```

## Typing `$state`

```ts
let count: number = $state(0);
```

Without initial value, type includes `undefined`. Use `as` casting if you know it will be defined:

```ts
class Counter {
	count = $state() as number;
	constructor(initial: number) {
		this.count = initial;
	}
}
```

## `Component` Type

Constrain dynamic components:

```svelte
<script lang="ts">
	import type { Component } from 'svelte';

	interface Props {
		DynamicComponent: Component<{ prop: string }>;
	}

	let { DynamicComponent }: Props = $props();
</script>

<DynamicComponent prop="foo" />
```

Extract props with `ComponentProps`:

```ts
import type { Component, ComponentProps } from 'svelte';
import MyComponent from './MyComponent.svelte';

function withProps<TComponent extends Component<any>>(
	component: TComponent,
	props: ComponentProps<TComponent>
) {}

withProps(MyComponent, { foo: 'bar' });
```

Constructor/instance types:

```svelte
<script lang="ts">
	import MyComponent from './MyComponent.svelte';

	let componentConstructor: typeof MyComponent = MyComponent;
	let componentInstance: MyComponent;
</script>

<MyComponent bind:this={componentInstance} />
```

## Enhancing DOM Types

Augment `svelte/elements` for custom/experimental attributes:

```ts
/// file: additional-svelte-typings.d.ts
import { HTMLButtonAttributes } from 'svelte/elements';

declare module 'svelte/elements' {
	export interface SvelteHTMLElements {
		'custom-button': HTMLButtonAttributes;
	}

	export interface HTMLAttributes<T> {
		globalattribute?: string;
	}

	export interface HTMLButtonAttributes {
		veryexperimentalattribute?: string;
	}
}

export {};
```

Reference in `tsconfig.json` (e.g., `"include": ["src/**/*"]`).

## docs/svelte/07-misc/05-browser-support.md

# Browser Support

## Minimum Versions

| Browser | Version |
| - | - |
| Chrome/Edge | 87 |
| Firefox | 83 |
| Safari | 14 |
| Opera | 73 |
| Opera (Android) | 62 |
| Samsung Internet | 14.0 |
| Android WebView | 87 |
| Internet Explorer | ❌ |

> Baseline target: 2020

Applies to Svelte only, not SvelteKit or other libraries.

## Feature-Specific Requirements

| Feature | Chrome/Edge | Firefox | Safari |
| - | - | - | - |
| `$state.snapshot` | 98 | 94 | 15.4 |
| `bind:devicePixelContentBoxSize` | — | 93 | ❌ |
| `flip` animation | — | 126 | — |

Instructions for LLMs: <s>Always use Svelte 5 runes and Svelte 5 syntax. Runes do not need to be imported, they are globals. $state() runes are always declared using `let`, never with `const`. When passing a function to $derived, you must always use $derived.by(() => ...). Error boundaries can only catch errors during component rendering and at the top level of an $effect inside the error boundary. Error boundaries do not catch errors in onclick or other event handlers.</s>