SvelteRéférence

svelte/legacy

Ce module fournit plusieurs fonctions à utiliser pendant votre migration, puisque certaines anciennes fonctionnalités ne peuvent pas être remplacées à l’identique par de nouvelles. Tous les imports sont étiquetés dépréciés et doivent être migrés manuellement quand vous en aurez l’occasion.

import {
	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>Takes the component function and returns a Svelte 4 compatible component constructor.
@deprecatedUse this only as a temporary solution to migrate your imperative component code to Svelte 5.asClassComponent,
	function createBubbler(): (type: string) => (event: Event) => booleanFunction to create a bubble function that mimic the behavior of on:click without handler available in svelte 4.
@deprecatedUse this only as a temporary solution to migrate your automatically delegated events in Svelte 5.createBubbler,
	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> & ExportsTakes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.
@deprecatedUse this only as a temporary solution to migrate your imperative component code to Svelte 5.createClassComponent,
	function handlers(...handlers: EventListener[]): EventListenerFunction to mimic the multiple listeners available in svelte 4
@deprecated
handlers,
	function nonpassive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): voidSubstitute for the nonpassive event modifier, implemented as an action
@deprecatednonpassive,
	function once(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the once event modifier
@deprecatedonce,
	function passive(node: HTMLElement, [event, handler]: [event: string, handler: () => EventListener]): voidSubstitute for the passive event modifier, implemented as an action
@deprecatedpassive,
	function preventDefault(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the preventDefault event modifier
@deprecatedpreventDefault,
	function run(fn: () => void | (() => void)): voidRuns the given function once immediately on the server, and works like $effect.pre on the client.
@deprecatedUse this only as a temporary solution to migrate your component code to Svelte 5.run,
	function self(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the self event modifier
@deprecatedself,
	function stopImmediatePropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the stopImmediatePropagation event modifier
@deprecatedstopImmediatePropagation,
	function stopPropagation(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the stopPropagation event modifier
@deprecatedstopPropagation,
	function trusted(fn: (event: Event, ...args: Array<unknown>) => void): (event: Event, ...args: unknown[]) => voidSubstitute for the trusted event modifier
@deprecatedtrusted
} from 'svelte/legacy';

asClassComponent

N’utilisez ceci qu’en tant que solution temporaire pour migrer votre code impératif vers Svelte 5.

Prend la fonction du composant et renvoie un constructeur de composant compatible avec Svelte 4.

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

createBubbler

N’utilisez ceci qu’en tant que solution temporaire pour migrer automatiquement des évènments délégués vers Svelte 5.

Fonction pour créer une fonction bubble qui mime le comportement Svelte 4 de on:click sans gestionnaire associé.

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

createClassComponent

N’utilisez ceci qu’en tant que solution temporaire pour migrer votre code impératif vers Svelte 5.

Prend les mêmes options qu’un composant Svelte 4 ou la fonction de composant, et renvoie un composant compaatible avec Svelte 4.

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;

handlers

Fonction pour mimer les différents gestionnaires d’évènements disponible en Svelte 4.

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

nonpassive

Remplacement du modificateur d’évènement nonpassive, implémenté comme une action.

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

once

Remplacement du modificateur d’évènement once.

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

passive

Remplacement du modificateur d’évènement passive, implémenté comme une action.

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

preventDefault

Remplacement du modificateur d’évènement preventDefault.

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

run

N’utilisez ceci qu’en tant que solution temporaire pour migrer votre code de composant vers Svelte 5.

Exécute la fonction fournie immédiatement et une seule fois sur le serveur, et fonctionne comme $effect.pre sur le client.

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

self

Remplacement du modificateur d’évènement self.

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

stopImmediatePropagation

Remplacement du modificateur d’évènement stopImmediatePropagation.

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

stopPropagation

Remplacement du modificateur d’évènement stopPropagation.

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

trusted

Remplacement du modificateur d’évènement trusted.

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

LegacyComponentType

Permet d’utiliser un composant à la fois comme une classe et comme une fonction pendant la période de transition.

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

Modifier cette page sur Github

précédent suivant

svelte/events svelte/motion