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