forked from sveltejs/svelte
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[feat] TS interfaces for typing actions (sveltejs#7121)
Fixes sveltejs#6538
- Loading branch information
1 parent
12c1501
commit 1bcfd32
Showing
3 changed files
with
46 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,6 +9,7 @@ node_modules | |
/compiler.*js | ||
/index.*js | ||
/ssr.*js | ||
/action | ||
/internal | ||
/store | ||
/easing | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
/** | ||
* 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. | ||
* - destroy: Method that is called after the element is unmounted | ||
* | ||
* Example usage: | ||
* ```ts | ||
* export function myAction(node: HTMLElement, paramater: Parameter): ActionReturn<Parameter> { | ||
* // ... | ||
* return { | ||
* update: (updatedParameter) => {...}, | ||
* destroy: () => {...} | ||
* }; | ||
* } | ||
* ``` | ||
* | ||
* Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action | ||
*/ | ||
export interface ActionReturn<Parameter = any> { | ||
update?: (parameter: Parameter) => void; | ||
destroy?: () => void; | ||
} | ||
|
||
/** | ||
* 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: | ||
* ```ts | ||
* export const myAction: Action<HTMLDivElement, { someProperty: boolean }> = (node, param = { someProperty: true }) => { | ||
* // ... | ||
* } | ||
* ``` | ||
* You can return an object with methods `update` and `destroy` from the function. | ||
* See interface `ActionReturn` for more details. | ||
* | ||
* Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action | ||
*/ | ||
export interface Action<Element = HTMLElement, Parameter = any> { | ||
<Node extends Element>(node: Node, parameter?: Parameter): void | ActionReturn<Parameter>; | ||
} |