Batch virtual-dom changes (fix #27)

From `main-loop`:

> main-loop is an optimization module for a virtual DOM system.
Normally you would re-create the virtual tree every time your state
changes. This is not optimum, with main-loop you will only update your
virtual tree at most once per request animation frame.

> main-loop basically gives you batching of your virtual DOM changes,
which means if you change your model multiple times it will be rendered
once asynchronously on the next request animation frame.

package.json

@@ -17,6 +17,7 @@
     "debug": "^2.2.0",
     "drag-drop": "^2.3.1",
     "hyperx": "^2.0.0",
+    "main-loop": "^3.2.0",
     "network-address": "^1.1.0",
     "pretty-bytes": "^3.0.0",
     "throttleit": "^1.0.0",

renderer/index.js

@@ -6,6 +6,7 @@ var createTorrent = require('create-torrent')
 var dragDrop = require('drag-drop')
 var electron = require('electron')
 var EventEmitter = require('events')
+var mainLoop = require('main-loop')
 var networkAddress = require('network-address')
 var path = require('path')
 var throttle = require('throttleit')
@@ -56,7 +57,7 @@ var state = global.state = {
   }
 }
 
-var client, currentVDom, rootElement, updateThrottled
+var client, vdomLoop, updateThrottled
 
 function init () {
   client = global.client = new WebTorrent()
@@ -64,9 +65,12 @@ function init () {
   client.on('error', onError)
   state.view.client = client
 
-  currentVDom = App(state, dispatch)
-  rootElement = createElement(currentVDom)
-  document.body.appendChild(rootElement)
+  vdomLoop = mainLoop(state, render, {
+    create: createElement,
+    diff: diff,
+    patch: patch
+  })
+  document.body.appendChild(vdomLoop.target)
 
   updateThrottled = throttle(update, 1000)
 
@@ -107,12 +111,12 @@ function init () {
 }
 init()
 
-function update () {
-  var newVDom = App(state, dispatch)
-  var patches = diff(currentVDom, newVDom)
-  rootElement = patch(rootElement, patches)
-  currentVDom = newVDom
+function render (state) {
+  return App(state, dispatch)
+}
 
+function update () {
+  vdomLoop.update(state)
   updateDockIcon()
 }