Incorrect formatting when running ---fix for JSX with missing parentheses (jsx-wrap-multilines)

[jakefb]

What version of this package are you using?

^14.0.0

What operating system, Node.js, and npm version?

macOS 10.14.5
node v12.8.0
npm 6.10.2

What happened?

It appears that jsx-wrap-multilines #710 has been implemented in standard v14, however when I run standard --fix the following happens.

Original code:

const Component = () =>
  <div>
    <p>Some text</p>
  </div>

export { Component as default }

Formatted code:

const Component = () => (
<div>
    <p>Some text</p>
  </div>
)export { Component as default }

What did you expect to happen?

I expected the export statement to be on a newline. Something strange is going on with the JSX formatting as well.

Are you willing to submit a pull request to fix this bug?

I could take a look into it and see if I can find what's causing the issue.

[feross]

Sorry about the issue here. This is a bug in eslint-plugin-react. I opened an issue here: #1382

I'll temporarily disable this rule and release a new version of standard. We can re-enable this rule once the bug is fixed.

Note to self: re-add the following rule to eslint-config-standard-jsx when this bug is fixed:

    "react/jsx-wrap-multilines": ["error", {
      "declaration": "parens-new-line",
      "assignment": "parens-new-line",
      "return": "parens-new-line",
      "arrow": "parens-new-line",
      "condition": "parens-new-line",
      "logical": "ignore",
      "prop": "ignore"
    }],

[feross]

Released standard 14.0.1 with the fix.

[jakefb]

Thanks @feross, great work on the update by the way!

I have noticed something else strange which the parens-new-line condition when running standard --fix

Original code:

const Component = props => (
  <div>
    {true &&
      <div>
        <p>Some text</p>
      </div>
    }
  </div>
)

Formatted code:

const Component = props => (
  <div>
    {true &&
      <div>
        <p>Some text</p>
      </div>}
  </div>
)

I expected this to happen:

const Component = props => (
  <div>
    {true && (
      <div>
        <p>Some text</p>
      </div>
    )}
  </div>
)

---

Original code:

const Component = props => (
  <div>
    {true ?
      <div>
        <p>Some text</p>
      </div>
    : null}
  </div>
)

Formatted code:

const Component = props => (
  <div>
    {true
      ? <div>
        <p>Some text</p>
        </div>
      : null}
  </div>
)

I expected this to happen:

const Component = props => (
  <div>
    {true ? (
      <div>
        <p>Some text</p>
      </div>
    ) : null}
  </div>
)

[feross]

@jakefb I agree with your expectations in the first example. As for the second example, we have a rule that ternary operators need to be at the start of the line, like this:

const x = condition
  ? 'true'
  : 'false

So when it comes to JSX, I guess it should format to this? But it's kind of terrible...

const Component = props => (
  <div>
    {true
      ? (
        <div>
          <p>Some text</p>
        </div>
      )
      : null}
  </div>
)

[jakefb]

That makes sense. When writing plain JavaScript instead of JSX I think putting ternary operators on a newline makes the code more readable.

In my opinion when writing JSX it's more familiar to do it the same way as in the React docs because the formatting and indentation is similar to writing and if else tag in the Django template language or something similar.

[feross]

The first issue you reported has been fixed upstream (but not in a release yet): #1382

The second two issues may still remain, though we should test it out.