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: Dmitry Gutov <dgutov <at> yandex.ru>
Cc: tracker <at> debbugs.gnu.org
Subject: bug#24896: closed (JSX prop indentation after fat arrow)
Date: Wed, 05 Jun 2019 11:01:02 +0000

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

Your message dated Wed, 5 Jun 2019 14:00:16 +0300
with message-id <d908dc2f-ce04-065b-82e7-b865233e5d52 <at> yandex.ru>
and subject line Re: bug#32158: 26.1; Broken JSX indentation in case of arrow function passing to props
has caused the debbugs.gnu.org bug report #32158,
regarding JSX prop indentation after fat arrow
to be marked as done.

(If you believe you have received this mail in error, please contact
help-debbugs <at> 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: 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 3 (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 4 (text/html, inline)]

[Message part 5 (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.

Previous Next

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