core/runtime

246 notes in this subject, read out of this brain and free to use. This is page 2 of 5.

ActionReturn Attributes for typing only

The Attributes type parameter in ActionReturn allows specifying which additional attributes and events the action enables on the applied element. This applies to TypeScript typings only and has no effect at runtime. Attributes can include custom properties and event handlers like 'on:event'.

ActionReturn example with custom attributes and events

Example of ActionReturn with custom attributes: interface Attributes { newprop?: string; 'on:event': (e: CustomEvent<boolean>) => void; }. The myAction function returns ActionReturn<Parameter, Attributes> with update and destroy methods implemented.

Action example with div and typed return

An example action that only works on HTMLDivElement elements and optionally accepts a parameter with a default value: export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => { ... }. The function can return an ActionReturn object with update and destroy methods.

ActionReturn destroy method

The destroy method of ActionReturn is called after the element is unmounted. It takes no parameters and returns void.

ActionReturn update method

The update method of ActionReturn receives the updated parameter and is called whenever that parameter changes, immediately after Svelte has applied updates to the markup. ActionReturn and ActionReturn<undefined> both mean that the action accepts no parameters.

ActionReturn interface properties

ActionReturn is a generic interface with two optional parameters: Parameter (default undefined) and Attributes (default Record<never, any>). It can contain two optional methods: update, which is called whenever the action parameter changes immediately after Svelte applies updates to the markup; and destroy, which is called after the element is unmounted.

Action parameter typing

Action<HTMLDivElement> and Action<HTMLDivElement, undefined> both signal that the action accepts no parameters. When defining an action with an optional parameter that has a default value, the type is specified as Action<Element, ParameterType | undefined>.

Action function signature and type

An Action is a function that is called when an element is created. The Action interface is generic with three type parameters: Element (default HTMLElement), Parameter (default undefined), and Attributes (default Record<never, any>). The function receives a node of the specified Element type and optionally a parameter. If Parameter is undefined, the parameter is optional; otherwise it is required. The function returns void or an ActionReturn object.

Actions have been superseded by attachments

The svelte/action module provides types for actions, but actions have been superseded by attachments. The documentation states that the Action and ActionReturn types are for historical reference, as the use directive (actions) is no longer the primary pattern.

unmount removes mounted component

unmount removes a component that was previously mounted using mount or hydrate. Since 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM. Returns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise.

setContext associates context with component

setContext associates an arbitrary context object with the current component and the specified key and returns that object. The context is then available to children of the component (including slotted content) with getContext. Must be called during component initialisation. createContext is a type-safe alternative.

tick waits for pending state changes

tick returns a promise that resolves once any pending state changes have been applied.

settled waits for state changes and DOM updates

settled returns a promise that resolves once any state changes, and asynchronous work resulting from them, have resolved and the DOM has been updated. Available since Svelte 5.36.

mount instantiates and mounts component

mount mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component. Transitions will play during the initial render unless the intro option is set to false. This replaces the class-based instantiation from Svelte 4.

onMount runs once after component mounts

onMount schedules a function to run as soon as the component has been mounted to the DOM. Unlike $effect, the provided function only runs once. It must be called during component initialisation but doesn't need to live inside the component. If a function is returned synchronously from onMount, it will be called when the component is unmounted. onMount functions do not run during server-side rendering.

onDestroy runs before component unmount

onDestroy schedules a callback to run immediately before the component is unmounted. Of onMount, beforeUpdate, afterUpdate and onDestroy, this is the only one that runs inside a server-side component.

MountOptions type for mount function

MountOptions type defines options for mount(): target (Document, Element, or ShadowRoot) is required; anchor (optional Node before which to render); events (optional, deprecated, use callback props instead); context (optional Map accessible via getContext); intro (optional boolean, default true, play transitions on initial render); transformError (optional function transforming errors caught by error boundaries); props (required if component expects props, otherwise optional).

hydrate mounts component on server-rendered content

hydrate hydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component. It accepts options: target (Document, Element, or ShadowRoot), optional props, optional events, optional context Map, optional intro boolean, optional recover boolean, and optional transformError function.

hasContext checks if context key exists

hasContext checks whether a given key has been set in the context of a parent component. Must be called during component initialisation.

getContext retrieves parent component context

getContext retrieves the context that belongs to the closest parent component with the specified key. Must be called during component initialisation. createContext is a type-safe alternative.

getAbortSignal returns AbortSignal for derived or effect

getAbortSignal returns an AbortSignal that aborts when the current $derived or $effect re-runs or is destroyed. Must be called while a derived or effect is running. This can be used with fetch() to abort requests when the effect reruns.

Fork.commit and Fork.discard methods

A Fork object has two methods: commit() which commits the fork and returns a Promise that resolves once the state change has been applied, and discard() which discards the fork to avoid memory leaks.

fork for speculative state changes

fork creates a 'fork' in which state changes are evaluated but not applied to the DOM. This is useful for speculatively loading data when you suspect the user is about to take some action. The fn parameter is a synchronous function that modifies state. State changes will be reverted after the fork is initialised, then reapplied if and when the fork is eventually committed. Available since Svelte 5.42.

flushSync synchronously applies state changes

flushSync synchronously flushes any pending updates. Returns void if no callback is provided, otherwise returns the result of calling the callback.

createContext for type-safe context management

createContext returns a [get, set] pair of functions for working with context in a type-safe way. The get function will throw an error if no parent component called set. Available since Svelte 5.40.0.

getAllContexts retrieves entire context map

getAllContexts retrieves the whole context map that belongs to the closest parent component. Must be called during component initialisation. Useful if you programmatically create a component and want to pass the existing context to it.

beforeUpdate deprecated, use $effect.pre instead

beforeUpdate schedules a callback to run immediately before the component is updated after any state change. In Svelte 5, use $effect.pre instead. The first time the callback runs will be before the initial onMount.

afterUpdate deprecated, use $effect instead

afterUpdate schedules a callback to run immediately after the component has been updated. In Svelte 5, use $effect instead. The first time the callback runs will be after the initial onMount.

SvelteComponent class deprecated in Svelte 5

SvelteComponent was the base class for Svelte components in Svelte 4. Svelte 5+ components are completely different under the hood. For typing, use Component instead. To instantiate components, use mount() instead.

svelte/animate import

The flip animation can be imported from the svelte/animate module using: import { flip } from 'svelte/animate';

FlipParams interface properties

FlipParams interface has the following optional properties: delay (number), duration (number or function accepting len: number and returning number), and easing ((t: number) => number).

AnimationConfig interface properties

AnimationConfig interface has the following optional properties: delay (number), duration (number), easing ((t: number) => number), css ((t: number, u: number) => string), and tick ((t: number, u: number) => void).

flip function signature

The flip function has the signature: flip(node: Element, { from, to }: { from: DOMRect; to: DOMRect; }, params?: FlipParams): AnimationConfig.

flip animation function from svelte/animate

The flip function from svelte/animate calculates the start and end position of an element and animates between them, translating the x and y values. FLIP stands for First, Last, Invert, Play.

run function executes immediately on server, behaves like $effect.pre on client

run is a deprecated function marked for temporary use only during migration. It runs the given function once immediately on the server, and works like $effect.pre on the client. Type signature: function run(fn: () => void | (() => void)): void.

Spring class properties

The Spring class has the following properties: damping (number), precision (number), stiffness (number), target (T, the end value of the spring), and current (getter returning T, the current value of the spring).

Spring.of static method for reactive binding

Spring has a static method of(fn: () => U, options?: SpringOptions): Spring that creates a spring whose value is bound to the return value of the function. This must be called inside an effect root, such as during component initialisation.

Spring class constructor

The Spring class from svelte/motion can be instantiated with a value and optional SpringOptions. Constructor signature: constructor(value: T, options?: SpringOptions).

prefersReducedMotion media query

prefersReducedMotion is a MediaQuery from svelte/motion (available since 5.7.0) that matches if the user prefers reduced motion. It can be accessed via prefersReducedMotion.current in transitions to adjust motion behavior based on user preferences.

spring function deprecated in Svelte 5.8.0

The spring function from svelte/motion is deprecated as of Svelte 5.8.0. Use the Spring class instead. Signature: function spring<T = any>(value?: T | undefined, opts?: SpringOptions | undefined): Spring<T>.

tweened function deprecated in Svelte 5.8.0

The tweened function from svelte/motion is deprecated as of Svelte 5.8.0. Use the Tween class instead. Signature: function tweened<T>(value?: T | undefined, defaults?: TweenOptions<T> | undefined): Tweened<T>.

Spring store interface extends Readable

The Spring interface extends Readable<T> and includes methods: set(new_value: T, opts?: SpringUpdateOptions): Promise<void>, update (deprecated, only on legacy spring store), subscribe (deprecated, only on legacy spring store), and properties: precision (number), damping (number), stiffness (number).

SpringOptions interface

SpringOptions is an interface with optional properties: stiffness (number), damping (number), precision (number).

Tween.set method

The Tween.set(value: T, options?: TweenOptions<T>): Promise<void> method sets tween.target to value and returns a Promise that resolves when tween.current catches up. If options are provided, they will override the tween's defaults.

SpringUpdateOptions interface

SpringUpdateOptions is an interface with the following properties: hard (any, deprecated for spring store only), soft (string | number | boolean, deprecated for spring store only), instant (boolean, only for Spring class), preserveMomentum (number, only for Spring class).

Tweened store interface extends Readable

The Tweened<T> interface extends Readable<T> and includes methods: set(value: T, opts?: TweenOptions<T>): Promise<void>, update(updater: Updater<T>, opts?: TweenOptions<T>): Promise<void>.

Tween class constructor

The Tween class from svelte/motion can be instantiated with a value and optional TweenOptions. Constructor signature: constructor(value: T, options?: TweenOptions<T>).

Tween.of static method for reactive binding

Tween has a static method of(fn: () => U, options?: TweenOptions): Tween that creates a tween whose value is bound to the return value of the function. This must be called inside an effect root, such as during component initialisation.

TweenOptions interface

TweenOptions<T> is an interface with optional properties: delay (number), duration (number | ((from: T, to: T) => number)), easing ((t: number) => number), interpolate ((a: T, b: T) => (t: number) => T).

Tween class properties

The Tween class has the following properties: current (getter returning T), target (getter and setter for T).

Spring.set method with options

The Spring.set(value: T, options?: SpringUpdateOptions): Promise<void> method sets spring.target to value and returns a Promise that resolves when spring.current catches up. The options.instant boolean immediately matches spring.current to spring.target. The options.preserveMomentum number specifies milliseconds to continue the spring's current trajectory, useful for fling gestures.

svelte/reactivity/window module exports reactive window values

The svelte/reactivity/window module exports reactive versions of various window values. Each export has a reactive current property that can be referenced in reactive contexts (templates, deriveds, and effects) without using <svelte:window> bindings or manually creating event listeners.

devicePixelRatio reactive window property

devicePixelRatio.current is a reactive view of window.devicePixelRatio with type { get current(): number | undefined }. On the server it is undefined. Browser behavior differs: on Chrome it responds to the current zoom level, while on Firefox and Safari it does not.

screenLeft and screenTop reactive window properties

screenLeft.current and screenTop.current are reactive views of window.screenLeft and window.screenTop respectively. Both have type ReactiveValue<number | undefined> and are updated inside a requestAnimationFrame callback. On the server they are undefined.

scrollX and scrollY reactive window properties

scrollX.current and scrollY.current are reactive views of window.scrollX and window.scrollY respectively. Both have type ReactiveValue<number | undefined> and are undefined on the server.

svelte/reactivity/window available since Svelte 5.11.0

All exports from svelte/reactivity/window (devicePixelRatio, innerHeight, innerWidth, online, outerHeight, outerWidth, screenLeft, screenTop, scrollX, scrollY) became available since Svelte 5.11.0.

online reactive navigator property

online.current is a reactive view of navigator.onLine with type ReactiveValue<boolean | undefined>. On the server it is undefined.

outerHeight and outerWidth reactive window properties

outerHeight.current and outerWidth.current are reactive views of window.outerHeight and window.outerWidth respectively. Both have type ReactiveValue<number | undefined> and are undefined on the server.

Example usage of reactive window values

Reactive window values can be imported from svelte/reactivity/window and used in templates. For example: import { innerWidth, innerHeight } from 'svelte/reactivity/window'; then reference them as {innerWidth.current}x{innerHeight.current} in markup.

render function location

The render function is imported from 'svelte/server'.

Give your agent this brain