svelte/action
This module provides types for actions, which have been superseded by attachments.
Action
Actions are functions that are called when an element is created.
You can use this interface to type such actions.
The following example defines an action that only works on <div> elements
and optionally accepts a parameter which it has a default value for:
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.
, { someProperty(property) someProperty: boolean: boolean } | undefined> = (node(parameter) node: any, param(parameter) param: {
someProperty: boolean;
} = { someProperty(property) someProperty: boolean: true }) => {
// ...}Action<HTMLDivElement> and Action<HTMLDivElement, undefined> both signal that the action accepts no parameters.
You can return an object with methods update and destroy from the function and type which additional attributes and events it has.
See interface ActionReturn for more details.
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
Actions can return an object containing the two properties defined in this interface. Both are optional.
- update: An action can have a parameter. This method will be called whenever that parameter changes,
immediately after Svelte has applied updates to the markup.
ActionReturn and ActionReturn<undefined> both
mean that the action accepts no parameters.
- destroy: Method that is called after the element is unmounted
Additionally, you can specify which additional attributes and events the action enables on the applied element.
This applies to TypeScript typings only and has no effect at runtime.
Example usage:
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.
<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.
, 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;
Edit this page on GitHub llms.txt