Apa Itu Runes di Svelte 5?
Svelte 5 memperkenalkan “runes” sebagai mekanisme reaktivitas baru yang lebih eksplisit dan dapat diprediksi. Alih-alih mengandalkan perilaku implisit compiler seperti pada Svelte 4, Runes menggunakan simbol khusus yang dimulai dengan tanda dolar ($) untuk mendeklarasikan state, derived value, dan efek samping. Perubahan ini membuat kode lebih mudah dibaca, diuji, dan di-scale untuk aplikasi besar.
Runes bukanlah breaking change total; Svelte 5 tetap mendukung sintaks lama melalui mode kompatibilitas. Namun, tim Svelte merekomendasikan migrasi bertahap ke Runes untuk mendapatkan performa dan ergonomi terbaik.
Rune Utama: $state, $derived, $effect
Tiga Rune paling sering digunakan:
- $state — Mendeklarasikan state reaktif. Contoh: let count = $state(0). Perubahan pada count otomatis memicu update UI.
- $derived — Menghitung nilai turunan dari state. Contoh: let doubled = $derived(count * 2). Nilai ini otomatis diperbarui saat state berubah.
- $effect — Menjalankan efek samping saat dependensi berubah. Contoh: $effect(() => { console.log(count) }).
Ada juga $props untuk deklarasi props komponen dan $bindable untuk two-way binding. Kombinasi ini menggantikan pola lama seperti export let dan reactive statements $:.
Perbandingan dengan Svelte 4
Di Svelte 4, reaktivitas sering bergantung pada assignment dan label $:. Ini powerful tetapi bisa membingungkan, terutama saat logika kompleks. Runes membuat dependensi eksplisit:
- Eksplisit — Anda tahu persis mana state dan mana derived value.
- Komposabilitas — Runes bisa digunakan di file .svelte.js/.svelte.ts, bukan hanya komponen.
- Performa — Granular reactivity lebih efisien, update lebih tepat sasaran.
- Debugging — Stack trace dan perilaku lebih mudah dilacak.
Trade-offnya, kode menjadi sedikit lebih verbose. Namun untuk proyek besar, kejelasan ini sangat berharga.
Contoh Migrasi Sederhana
Sebelum (Svelte 4):
- export let count = 0;
- $: doubled = count * 2;
- $: if (count > 10) console.log(‘banyak’);
Sesudah (Svelte 5 dengan Runes):
- let { count = 0 } = $props();
- let doubled = $derived(count * 2);
- $effect(() => { if (count > 10) console.log(‘banyak’); });
Perhatikan bagaimana state dan derived value kini dideklarasikan secara eksplisit. Untuk state lokal, gunakan let count = $state(0). Untuk props, gunakan $props().
Tips Adopsi di Proyek Nyata
- Migrasi bertahap — Svelte 5 mendukung sintaks lama; migrasi komponen per komponen.
- Gunakan codemod — Svelte menyediakan alat migrasi otomatis untuk banyak pola.
- Pisahkan logika — Pindahkan logika state ke file .svelte.js untuk reuse.
- Uji thoroughly — Khususnya efek samping dan timing update.
- Manfaatkan TypeScript — Runes bekerja sangat baik dengan type inference.
Untuk proyek baru, mulai langsung dengan Runes agar konsisten. Untuk proyek lama, prioritaskan komponen dengan logika kompleks.
Kesimpulan
Svelte 5 Runes membawa reaktivitas yang lebih eksplisit dan scalable tanpa mengorbankan kesederhanaan Svelte. Dengan $state, $derived, dan $effect, developer mendapat kontrol lebih besar atas alur data. Migrasi bertahap membuat adopsi realistis, dan manfaatnya akan terasa pada aplikasi yang terus berkembang.
