Extra space being added to js expressions inside jsx

[nomadtechie]

Hello Royriojas,

Thanks for this awesome plugin!

I'm not sure why an extra space is being added here where there is a return:

Before: export class Test extends React.Component {

render() {  //****4 spaces
    return (  //****8 spaces
        <div className="test" style={this.props.style}>  //****12 spaces
            {this.props.testApps.map((app) => {  //****16 spaces
                return (  //****20 spaces
                    <AppLauncher appData={app} key={app.name}/>  //****24 spaces
                );
            })}
        </div>
    );
}

}

After:

export class Test extends React.Component {

render() {
    return (
        <div className="test" style={this.props.style}>
            {this.props.testApps.map((app) => {
                 return (  //****21 spaces (should be 20)
                     <AppLauncher appData={app} key={app.name} />
                     );
             })}  //****17 spaces (should be 16)
        </div>
        );
}

}

As you can see the after, I have 21 and 17, but the rest have formatterd correctly. Below is my config for this plugin: "jsx":{ "formatJSX":true, "attrsOnSameLineAsTag":true, "maxAttrsOnTag":3, "firstAttributeOnSameLine":true, "spaceInJSXExpressionContainers":"", "alignWithFirstAttribute":false, "htmlOptions":{ "brace_style":"collapse", "indent_char":" ", "indent_size":4, "max_preserve_newlines":2, "preserve_newlines":true } }

[royriojas]

Not sure I understand your issue completely but I did notice now that there is an extra space when the code is formatted. This is definitively a bug.

[nomadtechie]

Hi Royriojas, thanks so much, and yes, its a bug, I'll stay posted for the updates. I would love to contribute, not sure where to get started with a beautifier library.

[ipselon]

Hey @royriojas is there any chance to fix this bug or this is fundamental one?

[royriojas]

not really, it is just a wrong calculation. but this will have to be a major change because some of the tests were mistakenly asserting the wrong thing.

That said, it is just lack of time that is preventing me from taking care of this particular issue.

[Heedster]

I am still having this problem using the latest version.

            <div className={theme.container}>
                <AutoSizer>
                    {({height, width}) => {
                         return <ScrollSync>
                                    {({onScroll, scrollTop}) => {
                                         return <div>Blah</div>;
                                     }}
                                </ScrollSync>
                     }}
                </AutoSizer>
            </div>