single attribute breaks jsx beautification

[zenyr]

Thanks for your hard work. Apart from infamous one-lining {foo:'bar'} issue (wink wink), I'm having some different issue here. Possibly duplicate issue, but don't know the specific keyword to search here, so I'm submitting one.

Problem

single attribute breaks jsx beautification. If I either put out someAttr or replace to someAttr={true} from the repro case below, it works as expected.

Edit: Also it seems like only happening at the out-most jsx tag.

Environment: atom-beautify, jsbeautifier.org

Repro

Input

export default class TestCase extends React.Component {
  render() {
    return ( <div className={this.props.className} someAttr>
      <div>Smth</div>
    </div> );
  }
}

Expected

(Untouched from Input)

Output

export default class TestCase extends React.Component {
    render() {
      return ( < div className = {
          this.props.className
        }
        someAttr >
        <div>Smth</div> < /div> );
      }
    }

[bitwiseman]

Yeah, I didn't know <div someAttr>val</div> is a valid attribute. I thought attributes needed at least someAttr=''

http://stackoverflow.com/questions/6926442/is-an-xml-attribute-without-a-value-valid
http://www.w3.org/TR/2006/REC-xml11-20060816/#sec-starttags

Is this a JSX thing?
Or are you just saying, "Hey, the beautifier shouldn't 'splode my code if I give it less than perfect xml syntax" ?

[zenyr]

Pretty sure this is a jsx thing. <CamelCaseTagName such={{double:'curlybraces'}} {...with.props.spread} /> , which is a plain everyday jsx convention is definitely NOT a valid XML ;D

[phuna]

I got same problem today with JSX. I'm using Atom editor with atom-beautify package. I need to change beautifier for .js file to Pretty Diff.

[luckyyang]

I still got the error, is this bug fixed?

still got this error:

<Component {...newProps} />
will into:

      < Component {...newProps }
      />

if do format for the entire file, will get:

<
      Component {...newProps }
      />

[c-gargi]

Input : <MenuItem data-id={org.value} onClick={self.changeMenuState} />

Out put : < MenuItem data - id = { org.value } onClick = { self.changeMenuState } />

The space between data - id causing parsing error. Please help me with that.

[bitwiseman]

@c-gargi Did you turn on e4x?

[c-gargi]

Yes I did @bitwiseman

[bitwiseman]

@c-gargi When I use e4x enabled on http://jsbeautifier.org/ the input remains unchanged. Disabled, gets the output you saw. Seems likely there's a settings or versioning issue in your environment.