You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
204 lines
7.4 KiB
204 lines
7.4 KiB
/** |
|
* @fileoverview Prevent problematic leaked values from being rendered |
|
* @author Mario Beltrán |
|
*/ |
|
|
|
'use strict'; |
|
|
|
const find = require('es-iterator-helpers/Iterator.prototype.find'); |
|
const from = require('es-iterator-helpers/Iterator.from'); |
|
|
|
const getText = require('../util/eslint').getText; |
|
const docsUrl = require('../util/docsUrl'); |
|
const report = require('../util/report'); |
|
const variableUtil = require('../util/variable'); |
|
const testReactVersion = require('../util/version').testReactVersion; |
|
const isParenthesized = require('../util/ast').isParenthesized; |
|
|
|
//------------------------------------------------------------------------------ |
|
// Rule Definition |
|
//------------------------------------------------------------------------------ |
|
|
|
const messages = { |
|
noPotentialLeakedRender: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes', |
|
}; |
|
|
|
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']; |
|
const TERNARY_INVALID_ALTERNATE_VALUES = [undefined, null, false]; |
|
|
|
function trimLeftNode(node) { |
|
// 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); |
|
} |
|
|
|
return node; |
|
} |
|
|
|
function getIsCoerceValidNestedLogicalExpression(node) { |
|
if (node.type === 'LogicalExpression') { |
|
return getIsCoerceValidNestedLogicalExpression(node.left) && getIsCoerceValidNestedLogicalExpression(node.right); |
|
} |
|
|
|
return COERCE_VALID_LEFT_SIDE_EXPRESSIONS.some((validExpression) => validExpression === node.type); |
|
} |
|
|
|
function extractExpressionBetweenLogicalAnds(node) { |
|
if (node.type !== 'LogicalExpression') return [node]; |
|
if (node.operator !== '&&') return [node]; |
|
return [].concat( |
|
extractExpressionBetweenLogicalAnds(node.left), |
|
extractExpressionBetweenLogicalAnds(node.right) |
|
); |
|
} |
|
|
|
function ruleFixer(context, fixStrategy, fixer, reportedNode, leftNode, rightNode) { |
|
const rightSideText = getText(context, rightNode); |
|
|
|
if (fixStrategy === COERCE_STRATEGY) { |
|
const expressions = extractExpressionBetweenLogicalAnds(leftNode); |
|
const newText = expressions.map((node) => { |
|
let nodeText = getText(context, node); |
|
if (isParenthesized(context, node)) { |
|
nodeText = `(${nodeText})`; |
|
} |
|
if (node.parent && node.parent.type === 'ConditionalExpression' && node.parent.consequent.value === false) { |
|
return `${getIsCoerceValidNestedLogicalExpression(node) ? '' : '!'}${nodeText}`; |
|
} |
|
return `${getIsCoerceValidNestedLogicalExpression(node) ? '' : '!!'}${nodeText}`; |
|
}).join(' && '); |
|
|
|
if (rightNode.parent && rightNode.parent.type === 'ConditionalExpression' && rightNode.parent.consequent.value === false) { |
|
const consequentVal = rightNode.parent.consequent.raw || rightNode.parent.consequent.name; |
|
const alternateVal = rightNode.parent.alternate.raw || rightNode.parent.alternate.name; |
|
if (rightNode.parent.test && rightNode.parent.test.type === 'LogicalExpression') { |
|
return fixer.replaceText(reportedNode, `${newText} ? ${consequentVal} : ${alternateVal}`); |
|
} |
|
return fixer.replaceText(reportedNode, `${newText} && ${alternateVal}`); |
|
} |
|
|
|
if (rightNode.type === 'ConditionalExpression' || rightNode.type === 'LogicalExpression') { |
|
return fixer.replaceText(reportedNode, `${newText} && (${rightSideText})`); |
|
} |
|
if (rightNode.type === 'JSXElement') { |
|
const rightSideTextLines = rightSideText.split('\n'); |
|
if (rightSideTextLines.length > 1) { |
|
const rightSideTextLastLine = rightSideTextLines[rightSideTextLines.length - 1]; |
|
const indentSpacesStart = ' '.repeat(rightSideTextLastLine.search(/\S/)); |
|
const indentSpacesClose = ' '.repeat(rightSideTextLastLine.search(/\S/) - 2); |
|
return fixer.replaceText(reportedNode, `${newText} && (\n${indentSpacesStart}${rightSideText}\n${indentSpacesClose})`); |
|
} |
|
} |
|
if (rightNode.type === 'Literal') { |
|
return null; |
|
} |
|
return fixer.replaceText(reportedNode, `${newText} && ${rightSideText}`); |
|
} |
|
|
|
if (fixStrategy === TERNARY_STRATEGY) { |
|
let leftSideText = getText(context, trimLeftNode(leftNode)); |
|
if (isParenthesized(context, leftNode)) { |
|
leftSideText = `(${leftSideText})`; |
|
} |
|
return fixer.replaceText(reportedNode, `${leftSideText} ? ${rightSideText} : null`); |
|
} |
|
|
|
throw new TypeError('Invalid value for "validStrategies" option'); |
|
} |
|
|
|
/** @type {import('eslint').Rule.RuleModule} */ |
|
module.exports = { |
|
meta: { |
|
docs: { |
|
description: 'Disallow problematic leaked values from being rendered', |
|
category: 'Possible Errors', |
|
recommended: false, |
|
url: docsUrl('jsx-no-leaked-render'), |
|
}, |
|
|
|
messages, |
|
|
|
fixable: 'code', |
|
schema: [ |
|
{ |
|
type: 'object', |
|
properties: { |
|
validStrategies: { |
|
type: 'array', |
|
items: { |
|
enum: [ |
|
TERNARY_STRATEGY, |
|
COERCE_STRATEGY, |
|
], |
|
}, |
|
uniqueItems: true, |
|
default: DEFAULT_VALID_STRATEGIES, |
|
}, |
|
}, |
|
additionalProperties: false, |
|
}, |
|
], |
|
}, |
|
|
|
create(context) { |
|
const config = context.options[0] || {}; |
|
const validStrategies = new Set(config.validStrategies || DEFAULT_VALID_STRATEGIES); |
|
const fixStrategy = find(from(validStrategies), () => true); |
|
|
|
return { |
|
'JSXExpressionContainer > LogicalExpression[operator="&&"]'(node) { |
|
const leftSide = node.left; |
|
|
|
const isCoerceValidLeftSide = COERCE_VALID_LEFT_SIDE_EXPRESSIONS |
|
.some((validExpression) => validExpression === leftSide.type); |
|
if (validStrategies.has(COERCE_STRATEGY)) { |
|
if (isCoerceValidLeftSide || getIsCoerceValidNestedLogicalExpression(leftSide)) { |
|
return; |
|
} |
|
const leftSideVar = variableUtil.getVariableFromContext(context, node, leftSide.name); |
|
if (leftSideVar) { |
|
const leftSideValue = leftSideVar.defs |
|
&& leftSideVar.defs.length |
|
&& leftSideVar.defs[0].node.init |
|
&& leftSideVar.defs[0].node.init.value; |
|
if (typeof leftSideValue === 'boolean') { |
|
return; |
|
} |
|
} |
|
} |
|
|
|
if (testReactVersion(context, '>= 18') && leftSide.type === 'Literal' && leftSide.value === '') { |
|
return; |
|
} |
|
report(context, messages.noPotentialLeakedRender, 'noPotentialLeakedRender', { |
|
node, |
|
fix(fixer) { |
|
return ruleFixer(context, fixStrategy, fixer, node, leftSide, node.right); |
|
}, |
|
}); |
|
}, |
|
|
|
'JSXExpressionContainer > ConditionalExpression'(node) { |
|
if (validStrategies.has(TERNARY_STRATEGY)) { |
|
return; |
|
} |
|
|
|
const isValidTernaryAlternate = TERNARY_INVALID_ALTERNATE_VALUES.indexOf(node.alternate.value) === -1; |
|
const isJSXElementAlternate = node.alternate.type === 'JSXElement'; |
|
if (isValidTernaryAlternate || isJSXElementAlternate) { |
|
return; |
|
} |
|
|
|
report(context, messages.noPotentialLeakedRender, 'noPotentialLeakedRender', { |
|
node, |
|
fix(fixer) { |
|
return ruleFixer(context, fixStrategy, fixer, node, node.test, node.consequent); |
|
}, |
|
}); |
|
}, |
|
}; |
|
}, |
|
};
|
|
|