choojs / nanocomponent

🚃 - create performant HTML components
https://leaflet.choo.io/
MIT License
366 stars 30 forks source link

Does the readme example work? #24

Closed bcomnes closed 7 years ago

bcomnes commented 7 years ago
// Implementer API
var Nanocomponent = require('nanocomponent')
var html = require('bel')

function MyButton () {
  if (!(this instanceof MyButton)) return new MyButton()
  this._color = null
  Nanocomponent.call(this)
}
MyButton.prototype = Object.create(Nanocomponent.prototype)

MyButton.prototype._render = function (color) {
  this._color = color
  return html`
    <button style="background-color: ${color}">
      Click Me
    </button>
  `
}

MyButton.prototype._update = function (newColor) {
  return newColor !== this._color
}

I might be going nuts here, but does the readme example actually work? On subsequent calls to render, you would have to mutate this._element with the new color right? See https://github.com/yoshuawuyts/nanocomponent/blob/master/index.js#L48

Since the render function only returns an element, it would only get captured on the first render() call.

I'll double check this in a moment.

yoshuawuyts commented 7 years ago

Yeah this doesn't work, you need to indeed mutate. The example in example/ is up to date, think that'd be a good one to check out. Or else check out microcomponent :sparkles:

bcomnes commented 7 years ago

I'll send an fix