use:
action は、要素がマウントされたときに呼び出される関数です。これらは use: ディレクティブを使用して追加され、通常は $effect を使用して、要素がアンマウントされたときに state をリセットします:
App
<script>
/** @type {import('svelte/action').Action} */
function myaction(node) {
// このノードが DOM にマウントされました
$effect(() => {
// セットアップ処理をここに記述します
return () => {
// クリーンアップ処理を記述します
};
});
}
</script>
<div use:myaction>...</div><script lang="ts">
import type { Action } from 'svelte/action';
const myaction: Action = (node) => {
// このノードが DOM にマウントされました
$effect(() => {
// セットアップ処理をここに記述します
return () => {
// クリーンアップ処理を記述します
};
});
};
</script>
<div use:myaction>...</div>action には引数を渡すことができます:
App
<script>
/** @type {import('svelte/action').Action} */
function myaction(node, data) {
// ...
}
</script>
<div use:myaction={data}>...</div><script lang="ts">
import type { Action } from 'svelte/action';
const myaction: Action = (node, data) => {
// ...
};
</script>
<div use:myaction={data}>...</div>action は一度だけ呼び出されます (サーバーサイドレンダリング時には呼び出されません) — 引数が変更されても再実行されることはありません。
Legacy mode
$effectrune が導入される前は、action はupdateとdestroyメソッドを持つオブジェクトを返すことができました。この場合、引数が変更されるとupdateが最新の値で呼び出されました。現在は effect の使用が推奨されています。
型付け
Action インターフェースは、3つのオプションの型引数を受け取ります — ノードの型 (action がすべての要素に適用される場合は Element にできます)、パラメーター、および action によって作成されるカスタムイベントハンドラーです:
App
<script>
/**
* @type {import('svelte/action').Action<
* HTMLDivElement,
* undefined,
* {
* onswiperight: (e: CustomEvent) => void;
* onswipeleft: (e: CustomEvent) => void;
* // ...
* }
* >}
*/
function gestures(node) {
$effect(() => {
// ...
node.dispatchEvent(new CustomEvent('swipeleft'));
// ...
node.dispatchEvent(new CustomEvent('swiperight'));
});
}
</script>
<div
use:gestures
onswipeleft={next}
onswiperight={prev}
>...</div><script lang="ts">
import type { Action } from 'svelte/action';
const gestures: Action<
HTMLDivElement,
undefined,
{
onswiperight: (e: CustomEvent) => void;
onswipeleft: (e: CustomEvent) => void;
// ...
}
> = (node) => {
$effect(() => {
// ...
node.dispatchEvent(new CustomEvent('swipeleft'));
// ...
node.dispatchEvent(new CustomEvent('swiperight'));
});
};
</script>
<div
use:gestures
onswipeleft={next}
onswiperight={prev}
>...</div>previous next