Weird new line inside a self closing JSX tag with no attributes

[rpominov]

Prettier 1.8.2
Playground link

Input:

<p>
  test test test test test test test test test test test test test test tes<br/>
  test test test test test
</p>

Output:

<p>
  test test test test test test test test test test test test test test tes<br
  />
  test test test test test
</p>;

Expected behavior:
Maybe put <br /> on the second line as a whole?

[duailibe]

This has been discussed before and it's intentionally printed this way because of a Facebook use of JSX in a translation pipeline (see #1581).

In this case, the solution is to manually include a line break before <br/> since that won't affect the runtime output and will make Prettier print correctly.

Going to close this but please comment if this does not solve your issue. Thanks for the report!

[lydell]

I don’t understand how this issue is the same as #1581?

[duailibe]

If we put <br /> on the second line that would mean printing a new line before it (which is considered as whitespace by FB's translation pipeline) and if we print <br /> on the first line, it would exceed the print width.

[duailibe]

Let's keep this open until we're sure they're the same issue.

[rpominov]

Yeah, I've also thought about this problem after I've wrote my original comment. Maybe the following output could be considered as a possible solution?

<p>
  test test test test test test test test test test test test test test 
  tes<br />
  test test test test test
</p>;

[lydell]

I think it is totally fine to exceed the print width here. While it is technically possible to break between <br and /> it feels very unnatural to do so. It’s like we’d break between the parens in someFunction(); just to stay within the print width. It’s better to treat a JSX element with neither props nor children as one unbreakable unit. Just like long variable names, they can overflow the maximum print width since they simply can’t be broken.

[rpominov]

Thank you for the fix, @duailibe !