From 55ffa935c3ce953795dfc665d8f8701178173ab3 Mon Sep 17 00:00:00 2001
From: Ashok <coderatlabs@gmail.com>
Date: Sat, 13 Jan 2018 00:23:47 +0530
Subject: [PATCH 01/18] replace microcomponent with nanocomponent

---
 elements/dat-import.js        |  37 ++--
 elements/download.js          |  69 +++----
 elements/file-list.js         |  91 +++++----
 elements/header.js            | 138 ++++++-------
 elements/inspect.js           |  49 ++---
 elements/intro.js             |  90 ++++-----
 elements/sprite.js            |  36 ++--
 elements/status-bar.js        |  28 +--
 elements/table-row.js         | 368 +++++++++++++++++-----------------
 elements/table-title-field.js | 162 +++++++--------
 elements/table.js             |  29 +--
 package-lock.json             |  59 +++++-
 package.json                  |   2 +-
 13 files changed, 613 insertions(+), 545 deletions(-)

diff --git a/elements/dat-import.js b/elements/dat-import.js
index 97af3c10..c2be850c 100644
--- a/elements/dat-import.js
+++ b/elements/dat-import.js
@@ -1,6 +1,6 @@
 'use strict'
 
-const microcomponent = require('microcomponent')
+const Nanocomponent = require('nanocomponent')
 const html = require('choo/html')
 const assert = require('assert')
 const css = require('sheetify')
@@ -60,17 +60,18 @@ const prefix = css`
 `
 
 function DatImportElement () {
-  var component = microcomponent({ name: 'dat-import' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
+  if (!(this instanceof DatImportElement)) return new DatImportElement()
+  Nanocomponent.call(this)
+}
+
+DatImportElement.prototype = Object.create(Nanocomponent.prototype)
 
-  function render () {
-    const onsubmit = this.props.onsubmit
+DatImportElement.prototype.createElement = function (props) {
+  const onsubmit = props.onsubmit
 
-    assert.equal(typeof onsubmit, 'function', 'dat-import: onsubmit should be type function')
+  assert.equal(typeof onsubmit, 'function', 'dat-import: onsubmit should be type function')
 
-    return html`
+  return html`
       <label for="dat-import" class="relative dib pa0 b--none ${prefix}">
         <input name="dat-import"
           type="text"
@@ -80,16 +81,14 @@ function DatImportElement () {
         ${icon('link', { class: 'absolute top-0 bottom-0 left-0' })}
       </label>
     `
-
-    function onKeyDown (e) {
-      const value = e.target.value
-      if (e.key !== 'Enter' || !value) return
-      e.target.value = ''
-      onsubmit(value)
-    }
+  function onKeyDown (e) {
+    const value = e.target.value
+    if (e.key !== 'Enter' || !value) return
+    e.target.value = ''
+    onsubmit(value)
   }
+}
 
-  function update () {
-    return false
-  }
+DatImportElement.prototype.update = function (props) {
+  return false
 }
diff --git a/elements/download.js b/elements/download.js
index 9505740b..8606c59b 100644
--- a/elements/download.js
+++ b/elements/download.js
@@ -1,6 +1,6 @@
 'use strict'
 
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 var dialog = require('electron').remote.dialog
 var bytes = require('prettier-bytes')
 var FileList = require('./file-list')
@@ -10,6 +10,8 @@ var icon = require('./icon')
 var button = require('./button')
 var os = require('os')
 
+module.exports = Download
+
 var detailHeader = css`
   :host {
     height: 4rem;
@@ -33,57 +35,56 @@ var label = css`
   }
 `
 
-module.exports = function () {
-  var component = microcomponent({
-    name: 'download',
-    state: {
-      fileList: FileList()
-    }
-  })
-  component.on('render', render)
-  component.on('update', update)
-  return component
+function Download () {
+  if (!(this instanceof Download)) return new Download()
+  Nanocomponent.call(this)
+  this.state = {
+    fileList: FileList()
+  }
+}
 
-  function render () {
-    var { key, oncancel, err, dat, ondownload, onupdate } = this.props
-    var { fileList } = this.state
-    var location = this.state.location || `${os.homedir()}/Downloads`
+Download.prototype = Object.create(Nanocomponent.prototype)
 
-    var title = dat
+Download.prototype.createElement = function (props) {
+  var { key, oncancel, err, dat, ondownload, onupdate } = props
+  var { fileList } = this.state
+  var location = this.state.location || `${os.homedir()}/Downloads`
+
+  var title = dat
       ? dat.metadata
         ? dat.metadata.title
         : key
       : 'Fetching metadata …'
-    var author = dat
+  var author = dat
       ? dat.metadata
         ? dat.metadata.author
         : 'N/A'
       : '…'
-    var description = dat
+  var description = dat
       ? dat.metadata
         ? dat.metadata.description
         : 'N/A'
       : '…'
-    var size = dat
+  var size = dat
       ? dat.archive.content
         ? bytes(dat.archive.content.byteLength)
         : 'N/A'
       : '…'
-    var peers = dat
+  var peers = dat
       ? dat.network.connected
       : '…'
 
-    function onChangeLocation () {
-      var files = dialog.showOpenDialog({
-        properties: ['openDirectory'],
-        defaultPath: location
-      })
-      if (!files || !files.length) return
-      component.state.location = files[0]
-      onupdate()
-    }
+  function onChangeLocation () {
+    var files = dialog.showOpenDialog({
+      properties: ['openDirectory'],
+      defaultPath: location
+    })
+    if (!files || !files.length) return
+    this.state.location = files[0]
+    onupdate()
+  }
 
-    return html`
+  return html`
       <main class="flex flex-column">
       ${err
         ? html`
@@ -177,9 +178,9 @@ module.exports = function () {
         </footer>
       </main>
     `
-  }
+}
 
-  function update (props) {
-    return true
-  }
+Download.prototype.update = function (props) {
+  return true
 }
+
diff --git a/elements/file-list.js b/elements/file-list.js
index 2dd3aa64..0a1b7fe6 100644
--- a/elements/file-list.js
+++ b/elements/file-list.js
@@ -1,9 +1,11 @@
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 var bytes = require('prettier-bytes')
 var mirror = require('mirror-folder')
 var html = require('choo/html')
 var css = require('sheetify')
 
+module.exports = FileList
+
 var fileListContainer = css`
   :host {
     min-height: 5rem;
@@ -21,51 +23,53 @@ var fileList = css`
   }
 `
 
-module.exports = function () {
-  var component = microcomponent({
-    name: 'file-list',
-    state: {
-      update: true
-    }
-  })
-  component.on('render', render)
-  component.on('update', update)
-  return component
+function FileList () {
+  if (!(this instanceof FileList)) return new FileList()
+  Nanocomponent.call(this)
+  this.state = {
+    update: true
+  }
+  this.props = null
+}
 
-  function render () {
-    var { dat, onupdate } = this.props
+FileList.prototype = Object.create(Nanocomponent.prototype)
 
-    if (dat) {
-      if (dat.files) {
-        this.state.update = false
-      } else {
-        if (dat.archive) {
-          dat.files = []
-          if (dat.archive.content) walk()
-          else dat.archive.on('content', walk)
-        }
+FileList.prototype.createElement = function (props) {
+  var self = this
+  this.props = props
+  var { dat, onupdate } = this.props
+
+  if (dat) {
+    if (dat.files) {
+      this.state.update = false
+    } else {
+      if (dat.archive) {
+        dat.files = []
+        if (dat.archive.content) walk()
+        else dat.archive.on('content', walk)
       }
     }
+  }
 
-    function walk () {
-      var fs = { name: '/', fs: dat.archive }
-      var progress = mirror(fs, '/', { dryRun: true })
-      progress.on('put', function (file) {
-        file.name = file.name.slice(1)
-        if (file.name === '') return
-        dat.files.push({
-          path: file.name,
-          stat: file.stat
-        })
-        dat.files.sort(function (a, b) {
-          return a.path.localeCompare(b.path)
-        })
-        component.state.update = true
-        onupdate()
+  function walk () {
+    var fs = { name: '/', fs: dat.archive }
+    var progress = mirror(fs, '/', { dryRun: true })
+    progress.on('put', function (file) {
+      file.name = file.name.slice(1)
+      if (file.name === '') return
+      dat.files.push({
+        path: file.name,
+        stat: file.stat
       })
-    }
+      dat.files.sort(function (a, b) {
+        return a.path.localeCompare(b.path)
+      })
+      self.state.update = true
+      onupdate()
+    })
+  }
 
-    return html`
+  return html`
       <div class="flex-auto bg-white mb2 mw6 ${fileListContainer}">
         ${dat && dat.files && dat.files.length
           ? html`
@@ -87,7 +91,7 @@ module.exports = function () {
               })}
             </table>
             `
-          : html`
+            : html`
             <div class="f7 f6-l pa2">
               N/A
             </div>
@@ -95,9 +99,8 @@ module.exports = function () {
         }
       </div>
     `
-  }
+}
 
-  function update (props) {
-    return props.dat !== this.props.dat || this.state.update
-  }
+FileList.prototype.update = function (props) {
+  return props.dat !== this.props.dat || this.state.update
 }
diff --git a/elements/header.js b/elements/header.js
index 91c6888e..d71d4745 100644
--- a/elements/header.js
+++ b/elements/header.js
@@ -1,6 +1,6 @@
 'use strict'
 
-const microcomponent = require('microcomponent')
+const Nanocomponent = require('nanocomponent')
 const html = require('choo/html')
 const assert = require('assert')
 const css = require('sheetify')
@@ -35,68 +35,73 @@ const menuButtonIcon = css`
 `
 
 function HeaderElement () {
+  if (!(this instanceof HeaderElement)) return new HeaderElement()
+  Nanocomponent.call(this)
+  this.props = null
+  this.state = {}
+}
+
+HeaderElement.prototype = Object.create(Nanocomponent.prototype)
+
+HeaderElement.prototype.createElement = function (props) {
+  this.props = props
+  var { isReady, onimport, oncreate, onreport } = this.props
+  var { showMenu, willShowMenu } = this.state
   var importButton = DatImport()
-  var component = microcomponent({ name: 'header' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function render () {
-    var { isReady, onimport, oncreate, onreport } = this.props
-    var { showMenu, willShowMenu } = this.state
-
-    if (typeof willShowMenu === 'boolean') {
-      showMenu = this.state.showMenu = willShowMenu
-      this.state.willShowMenu = null
-    }
-
-    assert.equal(typeof isReady, 'boolean', 'elements/header: isReady should be type boolean')
-    assert.equal(typeof onimport, 'function', 'elements/header: onimport should be type function')
-    assert.equal(typeof oncreate, 'function', 'elements/header: oncreate should be type function')
-
-    if (!isReady) {
-      return html`<header class="${header}"></header>`
-    }
-
-    var createButton = button.header('Share Folder', {
-      id: 'create-new-dat',
-      icon: icon('create-new-dat', { class: shareButtonIcon }),
-      class: 'ml2 ml3-l b--transparent v-mid color-neutral-30 hover-color-white f7 f6-l',
-      onclick: oncreate
-    })
-
-    var loginButton = button.header('Log In', {
-      class: 'ml3 v-mid color-neutral-30 hover-color-white f7 f6-l dn'
-    })
-
-    var menuButton = button.icon('Open Menu', {
-      icon: icon('menu', { class: menuButtonIcon }),
-      class: 'ml3 v-mid color-neutral-20 hover-color-white pointer',
-      onclick: toggle
-    })
-
-    function toggle () {
-      if (component.state.showMenu) hide()
-      else show()
-    }
-
-    function show () {
-      document.body.addEventListener('click', clickedOutside)
-      component.state.willShowMenu = true
-      component.render(component.props)
-    }
-
-    function hide () {
-      document.body.removeEventListener('click', clickedOutside)
-      component.state.willShowMenu = false
-      component.render(component.props)
-    }
-
-    function clickedOutside (e) {
-      if (!component._element.contains(e.target)) hide()
-    }
-
-    return html`
+
+  if (typeof willShowMenu === 'boolean') {
+    showMenu = this.state.showMenu = willShowMenu
+    this.state.willShowMenu = null
+  }
+
+  assert.equal(typeof isReady, 'boolean', 'elements/header: isReady should be type boolean')
+  assert.equal(typeof onimport, 'function', 'elements/header: onimport should be type function')
+  assert.equal(typeof oncreate, 'function', 'elements/header: oncreate should be type function')
+
+  if (!isReady) {
+    return html`<header class="${header}"></header>`
+  }
+
+  var createButton = button.header('Share Folder', {
+    id: 'create-new-dat',
+    icon: icon('create-new-dat', { class: shareButtonIcon }),
+    class: 'ml2 ml3-l b--transparent v-mid color-neutral-30 hover-color-white f7 f6-l',
+    onclick: oncreate
+  })
+
+  var loginButton = button.header('Log In', {
+    class: 'ml3 v-mid color-neutral-30 hover-color-white f7 f6-l dn'
+  })
+
+  var menuButton = button.icon('Open Menu', {
+    icon: icon('menu', { class: menuButtonIcon }),
+    class: 'ml3 v-mid color-neutral-20 hover-color-white pointer',
+    onclick: toggle
+  })
+
+  var self = this
+  function toggle () {
+    if (self.state.showMenu) hide()
+    else show()
+  }
+
+  function show () {
+    document.body.addEventListener('click', clickedOutside)
+    self.state.willShowMenu = true
+    self.createElement(self.props)
+  }
+
+  function hide () {
+    document.body.removeEventListener('click', clickedOutside)
+    self.state.willShowMenu = false
+    self.createElement(self.props)
+  }
+
+  function clickedOutside (e) {
+    if (!self.createElement(self.props).contains(e.target)) hide()
+  }
+
+  return html`
       <header class="${header}">
         <div class="fr relative">
           ${importButton.render({
@@ -123,10 +128,9 @@ function HeaderElement () {
         </div>
       </header>
     `
-  }
+}
 
-  function update (props) {
-    return props.isReady !== this.props.isReady ||
-      typeof this.state.willShowMenu === 'boolean'
-  }
+HeaderElement.prototype.update = function (props) {
+  return props.isReady !== this.props.isReady ||
+    typeof this.state.willShowMenu === 'boolean'
 }
diff --git a/elements/inspect.js b/elements/inspect.js
index 6ede7c48..3a5c5326 100644
--- a/elements/inspect.js
+++ b/elements/inspect.js
@@ -1,6 +1,6 @@
 'use strict'
 
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 var toStr = require('dat-encoding').toStr
 var bytes = require('prettier-bytes')
 var FileList = require('./file-list')
@@ -9,6 +9,8 @@ var html = require('choo/html')
 var css = require('sheetify')
 var icon = require('./icon')
 
+module.exports = Inspect
+
 var detailHeader = css`
   :host {
     height: 4rem;
@@ -32,46 +34,45 @@ var label = css`
   }
 `
 
-module.exports = function () {
-  var component = microcomponent({
-    name: 'inspect',
-    state: {
-      fileList: FileList()
-    }
-  })
-  component.on('render', render)
-  component.on('update', update)
-  return component
+function Inspect () {
+  if (!(this instanceof Inspect)) return new Inspect()
+  Nanocomponent.call(this)
+  this.state = {
+    fileList: FileList()
+  }
+}
+
+Inspect.prototype = Object.create(Nanocomponent.prototype)
 
-  function render () {
-    var { oncancel, onupdate, dat } = this.props
-    var { fileList } = this.state
+Inspect.prototype.createElement = function (props) {
+  var { oncancel, onupdate, dat } = props
+  var { fileList } = this.state
 
-    var title = dat
+  var title = dat
       ? dat.metadata
         ? dat.metadata.title
         : dat.key
       : 'Fetching metadata …'
-    var author = dat
+  var author = dat
       ? dat.metadata
         ? dat.metadata.author
         : 'N/A'
       : '…'
-    var description = dat
+  var description = dat
       ? dat.metadata && dat.metadata.description
         ? dat.metadata.description
         : 'N/A'
       : '…'
-    var size = dat
+  var size = dat
       ? dat.archive.content
         ? bytes(dat.archive.content.byteLength)
         : 'N/A'
       : '…'
-    var peers = dat
+  var peers = dat
       ? dat.network.connected
       : '…'
 
-    return html`
+  return html`
       <main class="flex flex-column">
         <div class="flex flex-column flex-auto">
           <header class="flex items-center ${detailHeader}">
@@ -150,9 +151,9 @@ module.exports = function () {
         </footer>
       </main>
     `
-  }
+}
 
-  function update (props) {
-    return true
-  }
+Inspect.prototype.update = function (props) {
+  return true
 }
+
diff --git a/elements/intro.js b/elements/intro.js
index 45c5b31b..e5ebb6e3 100644
--- a/elements/intro.js
+++ b/elements/intro.js
@@ -1,6 +1,6 @@
 var html = require('choo/html')
 var css = require('sheetify')
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 
 var button = require('./button')
 
@@ -79,34 +79,34 @@ function dots (screen) {
 }
 
 function IntroScreen () {
-  var component = microcomponent({
-    name: 'intro',
-    state: {
-      screen: 0
-    }
-  })
-  component.on('render', render)
-  component.on('update', update)
-  component.on('load', load)
-  component.on('unload', unload)
-  return component
-
-  function next () {
-    component.state.screen++
-    component.state.nextScreen = true
-    component.props.onupdate()
+  if (!(this instanceof IntroScreen)) return new IntroScreen()
+  Nanocomponent.call(this)
+  this.state = {
+    screen: 0
   }
+  this.props = null
+}
 
-  function render () {
-    var { onOpenHomepage, onexit } = this.props
-    var screen = this.state.screen
+IntroScreen.prototype = Object.create(Nanocomponent.prototype)
 
-    function openHomepage (ev) {
-      ev.preventDefault()
-      onOpenHomepage()
-    }
+IntroScreen.prototype.createElement = function (props) {
+  this.props = props
+  var { onOpenHomepage, onexit } = this.props
+  var screen = this.state.screen
 
-    return html`
+  function openHomepage (ev) {
+    ev.preventDefault()
+    onOpenHomepage()
+  }
+
+  var self = this
+  function next () {
+    self.state.screen++
+    self.state.nextScreen = true
+    self.props.onupdate()
+  }
+
+  return html`
       <main class="${intro}">
         <img src="./assets/intro-${screen + 1}.svg" alt="" class="absolute ${image}">
         <div class="${content}">
@@ -142,38 +142,38 @@ function IntroScreen () {
         </div>
         ${screen === 0
           ? button.green('Get Started', { onclick: next, class: 'mt2 mb5 relative' })
-          : html`
+            : html`
             <div class="${footer}">
                 ${button('Skip Intro', { onclick: onexit })}
                 ${dots(screen)}
                 ${screen < 5
                   ? button.green('Next', { onclick: next })
-                  : button.green('Done', { onclick: onexit })}
+                    : button.green('Done', { onclick: onexit })}
               </div>
             `}
       </main>
     `
-  }
+}
 
-  function update () {
-    if (this.state.nextScreen) {
-      this.state.nextScreen = false
-      return true
-    }
-    return false
+IntroScreen.prototype.update = function (props) {
+  if (this.state.nextScreen) {
+    this.state.nextScreen = false
+    return true
   }
+  return false
+}
 
-  function load () {
-    window.addEventListener('keydown', onkeydown)
-  }
+IntroScreen.prototype.load = function () {
+  window.addEventListener('keydown', this.onkeydown)
+}
 
-  function unload () {
-    window.removeEventListener('keydown', onkeydown)
-  }
+IntroScreen.prototype.unload = function () {
+  window.removeEventListener('keydown', this.onkeydown)
+}
 
-  function onkeydown (ev) {
-    if (ev.code !== 'Escape') return
-    window.removeEventListener('keydown', onkeydown)
-    component.props.onexit()
-  }
+IntroScreen.prototype.onkeydown = function (ev) {
+  if (ev.code !== 'Escape') return
+  window.removeEventListener('keydown', this.onkeydown)
+  this.props.onexit()
 }
+
diff --git a/elements/sprite.js b/elements/sprite.js
index d971c46a..68382798 100644
--- a/elements/sprite.js
+++ b/elements/sprite.js
@@ -1,21 +1,27 @@
-const microcomponent = require('microcomponent')
+var html = require('choo/html')
+const Nanocomponent = require('nanocomponent')
 const datIcons = require('dat-icons/raw')
 
-module.exports = svgSprite
+module.exports = SvgSprite
 
-function svgSprite () {
-  const component = microcomponent({ name: 'svg-sprite' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
+function SvgSprite () {
+  if (!(this instanceof SvgSprite)) return new SvgSprite()
+  Nanocomponent.call(this)
+}
+
+SvgSprite.prototype = Object.create(Nanocomponent.prototype)
 
-  function render () {
-    const _el = document.createElement('div')
-    _el.innerHTML = datIcons()
-    return _el.childNodes[0]
-  }
+SvgSprite.prototype.createElement = function () {
+  const _el = document.createElement('div')
+  _el.innerHTML = datIcons()
+  return html`
+  <div>
+    ${_el.childNodes[0]}
+  </div>
+  `
+}
 
-  function update () {
-    return false
-  }
+SvgSprite.prototype.update = function () {
+  return false
 }
+
diff --git a/elements/status-bar.js b/elements/status-bar.js
index c666479e..223eabc7 100644
--- a/elements/status-bar.js
+++ b/elements/status-bar.js
@@ -1,10 +1,12 @@
 'use strict'
 
-const microcomponent = require('microcomponent')
+const Nanocomponent = require('nanocomponent')
 const bytes = require('prettier-bytes')
 const html = require('choo/html')
 const css = require('sheetify')
 
+module.exports = StatusBar
+
 const style = css`
   :host {
     position: absolute;
@@ -16,21 +18,23 @@ const style = css`
   }
 `
 
-module.exports = function () {
-  const component = microcomponent({
-    name: 'status bar',
-    pure: true
-  })
-  component.on('render', render)
-  return component
+function StatusBar () {
+  if (!(this instanceof StatusBar)) return new StatusBar()
+  Nanocomponent.call(this)
+}
+
+StatusBar.prototype = Object.create(Nanocomponent.prototype)
 
-  function render () {
-    const { up, down } = this.props
-    return html`
+StatusBar.prototype.createElement = function (props) {
+  const { up, down } = props
+  return html`
       <div id="status-bar" class=${style}>
         <span class="f7 mr3">Download: ${bytes(down)}/s</span>
         <span class="f7">Upload: ${bytes(up)}/s</span>
       </div>
     `
-  }
+}
+
+StatusBar.prototype.update = function () {
+  return
 }
diff --git a/elements/table-row.js b/elements/table-row.js
index 81fa7e9c..25c7da3e 100644
--- a/elements/table-row.js
+++ b/elements/table-row.js
@@ -1,4 +1,4 @@
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 var encoding = require('dat-encoding')
 var bytes = require('prettier-bytes')
 var html = require('choo/html')
@@ -116,6 +116,13 @@ var networkStyles = css`
 module.exports = Row
 
 function Row () {
+  if (!(this instanceof Row)) return new Row()
+  Nanocomponent.call(this)
+}
+
+Row.prototype = Object.create(Nanocomponent.prototype)
+
+Row.prototype.createElement = function (props) {
   var hexContent = HexContent()
   var finderButton = FinderButton()
   var linkButton = LinkButton()
@@ -123,37 +130,31 @@ function Row () {
   var titleField = TitleField()
   var networkIcon = NetworkIcon()
 
-  var component = microcomponent({ name: 'table-row' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function render () {
-    var { dat, state, emit, highlight } = this.props
-    if (dat instanceof Error) return errorRow(dat, emit, deleteButton)
-
-    var stats = dat.stats
-    var peers = dat.network ? dat.network.connected : 'N/A'
-    var key = encoding.encode(dat.key)
-    var styles = cellStyles
-    if (highlight) styles += ' fade-highlight'
-
-    stats.size = dat.archive.content
-      ? bytes(dat.archive.content.byteLength)
-      : 'N/A'
-    stats.state = !dat.network
-      ? 'paused'
-      : dat.writable || dat.progress === 1
-        ? 'complete'
-        : peers
-          ? 'loading'
-          : 'stale'
-
-    function onclick () {
-      emit('dats:inspect', dat)
-    }
+  var { dat, state, emit, highlight } = props
+  if (dat instanceof Error) return errorRow(dat, emit, deleteButton)
+
+  var stats = dat.stats
+  var peers = dat.network ? dat.network.connected : 'N/A'
+  var key = encoding.encode(dat.key)
+  var styles = cellStyles
+  if (highlight) styles += ' fade-highlight'
+
+  stats.size = dat.archive.content
+    ? bytes(dat.archive.content.byteLength)
+    : 'N/A'
+  stats.state = !dat.network
+    ? 'paused'
+    : dat.writable || dat.progress === 1
+    ? 'complete'
+    : peers
+    ? 'loading'
+    : 'stale'
+
+  function onclick () {
+    emit('dats:inspect', dat)
+  }
 
-    return html`
+  return html`
       <tr id=${key} class=${styles} onclick=${onclick}>
         <td class="cell-1">
           <div class="w2 center">
@@ -190,190 +191,193 @@ function Row () {
         </td>
       </tr>
     `
-  }
+}
 
-  function update (props) {
-    return true
-  }
+Row.prototype.update = function () {
+  return false
 }
 
 function FinderButton () {
-  var component = microcomponent({ name: 'finder-button' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function render () {
-    var { dat, emit } = this.props
-    return button.icon('Open in Finder', {
-      icon: icon('open-in-finder'),
-      class: 'row-action',
-      onclick: function (e) {
-        e.preventDefault()
-        e.stopPropagation()
-        emit('dats:open', dat)
-      }
-    })
-  }
+  if (!(this instanceof FinderButton)) return new FinderButton()
+  Nanocomponent.call(this)
+}
 
-  function update () {
-    return false
-  }
+FinderButton.prototype = Object.create(Nanocomponent.prototype)
+
+FinderButton.prototype.createElement = function (props) {
+  var { dat, emit } = props
+  return button.icon('Open in Finder', {
+    icon: icon('open-in-finder'),
+    class: 'row-action',
+    onclick: function (e) {
+      e.preventDefault()
+      e.stopPropagation()
+      emit('dats:open', dat)
+    }
+  })
+}
+
+FinderButton.prototype.update = function () {
+  return false
 }
 
 function LinkButton () {
-  var component = microcomponent({ name: 'link-button' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function render () {
-    var { dat, emit } = this.props
-    return button.icon('Share Dat', {
-      icon: icon('link'),
-      class: 'row-action',
-      onclick: function (e) {
-        e.preventDefault()
-        e.stopPropagation()
-        emit('dats:share', dat)
-      }
-    })
-  }
+  if (!(this instanceof LinkButton)) return new LinkButton()
+  Nanocomponent.call(this)
+}
 
-  function update () {
-    return false
-  }
+LinkButton.prototype = Object.create(Nanocomponent.prototype)
+
+LinkButton.prototype.createElement = function (props) {
+  var { dat, emit } = props
+  return button.icon('Share Dat', {
+    icon: icon('link'),
+    class: 'row-action',
+    onclick: function (e) {
+      e.preventDefault()
+      e.stopPropagation()
+      emit('dats:share', dat)
+    }
+  })
 }
 
-function DeleteButton () {
-  var component = microcomponent({ name: 'delete-button' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function render () {
-    var { dat, emit } = this.props
-    return button.icon('Remove Dat', {
-      icon: icon('delete'),
-      class: 'row-action delete',
-      onclick: function (e) {
-        e.preventDefault()
-        e.stopPropagation()
-        emit('dats:remove', { key: dat.key || dat.data.key })
-      }
-    })
-  }
+LinkButton.prototype.update = function () {
+  return false
+}
 
-  function update () {
-    return false
-  }
+function DeleteButton () {
+  if (!(this instanceof DeleteButton)) return new DeleteButton()
+  Nanocomponent.call(this)
 }
 
-function NetworkIcon () {
-  var component = microcomponent({
-    name: 'network-icon',
-    state: {
-      peerCount: 0
+DeleteButton.prototype = Object.create(Nanocomponent.prototype)
+
+DeleteButton.prototype.createElement = function (props) {
+  var { dat, emit } = props
+  return button.icon('Remove Dat', {
+    icon: icon('delete'),
+    class: 'row-action delete',
+    onclick: function (e) {
+      e.preventDefault()
+      e.stopPropagation()
+      emit('dats:remove', { key: dat.key || dat.data.key })
     }
   })
-  component.on('render', render)
-  component.on('update', update)
-  return component
-
-  function render () {
-    var { dat } = this.props
-    var peerCount = this.state.peerCount = dat.network
-      ? dat.network.connected
-      : 0
-    var iconClass = peerCount === 0
-      ? 'network-peers-0'
-      : peerCount === 1
-        ? 'network-peers-1'
-        : 'network-peers-many'
-
-    return icon('network', { class: iconClass })
-  }
+}
+
+DeleteButton.prototype.update = function () {
+  return false
+}
 
-  function update ({ dat, emit }) {
-    var newPeerCount = dat.network ? dat.network.connected : 0
-    return this.state.peerCount !== newPeerCount
+function NetworkIcon () {
+  if (!(this instanceof NetworkIcon)) return new NetworkIcon()
+  Nanocomponent.call(this)
+  this.state = {
+    peerCount: 0
   }
 }
 
+NetworkIcon.prototype = Object.create(Nanocomponent.prototype)
+
+NetworkIcon.prototype.createElement = function (props) {
+  var { dat } = props
+  var peerCount = this.state.peerCount = dat.network
+    ? dat.network.connected
+    : 0
+  var iconClass = peerCount === 0
+    ? 'network-peers-0'
+    : peerCount === 1
+    ? 'network-peers-1'
+    : 'network-peers-many'
+
+  return html`
+    <div>${icon('network', { class: iconClass })}</div>
+  `
+}
+
+NetworkIcon.prototype.update = function ({ dat, emit }) {
+  var newPeerCount = dat.network ? dat.network.connected : 0
+  return this.state.peerCount !== newPeerCount
+}
+
 // create a new hexcontent icon
 function HexContent () {
-  var component = microcomponent({ name: 'hex-content' })
-  component.on('render', render)
-  component.on('update', update)
-  return component
+  if (!(this instanceof HexContent)) return new HexContent()
+  Nanocomponent.call(this)
+  this.state = {
+    peerCount: 0
+  }
+}
 
+HexContent.prototype = Object.create(Nanocomponent.prototype)
+
+HexContent.prototype.createElement = function (props) {
+  var state = this.state.state = props.stats.state
+  var { emit, dat } = props
+
+  var self = this
   function onmousemove (ev) {
-    if (!component.state.hover) return
-    if (component._element.contains(ev.target)) return
-    component.state.setHover = false
+    if (!self.state.hover) return
+    if (self.element.contains(ev.target)) return
+    self.state.setHover = false
     document.body.removeEventListener('mousemove', onmousemove)
-    component.render(component.props)
+    self.render(props)
   }
 
-  function render () {
-    var state = this.state.state = this.props.stats.state
-    var { emit, dat } = this.props
-
-    if (typeof this.state.setHover === 'boolean') {
-      if (this.state.setHover) document.body.addEventListener('mousemove', onmousemove)
-      this.state.hover = this.state.setHover
-      this.state.setHover = null
-    }
-
-    if (this.state.hover) {
-      return button.icon('pause', {
-        icon: icon('hexagon-pause', {class: 'w2'}),
-        class: 'color-neutral-40 ph0',
-        onclick: togglePause
-      })
-    } else if (state === 'loading') {
-      return button.icon('loading', {
-        icon: icon('hexagon-down', {class: 'w2'}),
-        class: 'color-blue hover-color-blue-hover ph0',
-        onclick: togglePause
-      })
-    } else if (state === 'paused') {
-      return button.icon('paused', {
-        icon: icon('hexagon-resume', {class: 'w2'}),
-        class: 'color-neutral-30 hover-color-neutral-40 ph0',
-        onclick: togglePause
-      })
-    } else if (state === 'complete') {
-      return button.icon('complete', {
-        icon: icon('hexagon-up', {class: 'w2'}),
-        class: 'color-green hover-color-green-hover ph0',
-        onclick: togglePause,
-        onmouseover: ev => {
-          this.state.setHover = true
-          this.render(this.props)
-        }
-      })
-    } else {
-      return button.icon('stale', {
-        icon: icon('hexagon-x', {class: 'w2'}),
-        class: 'color-neutral-30 hover-color-neutral-40 ph0',
-        onclick: togglePause
-      })
-    }
+  if (typeof this.state.setHover === 'boolean') {
+    if (this.state.setHover) document.body.addEventListener('mousemove', onmousemove)
+    this.state.hover = this.state.setHover
+    this.state.setHover = null
+  }
 
-    function togglePause (e) {
-      e.preventDefault()
-      e.stopPropagation()
-      emit('dats:toggle-pause', dat)
-    }
+  if (this.state.hover) {
+    return button.icon('pause', {
+      icon: icon('hexagon-pause', {class: 'w2'}),
+      class: 'color-neutral-40 ph0',
+      onclick: togglePause
+    })
+  } else if (state === 'loading') {
+    return button.icon('loading', {
+      icon: icon('hexagon-down', {class: 'w2'}),
+      class: 'color-blue hover-color-blue-hover ph0',
+      onclick: togglePause
+    })
+  } else if (state === 'paused') {
+    return button.icon('paused', {
+      icon: icon('hexagon-resume', {class: 'w2'}),
+      class: 'color-neutral-30 hover-color-neutral-40 ph0',
+      onclick: togglePause
+    })
+  } else if (state === 'complete') {
+    return button.icon('complete', {
+      icon: icon('hexagon-up', {class: 'w2'}),
+      class: 'color-green hover-color-green-hover ph0',
+      onclick: togglePause,
+      onmouseover: ev => {
+        this.state.setHover = true
+        this.rerender()
+      }
+    })
+  } else {
+    return button.icon('stale', {
+      icon: icon('hexagon-x', {class: 'w2'}),
+      class: 'color-neutral-30 hover-color-neutral-40 ph0',
+      onclick: togglePause
+    })
   }
 
-  function update ({ dat, stats, emit }) {
-    return stats.state !== this.state.state ||
-      typeof this.state.setHover === 'boolean'
+  function togglePause (e) {
+    e.preventDefault()
+    e.stopPropagation()
+    emit('dats:toggle-pause', dat)
   }
 }
 
+HexContent.prototype.update = function ({ dat, stats, emit }) {
+  return stats.state !== this.state.state ||
+    typeof this.state.setHover === 'boolean'
+}
+
 function errorRow (err, emit, deleteButton) {
   var errorHexIcon = icon('hexagon-x', {
     class: 'w2 color-red'
diff --git a/elements/table-title-field.js b/elements/table-title-field.js
index 3630ed86..c3b21b90 100644
--- a/elements/table-title-field.js
+++ b/elements/table-title-field.js
@@ -1,4 +1,4 @@
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 var nanomorph = require('nanomorph')
 var html = require('choo/html')
 var css = require('sheetify')
@@ -52,21 +52,10 @@ module.exports = TitleField
 // - pressing enter (saving)
 // - clicking the save button (saving)
 function TitleField () {
-  var component = microcomponent({
-    name: 'table-title-field',
-    state: resetState()
-  })
-  component.on('render', render)
-  component.on('render:active', renderActive)
-  component.on('render:inactive', renderInactive)
-  component.on('update', update)
-  return component
-
-  function update ({ dat }) {
-    return dat.writable !== this.state.writable ||
-      dat.key.toString('hex') !== this.state.key ||
-      this.state.title !== dat.metadata.title || '#' + this.state.key
-  }
+  if (!(this instanceof TitleField)) return new TitleField()
+  Nanocomponent.call(this)
+  this.props = null
+  this.state = resetState()
 
   function resetState () {
     return {
@@ -77,28 +66,33 @@ function TitleField () {
       key: null
     }
   }
+}
 
-  function render () {
-    var dat = component.props.dat
-    var state = component.state
+TitleField.prototype = Object.create(Nanocomponent.prototype)
 
-    if (dat) {
-      state.writable = dat.writable
-      state.key = dat.key.toString('hex')
-      state.title = dat.metadata.title || ''
-      state.placeholderTitle = '#' + state.key
-    }
+TitleField.prototype.createElement = function (props) {
+  var dat = props.dat
+  this.props = props
+  var state = this.state
 
-    if (state.isEditing && state.writable) return component.emit('render:active')
-    else return component.emit('render:inactive')
+  if (dat) {
+    state.writable = dat.writable
+    state.key = dat.key.toString('hex')
+    state.title = dat.metadata.title || ''
+    state.placeholderTitle = '#' + state.key
   }
 
-  function renderInactive () {
-    var state = this.state
-    state.editValue = ''
+  if (state.isEditing && state.writable) return this.renderActive()
+  else return this.renderInactive()
+}
 
-    return state.writable
-      ? html`
+TitleField.prototype.renderInactive = function () {
+  var self = this
+  var state = this.state
+  state.editValue = ''
+
+  return state.writable
+    ? html`
           <div class=${editableField}>
             <h2 class="f6 f5-l normal truncate pr3" onclick=${onclick}>
               ${state.title || state.placeholderTitle}
@@ -106,7 +100,7 @@ function TitleField () {
             </h2>
           </div>
         `
-      : html`
+    : html`
           <div>
             <h2 class="f6 f5-l normal truncate pr3">
               ${state.title || state.placeholderTitle}
@@ -114,25 +108,25 @@ function TitleField () {
           </div>
         `
 
-    function onclick (e) {
-      e.stopPropagation()
-      e.preventDefault()
-      state.isEditing = true
-      state.editValue = state.title
-      component.render(Object.assign({}, component.props))
-    }
+  function onclick (e) {
+    e.stopPropagation()
+    e.preventDefault()
+    state.isEditing = true
+    state.editValue = state.title
+    self.render(Object.assign({}, self.props))
   }
+}
 
-  function renderActive () {
-    setTimeout(function () {
-      var input = self._element.querySelector('input')
-      input.focus()
-      input.select()
-    }, 0)
+TitleField.prototype.renderActive = function () {
+  var self = this
+  setTimeout(function () {
+    var input = self.element.querySelector('input')
+    input.focus()
+    input.select()
+  }, 0)
 
-    var self = this
-    var state = this.state
-    return html`
+  var state = this.state
+  return html`
       <div>
         <div class=${overlay} onclick=${deactivate}></div>
         <div class="${editableField} bg-white nt1 nb1 nl1 pl1 shadow-1 flex justify-between">
@@ -143,44 +137,50 @@ function TitleField () {
       </div>
     `
 
-    function handleKeypress (e) {
-      var oldValue = state.editValue
-      var newValue = e.target.value
-      state.editValue = newValue
-      e.stopPropagation()
+  function handleKeypress (e) {
+    var oldValue = state.editValue
+    var newValue = e.target.value
+    state.editValue = newValue
+    e.stopPropagation()
 
-      if (e.code === 'Escape') {
-        e.preventDefault()
-        deactivate()
-      } else if (e.code === 'Enter') {
-        e.preventDefault()
-        handleSave()
-      } else if (oldValue !== newValue) {
-        nanomorph(self._element.querySelector('button'), renderButton())
-      }
+    if (e.code === 'Escape') {
+      e.preventDefault()
+      deactivate()
+    } else if (e.code === 'Enter') {
+      e.preventDefault()
+      handleSave()
+    } else if (oldValue !== newValue) {
+      nanomorph(self.element.querySelector('button'), renderButton())
     }
+  }
 
-    function renderButton () {
-      if (state.editValue === state.title) {
-        return button('Save', { onclick: deactivate })
-      } else {
-        return button.green('Save', { onclick: handleSave })
-      }
+  function renderButton () {
+    if (state.editValue === state.title) {
+      return button('Save', { onclick: deactivate })
+    } else {
+      return button.green('Save', { onclick: handleSave })
     }
+  }
 
-    function handleSave (e) {
-      if (e) {
-        e.stopPropagation()
-        e.preventDefault()
-      }
-      component.props.emit('dats:update-title', { key: self.state.key, title: self.state.editValue })
-      deactivate()
+  function handleSave (e) {
+    if (e) {
+      e.stopPropagation()
+      e.preventDefault()
     }
+    self.props.emit('dats:update-title', { key: self.state.key, title: self.state.editValue })
+    deactivate()
+  }
 
-    function deactivate (e) {
-      if (e) e.stopPropagation()
-      state.isEditing = false
-      component.render(Object.assign({}, component.props))
-    }
+  function deactivate (e) {
+    if (e) e.stopPropagation()
+    state.isEditing = false
+    self.render(Object.assign({}, self.props))
   }
 }
+
+TitleField.prototype.update = function ({ dat }) {
+  return dat.writable !== this.state.writable ||
+    dat.key.toString('hex') !== this.state.key ||
+    this.state.title !== dat.metadata.title || '#' + this.state.key
+}
+
diff --git a/elements/table.js b/elements/table.js
index b27a9782..b8c28b2c 100644
--- a/elements/table.js
+++ b/elements/table.js
@@ -1,4 +1,4 @@
-var microcomponent = require('microcomponent')
+var Nanocomponent = require('nanocomponent')
 var nanolog = require('nanologger')
 var html = require('choo/html')
 var css = require('sheetify')
@@ -42,17 +42,17 @@ var tableStyles = css`
   }
 `
 
-var tableHead = TableHead()
 var tableRows = TableRows()
 
 module.exports = tableElement
 
 function tableElement (state, emit) {
+  var tableHead = TableHead()
   var dats = state.dats.values
   return html`
     <main>
       <table class="${tableStyles}">
-        ${tableHead.render()}
+        ${tableHead.createElement()}
         <tbody>
           ${tableRows(dats, state, emit)}
         </tbody>
@@ -77,12 +77,12 @@ function TableRows () {
       var row = elements[key]
       usedKeys.push(key)
       if (row) {
-        return row.render({ dat, state, emit })
+        return row.createElement({ dat, state, emit })
       } else {
         var highlight = !initialLoad
         var newRow = TableRow()
         elements[key] = newRow
-        return newRow.render({ dat, state, emit, highlight })
+        return newRow.createElement({ dat, state, emit, highlight })
       }
     })
 
@@ -96,12 +96,14 @@ function TableRows () {
 }
 
 function TableHead () {
-  return microcomponent({
-    name: 'table-head',
-    pure: true
-  })
-  .on('render', function () {
-    return html`
+  if (!(this instanceof TableHead)) return new TableHead()
+  Nanocomponent.call(this)
+}
+
+TableHead.prototype = Object.create(Nanocomponent.prototype)
+
+TableHead.prototype.createElement = function () {
+  return html`
       <thead>
         <tr>
           <th class="cell-1"></th>
@@ -113,5 +115,8 @@ function TableHead () {
         </tr>
       </thead>
     `
-  })
+}
+
+TableHead.prototype.update = function () {
+  return
 }
diff --git a/package-lock.json b/package-lock.json
index 4a5afd3b..997bf8ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,9 +10,18 @@
       "integrity": "sha512-+rr4OgeTNrLuJAf09o3USdttEYiXvZshWMkhD6wR9v1ieXH0JM1Q2yT41/cJuJcqiPpSXlM/g3aR+Y5MWQdr0Q==",
       "dev": true,
       "requires": {
-        "7zip-bin-mac": "1.0.1"
+        "7zip-bin-linux": "1.2.0",
+        "7zip-bin-mac": "1.0.1",
+        "7zip-bin-win": "2.1.1"
       }
     },
+    "7zip-bin-linux": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/7zip-bin-linux/-/7zip-bin-linux-1.2.0.tgz",
+      "integrity": "sha512-umB98LN18XBGKPw4EKET2zPDqVhEU1mxXA1Gx0BM+DoBt4hnlZPNkpSMNzmuNbQshi9SzLhqlTAyKcAgNrbV3Q==",
+      "dev": true,
+      "optional": true
+    },
     "7zip-bin-mac": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/7zip-bin-mac/-/7zip-bin-mac-1.0.1.tgz",
@@ -20,6 +29,13 @@
       "dev": true,
       "optional": true
     },
+    "7zip-bin-win": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/7zip-bin-win/-/7zip-bin-win-2.1.1.tgz",
+      "integrity": "sha512-6VGEW7PXGroTsoI2QW3b0ea95HJmbVBHvfANKLLMzSzFA1zKqVX5ybNuhmeGpf6vA0x8FJTt6twpprDANsY5WQ==",
+      "dev": true,
+      "optional": true
+    },
     "@types/node": {
       "version": "7.0.48",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.48.tgz",
@@ -414,6 +430,20 @@
         "nanocomponent": "2.0.3",
         "sheetify": "6.2.0",
         "xtend": "4.0.1"
+      },
+      "dependencies": {
+        "nanocomponent": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/nanocomponent/-/nanocomponent-2.0.3.tgz",
+          "integrity": "sha1-yupqOad9l+T3HanCo15hl8cLcus=",
+          "requires": {
+            "observe-resize": "1.1.3",
+            "on-intersect": "1.1.0",
+            "on-load": "3.3.1",
+            "polite-element": "1.0.5",
+            "yo-yoify": "3.7.3"
+          }
+        }
       }
     },
     "base64-js": {
@@ -6052,15 +6082,26 @@
       }
     },
     "nanocomponent": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/nanocomponent/-/nanocomponent-2.0.3.tgz",
-      "integrity": "sha1-yupqOad9l+T3HanCo15hl8cLcus=",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/nanocomponent/-/nanocomponent-6.5.0.tgz",
+      "integrity": "sha512-4r2uISrf+xu3xf50GCoXlPFCjq5PnGCxQBPcf+CErw2XWqkjP04hI+H0TH/8W3mikst6hee/avbXjGOmhysmWQ==",
       "requires": {
-        "observe-resize": "1.1.3",
-        "on-intersect": "1.1.0",
-        "on-load": "3.3.1",
-        "polite-element": "1.0.5",
-        "yo-yoify": "3.7.3"
+        "global": "4.3.2",
+        "nanoassert": "1.1.0",
+        "nanomorph": "5.1.3",
+        "nanotiming": "6.1.5",
+        "on-load": "3.3.4"
+      },
+      "dependencies": {
+        "on-load": {
+          "version": "3.3.4",
+          "resolved": "https://registry.npmjs.org/on-load/-/on-load-3.3.4.tgz",
+          "integrity": "sha512-WhwvSW0hZndA7HjN1O3AypgaAahFPTOmJ43bQUTQHsiHhtp9/kk+WlMnd/skqBkWuiNcQqNwKo2ZiwwRWStJIA==",
+          "requires": {
+            "global": "4.3.2",
+            "nanoassert": "1.1.0"
+          }
+        }
       }
     },
     "nanohref": {
diff --git a/package.json b/package.json
index aef1213a..2fc78239 100644
--- a/package.json
+++ b/package.json
@@ -23,12 +23,12 @@
     "electron-window": "^0.8.1",
     "envobj": "^1.0.2",
     "explain-error": "^1.0.3",
-    "microcomponent": "^3.1.6",
     "minimist": "^1.2.0",
     "mirror-folder": "^2.1.0",
     "mkdirp": "^0.5.1",
     "ms": "^0.7.2",
     "multidat": "^5.0.1",
+    "nanocomponent": "^6.5.0",
     "nanologger": "^1.0.2",
     "nanomorph": "^5.0.0",
     "prettier-bytes": "^1.0.3",

From 84852e81d0d7db7cfdf446659bedf496bb2dd144 Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Thu, 18 Jan 2018 15:59:28 +0900
Subject: [PATCH 02/18] Fixed & simplified header hamburger display.

---
 elements/header.js | 58 +++++++++++++++++++++++++---------------------
 pages/main.js      |  1 +
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/elements/header.js b/elements/header.js
index d71d4745..9fe7306d 100644
--- a/elements/header.js
+++ b/elements/header.js
@@ -19,6 +19,9 @@ const header = css`
     background-color: var(--color-neutral);
     color: var(--color-white);
     -webkit-app-region: drag;
+    z-index: 1000;
+    position: relative;
+    width: 100%;
   }
 `
 
@@ -45,15 +48,10 @@ HeaderElement.prototype = Object.create(Nanocomponent.prototype)
 
 HeaderElement.prototype.createElement = function (props) {
   this.props = props
-  var { isReady, onimport, oncreate, onreport } = this.props
-  var { showMenu, willShowMenu } = this.state
+  var { isReady, onimport, oncreate, onreport, onupdate } = this.props
+  var { showMenu } = this.state
   var importButton = DatImport()
 
-  if (typeof willShowMenu === 'boolean') {
-    showMenu = this.state.showMenu = willShowMenu
-    this.state.willShowMenu = null
-  }
-
   assert.equal(typeof isReady, 'boolean', 'elements/header: isReady should be type boolean')
   assert.equal(typeof onimport, 'function', 'elements/header: onimport should be type function')
   assert.equal(typeof oncreate, 'function', 'elements/header: oncreate should be type function')
@@ -76,29 +74,30 @@ HeaderElement.prototype.createElement = function (props) {
   var menuButton = button.icon('Open Menu', {
     icon: icon('menu', { class: menuButtonIcon }),
     class: 'ml3 v-mid color-neutral-20 hover-color-white pointer',
-    onclick: toggle
+    onclick: function () {
+      toggle(true)
+      return false
+    }
   })
 
   var self = this
-  function toggle () {
-    if (self.state.showMenu) hide()
-    else show()
-  }
-
-  function show () {
-    document.body.addEventListener('click', clickedOutside)
-    self.state.willShowMenu = true
-    self.createElement(self.props)
-  }
-
-  function hide () {
-    document.body.removeEventListener('click', clickedOutside)
-    self.state.willShowMenu = false
-    self.createElement(self.props)
+  function toggle (newState) {
+    if (self.state.showMenu !== newState) {
+      self.state.showMenu = newState
+      setTimeout(function () {
+        if (newState) {
+          document.body.addEventListener('click', clickedOutside)
+        } else {
+          document.body.removeEventListener('click', clickedOutside)
+        }
+      }, 1)
+      self.state.update = true
+      onupdate()
+    }
   }
 
   function clickedOutside (e) {
-    if (!self.createElement(self.props).contains(e.target)) hide()
+    if (!self.createElement(self.props).contains(e.target)) toggle(false)
   }
 
   return html`
@@ -130,7 +129,14 @@ HeaderElement.prototype.createElement = function (props) {
     `
 }
 
+HeaderElement.prototype.consumeUpdate = function () {
+  if (!this.state.update) {
+    return false
+  }
+  this.state.update = false
+  return true
+}
+
 HeaderElement.prototype.update = function (props) {
-  return props.isReady !== this.props.isReady ||
-    typeof this.state.willShowMenu === 'boolean'
+  return props.isReady !== this.props.isReady || this.consumeUpdate()
 }
diff --git a/pages/main.js b/pages/main.js
index 6434a2a8..07a1ffdb 100644
--- a/pages/main.js
+++ b/pages/main.js
@@ -31,6 +31,7 @@ function mainView (state, emit) {
   const isReady = state.dats.ready
   const headerProps = {
     isReady: isReady,
+    onupdate: () => emit('render'),
     oncreate: () => emit('dats:create'),
     onimport: (link) => emit('dats:download', link),
     onreport: () => shell.openExternal('https://github.com/datproject/dat-desktop/issues')

From 7f64ce821664c9b92f7627b75b365e6d1fb5513e Mon Sep 17 00:00:00 2001
From: Ashok <coderatlabs@gmail.com>
Date: Sat, 13 Jan 2018 00:23:47 +0530
Subject: [PATCH 03/18] replace microcomponent with nanocomponent

---
 elements/header.js    |  16 +++----
 elements/table-row.js | 109 ++++++++++++++++++++++--------------------
 2 files changed, 64 insertions(+), 61 deletions(-)

diff --git a/elements/header.js b/elements/header.js
index 9fe7306d..63c6dd64 100644
--- a/elements/header.js
+++ b/elements/header.js
@@ -103,7 +103,7 @@ HeaderElement.prototype.createElement = function (props) {
   return html`
       <header class="${header}">
         <div class="fr relative">
-          ${importButton.render({
+          ${importButton.createElement({
             onsubmit: onimport
           })}
           ${createButton}
@@ -129,14 +129,10 @@ HeaderElement.prototype.createElement = function (props) {
     `
 }
 
-HeaderElement.prototype.consumeUpdate = function () {
-  if (!this.state.update) {
-    return false
-  }
-  this.state.update = false
-  return true
-}
-
 HeaderElement.prototype.update = function (props) {
-  return props.isReady !== this.props.isReady || this.consumeUpdate()
+  if (this.state.update) {
+    this.state.update = false
+    return true
+  }
+  return props.isReady !== this.props.isReady
 }
diff --git a/elements/table-row.js b/elements/table-row.js
index 25c7da3e..88417d12 100644
--- a/elements/table-row.js
+++ b/elements/table-row.js
@@ -1,6 +1,5 @@
 var Nanocomponent = require('nanocomponent')
 var encoding = require('dat-encoding')
-var bytes = require('prettier-bytes')
 var html = require('choo/html')
 var css = require('sheetify')
 
@@ -8,6 +7,7 @@ var TitleField = require('./table-title-field')
 var button = require('./button')
 var status = require('./status')
 var icon = require('./icon')
+var { datSize, datPeers, datState } = require('../lib/datInfo')
 
 var cellStyles = css`
   :host {
@@ -118,52 +118,44 @@ module.exports = Row
 function Row () {
   if (!(this instanceof Row)) return new Row()
   Nanocomponent.call(this)
+
+  this.parts = {
+    hexContent: HexContent(),
+    finderButton: FinderButton(),
+    linkButton: LinkButton(),
+    deleteButton: DeleteButton(),
+    titleField: TitleField(),
+    networkIcon: NetworkIcon()
+  }
 }
 
 Row.prototype = Object.create(Nanocomponent.prototype)
 
 Row.prototype.createElement = function (props) {
-  var hexContent = HexContent()
-  var finderButton = FinderButton()
-  var linkButton = LinkButton()
-  var deleteButton = DeleteButton()
-  var titleField = TitleField()
-  var networkIcon = NetworkIcon()
-
-  var { dat, state, emit, highlight } = props
-  if (dat instanceof Error) return errorRow(dat, emit, deleteButton)
-
-  var stats = dat.stats
-  var peers = dat.network ? dat.network.connected : 'N/A'
+  var { dat, emit, highlight } = props
+  var parts = this.parts
+  if (dat instanceof Error) return errorRow(dat, emit, parts.deleteButton)
+
   var key = encoding.encode(dat.key)
   var styles = cellStyles
   if (highlight) styles += ' fade-highlight'
 
-  stats.size = dat.archive.content
-    ? bytes(dat.archive.content.byteLength)
-    : 'N/A'
-  stats.state = !dat.network
-    ? 'paused'
-    : dat.writable || dat.progress === 1
-    ? 'complete'
-    : peers
-    ? 'loading'
-    : 'stale'
-
   function onclick () {
-    emit('dats:inspect', dat)
+    if (!parts.titleField.state.isEditing) {
+      emit('dats:inspect', dat)
+    }
   }
 
   return html`
       <tr id=${key} class=${styles} onclick=${onclick}>
         <td class="cell-1">
           <div class="w2 center">
-            ${hexContent.render({ dat, stats, emit })}
+            ${parts.hexContent.render(props)}
           </div>
         </td>
         <td class="cell-2">
           <div class="cell-truncate">
-            ${titleField.render({ dat, state, emit })}
+            ${parts.titleField.render(props)}
             <p class="f7 f6-l color-neutral-60 truncate">
               <span class="author">${dat.metadata.author || 'Anonymous'} • </span>
               <span class="title">
@@ -173,28 +165,28 @@ Row.prototype.createElement = function (props) {
           </div>
         </td>
         <td class="cell-3">
-          ${status(dat, stats)}
+          ${status(dat)}
         </td>
         <td class="f6 f5-l cell-4 size">
-          ${stats.size}
+          ${datSize(dat)}
         </td>
         <td class="cell-5 ${networkStyles}">
-          ${networkIcon.render({ dat, emit })}
-          <span class="network v-top f6 f5-l ml1">${peers}</span>
+          ${parts.networkIcon.render(props)}
+          <span class="network v-top f6 f5-l ml1">${datPeers(dat)}</span>
         </td>
         <td class="cell-6">
           <div class="flex justify-end ${iconStyles}">
-            ${finderButton.render({ dat, emit })}
-            ${linkButton.render({ dat, emit })}
-            ${deleteButton.render({ dat, emit })}
+            ${parts.finderButton.render(props)}
+            ${parts.linkButton.render(props)}
+            ${parts.deleteButton.render(props)}
           </div>
         </td>
       </tr>
     `
 }
 
-Row.prototype.update = function () {
-  return false
+Row.prototype.update = function (props) {
+  return Object.values(this.parts).find(component => component.update(props, true)) !== undefined
 }
 
 function FinderButton () {
@@ -312,22 +304,23 @@ function HexContent () {
 HexContent.prototype = Object.create(Nanocomponent.prototype)
 
 HexContent.prototype.createElement = function (props) {
-  var state = this.state.state = props.stats.state
+  var state = this.state.state = datState(props.dat)
   var { emit, dat } = props
 
   var self = this
   function onmousemove (ev) {
-    if (!self.state.hover) return
-    if (self.element.contains(ev.target)) return
-    self.state.setHover = false
-    document.body.removeEventListener('mousemove', onmousemove)
-    self.render(props)
+    if (!self.element.contains(ev.target)) {
+      self.state.hover = false
+      self.state.update = true
+      self.state.listening = false
+      document.body.removeEventListener('mousemove', onmousemove)
+      emit('render')
+    }
   }
 
-  if (typeof this.state.setHover === 'boolean') {
-    if (this.state.setHover) document.body.addEventListener('mousemove', onmousemove)
-    this.state.hover = this.state.setHover
-    this.state.setHover = null
+  if (this.state.hover && !this.state.listening) {
+    document.body.addEventListener('mousemove', onmousemove)
+    this.state.listening = true
   }
 
   if (this.state.hover) {
@@ -354,8 +347,9 @@ HexContent.prototype.createElement = function (props) {
       class: 'color-green hover-color-green-hover ph0',
       onclick: togglePause,
       onmouseover: ev => {
-        this.state.setHover = true
-        this.rerender()
+        this.state.hover = true
+        this.state.update = true
+        emit('render')
       }
     })
   } else {
@@ -373,9 +367,22 @@ HexContent.prototype.createElement = function (props) {
   }
 }
 
-HexContent.prototype.update = function ({ dat, stats, emit }) {
-  return stats.state !== this.state.state ||
-    typeof this.state.setHover === 'boolean'
+HexContent.prototype.update = function ({ dat, emit }, external) {
+  if (this.state.update) {
+    if (!external) {
+      // `.update` is usually called (and part of) the `.render` method
+      // meaning that setting "state.update" once will result in exactly
+      // one rendering. However, since the table-row is a complex component
+      // and the table row uses `.update` to see if any of the child
+      // components would need an update. If the call comes from
+      // the parent (or externally) we do not reset the update property
+      // to make sure that `.state.update` stays true until actually
+      // rendering the component
+      this.state.update = false
+    }
+    return true
+  }
+  return datState(dat) !== this.state.state
 }
 
 function errorRow (err, emit, deleteButton) {

From cd7e36932d8210cbc7176f9abe72e40afb49d360 Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Fri, 19 Jan 2018 16:18:31 +0900
Subject: [PATCH 04/18] The dat network might be gone.

---
 elements/inspect.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/inspect.js b/elements/inspect.js
index 3a5c5326..aaeb6e06 100644
--- a/elements/inspect.js
+++ b/elements/inspect.js
@@ -68,7 +68,7 @@ Inspect.prototype.createElement = function (props) {
         ? bytes(dat.archive.content.byteLength)
         : 'N/A'
       : '…'
-  var peers = dat
+  var peers = (dat && dat.network)
       ? dat.network.connected
       : '…'
 

From 4818946e86ba94056795bf57938ab72e5cb5f48a Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Fri, 19 Jan 2018 17:02:38 +0900
Subject: [PATCH 05/18] Using self instead of this (NPE)

---
 elements/file-list.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/elements/file-list.js b/elements/file-list.js
index 0a1b7fe6..29932e31 100644
--- a/elements/file-list.js
+++ b/elements/file-list.js
@@ -50,6 +50,7 @@ FileList.prototype.createElement = function (props) {
       }
     }
   }
+  var self = this
 
   function walk () {
     var fs = { name: '/', fs: dat.archive }

From cd84074d0a58ad00cbefa42c4030f62706f2c463 Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Fri, 19 Jan 2018 17:24:30 +0900
Subject: [PATCH 06/18] Setting the stats (a property of the dat) in the
 rendering engine gave some problems in debugging and seems like a violation
 of control flow; so I extracted the logic into a functional method.

---
 elements/status.js |  8 +++++---
 lib/datInfo.js     | 24 ++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 lib/datInfo.js

diff --git a/elements/status.js b/elements/status.js
index ecd9f0c4..80771ed3 100644
--- a/elements/status.js
+++ b/elements/status.js
@@ -1,6 +1,7 @@
 const bytes = require('prettier-bytes')
 const html = require('choo/html')
 const css = require('sheetify')
+const { datState } = require('../lib/datInfo')
 
 const progressbar = css`
   :host {
@@ -82,15 +83,16 @@ const progressSubline = css`
 
 module.exports = function (dat, stats) {
   var progress = Math.floor((dat.progress || 0) * 100)
-  var progressbarLine = (stats.state === 'loading')
+  var state = datState(dat)
+  var progressbarLine = (state === 'loading')
     ? 'line-loading'
-    : (stats.state === 'paused' || stats.state === 'stale')
+    : (state === 'paused' || state === 'stale')
       ? 'line-paused'
       : 'line-complete'
   var netStats = dat.stats.network
 
   var progressText
-  switch (stats.state) {
+  switch (state) {
     case 'complete':
       progressText = `Complete. ↑ ${speed(netStats.uploadSpeed)}`
       break
diff --git a/lib/datInfo.js b/lib/datInfo.js
new file mode 100644
index 00000000..a50eada9
--- /dev/null
+++ b/lib/datInfo.js
@@ -0,0 +1,24 @@
+'use strict'
+var bytes = require('prettier-bytes')
+
+function datPeers (dat) {
+  return dat.network ? dat.network.connected : 'N/A'
+}
+
+module.exports = {
+  datPeers,
+  datSize (dat) {
+    return dat.archive.content
+      ? bytes(dat.archive.content.byteLength)
+      : 'N/A'
+  },
+  datState (dat) {
+    return !dat.network
+      ? 'paused'
+      : dat.writable || dat.progress === 1
+      ? 'complete'
+      : datPeers(dat)
+      ? 'loading'
+      : 'stale'
+  }
+}

From 3bee6006f81649baf910d97a3e78b094c6e529cf Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Fri, 19 Jan 2018 17:39:51 +0900
Subject: [PATCH 07/18] Extracted TableHead and used render instead of
 createElement to reduce the effort

---
 elements/table-head.js | 31 +++++++++++++++++++++++++++++++
 elements/table.js      | 31 +++----------------------------
 2 files changed, 34 insertions(+), 28 deletions(-)
 create mode 100644 elements/table-head.js

diff --git a/elements/table-head.js b/elements/table-head.js
new file mode 100644
index 00000000..890a50bc
--- /dev/null
+++ b/elements/table-head.js
@@ -0,0 +1,31 @@
+'use strict'
+const Nanocomponent = require('nanocomponent')
+const html = require('choo/html')
+
+function TableHead () {
+  if (!(this instanceof TableHead)) return new TableHead()
+  Nanocomponent.call(this)
+}
+
+TableHead.prototype = Object.create(Nanocomponent.prototype)
+
+TableHead.prototype.createElement = function () {
+  return html`
+      <thead>
+        <tr>
+          <th class="cell-1"></th>
+          <th class="tl cell-2">Link</th>
+          <th class="tl cell-3">Status</th>
+          <th class="tl cell-4">Size</th>
+          <th class="tl cell-5">Peers</th>
+          <th class="cell-6"></th>
+        </tr>
+      </thead>
+    `
+}
+
+TableHead.prototype.update = function () {
+  return
+}
+
+module.exports = TableHead
diff --git a/elements/table.js b/elements/table.js
index b8c28b2c..4ea9df77 100644
--- a/elements/table.js
+++ b/elements/table.js
@@ -4,6 +4,7 @@ var html = require('choo/html')
 var css = require('sheetify')
 
 var TableRow = require('./table-row')
+var TableHead = require('./table-head')
 
 var tableStyles = css`
   :host {
@@ -43,16 +44,16 @@ var tableStyles = css`
 `
 
 var tableRows = TableRows()
+var tableHead = TableHead()
 
 module.exports = tableElement
 
 function tableElement (state, emit) {
-  var tableHead = TableHead()
   var dats = state.dats.values
   return html`
     <main>
       <table class="${tableStyles}">
-        ${tableHead.createElement()}
+        ${tableHead.render()}
         <tbody>
           ${tableRows(dats, state, emit)}
         </tbody>
@@ -94,29 +95,3 @@ function TableRows () {
     return renderedElements
   }
 }
-
-function TableHead () {
-  if (!(this instanceof TableHead)) return new TableHead()
-  Nanocomponent.call(this)
-}
-
-TableHead.prototype = Object.create(Nanocomponent.prototype)
-
-TableHead.prototype.createElement = function () {
-  return html`
-      <thead>
-        <tr>
-          <th class="cell-1"></th>
-          <th class="tl cell-2">Link</th>
-          <th class="tl cell-3">Status</th>
-          <th class="tl cell-4">Size</th>
-          <th class="tl cell-5">Peers</th>
-          <th class="cell-6"></th>
-        </tr>
-      </thead>
-    `
-}
-
-TableHead.prototype.update = function () {
-  return
-}

From 3c6387d2041f7ddd9a212f69f1a434e09e1b43a1 Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Fri, 19 Jan 2018 18:08:49 +0900
Subject: [PATCH 08/18] =?UTF-8?q?renderActive=20didn=E2=80=99t=20return=20?=
 =?UTF-8?q?the=20component=20which=20means=20it=20wouldn=E2=80=99t=20be=20?=
 =?UTF-8?q?rendered.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 elements/table-title-field.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/elements/table-title-field.js b/elements/table-title-field.js
index c3b21b90..86b632f9 100644
--- a/elements/table-title-field.js
+++ b/elements/table-title-field.js
@@ -82,8 +82,9 @@ TitleField.prototype.createElement = function (props) {
     state.placeholderTitle = '#' + state.key
   }
 
-  if (state.isEditing && state.writable) return this.renderActive()
-  else return this.renderInactive()
+  return (state.isEditing && state.writable)
+    ? this.renderActive()
+    : this.renderInactive()
 }
 
 TitleField.prototype.renderInactive = function () {

From 953d4e3ae4f84c57e2ed308ce29f9f1e1694b098 Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Sat, 20 Jan 2018 01:09:30 +0900
Subject: [PATCH 09/18] =?UTF-8?q?Fixed=20several=20Data-row=20event=20prob?=
 =?UTF-8?q?lems=20and=20made=20sure=20that=20the=20re-renderings=20don?=
 =?UTF-8?q?=E2=80=99t=20occur=20so=20frequently=20by=20using=20.render=20i?=
 =?UTF-8?q?nstead=20of=20.createElement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 elements/table-title-field.js | 42 +++++++++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/elements/table-title-field.js b/elements/table-title-field.js
index 86b632f9..a1eb502c 100644
--- a/elements/table-title-field.js
+++ b/elements/table-title-field.js
@@ -114,7 +114,8 @@ TitleField.prototype.renderInactive = function () {
     e.preventDefault()
     state.isEditing = true
     state.editValue = state.title
-    self.render(Object.assign({}, self.props))
+    state.update = true
+    self.props.emit('render')
   }
 }
 
@@ -175,13 +176,40 @@ TitleField.prototype.renderActive = function () {
   function deactivate (e) {
     if (e) e.stopPropagation()
     state.isEditing = false
-    self.render(Object.assign({}, self.props))
+    state.update = true
+    self.props.emit('render')
   }
 }
 
-TitleField.prototype.update = function ({ dat }) {
-  return dat.writable !== this.state.writable ||
-    dat.key.toString('hex') !== this.state.key ||
-    this.state.title !== dat.metadata.title || '#' + this.state.key
-}
+TitleField.prototype.update = function ({ dat }, external) {
+  if (this.state.update) {
+    if (!external) {
+      // `.update` is usually called (and part of) the `.render` method
+      // meaning that setting "state.update" once will result in exactly
+      // one rendering. However, since the table-row is a complex component
+      // and the table row uses `.update` to see if any of the child
+      // components would need an update. If the call comes from
+      // the parent (or externally) we do not reset the update property
+      // to make sure that `.state.update` stays true until actually
+      // rendering the component
+      this.state.update = false
+    }
+    return true
+  }
 
+  if (dat.writable !== this.state.writable) {
+    return true
+  }
+
+  if (dat.key.toString('hex') !== this.state.key) {
+    return true
+  }
+
+  var oldTitle = (dat.metadata.title || '#' + this.state.key)
+
+  if (this.state.title !== oldTitle) {
+    return true
+  }
+
+  return false
+}

From 56229d3c82ba9a97f8fb07cba2a5ecea8476252f Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Sat, 20 Jan 2018 02:16:41 +0900
Subject: [PATCH 10/18] Fixed linting

---
 elements/file-list.js | 1 -
 elements/table.js     | 1 -
 2 files changed, 2 deletions(-)

diff --git a/elements/file-list.js b/elements/file-list.js
index 29932e31..0a1b7fe6 100644
--- a/elements/file-list.js
+++ b/elements/file-list.js
@@ -50,7 +50,6 @@ FileList.prototype.createElement = function (props) {
       }
     }
   }
-  var self = this
 
   function walk () {
     var fs = { name: '/', fs: dat.archive }
diff --git a/elements/table.js b/elements/table.js
index 4ea9df77..d05a1ab6 100644
--- a/elements/table.js
+++ b/elements/table.js
@@ -1,4 +1,3 @@
-var Nanocomponent = require('nanocomponent')
 var nanolog = require('nanologger')
 var html = require('choo/html')
 var css = require('sheetify')

From ce890116d7c7154ab0044a2ef20565504409459c Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Mon, 22 Jan 2018 12:51:57 +0900
Subject: [PATCH 11/18] Stop using private createElement method and use
 render/element instead.

---
 elements/header.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/elements/header.js b/elements/header.js
index 63c6dd64..16404194 100644
--- a/elements/header.js
+++ b/elements/header.js
@@ -97,13 +97,13 @@ HeaderElement.prototype.createElement = function (props) {
   }
 
   function clickedOutside (e) {
-    if (!self.createElement(self.props).contains(e.target)) toggle(false)
+    if (!self.element.contains(e.target)) toggle(false)
   }
 
   return html`
       <header class="${header}">
         <div class="fr relative">
-          ${importButton.createElement({
+          ${importButton.render({
             onsubmit: onimport
           })}
           ${createButton}

From 06400b107ff6de8c9897e037c1bd2c8aadd6c7cb Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Mon, 22 Jan 2018 12:57:44 +0900
Subject: [PATCH 12/18] Using partials instead of parts by advice in
 https://github.com/datproject/dat-desktop/pull/450#discussion_r162816525

---
 elements/table-row.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/elements/table-row.js b/elements/table-row.js
index 88417d12..b0876a31 100644
--- a/elements/table-row.js
+++ b/elements/table-row.js
@@ -119,7 +119,7 @@ function Row () {
   if (!(this instanceof Row)) return new Row()
   Nanocomponent.call(this)
 
-  this.parts = {
+  this.partials = {
     hexContent: HexContent(),
     finderButton: FinderButton(),
     linkButton: LinkButton(),
@@ -133,15 +133,15 @@ Row.prototype = Object.create(Nanocomponent.prototype)
 
 Row.prototype.createElement = function (props) {
   var { dat, emit, highlight } = props
-  var parts = this.parts
-  if (dat instanceof Error) return errorRow(dat, emit, parts.deleteButton)
+  var partials = this.partials
+  if (dat instanceof Error) return errorRow(dat, emit, partials.deleteButton)
 
   var key = encoding.encode(dat.key)
   var styles = cellStyles
   if (highlight) styles += ' fade-highlight'
 
   function onclick () {
-    if (!parts.titleField.state.isEditing) {
+    if (!partials.titleField.state.isEditing) {
       emit('dats:inspect', dat)
     }
   }
@@ -150,12 +150,12 @@ Row.prototype.createElement = function (props) {
       <tr id=${key} class=${styles} onclick=${onclick}>
         <td class="cell-1">
           <div class="w2 center">
-            ${parts.hexContent.render(props)}
+            ${partials.hexContent.render(props)}
           </div>
         </td>
         <td class="cell-2">
           <div class="cell-truncate">
-            ${parts.titleField.render(props)}
+            ${partials.titleField.render(props)}
             <p class="f7 f6-l color-neutral-60 truncate">
               <span class="author">${dat.metadata.author || 'Anonymous'} • </span>
               <span class="title">
@@ -171,14 +171,14 @@ Row.prototype.createElement = function (props) {
           ${datSize(dat)}
         </td>
         <td class="cell-5 ${networkStyles}">
-          ${parts.networkIcon.render(props)}
+          ${partials.networkIcon.render(props)}
           <span class="network v-top f6 f5-l ml1">${datPeers(dat)}</span>
         </td>
         <td class="cell-6">
           <div class="flex justify-end ${iconStyles}">
-            ${parts.finderButton.render(props)}
-            ${parts.linkButton.render(props)}
-            ${parts.deleteButton.render(props)}
+            ${partials.finderButton.render(props)}
+            ${partials.linkButton.render(props)}
+            ${partials.deleteButton.render(props)}
           </div>
         </td>
       </tr>
@@ -186,7 +186,7 @@ Row.prototype.createElement = function (props) {
 }
 
 Row.prototype.update = function (props) {
-  return Object.values(this.parts).find(component => component.update(props, true)) !== undefined
+  return Object.values(this.partials).find(component => component.update(props, true)) !== undefined
 }
 
 function FinderButton () {

From 4350edd752bfa41dc21e59d9c50957c5f07f33a6 Mon Sep 17 00:00:00 2001
From: Ashok <coderatlabs@gmail.com>
Date: Mon, 22 Jan 2018 12:42:03 +0530
Subject: [PATCH 13/18] fix deps

---
 package-lock.json | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 997bf8ec..f6da39b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5349,11 +5349,6 @@
       "integrity": "sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE=",
       "dev": true
     },
-    "juliangruber-shallow-equal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/juliangruber-shallow-equal/-/juliangruber-shallow-equal-1.0.4.tgz",
-      "integrity": "sha1-JqQhSCNXVPlCuDwGYfZKsS0245g="
-    },
     "k-bucket": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/k-bucket/-/k-bucket-3.3.0.tgz",
@@ -5779,27 +5774,6 @@
         "readable-stream": "2.3.3"
       }
     },
-    "microcomponent": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/microcomponent/-/microcomponent-3.1.6.tgz",
-      "integrity": "sha1-C9QBOlcEJCHscGbU2OYKx2v99Ms=",
-      "requires": {
-        "juliangruber-shallow-equal": "1.0.4",
-        "nanocomponent": "5.0.3",
-        "nanologger": "1.3.1",
-        "nanomorph": "5.1.3"
-      },
-      "dependencies": {
-        "nanocomponent": {
-          "version": "5.0.3",
-          "resolved": "https://registry.npmjs.org/nanocomponent/-/nanocomponent-5.0.3.tgz",
-          "integrity": "sha1-pc5nwmCBh7PTfsTqjHyiN1agLcc=",
-          "requires": {
-            "on-load": "3.3.1"
-          }
-        }
-      }
-    },
     "micromatch": {
       "version": "2.3.11",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",

From a76251c045f132170f93c4bc94c73cec8da4bd2b Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Tue, 23 Jan 2018 10:42:26 +0900
Subject: [PATCH 14/18] End the app if an error occurs

---
 tests/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/tests/index.js b/tests/index.js
index b0a23b62..90ae4783 100644
--- a/tests/index.js
+++ b/tests/index.js
@@ -27,6 +27,7 @@ tap('init', function (t) {
       .then((val) => t.notEqual(val.width, 0, 'getBounds'))
       .then(() => app.browserWindow.getBounds())
       .then((val) => t.notEqual(val.height, 0, 'getBounds'))
+      .catch(e => t.fail(e))
       .then(() => endTest(app))
   })
   t.end()
@@ -53,6 +54,7 @@ tap('onboarding', function (t) {
       .then(() => app.client.click('button'))
       .then(() => wait())
       .then(() => app.client.getText('button[title="Skip Intro"]'))
+      .catch(e => t.fail(e))
       .then(() => endTest(app))
   })
   t.end()
@@ -99,6 +101,7 @@ tap('working with dats', function (t) {
     .then(() => wait())
     .then(() => app.client.getText('.tutorial'))
     .then((text) => t.ok(text.toLowerCase().match(/share/), 'now the dat is gone and welcome screen is back'))
+    .catch(e => t.fail(e))
     .then(() => endTest(app))
 })
 

From 7cad5388904dd3a4e383b83b7290fdfcf0d290ab Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Tue, 23 Jan 2018 11:30:30 +0900
Subject: [PATCH 15/18] Made tests cancelable through Ctrl+C

---
 tests/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/tests/index.js b/tests/index.js
index 90ae4783..63654436 100644
--- a/tests/index.js
+++ b/tests/index.js
@@ -106,12 +106,14 @@ tap('working with dats', function (t) {
 })
 
 // Create a new app instance
-function createApp () {
-  return new spectron.Application({
+function createApp (opts) {
+  var app = new spectron.Application({
     path: path.join(__dirname, '../node_modules/.bin/electron'),
     args: [path.join(__dirname, '../index.js'), '--data', TEST_DATA, '--db', TEST_DATA_DB],
     env: { NODE_ENV: 'test', RUNNING_IN_SPECTRON: true }
   })
+  process.on('SIGTERM', () => endTest(app))
+  return app
 }
 
 // Starts the app, waits for it to load, returns a promise

From 8a01ee21f81ebd2ab820ea19bec31af8fa8884cb Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Tue, 23 Jan 2018 13:31:10 +0900
Subject: [PATCH 16/18] Fixing a proper reset of the tests folder

---
 tests/index.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/tests/index.js b/tests/index.js
index 63654436..bb00698c 100644
--- a/tests/index.js
+++ b/tests/index.js
@@ -3,6 +3,7 @@ var spectron = require('spectron')
 var path = require('path')
 var tap = require('tap').test
 var del = require('del')
+var { execSync } = require('child_process')
 
 var TEST_DATA = path.join(__dirname, 'test_data')
 var TEST_DATA_DB = path.join(TEST_DATA, 'multidat.json')
@@ -138,7 +139,13 @@ function wait (ms) {
 
 // Quit the app, end the test, either in success (!err) or failure (err)
 function endTest (app) {
-  var paths = [TEST_DATA, path.join(__dirname, 'fixtures', '.dat')]
-  return del(paths)
-    .then(() => app.stop())
+  var fixPath = path.join(__dirname, 'fixtures')
+  return Promise.all([
+    del(fixPath),
+    del(TEST_DATA)
+  ])
+    .then(() => {
+      execSync(`git checkout -- "${fixPath}"`)
+      return app.stop()
+    })
 }

From a683ab7307a205aac5db29349f0bd58b5bf67255 Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Tue, 23 Jan 2018 13:41:13 +0900
Subject: [PATCH 17/18] no message

---
 models/dats.js | 13 ++++++++++---
 tests/index.js |  7 +++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/models/dats.js b/models/dats.js
index 81acb9d3..0b6e3d5d 100644
--- a/models/dats.js
+++ b/models/dats.js
@@ -26,6 +26,15 @@ var downloadsDir = (argv.data)
 
 module.exports = datsModel
 
+function showOpenDialog () {
+  if (process.env.TEST_OPEN_DIALOG_RESULT) {
+    return [process.env.TEST_OPEN_DIALOG_RESULT]
+  }
+  return dialog.showOpenDialog({
+    properties: ['openDirectory']
+  })
+}
+
 function datsModel (state, bus) {
   state.dats = xtend({
     downloadsDir: downloadsDir,
@@ -92,9 +101,7 @@ function datsModel (state, bus) {
   // choose a directory and convert it to a dat archive
   bus.on('dats:create', function (pathname) {
     if (!pathname) {
-      var files = dialog.showOpenDialog({
-        properties: ['openDirectory']
-      })
+      var files = showOpenDialog()
       if (!files || !files.length) return
       pathname = files[0]
     }
diff --git a/tests/index.js b/tests/index.js
index bb00698c..b3105190 100644
--- a/tests/index.js
+++ b/tests/index.js
@@ -62,7 +62,9 @@ tap('onboarding', function (t) {
 })
 
 tap('working with dats', function (t) {
-  var app = createApp()
+  var app = createApp({
+    openDialogResult: path.join(__dirname, 'fixtures')
+  })
   return waitForLoad(app)
     .then(() => app.browserWindow.isVisible())
     .then((isVisible) => t.ok(isVisible, 'isVisible'))
@@ -108,10 +110,11 @@ tap('working with dats', function (t) {
 
 // Create a new app instance
 function createApp (opts) {
+  opts = opts || {}
   var app = new spectron.Application({
     path: path.join(__dirname, '../node_modules/.bin/electron'),
     args: [path.join(__dirname, '../index.js'), '--data', TEST_DATA, '--db', TEST_DATA_DB],
-    env: { NODE_ENV: 'test', RUNNING_IN_SPECTRON: true }
+    env: { NODE_ENV: 'test', RUNNING_IN_SPECTRON: true, TEST_OPEN_DIALOG_RESULT: opts.openDialogResult }
   })
   process.on('SIGTERM', () => endTest(app))
   return app

From 05e3636911be46f059007374d4fe9f12511ccb32 Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Tue, 23 Jan 2018 13:41:28 +0900
Subject: [PATCH 18/18] Using the Share Folder button

---
 tests/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/index.js b/tests/index.js
index b3105190..24495ef4 100644
--- a/tests/index.js
+++ b/tests/index.js
@@ -72,7 +72,7 @@ tap('working with dats', function (t) {
     .then(() => wait(4000))
     .then(() => app.client.click('button[title="Skip Intro"]'))
     .then(() => wait())
-    .then(() => app.client.click('button')) // create new
+    .then(() => app.client.click('button[title="Share Folder"]')) // create new
     .then(() => wait())
     .then(() => app.client.getText('.size'))
     .then((text) => {