html-jsx fix case-insensitive attributes and style names

[jhiswin]

Solution

-Known attributes like maxlength have to be camelcased to maxLength or whatever is in [DefaultDOMPropertyConfig] https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js
Might be a good idea to throw a warning/error for unknown properties, so they don't get discarded without you knowing.

-Styles should be lowercased before processing.

Example

<input style="TEXT-ALIGN: center; WIDTH: 40px" maxlength=2 />

transpiles to:

<input style={{TEXTALIGN: 'center', WIDTH: 40}} maxlength={2} />

transpiles to:

React.DOM.input( {style:{TEXTALIGN: 'center', WIDTH: 40}, maxlength:2} )

generates:

<input style="-t-e-x-t-a-l-i-g-n:center;-w-i-d-t-h:40px;" data-reactid=".r[2wp76]">

[zpao]

In React, we currently warn in __DEV__ for unknown properties when we think there's something you meant to use. In your case maxlength should have warned that it was expecting maxLength (https://github.com/facebook/react/blob/master/src/dom/DOMPropertyOperations.js#L58-L64). We don't warn for the others because it has potential to become very noisy (and would be unacceptably so at FB).

Otherwise, I agree that we should make some improvements to the HTML-JSX converter for accuracy. The tool is meant to still be in beta :)

cc @Daniel15

[Daniel15]

Thanks, I can work on this. It might be worth utilising DefaultDOMPropertyConfig.js in html-jsx-lib so that its checks are consistent with React itself. I'm actually surprised how well the HTML to JSX converter is working at the moment, it seems like the only issues are little ones that should have easy fixes.

-t-e-x-t-a-l-i-g-n is pretty amusing. :P

[Daniel15]

Moving HTMLToJSX issues to the https://github.com/reactjs/react-magic repository.