replace microcomponent with nanocomponent

dat-ecosystem-archive · Jan 13, 2018 · 1857e8d · 1857e8d
1 parent 2aaf542
commit 1857e8d
Show file tree

Hide file tree

Showing 13 changed files with 617 additions and 551 deletions.
diff --git 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
@@ -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.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
@@ -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,52 @@ 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) {
+  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)
+      })
+      this.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,17 +90,16 @@ module.exports = function () {
               })}
             </table>
             `
-          : html`
+            : html`
             <div class="f7 f6-l pa2">
               N/A
             </div>
           `
         }
       </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
 }