svelte

function isIdentifierChar

isIdentifierChar: (code: number, astral: boolean) => boolean;

function isIdentifierStart

isIdentifierStart: (code: number, astral: boolean) => boolean;

function afterUpdate

afterUpdate: (fn: () => any) => void;

• Schedules a callback to run immediately after the component has been updated.

  The first time the callback runs will be after the initial onMount

  https://svelte.dev/docs/svelte#afterupdate

function beforeUpdate

beforeUpdate: (fn: () => any) => void;

• 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

  https://svelte.dev/docs/svelte#beforeupdate

function createEventDispatcher

createEventDispatcher: <
    EventMap extends Record<string, any> = any
>() => EventDispatcher<EventMap>;

• Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs#template-syntax-component-directives-on-eventname). Event dispatchers are functions that can take two arguments: name and detail.

  Component events created with createEventDispatcher create a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture). The detail argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) property and can contain any type of data.

  The event dispatcher can be typed to narrow the allowed event names and the type of the detail argument:

  const dispatch = createEventDispatcher<{
   loaded: never; // does not take a detail argument
   change: string; // takes a detail argument of type string, which is required
   optional: number | null; // takes an optional detail argument of type number
  }>();

  https://svelte.dev/docs/svelte#createeventdispatcher

function getAllContexts

getAllContexts: <T extends Map<any, any> = Map<any, any>>() => T;

• 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.

  https://svelte.dev/docs/svelte#getallcontexts

function getContext

getContext: <T>(key: any) => T;

• Retrieves the context that belongs to the closest parent component with the specified key. Must be called during component initialisation.

  https://svelte.dev/docs/svelte#getcontext

function hasContext

hasContext: (key: any) => boolean;

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

  https://svelte.dev/docs/svelte#hascontext

function onDestroy

onDestroy: (fn: () => any) => void;

• Schedules a callback to run immediately before the component is unmounted.

  Out of onMount, beforeUpdate, afterUpdate and onDestroy, this is the only one that runs inside a server-side component.

  https://svelte.dev/docs/svelte#ondestroy

function onMount

onMount: <T>(
    fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)
) => void;

• The onMount function 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 (but doesn't need to live *inside* the component; it can be called from an external module).

  If a function is returned _synchronously_ from onMount, it will be called when the component is unmounted.

  onMount does not run inside a [server-side component](https://svelte.dev/docs#run-time-server-side-component-api).

  https://svelte.dev/docs/svelte#onmount

function setContext

setContext: <T>(key: any, context: T) => T;

• 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.

  Like lifecycle functions, this must be called during component initialisation.

  https://svelte.dev/docs/svelte#setcontext

function tick

tick: () => Promise<void>;

type ComponentEvents

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

• Convenience type to get the events the given component expects. Example:

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

type ComponentProps

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

• Convenience type to get the props the given component expects. Example:

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

type ComponentType

type ComponentType<Component extends SvelteComponent = SvelteComponent> = (new (
    options: ComponentConstructorOptions<
        Component extends SvelteComponent<infer Props> ? Props : Record<string, any>
    >
) => Component) & {
    /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
    element?: typeof HTMLElement;
};

• Convenience type to get the type of a Svelte component. Useful for example in combination with dynamic components using <svelte:component>.

  Example:

  <script lang="ts">
  	import type { ComponentType, SvelteComponent } from 'svelte';
  	import Component1 from './Component1.svelte';
  	import Component2 from './Component2.svelte';
  
  	const component: ComponentType = someLogic() ? Component1 : Component2;
  	const componentOfCertainSubType: ComponentType<SvelteComponent<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
  </script>
  
  <svelte:component this={component} />
  <svelte:component this={componentOfCertainSubType} needsThisProp="hello" />

type NotFunction

type NotFunction<T> = T extends Function ? never : T;

• Anything except a function

function flip

flip: (
    node: Element,
    { from, to }: { from: DOMRect; to: DOMRect },
    params?: FlipParams
) => AnimationConfig;

• The flip function 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](https://aerotwist.com/blog/flip-your-animations/).

  https://svelte.dev/docs/svelte-animate#flip

variable VERSION

const VERSION: string;

• The current version, as set in package.json.

  https://svelte.dev/docs/svelte-compiler#svelte-version

function compile

compile: (source: string, options?: CompileOptions) => CompileResult;

• compile takes your component source code, and turns it into a JavaScript module that exports a class.

  https://svelte.dev/docs/svelte-compiler#svelte-compile

function parse

parse: (template: string, options?: ParserOptions) => Ast;

• The parse function parses a component, returning only its abstract syntax tree.

  https://svelte.dev/docs/svelte-compiler#svelte-parse

function preprocess

preprocess: (
    source: string,
    preprocessor: PreprocessorGroup | PreprocessorGroup[],
    options?: { filename?: string | undefined } | undefined
) => Promise<Processed>;

• The preprocess function provides convenient hooks for arbitrarily transforming component source code. For example, it can be used to convert a block into vanilla CSS.

  https://svelte.dev/docs/svelte-compiler#svelte-preprocess

type CssHashGetter

type CssHashGetter = (args: {
    name: string;
    filename: string | undefined;
    css: string;
    hash: (input: string) => string;
}) => string;

type EnableSourcemap

type EnableSourcemap = boolean | { js: boolean; css: boolean };

type MarkupPreprocessor

type MarkupPreprocessor = (options: {
    /**
     * The whole Svelte file content
     */
    content: string;
    /**
     * The filename of the Svelte file
     */
    filename?: string;
}) => Processed | void | Promise<Processed | void>;

• A markup preprocessor that takes a string of code and returns a processed version.

type Preprocessor

type Preprocessor = (options: {
    /**
     * The script/style tag content
     */
    content: string;
    /**
     * The attributes on the script/style tag
     */
    attributes: Record<string, string | boolean>;
    /**
     * The whole Svelte file content
     */
    markup: string;
    /**
     * The filename of the Svelte file
     */
    filename?: string;
}) => Processed | void | Promise<Processed | void>;

• A script/style preprocessor that takes a string of code and returns a processed version.

function backIn

backIn: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function backInOut

backInOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function backOut

backOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function bounceIn

bounceIn: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function bounceInOut

bounceInOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function bounceOut

bounceOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function circIn

circIn: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function circInOut

circInOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function circOut

circOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function cubicIn

cubicIn: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function cubicInOut

cubicInOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function cubicOut

cubicOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function elasticIn

elasticIn: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function elasticInOut

elasticInOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function elasticOut

elasticOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function expoIn

expoIn: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function expoInOut

expoInOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function expoOut

expoOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function linear

linear: (x: any) => any;

function quadIn

quadIn: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function quadInOut

quadInOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function quadOut

quadOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function quartIn

quartIn: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function quartInOut

quartInOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function quartOut

quartOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function quintIn

quintIn: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function quintInOut

quintInOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function quintOut

quintOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function sineIn

sineIn: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function sineInOut

sineInOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function sineOut

sineOut: (t: number) => number;

• https://svelte.dev/docs/svelte-easing

function spring

spring: <T = any>(
    value?: T | undefined,
    opts?: SpringOpts | undefined
) => Spring<T>;

• The spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it "bounces" like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.

  https://svelte.dev/docs/svelte-motion#spring

function tweened

tweened: <T>(
    value?: T | undefined,
    defaults?: TweenedOptions<T> | undefined
) => Tweened<T>;

• A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.

  https://svelte.dev/docs/svelte-motion#tweened

type Invalidator

type Invalidator<T> = (value?: T) => void;

• Cleanup logic callback.

type Subscriber

type Subscriber<T> = (value: T) => void;

• Callback to inform of a value updates.

type Unsubscriber

type Unsubscriber = () => void;

• Unsubscribes from value updates.

type Updater

type Updater<T> = (target_value: T, value: T) => T;

function derived

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>;
    <S extends Stores, T>(
        stores: S,
        fn: (values: StoresValues<S>) => T,
        initial_value?: T
    ): Readable<T>;
};

• Derived value store by synchronizing one or more readable stores and applying an aggregation function over its input values.

  https://svelte.dev/docs/svelte-store#derived

function get

get: <T>(store: Readable<T>) => T;

• Get the current value from a store by subscribing and immediately unsubscribing.

  https://svelte.dev/docs/svelte-store#get

function readable

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

• Creates a Readable store that allows reading by subscription.

  https://svelte.dev/docs/svelte-store#readable

  Parameter value

  initial value

function readonly

readonly: <T>(store: Readable<T>) => Readable<T>;

• Takes a store and returns a new one derived from the old one that is readable.

  https://svelte.dev/docs/svelte-store#readonly

  Parameter store

  store to make readonly

function writable

writable: <T>(
    value?: T | undefined,
    start?: StartStopNotifier<T> | undefined
) => Writable<T>;

• Create a Writable store that allows both updating and reading by subscription.

  https://svelte.dev/docs/svelte-store#writable

  Parameter value

  initial value