var onload = require('on-load')
var yo = require('yo-yo')

function page1 () {
  var tree = yo`<div>page1</div>`
  onload(tree, function () {
    console.log('page1 on')
  }, function () {
    console.log('page1 off')
  })
  return tree
}
function page2 () {
  var tree = yo`<div>page2</div>`
  onload(tree, function () {
    console.log('page2 on')
  }, function () {
    console.log('page2 off')
  })
  return tree
}

var root = page1()
document.body.appendChild(root)
// logs page1 on

window.setTimeout(function () {
  root = yo.update(root, page1())
}, 1000)
// nothing logged

window.setTimeout(function () {
  root = yo.update(root, page2())
}, 2000)
// page1 off, page2 on

window.setTimeout(function () {
  root = yo.update(root, page2())
}, 3000)
// nothing logged

window.setTimeout(function () {
  document.body.removeChild(root)
}, 4000)
// page2 off