Effects and Derived Values #72

2023-05-14T01:22:53+08:00

thesabinelim commented

2023-05-14 01:22:53 +08:00

(Migrated from github.com)

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()} />

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: ```xml <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()} /> ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: GitHub/Basalt#72