jsx-curly-braces: make an exception for a single space

[andrejcremoznik]

Lint Name

jsx-curly-braces

Code Snippet

// 2 inline elements in single line can be separated by a space which will leave a text node in dom
<foo /> <bar />
// But the same 2 elements put on new lines will have the text node stripped
<foo />
<bar />
// To separate them in the same way as before, a space has to be forced like so
<foo />
{' '}
<bar />

Expected Result

{' '} doesn't produce a linter warning

Actual Result

Found curly braces around JSX child literal

Additional Info

When you enforce a line length, {' '} becomes a pretty common case concatenating long strings with JSX elements. The most common case is probably having a word in a sentence wrapped in a link where the value of href often causes the link to stand on its own line and then you have to force spaces around.

Version

deno 2.2.2 (stable, release, x86_64-unknown-linux-gnu)
v8 13.4.114.9-rusty
typescript 5.7.3

[lionel-rowe]

This conflicts with deno fmt:

<div>foo<span>{' '}</span>bar</div>
//             ^^^ Found curly braces around JSX child literal
//                 Remove curly braces around JSX child deno-lint(jsx-curly-braces)

"foo bar"

Quick Fix... > Remove curly braces around JSX child

<div>foo<span> </span>bar</div>

"foo bar"

deno fmt

<div>foo<span></span>bar</div>

"foobar"

[KnorpelSenf]

Similar exceptions need to be done for several spaces as well as for strings that contain leading or trailing spaces. This rule caused dozens of false positives in our relatively small project, mainly for {" "}, {" "}, {" :"}, {" ("}, {") "}, and so on.