Add feature for SVG attributes conversion (#136)

* Remove unnecessary whitespaces

* Add test for convert of svg attributes

* Refactor object iteration

* Add SVG attributes conversion

Author: wadackel

src/htmltojsx.js

@@ -36,20 +36,37 @@ var ELEMENT_ATTRIBUTE_MAPPING = {
 };
 
 var HTMLDOMPropertyConfig = require('react-dom/lib/HTMLDOMPropertyConfig');
+var SVGDOMPropertyConfig = require('react-dom/lib/SVGDOMPropertyConfig');
 
-// Populate property map with ReactJS's attribute and property mappings
-// TODO handle/use .Properties value eg: MUST_USE_PROPERTY is not HTML attr
-for (var propname in HTMLDOMPropertyConfig.Properties) {
-  if (!HTMLDOMPropertyConfig.Properties.hasOwnProperty(propname)) {
-    continue;
+/**
+ * Iterates over elements of object invokes iteratee for each element
+ *
+ * @param {object}   obj        Collection object
+ * @param {function} iteratee   Callback function called in iterative processing
+ * @param {any}      context    This arg (aka Context)
+ */
+function eachObj(obj, iteratee, context) {
+  for (var key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      iteratee.call(context || obj, key, obj[key]);
+    }
   }
+}
 
-  var mapFrom = HTMLDOMPropertyConfig.DOMAttributeNames[propname] || propname.toLowerCase();
+// Populate property map with ReactJS's attribute and property mappings
+// TODO handle/use .Properties value eg: MUST_USE_PROPERTY is not HTML attr
+function mappingAttributesFromReactConfig(config) {
+  eachObj(config.Properties, function(propname) {
+    var mapFrom = config.DOMAttributeNames[propname] || propname.toLowerCase();
 
-  if (!ATTRIBUTE_MAPPING[mapFrom])
-    ATTRIBUTE_MAPPING[mapFrom] = propname;
+    if (!ATTRIBUTE_MAPPING[mapFrom])
+      ATTRIBUTE_MAPPING[mapFrom] = propname;
+  });
 }
 
+mappingAttributesFromReactConfig(HTMLDOMPropertyConfig);
+mappingAttributesFromReactConfig(SVGDOMPropertyConfig);
+
 /**
  * Repeats a string a certain number of times.
  * Also: the future is bright and consists of native string repetition:
@@ -562,12 +579,9 @@ StyleParser.prototype = {
    */
   toJSXString: function() {
     var output = [];
-    for (var key in this.styles) {
-      if (!this.styles.hasOwnProperty(key)) {
-        continue;
-      }
-      output.push(this.toJSXKey(key) + ': ' + this.toJSXValue(this.styles[key]));
-    }
+    eachObj(this.styles, function(key, value) {
+      output.push(this.toJSXKey(key) + ': ' + this.toJSXValue(value));
+    }, this);
     return output.join(', ');
   },
 

test/htmltojsx-test.js

@@ -142,19 +142,19 @@ describe('htmltojsx', function() {
       expect(converter.convert('<div style="-moz-hyphens: auto; -webkit-hyphens: auto">Test</div>').trim())
         .toBe('<div style={{MozHyphens: \'auto\', WebkitHyphens: \'auto\'}}>Test</div>');
     });
-    
+
     it('should convert uppercase vendor-prefix "style" attributes', function() {
       var converter = new HTMLtoJSX({ createClass: false });
       expect(converter.convert('<div style="-MOZ-HYPHENS: auto; -WEBKIT-HYPHENS: auto">Test</div>').trim())
         .toBe('<div style={{MozHyphens: \'auto\', WebkitHyphens: \'auto\'}}>Test</div>');
     });
-    
+
     it('should convert "style" attributes with vendor prefix-like strings in the middle and mixed case', function() {
       var converter = new HTMLtoJSX({ createClass: false });
       expect(converter.convert('<div style="myclass-MOZ-HYPHENS: auto; myclass-WEBKIT-HYPHENS: auto">Test</div>').trim())
         .toBe('<div style={{myclassMozHyphens: \'auto\', myclassWebkitHyphens: \'auto\'}}>Test</div>');
     });
-    
+
     it('should convert -ms- prefix "style" attributes', function() {
       var converter = new HTMLtoJSX({ createClass: false });
       expect(converter.convert('<div style="-ms-hyphens: auto">Test</div>').trim())
@@ -170,7 +170,7 @@ describe('htmltojsx', function() {
     it('should convert uppercase "style" attributes', function() {
       var converter = new HTMLtoJSX({ createClass: false });
       expect(converter.convert('<div style="TEXT-ALIGN: center">Test</div>').trim())
-        .toBe('<div style={{textAlign: \'center\'}}>Test</div>');  
+        .toBe('<div style={{textAlign: \'center\'}}>Test</div>');
     });
 
     it('should convert "class" attribute', function() {
@@ -232,6 +232,12 @@ describe('htmltojsx', function() {
         expect(converter.convert('<input type="checkbox" checked>').trim())
           .toBe('<input type="checkbox" defaultChecked />');
     });
+
+    it('should convert SVG attributes', function() {
+      var converter = new HTMLtoJSX({ createClass: false });
+        expect(converter.convert('<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" fill-rule="evenodd"/></svg>').trim())
+          .toBe('<svg height={100} width={100}><circle cx={50} cy={50} r={40} stroke="black" strokeWidth={3} fill="red" fillRule="evenodd" /></svg>');
+    });
   });
 
   describe('special tags', function() {