Reactive Component

react-component.js

class MyComponent extends Component {
  componentWillMount() {
    alert('will mount')
  }
  
  onClick = () => {
    alert('Button Clicked')

    // Forward click to the outer listeners.    
    this.props.onClick()
  }

  render() {
    return (
      <div>
        <Button 
          disabled={this.props.disabled}
          onClick={this.onClick}
        >
          {this.props.text}
        </Button>
      </div>
    )
  }
}

reactive-component.js

// Using https://github.com/tc39/proposal-observable

const render = ({lifecycle, disabled, text}) => {
  let myButton

  const container = div({
    children: [myButton = button({disabled, children: text, lifecycle})]
  })

  return {container, myButton}
}

const MyComponent = (props) => {
  const {container, myButton} = render(props)
  
  const events = new Observable((observer) => {
    myButton.events.subscribe({next: (event) => {
        alert('Button event', event)

        // Forward click to outer listeners.
        observer.next(event)
    }})
  })

  props.lifecycle.subscribe({next: (state) => {
      alert('lifecycle', state) // for e.g. willMount
  }})

  return {renderable: container.renderable, events}
}

Todo:

• figure out a way to move lifecycle