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.
172 lines
5.1 KiB
172 lines
5.1 KiB
2 years ago
|
/**
|
||
|
* @fileoverview Enforce event handler naming conventions in JSX
|
||
|
* @author Jake Marsh
|
||
|
*/
|
||
|
|
||
|
'use strict';
|
||
|
|
||
|
const docsUrl = require('../util/docsUrl');
|
||
|
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}}\'',
|
||
|
};
|
||
|
|
||
|
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 = context.getSourceCode()
|
||
|
.getText(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,
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
},
|
||
|
};
|
||
|
},
|
||
|
};
|