diff --git a/package.json b/package.json index 631ad71..4755bce 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "bin": "src/cli.js", "dependencies": { "yargs": "~1.3.1", - "jsdom": "~1.0.0-pre.6" + "jsdom": "~1.0.0-pre.6", + "react": "~0.13.0" }, "devDependencies": { "gulp": "~3.8.7", diff --git a/src/htmltojsx.js b/src/htmltojsx.js index 35208c1..10e0d8c 100644 --- a/src/htmltojsx.js +++ b/src/htmltojsx.js @@ -35,6 +35,19 @@ var ELEMENT_ATTRIBUTE_MAPPING = { } }; +var HTMLDOMPropertyConfig = require('react/lib/HTMLDOMPropertyConfig'); + +//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; + + var mapFrom = HTMLDOMPropertyConfig.DOMAttributeNames[propname] || propname.toLowerCase(); + + if (!ATTRIBUTE_MAPPING[mapFrom]) + ATTRIBUTE_MAPPING[mapFrom] = propname; +} + /** * Repeats a string a certain number of times. * Also: the future is bright and consists of native string repetition: @@ -471,6 +484,10 @@ StyleParser.prototype = { var key = style.substr(0, firstColon); var value = style.substr(firstColon + 1).trim(); if (key !== '') { + //if not vendor specific lowercase name + //TODO better vendor prefix handling + if(key[0] != '-') key = key.toLowerCase(); + this.styles[key] = value; } }, this); diff --git a/test/htmltojsx-test.js b/test/htmltojsx-test.js index 5fa520d..90e54e7 100644 --- a/test/htmltojsx-test.js +++ b/test/htmltojsx-test.js @@ -119,7 +119,13 @@ describe('htmltojsx', function() { expect(converter.convert('