Enforce curly braces for JSX props with React elements

[neutraali]

Hey there! I've dug around for a few days now, whenever I had a spare moment to dedicate to it, but I couldn't find a rule that would enforce curly braces for React elements as JSX props. I've tried using a combo of jsx-no-literals (which was mostly for strings) and curly-brace-presence but it didn't work (using --fix) for React element props. Here's some examples using jsx-curly-brace-presence with [1, "always"] as the value:

Initial input: <ExampleComponent text='Hello' component=<p>World!</p> />

Expected output: <ExampleComponent text={'Hello'} component={<p>World!</p>} />

Actual output: <ExampleComponent text={'Hello'} component=<p>World!</p> />

... The problem with not enclosing the JSX element props with curly braces is that it breaks certain parsers, for example the one esbuild happens to be using.

Libraries:

"babel-eslint": "10.1.0"
"eslint": "6.8.0"
"eslint-config-prettier": "6.10.0"
"eslint-config-recommended": "4.1.0"
"eslint-plugin-flowtype": "4.6.0"
"eslint-plugin-prettier": "3.1.2"
"eslint-plugin-react": "7.18.3"

Environment:

nodejs@16.13.0
npm@6.14.15

[ljharb]

It should break every parser - it’s simply invalid jsx to omit the curly braces, and there’s no eslint rules that operate on invalid syntax.

[ljharb]

You’re on eslint 6, which is quite old - have you tried eslint 8?

[neutraali]

Thanks for the tips, @ljharb! Will check it out once I'm back in the saddle.

[ljharb]

I'll close this for now, but will be happy to reopen if there's more to discuss.

[neutraali]

So, to recap, the JSX syntax actually does support passing in elements directly - That just isn't documented at all.

Apparently Babel, for example, has allowed this for quite some time now, but I guess that's just developers being developers.

[ljharb]

Wow, that’s horrific.

If it parses, we can handle it, but i think it should have its own rule, since nobody should ever be omitting these curly braces.

[ljharb]

I decided this is indeed the appropriate rule, and I've added an option in #3191.

@neutraali can you confirm that that PR meets your needs?

[neutraali]

@ljharb Lookin' good! 👍🏻