jsx-eslint / eslint-plugin-react

React-specific linting rules for ESLint
MIT License
8.86k stars 2.75k forks source link

[Fix] `jsx-boolean-value`: `assumeUndefinedIsFalse` with `never` must not allow explicit `true` value #3757

Closed 6uliver closed 1 month ago

6uliver commented 1 month ago

assumeUndefinedIsFalse should not affect the behaviour of props with true values when we have the "never" setting

ljharb commented 1 month ago

Can you elaborate a bit more?

6uliver commented 1 month ago

Can you elaborate a bit more?

Yes, sure. I think the new test cases are self-explaining but I can give more examples here.

So if I turn on the rule with the config "never" my expectation is that I don't need to set boolean values explicitly. For true values it's very straightforward since JSX syntax makes foo to true for <App foo /> but for false values it can be tricky since the absent of a prop does not mean false but undefined so <App /> will receiveundefined instead of false for the prop foo. Because of this it's a common pattern in React that we fallback this kind of undefined boolean props to false. To support this pattern assumeUndefinedIsFalse option has been introduced here: #3234 #3675 But I think it has a bug since if I turn this flag on <App /> is working and valid and foo will be undefined in the received props which can have a fallback but <App foo /> will be invalid and will cause an ESLint error despite we used the "never" config.

Concrete examples, you can see problematic valid and invalid code in the second column highlighted with bold:

Rule config ['never', { assumeUndefinedIsFalse: true }] ['never', { assumeUndefinedIsFalse: false }]
Expected valid <App foo /> and <App /> <App foo /> and <App foo={false}/>
Expected invalid <App foo={true} /> and <App foo={false} /> <App foo={true} /> and <App />
Actual valid <App foo={true} /> and <App /> <App foo /> and <App foo={false}/>
Actual invalid <App foo /> and <App foo={false} /> <App foo={true} /> and <App />