Bunch of fixes for attributes with SSR (#115)

* Add failing attribute tests for SSR

* fix empty values, event handlers with or without quotes

* fix boolean props

* fix object spread

* reduce

Author: goto-bus-stop

lib/server.js

@@ -1,3 +1,7 @@
+var BOOL_PROPS = require('./bool-props')
+
+var boolPropRx = new RegExp('(' + BOOL_PROPS.join('|') + ')=["\']?$', 'i')
+
 module.exports = nanothtmlServer
 
 function nanothtmlServer (src, filename, options, done) {
@@ -9,12 +13,28 @@ function nanothtmlServer (src, filename, options, done) {
     return require('./babel').apply(this, arguments)
   }
 
+  var boolMatch
   var pieces = arguments[0]
   var output = ''
   for (var i = 0; i < pieces.length; i++) {
-    output += pieces[i]
+    var piece = pieces[i]
     if (i < pieces.length - 1) {
-      output += handleValue(arguments[i + 1])
+      if ((boolMatch = boolPropRx.exec(piece))) {
+        output += piece.slice(0, boolMatch.index)
+        if (arguments[i + 1]) {
+          output += boolMatch[1] + '="' + boolMatch[1] + '"'
+        }
+        continue
+      }
+
+      var value = handleValue(arguments[i + 1])
+      if (piece[piece.length - 1] === '=') {
+        output += piece + '"' + value + '"'
+      } else {
+        output += piece + value
+      }
+    } else {
+      output += piece
     }
   }
 
@@ -32,9 +52,26 @@ function handleValue (value) {
 
   // Ignore event handlers. `onclick=${(e) => doSomething(e)}`
   // will become.           `onclick=""`
-  if (typeof value === 'function') return '""'
+  if (typeof value === 'function') return ''
   if (value === null || value === undefined) return ''
   if (value.__encoded) return value
+
+  if (typeof value === 'object') {
+    return Object.keys(value).reduce(function (str, key, i) {
+      if (str.length > 0) str += ' '
+
+      if (BOOL_PROPS.indexOf(key) !== -1) {
+        if (value[key]) {
+          return str + key + '="' + key + '"'
+        }
+        return str
+      }
+
+      var handled = handleValue(value[key])
+      return str + key + '="' + handled + '"'
+    }, '')
+  }
+
   var str = value.toString()
   return str
     .replace(/&/g, '&amp;')

tests/server/index.js

@@ -39,7 +39,7 @@ test('unescape html', function (t) {
   var expected = '<span>Hello <strong>there</strong></span>'
   var result = raw('<span>Hello <strong>there</strong></span>').toString()
 
-  t.equal(expected, result)
+  t.equal(result, expected)
   t.end()
 })
 
@@ -49,6 +49,40 @@ test('unescape html inside html', function (t) {
   var expected = '<span>Hello <strong>there</strong></span>'
   var result = html`${raw('<span>Hello <strong>there</strong></span>')}`.toString()
 
-  t.equal(expected, result)
+  t.equal(result, expected)
+  t.end()
+})
+
+test('event attribute', function (t) {
+  t.plan(1)
+
+  var expected = '<div onmouseover="" onmouseout="">Hello</div>'
+  var result = html`<div onmouseover=${onmouseover} onmouseout="${onmouseout}">Hello</div>`.toString()
+
+  t.equal(result, expected)
+  t.end()
+
+  function onmouseover () {}
+  function onmouseout () {}
+})
+
+test('boolean attribute', function (t) {
+  t.plan(1)
+
+  var expected = '<input disabled="disabled" >'
+  var result = html`<input disabled=${true} autofocus=${false}>`.toString()
+
+  t.equal(result, expected)
+  t.end()
+})
+
+test('spread attributes', function (t) {
+  t.plan(1)
+
+  var expected = '<div class="abc" id="def">Hello</div>'
+  var props = { class: 'abc', id: 'def' }
+  var result = html`<div ${props}>Hello</div>`.toString()
+
+  t.equal(result, expected)
   t.end()
 })