KyleAMathews / cjsx-loader

coffee-react-transform loader module for webpack
53 stars 11 forks source link

Ternary ops #5

Closed joaomilho closed 9 years ago

joaomilho commented 9 years ago

So I've tried to use cjsx-loader in an existing project. First thing is that I had to remove `s of all components. Then it complained about ternary operators. Do you have any clue how to keep 'em instead of moving them to a method (which in many cases decreases readability)?

KyleAMathews commented 9 years ago

Can you add a sample of the code which is causing problems?

joaomilho commented 9 years ago
Whatever = React.createClass
  render: ->
    <div>
      { this.props.something ?
        <div>A</div> :
        <div>B</div> }
     </div>

Hope it helps.

KyleAMathews commented 9 years ago

Coffeescript doesn't have the ternary operator actually. You could either write this using a normal if/else or with Coffeescript's one-liner version:

Whatever = React.createClass
  render: ->
    <div>
      {if this.props.something then <div>A</div> else <div>B</div>}
    </div>
joaomilho commented 9 years ago

Yes, I know CS doesn't have ternaries. But for some reason, if you use both the gulp-cjsx and the ruby gem to convert react components to plain javascript, they accept them inside the XML blocks. And they do not accept the if/then/else construct.

The same way, using your loader there is an "unexpected if" If you use it. Please try.

KyleAMathews commented 9 years ago

Supporting ternaries would mean we'd be forking coffeescript... I'm not sure what gulp-cjsx or the ruby gem you're referring to are doing exactly but intermixing JS and Coffeescript syntax seems odd and error-prone.

You can always use the backtick operator if you want plain javascript.

joaomilho commented 9 years ago

Well, still the if doesn't work.

KyleAMathews commented 9 years ago

Could you copy in more of your code that's not working? My example code above compiles just fine to:

(function() {
  var Whatever;

  Whatever = React.createClass({
    render: function() {
      return React.createElement(React.DOM.div, null, (this.props.something ? React.createElement(React.DOM.div, null, "A") : React.createElement(React.DOM.div, null, "B")));
    }
  });

}).call(this);