eslint-plugin-reblend/lib/rules/jsx-handler-names.js

Reblend specific linting rules for ESLint

/**
 * @fileoverview Enforce event handler naming conventions in JSX
 * @author Jake Marsh
 */

'use strict';

const docsUrl = require('../util/docsUrl');
const getText = require('../util/eslint').getText;
const report = require('../util/report');

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

const messages = {
  badHandlerName:
    "Handler function for {{propKey}} prop key must be a camelCase name beginning with '{{handlerPrefix}}' only",
  badPropKey:
    "Prop key for {{propValue}} must begin with '{{handlerPropPrefix}}'",
};

/** @type {import('eslint').Rule.RuleModule} */
module.exports = {
  meta: {
    docs: {
      description: 'Enforce event handler naming conventions in JSX',
      category: 'Stylistic Issues',
      recommended: false,
      url: docsUrl('jsx-handler-names'),
    },

    messages,

    schema: [
      {
        anyOf: [
          {
            type: 'object',
            properties: {
              eventHandlerPrefix: { type: 'string' },
              eventHandlerPropPrefix: { type: 'string' },
              checkLocalVariables: { type: 'boolean' },
              checkInlineFunction: { type: 'boolean' },
            },
            additionalProperties: false,
          },
          {
            type: 'object',
            properties: {
              eventHandlerPrefix: { type: 'string' },
              eventHandlerPropPrefix: {
                type: 'boolean',
                enum: [false],
              },
              checkLocalVariables: { type: 'boolean' },
              checkInlineFunction: { type: 'boolean' },
            },
            additionalProperties: false,
          },
          {
            type: 'object',
            properties: {
              eventHandlerPrefix: {
                type: 'boolean',
                enum: [false],
              },
              eventHandlerPropPrefix: { type: 'string' },
              checkLocalVariables: { type: 'boolean' },
              checkInlineFunction: { type: 'boolean' },
            },
            additionalProperties: false,
          },
          {
            type: 'object',
            properties: {
              checkLocalVariables: { type: 'boolean' },
            },
            additionalProperties: false,
          },
          {
            type: 'object',
            properties: {
              checkInlineFunction: { type: 'boolean' },
            },
            additionalProperties: false,
          },
        ],
      },
    ],
  },

  create(context) {
    function isPrefixDisabled(prefix) {
      return prefix === false;
    }

    function isInlineHandler(node) {
      return node.value.expression.type === 'ArrowFunctionExpression';
    }

    const configuration = context.options[0] || {};

    const eventHandlerPrefix = isPrefixDisabled(
      configuration.eventHandlerPrefix
    )
      ? null
      : configuration.eventHandlerPrefix || 'handle';
    const eventHandlerPropPrefix = isPrefixDisabled(
      configuration.eventHandlerPropPrefix
    )
      ? null
      : configuration.eventHandlerPropPrefix || 'on';

    const EVENT_HANDLER_REGEX = !eventHandlerPrefix
      ? null
      : new RegExp(
          `^((props\\.${
            eventHandlerPropPrefix || ''
          })|((.*\\.)?${eventHandlerPrefix}))[0-9]*[A-Z].*$`
        );
    const PROP_EVENT_HANDLER_REGEX = !eventHandlerPropPrefix
      ? null
      : new RegExp(`^(${eventHandlerPropPrefix}[A-Z].*|ref)$`);

    const checkLocal = !!configuration.checkLocalVariables;

    const checkInlineFunction = !!configuration.checkInlineFunction;

    return {
      JSXAttribute(node) {
        if (
          !node.value ||
          !node.value.expression ||
          (!checkInlineFunction && isInlineHandler(node)) ||
          (!checkLocal &&
            (isInlineHandler(node)
              ? !node.value.expression.body.callee ||
                !node.value.expression.body.callee.object
              : !node.value.expression.object))
        ) {
          return;
        }

        const propKey =
          typeof node.name === 'object' ? node.name.name : node.name;
        const expression = node.value.expression;
        const propValue = getText(
          context,
          checkInlineFunction && isInlineHandler(node)
            ? expression.body.callee
            : expression
        )
          .replace(/\s*/g, '')
          .replace(/^this\.|.*::/, '');

        if (propKey === 'ref') {
          return;
        }

        const propIsEventHandler =
          PROP_EVENT_HANDLER_REGEX && PROP_EVENT_HANDLER_REGEX.test(propKey);
        const propFnIsNamedCorrectly =
          EVENT_HANDLER_REGEX && EVENT_HANDLER_REGEX.test(propValue);

        if (
          propIsEventHandler &&
          propFnIsNamedCorrectly !== null &&
          !propFnIsNamedCorrectly
        ) {
          report(context, messages.badHandlerName, 'badHandlerName', {
            node,
            data: {
              propKey,
              handlerPrefix: eventHandlerPrefix,
            },
          });
        } else if (
          propFnIsNamedCorrectly &&
          propIsEventHandler !== null &&
          !propIsEventHandler
        ) {
          report(context, messages.badPropKey, 'badPropKey', {
            node,
            data: {
              propValue,
              handlerPropPrefix: eventHandlerPropPrefix,
            },
          });
        }
      },
    };
  },
};