Fix camelcased custom properties in React

Closes GH-9.

Amended-by: Titus Wormer <[email protected]>

Author: kthjm

index.js

@@ -142,7 +142,13 @@ function addAttribute(props, name, value, ctx) {
     return;
   }
 
-  name = info.name || paramCase(name);
+  if (info.name) {
+    name = info.name;
+  } else if (ctx.react && !paramCasedReactProp(name)) {
+    name = camelCase(name);
+  } else {
+    name = paramCase(name);
+  }
 
   if (value !== null && typeof value === 'object' && 'length' in value) {
     /* Accept `array`.  Most props are space-separater. */
@@ -223,6 +229,11 @@ function parseStyle(value) {
   return result;
 }
 
+function paramCasedReactProp(name) {
+  var head = name.slice(0, 4);
+  return (head === 'data' || head === 'aria') && name.length > 4;
+}
+
 function camelCase(val) {
   if (val.slice(0, 4) === '-ms-') {
     val = 'ms-' + val.slice(4);

test.js

@@ -143,7 +143,7 @@ test('hast-to-hyperscript', function (t) {
 
   t.test('should support `React.createElement` in `development`', function (st) {
     var currentEnv = process.env.NODE_ENV;
-    var baseline = doc.replace(/color:red;/, 'color:red');
+    var baseline = doc.replace(/color:red;/, 'color:red').replace(/camel-case/, 'camelCase');
     process.env.NODE_ENV = 'development';
 
     var actual = toH(r, hast);
@@ -160,7 +160,7 @@ test('hast-to-hyperscript', function (t) {
       r('strong', {
         key: 'h-2',
         style: {color: 'red'},
-        'camel-case': 'on off',
+        camelCase: 'on off',
         'data-some': 'yes',
         'aria-valuenow': '1'
       }, ['charlie']),
@@ -180,7 +180,7 @@ test('hast-to-hyperscript', function (t) {
 
   t.test('should support `React.createElement` in `production`', function (st) {
     var currentEnv = process.env.NODE_ENV;
-    var baseline = doc.replace(/color:red;/, 'color:red');
+    var baseline = doc.replace(/color:red;/, 'color:red').replace(/camel-case/, 'camelCase');
     process.env.NODE_ENV = 'production';
 
     var actual = toH(r, hast);
@@ -197,7 +197,7 @@ test('hast-to-hyperscript', function (t) {
       r('strong', {
         key: 'h-2',
         style: {color: 'red'},
-        'camel-case': 'on off',
+        camelCase: 'on off',
         'data-some': 'yes',
         'aria-valuenow': '1'
       }, ['charlie']),
@@ -271,6 +271,20 @@ test('hast-to-hyperscript', function (t) {
       'react: should parse an invalid style declaration'
     );
 
+    st.deepEqual(
+      toH(r, u('element', {tagName: 'div', properties: {
+        'camel-case': 'on off',
+        'data-some': 'yes',
+        'aria-valuenow': '1'
+      }})).props,
+      {
+        camelCase: 'on off',
+        'data-some': 'yes',
+        'aria-valuenow': '1'
+      },
+      'react: should transform unknown props to camelCase except for data and aria'
+    );
+
     st.end();
   });