Use the React property config when converting attributes to props

- Update `attributeToProps` to use the React property config.
- Refactor the helper and keep things functional (do not mutate
  the original attributes object).
- Add tests that check that certain DOM attributes and properties
  are properly converted to React props.

Author: remarkablemark

lib/attributes-to-props.js

@@ -4,21 +4,35 @@
  * Module dependencies.
  */
 var utilities = require('./utilities');
+var propertyConfig = require('./property-config');
 
 /**
  * Make attributes compatible with React props.
  *
- * @param  {Object} attr - The attributes.
- * @return {Object}      - The props.
+ * @param  {Object} attributes - The attributes.
+ * @return {Object}            - The props.
  */
-function attributesToProps(attr) {
-    attr = attr || {};
+function attributesToProps(attributes) {
+    attributes = attributes || {};
+    var props = {};
+    var propertyName;
+    var reactProperty;
 
-    if (attr.style) {
-        attr.style = cssToJs(attr.style);
+    // convert DOM attribute/property to React attribute/property
+    for (propertyName in attributes) {
+        propertyName = propertyName.toLowerCase();
+        reactProperty = propertyConfig[propertyName]
+        if (reactProperty) {
+            props[reactProperty] = attributes[propertyName];
+        }
+    }
+
+    // convert inline style to object
+    if (attributes.style) {
+        props.style = cssToJs(attributes.style);
     }
 
-    return attr;
+    return props;
 }
 
 /**

test/attributes-to-props.js

@@ -11,6 +11,62 @@ var attributesToProps = require('../lib/attributes-to-props');
  */
 describe('attributes to props helper', function() {
 
+    it('converts DOM attributes to React props', function() {
+        assert.deepEqual(
+            attributesToProps({
+                'class': 'ic',
+                'for': 'tran',
+                'http-equiv': 'refresh'
+            }),
+            {
+                className: 'ic',
+                htmlFor: 'tran',
+                httpEquiv: 'refresh',
+            }
+        );
+    });
+
+    it('converts DOM standard properties to React props', function() {
+        assert.deepEqual(
+            attributesToProps({
+                allowfullscreen: true,
+                charset: 'utf-8',
+                tabindex: 1
+            }),
+            {
+                allowFullScreen: true,
+                charSet: 'utf-8',
+                tabIndex: 1
+            }
+        );
+    });
+
+    it('converts DOM RDFa properties to React props', function() {
+        assert.deepEqual(
+            attributesToProps({
+                property: 'foo',
+                'typeof': 'bar'
+            }),
+            {
+                property: 'foo',
+                'typeof': 'bar'
+            }
+        );
+    });
+
+    it('converts DOM non-standard properties to React props', function() {
+        assert.deepEqual(
+            attributesToProps({
+                itemscope: true,
+                itemid: 1337
+            }),
+            {
+                itemScope: true,
+                itemID: 1337
+            }
+        );
+    });
+
     it('converts CSS style string to JS style object', function() {
         // proper css
         assert.deepEqual(