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.
280 lines
8.7 KiB
280 lines
8.7 KiB
/** |
|
* @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), |
|
]; |
|
}, |
|
}); |
|
} |
|
}, |
|
}; |
|
}), |
|
};
|
|
|