Migrasi Svelte 4 ke Svelte 5

Ringkasan

Migrasi ke Svelte 5 berfokus pada runes. Sebagian besar komponen Svelte 4 masih jalan (legacy mode), tapi runes mode lebih future-proof.

Konsep Dasar

• export let → let { x } = $props().
• $: → $derived / $effect.
• on:click → onclick.
• createEventDispatcher → callback props.
• svelte/motion tweened/spring → $state + Tween class baru.

Cara Kerja / Struktur

svelte

<!-- Svelte 4 -->
<script>export let count = 0; $: double = count*2;</script>
<!-- Svelte 5 -->
<script>let { count = 0 } = $props(); let double = $derived(count*2);</script>

Catatan Implementasi

• Jalankan npx sv migrate untuk bantu otomatisasi.
• Mode campur: file tanpa runes tetap legacy; campur dalam 1 file tidak disarankan.

Kesalahan Umum

• Pakai runes dan export let bersama (error).
• Lupa on: sudah jadi on prefix (deprecated warning).

Glosarium

• Runes mode: komponen pakai runes.
• Legacy mode: kompatibilitas Svelte 4.

Referensi

• Svelte Lifecycle