Component prototype

component.js

var html = require('bel')
var morph = require('nanomorph')
var inWindow = require('in-window')
var onload = require('on-load')

module.exports = function Component (options) {
  options = options || {}
  var template = options.template
  var should = options.should || function () { return true }
  var added = options.added
  var removed = options.removed

  return function instance () {
    var element
    var oldState

    function init (state) {
      element = onload(create(state), added, removed)
    }

    function create (state) {
      var el = template(html, state)
      oldState = state
      return el
    }

    function update (state) {
      if (should(oldState, state)) {
        morph(element, create(state))
      }
    }

    function render (state) {
      if (element) {
        element.isSameNode = function () {
          return should(oldState, state)
        }
      }

      element && inWindow
        ? update(state)
        : init(state)

      return element
    }

    return render
  }()
}

Usage:

var Component = require('☝️')
module.exports = Component({
    template: function template (html, state) {
      var title = state && state.tile
      return html`<h1>${title}</h1>`
    },
    should: function should (oldState, newState) {
      var ot = oldState && oldState.title
      var nt = newState && newState.title
      return ot === nt
    },
    added: function added (el) {
      console.info('ADDED TO DOM')
    },
    removed: function removed (el) {
      console.info('REMOVED FROM DOM')
    }
  })

var Component = require('☝️')

module.exports = Component({
    template (html, state) {
      var title = state && state.tile
      return html`<h1>${title}</h1>`
    },
    should (oldState, newState) {
      var ot = oldState && oldState.title
      var nt = newState && newState.title
      return ot === nt
    },
    added (el) {
      console.info('ADDED TO DOM')
    },
    removed (el) {
      console.info('REMOVED FROM DOM')
    }
  })