first commit

node_modules/eslint-plugin-react/lib/rules/jsx-no-leaked-render.js

@@ -0,0 +1,204 @@
+/**
+ * @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);
+          },
+        });
+      },
+    };
+  },
+};