SvelteRéférence

svelte/action

Ce module fournit des types pour les actions, qui ont été remplacées par les attachements.

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 myActionconst myAction: Action<HTMLDivElement, {
    someProperty: boolean;
} | undefined>: Actiontype Action = /*unresolved*/ any<HTMLDivElementinterface HTMLDivElementThe HTMLDivElement interface provides special properties (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating  elements.
MDN Reference
, { someProperty(property) someProperty: boolean: boolean } | undefined> = (node(parameter) node: any, param(parameter) param: {
    someProperty: boolean;
} = { someProperty(property) someProperty: boolean: 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 Attributesinterface Attributes {
	newprop(property) Attributes.newprop?: string | undefined?: string;
	'on:event': (e(parameter) e: CustomEvent<boolean>: CustomEventinterface CustomEvent<T = any>The CustomEvent interface can be used to attach custom data to an event generated by an application.
MDN Reference
<boolean>) => void;
}

export function myActionfunction myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes>(node(parameter) node: HTMLElement: HTMLElementinterface HTMLElementThe HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.
MDN Reference
, parameter(parameter) parameter: Parameter: Parametertype Parameter = /*unresolved*/ any): ActionReturntype ActionReturn = /*unresolved*/ any<Parametertype Parameter = /*unresolved*/ any, Attributesinterface Attributes> {
	// ...
	return {
		update(property) update: (updatedParameter: any) => void: (updatedParameter(parameter) updatedParameter: any) => {...},
		destroyany: () => {...}
	};
}

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

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

destroy?: () => void;

Modifier cette page sur Github llms.txt

précédent suivant

svelte svelte/animate