var toReact = require('nanocomponent-adapters/react')
var Nanocomponent = require('nanocomponent')
var reactDom = require('react-dom')
var react = require('react')
var html = require('bel')
 
class Button extends Nanocomponent {
  constructor () {
    super()
    this.color = null
  }
 
  handleClick () {
    console.log('choo choo!')
  }
 
  createElement ({color}) {
    this.color = color
    return html`
      <button onclick=${this.handleClick} style="background-color: ${color}">
        Click Me
      </button>
    `
  }
 
  update ({color}) {
    return color !== this.color
  }
}
 
var ReactButton = toReact(Button, react)
reactDom.render(<ReactButton color='white' />, mountNode)

var preact = require('preact')
var PreactButton = toReact(Button, preact)
preact.render(<PreactButton color='hotpink' />, document.body)

var Nanocomponent = require('nanocomponent')
var html = require('choo/html')
var choo = require('choo')
 
// create new nanocomponent
class Button extends Nanocomponent {
  constructor () {
    super()
    this.color = null
  }
 
  handleClick (color) {
    console.log('choo choo!')
  }
 
  createElement (color) {
    this.color = color
    return html`
      <button onclick=${this.handleClick} style="background-color: ${color}">
        Click Me
      </button>
    `
  }
 
  update (color) {
    return color !== this.color
  }
}
 
var app = choo()
app.route('/', mainView)
app.mount('body')
 
var customButton = new Button ()
 
function mainView (state, emit) {
  return html`
    <section>
      ${customButton.render('blue')}
    </section>
  `
}