diff --git a/src/htmltojsx.js b/src/htmltojsx.js index c48b778..d16b787 100644 --- a/src/htmltojsx.js +++ b/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(', '); }, diff --git a/test/htmltojsx-test.js b/test/htmltojsx-test.js index 75d48d7..f1f6cbc 100644 --- a/test/htmltojsx-test.js +++ b/test/htmltojsx-test.js @@ -142,19 +142,19 @@ describe('htmltojsx', function() { expect(converter.convert('
Test
').trim()) .toBe('
Test
'); }); - + it('should convert uppercase vendor-prefix "style" attributes', function() { var converter = new HTMLtoJSX({ createClass: false }); expect(converter.convert('
Test
').trim()) .toBe('
Test
'); }); - + 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('
Test
').trim()) .toBe('
Test
'); }); - + it('should convert -ms- prefix "style" attributes', function() { var converter = new HTMLtoJSX({ createClass: false }); expect(converter.convert('
Test
').trim()) @@ -170,7 +170,7 @@ describe('htmltojsx', function() { it('should convert uppercase "style" attributes', function() { var converter = new HTMLtoJSX({ createClass: false }); expect(converter.convert('
Test
').trim()) - .toBe('
Test
'); + .toBe('
Test
'); }); it('should convert "class" attribute', function() { @@ -232,6 +232,12 @@ describe('htmltojsx', function() { expect(converter.convert('').trim()) .toBe(''); }); + + it('should convert SVG attributes', function() { + var converter = new HTMLtoJSX({ createClass: false }); + expect(converter.convert('').trim()) + .toBe(''); + }); }); describe('special tags', function() {