Advanced Runes ($state.raw, $derived.by, $inspect) in Svelte

<script>
  // $state.raw — skip deep proxy wrapping (huge perf win for big arrays/objects)
  let rows = $state.raw([])
  // Must replace the whole reference; mutating in place won't trigger updates:
  rows = [...rows, newRow]    // ✓
  // rows.push(newRow)         // ✗ — no reactivity

  // $derived.by — function form for multi-statement derivations
  let stats = $derived.by(() => {
    const total = rows.length
    const active = rows.filter(r => r.active).length
    return { total, active, ratio: total ? active / total : 0 }
  })

  // $inspect — log a reactive value (dev-only)
  $inspect(rows)
  $inspect(stats).with((type, value) => {
    if (type === 'update') console.log('stats changed', value)
  })
</script>