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('
Test
').trim()) .toBe('
Test
'); }); - + + it('should convert uppercase "style" attributes', function() { + var converter = new HTMLtoJSX({ createClass: false }); + expect(converter.convert('
Test
').trim()) + .toBe('
Test
'); + }); + it('should convert "class" attribute', function() { var converter = new HTMLtoJSX({ createClass: false }); expect(converter.convert('
Test
').trim()) @@ -131,7 +137,31 @@ describe('htmltojsx', function() { expect(converter.convert('').trim()) .toBe(''); }); - + + it('should convert "maxlength" attribute to "maxLength"', function() { + var converter = new HTMLtoJSX({ createClass: false }); + expect(converter.convert('').trim()) + .toBe(''); + }); + + it('should convert "http-equiv" attribute to "httpEquiv"', function() { + var converter = new HTMLtoJSX({ createClass: false }); + expect(converter.convert('').trim()) + .toBe(''); + }); + + it('should convert "accept-charset" attribute to "acceptCharset"', function() { + var converter = new HTMLtoJSX({ createClass: false }); + expect(converter.convert('
Test
').trim()) + .toBe('
Test
'); + }); + + it('should convert "enctype" attribute to "encType"', function() { + var converter = new HTMLtoJSX({ createClass: false }); + expect(converter.convert('
Test
').trim()) + .toBe('
Test
'); + }); + it('should maintain value-less attributes', function() { var converter = new HTMLtoJSX({ createClass: false }); expect(converter.convert('').trim())