186 lines
5.3 KiB
JavaScript
186 lines
5.3 KiB
JavaScript
/**
|
|
* @fileoverview Prevents usage of Function.prototype.bind and arrow functions
|
|
* in React component props.
|
|
* @author Daniel Lo Nigro <dan.cx>
|
|
* @author Jacky Ho
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const propName = require('jsx-ast-utils/propName');
|
|
const Components = require('../util/Components');
|
|
const docsUrl = require('../util/docsUrl');
|
|
const jsxUtil = require('../util/jsx');
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// Rule Definition
|
|
// -----------------------------------------------------------------------------
|
|
|
|
const violationMessageStore = {
|
|
bindCall: 'JSX props should not use .bind()',
|
|
arrowFunc: 'JSX props should not use arrow functions',
|
|
bindExpression: 'JSX props should not use ::',
|
|
func: 'JSX props should not use functions'
|
|
};
|
|
|
|
module.exports = {
|
|
meta: {
|
|
docs: {
|
|
description: 'Prevents usage of Function.prototype.bind and arrow functions in React component props',
|
|
category: 'Best Practices',
|
|
recommended: false,
|
|
url: docsUrl('jsx-no-bind')
|
|
},
|
|
|
|
schema: [{
|
|
type: 'object',
|
|
properties: {
|
|
allowArrowFunctions: {
|
|
default: false,
|
|
type: 'boolean'
|
|
},
|
|
allowBind: {
|
|
default: false,
|
|
type: 'boolean'
|
|
},
|
|
allowFunctions: {
|
|
default: false,
|
|
type: 'boolean'
|
|
},
|
|
ignoreRefs: {
|
|
default: false,
|
|
type: 'boolean'
|
|
},
|
|
ignoreDOMComponents: {
|
|
default: false,
|
|
type: 'boolean'
|
|
}
|
|
},
|
|
additionalProperties: false
|
|
}]
|
|
},
|
|
|
|
create: Components.detect((context) => {
|
|
const configuration = context.options[0] || {};
|
|
|
|
// Keep track of all the variable names pointing to a bind call,
|
|
// bind expression or an arrow function in different block statements
|
|
const blockVariableNameSets = {};
|
|
|
|
function setBlockVariableNameSet(blockStart) {
|
|
blockVariableNameSets[blockStart] = {
|
|
arrowFunc: new Set(),
|
|
bindCall: new Set(),
|
|
bindExpression: new Set(),
|
|
func: new Set()
|
|
};
|
|
}
|
|
|
|
function getNodeViolationType(node) {
|
|
const nodeType = node.type;
|
|
|
|
if (
|
|
!configuration.allowBind &&
|
|
nodeType === 'CallExpression' &&
|
|
node.callee.type === 'MemberExpression' &&
|
|
node.callee.property.type === 'Identifier' &&
|
|
node.callee.property.name === 'bind'
|
|
) {
|
|
return 'bindCall';
|
|
}
|
|
if (nodeType === 'ConditionalExpression') {
|
|
return getNodeViolationType(node.test) ||
|
|
getNodeViolationType(node.consequent) ||
|
|
getNodeViolationType(node.alternate);
|
|
}
|
|
if (!configuration.allowArrowFunctions && nodeType === 'ArrowFunctionExpression') {
|
|
return 'arrowFunc';
|
|
}
|
|
if (!configuration.allowFunctions && nodeType === 'FunctionExpression') {
|
|
return 'func';
|
|
}
|
|
if (!configuration.allowBind && nodeType === 'BindExpression') {
|
|
return 'bindExpression';
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function addVariableNameToSet(violationType, variableName, blockStart) {
|
|
blockVariableNameSets[blockStart][violationType].add(variableName);
|
|
}
|
|
|
|
function getBlockStatementAncestors(node) {
|
|
return context.getAncestors(node).reverse().filter(
|
|
ancestor => ancestor.type === 'BlockStatement'
|
|
);
|
|
}
|
|
|
|
function reportVariableViolation(node, name, blockStart) {
|
|
const blockSets = blockVariableNameSets[blockStart];
|
|
const violationTypes = Object.keys(blockSets);
|
|
|
|
return violationTypes.find((type) => {
|
|
if (blockSets[type].has(name)) {
|
|
context.report({node, message: violationMessageStore[type]});
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
}
|
|
|
|
function findVariableViolation(node, name) {
|
|
getBlockStatementAncestors(node).find(
|
|
block => reportVariableViolation(node, name, block.start)
|
|
);
|
|
}
|
|
|
|
return {
|
|
BlockStatement(node) {
|
|
setBlockVariableNameSet(node.start);
|
|
},
|
|
|
|
VariableDeclarator(node) {
|
|
if (!node.init) {
|
|
return;
|
|
}
|
|
const blockAncestors = getBlockStatementAncestors(node);
|
|
const variableViolationType = getNodeViolationType(node.init);
|
|
|
|
if (
|
|
blockAncestors.length > 0 &&
|
|
variableViolationType &&
|
|
node.parent.kind === 'const' // only support const right now
|
|
) {
|
|
addVariableNameToSet(
|
|
variableViolationType, node.id.name, blockAncestors[0].start
|
|
);
|
|
}
|
|
},
|
|
|
|
JSXAttribute(node) {
|
|
const isRef = configuration.ignoreRefs && propName(node) === 'ref';
|
|
if (isRef || !node.value || !node.value.expression) {
|
|
return;
|
|
}
|
|
const isDOMComponent = jsxUtil.isDOMComponent(node.parent);
|
|
if (configuration.ignoreDOMComponents && isDOMComponent) {
|
|
return;
|
|
}
|
|
const valueNode = node.value.expression;
|
|
const valueNodeType = valueNode.type;
|
|
const nodeViolationType = getNodeViolationType(valueNode);
|
|
|
|
if (valueNodeType === 'Identifier') {
|
|
findVariableViolation(node, valueNode.name);
|
|
} else if (nodeViolationType) {
|
|
context.report({
|
|
node, message: violationMessageStore[nodeViolationType]
|
|
});
|
|
}
|
|
}
|
|
};
|
|
})
|
|
};
|