component-button.js

var yo = require('yo-yo')
var xtend = require('xtend')
var domCss = require('dom-css')

var ATTRIBUTES = {type: 'button'}
var STYLES = {cursor: 'pointer'}

module.exports = button

function button (content, _opt, _onclick) {
  if (_onclick == null && typeof _opt === 'function') {
    _onclick = _opt
    _opt = {}
  }

  var b = render()
  var o = xtend(_opt)
  var attributes = xtend(ATTRIBUTES, o.attributes)
  var styles = xtend(STYLES, o.styles)
  var events = xtend(o.events)

  domCss(b, styles)
  Object.keys(attributes).forEach(function (name) {
    b.setAttribute(name, attributes[name])
  })
  Object.keys(events).forEach(function (name) {
    if (name.slice(0, 2) === 'on') name = name.slice(2)
    b.addEventListener(name, events[name], false)
  })

  b.update = update

  return b

  function update (_context, _opt, _oc) {
    var o = xtend(_opt)
    return (b = yo.update(b,
      button(_context || content, {
        attributes: xtend(attributes, o.attributes),
        styles: xtend(styles, o.styles),
        events: xtend(events, o.events)
      }, _oc || _onclick)
    ))
  }

  function render () {
    return yo`<button onclick=${onclick}>${content}</button>`
  }

  function onclick (e) {
    e.stopPropagation()
    _onclick && _onclick(b, e)
  }
}

main.js

var button = require('../button')

var i = 0
var cs = ('abcdefg').split('')

var btn = button('hello', {
  attributes: {
    title: 'hoge hoge'
  },
  styles: {
    border: '1px solid #bbddff',
    'border-radius': '1em',
    padding: '.5em',
    'font-size': '12px',
    'background-color': '#ddeeff'
  },
  events: {
    mouseover (e) {
      btn.update('HELLO', {
        styles: {
          border: '1px solid #ffddbb',
          'background-color': '#ffeedd'
        }
      })
    },
    mouseout (e) {
      btn.update('hello', {
        styles: {
          border: '1px solid #bbddff',
          'background-color': '#ddeeff'
        }
      })
    }
  }
}, btn => {
  console.log(cs[i])
  i = (i + 1) % cs.length
})

document.body.appendChild(btn)