Prettier: [JSX] When breaking lines and removing significant whitespace, add `{' '}`

[rattrayalex]

(c/p from https://github.com/jlongster/prettier/issues/73#issuecomment-272571398)

When prettier breaks two previously adjacent text||jsx nodes onto separate lines, and those two nodes had been separated by whitespace, {' '} (or equivalent) must be inserted.

Eg, if prettier split this up...

<div>
  hello <span>world</span> <strong>foo</strong>
</div>

into this...

<div>
  hello
  <span>world</span> 
  <strong>foo</strong>
</div>

(which it currently wouldn't, because those lines are short – but pretend they're long 😉)
then the compiled output would change from

<div>hello <span>world</span> <strong>foo</strong></div>

to

<div>hello<span>world</span><strong>foo</strong></div>

generating "helloworldfoo" instead of "hello world foo" to the user. Oops!

That's not just a little "oops" – if someone is trying to adopt prettier in a large codebase, they're going to have to quickly skim a large number of minor changes, run their tests, and cross their fingers. This kind of thing is hard to catch, almost certainly not tested by unit tests, and results in an embarrassing visual bug being shipped to users.

I have a fix mostly-written for this.

[vjeux]

If you can fix this and the other issue you mentioned, it'll be so good! I can't wait to use it :)

[rattrayalex]

This is now mostly-done as a part of https://github.com/jlongster/prettier/pull/234 , though the PR is blocked on figuring out another aspect.

The approach I've taken to solving this problem (adding a whole new node type of 'jsx-whitespace') may not get a green light, though, in which case it'd need to be rethought.

[vjeux]

Fixed in 0.0.9