Skip to content

Commit

Permalink
apply more suggestions from the PR
Browse files Browse the repository at this point in the history
  • Loading branch information
Belco90 committed Apr 26, 2022
1 parent e04af42 commit eda90f0
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 8 deletions.
4 changes: 2 additions & 2 deletions docs/rules/jsx-no-leaked-render.md
Expand Up @@ -30,7 +30,7 @@ const Example = () => {
```

This can be avoided by:
- casting the condition to bool: `{!!someValue && <Something />}`
- coercing the conditional to a boolean: `{!!someValue && <Something />}`
- transforming the binary expression into a ternary expression which returns `null` for falsy values: `{someValue ? <Something /> : null}`

This rule is autofixable, check the Options section to read more about the different strategies available.
Expand Down Expand Up @@ -142,7 +142,7 @@ const Component = ({ elements }) => {
The supported options are:

### `validStrategies`
An array containing `"coerce"`, `"ternary"`, or both (default: `["ternary", "coerce"]`) - Decide which strategies are considered valid to prevent leaked renders (at least 1 is required). The "coerce" option will cast to boolean the condition of the JSX expression. The "ternary" option transforms the binary expression into a ternary expression returning `null` for falsy values. The first option from the array will be used as autofix, so the order of the values matter.
An array containing `"coerce"`, `"ternary"`, or both (default: `["ternary", "coerce"]`) - Decide which strategies are considered valid to prevent leaked renders (at least 1 is required). The "coerce" option will transform the conditional of the JSX expression to a boolean. The "ternary" option transforms the binary expression into a ternary expression returning `null` for falsy values. The first option from the array will be used as autofix, so the order of the values matter.

It can be set like:
```json5
Expand Down
12 changes: 6 additions & 6 deletions lib/rules/jsx-no-leaked-render.js
Expand Up @@ -20,6 +20,7 @@ const messages = {
const COERCE_STRATEGY = 'coerce';
const TERNARY_STRATEGY = 'ternary';
const DEFAULT_VALID_STRATEGIES = [TERNARY_STRATEGY, COERCE_STRATEGY];
const COERCE_VALID_LEFT_SIDE_EXPRESSIONS = ['UnaryExpression', 'BinaryExpression', 'CallExpression'];

/**
* @type {import('eslint').Rule.RuleModule}
Expand Down Expand Up @@ -64,7 +65,7 @@ module.exports = {
const areBothStrategiesValid = validStrategies.length === 2;

function trimLeftNode(node) {
// Remove double unary expression (boolean cast), so we avoid trimming valid negations
// Remove double unary expression (boolean coercion), so we avoid trimming valid negations
if (node.type === 'UnaryExpression' && node.argument.type === 'UnaryExpression') {
return trimLeftNode(node.argument.argument);
}
Expand Down Expand Up @@ -95,19 +96,18 @@ module.exports = {
return fixer.replaceText(reportedNode, `${leftSideText} ? ${rightSideText} : null`);
}

throw new Error('Invalid value for "fixStrategy" option');
throw new Error('Invalid value for "validStrategies" option');
}

return {
'JSXExpressionContainer > LogicalExpression[operator="&&"]'(node) {
const leftSide = node.left;
const CAST_VALID_LEFT_SIDE_EXPRESSIONS = ['UnaryExpression', 'BinaryExpression', 'CallExpression'];
const isCastStrategyValid = areBothStrategiesValid || fixStrategy === COERCE_STRATEGY;
const isCastValidLeftExpression = CAST_VALID_LEFT_SIDE_EXPRESSIONS.some(
const isCoerceStrategyValid = areBothStrategiesValid || fixStrategy === COERCE_STRATEGY;
const isCoerceValidLeftExpression = COERCE_VALID_LEFT_SIDE_EXPRESSIONS.some(
(validExpression) => validExpression === leftSide.type
);

if (isCastStrategyValid && isCastValidLeftExpression) {
if (isCoerceStrategyValid && isCoerceValidLeftExpression) {
return;
}

Expand Down

0 comments on commit eda90f0

Please sign in to comment.