Sejauh ini kamu belajar Svelte 4: variable biasa itu reactive, $: untuk derived, writable() untuk cross-component state. Svelte 5 memperkenalkan runes — sintaks baru yang eksplisit, lebih mudah dilacak, dan bekerja konsisten di mana saja (komponen, modul JS, fungsi).

Kenapa berubah? Kode Svelte 4 yang "ajaib" (di mana let count = 0 menjadi reactive) kadang sulit dipahami saat logika makin kompleks. Runes membuat reactivity eksplisit pakai kata kunci $state, $derived, $effect, $props, $bindable.

$state — reactive state:

<script>
  let count = $state(0);

  function tambah() { count += 1; }
</script>

<button onclick={tambah}>Klik {count}</button>

Pengganti let count = 0 lama. Plus: bekerja di file .js biasa, bukan cuma .svelte.

$derived — computed value:

<script>
  let count = $state(0);
  let double = $derived(count * 2);
</script>

<p>{count} x 2 = {double}</p>

Pengganti $: double = count * 2. Lebih eksplisit, lebih aman di scope yang dalam.

$effect — side effect:

<script>
  let count = $state(0);

  $effect(() => {
    console.log("count berubah jadi", count);
    return () => console.log("cleanup sebelum run berikutnya");
  });
</script>

Pengganti $: console.log(count). Bisa return fungsi cleanup (seperti useEffect di React).

$props — terima props:

<script>
  let { nama = "Dunia", umur } = $props();
</script>

<p>Halo {nama}, umur {umur}</p>

Pengganti export let nama = "Dunia". Destructuring, default value, dan rename semua di satu tempat.

$bindable — two-way binding dari sisi child:

<!-- Input.svelte -->
<script>
  let { value = $bindable("") } = $props();
</script>

<input bind:value />

Child harus opt-in untuk menerima bind:value dari parent. Mencegah perilaku "magic" yang sulit dilacak.

Svelte 4 vs Svelte 5 — tabel cepat:

Kapan migrasi?

• Project baru: langsung pakai Svelte 5.
• Project Svelte 4 yang aktif: Svelte 5 mendukung kode lama, jadi bisa migrasi bertahap. File per file.
• Library yang kamu pakai: cek apakah sudah mendukung Svelte 5 sebelum upgrade.

💡 Runes bukan cuma sintaks baru — mereka memperluas reactivity ke file JS biasa. Kamu bisa bikin store reactive dalam file counter.svelte.js tanpa boilerplate writable().