Reactive declarations ($:) memungkinkan kamu membuat nilai turunan yang otomatis terupdate.

Reactive Statement

<script>
  let count = 0
  $: doubled = count * 2
  $: quadrupled = doubled * 2
</script>

<p>{count} x 2 = {doubled}</p>
<p>{count} x 4 = {quadrupled}</p>

Reactive Block

<script>
  let count = 0

  $: {
    console.log("count berubah:", count)
    if (count > 10) {
      console.log("count sudah besar!")
    }
  }
</script>

Reactive If

$: if (count >= 10) {
  alert("Sudah 10!")
  count = 0
}

$: akan re-run setiap kali dependency-nya berubah.