Don't always put {" "} on a new line when formatting JSX children

[karl]

The change in #1120 means Prettier will now fill a line with as many JSX children as possible before moving to a new line.

This behaviour means that our decision to always have {" "} appear on a line by itself can appear strange in a number of cases.

For example:

x =
  <div>
    Lorem ipsum dolor <b>sit</b> amet, vix at vitae atomorum, mel ne semper epicuri. Mei cu dolor partem, ne sed feugiat ornatus eligendi. Modus <b>aliquip</b> ea vix. Ad falli adipiscing adversarium ius, mel iusto soluta corpora at, quando <b>dolore</b> ut has. Animal posidonium an eum. Mea accusam detracto eu, no civibus rationibus pro.
  </div>

Becomes:

x = (
  <div>
    Lorem ipsum dolor <b>sit</b> amet, vix at vitae atomorum, mel ne semper
    epicuri. Mei cu dolor partem, ne sed feugiat ornatus eligendi. Modus
    {" "}
    <b>aliquip</b> ea vix. Ad falli adipiscing adversarium ius, mel iusto soluta
    corpora at, quando <b>dolore</b> ut has. Animal posidonium an eum. Mea
    accusam detracto eu, no civibus rationibus pro.
  </div>
);

Potentially it would be nicer formatted as:

// Newline on tag in long text.
x = (
  <div>
    Lorem ipsum dolor <b>sit</b> amet, vix at vitae atomorum, mel ne semper
    epicuri. Mei cu dolor partem, ne sed feugiat ornatus eligendi. Modus
    {" "}<b>aliquip</b> ea vix. Ad falli adipiscing adversarium ius, mel iusto
    soluta corpora at, quando <b>dolore</b> ut has. Animal posidonium an eum.
    Mea accusam detracto eu, no civibus rationibus pro.
  </div>
);

I'm not sure how to accomplish this yet, so I've opened this issue as a place to discuss whether we'd like to make this change and how we might accomplish it.

[alexlrobertson]

I think this helps clarify why the {" "} was inserted as well, making sure a developer cleans it up if the <b> aliquip</b> gets removed later.

[karl]

☝🏻 I've put together a PR that places the {" "} on the same line as the element it precedes. Although it leaves {" "} on a line by itself when it precedes or follows an element that is split across multiple lines.

[karl]

Based on @SimenB's comment in #1831 (comment) I'm investigating whether it might make sense to place the {" "} elements the end of lines, rather than the beginning.

It looks like it will be a little more work as there are some difficulties around having them trail multiline elements, so I don't have anything to show for it yet.

[karl]

I have a PR that places {" "} at the end of lines rather than the beginnings:

#1964

I'd be interested in people's thoughts!

[karl]

This is now done in #1964 🎉