var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var h = require('virtual-dom/h');
var createElement = require('virtual-dom/create-element');
var virtualize = require('vdom-virtualize');

// 1: Create a function that declares what the DOM should look like
function render(count)  {
  // var html = '<div id="test">Count is <span>' + count + '</span></div>';
  //return virtualize.fromHTML(html);
  return h('#test', [
    'Count is ', h('span', String(count))
  ]);
}

// 2: Initialise the document
var count = 0;      // We need some app data. Here we just store a count.

var tree = render(count);               // We need an initial tree
var rootNode = createElement(tree);     // Create an initial root DOM node ...
document.body.appendChild(rootNode);    // ... and it should be in the document

// 3: Wire up the update logic
setInterval(function update(){
  count++;
  var newTree = render(count);
  var patches = diff(tree, newTree);
  patch(rootNode, patches);
}, 500);