Subject: bug#26001: closed (Re: bug#32158: 26.1; Broken JSX indentation in case of arrow function passing to props)

From: [email-masked] (GNU bug Tracking System)
Date: Wed, 05 Jun 2019 11:01:03 +0000

Your bug report

#32158: js-mode: JSX indentation after fat-arrow attribute

which was filed against the emacs package, has been closed.

The explanation is attached below, along with your original report.
If you require more details, please reply to [email-masked].

-- 
32158: http://debbugs.gnu.org/cgi/bugreport.cgi?bug=32158
GNU Bug Tracking System
Contact [email-masked] with problems

Subject: Re: bug#32158: 26.1; Broken JSX indentation in case of arrow function passing to props
From: Dmitry Gutov <[email-masked]>
To: Jackson Ray Hamilton <[email-masked]>, [email-masked]
Cc: [email-masked]
Date: Wed, 5 Jun 2019 14:00:16 +0300
List-Id: <debbugs-submit.debbugs.gnu.org>

On 05.06.2019 13:58, Dmitry Gutov wrote:

> Jackson, here's a slight variation on this example that looks problematic:
> 
> const foo = (props) => (
>      <div>
>      <input
>    cat={i => i} />
> 
>    </div>
> );
> 
> (Note the empty line)
> 
> That seems incorrect to me.

Sorry, never mind. I had to enable js-jsx-mode to test it properly.

So, closing.

Note that you can do it yourself by appending -done to a bug email.

Subject: js-mode: JSX indentation after fat-arrow attribute
From: Dražen <[email-masked]>
To: [email-masked]
Date: Mon, 06 Mar 2017 14:40:56 +0000
List-Id: <debbugs-submit.debbugs.gnu.org>

As mentioned in
https://github.com/mooz/js2-mode/issues/389#issuecomment-271869380 , there
seems to be a bug in the way js-mode (at least the folks there pointed me
at js-mode) indents JSX JavaScript.

When I'm doing a map with JSX syntax I'm getting:

render() {
    const messages = this.state.messages.map(
        message => <Message key={message.id}
        text={message.text}
        mine={message.mine} />
    );    return messages;
}

I'd ideally expect something like:

render() {
    const messages = this.state.messages.map(
        message => <Message key={message.id}
                            text={message.text}
                            mine={message.mine} />
    );    return messages;
}

It's even odder when I try to leave the argument to the arrow function in
the line above:

render() {
    const messages = this.state.messages.map(message =>
                                             <Message key={message.timestamp}
                                             text={message.text}
                                             mine={message.mine} />
                                            );    return messages;
}

For this second case, I'd hope to get:

render() {
    const messages = this.state.messages.map(message =>
        <Message key={message.timestamp}
                 text={message.text}
                 mine={message.mine} />
    );    return messages;
}

(I get such results if I wrap the return expression in parentheses)