Svelte

https://v4.svelte.dev/docs/
Admin
Svelte is a modern component framework that compiles your code into small, vanilla JavaScript...
Tokens:49,777
Snippets:623
Trust Score:9.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Start a New SvelteKit Project

Source: https://v4.svelte.dev/docs/introduction

Use this command to create a new SvelteKit project. After creation, navigate into the project directory, install dependencies, and start the development server.

```bash
npm create svelte@latest myapp
cd myapp
npm install
npm run dev
```

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

### Spring Usage Example

Source: https://v4.svelte.dev/docs/svelte-motion

Demonstrates how to initialize a spring store and dynamically update its properties.

```APIDOC
## Spring Initialization and Option Updates

```ts
import { spring } from 'svelte/motion';


const size = spring(100);
size.stiffness = 0.3;
size.damping = 0.4;
size.precision = 0.005;
```
```

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

### Using Scale Transition

Source: https://v4.svelte.dev/docs/svelte-transition

Example of applying the scale transition to an element with custom parameters for duration, delay, opacity, start scale, and easing.

```svelte
<script>
	import { scale } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

{#if condition}
	<div transition:scale={{ duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut }}>
		scales in and out
	</div>
{/if}
```

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

### Readable Store Examples

Source: https://v4.svelte.dev/docs/svelte-store

Demonstrates creating readable stores for a continuously updating date and a toggling sound ('tick'/'tock') using intervals.

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

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

### In and Out Directives Examples

Source: https://v4.svelte.dev/docs/element-directives

Examples of `in:` and `out:` directives for controlling element transitions when entering or leaving the DOM.

```svelte
in:fn
```

```svelte
in:fn={params}
```

```svelte
in:fn|global
```

```svelte
in:fn|global={params}
```

```svelte
in:fn|local
```

```svelte
in:fn|local={params}
```

```svelte
out:fn
```

```svelte
out:fn={params}
```

```svelte
out:fn|global
```

```svelte
out:fn|global={params}
```

```svelte
out:fn|local
```

```svelte
out:fn|local={params}
```

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

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

### Using Draw Transition on SVG Path

Source: https://v4.svelte.dev/docs/svelte-transition

Example of applying the draw transition to an SVG path element with parameters for duration, delay, and easing.

```svelte
<script>
	import { draw } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
	{#if condition}
		<path
			transition:draw={{ duration: 5000, delay: 500, easing: quintOut }}
			d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
			fill="none"
			stroke="cornflowerblue"
			stroke-width="0.1px"
			stroke-linejoin="round"
		/>
	{/if}
</svg>
```

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

### Using Crossfade Transition

Source: https://v4.svelte.dev/docs/svelte-transition

Example of using the crossfade transition to animate an element changing from a heading to a small text element, using a shared key for matching.

```svelte
<script>
	import { crossfade } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';

	const [send, receive] = crossfade({
		duration: 1500,
		easing: quintOut
	});
</script>

{#if condition}
	<h1 in:send={{ key }} out:receive={{ key }}>BIG ELEM</h1>
{:else}
	<small in:send={{ key }} out:receive={{ key }}>small elem</small>
{/if}
```

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

### Using Svelte Parse

Source: https://v4.svelte.dev/docs/svelte-compiler

Demonstrates how to import and use the `parse` function from 'svelte/compiler' to get the AST of a component template, specifying a filename in the options.

```typescript
import { parse } from 'svelte/compiler';


const ast = parse(source, { filename: 'App.svelte' });
```

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

### Writable Store with Start/Stop Notifiers (JavaScript)

Source: https://v4.svelte.dev/docs/svelte-store

Shows a writable store with a start function that logs when a subscriber is added and a stop function that logs when the last subscriber leaves. The initial `set` call is ignored.

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

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

### Multiple Preprocessors in TypeScript

Source: https://v4.svelte.dev/docs/svelte-compiler

Illustrates the usage of multiple preprocessors with the Svelte compiler in a TypeScript context. This example shows the same logic as the JavaScript version but with TypeScript syntax.

```typescript
import { preprocess } from 'svelte/compiler';


const { code } = await preprocess(
	ssource,
	[
		{
			name: 'first preprocessor',
			markup: () => {
				console.log('this runs first');
			},
			script: () => {
				console.log('this runs second');
			},
			style: () => {
				console.log('this runs third');
			},
		},
		{
			name: 'second preprocessor',
			markup: () => {
				console.log('this runs fourth');
			},
			script: () => {
				console.log('this runs fifth');
			},
			style: () => {
				console.log('this runs sixth');
			},
		},
	],
	{
		filename: 'App.svelte',
	},
);

```

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

### Fly Transition Example

Source: https://v4.svelte.dev/docs/svelte-transition

Animates an element's position (x, y) and opacity. Parameters include delay, duration, easing, x, y, and opacity. Use with `transition:fly`, `in:fly`, or `out:fly`.

```typescript
function fly(
	node: Element,
	{
		delay,
		duration,
		easing,
		x,
		y,
		opacity
	}?: FlyParams | undefined
): TransitionConfig;
```

```svelte
<script>
	import { fly } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

{#if condition}
	<div
		transition:fly={{ delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut }}
	>
		flies in and out
	</div>
{/if}
```

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

### Simple Derived Store Example

Source: https://v4.svelte.dev/docs/svelte-store

Creates a derived store that doubles the value of another store. This is useful for computed values based on a single source store.

```typescript
import { derived } from 'svelte/store';


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

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

### Sass Preprocessing with MagicString and Sass Render

Source: https://v4.svelte.dev/docs/svelte-compiler

An advanced preprocessor example that handles Sass in <style lang="sass"> blocks, compiles it to CSS using the 'sass' package, and manages dependencies.

```typescript
import { preprocess } from 'svelte/compiler';
import MagicString from 'magic-string';


import sass from 'sass';
import { dirname } from 'path';


const { code } = await preprocess(
	source,
	{
		name: 'my-fancy-preprocessor',
		markup: ({ content, filename }) => {
			// Return code as is when no foo string present
			const pos = content.indexOf('foo');
			if (pos < 0) {
				return;
			}


			// Replace foo with bar using MagicString which provides
			// a source map along with the changed code
			const s = new MagicString(content, { filename });
			s.overwrite(pos, pos + 3, 'bar', { storeName: true });


			return {
				code: s.toString(),
				map: s.generateMap({ hires: true, file: filename })
			};
		},
		style: async ({ content, attributes, filename }) => {
			// only process <style lang="sass">
			if (attributes.lang !== 'sass') return;


			const { css, stats } = await new Promise((resolve, reject) =>
				sass.render(
					{
						file: filename,
						data: content,
						includePaths: [dirname(filename)]
					},
					(err, result) => {
						if (err) reject(err);
						else resolve(result);
					}
				)
			);


			// remove lang attribute from style tag
			delete attributes.lang;


			return {
				code: css.toString(),
				dependencies: stats.includedFiles,
				attributes
			};
		}
	},
	{
		filename: 'App.svelte'
	}
);

```

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

### Applying a Transition to an Element

Source: https://v4.svelte.dev/docs/element-directives

Example of applying a fade transition to a div that is conditionally rendered.

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

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

### Fade Transition Example

Source: https://v4.svelte.dev/docs/svelte-transition

Animates an element's opacity. Accepts delay, duration, and easing parameters. Use with `transition:fade`, `in:fade`, or `out:fade` directives.

```typescript
function fade(
	node: Element,
	{ delay, duration, easing }?: FadeParams | undefined
): TransitionConfig;
```

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

{#if condition}
	<div transition:fade={{ delay: 250, duration: 300 }}>fades in and out</div>
{/if}
```

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

### Binding to File Input

Source: https://v4.svelte.dev/docs/element-directives

Use `bind:files` on a file input element to get a `FileList` of the selected files. This binding is read-only.

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

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

### Blur Transition Example

Source: https://v4.svelte.dev/docs/svelte-transition

Animates an element's blur filter and opacity. Configurable with delay, duration, easing, amount, and opacity. Applied using `transition:blur`, `in:blur`, or `out:blur`.

```typescript
function blur(
	node: Element,
	{
		delay,
		duration,
		easing,
		amount,
		opacity
	}?: BlurParams | undefined
): TransitionConfig;
```

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

{#if condition}
	<div transition:blur={{ amount: 10 }}>fades in and out</div>
{/if}
```

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

### Slide Transition Example

Source: https://v4.svelte.dev/docs/svelte-transition

Slides an element in and out along a specified axis. Accepts delay, duration, easing, and axis ('x' or 'y') parameters. Applied via `transition:slide`, `in:slide`, or `out:slide`.

```typescript
function slide(
	node: Element,
	{
		delay,
		duration,
		easing,
		axis
	}?: SlideParams | undefined
): TransitionConfig;
```

```svelte
<script>
	import { slide } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

{#if condition}
	<div transition:slide={{ delay: 250, duration: 300, easing: quintOut, axis: 'x' }}>
		slides in and out horizontally
	</div>
{/if}
```

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

### Derived Store with Asynchronous Update

Source: https://v4.svelte.dev/docs/svelte-store

Creates a derived store that updates its value asynchronously using the `update` callback. This example increments the value after a delay.

```typescript
import { derived } from 'svelte/store';


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

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

### Render a Server-Side Component

Source: https://v4.svelte.dev/docs/server-side-component-api

Call the `render` method on a server-side component to get its HTML, CSS, and head content. This is the primary way to render components on the server.

```typescript
const result = Component.render(...)
```

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

### Debug Tag Compilation Examples

Source: https://v4.svelte.dev/docs/special-tags

Illustrates valid and invalid uses of the {@debug ...} tag. Only direct variable names are compiled; expressions and property access are not.

```svelte
<!-- Compiles -->
{@debug user}
{@debug user1, user2, user3}

<!-- WON'T compile -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}
```

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

### Programmatic Access to Component Instances with bind:this

Source: https://v4.svelte.dev/docs/component-directives

Use `bind:this` to get a direct reference to a component instance. This allows for programmatic interaction with the component's methods or properties after it has been rendered.

```svelte
<ShoppingCart bind:this={cart} />

<button on:click={() => cart.empty()}> Empty shopping cart </button>
```

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

### Svelte Action with Custom Attributes and Events (JavaScript)

Source: https://v4.svelte.dev/docs/svelte-action

An example of a Svelte action that dispatches a custom event and is typed to handle specific attributes and event listeners.

```svelte
<script>
	/**
	 * @type {import('svelte/action').Action<HTMLDivElement, { prop: any }, { 'on:emit': (e: CustomEvent<string>) => void }>}
	 */
	function foo(node, { prop }) {
		// the node has been mounted in the DOM

		//...LOGIC
		node.dispatchEvent(new CustomEvent('emit', { detail: 'hello' }));

		return {
			destroy() {
				// the node has been removed from the DOM
			}
		};
	}
</script>

<div on:emit={handleEmit} use:foo={{ prop: 'someValue' }} />

```

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

### Using FLIP Animation in Svelte

Source: https://v4.svelte.dev/docs/svelte-animate

Example of applying the `animate:flip` directive to an element within a Svelte `#each` block. This animates list items as they are added, removed, or reordered.

```svelte
<script>
	import { flip } from 'svelte/animate';
	import { quintOut } from 'svelte/easing';

	let list = [1, 2, 3];
</script>

{#each list as n (n)}
	<div animate:flip={{ delay: 250, duration: 250, easing: quintOut }}>
		{n}
	</div>
{/each}
```

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

### Spring Initialization with Options

Source: https://v4.svelte.dev/docs/svelte-motion

Illustrates initializing a spring store with both an initial value and configuration options for stiffness and damping.

```svelte
<script>
	import { spring } from 'svelte/motion';

	const coords = spring(
		{ x: 50, y: 50 },
		{
			stiffness: 0.1,
			damping: 0.25
		}
	);
</script>
```

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

### Get DOM Node Reference with bind:this

Source: https://v4.svelte.dev/docs/element-directives

Use `bind:this` to get a direct reference to a DOM node. This is useful for interacting with the DOM directly, for example, to draw on a canvas.

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

	/** @type {HTMLCanvasElement} */
	let canvasElement;

	onMount(() => {
		const ctx = canvasElement.getContext('2d');
		drawStuff(ctx);
	});
</script>

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

```svelte
<script lang="ts">
	import { onMount } from 'svelte';
	
	let canvasElement: HTMLCanvasElement;
	
	onMount(() => {
		const ctx = canvasElement.getContext('2d');
		drawStuff(ctx);
	});
</script>

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

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

### Spring Initialization and Configuration

Source: https://v4.svelte.dev/docs/svelte-motion

Demonstrates how to initialize a spring store and dynamically change its stiffness, damping, and precision parameters.

```typescript
import { spring } from 'svelte/motion';


const size = spring(100);
size.stiffness = 0.3;
size.damping = 0.4;
size.precision = 0.005;
```

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

### Handling Svelte Transition Events

Source: https://v4.svelte.dev/docs/element-directives

Demonstrates how to listen for and react to transition events like `introstart`, `introend`, `outrostart`, and `outroend` using `on:` directives.

```svelte
{#if visible}
	<p
		transition:fly={{ y: 200, duration: 2000 }}
		on:introstart={() => (status = 'intro started')}
		on:outrostart={() => (status = 'outro started')}
		on:introend={() => (status = 'intro ended')}
		on:outroend={() => (status = 'outro ended')}
	>
		Flies in and out
	</p>
{/if}

```

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

### SvelteComponent Property Definition

Source: https://v4.svelte.dev/docs/typescript

Example of a property definition within a Svelte component, allowing for dynamic properties.

```typescript
[prop: string]: any;
```

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

### Readable Store Definition

Source: https://v4.svelte.dev/docs/svelte-store

Defines the TypeScript signature for a readable store, which has an initial value and an optional start function.

```typescript
function readable<T>(
	value?: T | undefined,
	start?: StartStopNotifier<T> | undefined
): Readable<T>;
```

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

### Basic Writable Store Usage

Source: https://v4.svelte.dev/docs/svelte-store

Demonstrates creating, subscribing to, setting, and updating a basic writable store in JavaScript.

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

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

### get

Source: https://v4.svelte.dev/docs/svelte-store

Retrieves the current value of a store without subscribing to it. This is useful for accessing store values in non-reactive contexts.

```APIDOC
## get

### Description
Retrieves the current value of a store without subscribing. This is done by creating a temporary subscription, reading the value, and then unsubscribing.

### Warning
This method is not recommended for use in frequently called code paths due to the overhead of creating and tearing down subscriptions.

### Signature
```ts
function get<T>(store: Readable<T>): T;
```

### Usage Example
```ts
import { get } from 'svelte/store';

const value = get(store);
```
```

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

### Using HTML and Svelte Components

Source: https://v4.svelte.dev/docs/basic-markup

Demonstrates the use of standard HTML tags and Svelte components. Capitalized tags indicate components.

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

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

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

### StartStopNotifier Type

Source: https://v4.svelte.dev/docs/svelte-store

Defines the type for functions that are called when a store gains its first subscriber (start) and when the last subscriber unsubscribes (stop).

```typescript
type StartStopNotifier<T> = (
	set: (value: T) => void,
	update: (fn: Updater<T>) => void
) => void | (() => void);
```

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

### Basic Transition Directive Syntax

Source: https://v4.svelte.dev/docs/element-directives

These show the basic syntax for applying transition directives.

```svelte
transition:fn
```

```svelte
transition:fn={params}
```

```svelte
transition:fn|global
```

```svelte
transition:fn|global={params}
```

```svelte
transition:fn|local
```

```svelte
transition:fn|local={params}
```

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

### Component Initialization

Source: https://v4.svelte.dev/docs/client-side-component-api

Creates a new client-side component instance. The `target` option is required to specify where the component should be rendered.

```APIDOC
## Component Initialization

### Description
Creates a new client-side component instance. The `target` option is required to specify where the component should be rendered.

### Constructor
`new Component(options)`

### Options
- **target** (`HTMLElement` | `ShadowRoot`) - Required - An `HTMLElement` or `ShadowRoot` to render to.
- **anchor** (`HTMLElement`) - Optional - A child of `target` to render the component immediately before.
- **props** (`object`) - Optional - An object of properties to supply to the component.
- **context** (`Map`) - Optional - A `Map` of root-level context key-value pairs to supply to the component.
- **hydrate** (`boolean`) - Optional - Instructs Svelte to upgrade existing DOM rather than creating new elements. Requires component to be compiled with `hydratable: true`.
- **intro** (`boolean`) - Optional - If `true`, plays transitions on initial render.

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

const app = new App({
	target: document.body,
	props: {
		answer: 42
	}
});
```
```

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

### Using Svelte Compile

Source: https://v4.svelte.dev/docs/svelte-compiler

Demonstrates how to import and use the `compile` function from the 'svelte/compiler' module with source code and options.

```typescript
import { compile } from 'svelte/compiler';


const result = compile(source, {
	// options
});
```

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

### Enforce Correct Aria Attribute Type

Source: https://v4.svelte.dev/docs/accessibility-warnings

Ensures that ARIA attributes use the correct value type. For example, `aria-hidden` must be a boolean.

```html
<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->
<div aria-hidden="yes" />
```

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

### Bind Block-level Element Dimensions

Source: https://v4.svelte.dev/docs/element-directives

Binds to read-only properties like `clientWidth`, `clientHeight`, `offsetWidth`, and `offsetHeight` of block-level elements to get their dimensions.

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

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

### onMount with Cleanup Function

Source: https://v4.svelte.dev/docs/svelte

Sets up an interval on mount and clears it on unmount.

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

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

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

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

### Transition with Parameters

Source: https://v4.svelte.dev/docs/element-directives

Shows how to pass parameters to a transition directive to customize its duration.

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

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

### CompileResult.warnings Property

Source: https://v4.svelte.dev/docs/svelte-compiler

An array of warning objects generated during compilation. Each warning includes a code, message, and optional location details (start, end, frame).

```typescript
warnings: Warning[];
```

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

### Accessing Svelte Compiler Version

Source: https://v4.svelte.dev/docs/svelte-compiler

Import and use the `VERSION` constant to get the current version of the Svelte compiler. This value is derived from the `package.json` file.

```typescript
const VERSION: string;

```

```typescript
import { VERSION } from 'svelte/compiler';
console.log(`running svelte version ${VERSION}`);

```

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

### Spring Updates with Immediate and Soft Options

Source: https://v4.svelte.dev/docs/svelte-motion

Shows how to use the `set` and `update` methods on a spring store, including options for immediate value changes (`hard: true`) and preserving momentum (`soft: n`).

```typescript
import { spring } from 'svelte/motion';


const coords = spring({ x: 50, y: 50 });
// updates the value immediately
coords.set({ x: 100, y: 200 }, { hard: true });
// preserves existing momentum for 1s
coords.update(
	(target_coords, coords) => {
		return { x: target_coords.x, y: coords.y };
	},
	{ soft: 1 }
);
```

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

### Enforce correct element structure

Source: https://v4.svelte.dev/docs/accessibility-warnings

Ensure that specific DOM elements follow the correct structural hierarchy. For example, <figcaption> must be an immediate child of <figure>.

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

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

### Local vs. Global Transitions

Source: https://v4.svelte.dev/docs/element-directives

Demonstrates the difference between local and global transitions based on block rendering.

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

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

### Ensure ARIA role has required props

Source: https://v4.svelte.dev/docs/accessibility-warnings

Elements with ARIA roles must include all attributes required by that role. For example, a 'checkbox' role requires 'aria-checked'.

```html
<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
<span role="checkbox" aria-labelledby="foo" tabindex="0" />
```

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

### Basic Preprocessing with MagicString

Source: https://v4.svelte.dev/docs/svelte-compiler

Demonstrates a simple markup preprocessor that replaces 'foo' with 'bar' using MagicString for code transformation and source map generation.

```typescript
import { preprocess } from 'svelte/compiler';
import MagicString from 'magic-string';


const { code } = await preprocess(
	source,
	{
		markup: ({ content, filename }) => {
			const pos = content.indexOf('foo');
			if (pos < 0) {
				return { code: content };
			}
			const s = new MagicString(content, { filename });
			s.overwrite(pos, pos + 3, 'bar', { storeName: true });
			return {
				code: s.toString(),
				map: s.generateMap()
			};
		}
	},
	{
		filename: 'App.svelte'
	}
);

```

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

### Initialize a Svelte App Component

Source: https://v4.svelte.dev/docs/client-side-component-api

Import and instantiate the main Svelte application component. Specify the target DOM element and initial props.

```typescript
import App from './App.svelte';


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

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

### Spring Set and Update Methods

Source: https://v4.svelte.dev/docs/svelte-motion

Explains the `set` and `update` methods for spring stores, including options for immediate updates and momentum preservation.

```APIDOC
## Spring Set and Update Methods

As with `tweened` stores, `set` and `update` return a Promise that resolves if the spring settles.
Both `set` and `update` can take a second argument — an object with `hard` or `soft` properties. `{ hard: true }` sets the target value immediately; `{ soft: n }` preserves existing momentum for `n` seconds before settling. `{ soft: true }` is equivalent to `{ soft: 0.5 }`.

### Example Usage

```ts
import { spring } from 'svelte/motion';


const coords = spring({ x: 50, y: 50 });
// updates the value immediately
coords.set({ x: 100, y: 200 }, { hard: true });
// preserves existing momentum for 1s
coords.update(
	(target_coords, coords) => {
		return { x: target_coords.x, y: coords.y };
	},
	{ soft: 1 }
);
```
```

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

### Multiple Preprocessors in JavaScript

Source: https://v4.svelte.dev/docs/svelte-compiler

Demonstrates using multiple preprocessors with the Svelte compiler in a JavaScript environment. Each preprocessor can hook into 'markup', 'script', and 'style' transformations.

```javascript
import { preprocess } from 'svelte/compiler';


const { code } = await preprocess(source, [
	{
		name: 'first preprocessor',
		markup: () => {
			console.log('this runs first');
		},
		script: () => {
			console.log('this runs second');
		},
		style: () => {
			console.log('this runs third');
		}
	},
	{
		name: 'second preprocessor',
		markup: () => {
			console.log('this runs fourth');
		},
		script: () => {
			console.log('this runs fifth');
		},
		style: () => {
			console.log('this runs sixth');
		}
	}
], {
	filename: 'App.svelte'
});

```

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

### Basic onMount Usage in Svelte

Source: https://v4.svelte.dev/docs/svelte

Logs a message to the console when the component mounts.

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

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

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

### Get Store Value

Source: https://v4.svelte.dev/docs/svelte-store

Retrieves the current value of a store without subscribing to it. This is done by creating a temporary subscription. Not recommended for frequent use in performance-critical code.

```typescript
import { get } from 'svelte/store';


const value = get(store);
```

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

### Svelte Auto-declared Reactive Variables (TypeScript)

Source: https://v4.svelte.dev/docs/svelte-components

TypeScript example showing Svelte automatically declaring variables within reactive statements. `squared` and `cubed` are implicitly declared.

```svelte
<script lang="ts">
	export let num: number;
	
	// we don't need to declare `squared` and `cubed`
	// — Svelte does it for us
	$: squared = num * num;
	$: cubed = squared * num;
</script>
```

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

### Do Not Hide Important Elements

Source: https://v4.svelte.dev/docs/accessibility-warnings

This example shows an `<h2>` element with `aria-hidden="true"`. Svelte warns against hiding elements that are important for screen reader navigation.

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

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

### Svelte Action with Custom Attributes and Events (TypeScript)

Source: https://v4.svelte.dev/docs/svelte-action

A TypeScript example of a Svelte action that defines custom attributes and events, ensuring type safety for complex interactions.

```svelte
<script lang="ts">
	import type { Action } from 'svelte/action';
	
	const foo: Action<
		HTMLDivElement,
		{ prop: any },
		{ 'on:emit': (e: CustomEvent<string>) => void }
	> = (node, { prop }) => {
		// the node has been mounted in the DOM

		//...LOGIC
		node.dispatchEvent(new CustomEvent('emit', { detail: 'hello' }));

		return {
			destroy() {
				// the node has been removed from the DOM
			},
		};
	};
</script>

<div on:emit={handleEmit} use:foo={{ prop: 'someValue' }} />

```

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

### Animate Directive with Keyed Each Block

Source: https://v4.svelte.dev/docs/element-directives

Demonstrates how to apply the `animate:flip` directive to list items within a keyed each block to animate reordering.

```svelte
<!-- When `list` is reordered the animation will run-->
{#each list as item, index (item)}
	<li animate:flip>{item}</li>
{/each}
```

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

### Instantiate a Client-Side Component

Source: https://v4.svelte.dev/docs/client-side-component-api

Create a new instance of a client-side Svelte component. This is typically done after importing the component.

```typescript
const component = new Component(options);
```

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

### FLIP Animation Function Signature

Source: https://v4.svelte.dev/docs/svelte-animate

The TypeScript signature for the FLIP animation function. It takes the DOM node, start and end positions, and optional parameters for animation configuration.

```typescript
function flip(
	node: Element,
	{
		from,
		to
	}: {
		from: DOMRect;
		to: DOMRect;
	},
	params?: FlipParams
): AnimationConfig;
```

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

### Get Component Events Type in Svelte

Source: https://v4.svelte.dev/docs/svelte

Use `ComponentEvents` to infer the expected event types for a given Svelte component. This is useful for strongly typing event handler functions.

```svelte
<script lang="ts">
   import type { ComponentEvents } from 'svelte';
   import Component from './Component.svelte';

   function handleCloseEvent(event: ComponentEvents<Component>['close']) {
	  console.log(event.detail);
   }
</script>

<Component on:close={handleCloseEvent} />
```

```typescript
type ComponentEvents<Component extends SvelteComponent_1>
	= Component extends SvelteComponent<any, infer Events>
		? Events
		: never;
```

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

### Import and Render Server-Side Component with Props

Source: https://v4.svelte.dev/docs/server-side-component-api

Use `svelte/register` to import Svelte components directly in Node. Then, call the `render` method with props to generate the component's output.

```typescript
require('svelte/register');


const App = require('./App.svelte').default;


const { head, html, css } = App.render({
	answer: 42
});
```

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

### Basic Event Listener with Function Handler

Source: https://v4.svelte.dev/docs/element-directives

Use the `on:` directive to listen for DOM events like 'click' and associate them with a handler function. This is a standard way to react to user interactions.

```svelte
<script>
	let count = 0;

	/** @param {MouseEvent} event */
	function handleClick(event) {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	count: {count}
</button>
```

```svelte
<script lang="ts">
	let count = 0;
	
	function handleClick(event: MouseEvent) {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	count: {count}
</button>
```

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

### beforeUpdate

Source: https://v4.svelte.dev/docs/svelte

Schedules a callback to run immediately before the component is updated after any state change. The first time the callback runs will be before the initial onMount.

```APIDOC
## beforeUpdate

### Description
Schedules a callback to run immediately before the component is updated after any state change. The first time the callback runs will be before the initial `onMount`.

### Signature
```ts
function beforeUpdate(fn: () => any): void;
```

### Example
```svelte
<script>
	import { beforeUpdate } from 'svelte';

	beforeUpdate(() => {
		console.log('the component is about to update');
	});
</script>
```
```

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

### HTML Attributes and Component Props

Source: https://v4.svelte.dev/docs/basic-markup

Shows how to use standard HTML attributes and pass properties (props) to components. Boolean attributes are included if truthy.

```html
<div class="foo">
	<button disabled>can't touch this</button>
</div>
```

```html
<input type=checkbox />
```

```html
<a href="page/{p}">page {p}</a>
```

```html
<button disabled={!clickable}>...</button>
```

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

```html
<button disabled="{number !== 42}">...</button>
```

```html
<button {disabled}>...</button>
<!-- equivalent to
<button disabled={disabled}>...</button>
-->
```

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

```svelte
<Widget {...things} />
```

```svelte
<Widget {...$$props} />
```

```svelte
<input {...$$restProps} />
```

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

### Animate Directive with Parameters

Source: https://v4.svelte.dev/docs/element-directives

Shows how to pass parameters, such as `delay`, to an animation directive like `animate:flip`.

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

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

### Get Component Props Type in Svelte

Source: https://v4.svelte.dev/docs/svelte

Use `ComponentProps` to infer the expected prop types for a Svelte component. This allows for strongly typed prop objects when initializing or updating components.

```svelte
<script lang="ts">
	import type { ComponentProps } from 'svelte';
	import Component from './Component.svelte';

	const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
</script>
```

```typescript
type ComponentProps<Component extends SvelteComponent_1>
	= Component extends SvelteComponent<infer Props>
		? Props
		: never;
```

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

### Limitations: No TypeScript in Markup

Source: https://v4.svelte.dev/docs/typescript

TypeScript cannot be used directly within Svelte templates for type annotations or declarations. Examples show invalid syntax for casting and reactive type declarations within the markup.

```typescript
<script lang="ts">
	let count = 10;
</script>

<h1>Count as string: {count as string}!</h1> <!-- ❌ Does not work -->
{#if count > 4}
	{@const countString: string = count} <!-- ❌ Does not work -->
	{countString}
{/if}
```

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

### onMount

Source: https://v4.svelte.dev/docs/svelte

Schedules a callback to run as soon as the component has been mounted to the DOM. If a function is returned, it will be called when the component is unmounted.

```APIDOC
## onMount

### Description
Schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation. If a function is returned from `onMount`, it will be called when the component is unmounted.

### Signature
```ts
function onMount<T>(
	fn: () =>
		| NotFunction<T>
		| Promise<NotFunction<T>>
		| (() => any)
): void;
```

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

	onMount(() => {
		console.log('the component has mounted');

		// Optional: return a cleanup function
		return () => {
			console.log('component unmounting');
		};
	});
</script>
```
```

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

### Slot and Slot Prop Typing in TypeScript Svelte

Source: https://v4.svelte.dev/docs/typescript

Slot prop types are automatically inferred from the types of the props passed to the slot. This example shows a basic slot usage with a typed prop.

```html
<script lang="ts">
	export let name: string;
</script>

<slot {name} />

<!-- Later -->
<Comp let:name>
	<!--    ^ Inferred as string -->
	{name}
</Comp>

```

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

### Recreating Content with {#key}

Source: https://v4.svelte.dev/docs/logic-blocks

Use {#key} blocks to destroy and recreate their contents when an expression's value changes. Useful for transitions or component reinitialization.

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

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

```svelte
{#key value}
	<Component />
{/key}
```

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

### Basic Tweened Animation

Source: https://v4.svelte.dev/docs/svelte-motion

Demonstrates a basic tweened animation for a scale transform. The 'size' store is incremented on button click, animating the scale over 300ms using cubicOut easing.

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

	const size = tweened(1, {
		duration: 300,
		easing: cubicOut
	});

	function handleClick() {
		// this is equivalent to size.update(n => n + 1)
		$size += 1;
	}
</script>

<button on:click={handleClick} style="transform: scale({$size}); transform-origin: 0 0">
	embiggen
</button>
```

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

### Component.render()

Source: https://v4.svelte.dev/docs/server-side-component-api

Renders a server-side Svelte component, returning its head, HTML, and CSS. The `render` method accepts optional props and an options object for context.

```APIDOC
## Component.render()

### Description
Renders a server-side Svelte component to generate HTML, CSS, and head content. This method is used for server-side rendering and does not involve component lifecycles after rendering.

### Method
`render(props?, options?)`

### Parameters
#### Props
- **props** (object) - Optional - An object of properties to supply to the component.

#### Options
- **options** (object) - Optional - An object of options for rendering.
  - **context** (Map) - Default: `new Map()` - A `Map` of root-level context key-value pairs to supply to the component.

### Request Example
```javascript
// Assuming App is a server-side Svelte component imported via require('svelte/register')
const App = require('./App.svelte').default;

const { head, html, css } = App.render(
  // props
  { answer: 42 },
  // options
  {
    context: new Map([['context-key', 'context-value']])
  }
);
```

### Response
- **head** (string) - The content of any `<svelte:head>` elements encountered during rendering.
- **html** (string) - The generated HTML string for the component.
- **css** (string) - The generated CSS string for the component.
```

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

### Redundant Alt Text in Images

Source: https://v4.svelte.dev/docs/accessibility-warnings

These examples demonstrate images with `alt` attributes that include redundant words like 'Photo', 'Image', or 'Picture'. Svelte warns against this as screen readers already announce `<img>` elements as images.

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

```svelte
<!-- 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" />
```

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

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

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

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

### CompileOptions: generate

Source: https://v4.svelte.dev/docs/svelte-compiler

Determines the output format: 'dom' for mounting to the DOM, 'ssr' for server-side rendering, or false for metadata only. Defaults to 'dom'.

```typescript
generate?: 'dom' | 'ssr' | false;
```

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

### afterUpdate

Source: https://v4.svelte.dev/docs/svelte

Schedules a callback to run immediately after the component has been updated. The first time the callback runs will be after the initial onMount.

```APIDOC
## afterUpdate

### Description
Schedules a callback to run immediately after the component has been updated. The first time the callback runs will be after the initial `onMount`.

### Signature
```ts
function afterUpdate(fn: () => any): void;
```

### Example
```svelte
<script>
	import { afterUpdate } from 'svelte';

	afterUpdate(() => {
		console.log('the component just updated');
	});
</script>
```
```

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

### Handle Click Events on Non-Interactive Elements

Source: https://v4.svelte.dev/docs/accessibility-warnings

When using `on:click` on a non-interactive element, Svelte warns if a corresponding keyboard event handler is missing. This example shows a basic `on:click` without keyboard support, triggering the warning.

```svelte
<!-- A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. -->
<div on:click={() => {}} />
```

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

### getAllContexts

Source: https://v4.svelte.dev/docs/svelte

Retrieves the whole context map that belongs to the closest parent component. Must be called during component initialisation.

```APIDOC
## getAllContexts

### Description
Retrieves the whole context map that belongs to the closest parent component. Must be called during component initialisation. Useful, for example, if you programmatically create a component and want to pass the existing context to it.

### Signature
```ts
function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T;
```

### Example
```svelte
<script>
	import { getAllContexts } from 'svelte';

	const contexts = getAllContexts();
</script>
```
```

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

### Avoid ARIA Attributes on Specific Elements

Source: https://v4.svelte.dev/docs/accessibility-warnings

This example shows a `<meta>` element with an `aria-hidden` attribute. Svelte warns against using ARIA attributes on certain non-visible DOM elements like `meta`, `html`, `script`, and `style`.

```svelte
<!-- A11y: <meta> should not have aria-* attributes -->
<meta aria-hidden="false" />
```

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

### Configure Custom Element Options in Svelte

Source: https://v4.svelte.dev/docs/custom-elements-api

Use the `customElement` object within `<svelte:options>` to configure custom element behavior. This example shows setting the tag name, disabling shadow DOM, customizing a prop's attribute name and type, and extending the custom element class to integrate with HTML forms using `ElementInternals`.

```svelte
<svelte:options
	customElement={{
		tag: 'custom-element',
		shadow: 'none',
		props: {
			name: { reflect: true, type: 'Number', attribute: 'element-index' }
		},
		extend: (customElementConstructor) => {
			// Extend the class so we can let it participate in HTML forms
			return class extends customElementConstructor {
				static formAssociated = true;

				constructor() {
					super();
					this.attachedInternals = this.attachInternals();
				}

				// Add the function here, not below in the component so that
				// it's always available, not just when the inner Svelte component
				// is mounted
				randomIndex() {
					this.elementIndex = Math.random();
				}
			};
		}
	}}
/>

<script>
	export let elementIndex;
	export let attachedInternals;
	// ...
	function check() {
		attachedInternals.checkValidity();
	}
</script>

...
```

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

### Processed.dependencies Property

Source: https://v4.svelte.dev/docs/svelte-compiler

A list of additional files that should be watched for changes by the build process.

```typescript
dependencies?: string[];
```
Tokens:
Raw