Test app for nanomorph 2.0

nanobel.js

var html = require('bel')
var nanomorph = require('nanomorph')
var cache = require('cache-element')
var stuff = [
  [{
    title: 1
  }, {
    title: 2
  }, {
    title: 3
  }, {
    title: 4
  }],
  [{
    title: 'fwee'
  }, {
    title: 'fwi'
  }, {
    title: 'fwo'
  }, {
    title: 'fwum'
  }],
  [{
    title: 'bob'
  }, {
    title: 'bunny'
  }, {
    title: 'peter'
  }, {
    title: 'snoop'
  }]
]
var current
var main = page(stuff[0])

function component() {

  return cache(
    value => {
      return html`
      <li>
        ${value}
      </li>
    `
    }
  )
}

function page(arr) {
  var item = component()
  return html`
    <div>
      <ul>${
        arr.map(s=> {
          return item(s.title)
        })
      }</ul>
      <button onclick=${swap}>SWANG</button>
    </div>
  `
}

function updatePage(arr) {
  if (current !== arr) {
    current = arr
    nanomorph(page(arr), main)
  }
}

var count = 0

function swap(e) {
  e && e.preventDefault && e.preventDefault()
  count++
  count = count <= 2 ? count : 0

  updatePage(stuff[count])
}

var root = document.querySelector('.root')
root.appendChild(main)