Hug JSX text after multi line tags

[karl]

A fix for #1581

This PR no longer allows a line break between tags and text in JSX. This fixes an issue that was blocking adoption at Facebook (#1581 (comment)) with little adverse effects for our standard formatting.

[karl]

This looks like an edge case with the current implementation. When we have tag that would just fit on a line and it is followed by text it causes this unusual formatting.

I imagine in this case we would be aiming for:

this collection and the list it contained on 
<b>
  {humanDate(since)}
</b>.

I haven't had a chance to investigate why this is happening yet.

[lydell]

This PR looks great to me. Do you feel this is a blocker? I don't. We could always improve things in another PR.

Btw, I this would be a pretty nice formatting:

this collection and the list it contained on 
{" "}<b>{humanDate(since)}</b>.

[vjeux]

Nope, I don't really care about this.

[lydell]

I would call this "the React whitespace rules" since JSX does not seem to have whitespace rules.

[vjeux]

Thanks so much for working on this!

Could you also ensure that it works before as well?

<div>Elements Elements Elements Elements Elements Elements Elements Elements (<span>{count}</span>) Elements Elements Elements</div>

currently outputs

<div>
  Elements Elements Elements Elements Elements Elements Elements Elements (
  <span>{count}</span>) Elements Elements Elements
</div>;

which would add a space between ( and count.

[karl]

I've pushed a quick change which hugs text to the beginning of tags as well.

Although there are some degenerative cases where you can end up with a line that never gets split.

Input:

this_really_should_split_across_lines =
  <div>
    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after
  </div>

Output:

this_really_should_split_across_lines = (
  <div>
    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after
  </div>
);

I'll investigate what we might be able to do to fix this.

[vjeux]

Do people write this in practice?

[lydell]

@karl There's no way to split your last example, is it? Even if there is, I agree with @vjeux that it looks like a case where it's not worth spending time.

[karl]

Yep, totally agree that the degenerative case shouldn't block merging this!

[vjeux]

@lydell mind reviewing this PR?

[karl]

@lydell I believe it should be theoretically possible to split it by doing something like:

  <div>
    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{
      stuff
    }after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{
      stuff
    }after{stuff}after{stuff}after
  </div>

[vjeux]

Just found a case where it's not stable the first time if you are interested. I don't think it's a big deal and it's okay if it's not fixed, but you may be interested.

<div className="yourScore">
  Your score: <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${mini.crosstable.users[user.id]}`}</span>
</div>

<div className="yourScore">
  Your score:
  {" "}
  <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${mini
    .crosstable.users[user.id]}`}</span>
</div>;

<div className="yourScore">
  Your score:
  {" "}
  <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${mini.crosstable.users[user.id]}`}</span>
</div>;

[karl]

@vjeux I've created an issue for the unstable formatting and added it to my TODO list.