GNU bug report logs - #32158
26.1; Broken JSX indentation in case of arrow function passing to props

Previous Next

Full log

View this message in rfc822 format

From: help-debbugs <at> gnu.org (GNU bug Tracking System)
To: Felipe Ochoa <felipe.nospam.ochoa <at> gmail.com>
Subject: bug#24896: closed (Re: bug#32158: 26.1; Broken JSX indentation in
 case of arrow function passing to props)
Date: Wed, 05 Jun 2019 11:01:02 +0000

[Message part 1 (text/plain, inline)]

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 24896 <at> debbugs.gnu.org.

-- 
32158: http://debbugs.gnu.org/cgi/bugreport.cgi?bug=32158
GNU Bug Tracking System
Contact help-debbugs <at> gnu.org with problems

[Message part 2 (message/rfc822, inline)]

From: Dmitry Gutov <dgutov <at> yandex.ru>
To: Jackson Ray Hamilton <jackson <at> jacksonrayhamilton.com>,
 32158-done <at> debbugs.gnu.org
Cc: valentignatev <at> gmail.com
Subject: Re: bug#32158: 26.1; Broken JSX indentation in case of arrow function
 passing to props
Date: Wed, 5 Jun 2019 14:00:16 +0300

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.

[Message part 3 (message/rfc822, inline)]

From: Felipe Ochoa <felipe.nospam.ochoa <at> gmail.com>
To: bug-gnu-emacs <at> gnu.org
Subject: JSX prop indentation after fat arrow
Date: Mon, 7 Nov 2016 10:56:21 +0100

[Message part 4 (text/plain, inline)]

(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>
);

[Message part 5 (text/html, inline)]

Previous Next

GNU bug tracking system
Copyright (C) 1999 Darren O. Benham, 1997,2003 nCipher Corporation Ltd, 1994-97 Ian Jackson.