Use html "class" property

As of this PR (https://github.com/substack/hyperx/pull/22) to hyperx,
attributes are automatically converted to properties for the few cases
where they’re different: class, for, and http-equiv.

renderer/views/app.js

@@ -18,9 +18,9 @@ function App (state, dispatch) {
   }
 
   return hx`
-    <div.app>
+    <div class="app">
       ${Header(state, dispatch)}
-      <div.content>${getView()}</div>
+      <div class="content">${getView()}</div>
     </div>
   `
 }

renderer/views/header.js

@@ -6,13 +6,13 @@ var hx = hyperx(h)
 
 function Header (state, dispatch) {
   return hx`
-    <div.header>
+    <div class="header">
       ${getTitle()}
-      <div.nav.left>
-        <i.icon.back onclick=${onBack}>chevron_left</i>
-        <i.icon.forward onclick=${onForward}>chevron_right</i>
+      <div class="nav left">
+        <i class="icon back" onclick=${onBack}>chevron_left</i>
+        <i class="icon forward" onclick=${onForward}>chevron_right</i>
       </div>
-      <div.nav.right>
+      <div class="nav right">
         ${plusButton()}
       </div>
     </div>
@@ -20,13 +20,13 @@ function Header (state, dispatch) {
 
   function getTitle () {
     if (process.platform === 'darwin') {
-      return hx`<div.title>${state.view.title}</div>`
+      return hx`<div class="title">${state.view.title}</div>`
     }
   }
 
   function plusButton () {
     if (state.view.url !== '/player') {
-      return hx`<i.icon.add onclick=${onAddTorrent}>add</i>`
+      return hx`<i class="icon add" onclick=${onAddTorrent}>add</i>`
     }
   }
 

renderer/views/player.js

@@ -26,7 +26,7 @@ function Player (state, dispatch) {
 
   // Show the video as large as will fit in the window, play immediately
   return hx`
-    <div.player>
+    <div class="player">
       <video
         src="${state.server.localURL}"
         onloadedmetadata="${onLoadedMetadata}"
@@ -55,15 +55,15 @@ function renderPlayerControls (state, dispatch) {
   var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 4px)' }
 
   return hx`
-    <div.player-controls>
-      <div.scrub-bar
+    <div class="player-controls">
+      <div class="scrub-bar"
         draggable="true"
         onclick=${handleScrub},
         ondrag=${handleScrub}>
         ${renderLoadingBar(state)}
-        <div.playback-cursor style=${playbackCursorStyle}></div>
+        <div class="playback-cursor" style=${playbackCursorStyle}></div>
       </div>
-      <i.icon.play-pause onclick=${() => dispatch('playPause')}>
+      <i class="icon play-pause" onclick=${() => dispatch('playPause')}>
         ${state.video.isPaused ? 'play_arrow' : 'pause'}
       </i>
     </div>
@@ -104,14 +104,14 @@ function renderLoadingBar (state) {
 
   // Output an list of rectangles to show loading progress
   return hx`
-    <div.loading-bar>
+    <div class="loading-bar">
       ${parts.map(function (part) {
         var style = {
           left: (100 * part.start / numParts) + '%',
           width: (100 * part.count / numParts) + '%'
         }
 
-        return hx`<div.loading-bar-part style=${style}></div>`
+        return hx`<div class="loading-bar-part" style=${style}></div>`
       })}
     </div>
   `

renderer/views/torrent-list.js

@@ -11,7 +11,7 @@ function TorrentList (state, dispatch) {
     : []
 
   var list = torrents.map((torrent) => renderTorrent(state, dispatch, torrent))
-  return hx`<div.torrent-list>${list}</div>`
+  return hx`<div class="torrent-list">${list}</div>`
 }
 
 // Renders a torrent in the torrent list
@@ -29,14 +29,15 @@ function renderTorrent (state, dispatch, torrent) {
   var elements = [
     renderTorrentMetadata(torrent),
     hx`
-      <i.icon.delete
+      <i
+        class="icon delete"
         onclick=${() => dispatch('deleteTorrent', torrent)}>
         close
       </i>
     `,
     hx`
       <i.btn.icon.play
-        className="${!torrent.ready ? 'disabled' : ''}"
+        class="${!torrent.ready ? 'disabled' : ''}"
         onclick=${() => dispatch('openPlayer', torrent)}>
         play_arrow
       </i>
@@ -46,7 +47,7 @@ function renderTorrent (state, dispatch, torrent) {
   if (state.view.chromecast) {
     elements.push(hx`
       <i.btn.icon.chromecast
-        className="${!torrent.ready ? 'disabled' : ''}"
+        class="${!torrent.ready ? 'disabled' : ''}"
         onclick=${() => dispatch('openChromecast', torrent)}>
         cast
       </i>
@@ -56,23 +57,23 @@ function renderTorrent (state, dispatch, torrent) {
   if (state.view.devices.airplay) {
     elements.push(hx`
       <i.btn.icon.airplay
-        className="${!torrent.ready ? 'disabled' : ''}"
+        class="${!torrent.ready ? 'disabled' : ''}"
         onclick=${() => dispatch('openAirplay', torrent)}>
         airplay
       </i>
     `)
   }
 
-  return hx`<div.torrent style=${style}>${elements}</div>`
+  return hx`<div class="torrent" style=${style}>${elements}</div>`
 }
 
 // Renders the torrent name and download progress
 function renderTorrentMetadata (torrent) {
   return hx`
-    <div.metadata>
-      <div.name.ellipsis>${torrent.name || 'Loading torrent...'}</div>
-      <div.status>
-        <span.progress>${Math.floor(100 * torrent.progress)}%</span>
+    <div class="metadata">
+      <div class="name ellipsis">${torrent.name || 'Loading torrent...'}</div>
+      <div class="status">
+        <span class="progress">${Math.floor(100 * torrent.progress)}%</span>
       </div>
       ${getFilesLength()}
       <span>${getPeers()}</span>
@@ -88,7 +89,7 @@ function renderTorrentMetadata (torrent) {
 
   function getFilesLength () {
     if (torrent.ready && torrent.files.length > 1) {
-      return hx`<span.files>${torrent.files.length} files</span>`
+      return hx`<span class="files">${torrent.files.length} files</span>`
     }
   }
 }