Svelte 5 Runes Dashboard

Project ini adalah demonstrasi Next-Gen SaaS Admin Dashboard menggunakan Svelte 5 (Runes), Vite, dan Tailwind CSS. Fokus utama adalah mendemonstrasikan kekuatan "Fine-Grained Reactivity" dan developer experience (DX) baru tanpa boilerplate svelte/store.

Tech Stack

• Framework: Svelte 5 (Latest) + Vite
• Language: TypeScript (Strict Mode)
• Styling: Tailwind CSS + clsx
• Icons: Lucide-Svelte

Penjelasan Konsep Inti (The Svelte 5 Way)

1. Runes vs Stores: Mengapa Class + $state?

Dulu di Svelte 3/4, Global State biasanya menggunakan writable store:

// The Old Way
export const store = writable({ count: 0 });
// Usage: $store.count

Masalah Store:

• Boilerplate: Perlu unwrap dengan $ atau subscribe manual.
• Over-firing: Update kecil pada object store sering memicu render ulang yang tidak perlu.
• Bukan JS Murni: Terasa seperti library abstraction.

Solusi Svelte 5 (lib/state.svelte.ts):

// The New Way
class AppState {
    count = $state(0); // Reactive property
    increment() { this.count++ } // Pure method
}
export const appState = new AppState();

• Universal Reactivity: Class properties bisa reactive.
• Memory Efficient: Tidak ada overhead subscription manual.
• DX: Terasa seperti menulis TypeScript Class biasa.

2. Snippets Power: Bye-bye Slots

DataTable.svelte di project ini menggunakan Snippets untuk merender kolom kustom.

Mengapa Snippets lebih superior dari Slots?

• Fleksibilitas: Snippet hanyalah fungsi yang me-return UI. Bisa dipass sebagai prop (cell={mySnippet}).
• Arguments Typed: Kita bisa mendefinisikan tipe argumen snippet dengan jelas (Snippet<[RowType, string]>).
• Composition: Memungkinkan pola "Headless UI" yang sangat powerful dimana logic ada di parent, tapi rendering dikontrol child (atau sebaliknya).

Contoh di routes/+page.svelte:

<DataTable {data} {columns}>
    {#snippet cell(row, key)}
        <!-- Custom rendering logic per cell -->
    {/snippet}
</DataTable>

3. Effect Tracking & Fine-Grained Reactivity

Svelte 5 meninggalkan model "Component-based reactivity" menuju "Node-based reactivity".

• Dependency Arrays Hilang: Tidak perlu lagi useEffect dengan array dependency manual seperti di React.
• $derived: Secara otomatis melacak variabel apa saja yang dibaca di dalamnya. Jika searchQuery berubah, filter jalan. Jika tidak, diam.
• DOM Updates: Jika Anda mengubah transaction.revenue di satu baris tabel:
  • Virtual DOM (React): Re-render komponen List, diffing seluruh tree, patch DOM.
  • Svelte 5: Function update langsung berjalan hanya pada text node yang menampilkan harga tersebut. Baris lain tidak disentuh sama sekali.

Fitur Aplikasi

1. Global State Manager: Sidebar layout dan Modal dikontrol oleh AppState class tunggal.
2. Signal-Based Modal: Modal bisa dibuka dari tombol manapun (deeply nested) tanpa prop drilling, cukup panggil appState.openModal().
3. Super Table:
   • Client-side sorting & sorting.
   • Custom cell rendering via Snippets.
   • Performa tinggi dengan fine-grained updates (Coba tombol "Update" di kolom Action).