Fix issues with object-spreading boolean and direct props (#145)

* add test for spread boolean props

* Fix issues with object-spreading boolean and direct props

Previously,
- `<input ${{ disabled: true }}>` added a `disabled="true"` attribute.
- `<input ${{ disabled: false }}>` added a `disabled="false"` attribute.
- `<input ${{ indeterminate: true }}>` added an `indeterminate="true"` attribute.

Now:
- `<input ${{ disabled: true }}>` adds a `disabled="disabled"` attribute.
- `<input ${{ disabled: false }}>` does not add a `disabled` attribute.
- `<input ${{ indeterminate: true }}>` sets `.indeterminate = true` instead of adding an attribute.

Author: goto-bus-stop

lib/browser.js

@@ -63,8 +63,8 @@ function nanoHtmlCreateElement (tag, props, children) {
       }
       // If a property is boolean, set itself to the key
       if (BOOL_PROPS.indexOf(key) !== -1) {
-        if (val === 'true') val = key
-        else if (val === 'false') continue
+        if (String(val) === 'true') val = key
+        else if (String(val) === 'false') continue
       }
       // If a property prefers being set directly vs setAttribute
       if (key.slice(0, 2) === 'on' || DIRECT_PROPS.indexOf(key) !== -1) {

lib/set-attribute.js

@@ -1,3 +1,5 @@
+var DIRECT_PROPS = require('./direct-props')
+
 module.exports = function nanohtmlSetAttribute (el, attr, value) {
   if (typeof attr === 'object') {
     for (var i in attr) {
@@ -10,12 +12,12 @@ module.exports = function nanohtmlSetAttribute (el, attr, value) {
   if (!attr) return
   if (attr === 'className') attr = 'class'
   if (attr === 'htmlFor') attr = 'for'
-  if (attr.slice(0, 2) === 'on') {
+  if (attr.slice(0, 2) === 'on' || DIRECT_PROPS.indexOf(attr) !== -1) {
     el[attr] = value
   } else {
-    // assume a boolean attribute if the value === true
-    // no need to do typeof because "false" would've caused an early return
+    // assume a boolean attribute if the value === true or false
     if (value === true) value = attr
+    if (value === false) return
     el.setAttribute(attr, value)
   }
 }

tests/browser/elements.js

@@ -21,6 +21,29 @@ test('create inputs', function (t) {
   t.end()
 })
 
+test('create inputs with object spread', function (t) {
+  t.plan(7)
+
+  var expected = 'testing'
+  var props = { type: 'text', value: expected }
+  var result = html`<input ${props} />`
+  t.equal(result.tagName, 'INPUT', 'created an input')
+  t.equal(result.value, expected, 'set the value of an input')
+
+  props = { type: 'checkbox', checked: true, disabled: false, indeterminate: true }
+  result = html`<input ${props} />`
+  t.equal(result.getAttribute('type'), 'checkbox', 'created a checkbox')
+  t.equal(result.getAttribute('checked'), 'checked', 'set the checked attribute')
+  t.equal(result.getAttribute('disabled'), null, 'should not have set the disabled attribute')
+  t.equal(result.indeterminate, true, 'should have set indeterminate property')
+
+  props = { indeterminate: true }
+  result = html`<input ${props} />`
+  t.equal(result.indeterminate, true, 'should have set indeterminate property')
+
+  t.end()
+})
+
 test('can update and submit inputs', function (t) {
   t.plan(2)
   document.body.innerHTML = ''