try hyperx

renderer/views/header.js

@@ -1,32 +1,34 @@
 module.exports = Header
 
 var h = require('virtual-dom/h')
+var hyperx = require('hyperx')
+var hx = hyperx(h)
 
 function Header (state, dispatch) {
-  return h('.header', [
-    (function () {
-      if (process.platform === 'darwin') {
-        return h('.title', state.view.title)
-      }
-    })(),
-    h('.nav.left', [
-      h('i.icon.back', {
-        onclick: onBack
-      }, 'chevron_left'),
-      h('i.icon.forward', {
-        onclick: onForward
-      }, 'chevron_right')
-    ]),
-    (function () {
-      if (state.view.url !== '/player') {
-        return h('.nav.right', [
-          h('i.icon.add', {
-            onclick: onAddTorrent
-          }, 'add')
-        ])
-      }
-    })()
-  ])
+  return hx`
+    <div className="header">
+      ${getTitle()}
+      <div className="nav left">
+        <i className="icon back" onclick=${onBack}>chevron_left</i>
+        <i className="icon forward" onclick=${onForward}>chevron_right</i>
+      </div>
+      <div className="nav right">
+        ${plusButton()}
+      </div>
+    </div>
+  `
+
+  function getTitle () {
+    if (process.platform === 'darwin') {
+      return hx`<div className="title">${state.view.title}</div>`
+    }
+  }
+
+  function plusButton () {
+    if (state.view.url !== '/player') {
+      return hx`<i className="icon add" onclick=${onAddTorrent}>add</i>`
+    }
+  }
 
   function onBack (e) {
     dispatch('back')