playground #

<script lang="ts">
let count=$state(0)
const doubled=$derived(count*2)
const increment=()=>{count+=1}
</script>

<button onclick={ increment  }>clicks: {
count}</button>
<p>doubled: {doubled } </p>

<style>
button{color:var(--text_color)}
   p{font-weight:700}
</style>

<script lang="ts"> let count=$state(0) const doubled=$derived(count*2) const increment=()=>{count+=1} </script> <button onclick={ increment }>clicks: { count}</button> <p>doubled: {doubled } </p> <style> button{color:var(--text_color)} p{font-weight:700} </style>