Update attributes to props helper to handle SVG props

The property config originally only had the HTML DOM property
config. Updated the property config with the SVG property
config as well.

Then update `attributesToProps` to try setting both HTML and SVG
properties when iterating through the attributes.

The only difference between the HTML and SVG config is that
the HTML property keys are lowercased whereas the SVG property
keys are not because there are certain keys that are camel cased.

Add tests to check that the SVG attributes and properties are
handled correctly by the helper.

React's SVGDOMPropertyConfig source:
https://github.com/facebook/react/blob/master/src/renderers/dom/shared/SVGDOMPropertyConfig.js

Author: remarkablemark

lib/attributes-to-props.js

@@ -29,8 +29,15 @@ function attributesToProps(attributes) {
             continue;
         }
 
-        // make DOM attribute/property consistent with React attribute/property
-        reactProperty = propertyConfig[propertyName.toLowerCase()]
+        // make HTML DOM attribute/property consistent with React attribute/property
+        reactProperty = propertyConfig.html[propertyName.toLowerCase()];
+        if (reactProperty) {
+            props[reactProperty] = propertyValue;
+            continue;
+        }
+
+        // make SVG DOM attribute/property consistent with React attribute/property
+        reactProperty = propertyConfig.svg[propertyName];
         if (reactProperty) {
             props[reactProperty] = propertyValue;
         }

lib/property-config.js

@@ -3,21 +3,53 @@
 /**
  * Module dependencies.
  */
-var HTMLDOMPropertyConfig = require('react/lib/HTMLDOMPropertyConfig');
 var utilities = require('./utilities');
+var HTMLDOMPropertyConfig = require('react/lib/HTMLDOMPropertyConfig');
+var SVGDOMPropertyConfig = require('react/lib/SVGDOMPropertyConfig');
+
+var config = {
+    html: {},
+    svg: {}
+};
+
+var propertyName;
 
-// first map out the DOM attribute names
-// e.g., { className: 'class' } => { class: 'className' }
+/**
+ * HTML DOM property config.
+ */
+
+// first map out the HTML DOM attribute names
+// e.g., { className: 'class' } => { 'class': 'className' }
 // https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js#L204
-var config = utilities.invertObject(
+config.html = utilities.invertObject(
     HTMLDOMPropertyConfig.DOMAttributeNames
 );
 
-// then map out the rest of the DOM properties
+// then map out the rest of the HTML DOM properties
 // e.g., { charSet: 0 } => { charset: 'charSet' }
 // https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js#L28
-for (var key in HTMLDOMPropertyConfig.Properties) {
-    config[key.toLowerCase()] = key;
+for (propertyName in HTMLDOMPropertyConfig.Properties) {
+    // lowercase to make matching property names easier
+    config.html[propertyName.toLowerCase()] = propertyName;
+}
+
+/**
+ * SVG DOM property config.
+ */
+
+// first map out the SVG DOM attribute names
+// e.g., { fontSize: 'font-size' } => { 'font-size': 'fontSize' }
+// https://github.com/facebook/react/blob/master/src/renderers/dom/shared/SVGDOMPropertyConfig.js#L36
+config.svg = utilities.invertObject(
+    SVGDOMPropertyConfig.DOMAttributeNames
+);
+
+// then map out the rest of the SVG DOM properties
+// e.g., { preserveAlpha: 0 } => { preserveAlpha: 'preserveAlpha' }
+// https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js#L28
+for (propertyName in SVGDOMPropertyConfig.Properties) {
+    // do not lowercase as some svg properties are camel cased
+    config.html[propertyName] = propertyName;
 }
 
 /**

test/attributes-to-props.js

@@ -104,6 +104,53 @@ describe('attributes to props helper', function() {
 
     });
 
+    /**
+     * SVG DOM property to React prop.
+     */
+    describe('SVG DOM properties', function() {
+
+        it('converts attributes/properties to React props', function() {
+            assert.deepEqual(
+                attributesToProps({
+                    edgeMode: 'edgeMode',
+                    'fill-opacity': '0.42',
+                    'fill-rule': 'evenodd',
+                    'glyph-orientation-vertical': 'auto',
+                    'horiz-adv-x': '9001',
+                    stroke: 'none',
+                    'xml:base': 'http://example.org'
+                }),
+                {
+                    edgeMode: 'edgeMode',
+                    fillOpacity: '0.42',
+                    fillRule: 'evenodd',
+                    glyphOrientationVertical: 'auto',
+                    horizAdvX: '9001',
+                    stroke: 'none',
+                    xmlBase: 'http://example.org'
+                }
+            );
+        });
+
+        it('does not convert incorrectly capitalized properties', function() {
+            assert.deepEqual(
+                attributesToProps({
+                    'XLINK:HREF': '#',
+                    ychannelselector: 'G',
+                    ZoomAndPan: 'disable'
+                }),
+                {
+                    /*
+                    xlinkHref: '#',
+                    yChannelSelector: 'G',
+                    zoomAndPan: 'disable'
+                    */
+                }
+            );
+        });
+
+    });
+
     /**
      * Style string to object.
      */