From 62c970c18a2ed4082f76e215d0b6b8fe0b852591 Mon Sep 17 00:00:00 2001 From: Jonathan Hsu Date: Sat, 14 Mar 2015 06:48:48 -0400 Subject: [PATCH 1/8] issue #8 : case insensitive css attributes, import react's attribute mapping into attribute map --- package.json | 3 ++- src/htmltojsx.js | 17 +++++++++++++++++ test/htmltojsx-test.js | 34 ++++++++++++++++++++++++++++++++-- 3 files changed, 51 insertions(+), 3 deletions(-) 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()) From 75b8565a843e2866c2b5ac90285e032c32db1e4e Mon Sep 17 00:00:00 2001 From: Jonathan Hsu Date: Tue, 21 Apr 2015 08:28:45 +0800 Subject: [PATCH 2/8] indentation, code style fixes --- package.json | 2 +- src/htmltojsx.js | 22 ++++++++++++---------- test/htmltojsx-test.js | 30 +++++++++++++++--------------- 3 files changed, 28 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 4755bce..e5bffe4 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "dependencies": { "yargs": "~1.3.1", "jsdom": "~1.0.0-pre.6", - "react": "~0.13.0" + "react": "~0.13.0" }, "devDependencies": { "gulp": "~3.8.7", diff --git a/src/htmltojsx.js b/src/htmltojsx.js index 10e0d8c..f600843 100644 --- a/src/htmltojsx.js +++ b/src/htmltojsx.js @@ -37,15 +37,15 @@ 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 +// 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; + if (!HTMLDOMPropertyConfig.Properties.hasOwnProperty(propname)) continue; - var mapFrom = HTMLDOMPropertyConfig.DOMAttributeNames[propname] || propname.toLowerCase(); + var mapFrom = HTMLDOMPropertyConfig.DOMAttributeNames[propname] || propname.toLowerCase(); - if (!ATTRIBUTE_MAPPING[mapFrom]) - ATTRIBUTE_MAPPING[mapFrom] = propname; + if (!ATTRIBUTE_MAPPING[mapFrom]) + ATTRIBUTE_MAPPING[mapFrom] = propname; } /** @@ -484,10 +484,12 @@ 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(); - + // 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 90e54e7..d9e689c 100644 --- a/test/htmltojsx-test.js +++ b/test/htmltojsx-test.js @@ -119,13 +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 }); + + 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() { var converter = new HTMLtoJSX({ createClass: false }); expect(converter.convert('
Test
').trim()) @@ -137,31 +137,31 @@ describe('htmltojsx', function() { expect(converter.convert('').trim()) .toBe(''); }); - - it('should convert "maxlength" attribute to "maxLength"', function() { + + 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() { + + 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() { + + 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() { + + 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()) From ef2f300d0bbf7e03fc96aeb5822eea1a59ef272a Mon Sep 17 00:00:00 2001 From: Jonathan Hsu Date: Tue, 21 Apr 2015 11:35:16 +0800 Subject: [PATCH 3/8] fix comment style --- src/htmltojsx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/htmltojsx.js b/src/htmltojsx.js index 76f0a5f..5e3c4c6 100644 --- a/src/htmltojsx.js +++ b/src/htmltojsx.js @@ -481,7 +481,7 @@ StyleParser.prototype = { var key = style.substr(0, firstColon); var value = style.substr(firstColon + 1).trim(); if (key !== '') { - // if not vendor specific lowercase name + // Lowercase style name if not vendor specific // TODO better vendor prefix handling if(key[0] != '-') { key = key.toLowerCase(); From 27e22818acd0452207abc239275164c9d985cfaf Mon Sep 17 00:00:00 2001 From: Jonathan Hsu Date: Fri, 8 May 2015 04:22:22 +0800 Subject: [PATCH 4/8] fix vendor prefix style attributes and add tests, code style fix --- src/htmltojsx.js | 16 +++++++++------- test/htmltojsx-test.js | 18 ++++++++++++++++++ 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/htmltojsx.js b/src/htmltojsx.js index 45b018f..d0a8108 100644 --- a/src/htmltojsx.js +++ b/src/htmltojsx.js @@ -40,7 +40,9 @@ 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; + if (!HTMLDOMPropertyConfig.Properties.hasOwnProperty(propname)){ + continue; + } var mapFrom = HTMLDOMPropertyConfig.DOMAttributeNames[propname] || propname.toLowerCase(); @@ -481,12 +483,8 @@ StyleParser.prototype = { var key = style.substr(0, firstColon); var value = style.substr(firstColon + 1).trim(); if (key !== '') { - // Lowercase style name if not vendor specific - // TODO better vendor prefix handling - if(key[0] != '-') { - key = key.toLowerCase(); - } - + // Style key should be case insensitive + key = key.toLowerCase(); this.styles[key] = value; } }, this); @@ -516,6 +514,10 @@ StyleParser.prototype = { * @return {string} JSX style key */ toJSXKey: function(key) { + // Don't capitalize -ms- prefix + if(key.startsWith('-ms-')) { + key = key.substr(1); + } return hyphenToCamelCase(key); }, diff --git a/test/htmltojsx-test.js b/test/htmltojsx-test.js index f5016f9..e5b142e 100644 --- a/test/htmltojsx-test.js +++ b/test/htmltojsx-test.js @@ -136,6 +136,24 @@ describe('htmltojsx', function() { expect(converter.convert('
Test
').trim()) .toBe('
Test
'); }); + + it('should convert vendor-prefix "style" attributes', function() { + var converter = new HTMLtoJSX({ createClass: false }); + 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 -ms- prefix "style" attributes', function() { + var converter = new HTMLtoJSX({ createClass: false }); + expect(converter.convert('
Test
').trim()) + .toBe('
Test
'); + }); it('should convert uppercase "style" attributes', function() { var converter = new HTMLtoJSX({ createClass: false }); From eb412c5e35ea3dc7fa23def2d3f7b66fb93d4d0e Mon Sep 17 00:00:00 2001 From: Jonathan Hsu Date: Fri, 8 May 2015 04:45:11 +0800 Subject: [PATCH 5/8] code style fix --- src/htmltojsx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/htmltojsx.js b/src/htmltojsx.js index d0a8108..56b5b6e 100644 --- a/src/htmltojsx.js +++ b/src/htmltojsx.js @@ -40,7 +40,7 @@ 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)){ + if (!HTMLDOMPropertyConfig.Properties.hasOwnProperty(propname)) { continue; } From 9948c7602619d491fb7d28f05c43c68aa4dac511 Mon Sep 17 00:00:00 2001 From: Jonathan Hsu Date: Sat, 9 May 2015 09:43:56 +0800 Subject: [PATCH 6/8] startsWith not standard, use regex instead --- src/htmltojsx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/htmltojsx.js b/src/htmltojsx.js index 56b5b6e..1b28884 100644 --- a/src/htmltojsx.js +++ b/src/htmltojsx.js @@ -515,7 +515,7 @@ StyleParser.prototype = { */ toJSXKey: function(key) { // Don't capitalize -ms- prefix - if(key.startsWith('-ms-')) { + if(/^-ms-/.test(key)) { key = key.substr(1); } return hyphenToCamelCase(key); From 6c7c8ca2f3e99eb1f5be49f55b67e2664d108655 Mon Sep 17 00:00:00 2001 From: Jonathan Hsu Date: Sat, 9 May 2015 09:49:10 +0800 Subject: [PATCH 7/8] add more tests for style attributes --- test/htmltojsx-test.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/test/htmltojsx-test.js b/test/htmltojsx-test.js index e5b142e..1602049 100644 --- a/test/htmltojsx-test.js +++ b/test/htmltojsx-test.js @@ -148,13 +148,25 @@ describe('htmltojsx', function() { 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()) .toBe('
Test
'); }); + it('should convert "style" attributes with -ms- in the middle', function() { + var converter = new HTMLtoJSX({ createClass: false }); + 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()) From 6e63dfc884b313368622eb049a94ce9ce1326159 Mon Sep 17 00:00:00 2001 From: Jonathan Hsu Date: Sun, 10 May 2015 10:45:56 +0800 Subject: [PATCH 8/8] add .editorconfig to enforce indent formatting and code style fixes --- .editorconfig | 10 ++++++++++ test/htmltojsx-test.js | 12 ++++++------ 2 files changed, 16 insertions(+), 6 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..0f09989 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,10 @@ +# editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/test/htmltojsx-test.js b/test/htmltojsx-test.js index 1602049..87aa574 100644 --- a/test/htmltojsx-test.js +++ b/test/htmltojsx-test.js @@ -136,32 +136,32 @@ describe('htmltojsx', function() { expect(converter.convert('
Test
').trim()) .toBe('
Test
'); }); - - it('should convert vendor-prefix "style" attributes', function() { + + it('should convert vendor-prefix "style" attributes', function() { var converter = new HTMLtoJSX({ createClass: false }); expect(converter.convert('
Test
').trim()) .toBe('
Test
'); }); - it('should convert uppercase vendor-prefix "style" attributes', function() { + 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() { + 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() { + it('should convert -ms- prefix "style" attributes', function() { var converter = new HTMLtoJSX({ createClass: false }); expect(converter.convert('
Test
').trim()) .toBe('
Test
'); }); - it('should convert "style" attributes with -ms- in the middle', function() { + it('should convert "style" attributes with -ms- in the middle', function() { var converter = new HTMLtoJSX({ createClass: false }); expect(converter.convert('
Test
').trim()) .toBe('
Test
');