Atom-beautify: Error when beautifying React component

[CorentinAndre]

Description

The results of beautification are not what I expect.

Input Before Beautification

This is what the code looked like before:

import React, { Component } from 'react';

class App extends Component {
    constructor(){
        super();
        this.state = {
            txt: "STATE text"
        }
    }
    update(e) {
        this.setState({txt: e.target.value})
    }
    render() {

        return (
            <div>
              <input type="text"
                onChange={this.update.bind(this)}/>
              <div></div>
              <h1>{this.state.txt}</h1>
            </div>
        );
    }
}

App.propTypes = {
    txt: React.PropTypes.string,
    cat: React.PropTypes.number
}

App.defaultProps = {
    txt : "default txt",
}

export default App;

Expected Output

The beautified code should have looked like this:

import React, { Component } from 'react';

class App extends Component {
    constructor(){
        super();
        this.state = {
            txt: "STATE text"
        }
    }
    update(e) {
        this.setState({txt: e.target.value})
    }
    render() {
        return (
          <div>
            <input type="text"
              onChange={this.update.bind(this)}/>
            <div></div>
            <h1>{this.state.txt}</h1>
          </div>
        );
    }
}

App.propTypes = {
    txt: React.PropTypes.string,
    cat: React.PropTypes.number
}

App.defaultProps = {
    txt : "default txt",
}

export default App;

Actual Output

The beautified code actually looked like this:

import React, {
  Component
} from 'react';

class App extends Component {
  constructor() {
    super();
    this.state = {
      txt: "STATE text"
    }
  }
  update(e) {
    this.setState({
      txt: e.target.value
    })
  }
  render() {
    return ( <
      div >
      <
      input type = "text"
      onChange = {
        this.update.bind(this)
      }
      /> <
      div > < /div> <
      h1 > {
        this.state.txt
      } < /h1> <
      /div>
    );
  }
}

App.propTypes = {
  txt: React.PropTypes.string,
  cat: React.PropTypes.number
}

App.defaultProps = {
  txt: "default txt",
}

export default App;

Steps to Reproduce

1. Add code to Atom editor
2. Run command Atom Beautify: Beautify Editor
3. This beautified code does not look right!

Debug

Here is a link to the debug.md Gist: https://gist.github.com/CorentinAndre/2abb11ee100f6834d9d2f921ad38e9c6

Checklist

I have:

• [x] Tried uninstalling and reinstalling Atom Beautify to ensure it installed properly
• [x] Reloaded (or restarted) Atom to ensure it is not a caching issue
• [x] Searched through existing Atom Beautify Issues at https://github.com/Glavin001/atom-beautify/issues
  so I know this is not a duplicate issue
• [x] Filled out the Input, Expected, and Actual sections above or have edited/removed them in a way that fully describes the issue.
• [x] Generated debugging information by executing Atom Beautify: Help Debug Editor command in Atom and added link for debug.md Gist to this issue

[prettydiff]

I can reproduce the defect at http://jsbeautifier.org/

[bitwiseman]

Set e4x, and add preserve-inline to brace style, and that fixes this issue.

[prettydiff]

Thanks @bitwiseman

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this is still an issue, please add a comment. It will be closed if no further activity occurs. Thank you for your contributions.