Effects and Derived Values

[thesabinelim]

Exactly like they work in Solid.js, React.js etc (implementation is stolen from Solid.js)

Effects run and derived values recalculate any time one of their dependencies update Derived values will also update any properties they're used in (using a clever Solid.js system where reactive properties themselves are just events)

Just a small example of the possibilities:

<script>
  local basalt = require("basalt")
  getCount, setCount = basalt.reactive(0)
  getDoubleCount = basalt.derived(function()
    return getCount() * 2
  end)
  basalt.effect(function()
    basalt.log("Count updated: " .. getCount())
  end)
</script>

<button text={"Times clicked: " .. getCount()}>
  <onClick>
    setCount(getCount() + 1)
  </onClick>
</button>
<label text={"Times clicked * 2: " .. getDoubleCount()} />