Improve support for xml parts of jsx (React) => spaces, spread attributes and nested objects break the process

[fabien-h]

When working on a .jsx file, we have both javascript and xml in the same file. So when I try to beautify the js, it sometimes break all the xml. Would it be a way to ignore parts of the code ? Or to beautify xml as xml and js as js ?

By the way, why are they not considered as e4x XML literals ? It works for most cases, but not always.

For instance, this code works :

let a = React.createClass( {
    render() {
        return (
            <p className='b'>
                <span>c</span>
            </p>
        );
    }
} );

But if you add a space around the =, like that : <p className = 'b'>, it transforms it a very strange way :

let a = React.createClass( {
    render() {
        return ( < p className = 'b' >
            <span>c</span> < /p>
        );
    }
} );

And it breaks the syntax highlighter and the transpiler (babel).

The spread attribute {...this.something} is not supported => http://facebook.github.io/react/docs/jsx-spread.html#spread-attributes

let CheckLink = React.createClass({
    render() {
        return <a {...this.props}>{'√ '}{this.props.children}</a>;
    }
});

Is transformed into :

let CheckLink = React.createClass( {
    render() {
        return <a {...this.props
        } > {
            '√ '
        } {
            this.props.children
        } < /a>;
    }
} );

The nested objects are not supported

let CheckLink = React.createClass({
    render() {
        return <a style={{display: 'block'}}>{'√ '}{this.props.children}</a>;
    }
});

It transformed into :

let CheckLink = React.createClass( {
    render() {
        return <a style = {
            {
                display: 'block'
            }
        } > {
            '√ '
        } {
            this.props.children
        } < /a>;
    }
} );

They both should keep their initial form

[fabien-h]

(oh, there is something to enable it in the configuration file :x )

=> "e4x": true,

[bitwiseman]

As you say works in many cases, but not all. Feel free to file specific bugs as you see them.

[fabien-h]

For instance, this code works :

let a = React.createClass( {
    render() {
        return (
            <p className='b'>
                <span>c</span>
            </p>
        );
    }
} );

But if you add a space around the =, like that : <p className = 'b'>, it tranfsforms it a very strange way :

let a = React.createClass( {
    render() {
        return ( < p className = 'b' >
            <span>c</span> < /p>
        );
    }
} );

And it breaks the syntax highlighter and the transpiler (babel).

[bitwiseman]

Please file this a s new issue. That looks like something easily solvable.

[fabien-h]

Ok, I reopened the issue and changed the title and description a little bit.

[bitwiseman]

Cool, that works.

[fabien-h]

Quick an clean fix ! Thanks a lot :)