API for updating state

[mathisonian]

Hey @freeman-lab,

I'm playing around with some ideas to improve the authoring process for Idyll, and one of them is to automatically give the user a control panel that hooks into the reactive state (see idyll-lang/idyll#320).

This is working great, but it only updates in one direction. Is there a way to programmatically update the control panel's state?

[fnky]

Was looking for updating state too. I was working on ways to update the state, input value and the content of the "value" element, using Object.defineProperty to define a dynamic getter/setter.

This would allow a consistent API such as:

const panel = control([
  { type: 'range', label: 'alpha', min: 0, max: 255, initial: 255 },
  { type: 'checkbox', label: 'visible', initial: false },
  {
    type: 'button',
    label: 'toggle visibility',
    action: () => {
      panel.state['checkbox'] = !panel.state['checkbox'];
    }
  }
]);

// getter
panel.state['range']; // 255

// setter
panel.state['alpha'] = 64;
panel.state['alpha']; // 64

It's worth noting that the state is updated as a side-effect of initializing components. This would break the above usage for setting panel.state['alpha'].

This is due to the components being emitting their initialization asynchronously (within setTimeout). This could cause confusion when using the setter above.

To avoid invalidated state, we could introduce state scheduling:

Change state management to be asynchronous. Updating the state should schedule state changes—for example with an updateState/setState method.

If you then need the current state before scheduling the next, you can provide a function to the update method, which provides the guaranteed current state from arguments.

Similar to how state management works in React.

Would like to know if there's a simpler way of doing it and ensure that state is up-to-date without the side-effects.

[tracycollins]

Any news on this? Without this proposed API, is there another way to do this?