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.
281 lines
8.7 KiB
281 lines
8.7 KiB
2 years ago
|
/**
|
||
|
* @fileoverview Enforce consistent usage of destructuring assignment of props, state, and context.
|
||
|
*/
|
||
|
|
||
|
'use strict';
|
||
|
|
||
|
const Components = require('../util/Components');
|
||
|
const docsUrl = require('../util/docsUrl');
|
||
|
const isAssignmentLHS = require('../util/ast').isAssignmentLHS;
|
||
|
const report = require('../util/report');
|
||
|
|
||
|
const DEFAULT_OPTION = 'always';
|
||
|
|
||
|
function createSFCParams() {
|
||
|
const queue = [];
|
||
|
|
||
|
return {
|
||
|
push(params) {
|
||
|
queue.unshift(params);
|
||
|
},
|
||
|
pop() {
|
||
|
queue.shift();
|
||
|
},
|
||
|
propsName() {
|
||
|
const found = queue.find((params) => {
|
||
|
const props = params[0];
|
||
|
return props && !props.destructuring && props.name;
|
||
|
});
|
||
|
return found && found[0] && found[0].name;
|
||
|
},
|
||
|
contextName() {
|
||
|
const found = queue.find((params) => {
|
||
|
const context = params[1];
|
||
|
return context && !context.destructuring && context.name;
|
||
|
});
|
||
|
return found && found[1] && found[1].name;
|
||
|
},
|
||
|
};
|
||
|
}
|
||
|
|
||
|
function evalParams(params) {
|
||
|
return params.map((param) => ({
|
||
|
destructuring: param.type === 'ObjectPattern',
|
||
|
name: param.type === 'Identifier' && param.name,
|
||
|
}));
|
||
|
}
|
||
|
|
||
|
const messages = {
|
||
|
noDestructPropsInSFCArg: 'Must never use destructuring props assignment in SFC argument',
|
||
|
noDestructContextInSFCArg: 'Must never use destructuring context assignment in SFC argument',
|
||
|
noDestructAssignment: 'Must never use destructuring {{type}} assignment',
|
||
|
useDestructAssignment: 'Must use destructuring {{type}} assignment',
|
||
|
destructureInSignature: 'Must destructure props in the function signature.',
|
||
|
};
|
||
|
|
||
|
module.exports = {
|
||
|
meta: {
|
||
|
docs: {
|
||
|
description: 'Enforce consistent usage of destructuring assignment of props, state, and context',
|
||
|
category: 'Stylistic Issues',
|
||
|
recommended: false,
|
||
|
url: docsUrl('destructuring-assignment'),
|
||
|
},
|
||
|
fixable: 'code',
|
||
|
messages,
|
||
|
|
||
|
schema: [{
|
||
|
type: 'string',
|
||
|
enum: [
|
||
|
'always',
|
||
|
'never',
|
||
|
],
|
||
|
}, {
|
||
|
type: 'object',
|
||
|
properties: {
|
||
|
ignoreClassFields: {
|
||
|
type: 'boolean',
|
||
|
},
|
||
|
destructureInSignature: {
|
||
|
type: 'string',
|
||
|
enum: [
|
||
|
'always',
|
||
|
'ignore',
|
||
|
],
|
||
|
},
|
||
|
},
|
||
|
additionalProperties: false,
|
||
|
}],
|
||
|
},
|
||
|
|
||
|
create: Components.detect((context, components, utils) => {
|
||
|
const configuration = context.options[0] || DEFAULT_OPTION;
|
||
|
const ignoreClassFields = (context.options[1] && (context.options[1].ignoreClassFields === true)) || false;
|
||
|
const destructureInSignature = (context.options[1] && context.options[1].destructureInSignature) || 'ignore';
|
||
|
const sfcParams = createSFCParams();
|
||
|
|
||
|
/**
|
||
|
* @param {ASTNode} node We expect either an ArrowFunctionExpression,
|
||
|
* FunctionDeclaration, or FunctionExpression
|
||
|
*/
|
||
|
function handleStatelessComponent(node) {
|
||
|
const params = evalParams(node.params);
|
||
|
|
||
|
const SFCComponent = components.get(context.getScope(node).block);
|
||
|
if (!SFCComponent) {
|
||
|
return;
|
||
|
}
|
||
|
sfcParams.push(params);
|
||
|
|
||
|
if (params[0] && params[0].destructuring && components.get(node) && configuration === 'never') {
|
||
|
report(context, messages.noDestructPropsInSFCArg, 'noDestructPropsInSFCArg', {
|
||
|
node,
|
||
|
});
|
||
|
} else if (params[1] && params[1].destructuring && components.get(node) && configuration === 'never') {
|
||
|
report(context, messages.noDestructContextInSFCArg, 'noDestructContextInSFCArg', {
|
||
|
node,
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function handleStatelessComponentExit(node) {
|
||
|
const SFCComponent = components.get(context.getScope(node).block);
|
||
|
if (SFCComponent) {
|
||
|
sfcParams.pop();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function handleSFCUsage(node) {
|
||
|
const propsName = sfcParams.propsName();
|
||
|
const contextName = sfcParams.contextName();
|
||
|
// props.aProp || context.aProp
|
||
|
const isPropUsed = (
|
||
|
(propsName && node.object.name === propsName)
|
||
|
|| (contextName && node.object.name === contextName)
|
||
|
)
|
||
|
&& !isAssignmentLHS(node);
|
||
|
if (isPropUsed && configuration === 'always') {
|
||
|
report(context, messages.useDestructAssignment, 'useDestructAssignment', {
|
||
|
node,
|
||
|
data: {
|
||
|
type: node.object.name,
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function isInClassProperty(node) {
|
||
|
let curNode = node.parent;
|
||
|
while (curNode) {
|
||
|
if (curNode.type === 'ClassProperty' || curNode.type === 'PropertyDefinition') {
|
||
|
return true;
|
||
|
}
|
||
|
curNode = curNode.parent;
|
||
|
}
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
function handleClassUsage(node) {
|
||
|
// this.props.Aprop || this.context.aProp || this.state.aState
|
||
|
const isPropUsed = (
|
||
|
node.object.type === 'MemberExpression' && node.object.object.type === 'ThisExpression'
|
||
|
&& (node.object.property.name === 'props' || node.object.property.name === 'context' || node.object.property.name === 'state')
|
||
|
&& !isAssignmentLHS(node)
|
||
|
);
|
||
|
|
||
|
if (
|
||
|
isPropUsed && configuration === 'always'
|
||
|
&& !(ignoreClassFields && isInClassProperty(node))
|
||
|
) {
|
||
|
report(context, messages.useDestructAssignment, 'useDestructAssignment', {
|
||
|
node,
|
||
|
data: {
|
||
|
type: node.object.property.name,
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return {
|
||
|
|
||
|
FunctionDeclaration: handleStatelessComponent,
|
||
|
|
||
|
ArrowFunctionExpression: handleStatelessComponent,
|
||
|
|
||
|
FunctionExpression: handleStatelessComponent,
|
||
|
|
||
|
'FunctionDeclaration:exit': handleStatelessComponentExit,
|
||
|
|
||
|
'ArrowFunctionExpression:exit': handleStatelessComponentExit,
|
||
|
|
||
|
'FunctionExpression:exit': handleStatelessComponentExit,
|
||
|
|
||
|
MemberExpression(node) {
|
||
|
let scope = context.getScope(node);
|
||
|
let SFCComponent = components.get(scope.block);
|
||
|
while (!SFCComponent && scope.upper && scope.upper !== scope) {
|
||
|
SFCComponent = components.get(scope.upper.block);
|
||
|
scope = scope.upper;
|
||
|
}
|
||
|
if (SFCComponent) {
|
||
|
handleSFCUsage(node);
|
||
|
}
|
||
|
|
||
|
const classComponent = utils.getParentComponent(node);
|
||
|
if (classComponent) {
|
||
|
handleClassUsage(node);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
VariableDeclarator(node) {
|
||
|
const classComponent = utils.getParentComponent(node);
|
||
|
const SFCComponent = components.get(context.getScope(node).block);
|
||
|
|
||
|
const destructuring = (node.init && node.id && node.id.type === 'ObjectPattern');
|
||
|
// let {foo} = props;
|
||
|
const destructuringSFC = destructuring && (node.init.name === 'props' || node.init.name === 'context');
|
||
|
// let {foo} = this.props;
|
||
|
const destructuringClass = destructuring && node.init.object && node.init.object.type === 'ThisExpression' && (
|
||
|
node.init.property.name === 'props' || node.init.property.name === 'context' || node.init.property.name === 'state'
|
||
|
);
|
||
|
|
||
|
if (SFCComponent && destructuringSFC && configuration === 'never') {
|
||
|
report(context, messages.noDestructAssignment, 'noDestructAssignment', {
|
||
|
node,
|
||
|
data: {
|
||
|
type: node.init.name,
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
|
||
|
if (
|
||
|
classComponent && destructuringClass && configuration === 'never'
|
||
|
&& !(ignoreClassFields && (node.parent.type === 'ClassProperty' || node.parent.type === 'PropertyDefinition'))
|
||
|
) {
|
||
|
report(context, messages.noDestructAssignment, 'noDestructAssignment', {
|
||
|
node,
|
||
|
data: {
|
||
|
type: node.init.property.name,
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
|
||
|
if (
|
||
|
SFCComponent
|
||
|
&& destructuringSFC
|
||
|
&& configuration === 'always'
|
||
|
&& destructureInSignature === 'always'
|
||
|
&& node.init.name === 'props'
|
||
|
) {
|
||
|
const scopeSetProps = context.getScope().set.get('props');
|
||
|
const propsRefs = scopeSetProps && scopeSetProps.references;
|
||
|
if (!propsRefs) {
|
||
|
return;
|
||
|
}
|
||
|
// Skip if props is used elsewhere
|
||
|
if (propsRefs.length > 1) {
|
||
|
return;
|
||
|
}
|
||
|
report(context, messages.destructureInSignature, 'destructureInSignature', {
|
||
|
node,
|
||
|
fix(fixer) {
|
||
|
const param = SFCComponent.node.params[0];
|
||
|
if (!param) {
|
||
|
return;
|
||
|
}
|
||
|
const replaceRange = [
|
||
|
param.range[0],
|
||
|
param.typeAnnotation ? param.typeAnnotation.range[0] : param.range[1],
|
||
|
];
|
||
|
return [
|
||
|
fixer.replaceTextRange(replaceRange, context.getSourceCode().getText(node.id)),
|
||
|
fixer.remove(node.parent),
|
||
|
];
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
},
|
||
|
};
|
||
|
}),
|
||
|
};
|