render function signature and options
The render function accepts a component and optional options object. When no props are required, the options parameter is optional and can include: props (Omit<Props, '$$slots' | '$$events'>), context (Map<any, any>), idPrefix (string), csp (Csp), and transformError (function accepting unknown and returning unknown | Promise<unknown>). When props are required, the options parameter becomes mandatory with the same structure. The function returns RenderOutput.
render function location
The render function is imported from 'svelte/server'.
render function availability
The render function is only available on the server and when compiling with the 'server' option.
derived store creates a Readable from multiple stores
Derived value store synchronizes one or more readable stores and applies an aggregation function over its input values, returning a Readable store.
StartStopNotifier callback type
The StartStopNotifier<T> type is a callback function called when the first subscriber subscribes. Its signature is: type StartStopNotifier<T> = (set: (value: T) => void, update: (fn: Updater<T>) => void) => void | (() => void). It receives set and update functions and can optionally return a teardown function.
Readable interface subscribe method
The Readable interface has a subscribe method with signature: subscribe(this: void, run: Subscriber<T>, invalidate?: () => void): Unsubscriber. The run parameter is the subscription callback, and the optional invalidate parameter is a cleanup callback. This method subscribes on value changes and returns an Unsubscriber.
writable store creation
The writable function creates a Writable store that allows both updating and reading by subscription. The signature is: function writable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Writable<T>. It takes an optional initial value and an optional StartStopNotifier callback.
fromStore converts Writable store to object
The fromStore function converts a Writable<V> store to an object with a mutable current property. The signature is: function fromStore<V>(store: Writable<V>): { current: V; }.
derived store function signature with custom logic
The derived store function accepts stores, a function that takes values from those stores, set and update callbacks, and an optional initial_value. The function can return an Unsubscriber or void. The signature is: function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, set: (value: T) => void, update: (fn: Updater<T>) => void) => Unsubscriber | void, initial_value?: T | undefined): Readable<T>.
toStore converts getter to Readable
The toStore function converts a getter function to a Readable store. The signature is: function toStore<V>(get: () => V): Readable<V>.
readonly wraps a store
The readonly function takes a store and returns a new one derived from the old one that is readable. The signature is: function readonly<T>(store: Readable<T>): Readable<T>.
readable store creation
The readable function creates a Readable store that allows reading by subscription. The signature is: function readable<T>(value?: T | undefined, start?: StartStopNotifier<T> | undefined): Readable<T>. It takes an optional initial value and an optional StartStopNotifier callback.
get retrieves current store value
The get function retrieves the current value from a store by subscribing and immediately unsubscribing. The signature is: function get<T>(store: Readable<T>): T.
fromStore converts Readable store to object
The fromStore function converts a Readable<V> store to an object with a readonly current property. The signature is: function fromStore<V>(store: Readable<V>): { readonly current: V; }.
derived store function signature with synchronous transformation
The derived store function can accept stores, a function that takes values from those stores and returns a transformed value synchronously, and an optional initial_value. The signature is: function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>) => T, initial_value?: T | undefined): Readable<T>.
Writable interface extends Readable
The Writable<T> interface extends Readable<T> and adds two methods: set(this: void, value: T): void for setting value and informing subscribers, and update(this: void, updater: Updater<T>): void for updating value using a callback and informing subscribers.
svelte/store exports
The svelte/store module exports: derived, fromStore, get, readable, readonly, toStore, and writable.
Updater callback type
The Updater<T> type is a callback to update a value. Its signature is: type Updater<T> = (value: T) => T.
Unsubscriber callback type
The Unsubscriber type is a callback that unsubscribes from value updates. Its signature is: type Unsubscriber = () => void.
Subscriber callback type
The Subscriber<T> type is a callback to inform of value updates. Its signature is: type Subscriber<T> = (value: T) => void.
fade transition function
The fade transition animates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions. It accepts optional FadeParams with properties: delay (number), duration (number), and easing (EasingFunction). It returns a TransitionConfig.
TransitionConfig interface
TransitionConfig is an interface with the following optional properties: delay (number), duration (number), easing (EasingFunction), css (function taking t and u numbers and returning string), and tick (function taking t and u numbers and returning void).
svelte/transition imports
The svelte/transition module exports the following transition functions: blur, crossfade, draw, fade, fly, scale, and slide.
slide transition function
The slide transition slides an element in and out. It accepts optional SlideParams with properties: delay (number), duration (number), easing (EasingFunction), and axis ('x' or 'y'). It returns a TransitionConfig.
scale transition function
The scale transition animates the opacity and scale of an element. In transitions animate from the provided values (passed as parameters) to an element's current (default) values. Out transitions animate from an element's default values to the provided values. It accepts optional ScaleParams with properties: delay (number), duration (number), easing (EasingFunction), start (number), and opacity (number). It returns a TransitionConfig.
EasingFunction type
EasingFunction is a type defined as a function that takes a number t and returns a number.
blur transition function
The blur transition animates a blur filter alongside an element's opacity. It accepts an optional BlurParams object with properties: delay (number), duration (number), easing (EasingFunction), amount (number or string), and opacity (number). It returns a TransitionConfig.
crossfade transition function
The crossfade function creates a pair of transitions called send and receive. When an element is sent, it looks for a corresponding element being received and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is received, the reverse happens. If there is no counterpart, the fallback transition is used. It accepts CrossfadeParams with optional delay (number), duration (number or function that takes len and returns number), and easing (EasingFunction). The function returns a tuple of two functions, each accepting a node and params with a key property, returning a function that returns TransitionConfig.
draw transition function
The draw transition animates the stroke of an SVG element like a snake in a tube. In transitions begin with the path invisible and draw the path to the screen over time. Out transitions start visible and gradually erase the path. Draw only works with elements that have a getTotalLength method, such as path and polyline elements. It accepts optional DrawParams with properties: delay (number), speed (number), duration (number or function that takes len and returns number), and easing (EasingFunction). It returns a TransitionConfig.
fly transition function
The fly transition animates the x and y positions and the opacity of an element. In transitions animate from the provided values (passed as parameters) to the element's default values. Out transitions animate from the element's default values to the provided values. It accepts optional FlyParams with properties: delay (number), duration (number), easing (EasingFunction), x (number or string), y (number or string), and opacity (number). It returns a TransitionConfig.
a11y_missing_attribute warning
The `a11y_missing_attribute` warning enforces that required accessibility attributes are present: `<a>` should have `href` (unless it's a fragment-defining tag), `<area>` should have `alt`, `aria-label`, or `aria-labelledby`, `<html>` should have `lang`, `<iframe>` should have `title`, `<img>` should have `alt`, `<object>` should have `title`, `aria-label`, or `aria-labelledby`, and `<input type="image">` should have `alt`, `aria-label`, or `aria-labelledby`.
bind_invalid_each_rest warning
The `bind_invalid_each_rest` warning alerts that the rest operator (...) creates a new object and binding with the original object will not work correctly.
bidirectional_control_characters warning
The `bidirectional_control_characters` warning detects bidirectional control characters in code, which can be used to alter the visual direction of code and could have unintended consequences. See trojansource.codes for more information.
Compiler warnings can be disabled with svelte-ignore comments
Compiler warnings in Svelte can be disabled by placing a `<!-- svelte-ignore <code> -->` comment above the line that causes the warning. Multiple rules can be listed in a single comment separated by commas, and an explanatory note can be added in parentheses. For example: `<!-- svelte-ignore a11y_autofocus -->` or `<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (because of reasons) -->`.
a11y_accesskey warning
The `a11y_accesskey` warning enforces that no `accesskey` attribute is used on elements. Access keys create inconsistencies between keyboard shortcuts and commands used by screen reader and keyboard-only users, creating accessibility complications.
a11y_aria_activedescendant_has_tabindex warning
The `a11y_aria_activedescendant_has_tabindex` warning requires that an element with `aria-activedescendant` attribute must have a `tabindex` value to be tabbable, either through an inherent tabindex or by declaring it as an attribute.
a11y_aria_attributes warning
The `a11y_aria_attributes` warning prevents ARIA roles, states and properties on reserved DOM elements that do not support them, such as `meta`, `html`, `script`, and `style`, which are typically not visible.
a11y_autofocus warning
The `a11y_autofocus` warning enforces that the `autofocus` attribute is not used on elements, as autofocusing can cause usability issues for both sighted and non-sighted users.
a11y_click_events_have_key_events warning
The `a11y_click_events_have_key_events` warning requires that visible, non-interactive elements with an `onclick` event must be accompanied by a keyboard event handler like `onkeyup` or `onkeydown`. Users should consider using semantic interactive elements like `<button>` or `<a>` instead. The element must also be focusable by adding a `tabindex`. The deprecated `onkeypress` event will silence this warning but should not be used.
a11y_consider_explicit_label warning
The `a11y_consider_explicit_label` warning requires that buttons and links either contain text or have an `aria-label`, `aria-labelledby`, or `title` attribute.
a11y_distracting_elements warning
The `a11y_distracting_elements` warning enforces that visually distracting elements are not used. The following elements are considered visually distracting and should be avoided: `<marquee>` and `<blink>`.
a11y_figcaption_index and a11y_figcaption_parent warnings
The `a11y_figcaption_index` warning requires that `<figcaption>` must be either the first or last child of `<figure>`. The `a11y_figcaption_parent` warning requires that `<figcaption>` must be an immediate child of `<figure>`.
a11y_hidden warning
The `a11y_hidden` warning prevents certain DOM elements from being hidden with `aria-hidden="true"`, as these elements are useful for screen reader navigation and should not be hidden. This includes heading elements like `<h2>`.
a11y_img_redundant_alt warning
The `a11y_img_redundant_alt` warning enforces that the `alt` attribute on `<img>` elements does not contain the words 'image', 'picture', or 'photo', since screen readers already announce `img` elements as an image.
a11y_incorrect_aria_attribute_type warning and variants
The `a11y_incorrect_aria_attribute_type` warning enforces correct type values for ARIA attributes. Variants include: `a11y_incorrect_aria_attribute_type_boolean` (must be 'true' or 'false'), `a11y_incorrect_aria_attribute_type_id` (must be a string representing a DOM element ID), `a11y_incorrect_aria_attribute_type_idlist` (space-separated list of DOM element IDs), `a11y_incorrect_aria_attribute_type_integer` (must be an integer), `a11y_incorrect_aria_attribute_type_token` (must be one of specific values), `a11y_incorrect_aria_attribute_type_tokenlist` (space-separated list of values), and `a11y_incorrect_aria_attribute_type_tristate` (must be true, false, or mixed).
a11y_interactive_supports_focus warning
The `a11y_interactive_supports_focus` warning enforces that elements with an interactive role and interactive handlers (mouse or key press) must be focusable or tabbable by having a `tabindex` value.
a11y_invalid_attribute warning
The `a11y_invalid_attribute` warning enforces that attributes important for accessibility have valid values. For example, `href` should not be empty, '#', or 'javascript:'.
a11y_label_has_associated_control warning
The `a11y_label_has_associated_control` warning enforces that a `<label>` tag has a text label and an associated control. Two supported ways to associate a label with a control: wrapping a control in a label tag, or adding `for` to a label and assigning it the ID of an input on the page.
a11y_media_has_caption warning
The `a11y_media_has_caption` warning requires that `<video>` elements must have a `<track kind="captions">` element. Captions are essential for deaf users and should contain all important information. Captions are not necessary for video components with the `muted` attribute.
a11y_misplaced_role warning
The `a11y_misplaced_role` warning prevents ARIA `role` attributes on reserved DOM elements that do not support them, such as `meta`, `html`, `script`, and `style`.
a11y_misplaced_scope warning
The `a11y_misplaced_scope` warning enforces that the `scope` attribute should only be used with `<th>` elements.
a11y_missing_content warning
The `a11y_missing_content` warning enforces that heading elements (`h1`, `h2`, etc.) and anchors have content that is accessible to screen readers.
a11y_mouse_events_have_key_events warning
The `a11y_mouse_events_have_key_events` warning enforces that `onmouseover` is accompanied by `onfocus` and `onmouseout` is accompanied by `onblur`. This ensures functionality triggered by mouse events is accessible to keyboard users.
a11y_no_abstract_role warning
The `a11y_no_abstract_role` warning prevents using abstract ARIA roles, which are forbidden.
a11y_no_interactive_element_to_noninteractive_role warning
The `a11y_no_interactive_element_to_noninteractive_role` warning prevents using non-interactive ARIA roles to convert an interactive element to non-interactive. Non-interactive ARIA roles include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region`, and `tooltip`.
a11y_no_noninteractive_element_interactions warning
The `a11y_no_noninteractive_element_interactions` warning prevents assigning mouse or keyboard event listeners to non-interactive elements. Non-interactive elements include `<main>`, `<area>`, `<h1>` through `<h6>`, `<p>`, `<img>`, `<li>`, `<ul>`, and `<ol>`. Non-interactive WAI-ARIA roles include `article`, `banner`, `complementary`, `img`, `listitem`, `main`, `region`, and `tooltip`.
a11y_no_noninteractive_element_to_interactive_role warning
The `a11y_no_noninteractive_element_to_interactive_role` warning prevents using interactive ARIA roles to convert a non-interactive element to interactive. Interactive ARIA roles include `button`, `link`, `checkbox`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `searchbox`, `switch`, and `textbox`.
a11y_no_noninteractive_tabindex warning
The `a11y_no_noninteractive_tabindex` warning prevents assigning non-negative `tabIndex` values to non-interactive elements. Tab key navigation should be limited to elements that can be interacted with.
a11y_no_redundant_roles warning
The `a11y_no_redundant_roles` warning prevents assigning ARIA roles that are already set by the browser by default, as these have no effect. For example, `<button role="button">` and `<img role="img">` are redundant.
a11y_no_static_element_interactions warning
The `a11y_no_static_element_interactions` warning requires that elements like `<div>` with interactive handlers like `click` must have an ARIA role.