svelte

variable Comp

const Comp: LegacyComponentType;

type Comp

type Comp = SvelteComponent;

variable apply

const apply: never;

• Deprecated

variable arguments

const arguments: never;

• Deprecated

variable bind

const bind: never;

• Deprecated

variable call

const call: never;

• Deprecated

variable caller

const caller: never;

• Deprecated

variable length

const length: never;

• Deprecated

variable name

const name: never;

• Deprecated

variable prototype

const prototype: never;

• Deprecated

variable toString

const toString: never;

• Deprecated

variable apply

const apply: never;

• Deprecated

variable arguments

const arguments: never;

• Deprecated

variable bind

const bind: never;

• Deprecated

variable call

const call: never;

• Deprecated

variable caller

const caller: never;

• Deprecated

variable length

const length: never;

• Deprecated

variable name

const name: never;

• Deprecated

variable prototype

const prototype: never;

• Deprecated

variable toString

const toString: never;

• Deprecated

function by

by: { <T>(fn: () => T): T; <T>(fn: () => T): T };

• Sometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use $derived.by which accepts a function as its argument.

  Example:

  let total = $derived.by(() => {
    let result = 0;
  	 for (const n of numbers) {
  	   result += n;
    }
    return result;
  });

  https://svelte.dev/docs/svelte/$derived#$derived.by

variable apply

const apply: never;

• Deprecated

variable arguments

const arguments: never;

• Deprecated

variable bind

const bind: never;

• Deprecated

variable call

const call: never;

• Deprecated

variable caller

const caller: never;

• Deprecated

variable length

const length: never;

• Deprecated

variable name

const name: never;

• Deprecated

variable prototype

const prototype: never;

• Deprecated

variable toString

const toString: never;

• Deprecated

function pre

pre: {
    (fn: () => void | (() => void)): void;
    (fn: () => void | (() => void)): void;
};

• Runs code right before a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values. The timing of the execution is right before the DOM is updated.

  Example:

  $effect.pre(() => console.log('The count is now ' + count));

  If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.

  Does not run during server side rendering.

  https://svelte.dev/docs/svelte/$effect#$effect.pre

  Parameter fn

  The function to execute

function root

root: {
    (fn: () => void | (() => void)): () => void;
    (fn: () => void | (() => void)): () => void;
};

• The $effect.root rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control. This rune also allows for creation of effects outside of the component initialisation phase.

  Example:

  <script>
    let count = $state(0);
  
    const cleanup = $effect.root(() => {
  	    $effect(() => {
  				console.log(count);
  			})
  
       return () => {
         console.log('effect root cleanup');
  			}
    });
  </script>
  
  <button onclick={() => cleanup()}>cleanup</button>

  https://svelte.dev/docs/svelte/$effect#$effect.root

function tracking

tracking: { (): boolean; (): boolean };

• The $effect.tracking rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template.

  Example:

  <script>
    console.log('in component setup:', $effect.tracking()); // false
  
    $effect(() => {
      console.log('in effect:', $effect.tracking()); // true
    });
  </script>
  
  <p>in template: {$effect.tracking()}</p> <!-- true -->

  This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects.

  https://svelte.dev/docs/svelte/$effect#$effect.tracking

variable apply

const apply: never;

• Deprecated

variable arguments

const arguments: never;

• Deprecated

variable bind

const bind: never;

• Deprecated

variable call

const call: never;

• Deprecated

variable caller

const caller: never;

• Deprecated

variable length

const length: never;

• Deprecated

variable name

const name: never;

• Deprecated

variable prototype

const prototype: never;

• Deprecated

variable toString

const toString: never;

• Deprecated

variable apply

const apply: never;

• Deprecated

variable arguments

const arguments: never;

• Deprecated

variable bind

const bind: never;

• Deprecated

variable call

const call: never;

• Deprecated

variable caller

const caller: never;

• Deprecated

variable length

const length: never;

• Deprecated

variable name

const name: never;

• Deprecated

variable prototype

const prototype: never;

• Deprecated

variable toString

const toString: never;

• Deprecated

function trace

trace: { (name: string): void; (name: string): void };

• Tracks which reactive state changes caused an effect to re-run. Must be the first statement of a function body. Example:

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

  $effect(() => { $inspect.trace('my effect');

  count; });

variable apply

const apply: never;

• Deprecated

variable arguments

const arguments: never;

• Deprecated

variable bind

const bind: never;

• Deprecated

variable call

const call: never;

• Deprecated

variable caller

const caller: never;

• Deprecated

variable length

const length: never;

• Deprecated

variable name

const name: never;

• Deprecated

variable prototype

const prototype: never;

• Deprecated

variable toString

const toString: never;

• Deprecated

variable apply

const apply: never;

• Deprecated

variable arguments

const arguments: never;

• Deprecated

variable bind

const bind: never;

• Deprecated

variable call

const call: never;

• Deprecated

variable caller

const caller: never;

• Deprecated

variable length

const length: never;

• Deprecated

variable name

const name: never;

• Deprecated

variable prototype

const prototype: never;

• Deprecated

variable toString

const toString: never;

• Deprecated

function raw

raw: { <T>(initial: T): T; <T>(): T; <T>(initial: T): T; <T>(): T };

• Declares state that is _not_ made deeply reactive — instead of mutating it, you must reassign it.

  Example:

  <script>
    let items = $state.raw([0]);
  
    const addItem = () => {
      items = [...items, items.length];
    };
  </script>
  
  <button on:click={addItem}>
    {items.join(', ')}
  </button>

  https://svelte.dev/docs/svelte/$state#$state.raw

  Parameter initial

  The initial value

function snapshot

snapshot: { <T>(state: T): Snapshot<T>; <T>(state: T): Snapshot<T> };

• To take a static snapshot of a deeply reactive $state proxy, use $state.snapshot:

  Example:

  <script>
    let counter = $state({ count: 0 });
  
    function onclick() {
      // Will log `{ count: ... }` rather than `Proxy { ... }`
      console.log($state.snapshot(counter));
    };
  </script>

  https://svelte.dev/docs/svelte/$state#$state.snapshot

  Parameter state

  The value to snapshot

type Cloneable

type Cloneable =
    | ArrayBuffer
    | DataView
    | Date
    | Error
    | Map<any, any>
    | RegExp
    | Set<any>
    | TypedArray
    // web APIs
    | Blob
    | CryptoKey
    | DOMException
    | DOMMatrix
    | DOMMatrixReadOnly
    | DOMPoint
    | DOMPointReadOnly
    | DOMQuad
    | DOMRect
    | DOMRectReadOnly
    | File
    | FileList
    | FileSystemDirectoryHandle
    | FileSystemFileHandle
    | FileSystemHandle
    | ImageBitmap
    | ImageData
    | RTCCertificate
    | VideoFrame;

• The things that structuredClone can handle — https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

type NonReactive

type NonReactive<T> = T extends Date
    ? Date
    : T extends Map<infer K, infer V>
    ? Map<K, V>
    : T extends Set<infer K>
    ? Set<K>
    : T;

• Turn SvelteDate, SvelteMap and SvelteSet into their non-reactive counterparts. (URL is uncloneable.)

type Primitive

type Primitive = string | number | boolean | null | undefined;

type Snapshot

type Snapshot<T> = T extends Primitive
    ? T
    : T extends Cloneable
    ? NonReactive<T>
    : T extends { toJSON(): infer R }
    ? R
    : T extends Array<infer U>
    ? Array<Snapshot<U>>
    : T extends object
    ? T extends { [key: string]: any }
        ? { [K in keyof T]: Snapshot<T[K]> }
        : never
    : never;

type TypedArray

type TypedArray =
    | Int8Array
    | Uint8Array
    | Uint8ClampedArray
    | Int16Array
    | Uint16Array
    | Int32Array
    | Uint32Array
    | Float32Array
    | Float64Array
    | BigInt64Array
    | BigUint64Array;

function afterUpdate

afterUpdate: (fn: () => void) => 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.

  In runes mode use $effect instead.

  Deprecated

  Use [$effect](https://svelte.dev/docs/svelte/$effect) instead

function beforeUpdate

beforeUpdate: (fn: () => void) => 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.

  In runes mode use $effect.pre instead.

  Deprecated

  Use [$effect.pre](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead

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/svelte/legacy-on#Component-events). 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
  }>();

  Deprecated

  Use callback props and/or the $host() rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)

function createRawSnippet

createRawSnippet: <Params extends unknown[]>(
    fn: (...params: Getters<Params>) => {
        render: () => string;
        setup?: (element: Element) => void | (() => void);
    }
) => Snippet<Params>;

• Create a snippet programmatically

function flushSync

flushSync: (fn?: (() => void) | undefined) => void;

• Synchronously flushes any pending state changes and those that result from it.

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.

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.

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.

function hydrate

hydrate: <
    Props extends Record<string, any>,
    Exports extends Record<string, any>
>(
    component:
        | ComponentType<SvelteComponent<Props>>
        | Component<Props, Exports, any>,
    options: {} extends Props
        ? {
              target: Document | Element | ShadowRoot;
              props?: Props;
              events?: Record<string, (e: any) => any>;
              context?: Map<any, any>;
              intro?: boolean;
              recover?: boolean;
          }
        : {
              target: Document | Element | ShadowRoot;
              props: Props;
              events?: Record<string, (e: any) => any>;
              context?: Map<any, any>;
              intro?: boolean;
              recover?: boolean;
          }
) => Exports;

• Hydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component

function mount

mount: <Props extends Record<string, any>, Exports extends Record<string, any>>(
    component:
        | ComponentType<SvelteComponent<Props>>
        | Component<Props, Exports, any>,
    options: MountOptions<Props>
) => Exports;

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

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.

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 [server-side components](https://svelte.dev/docs/svelte/svelte-server#render).

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.

function tick

tick: () => Promise<void>;

• Returns a promise that resolves once any pending state changes have been applied.

function unmount

unmount: (
    component: Record<string, any>,
    options?: { outro?: boolean } | undefined
) => Promise<void>;

• Unmounts a component that was previously mounted using mount or hydrate.

  Since 5.13.0, if options.outro is true, [transitions](https://svelte.dev/docs/svelte/transition) 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 (prior to 5.13.0, returns void).

  import { mount, unmount } from 'svelte';
  import App from './App.svelte';
  
  const app = mount(App, { target: document.body });
  
  // later...
  unmount(app, { outro: true });

function untrack

untrack: <T>(fn: () => T) => T;

• When used inside a [$derived](https://svelte.dev/docs/svelte/$derived) or [$effect](https://svelte.dev/docs/svelte/$effect), any state read inside fn will not be treated as a dependency.

  $effect(() => {
    // this will run when `data` changes, but not when `time` changes
    save(data, {
      timestamp: untrack(() => time)
    });
  });

type ComponentEvents

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

• Deprecated

  The new Component type does not have a dedicated Events type. Use ComponentProps instead.

  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 ComponentInternals

type ComponentInternals = Branded<{}, 'ComponentInternals'>;

• Internal implementation details that vary between environments

type ComponentProps

type ComponentProps<Comp extends SvelteComponent | Component<any, any>> =
    Comp extends SvelteComponent<infer Props>
        ? Props
        : Comp extends Component<infer Props, any>
        ? Props
        : never;

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

  Example: Ensure a variable contains the props expected by MyComponent:

  import type { ComponentProps } from 'svelte';
  import MyComponent from './MyComponent.svelte';
  
  // Errors if these aren't the correct props expected by MyComponent.
  const props: ComponentProps<typeof MyComponent> = { foo: 'bar' };

  > [!NOTE] In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.

  Example: A generic function that accepts some component and infers the type of its props:

  import type { Component, ComponentProps } from 'svelte';
  import MyComponent from './MyComponent.svelte';
  
  function withProps<TComponent extends Component<any>>(
  	component: TComponent,
  	props: ComponentProps<TComponent>
  ) {};
  
  // Errors if the second argument is not the correct props expected by the component in the first argument.
  withProps(MyComponent, { foo: 'bar' });

type ComponentType

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

• Deprecated

  This type is obsolete when working with the new Component type.

  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 MountOptions

type MountOptions<Props extends Record<string, any> = Record<string, any>> = {
    /**
     * Target element where the component will be mounted.
     */
    target: Document | Element | ShadowRoot;
    /**
     * Optional node inside `target`. When specified, it is used to render the component immediately before it.
     */
    anchor?: Node;
    /**
     * Allows the specification of events.
     * @deprecated Use callback props instead.
     */
    events?: Record<string, (e: any) => any>;
    /**
     * Can be accessed via `getContext()` at the component level.
     */
    context?: Map<any, any>;
    /**
     * Whether or not to play transitions on initial render.
     * @default true
     */
    intro?: boolean;
} & ({} extends Props
    ? {
          /**
           * Component properties.
           */
          props?: Props;
      }
    : {
          /**
           * Component properties.
           */
          props: Props;
      });

• Defines the options accepted by the mount() function.