fixes to vdom rendering

- enabled by passing {vdom: true} flag to the hyperx contructor options

- fixes data-*, aria-* and style as a string.  vdom expects these to be
  under an 'attributes' property under props and will gladly ignore them
  otherwise

fixes #28

Author: tswaters

index.js

@@ -9,6 +9,9 @@ var ATTR_EQ = 11, ATTR_BREAK = 12
 module.exports = function (h, opts) {
   h = attrToProp(h)
   if (!opts) opts = {}
+
+  if (opts.vdom) {h = fixVdom(h)}
+
   var concat = opts.concat || function (a, b) {
     return String(a) + String(b)
   }
@@ -261,3 +264,21 @@ var closeRE = RegExp('^(' + [
   'vkern'
 ].join('|') + ')(?:[\.#][a-zA-Z0-9\u007F-\uFFFF_:-]+)*$')
 function selfClosing (tag) { return closeRE.test(tag) }
+
+function fixVdom (h) {
+  return function (tagName, props, children) {
+
+    if (!props.attributes) props.attributes = {}
+
+    Object.keys(props).forEach(function (key) {
+      var isDataAria = /^(data|aria)-/.test(key)
+      var isStyleString = key === 'style' && typeof props[key] === 'string'
+      if (isDataAria || isStyleString) {
+        props.attributes[key] = props[key]
+        delete props[key]
+      }
+    })
+
+    return h(tagName, props, children)
+  }
+}

readme.markdown

@@ -186,6 +186,9 @@ returned by the concatenation function and can make specific use of them. This
 is useful if you want to implement a pre-processor to generate javascript from
 hyperx syntax.
 
+* `opts.vdom` - pass `true` when you are using virtual-dom. this fixes issues using
+data-\*, aria-\* and passing style as a string. see [this issue](https://github.com/substack/hyperx/issues/28)  
+
 # prior art
 
 * http://www.2ality.com/2014/07/jsx-template-strings.html?m=1

test/key.js

@@ -1,7 +1,7 @@
 var test = require('tape')
 var vdom = require('virtual-dom')
 var hyperx = require('../')
-var hx = hyperx(vdom.h)
+var hx = hyperx(vdom.h, {vdom: true})
 
 test('key', function (t) {
   var key = 'type'
@@ -50,8 +50,8 @@ test('multiple keys', function (t) {
   }
   var key = 'data-'
   var value = 'bar'
-  var tree = hx`<input ${props} ${key}foo=${value}>`
-  t.equal(vdom.create(tree).toString(), '<input type="text" data-special="true" data-foo="bar" />')
+  var tree = hx`<input ${props} ${key}foo=${value} data-bar="baz">`
+  t.equal(vdom.create(tree).toString(), '<input type="text" data-special="true" data-foo="bar" data-bar="baz" />')
   t.end()
 })
 

test/vdom.js

@@ -1,7 +1,7 @@
 var test = require('tape')
 var vdom = require('virtual-dom')
 var hyperx = require('../')
-var hx = hyperx(vdom.h)
+var hx = hyperx(vdom.h, {vdom: true})
 
 var expected = `<div>
     <h1 y="ab3cd">hello world!</h1>
@@ -24,3 +24,28 @@ test('vdom', function (t) {
   t.equal(vdom.create(tree).toString(), expected)
   t.end()
 })
+
+test('vdom - style as object', function (t) {
+  var styleObj = {backgroundColor: 'red'}
+  var tree = hx`<div class="box" style=${styleObj}></div>`
+  var expected = '<div style="background-color:red;" class="box"></div>'
+  var actual = vdom.create(tree).toString()
+  t.equal(actual, expected)
+  t.end()
+})
+
+test('vdom - style as string', function (t) {
+  var tree = hx`<div class="box" style="background-color:red;"></div>`
+  var expected = '<div style="background-color:red;" class="box"></div>'
+  var actual = vdom.create(tree).toString()
+  t.equal(actual, expected)
+  t.end()
+})
+
+test('vdom - accessibility attributes', function (t) {
+  var tree = hx`<div aria-hidden="${true}" aria-label="test-label" role="dialog" tabindex=4></div>`
+  var expected = '<div role="dialog" tabindex="4" aria-hidden="true" aria-label="test-label"></div>'
+  var actual = vdom.create(tree).toString()
+  t.equal(actual, expected)
+  t.end()
+})