A snippet that doesn't compile down to pretty jsx

[chenglou]

Currently jsx transforms this (with the indentation):

            if (this.props.completedCount > 0) {
                clearButton = (
                    <button
                        id="clear-completed"
                        onClick={this.props.onClearCompleted}>
                        Clear completed ({this.props.completedCount})
                    </button>
                );
            }

into this:

            if (this.props.completedCount > 0) {
                clearButton = (
                    React.DOM.button(
                        {id:"clear-completed",
                        onClick:this.props.onClearCompleted}, [
" Clear completed (",this.props.completedCount,") "                 ])
                );
            }

Which fails to pass jshint because of the indentation (the temporary solution is to put {''} before and after the bad line). It gets worse if you prefer the style of putting the > on a new line, it becomes:

            if (this.props.completedCount > 0) {
                clearButton = (
                    React.DOM.button(
                        {id:"clear-completed",
                        onClick:this.props.onClearCompleted}
                    , [
" Clear completed (",this.props.completedCount,") "                 ])
                );
            }

Which fails two additional tests, the comma style (that can be disabled with laxcomma and bad line breaking (not sure if it can be disabled).

[zpao]

Yea, this is pretty awkward. Since we do pretty dumb string transforms and preserve line numbers, it's not going to be pretty. My long term goal is to get to AST->AST transforms with sourcemaps and pretty code generation with something like escodegen.

We could at least do better with comma style in the short term.

[sophiebits]

I made some changes a while back so now you get:

            if (this.props.completedCount > 0) {
                clearButton = (
                    React.DOM.button(
                        {id:"clear-completed",
                        onClick:this.props.onClearCompleted}, 
                        " Clear completed (",this.props.completedCount,") "
                    )
                );
            }

[zpao]

If somebody wants to tackle the comma part of this, then go for it but otherwise, let's close it out.