Advanced mode

[rpominov]

I'm thinking something like this:

const propsDefenition = {
  foo: Demo.props.bool(false),
  bar: Demo.props.string('bar'),
  onBarChange: Demo.props.callback.log()
}

<Demo props={propsDefenition}>
  {(props, update) => {
    return <Foo foo={props.foo}>
      <Bar bar={props.bar} onChange={newBar => {
        update({bar: newBar}) // allows us to update `props`, works similar to `setState`
        props.onBarChange(newBar) // cal original callback, so it will log the call
      }} />
    </Foo>
  }}
</Demo>

As you can see it allows pretty advanced rendering, including render of nested components and updating the props, so something like <input value={x} onCahnge={cb} /> can be made interactive.

Problem: we won't be able to show rendered code correctly.