Render Firebasers using virtual dom

firebasers.js

'use strict'

var Firebase = require('firebase')
var createElement = require('base-element')

var ref = new Firebase('https://angularu-workshop.firebaseio.com')
var usersRef = ref.child('users')
var users = {}

usersRef.on('child_added', set)
usersRef.on('child_changed', set)
usersRef.on('child_removed', remove)

function set (snapshot) {
  users[snapshot.key()] = snapshot.val()
}

function remove (snapshot) {
  delete users[snapshot.key()]
}

function renderList () {
  var self = this
  return this.afterRender(this.html('ul', Object.keys(users).map(function (key) {
    var name = users[key].name
    var style = {
      color: name.charAt(0) === 'B' ? 'blue' : 'red',
      cursor: 'not-allowed'
    }
    function onClick () {
      self.send('remove', key)
    }
    return self.html('li', {style: style, onclick: onClick}, name)
  })))
}

document.addEventListener('DOMContentLoaded', function () {
  var list = createElement(document.getElementById('firebasers'))

  list.addEventListener('remove', function (key) {
    usersRef.child(key).remove()
  })

  function render () {
    requestAnimationFrame(function () {
      list.render(renderList)
      render()
    })
  }
  render()
})