Svelte

https://github.com/sveltejs/svelte
Admin
Svelte is a compiler that transforms declarative UI components into efficient JavaScript that...
Tokens:330,617
Snippets:2,321
Trust Score:8.1
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Create a new SvelteKit app with npx sv create

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/README.md

Use this command sequence to scaffold a new SvelteKit application with the official CLI, install dependencies, and start the development server.

```sh
npx sv create my-app
cd my-app
npm install
npm run dev
```

--------------------------------

### Create a new SvelteKit project with npx sv create

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/01-introduction/02-getting-started.md

Creates a new SvelteKit project with the official Svelte CLI, installs dependencies, and starts the development server.

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

--------------------------------

### Install Vitest

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/02-testing.md

Install Vitest as a dev dependency to set up unit and component testing with Svelte.

```sh
npm install -D vitest
```

--------------------------------

### Writable store with start and stop functions

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/06-runtime/01-stores.md

Creates a writable store with a start function that runs when the subscriber count goes from zero to one. The start function logs a message and returns a stop function that runs when the count goes back to zero. The set method does nothing when there are no subscribers, and the subscribe method triggers the start function and logs the current value.

```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'
```

--------------------------------

### Keyed each block examples

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/03-each.md

Examples of keyed each blocks. The key can be any object, but strings and numbers are recommended for identity persistence.

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

<!-- or with additional index value -->
{#each items as item, i (item.id)}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}
```

--------------------------------

### $on example with event listener

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/99-legacy/40-legacy-component-api.md

Example of using $on to listen for a 'selected' event and then removing the listener with the returned off function.

```ts
// @noErrors
const off = component.$on('selected', (event) => {
	console.log(event.detail.selection);
});

off();
```

--------------------------------

### $set example with answer prop

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/99-legacy/40-legacy-component-api.md

Example of calling $set with a specific prop value. The update is asynchronous.

```ts
// @noErrors
component.$set({ answer: 42 });
```

--------------------------------

### Full {#await ...} example with all branches

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/05-await.md

Example of an await block with pending, then, and catch branches, displaying a waiting message, the resolved value, or an error message.

```svelte
{#await promise}
	<!-- promise is pending -->
	<p>waiting for the promise to resolve...</p>
{:then value}
	<!-- promise was fulfilled or not a Promise -->
	<p>The value is {value}</p>
{:catch error}
	<!-- promise was rejected -->
	<p>Something went wrong: {error.message}</p>
{/await}
```

--------------------------------

### {#await ...} example without pending block

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/05-await.md

Example of an await block that omits the initial pending block, showing only the then branch.

```svelte
{#await promise then value}
	<p>The value is {value}</p>
{/await}
```

--------------------------------

### {#await ...} example without then block

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/05-await.md

Example of an await block that omits the then block, showing only the catch branch.

```svelte
{#await promise catch error}
	<p>The error is {error}</p>
{/await}
```

--------------------------------

### Chess board example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/03-each.md

Example of using each blocks without an item to render an 8x8 chess board. The outer each iterates over ranks, the inner each over files, and the class:black directive toggles based on the sum of rank and file.

```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>
```

--------------------------------

### {#await ...} example without catch block

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/05-await.md

Example of an await block that omits the catch branch, showing only pending and then states.

```svelte
{#await promise}
	<!-- promise is pending -->
	<p>waiting for the promise to resolve...</p>
{:then value}
	<!-- promise was fulfilled -->
	<p>The value is {value}</p>
{/await}
```

--------------------------------

### Each block with else example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/03-each.md

Example of an each block with an else clause that displays a message when the list is empty.

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

--------------------------------

### Define Storybook stories with play function for component testing

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/02-testing.md

Create stories for component variations and test interactions with the play function. The example defines two stories: 'Empty Form' and 'Filled Form', where the latter simulates user input and runs assertions using Testing Library and Vitest APIs. Requires Storybook installed via `npx sv add storybook` with the recommended testing configuration.

```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();
	}}
/>
```

--------------------------------

### Install jsdom for component testing

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/02-testing.md

Install jsdom, a library that shims DOM APIs, as a dev dependency to enable component testing in a simulated browser environment.

```sh
npm install -D jsdom
```

--------------------------------

### Component prop usage example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/99-legacy/40-legacy-component-api.md

Example of reading and updating a component prop directly. This works only when accessors is true (default false unless compiling as a custom element).

```js
// @noErrors
console.log(component.count);
component.count += 1;
```

--------------------------------

### Instantiate a component with `target` and `props`

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/99-legacy/40-legacy-component-api.md

Example of instantiating a component with a target and props. The `target` option is required and can be an `HTMLElement` or `ShadowRoot`; existing children of `target` are left in place.

```ts
// @noErrors
import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		// assuming App.svelte contains something like
		// `export let answer`:
		answer: 42
	}
});
```

--------------------------------

### Using {#await ...} with dynamic import

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/05-await.md

Example of using #await with import() to lazily render a component.

```svelte
{#await import('./Component.svelte') then { default: Component }}
	<Component />
{/await}
```

--------------------------------

### a11y_media_has_caption example

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-warnings/a11y.md

Illustrates valid media elements with captions or muted attributes, alongside invalid examples missing the required track element.

```svelte
<video><track kind="captions" /></video>

<audio muted></audio>

<!-- A11y: Media elements must have a <track kind="captions"> -->
<video></video>

<!-- A11y: Media elements must have a <track kind="captions"> -->
<video><track /></video>
```

--------------------------------

### Each block with index

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/03-each.md

Example of using the index variable to display a 1-based index.

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

--------------------------------

### Valid rune call with parentheses

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-errors/script.md

To use a rune, call it with parentheses and any required arguments. This example shows the correct usage of `$state` with an initial value.

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

--------------------------------

### bind:value component prop example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/12-bind.md

Example of binding a component prop using bind:value. The variable pin is updated when the Keypad component changes the value.

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

--------------------------------

### Iterating over items

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/03-each.md

Example of iterating over an array of items and displaying properties. The each block renders a list item for each element.

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

--------------------------------

### Replace `$set` with `$state` and `mount`

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/07-v5-migration-guide.md

Shows how to use `$state` to create a reactive property object and pass it to `mount`, then mutate it to update props. Adjust file extensions to `.svelte.js` or `.svelte.ts` when using in a `.js`/`.ts` file.

```javascript
import { mount } from 'svelte';
import App from './App.svelte'

const props = $state({ foo: 'bar' });
const app = mount(App, { target: document.getElementById("app"), props });
props.foo = 'baz';
```

--------------------------------

### $effect.tracking() detection example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/02-runes/04-$effect.md

Use $effect.tracking to detect whether code runs inside a tracking context (effect or template). Returns false in component setup, true inside an effect and in the template. Useful for implementing abstractions like createSubscriber that only create listeners when values are tracked.

```svelte
<!--- file: App.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> <!-- true -->
```

--------------------------------

### Migrate from `new App()` to `mount()`

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/07-v5-migration-guide.md

Replaces the class-based instantiation with the new `mount` function. The `mount` function returns an object with component exports and property accessors, but lacks `$on`, `$set`, and `$destroy` methods.

```javascript
import { mount } from 'svelte';
import App from './App.svelte'

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

export default app;
```

--------------------------------

### Push-pull reactivity example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/02-runes/03-$derived.md

Demonstrates that the button text only updates when 'large' changes, not when 'count' changes, because derived values are only re-evaluated when read and referential identity is checked.

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

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

--------------------------------

### Declare component constructor and instance types

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/03-typescript.md

Use `typeof MyComponent` for the constructor type and `MyComponent` for the instance type. The example shows how to bind a component instance to a variable.

```svelte
<script lang="ts">
	import MyComponent from './MyComponent.svelte';

	let componentConstructor: typeof MyComponent = MyComponent;
	let componentInstance: MyComponent;
</script>

<MyComponent bind:this={componentInstance} />
```

--------------------------------

### a11y_label_has_associated_control example

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-warnings/a11y.md

Shows valid label associations using the 'for' attribute or wrapping, and an invalid example that lacks a control.

```svelte
<label for="id">B</label>

<label>C <input type="text" /></label>

<!-- A11y: A form label must be associated with a control. -->
<label>A</label>
```

--------------------------------

### Create readable stores with start functions

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/06-runtime/01-stores.md

Creates two readable stores. The first updates its value every second with the current date. The second toggles between 'tick' and 'tock' every second using the update function. Both return a stop function that clears the interval when the subscriber count drops to zero.

```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);
});
```

--------------------------------

### Install Svelte from a pull request branch

Source: https://github.com/sveltejs/svelte/blob/main/CONTRIBUTING.md

In another pnpm project, run `pnpm add -D "github:sveltejs/svelte#path:packages/svelte&branch-name"` to manually test a pull request.

```sh
pnpm add -D "github:sveltejs/svelte#path:packages/svelte&branch-name"
```

--------------------------------

### new Component(options)

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/99-legacy/40-legacy-component-api.md

Documentation for the imperative component API in Svelte 3 and 4, specifically the constructor for creating a component instance.

```APIDOC
## [CONSTRUCTOR] new Component(options)

### Description
Creates a new client-side component instance. The component is a JavaScript class when compiled with `generate: 'dom'` (or when the `generate` option is left unspecified).

### Method
Constructor

### Endpoint
`new Component(options)`

### Parameters
#### Constructor Options
- **`target`** (`HTMLElement` or `ShadowRoot`) - Required - An `HTMLElement` or `ShadowRoot` to render to. This option is required.
- **`anchor`** (`HTMLElement` or `null`) - Optional (default: `null`) - A child of `target` to render the component immediately before.
- **`props`** (`object`) - Optional (default: `{}`) - An object of properties to supply to the component.
- **`context`** (`Map`) - Optional (default: `new Map()`) - A `Map` of root-level context key-value pairs to supply to the component.
- **`hydrate`** (`boolean`) - Optional (default: `false`) - If `true`, instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. Only works if the component was compiled with the `hydratable: true` option. Cannot be used with `anchor`.
- **`intro`** (`boolean`) - Optional (default: `false`) - If `true`, will play transitions on initial render, rather than waiting for subsequent state changes.

### Request Example
```ts
import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		// assuming App.svelte contains something like
		// `export let answer`:
		answer: 42
	}
});
```

### Response
No return value is documented. The constructor creates a component instance.

### Notes
- Existing children of `target` are left where they are.
- With `hydrate: true`, any children of `target` are removed, and the existing DOM does not need to match the component — Svelte will 'repair' the DOM as it goes.
- In Svelte 5+, use `mount` instead.
```

--------------------------------

### Replace `$destroy` with `unmount`

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/07-v5-migration-guide.md

Shows how to use `unmount` to destroy a component instance, replacing the `$destroy` method.

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

const app = mount(App, { target: document.getElementById("app") });
unmount(app);
```

--------------------------------

### A11y: img redundant alt attribute

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-warnings/a11y.md

Examples of img elements with redundant alt text that trigger a11y warnings, alongside valid examples.

```svelte
<img src="foo" alt="Foo eating a sandwich." />

<!-- aria-hidden, won't be announced by screen reader -->
<img src="bar" aria-hidden="true" alt="Picture of me taking a photo of an image" />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="foo" alt="Photo of foo being weird." />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="bar" alt="Image of me at a bar!" />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="foo" alt="Picture of baz fixing a bug." />
```

--------------------------------

### mount

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/06-runtime/04-imperative-component-api.md

Instantiates a component and mounts it to a given target element. Effects do not run during mount; use flushSync() to force pending effects.

```APIDOC
## `mount`

### Description
Instantiates a component and mounts it to the given target.

### Method
`mount`

### Parameters
- **component** (Component) - Required - The component to instantiate.
- **options** (Object) - Required - An object containing the following properties:
  - **target** (HTMLElement) - Required - The DOM element to mount the component to.
  - **props** (Object) - Optional - Properties to pass to the component.

### Request Example
```js
import { mount } from 'svelte';
import App from './App.svelte';

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

### Response
Returns the component instance.

### Notes
- You can mount multiple components per page.
- You can mount from within your application (e.g., for tooltips).
- Effects (including `onMount` callbacks and action functions) will not run during `mount`. Use `flushSync()` to force pending effects to run.
```

--------------------------------

### Replace `$on` with `events` option

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/07-v5-migration-guide.md

Shows how to pass event listeners via the `events` property when using `mount`. Note that using `events` is discouraged; prefer callbacks instead.

```javascript
import { mount } from 'svelte';
import App from './App.svelte'

const app = mount(App, { target: document.getElementById("app"), events: { event: callback } });
```

--------------------------------

### Populate benchmark sort dropdown

Source: https://github.com/sveltejs/svelte/blob/main/benchmarking/compare/results.template.html

Creates options for the benchmark sort dropdown, including predefined options and one per branch for sorting by slowest relative result.

```javascript
const benchmark_sort = document.querySelector('#benchmark-sort');
[
  ['original', 'Original run order'],
  ['name', 'Benchmark name'],
  ['winner', 'Winner for entry'],
  ['spread', 'Largest spread']
]
  .concat(
    report.branches.map(function (branch, index) {
      return ['branch:' + index, branch + ': slowest relative result'];
    })
  )
  .forEach(function (option) {
    const node = make('option', '', option[1]);
    node.value = option[0];
    benchmark_sort.append(node);
  });
```

--------------------------------

### Readonly dimension bindings with null get

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/12-bind.md

Readonly dimension bindings with function bindings. The get value is null, and the set function redraw is called when the dimension changes.

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

--------------------------------

### const_tag_invalid_reference: Error example with component

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-errors/template.md

This example shows a {@const} declaration inside a component that is not available inside a snippet passed as a prop. The reference to foo inside the someProp snippet is an error.

```svelte
<Component>
    {@const foo = 'bar'}

    {#snippet someProp()}
        <!-- error -->
        {foo}
    {/snippet}
</Component>
```

--------------------------------

### Write a low-level component test with mount and flushSync

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/02-testing.md

A low-level component test using Svelte's `mount`, `flushSync`, and `unmount` APIs. It mounts the component to `document.body`, clicks the button, flushes changes synchronously, and asserts the rendered HTML. This approach is straightforward but brittle because it depends on the exact DOM structure.

```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);
});
```

--------------------------------

### Svelte 4 HTML structure example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/07-v5-migration-guide.md

In Svelte 4, you could write HTML that the browser would repair, such as omitting the tbody element. This example shows the original code that would be auto-corrected.

```svelte
<table>
	<tr>
		<td>hi</td>
	</tr>
</table>
```

--------------------------------

### Render benchmark table

Source: https://github.com/sveltejs/svelte/blob/main/benchmarking/compare/results.template.html

Builds the benchmark table with columns for benchmark name, winner, and each branch. Populates cells with timing data, ratios, and heat colors. Handles missing data.

```javascript
function render_benchmarks() {
  const table = document.querySelector('#benchmark-table');
  const branches = branch_order();
  const head = document.createElement('thead');
  const head_row = document.createElement('tr');
  head_row.append(make('th', '', 'Benchmark'), make('th', '', 'Winner'));
  branches.forEach(function (branch) {
    head_row.append(make('th', '', branch.name));
  });
  head.append(head_row);
  const body = document.createElement('tbody');
  benchmark_order().forEach(function (entry) {
    const row = document.createElement('tr');
    row.append(make('td', 'benchmark-name', entry.benchmark.name));
    const winner_names = entry.stats.winners.map(function (index) {
      return report.branches[index];
    });
    row.append(
      make(
        'td',
        winner_names.length === 0 ? 'missing' : 'winner',
        winner_names.length === 0 ? 'Incomplete' : winner_names.join(', ')
      )
    );
    branches.forEach(function (branch) {
      const value = entry.benchmark.values[branch.index];
      if (value === null || !Number.isFinite(value.time)) {
        row.append(make('td', 'missing', 'Not available'));
        return;
      }
      const cell = make('td', entry.stats.comparable ? 'metric' : 'missing');
      const time = make('span', 'time', number.format(value.time) + ' ms');
      cell.append(time);
      if (entry.stats.comparable) {
        const ratio = entry.stats.ratios[branch.index];
        const heat = entry.stats.max === entry.stats.min ? 0 : (value.time - entry.stats.min) / (entry.stats.max - entry.stats.min);
        cell.style.setProperty('--heat', String(Math.round(142 - heat * 137)));
        cell.append(
          make(
            'span',
            'delta',
            ratio === 1 ? 'fastest' : '+' + number.format((ratio - 1) * 100) + '%'
          )
        );
      }
      const gc = Number.isFinite(value.gc_time) ? number.format(value.gc_time) + ' ms' : 'n/a';
      cell.append(make('div', 'secondary', 'GC ' + gc));
      row.append(cell);
    });
    body.append(row);
  });
  table.replaceChildren(head, body);
}
```

--------------------------------

### Passing data back up: App.svelte migration example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/07-v5-migration-guide.md

Shows the migration of passing data back up from child to parent. The old syntax uses let: directives and named slots, the new uses snippet props. This is the parent component that passes items and defines snippets.

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

<List items={['one', 'two', 'three']} ---let:item--->
	+++{#snippet item(text)}+++
		<span>{text}</span>
	+++{/snippet}+++
	---<span slot="empty">No items yet</span>---
	+++{#snippet empty()}
		<span>No items yet</span>
	{/snippet}+++
</List>
```

--------------------------------

### Svelte 4 auto-reactive class example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/07-v5-migration-guide.md

In Svelte 4, assigning to a property of a class instance triggered reactivity. This example shows the old pattern where the compiler treated the assignment as an update instruction.

```svelte
<script>
	let foo = new Foo();
</script>

<button on:click={() => (foo.value = 1)}>{foo.value}</button
>
```

--------------------------------

### Preloading with fork() API

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/19-await-expressions.md

Use the fork() API (Svelte 5.42+) to run await expressions expected in the near future, mainly for frameworks like SvelteKit to implement preloading. Call commit() to apply the changes, discard() to cancel, and check if pending exists before assigning. The example creates a fork that sets open to true, with preload on focus/pointer events and discard on blur/leave.

```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;

		// in case `pending` didn't exist
		// (if it did, this is a no-op)
		open = true;
	}}
>open menu</button>

{#if open}
	<!-- any async work inside this component will start
	     as soon as the fork is created -->
	<Menu onclose={() => open = false} />
{/if}
```

--------------------------------

### Type `$state` without an initial value (error example)

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/03-typescript.md

When `$state` is called without an initial value, the type includes `undefined`. This example shows a type error when assigning to a `number` variable.

```ts
// @noErrors
// Error: Type 'number | undefined' is not assignable to type 'number'
let count: number = $state();
```

--------------------------------

### get: Retrieve a store value without subscribing

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/06-runtime/01-stores.md

`get` retrieves the current value of a store by creating a temporary subscription, reading the value, and unsubscribing. It is not recommended in hot code paths due to this overhead.

```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);
```

--------------------------------

### Function binding with get and set

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/12-bind.md

Function binding for bind:value. The get function returns the current value, and the set function transforms the input to lowercase before updating. Available in Svelte 5.9.0 and newer.

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

--------------------------------

### Svelte 4 accessors option example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/07-v5-migration-guide.md

In Svelte 4, setting the accessors option to true makes component properties directly accessible on the component instance. This example shows the old syntax with export let.

```svelte
<svelte:options accessors={true} />

<script>
	// available via componentInstance.name
	export let name;
</script>
```

--------------------------------

### Play transition on value change with key block

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/04-key.md

Using a key block with a transition ensures the transition plays whenever the value changes.

```svelte
{#key value}
	<div transition:fade>{value}</div>
{/key}
```

--------------------------------

### const_tag_invalid_reference: Equivalent code with implicit children snippet

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-errors/template.md

This example shows the equivalent code to the previous error example, where the {@const} is moved inside the implicit children snippet. This makes it clear why foo is not available in the failed snippet.

```svelte
<svelte:boundary>
    {#snippet children()}
        {@const foo = 'bar'}
    {/snippet}

    {#snippet failed()}
        {foo}
    {/snippet}
</svelte:boundary>
```

--------------------------------

### Create and use a writable store

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/06-runtime/01-stores.md

Creates a writable store with an initial value of 0. The subscribe method logs the current value and subsequent changes. The set method updates the value, and the update method applies a callback to the existing value. The comments show the expected console output for each operation.

```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'
```

--------------------------------

### Preprocessor order example with `svelte/compiler`

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/06-v4-migration-guide.md

Demonstrates the new preprocessor execution order in Svelte 4: preprocessors run in order, and within each group the order is markup, script, style. The commented logs show the difference between Svelte 3 and Svelte 4.

```js
// @errors: 2304
import { preprocess } from 'svelte/compiler';

const { code } = await preprocess(
	source,
	[
		{
			markup: () => {
				console.log('markup-1');
			},
			script: () => {
				console.log('script-1');
			},
			style: () => {
				console.log('style-1');
			}
		},
		{
			markup: () => {
				console.log('markup-2');
			},
			script: () => {
				console.log('script-2');
			},
			style: () => {
				console.log('style-2');
			}
		}
	],
	{
		filename: 'App.svelte'
	}
);

// Svelte 3 logs:
// markup-1
// markup-2
// script-1
// script-2
// style-1
// style-2

// Svelte 4 logs:
// markup-1
// script-1
// style-1
// markup-2
// script-2
// style-2
```

--------------------------------

### const_tag_invalid_reference: Error example with svelte:boundary

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-errors/template.md

This example shows a {@const} declaration inside a <svelte:boundary> that is not available inside a sibling {#snippet}. The top-level code inside <svelte:boundary> becomes part of the implicit children snippet, so the reference to foo inside the failed snippet is an error.

```svelte
<svelte:boundary>
    {@const foo = 'bar'}

    {#snippet failed()}
        {foo}
    {/snippet}
</svelte:boundary>
```

--------------------------------

### mount: Mount a component to a target

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/06-runtime/04-imperative-component-api.md

Instantiates a component and mounts it to the given target. Effects (including onMount callbacks and actions) do not run during mount; use flushSync() to force pending effects.

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

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

--------------------------------

### Unresolved hydratable warning example

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/server-warnings/warnings.md

This example shows the problematic pattern that triggers the `unresolved_hydratable` warning: creating a `hydratable` in the `script` block and then `await`ing it inside a `svelte:boundary` with a `pending` snippet. The warning occurs because the `hydratable` is not fully used during the render. To fix it, inline the `hydratable` call inside the boundary so it is not called on the server.

```svelte
<script>
  import { hydratable } from 'svelte';
	import { getUser } from '$lib/get-user.js';

	const user = hydratable('user', getUser);
</script>

<svelte:boundary>
	<h1>{(await user).name}</h1>

	{#snippet pending()}
		<div>Loading...</div>
	{/snippet}
</svelte:boundary>
```

--------------------------------

### Attach listeners to window and document with svelte:window and svelte:document

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/01-best-practices.md

Use `<svelte:window>` and `<svelte:document>` to attach listeners to `window` or `document`. Avoid using `onMount` or `$effect` for this.

```svelte
<svelte:window onkeydown={...} />
<svelte:document onvisibilitychange={...} />
```

--------------------------------

### a11y_invalid_attribute example

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-warnings/a11y.md

Demonstrates an invalid href attribute on an anchor tag, which triggers an accessibility warning.

```svelte
<!-- A11y: '' is not a valid href attribute -->
<a href="">invalid</a>
```

--------------------------------

### Full {#await ...} block syntax

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/05-await.md

Shows the complete syntax for an await block with all three branches: pending, fulfilled, and rejected.

```svelte
{#await expression}...{:then name}...{:catch name}...{/await}
```

--------------------------------

### A11y: h2 element should not be hidden

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-warnings/a11y.md

Example of a hidden header element that triggers an a11y warning.

```svelte
<!-- A11y: <h2> element should not be hidden -->
<h2 aria-hidden="true">invisible header</h2>
```

--------------------------------

### Using settled() to wait for update completion

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/19-await-expressions.md

Shows how to use tick() and settled() to ensure UI updates are applied before resetting a loading flag.

```js
let color = 'red';
let answer = -1;
let updating = false;
// ---cut---
import { tick, settled } from 'svelte';

async function onclick() {
	updating = true;

	// without this, the change to `updating` will be
	// grouped with the other changes, meaning it
	// won't be reflected in the UI
	await tick();

	color = 'octarine';
	answer = 42;

	await settled();

	// any updates affected by `color` or `answer`
	// have now been applied
	updating = false;
}
```

--------------------------------

### A11y: Avoid marquee elements

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-warnings/a11y.md

Example of a distracting marquee element that triggers an a11y warning.

```svelte
<!-- A11y: Avoid <marquee> elements -->
<marquee></marquee>
```

--------------------------------

### Migration of `$:` to `run` function

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/07-v5-migration-guide.md

Shows how the migration script converts a `$:` statement to a `run` function imported from `svelte/legacy` when it cannot reliably migrate to `$derived`. The `run` function runs on the server once and as `$effect.pre` on the client, but you may want to use `$effect` instead.

```svelte
<script>
	---import { run } from 'svelte/legacy';---
	---run(() => {---
	+++$effect(() => {+++
		// some side effect code
	})
</script>
```

--------------------------------

### Basic <svelte:window> event listener syntax

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/05-special-elements/02-svelte-window.md

Shows the general syntax for attaching an event listener to the window object using the onevent attribute.

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

--------------------------------

### Simple if block example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/02-if.md

A simple if block that conditionally renders a paragraph when the expression `answer === 42` is true.

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

--------------------------------

### A11y: figcaption must be an immediate child of figure

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-warnings/a11y.md

Example of an incorrectly structured figcaption element that triggers an a11y warning.

```svelte
<!-- A11y: <figcaption> must be an immediate child of <figure> -->
<div>
	<figcaption>Image caption</figcaption>
</div>
```

--------------------------------

### $inspect(...).with(...) rune example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/02-runes/07-$inspect.md

Use $inspect(...).with to replace the default console.log with a custom callback. The callback receives 'init' or 'update' as the first argument, followed by the inspected values.

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

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

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

--------------------------------

### Local vs global transitions

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/14-transition.md

Shows local transitions (default) that only play when their own block is created/destroyed, and a global transition (using |global) that also plays when parent blocks are created/destroyed.

```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}
```

--------------------------------

### Svelte await_reactivity_loss example with visible await

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/client-warnings/warnings.md

Shows a `$derived` expression with an `await` where both `a` and `b` are tracked because the `await` is visible in the expression.

```js
let total = $derived(await a + b);
```

--------------------------------

### Capture modifier syntax

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/07-v5-migration-guide.md

The capture modifier is added to the event name in Svelte 5. This example shows the onclickcapture syntax.

```svelte
<button onclickcapture={...}>...</button>
```

--------------------------------

### Parent.svelte: setContext example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/06-runtime/02-context.md

Sets a context value with setContext('my-context', 'hello from Parent.svelte'). The key and value can be any JavaScript value.

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

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

--------------------------------

### Basic <svelte:boundary> usage

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/05-special-elements/01-svelte-boundary.md

Shows the basic syntax of the <svelte:boundary> element with an onerror handler. This is the minimal usage to create a boundary.

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

--------------------------------

### HTML comment in component

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/01-basic-markup.md

HTML comments can be used inside components. This example shows a simple comment before an h1 element.

```svelte
<!-- this is a comment! --><h1>Hello world</h1>
```

--------------------------------

### Run full compiler profiling suite

Source: https://github.com/sveltejs/svelte/blob/main/benchmarking/compiler-profiling.md

Runs the full test suite with V8 CPU profiling enabled in every Vitest worker. Each run is stored under benchmarking/.profiles/compiler-tests/<timestamp>.

```sh
pnpm profile:compiler
```

--------------------------------

### Basic .svelte file structure

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/01-introduction/03-svelte-files.md

Shows the overall structure of a .svelte file with all three optional sections: <script module>, <script>, markup, and <style>. Use as a template for any Svelte component.

```svelte
/// file: MyComponent.svelte
<script module>
	// module-level logic goes here
	// (you will rarely use this)
</script>

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

<!-- markup (zero or more items) goes here -->

<style>
	/* styles go here */
</style>
```

--------------------------------

### Pass-by-value example with add function

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/02-runes/02-$state.md

Shows that JavaScript passes values, not references, so the total remains 3 after changing a and b.

```javascript
/// file: index.js
// @filename: index.js
// ---cut---
/**
 * @param {number} a
 * @param {number} b
 */
function add(a, b) {
	return a + b;
}

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

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

--------------------------------

### hydrate

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/06-runtime/04-imperative-component-api.md

Like mount, but reuses existing HTML rendered by Svelte's SSR output and makes it interactive.

```APIDOC
## `hydrate`

### Description
Like `mount`, but will reuse any HTML rendered by Svelte's SSR output (from the `render` function) inside the target and make it interactive.

### Method
`hydrate`

### Parameters
- **component** (Component) - Required - The component to hydrate.
- **options** (Object) - Required - An object containing the following properties:
  - **target** (HTMLElement) - Required - The DOM element to hydrate.
  - **props** (Object) - Optional - Properties to pass to the component.

### Request Example
```js
import { hydrate } from 'svelte';
import App from './App.svelte';

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

### Response
Returns the component instance.

### Notes
- Effects will not run during `hydrate` – use `flushSync()` immediately afterwards if you need them to.
```

--------------------------------

### A11y Unknown role warning

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-warnings/a11y.md

Example of an invalid ARIA role usage that triggers a warning, suggesting the correct role name.

```svelte
<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->
<div role="toooltip"></div>
```

--------------------------------

### Attach event listeners and initialize rendering

Source: https://github.com/sveltejs/svelte/blob/main/benchmarking/compare/results.template.html

Adds change listeners to the benchmark sort and branch order dropdowns to re-render the benchmark table. Sets the generated timestamp and calls the initial render functions.

```javascript
benchmark_sort.addEventListener('change', render_benchmarks);
document.querySelector('#branch-order').addEventListener('change', render_benchmarks);
document.querySelector('#generated').textContent = 'Generated ' + new Date(report.generated_at).toLocaleString();
render_standings();
render_benchmarks();
```

--------------------------------

### Browser-repaired HTML structure

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/07-misc/07-v5-migration-guide.md

The browser would auto-insert a tbody element in the previous example. This shows the resulting HTML after browser repair.

```svelte
<table>
	<tbody>
		<tr>
			<td>hi</td>
		</tr>
	</tbody>
</table>
```

--------------------------------

### Self-closing tag ambiguity example

Source: https://github.com/sveltejs/svelte/blob/main/packages/svelte/messages/compile-warnings/template.md

Shows how a self-closing tag is parsed by a spec-compliant HTML parser, with the text ending up inside the element.

```html
<div>
	<span class="icon" /> some text!
</div>
```

```html
<div>
	<span class="icon"> some text! </span>
</div>
```

--------------------------------

### {#await ...} shorthand with then only

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/03-template-syntax/05-await.md

Shows the shorthand syntax for an await block that omits the initial pending block and the catch block.

```svelte
{#await expression then name}...{/await}
```

--------------------------------

### Compiler output for $state transformation

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/02-runes/02-$state.md

This is the compiler output for the previous example, showing how Svelte transforms `$state` and reassignments into `$.state`, `$.get`, and `$.set` calls. The compiler only operates on one file at a time, so this transformation does not apply to imports from other files.

```js
/// file: state.svelte.js (compiler output)
// @filename: index.ts
interface Signal<T> {
	value: T;
}

interface Svelte {
	state<T>(value?: T): Signal<T>;
	get<T>(source: Signal<T>): T;
	set<T>(source: Signal<T>, value: T): void;
}
declare const $: Svelte;
// ---cut---
export let count = $.state(0);

export function increment() {
	$.set(count, $.get(count) + 1);
}
```

--------------------------------

### Inline on:click handler

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/99-legacy/10-legacy-on.md

Handlers can be declared inline with no performance penalty. This example increments the count directly in the event handler expression.

```svelte
<button on:click={() => (count += 1)}>
	count: {count}
</button>
```

--------------------------------

### Child.svelte: getContext example

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/06-runtime/02-context.md

Retrieves the context value set by the parent using getContext('my-context'). The retrieved value is used in the template.

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

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

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

--------------------------------

### onMount basic usage

Source: https://github.com/sveltejs/svelte/blob/main/documentation/docs/06-runtime/03-lifecycle-hooks.md

Use onMount to run a callback after the component is mounted to the DOM. Must be called during component initialization, but can be from an external module. Does not run on the server.

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

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