Svelte

Salah satu fitur keren di Svelte adalah two-way binding dengan bind:value. Dengan binding ini, data di parent dan child component bisa saling sinkron secara otomatis tanpa perlu kode boilerplate. Mari kita lihat contoh sederhana dengan membuat input field yang terhubung antara parent dan child. 1. Child Component: InputField.svelte Buat file src/lib/components/InputField.svelte: Copy <script lang="ts"> export let value: string = ""; </script> <h2>Child Component</h2> <input type="text" bind:value /> <p>Isi input (child): {value}</p> Penjelasan:

Svelte punya fitur reactivity yang bikin update data jadi otomatis tanpa boilerplate. Dalam artikel ini kita akan membuat pencarian produk sederhana: ketika user mengetik di input, hasil pencarian langsung muncul di bawahnya. 1. Kode Lengkap Buat file src/routes/+page.svelte: Copy <script lang="ts"> let query = ""; let products = ["Laptop", "Mouse", "Keyboard", "Monitor", "Printer"]; let results: string[] = []; function searchProducts(q: string) { if (q.trim() === "") { results = []; } else { results = products.filter((p) => p.toLowerCase().includes(q.toLowerCase()) ); } } // Reactive statement: jalan otomatis tiap kali query berubah $: searchProducts(query); </script> <input bind:value={query} placeholder="Cari produk..." /> <ul> {#if query.trim() !== ""} {#if results.length > 0} {#each results as item} <li>{item}</li> {/each} {:else} <li>Tidak ada hasil</li> {/if} {/if} </ul> 2. Penjelasan Beberapa bagian penting:

Svelte dikenal sebagai framework frontend yang simpel, ringan, dan cepat. Salah satu fitur andalannya adalah Svelte Store yang membuat manajemen state jadi super mudah. Dalam artikel ini kita akan membangun aplikasi Todo List dengan fitur: Tambah task Tandai task selesai Edit task Hapus task Statistik jumlah task Menampilkan waktu saat ini Semua dikerjakan dengan Svelte + TypeScript hanya dalam beberapa file. 1. Definisi Type untuk Task Kita mulai dengan membuat tipe data Task di src/lib/types/task.ts: