Make JSX transformer string quoting configurable

[pgherveou]

Hello guys
First of all Great project :)

I just tweaked my linter plugin (sublinter) to use react tools and transform jsx code before linting

I just have a small issue though the code generated use double quote strings and thus as we are enforcing single quote string, this produce an error.

Can we enforce single string on the transformer?

/** @jsx React.DOM */
var React = require('react');

module.exports = React.renderComponent(
  <h1>foo</h1>,
  document.getElementById('example')
);

generates React.DOM.h1(null, "foo") instead of desired React.DOM.h1(null, 'foo'),

/** @jsx React.DOM */
var React = require('react');

module.exports = React.renderComponent(
  React.DOM.h1(null, "foo"),
  document.getElementById('example')
);

[sophiebits]

There are companies who enforce double quoted strings too, you know. :) Maybe it could be an option though.

[zpao]

Yea, making it an option probably wouldn't be terrible, though maybe it would be even better to just respect the original quoting. That way we don't have to deal with quotes... However we use JSON.stringify to output which always uses double quotes, so we would need to add additional processing.

cc/ @jeffmo

[sophiebits]

Not sure exactly what you mean since there is no original quoting in this case?

[zpao]

Ah, true. I was thinking about prop values, not the child values <div foo='bar'/> -> React.DOM.div({foo: "bar"}). In the child case... yea there's no original quoting to preserve. I think they both go through the same path though - https://github.com/facebook/react/blob/master/vendor/fbtransform/transforms/xjs.js#L231-L233

[sophiebits]

foo='bar' doesn't even parse right now I think.

[pgherveou]

thanks @spicyj it's just a tiny detail, having an option would be great though!

[zpao]

@spicyj it does :) I used http://facebook.github.io/react/jsx-compiler.html

[pgherveou]

btw one option to remove trailing white spaces left by jsx would be nice to have too :)

[zpao]

I think we can just fix the trailing whitespace issue independently. I'd argue that's a big that it ends up in there at all :)

[sophiebits]

Yeah, also a little weird how <HelloMessage name="John" /> turns into HelloMessage( {name:"John"} ) with the spaces.

[STRML]

I've addressed the trailing whitespace issues in this pull request.

[pkyeck]

any progress on the original issue with the single/double quotes?
I get output that looks like this:

// input
<a href="/logout" data-link="action">Logout</a>

// output
React.DOM.a( {href:"/logout", 'data-link':"action"}, "Logout")

the mix of both types of quotes is making my linter complain.

[chenglou]

There's https://github.com/STRML/JSXHint btw. Is this good enough? If yes, this should be a solved issue?

[STRML]

@chenglou That allows you to successfully lint JSX syntax; but you still will need to relax your quote settings ("quotmark": false in jshintrc) because of this bug. So no, I don't think we can close it yet.