jsx-no-leaked-render.js

/**
 * @fileoverview Prevent problematic leaked values from being rendered
 * @author Mario Beltrán
 */

'use strict';

const docsUrl = require('../util/docsUrl');
const report = require('../util/report');
const isParenthesized = require('../util/ast').isParenthesized;

//------------------------------------------------------------------------------
// Rule Definition
//------------------------------------------------------------------------------

const messages = {
  noPotentialLeakedRender: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
};

const CAST_STRATEGY = 'cast';
const TERNARY_STRATEGY = 'ternary';
const DEFAULT_VALID_STRATEGIES = [TERNARY_STRATEGY, CAST_STRATEGY];

/**
 * @type {import('eslint').Rule.RuleModule}
 */
module.exports = {
  meta: {
    docs: {
      description: 'Prevent 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,
                CAST_STRATEGY,
              ],
            },
            uniqueItems: true,
            default: DEFAULT_VALID_STRATEGIES,
          },
        },
        additionalProperties: false,
      },
    ],
  },

  create(context) {
    const config = context.options[0] || {};
    const validStrategies = config.validStrategies || DEFAULT_VALID_STRATEGIES;
    const fixStrategy = validStrategies[0];
    const areBothStrategiesValid = validStrategies.length === 2;

    function trimLeftNode(node) {
      // Remove double unary expression (boolean cast), so we avoid trimming valid negations
      if (node.type === 'UnaryExpression' && node.argument.type === 'UnaryExpression') {
        return trimLeftNode(node.argument.argument);
      }

      return node;
    }

    function ruleFixer(fixer, reportedNode, leftNode, rightNode) {
      const sourceCode = context.getSourceCode();
      const rightSideText = sourceCode.getText(rightNode);

      if (fixStrategy === CAST_STRATEGY) {
        let leftSideText = sourceCode.getText(leftNode);
        if (isParenthesized(context, leftNode)) {
          leftSideText = `(${leftSideText})`;
        }

        const shouldPrefixDoubleNegation = leftNode.type !== 'UnaryExpression';

        return fixer.replaceText(reportedNode, `${shouldPrefixDoubleNegation ? '!!' : ''}${leftSideText} && ${rightSideText}`);
      }

      if (fixStrategy === TERNARY_STRATEGY) {
        let leftSideText = sourceCode.getText(trimLeftNode(leftNode));
        if (isParenthesized(context, leftNode)) {
          leftSideText = `(${leftSideText})`;
        }
        return fixer.replaceText(reportedNode, `${leftSideText} ? ${rightSideText} : null`);
      }

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

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

        if (isCastStrategyValid && isCastValidLeftExpression) {
          return;
        }

        report(context, messages.noPotentialLeakedRender, 'noPotentialLeakedRender', {
          node,
          fix(fixer) {
            return ruleFixer(fixer, node, leftSide, node.right);
          },
        });
      },

      'JSXExpressionContainer > ConditionalExpression'(node) {
        const isTernaryStrategyValid = areBothStrategiesValid || fixStrategy === TERNARY_STRATEGY;
        if (isTernaryStrategyValid) {
          return;
        }

        report(context, messages.noPotentialLeakedRender, 'noPotentialLeakedRender', {
          node,
          fix(fixer) {
            return ruleFixer(fixer, node, node.test, node.consequent);
          },
        });
      },
    };
  },
};