Svelte Actions Use Action Custom Directive Lifecycle

Definisi

Action adalah fungsi yang melekat ke elemen lewat use:namafungsi. Ia menerima node sebagai argumen dan boleh mengembalikan objek dengan lifecycle update dan destroy. Berguna untuk behavior reusable pada DOM (focus, click-outside, tooltip, drag).

Kapan dipakai

Pakai action saat logika beroperasi langsung pada elemen DOM dan ingin dipakai ulang lintas komponen, tanpa membungkus jadi komponen.

Cara kerja

Action sederhana

svelte

<script>
  function autofocus(node) {
    node.focus();
    return {
      destroy() { /* cleanup */ }
    };
  }
</script>
 
<input use:autofocus />

Dengan parameter & update

js

function tooltip(node, text) {
  node.title = text;
  return {
    update(newText) { node.title = newText; },
    destroy() {}
  };
}

svelte

<button use:tooltip={'Simpan'}>Simpan</button>

Click outside

js

function clickOutside(node, handler) {
  const onClick = (e) => { if (!node.contains(e.target)) handler(); };
  document.addEventListener('click', onClick, true);
  return { destroy: () => document.removeEventListener('click', onClick, true) };
}

Struktur alur

Catatan implementasi

• Action mengembalikan { update, destroy } opsional.
• update jalan saat parameter use:fn={x} berubah.
• Selalu cleanup di destroy (listener, observer) untuk hindari leak.
• Bisa menerima parameter tunggal; untuk banyak, pakai object.

Kesalahan umum

• Lupa destroy: listener menumpuk tiap mount.
• Akses node sebelum ada: action sudah dapat node saat dipanggil, aman.
• Parameter berubah tapi no update: tambahkan update bila perlu reaksi.
• Terlalu banyak action: pindahkan ke komponen bila logic rumit.

Referensi terkait

• Svelte Lifecycle: onMount, onDestroy, tick
• Svelte Component Syntax: markup, script, style scoped
• React Custom Hooks, State Sharing Patterns