Set indeterminate prop directly, fixes #128 (#129)

Author: gmaclennan

lib/babel.js

@@ -4,6 +4,7 @@ const camelCase = require('camel-case')
 const hyperx = require('hyperx')
 const SVG_TAGS = require('./svg-tags')
 const BOOL_PROPS = require('./bool-props')
+const DIRECT_PROPS = require('./direct-props')
 
 const SVGNS = 'http://www.w3.org/2000/svg'
 const XLINKNS = 'http://www.w3.org/1999/xlink'
@@ -226,7 +227,7 @@ module.exports = (babel) => {
         }
 
         // abc.onclick = xyz
-        if (attrName.slice(0, 2) === 'on') {
+        if (attrName.slice(0, 2) === 'on' || DIRECT_PROPS.indexOf(attrName) > -1) {
           const value = convertPlaceholders(props[propName]).filter(isNotEmptyString)
           result.push(setDomProperty(id, attrName,
             value.length === 1

lib/browser.js

@@ -2,6 +2,8 @@ var hyperx = require('hyperx')
 var appendChild = require('./append-child')
 var SVG_TAGS = require('./svg-tags')
 var BOOL_PROPS = require('./bool-props')
+// Props that need to be set directly rather than with el.setAttribute()
+var DIRECT_PROPS = require('./direct-props')
 
 var SVGNS = 'http://www.w3.org/2000/svg'
 var XLINKNS = 'http://www.w3.org/1999/xlink'
@@ -52,7 +54,7 @@ function nanoHtmlCreateElement (tag, props, children) {
         else if (val === 'false') continue
       }
       // If a property prefers being set directly vs setAttribute
-      if (key.slice(0, 2) === 'on') {
+      if (key.slice(0, 2) === 'on' || DIRECT_PROPS.indexOf(key) !== -1) {
         el[p] = val
       } else {
         if (ns) {

lib/browserify-transform.js

@@ -15,6 +15,11 @@ var BOOL_PROPS = require('./bool-props').reduce(function (o, key) {
   o[key] = 1
   return o
 }, {})
+// Props that need to be set directly rather than with el.setAttribute()
+var DIRECT_PROPS = require('./direct-props').reduce(function (o, key) {
+  o[key] = 1
+  return o
+}, {})
 
 module.exports = function yoYoify (file, opts) {
   if (/\.json$/.test(file)) return through()
@@ -140,6 +145,8 @@ function processNode (node, args) {
         if (val.slice(0, 9) === 'arguments') {
           if (namespace) {
             res.push('if (' + val + ' && ' + key + ') ' + to + '.setAttributeNS(null, ' + key + ', ' + key + ')')
+          } else if (DIRECT_PROPS[key.slice(1, -1)]) {
+            res.push('if (' + val + ' && ' + key + ') ' + to + '[' + key + '] = true')
           } else {
             res.push('if (' + val + ' && ' + key + ') ' + to + '.setAttribute(' + key + ', ' + key + ')')
           }
@@ -149,7 +156,8 @@ function processNode (node, args) {
           else if (val === 'false') return
         }
       }
-      if (key.slice(1, 3) === 'on') {
+
+      if (key.slice(1, 3) === 'on' || DIRECT_PROPS[key.slice(1, -1)]) {
         res.push(to + '[' + key + '] = ' + val)
       } else {
         if (key === '"xlink:href"') {

lib/direct-props.js

@@ -0,0 +1,3 @@
+module.exports = [
+  'indeterminate'
+]

tests/browser/elements.js

@@ -2,17 +2,21 @@ var test = require('tape')
 var html = require('../../')
 
 test('create inputs', function (t) {
-  t.plan(5)
+  t.plan(7)
 
   var expected = 'testing'
   var result = html`<input type="text" value="${expected}" />`
   t.equal(result.tagName, 'INPUT', 'created an input')
   t.equal(result.value, expected, 'set the value of an input')
 
-  result = html`<input type="checkbox" checked="${true}" disabled="${false}" />`
+  result = html`<input type="checkbox" checked="${true}" disabled="${false}" indeterminate="${true}" />`
   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')
+
+  result = html`<input indeterminate />`
+  t.equal(result.indeterminate, true, 'should have set indeterminate property')
 
   t.end()
 })