Svelte • Reference

svelte/legacy

On this page

createClassComponent
asClassComponent
run
handlers
createBubbler
LegacyComponentType
trusted
self
stopPropagation
once
stopImmediatePropagation
preventDefault
passive
nonpassive

This module provides various functions for use during the migration, since some features can’t be replaced one to one with new features. All imports are marked as deprecated and should be migrated away from over time.

import {
	asClassComponent,
	createBubbler,
	createClassComponent,
	handlers,
	LegacyComponentType,
	nonpassive,
	once,
	passive,
	preventDefault,
	run,
	self,
	stopImmediatePropagation,
	stopPropagation,
	trusted
} from 'svelte/legacy';

createClassComponent

Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.

export function createClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(options: ComponentConstructorOptions<Props> & {
		component: ComponentType<SvelteComponent<Props, Events, Slots>> | Component<Props>;
	}): SvelteComponent<Props, Events, Slots> & Exports;

asClassComponent

Takes the component function and returns a Svelte 4 compatible component constructor.

export function asClassComponent<Props extends Record<string, any>, Exports extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>>(component: SvelteComponent<Props, Events, Slots> | Component<Props>): ComponentType<SvelteComponent<Props, Events, Slots> & Exports>;

run

Runs the given function once immediately on the server, and works like $effect.pre on the client.

export function run(fn: () => void | (() => void)): void;

handlers

Function to mimic the multiple listeners available in svelte 4

export function handlers(...handlers: EventListener[]): EventListener;

createBubbler

Function to create a bubble function that mimic the behavior of on:click without handler available in svelte 4.

export function createBubbler(): (type: string) => (event: Event) => boolean;

LegacyComponentType

Support using the component as both a class and function during the transition period

export type LegacyComponentType = {
		new (o: ComponentConstructorOptions): SvelteComponent;
		(...args: Parameters<Component<Record<string, any>>>): ReturnType<Component<Record<string, any>, Record<string, any>>>;
	};

trusted

Substitute for the trusted event modifier

export function trusted(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;

self

Substitute for the self event modifier

export function self(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;

stopPropagation

Substitute for the stopPropagation event modifier

export function stopPropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;

once

Substitute for the once event modifier

export function once(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;

stopImmediatePropagation

Substitute for the stopImmediatePropagation event modifier

export function stopImmediatePropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;

preventDefault

Substitute for the preventDefault event modifier

export function preventDefault(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => void;

passive

Substitute for the passive event modifier, implemented as an action

export function passive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): void;

nonpassive

Substitute for the nonpassive event modifier, implemented as an action

export function nonpassive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): void;