From 5c45a8166540080e01f07790053527baa7b30a88 Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Sat, 5 Mar 2016 15:25:15 -0800
Subject: [PATCH] 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      |  1 +
 renderer/index.js | 22 +++++++++++++---------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index a9ff3086..c1af0668 100644
--- a/package.json
+++ b/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",
diff --git a/renderer/index.js b/renderer/index.js
index 7168e1b8..df67d76b 100644
--- a/renderer/index.js
+++ b/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()
 }