Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

issue #8 : case insensitive css attributes, import react's attribute map... #20

Merged
merged 10 commits into from
May 10, 2015
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
17 changes: 17 additions & 0 deletions src/htmltojsx.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,19 @@ var ELEMENT_ATTRIBUTE_MAPPING = {
}
};

var HTMLDOMPropertyConfig = require('react/lib/HTMLDOMPropertyConfig');

//populate property map with ReactJS's attribute and property mappings
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please put a single space after the // and capitalise the first word

//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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use two spaces rather than tabs for indentation


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:
Expand Down Expand Up @@ -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();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formatting:

if (key[0] != '-') {
  key = key.toLowerCase();
}


this.styles[key] = value;
}
}, this);
Expand Down
34 changes: 32 additions & 2 deletions test/htmltojsx-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,13 @@ describe('htmltojsx', function() {
expect(converter.convert('<div style="font-size: 12pt">Test</div>').trim())
.toBe('<div style={{fontSize: \'12pt\'}}>Test</div>');
});


it('should convert uppercase "style" attributes', function() {
var converter = new HTMLtoJSX({ createClass: false });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use two spaces rather than tabs

expect(converter.convert('<div style="TEXT-ALIGN: center">Test</div>').trim())
.toBe('<div style={{textAlign: \'center\'}}>Test</div>');
});

it('should convert "class" attribute', function() {
var converter = new HTMLtoJSX({ createClass: false });
expect(converter.convert('<div class="awesome">Test</div>').trim())
Expand All @@ -131,7 +137,31 @@ describe('htmltojsx', function() {
expect(converter.convert('<label for="potato">Test</label>').trim())
.toBe('<label htmlFor="potato">Test</label>');
});


it('should convert "maxlength" attribute to "maxLength"', function() {
var converter = new HTMLtoJSX({ createClass: false });
expect(converter.convert('<input maxlength=2></input>').trim())
.toBe('<input maxLength={2} />');
});

it('should convert "http-equiv" attribute to "httpEquiv"', function() {
var converter = new HTMLtoJSX({ createClass: false });
expect(converter.convert('<meta http-equiv="refresh">').trim())
.toBe('<meta httpEquiv="refresh" />');
});

it('should convert "accept-charset" attribute to "acceptCharset"', function() {
var converter = new HTMLtoJSX({ createClass: false });
expect(converter.convert('<form accept-charset="UTF-8">Test</form>').trim())
.toBe('<form acceptCharset="UTF-8">Test</form>');
});

it('should convert "enctype" attribute to "encType"', function() {
var converter = new HTMLtoJSX({ createClass: false });
expect(converter.convert('<form method="post" enctype="application/x-www-form-urlencoded">Test</form>').trim())
.toBe('<form method="post" encType="application/x-www-form-urlencoded">Test</form>');
});

it('should maintain value-less attributes', function() {
var converter = new HTMLtoJSX({ createClass: false });
expect(converter.convert('<input disabled>').trim())
Expand Down