Fix casing issues with React properties

Closes GH-21.

Reviewed-by: Merlijn Vos <merlijn@soverin.net>
Reviewed-by: Titus Wormer <tituswormer@gmail.com>

Author: jamesopstad

index.js

@@ -3,6 +3,7 @@
 var html = require('property-information/html')
 var svg = require('property-information/svg')
 var find = require('property-information/find')
+var hastToReact = require('property-information/hast-to-react')
 var spaces = require('space-separated-tokens')
 var commas = require('comma-separated-tokens')
 var style = require('style-to-object')
@@ -193,7 +194,11 @@ function addAttribute(props, prop, value, ctx) {
 
     props[subprop][info.attribute] = value
   } else {
-    props[ctx.react && info.space ? info.property : info.attribute] = value
+    if (ctx.react && info.space) {
+      props[hastToReact[info.property] || info.property] = value
+    } else {
+      props[info.attribute] = value
+    }
   }
 }
 

package.json

@@ -26,7 +26,7 @@
   ],
   "dependencies": {
     "comma-separated-tokens": "^1.0.0",
-    "property-information": "^5.0.0",
+    "property-information": "^5.3.0",
     "space-separated-tokens": "^1.0.0",
     "style-to-object": "^0.2.1",
     "unist-util-is": "^3.0.0",

test.js

@@ -672,6 +672,47 @@ test('hast-to-hyperscript', function(t) {
     st.end()
   })
 
+  t.test('should support mapping to React properties', function (st) {
+    var actual = toH(
+      r,
+      u(
+        'element',
+        {
+          tagName: 'svg',
+          properties: { xmlnsXLink: 'http://www.w3.org/1999/xlink' }
+        },
+        [
+          u(
+            'element',
+            {
+              tagName: 'line',
+              properties: { strokeDashArray: 4 }
+            }
+          )
+        ]
+      )
+    )
+    var expected = r(
+      'svg',
+      {
+        key: 'h-1',
+        xmlnsXlink: 'http://www.w3.org/1999/xlink'
+      },
+      [
+        r(
+          'line',
+          {
+            key: 'h-2',
+            strokeDasharray: 4
+          }
+        )
+      ]
+    )
+
+    st.deepEqual(json(actual), json(expected), 'equal syntax trees')
+    st.end()
+  })
+
   t.end()
 })