svelte/action

Action

Une “action” est une fonction qui est appelée lorsqu’un élément est créé. Vous pouvez utiliser cette interface pour les typer. L’exemple qui suit définit une action qui ne fonctionne que sur des éléments <div> et prend en argument optionnel un paramètre qui a une valeur par défaut :

export const 
const myAction: Action<HTMLDivElement, {
    someProperty: boolean;
} | undefined>myAction: type Action = /*unresolved*/ anyAction<HTMLDivElement, { someProperty: booleansomeProperty: boolean } | undefined> = (node: anynode, 
param: {
    someProperty: boolean;
}param = { someProperty: booleansomeProperty: true }) => {
	// ...
}

Action<HTMLDivElement> et Action<HTMLDivElement, undefined> signalent tous les deux que l’action n’accepte pas de paramètre.

Vous pouvez renvoyer depuis la fonction un objet avec les méthodes update et destroy, et typer d’éventuels attributs et évènements additionnels. Voir l’interface ActionReturn pour plus de détails.

interface Action<
	Element = HTMLElement,
	Parameter = undefined,
	Attributes extends Record<string, any> = Record<
		never,
		any
	>
> {…}

<Node extends Element>(
	...args: undefined extends Parameter
		? [node: Node, parameter?: Parameter]
		: [node: Node, parameter: Parameter]
): void | ActionReturn<Parameter, Attributes>;

ActionReturn

Les actions peuvent renvoyer un objet contenant les deux propriétés définies dans cette interface. Les deux sont optionnelles.

• update: une action peut avoir un paramètre. Cette méthode sera appelée lorsque ce paramètre sera mis à jour, immédiatement après que Svelte aura appliqué les changements sur le markup. ActionReturn et ActionReturn<undefined> signifient tous les deux que l’action n’accepte pas de paramètre.
• destroy: méthode qui est appelée juste après le démontage de l’élément.

De plus, vous pouvez préciser quels attributs et évènements additionnels l’action permet sur l’élément concerné. Ceci ne s’applique que sur les types TypeScript et n’a aucun effet lors de l’exécution.

Exemple d’utilisation :

interface Attributes {
	Attributes.newprop?: string | undefinednewprop?: string;
	'on:event': (e: CustomEvent<boolean>e: interface CustomEvent<T = any>
MDN Reference
CustomEvent<boolean>) => void;
}

export function function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes>myAction(node: HTMLElementnode: HTMLElement, parameter: Parameterparameter: type Parameter = /*unresolved*/ anyParameter): type ActionReturn = /*unresolved*/ anyActionReturn<type Parameter = /*unresolved*/ anyParameter, Attributes> {
	// ...
	return {
		update: (updatedParameter: any) => voidupdate: (updatedParameter: anyupdatedParameter) => {...},
		destroy: () => {...}
	};
}

interface ActionReturn<
	Parameter = undefined,
	Attributes extends Record<string, any> = Record<
		never,
		any
	>
> {…}

update?: (parameter: Parameter) => void;

destroy?: () => void;