Ref Instruction

TBD

Fancy onClick handlers

Just for style-points, we can make this even cleaner, for which the ref instruction can help. By passing this and a factory function, we can map over our properties and create a handler for each one.

  import Model, { ref } from "@expressive/react";
 
  class Control extends Model {
    foo = 0;
    bar = 0;
    baz = 0;
 
    increment = ref(this, property => {
      return () => this[property] += 1;
    })
  }
 
  function Component(){
    const { foo, bar, baz, increment } = Control.use();
 
    return (
      <div>
        <button onClick={increment.foo}>Foo is {foo}</button>
        <button onClick={increment.bar}>Bar is {bar}</button>
        <button onClick={increment.baz}>Baz is {baz}</button>
      </div>
    )
  }

plusOne inherits all properties from this, so whatever exists there is included. This applies to typescript as well as runtime - means no need to repeat similar logic. To implement a change, you only need to update the model.

With this our component officially dumb, which is smart! Now, it's entirely managed and only contains display logic. It's more readable, replicable and efficient. We have a single hook, don't need to pass a reference to control, we avoid making new closures on every render (for onClick).