failing test for jsx-indent without parens

[lukekarrys]

Starting in 6.4.0 I got some new errors from jsx-indent in some of my projects.

Here's a simple example that I added as a failing test:

{head.title &&
  <h1>
    {head.title}
  </h1>
}

I could wrap the <h1> with parens and then it works (I added a test for that also), but I'm wondering if it could be made to pass without parens. Or there's probably a good reason why it shouldn't pass that I'm missing 😄 . If this should be ok, I'd be more than willing to work on a fix for this.

[yannickcr]

Hi, thanks for the failing test, it was a big help 😃

The jsx-indent rule was previously asking you to indent like this but everyone was not really happy with this behavior. If you follow the discussion in #540 you'll see that there is not really a "right" way to indent this case.

I fixed the problem in 963267a but accidentally disallowed this style at the same time 😞

I made a fix cc84a46 and it should now allow the following cases:

// No parens, same indentation
{
  head.title &&
  <h1>
    {head.title}
  </h1>
}

// No parens, one indentation deeper
{
  head.title && 
    <h1>
      {head.title}
    </h1>
}

// Parens, same indentation
{
  head.title && (
  <h1>
    {head.title}
  </h1>)
}

// Parens, one indentation deeper
{
  head.title && (
    <h1>
      {head.title}
    </h1>
  )
}

I'll publish v6.4.1 with the fix shortly.

[ljharb]

@yannickcr does it allow all those at once, or can i force one? For my codebases I'd want to force only the last option

[yannickcr]

@ljharb it allow all those at once. I tried to be pretty flexible on this since ESLint is pretty loose on LogicalExpression too. But I am not against adding an option to enforce one style in particular.

[ljharb]

Awesome, I'd love to see that option added :-)