diff --git a/src/runtime/action/index.ts b/src/runtime/action/index.ts index d7cbf04b129..9c5d752f66f 100644 --- a/src/runtime/action/index.ts +++ b/src/runtime/action/index.ts @@ -4,9 +4,17 @@ * immediately after Svelte has applied updates to the markup. * - 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: * ```ts - * export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn { + * interface Attributes { + * newprop?: string; + * 'on:event': (e: CustomEvent) => void; + * } + * + * export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn { * // ... * return { * update: (updatedParameter) => {...}, @@ -17,9 +25,10 @@ * * Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action */ -export interface ActionReturn { +export interface ActionReturn = Record> { update?: (parameter: Parameter) => void; destroy?: () => void; + $$attributes?: Attributes; } /** @@ -32,11 +41,11 @@ export interface ActionReturn { * // ... * } * ``` - * You can return an object with methods `update` and `destroy` from the function. + * 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. * * Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action */ -export interface Action { - (node: Node, parameter?: Parameter): void | ActionReturn; +export interface Action = Record> { + (node: Node, parameter?: Parameter): void | ActionReturn; }