Subject: bug#24896: 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:02 +0000

Your bug report

#32158: JSX prop indentation after fat arrow

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: JSX prop indentation after fat arrow
From: Felipe Ochoa <[email-masked]>
To: [email-masked]
Date: Mon, 7 Nov 2016 10:56:21 +0100
List-Id: <debbugs-submit.debbugs.gnu.org>

(Preemptive apologies if this is the wrong list/format for this comment --
first time filer here!)

When indenting JSX code using js2- or js-mode, the indentation function
gets confused when there's a fat arrow function in a JSX prop. Compare the
way the following two code blocks are auto-indented:

const Component = props => ( // Incorrect indentation
    <FatArrow a={e => c}
      b={123}>
    </FatArrow>
);

const Component = props => ( // Correct indentation
    <NoFatArrow a={123}
                b={123}>
    </NoFatArrow>
);

I've tracked the problem down to `sgml-calculate-indent' using
`parse-partial-sexp' with `sgml-tag-syntax-table', where `>' is treated as
a close-parenthesis character (and thus the end-of-tag marker). I don't
think there's a way to patch the syntax table that would let `>' flip
between punctuation and close-parens based on context, but one possible fix
when using js2-mode (not sure about js-mode) is to apply a "."
'syntax-table text property to the `>' when parsing a fat arrow.

Unfortunately, `js-jsx-indent-line' calls `sgml-indent-line' using
`js--as-sgml', which sets `parse-sexp-lookup-properties' to nil.

Would there be any harm in setting `parse-sexp-lookup-properties' to t
instead? As far as I can tell, js-mode and js2-mode only use 'syntax-table
propeties for regex literals.

As a side-note, there may well be a different solution to this problem; I
still don't understand why the following block is indented correctly:

const Component = props => (
    <WithRegex a={/>/}
               b={123}>
    </WithRegex>
);