Proposal: tsc backed jsx conditional rendering rule

[pke]

Over at jsx-eslint/eslint-plugin-react#2073 we are discussing a rule that only the TSC could help with.
It would require to detect if a conditional rendering check for react JSX blocks of code is a true boolean value.

Do you think the JSX world and this eslint plugin could somehow be combined to create a rule (in a new package?) for this particular bad coding error (that will crash any react-native app)?

[bradzacher]

It seems like you just want strict-boolean-expressions to also check JSX expressions as if they were logical conditions?

[pke]

I think that would do it, yes.

[bradzacher]

happy to accept PR for a new option, say checkJsxLogicals which applies the rule's logic to a JSX expression (if it is a logical expression).

[pke]

I have written eslint rules before so I am somewhat familiar with the concept. Is there any JSX support yet in this plugin I could use as a starting point? I see there is already code in this plugin that deals with JSX. Could you point me to a rule/code fragment that could get me started to add this option?

[marhaupe]

I'm just chiming in to say that I'd be happy to test this once you've implemented this option.

[bradzacher]

Best option would be to play around in https://astexplorer.net/ to get a feel for the AST you're looking to target.

From there you can craft an ESLint selector as best you can to target that AST.

Then you need to work it into the rule.

If you want a live playground for inspecting the type information that TS provides - https://ts-ast-viewer.com/ is an amazing site.

[phaux]

strict-boolean-expressions already does that and I use it for this exact purpose. You just have to set allowNumber to false (it's true by default) and you get:

<div>
  {items.length && (
    // ^ Unexpected number value in conditional. An explicit zero/NaN check is required.
    <ul>
      {items.map(item => <li>{item}</li>)}
    </ul>
  )}
</div>

The only possible downside is that if you disable allowNumber then it's disallowed everywhere, not just in JSX, so you have to write e.g. if (items.length > 0) instead of just if (items.length) (which is fine for me).

[bradzacher]

that is true - it will "just work" with the right options.
I wonder if this is just a documentation thing, then?

We can add another section to the docs that say "if you want to strictly validate your JSX logical expressions do not output values, you should use this config"

[phaux]

@bradzacher Yep. Let's add a paragraph to allowNumber and allowString options in docs that says it's useful to set them to false in react projects. I can send a PR.

It's not a problem specific to JSX though. It applies everywhere where any value can be passed.
E.g. console.log(items.length && `There are ${items.length} items.`) would log the message about length or just "0".