Update
This commit is contained in:
Alex
@ -6,10 +6,43 @@
|
||||
*/
|
||||
|
||||
/* eslint-disable no-for-of-loops/no-for-of-loops */
|
||||
import type { Rule, Scope } from 'eslint';
|
||||
import type {
|
||||
FunctionDeclaration,
|
||||
CallExpression,
|
||||
Expression,
|
||||
Super,
|
||||
Node,
|
||||
ArrowFunctionExpression,
|
||||
FunctionExpression,
|
||||
SpreadElement,
|
||||
Identifier,
|
||||
VariableDeclarator,
|
||||
MemberExpression,
|
||||
ChainExpression,
|
||||
Pattern,
|
||||
OptionalMemberExpression,
|
||||
} from 'estree';
|
||||
import type { FromSchema } from 'json-schema-to-ts';
|
||||
import { __EXPERIMENTAL__ } from './index';
|
||||
|
||||
'use strict';
|
||||
const schema = {
|
||||
type: 'object',
|
||||
additionalProperties: false,
|
||||
enableDangerousAutofixThisMayCauseInfiniteLoops: false,
|
||||
properties: {
|
||||
additionalHooks: {
|
||||
type: 'string',
|
||||
},
|
||||
enableDangerousAutofixThisMayCauseInfiniteLoops: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
} as const;
|
||||
|
||||
export default {
|
||||
type Config = FromSchema<typeof schema>;
|
||||
|
||||
const rule: Rule.RuleModule = {
|
||||
meta: {
|
||||
type: 'suggestion',
|
||||
docs: {
|
||||
@ -20,41 +53,24 @@ export default {
|
||||
},
|
||||
fixable: 'code',
|
||||
hasSuggestions: true,
|
||||
schema: [
|
||||
{
|
||||
type: 'object',
|
||||
additionalProperties: false,
|
||||
enableDangerousAutofixThisMayCauseInfiniteLoops: false,
|
||||
properties: {
|
||||
additionalHooks: {
|
||||
type: 'string',
|
||||
},
|
||||
enableDangerousAutofixThisMayCauseInfiniteLoops: {
|
||||
type: 'boolean',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
schema: [schema],
|
||||
},
|
||||
create(context) {
|
||||
create(context): Rule.RuleListener {
|
||||
const contextOptions = (context.options[0] || {}) as Config;
|
||||
// Parse the `additionalHooks` regex.
|
||||
const additionalHooks =
|
||||
context.options && context.options[0] && context.options[0].additionalHooks
|
||||
? new RegExp(context.options[0].additionalHooks)
|
||||
: undefined;
|
||||
const additionalHooks = contextOptions?.additionalHooks
|
||||
? new RegExp(context.options[0].additionalHooks)
|
||||
: undefined;
|
||||
|
||||
const enableDangerousAutofixThisMayCauseInfiniteLoops =
|
||||
(context.options &&
|
||||
context.options[0] &&
|
||||
context.options[0].enableDangerousAutofixThisMayCauseInfiniteLoops) ||
|
||||
false;
|
||||
contextOptions?.enableDangerousAutofixThisMayCauseInfiniteLoops || false;
|
||||
|
||||
const options = {
|
||||
additionalHooks,
|
||||
enableDangerousAutofixThisMayCauseInfiniteLoops,
|
||||
};
|
||||
|
||||
function reportProblem(problem) {
|
||||
function reportProblem(problem: Rule.ReportDescriptor): void {
|
||||
if (enableDangerousAutofixThisMayCauseInfiniteLoops) {
|
||||
// Used to enable legacy behavior. Dangerous.
|
||||
// Keep this as an option until major IDEs upgrade (including VSCode FB ESLint extension).
|
||||
@ -65,20 +81,23 @@ export default {
|
||||
context.report(problem);
|
||||
}
|
||||
|
||||
const scopeManager = context.getSourceCode().scopeManager;
|
||||
const scopeManager = context.sourceCode.scopeManager;
|
||||
|
||||
// Should be shared between visitors.
|
||||
const setStateCallSites = new WeakMap();
|
||||
const stateVariables = new WeakSet();
|
||||
const stableKnownValueCache = new WeakMap();
|
||||
const functionWithoutCapturedValueCache = new WeakMap();
|
||||
const setStateCallSites = new WeakMap<Expression, Pattern>();
|
||||
const stateVariables = new WeakSet<Identifier>();
|
||||
const stableKnownValueCache = new WeakMap<Scope.Variable, boolean>();
|
||||
const functionWithoutCapturedValueCache = new WeakMap<Scope.Variable, boolean>();
|
||||
const useEffectEventVariables = new WeakSet();
|
||||
function memoizeWithWeakMap(fn, map) {
|
||||
function memoizeWithWeakMap<T extends object, R>(
|
||||
fn: (v: T) => R,
|
||||
map: WeakMap<T, R>,
|
||||
): (arg: T) => R {
|
||||
return function (arg) {
|
||||
if (map.has(arg)) {
|
||||
// to verify cache hits:
|
||||
// console.log(arg.name)
|
||||
return map.get(arg);
|
||||
return map.get(arg)!;
|
||||
}
|
||||
const result = fn(arg);
|
||||
map.set(arg, result);
|
||||
@ -89,12 +108,12 @@ export default {
|
||||
* Visitor for both function expressions and arrow function expressions.
|
||||
*/
|
||||
function visitFunctionWithDependencies(
|
||||
node,
|
||||
declaredDependenciesNode,
|
||||
reactiveHook,
|
||||
reactiveHookName,
|
||||
isEffect,
|
||||
) {
|
||||
node: ArrowFunctionExpression | FunctionExpression | FunctionDeclaration,
|
||||
declaredDependenciesNode: SpreadElement | Expression,
|
||||
reactiveHook: Super | Expression,
|
||||
reactiveHookName: string,
|
||||
isEffect: boolean,
|
||||
): void {
|
||||
if (isEffect && node.async) {
|
||||
reportProblem({
|
||||
node: node,
|
||||
@ -114,7 +133,7 @@ export default {
|
||||
}
|
||||
|
||||
// Get the current scope.
|
||||
const scope = scopeManager.acquire(node);
|
||||
const scope = scopeManager.acquire(node)!;
|
||||
|
||||
// Find all our "pure scopes". On every re-render of a component these
|
||||
// pure scopes may have changes to the variables declared within. So all
|
||||
@ -124,8 +143,8 @@ export default {
|
||||
// According to the rules of React you can't read a mutable value in pure
|
||||
// scope. We can't enforce this in a lint so we trust that all variables
|
||||
// declared outside of pure scope are indeed frozen.
|
||||
const pureScopes = new Set();
|
||||
let componentScope = null;
|
||||
const pureScopes = new Set<Scope.Scope>();
|
||||
let componentScope: Scope.Scope;
|
||||
{
|
||||
let currentScope = scope.upper;
|
||||
while (currentScope) {
|
||||
@ -159,7 +178,7 @@ export default {
|
||||
// const onStuff = useEffectEvent(() => {})
|
||||
// ^^^ true for this reference
|
||||
// False for everything else.
|
||||
function isStableKnownHookValue(resolved) {
|
||||
function isStableKnownHookValue(resolved: Scope.Variable): boolean {
|
||||
if (!isArray(resolved.defs)) {
|
||||
return false;
|
||||
}
|
||||
@ -171,7 +190,7 @@ export default {
|
||||
if (def.node.type !== 'VariableDeclarator') {
|
||||
return false;
|
||||
}
|
||||
let init = def.node.init;
|
||||
let init = (def.node as VariableDeclarator).init;
|
||||
if (init == null) {
|
||||
return false;
|
||||
}
|
||||
@ -206,10 +225,11 @@ export default {
|
||||
if (init.type !== 'CallExpression') {
|
||||
return false;
|
||||
}
|
||||
let callee = init.callee;
|
||||
let callee: Node = init.callee;
|
||||
// Step into `= React.something` initializer.
|
||||
if (
|
||||
callee.type === 'MemberExpression' &&
|
||||
callee.object.type === 'Identifier' &&
|
||||
callee.object.name === 'React' &&
|
||||
callee.property != null &&
|
||||
!callee.computed
|
||||
@ -219,14 +239,14 @@ export default {
|
||||
if (callee.type !== 'Identifier') {
|
||||
return false;
|
||||
}
|
||||
const id = def.node.id;
|
||||
const id = (def.node as VariableDeclarator).id;
|
||||
const { name } = callee;
|
||||
if (name === 'useRef' && id.type === 'Identifier') {
|
||||
// useRef() return value is stable.
|
||||
return true;
|
||||
} else if (isUseEffectEventIdentifier(callee) && id.type === 'Identifier') {
|
||||
for (const ref of resolved.references) {
|
||||
if (ref !== id) {
|
||||
if (ref.identifier !== id) {
|
||||
useEffectEventVariables.add(ref.identifier);
|
||||
}
|
||||
}
|
||||
@ -251,7 +271,7 @@ export default {
|
||||
if (writeCount > 1) {
|
||||
return false;
|
||||
}
|
||||
setStateCallSites.set(references[i].identifier, id.elements[0]);
|
||||
setStateCallSites.set(references[i].identifier, id.elements[0]!);
|
||||
}
|
||||
}
|
||||
// Setter is stable.
|
||||
@ -286,7 +306,7 @@ export default {
|
||||
}
|
||||
|
||||
// Some are just functions that don't reference anything dynamic.
|
||||
function isFunctionWithoutCapturedValues(resolved) {
|
||||
function isFunctionWithoutCapturedValues(resolved: Scope.Variable): boolean {
|
||||
if (!isArray(resolved.defs)) {
|
||||
return false;
|
||||
}
|
||||
@ -353,32 +373,33 @@ export default {
|
||||
);
|
||||
|
||||
// These are usually mistaken. Collect them.
|
||||
const currentRefsInEffectCleanup = new Map();
|
||||
const currentRefsInEffectCleanup = new Map<
|
||||
string,
|
||||
{ reference: Scope.Reference; dependencyNode: Identifier }
|
||||
>();
|
||||
|
||||
// Is this reference inside a cleanup function for this effect node?
|
||||
// We can check by traversing scopes upwards from the reference, and checking
|
||||
// if the last "return () => " we encounter is located directly inside the effect.
|
||||
function isInsideEffectCleanup(reference) {
|
||||
let curScope = reference.from;
|
||||
function isInsideEffectCleanup(reference: Scope.Reference): boolean {
|
||||
let curScope: Scope.Scope = reference.from;
|
||||
let isInReturnedFunction = false;
|
||||
while (curScope.block !== node) {
|
||||
if (curScope.type === 'function') {
|
||||
isInReturnedFunction =
|
||||
curScope.block.parent != null &&
|
||||
curScope.block.parent.type === 'ReturnStatement';
|
||||
isInReturnedFunction = curScope.block.parent?.type === 'ReturnStatement';
|
||||
}
|
||||
curScope = curScope.upper;
|
||||
curScope = curScope.upper!;
|
||||
}
|
||||
return isInReturnedFunction;
|
||||
}
|
||||
|
||||
// Get dependencies from all our resolved references in pure scopes.
|
||||
// Key is dependency string, value is whether it's stable.
|
||||
const dependencies = new Map();
|
||||
const optionalChains = new Map();
|
||||
const dependencies = new Map<string, Dependencies>();
|
||||
const optionalChains = new Map<string, boolean>();
|
||||
gatherDependenciesRecursively(scope);
|
||||
|
||||
function gatherDependenciesRecursively(currentScope) {
|
||||
function gatherDependenciesRecursively(currentScope: Scope.Scope): void {
|
||||
for (const reference of currentScope.references) {
|
||||
// If this reference is not resolved or it is not declared in a pure
|
||||
// scope then we don't care about this reference.
|
||||
@ -391,9 +412,9 @@ export default {
|
||||
|
||||
// Narrow the scope of a dependency if it is, say, a member expression.
|
||||
// Then normalize the narrowed dependency.
|
||||
const referenceNode = fastFindReferenceWithParent(node, reference.identifier);
|
||||
const dependencyNode = getDependency(referenceNode);
|
||||
const dependency = analyzePropertyChain(dependencyNode, optionalChains);
|
||||
const referenceNode = fastFindReferenceWithParent(node, reference.identifier)!;
|
||||
const dependencyNode: Node = getDependency(referenceNode);
|
||||
const dependency: string = analyzePropertyChain(dependencyNode, optionalChains);
|
||||
|
||||
// Accessing ref.current inside effect cleanup is bad.
|
||||
if (
|
||||
@ -401,11 +422,11 @@ export default {
|
||||
isEffect &&
|
||||
// ... and this look like accessing .current...
|
||||
dependencyNode.type === 'Identifier' &&
|
||||
(dependencyNode.parent.type === 'MemberExpression' ||
|
||||
dependencyNode.parent.type === 'OptionalMemberExpression') &&
|
||||
!dependencyNode.parent.computed &&
|
||||
dependencyNode.parent.property.type === 'Identifier' &&
|
||||
dependencyNode.parent.property.name === 'current' &&
|
||||
(dependencyNode.parent!.type === 'MemberExpression' ||
|
||||
dependencyNode.parent!.type === 'OptionalMemberExpression') &&
|
||||
!dependencyNode.parent!.computed &&
|
||||
dependencyNode.parent!.property.type === 'Identifier' &&
|
||||
dependencyNode.parent!.property.name === 'current' &&
|
||||
// ...in a cleanup function or below...
|
||||
isInsideEffectCleanup(reference)
|
||||
) {
|
||||
@ -416,8 +437,8 @@ export default {
|
||||
}
|
||||
|
||||
if (
|
||||
dependencyNode.parent.type === 'TSTypeQuery' ||
|
||||
dependencyNode.parent.type === 'TSTypeReference'
|
||||
dependencyNode.parent!.type === 'TSTypeQuery' ||
|
||||
dependencyNode.parent!.type === 'TSTypeReference'
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
@ -438,7 +459,7 @@ export default {
|
||||
// Add the dependency to a map so we can make sure it is referenced
|
||||
// again in our dependencies array. Remember whether it's stable.
|
||||
if (!dependencies.has(dependency)) {
|
||||
const resolved = reference.resolved;
|
||||
const resolved: Scope.Variable = reference.resolved;
|
||||
const isStable =
|
||||
memoizedIsStableKnownHookValue(resolved) ||
|
||||
memoizedIsFunctionWithoutCapturedValues(resolved);
|
||||
@ -447,7 +468,7 @@ export default {
|
||||
references: [reference],
|
||||
});
|
||||
} else {
|
||||
dependencies.get(dependency).references.push(reference);
|
||||
dependencies.get(dependency)!.references.push(reference);
|
||||
}
|
||||
}
|
||||
|
||||
@ -458,7 +479,7 @@ export default {
|
||||
|
||||
// Warn about accessing .current in cleanup effects.
|
||||
currentRefsInEffectCleanup.forEach(({ reference, dependencyNode }, dependency) => {
|
||||
const references = reference.resolved.references;
|
||||
const references: Scope.Reference[] = reference.resolved!.references;
|
||||
// Is React managing this ref or us?
|
||||
// Let's see if we can find a .current assignment.
|
||||
let foundCurrentAssignment = false;
|
||||
@ -474,8 +495,8 @@ export default {
|
||||
parent.property.type === 'Identifier' &&
|
||||
parent.property.name === 'current' &&
|
||||
// ref.current = <something>
|
||||
parent.parent.type === 'AssignmentExpression' &&
|
||||
parent.parent.left === parent
|
||||
parent.parent!.type === 'AssignmentExpression' &&
|
||||
parent.parent!.left === parent
|
||||
) {
|
||||
foundCurrentAssignment = true;
|
||||
break;
|
||||
@ -486,7 +507,7 @@ export default {
|
||||
return;
|
||||
}
|
||||
reportProblem({
|
||||
node: dependencyNode.parent.property,
|
||||
node: (dependencyNode.parent as MemberExpression).property,
|
||||
message:
|
||||
`The ref value '${dependency}.current' will likely have ` +
|
||||
`changed by the time this effect cleanup function runs. If ` +
|
||||
@ -498,8 +519,8 @@ export default {
|
||||
|
||||
// Warn about assigning to variables in the outer scope.
|
||||
// Those are usually bugs.
|
||||
const staleAssignments = new Set();
|
||||
function reportStaleAssignment(writeExpr, key) {
|
||||
const staleAssignments = new Set<string>();
|
||||
function reportStaleAssignment(writeExpr: Node, key: string): void {
|
||||
if (staleAssignments.has(key)) {
|
||||
return;
|
||||
}
|
||||
@ -517,7 +538,7 @@ export default {
|
||||
}
|
||||
|
||||
// Remember which deps are stable and report bad usage first.
|
||||
const stableDependencies = new Set();
|
||||
const stableDependencies = new Set<string>();
|
||||
dependencies.forEach(({ isStable, references }, key) => {
|
||||
if (isStable) {
|
||||
stableDependencies.add(key);
|
||||
@ -537,8 +558,8 @@ export default {
|
||||
if (!declaredDependenciesNode) {
|
||||
// Check if there are any top-level setState() calls.
|
||||
// Those tend to lead to infinite loops.
|
||||
let setStateInsideEffectWithoutDeps = null;
|
||||
dependencies.forEach(({ isStable, references }, key) => {
|
||||
let setStateInsideEffectWithoutDeps: string | null = null;
|
||||
dependencies.forEach(({ references }, key) => {
|
||||
if (setStateInsideEffectWithoutDeps) {
|
||||
return;
|
||||
}
|
||||
@ -548,14 +569,14 @@ export default {
|
||||
}
|
||||
|
||||
const id = reference.identifier;
|
||||
const isSetState = setStateCallSites.has(id);
|
||||
const isSetState: boolean = setStateCallSites.has(id);
|
||||
if (!isSetState) {
|
||||
return;
|
||||
}
|
||||
|
||||
let fnScope = reference.from;
|
||||
let fnScope: Scope.Scope = reference.from;
|
||||
while (fnScope.type !== 'function') {
|
||||
fnScope = fnScope.upper;
|
||||
fnScope = fnScope.upper!;
|
||||
}
|
||||
const isDirectlyInsideEffect = fnScope.block === node;
|
||||
if (isDirectlyInsideEffect) {
|
||||
@ -564,6 +585,7 @@ export default {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (setStateInsideEffectWithoutDeps) {
|
||||
const { suggestedDependencies } = collectRecommendations({
|
||||
dependencies,
|
||||
@ -596,8 +618,8 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
const declaredDependencies = [];
|
||||
const externalDependencies = new Set();
|
||||
const declaredDependencies: DeclaredDependency[] = [];
|
||||
const externalDependencies = new Set<string>();
|
||||
if (declaredDependenciesNode.type !== 'ArrayExpression') {
|
||||
// If the declared dependencies are not an array expression then we
|
||||
// can't verify that the user provided the correct dependencies. Tell
|
||||
@ -640,7 +662,7 @@ export default {
|
||||
declaredDependencyNode,
|
||||
)}\``,
|
||||
fix(fixer) {
|
||||
return fixer.removeRange(declaredDependencyNode.range);
|
||||
return fixer.removeRange(declaredDependencyNode.range!);
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -648,13 +670,13 @@ export default {
|
||||
}
|
||||
// Try to normalize the declared dependency. If we can't then an error
|
||||
// will be thrown. We will catch that error and report an error.
|
||||
let declaredDependency;
|
||||
let declaredDependency: string;
|
||||
try {
|
||||
declaredDependency = analyzePropertyChain(declaredDependencyNode, null);
|
||||
} catch (error) {
|
||||
if (/Unsupported node type/.test(error.message)) {
|
||||
if (declaredDependencyNode.type === 'Literal') {
|
||||
if (dependencies.has(declaredDependencyNode.value)) {
|
||||
if (dependencies.has(declaredDependencyNode.value as any)) {
|
||||
reportProblem({
|
||||
node: declaredDependencyNode,
|
||||
message:
|
||||
@ -686,13 +708,15 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
let maybeID = declaredDependencyNode;
|
||||
let maybeID: Expression | Super = declaredDependencyNode;
|
||||
while (
|
||||
maybeID.type === 'MemberExpression' ||
|
||||
maybeID.type === 'OptionalMemberExpression' ||
|
||||
maybeID.type === 'ChainExpression'
|
||||
) {
|
||||
maybeID = maybeID.object || maybeID.expression.object;
|
||||
maybeID =
|
||||
(maybeID as MemberExpression | OptionalMemberExpression).object ||
|
||||
((maybeID as ChainExpression).expression as MemberExpression).object;
|
||||
}
|
||||
const isDeclaredInComponent = !componentScope.through.some(
|
||||
ref => ref.identifier === maybeID,
|
||||
@ -758,10 +782,12 @@ export default {
|
||||
|
||||
const message =
|
||||
`The '${construction.name.name}' ${depType} ${causation} the dependencies of ` +
|
||||
`${reactiveHookName} Hook (at line ${declaredDependenciesNode.loc.start.line}) ` +
|
||||
`${reactiveHookName} Hook (at line ${
|
||||
declaredDependenciesNode.loc!.start.line
|
||||
}) ` +
|
||||
`change on every render. ${advice}`;
|
||||
|
||||
let suggest;
|
||||
let suggest: Rule.SuggestionReportDescriptor[] | undefined;
|
||||
// Only handle the simple case of variable assignments.
|
||||
// Wrapping function declarations can mess up hoisting.
|
||||
if (
|
||||
@ -782,17 +808,18 @@ export default {
|
||||
: ['useCallback(', ')'];
|
||||
return [
|
||||
// TODO: also add an import?
|
||||
fixer.insertTextBefore(construction.node.init, before),
|
||||
fixer.insertTextBefore(construction.node.init!, before),
|
||||
// TODO: ideally we'd gather deps here but it would require
|
||||
// restructuring the rule code. This will cause a new lint
|
||||
// error to appear immediately for useCallback. Note we're
|
||||
// not adding [] because would that changes semantics.
|
||||
fixer.insertTextAfter(construction.node.init, after),
|
||||
fixer.insertTextAfter(construction.node.init!, after),
|
||||
];
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// TODO: What if the function needs to change on every render anyway?
|
||||
// Should we suggest removing effect deps as an appropriate fix too?
|
||||
reportProblem({
|
||||
@ -811,7 +838,7 @@ export default {
|
||||
// in some extra deduplication. We can't do this
|
||||
// for effects though because those have legit
|
||||
// use cases for over-specifying deps.
|
||||
if (!isEffect && missingDependencies.size > 0) {
|
||||
if (!isEffect && missingDependencies.size) {
|
||||
suggestedDeps = collectRecommendations({
|
||||
dependencies,
|
||||
declaredDependencies: [], // Pretend we don't know
|
||||
@ -822,7 +849,7 @@ export default {
|
||||
}
|
||||
|
||||
// Alphabetize the suggestions, but only if deps were already alphabetized.
|
||||
function areDeclaredDepsAlphabetized() {
|
||||
function areDeclaredDepsAlphabetized(): boolean {
|
||||
if (declaredDependencies.length === 0) {
|
||||
return true;
|
||||
}
|
||||
@ -830,6 +857,7 @@ export default {
|
||||
const sortedDeclaredDepKeys = declaredDepKeys.slice().sort();
|
||||
return declaredDepKeys.join(',') === sortedDeclaredDepKeys.join(',');
|
||||
}
|
||||
|
||||
if (areDeclaredDepsAlphabetized()) {
|
||||
suggestedDeps.sort();
|
||||
}
|
||||
@ -838,7 +866,7 @@ export default {
|
||||
// This function is the last step before printing a dependency, so now is a good time to
|
||||
// check whether any members in our path are always used as optional-only. In that case,
|
||||
// we will use ?. instead of . to concatenate those parts of the path.
|
||||
function formatDependency(path) {
|
||||
function formatDependency(path: string): string {
|
||||
const members = path.split('.');
|
||||
let finalPath = '';
|
||||
for (let i = 0; i < members.length; i++) {
|
||||
@ -852,7 +880,12 @@ export default {
|
||||
return finalPath;
|
||||
}
|
||||
|
||||
function getWarningMessage(deps, singlePrefix, label, fixVerb) {
|
||||
function getWarningMessage(
|
||||
deps: Set<string>,
|
||||
singlePrefix: string,
|
||||
label: string,
|
||||
fixVerb: string,
|
||||
): string | null {
|
||||
if (deps.size === 0) {
|
||||
return null;
|
||||
}
|
||||
@ -875,7 +908,7 @@ export default {
|
||||
|
||||
let extraWarning = '';
|
||||
if (unnecessaryDependencies.size > 0) {
|
||||
let badRef = null;
|
||||
let badRef: string | null = null;
|
||||
Array.from(unnecessaryDependencies.keys()).forEach(key => {
|
||||
if (badRef !== null) {
|
||||
return;
|
||||
@ -908,7 +941,7 @@ export default {
|
||||
if (propDep == null) {
|
||||
return;
|
||||
}
|
||||
const refs = propDep.references;
|
||||
const refs: Scope.Reference[] = propDep.references;
|
||||
if (!Array.isArray(refs)) {
|
||||
return;
|
||||
}
|
||||
@ -942,17 +975,17 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
if (!extraWarning && missingDependencies.size > 0) {
|
||||
if (!extraWarning && missingDependencies.size) {
|
||||
// See if the user is trying to avoid specifying a callable prop.
|
||||
// This usually means they're unaware of useCallback.
|
||||
let missingCallbackDep = null;
|
||||
let missingCallbackDep: string | null = null;
|
||||
missingDependencies.forEach(missingDep => {
|
||||
if (missingCallbackDep) {
|
||||
return;
|
||||
}
|
||||
// Is this a variable from top scope?
|
||||
const topScopeRef = componentScope.set.get(missingDep);
|
||||
const usedDep = dependencies.get(missingDep);
|
||||
const usedDep = dependencies.get(missingDep)!;
|
||||
if (usedDep.references[0].resolved !== topScopeRef) {
|
||||
return;
|
||||
}
|
||||
@ -963,9 +996,9 @@ export default {
|
||||
}
|
||||
// Was it called in at least one case? Then it's a function.
|
||||
let isFunctionCall = false;
|
||||
let id;
|
||||
let id: Identifier;
|
||||
for (let i = 0; i < usedDep.references.length; i++) {
|
||||
id = usedDep.references[i].identifier;
|
||||
id = usedDep.references[i].identifier as Identifier;
|
||||
if (
|
||||
id != null &&
|
||||
id.parent != null &&
|
||||
@ -994,37 +1027,41 @@ export default {
|
||||
}
|
||||
|
||||
if (!extraWarning && missingDependencies.size > 0) {
|
||||
let setStateRecommendation = null;
|
||||
missingDependencies.forEach(missingDep => {
|
||||
let setStateRecommendation: {
|
||||
missingDep: string;
|
||||
setter: string;
|
||||
form: 'updater' | 'inlineReducer' | 'reducer';
|
||||
} | null = null;
|
||||
for (const missingDep of missingDependencies) {
|
||||
if (setStateRecommendation !== null) {
|
||||
return;
|
||||
continue;
|
||||
}
|
||||
const usedDep = dependencies.get(missingDep);
|
||||
const usedDep = dependencies.get(missingDep)!;
|
||||
const references = usedDep.references;
|
||||
let id;
|
||||
let maybeCall;
|
||||
let id: Identifier;
|
||||
let maybeCall: Node | null;
|
||||
for (let i = 0; i < references.length; i++) {
|
||||
id = references[i].identifier;
|
||||
maybeCall = id.parent;
|
||||
id = references[i].identifier as Identifier;
|
||||
maybeCall = id.parent!;
|
||||
// Try to see if we have setState(someExpr(missingDep)).
|
||||
while (maybeCall != null && maybeCall !== componentScope.block) {
|
||||
if (maybeCall.type === 'CallExpression') {
|
||||
const correspondingStateVariable = setStateCallSites.get(
|
||||
maybeCall.callee,
|
||||
maybeCall.callee as Expression,
|
||||
);
|
||||
if (correspondingStateVariable != null) {
|
||||
if (correspondingStateVariable.name === missingDep) {
|
||||
if ((correspondingStateVariable as Identifier).name === missingDep) {
|
||||
// setCount(count + 1)
|
||||
setStateRecommendation = {
|
||||
missingDep,
|
||||
setter: maybeCall.callee.name,
|
||||
setter: (maybeCall.callee as Identifier).name,
|
||||
form: 'updater',
|
||||
};
|
||||
} else if (stateVariables.has(id)) {
|
||||
// setCount(count + increment)
|
||||
setStateRecommendation = {
|
||||
missingDep,
|
||||
setter: maybeCall.callee.name,
|
||||
setter: (maybeCall.callee as Identifier).name,
|
||||
form: 'reducer',
|
||||
};
|
||||
} else {
|
||||
@ -1037,7 +1074,7 @@ export default {
|
||||
if (def != null && def.type === 'Parameter') {
|
||||
setStateRecommendation = {
|
||||
missingDep,
|
||||
setter: maybeCall.callee.name,
|
||||
setter: (maybeCall.callee as Identifier).name,
|
||||
form: 'inlineReducer',
|
||||
};
|
||||
}
|
||||
@ -1046,13 +1083,14 @@ export default {
|
||||
break;
|
||||
}
|
||||
}
|
||||
maybeCall = maybeCall.parent;
|
||||
maybeCall = maybeCall.parent!;
|
||||
}
|
||||
if (setStateRecommendation !== null) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (setStateRecommendation !== null) {
|
||||
switch (setStateRecommendation.form) {
|
||||
case 'reducer':
|
||||
@ -1110,15 +1148,16 @@ export default {
|
||||
});
|
||||
}
|
||||
|
||||
function visitCallExpression(node) {
|
||||
function visitCallExpression(node: CallExpression): void {
|
||||
const callbackIndex = getReactiveHookCallbackIndex(node.callee, options);
|
||||
if (callbackIndex === -1) {
|
||||
// Not a React Hook call that needs deps.
|
||||
return;
|
||||
}
|
||||
const callback = node.arguments[callbackIndex];
|
||||
const reactiveHook = node.callee;
|
||||
const reactiveHookName = getNodeWithoutReactNamespace(reactiveHook).name;
|
||||
const reactiveHook = node.callee as Identifier | MemberExpression;
|
||||
const reactiveHookName = (getNodeWithoutReactNamespace(reactiveHook) as Identifier)
|
||||
.name;
|
||||
const declaredDependenciesNode = node.arguments[callbackIndex + 1];
|
||||
const isEffect = /Effect($|[^a-z])/g.test(reactiveHookName);
|
||||
|
||||
@ -1172,8 +1211,8 @@ export default {
|
||||
// The function passed as a callback is not written inline.
|
||||
// But perhaps it's in the dependencies array?
|
||||
if (
|
||||
declaredDependenciesNode.elements &&
|
||||
declaredDependenciesNode.elements.some(
|
||||
declaredDependenciesNode.type === 'ArrayExpression' &&
|
||||
declaredDependenciesNode.elements?.some(
|
||||
el => el && el.type === 'Identifier' && el.name === callback.name,
|
||||
)
|
||||
) {
|
||||
@ -1266,6 +1305,27 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
interface Dependencies {
|
||||
isStable: boolean;
|
||||
references: Scope.Reference[];
|
||||
}
|
||||
|
||||
interface DeclaredDependency {
|
||||
key: string;
|
||||
node: Expression;
|
||||
}
|
||||
|
||||
interface DepTree {
|
||||
/** True if used in code */
|
||||
isUsed: boolean;
|
||||
/** True if specified in deps */
|
||||
isSatisfiedRecursively: boolean;
|
||||
/** True if something deeper is used by code */
|
||||
isSubtreeUsed: boolean;
|
||||
/** Nodes for properties */
|
||||
children: Map<string, DepTree>;
|
||||
}
|
||||
|
||||
// The meat of the logic.
|
||||
function collectRecommendations({
|
||||
dependencies,
|
||||
@ -1273,7 +1333,18 @@ function collectRecommendations({
|
||||
stableDependencies,
|
||||
externalDependencies,
|
||||
isEffect,
|
||||
}) {
|
||||
}: {
|
||||
dependencies: Map<string, Dependencies>;
|
||||
declaredDependencies: DeclaredDependency[];
|
||||
stableDependencies: Set<string>;
|
||||
externalDependencies: Set<string>;
|
||||
isEffect: boolean;
|
||||
}): {
|
||||
suggestedDependencies: string[];
|
||||
unnecessaryDependencies: Set<string>;
|
||||
duplicateDependencies: Set<string>;
|
||||
missingDependencies: Set<string>;
|
||||
} {
|
||||
// Our primary data structure.
|
||||
// It is a logical representation of property chains:
|
||||
// `props` -> `props.foo` -> `props.foo.bar` -> `props.foo.bar.baz`
|
||||
@ -1284,12 +1355,13 @@ function collectRecommendations({
|
||||
// and the nodes that were *declared* as deps. Then we will
|
||||
// traverse it to learn which deps are missing or unnecessary.
|
||||
const depTree = createDepTree();
|
||||
function createDepTree() {
|
||||
|
||||
function createDepTree(): DepTree {
|
||||
return {
|
||||
isUsed: false, // True if used in code
|
||||
isSatisfiedRecursively: false, // True if specified in deps
|
||||
isSubtreeUsed: false, // True if something deeper is used by code
|
||||
children: new Map(), // Nodes for properties
|
||||
isUsed: false,
|
||||
isSatisfiedRecursively: false,
|
||||
isSubtreeUsed: false,
|
||||
children: new Map<string, never>(),
|
||||
};
|
||||
}
|
||||
|
||||
@ -1315,7 +1387,7 @@ function collectRecommendations({
|
||||
});
|
||||
|
||||
// Tree manipulation helpers.
|
||||
function getOrCreateNodeByPath(rootNode, path) {
|
||||
function getOrCreateNodeByPath(rootNode: DepTree, path: string): DepTree {
|
||||
const keys = path.split('.');
|
||||
let node = rootNode;
|
||||
for (const key of keys) {
|
||||
@ -1328,7 +1400,12 @@ function collectRecommendations({
|
||||
}
|
||||
return node;
|
||||
}
|
||||
function markAllParentsByPath(rootNode, path, fn) {
|
||||
|
||||
function markAllParentsByPath(
|
||||
rootNode: DepTree,
|
||||
path: string,
|
||||
fn: (depTree: DepTree) => void,
|
||||
): void {
|
||||
const keys = path.split('.');
|
||||
let node = rootNode;
|
||||
for (const key of keys) {
|
||||
@ -1342,10 +1419,15 @@ function collectRecommendations({
|
||||
}
|
||||
|
||||
// Now we can learn which dependencies are missing or necessary.
|
||||
const missingDependencies = new Set();
|
||||
const satisfyingDependencies = new Set();
|
||||
const missingDependencies = new Set<string>();
|
||||
const satisfyingDependencies = new Set<string>();
|
||||
scanTreeRecursively(depTree, missingDependencies, satisfyingDependencies, key => key);
|
||||
function scanTreeRecursively(node, missingPaths, satisfyingPaths, keyToPath) {
|
||||
function scanTreeRecursively(
|
||||
node: DepTree,
|
||||
missingPaths: Set<string>,
|
||||
satisfyingPaths: Set<string>,
|
||||
keyToPath: (key: string) => string,
|
||||
): void {
|
||||
node.children.forEach((child, key) => {
|
||||
const path = keyToPath(key);
|
||||
if (child.isSatisfiedRecursively) {
|
||||
@ -1375,13 +1457,13 @@ function collectRecommendations({
|
||||
}
|
||||
|
||||
// Collect suggestions in the order they were originally specified.
|
||||
const suggestedDependencies = [];
|
||||
const unnecessaryDependencies = new Set();
|
||||
const duplicateDependencies = new Set();
|
||||
const suggestedDependencies: string[] = [];
|
||||
const unnecessaryDependencies = new Set<string>();
|
||||
const duplicateDependencies = new Set<string>();
|
||||
declaredDependencies.forEach(({ key }) => {
|
||||
// Does this declared dep satisfy a real need?
|
||||
if (satisfyingDependencies.has(key)) {
|
||||
if (suggestedDependencies.indexOf(key) === -1) {
|
||||
if (!suggestedDependencies.includes(key)) {
|
||||
// Good one.
|
||||
suggestedDependencies.push(key);
|
||||
} else {
|
||||
@ -1419,7 +1501,7 @@ function collectRecommendations({
|
||||
|
||||
// If the node will result in constructing a referentially unique value, return
|
||||
// its human readable type name, else return null.
|
||||
function getConstructionExpressionType(node) {
|
||||
function getConstructionExpressionType(node: Node) {
|
||||
switch (node.type) {
|
||||
case 'ObjectExpression':
|
||||
return 'object';
|
||||
@ -1477,6 +1559,11 @@ function scanForConstructions({
|
||||
declaredDependenciesNode,
|
||||
componentScope,
|
||||
scope,
|
||||
}: {
|
||||
declaredDependencies: DeclaredDependency[];
|
||||
declaredDependenciesNode: Node;
|
||||
componentScope: Scope.Scope;
|
||||
scope: Scope.Scope;
|
||||
}) {
|
||||
const constructions = declaredDependencies
|
||||
.map(({ key }) => {
|
||||
@ -1502,23 +1589,23 @@ function scanForConstructions({
|
||||
) {
|
||||
const constantExpressionType = getConstructionExpressionType(node.node.init);
|
||||
if (constantExpressionType != null) {
|
||||
return [ref, constantExpressionType];
|
||||
return [ref, constantExpressionType] as const;
|
||||
}
|
||||
}
|
||||
// function handleChange() {}
|
||||
if (node.type === 'FunctionName' && node.node.type === 'FunctionDeclaration') {
|
||||
return [ref, 'function'];
|
||||
return [ref, 'function'] as const;
|
||||
}
|
||||
|
||||
// class Foo {}
|
||||
if (node.type === 'ClassName' && node.node.type === 'ClassDeclaration') {
|
||||
return [ref, 'class'];
|
||||
return [ref, 'class'] as const;
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
function isUsedOutsideOfHook(ref) {
|
||||
function isUsedOutsideOfHook(ref: Scope.Variable): boolean {
|
||||
let foundWriteExpr = false;
|
||||
for (let i = 0; i < ref.references.length; i++) {
|
||||
const reference = ref.references[i];
|
||||
@ -1534,7 +1621,7 @@ function scanForConstructions({
|
||||
}
|
||||
let currentScope = reference.from;
|
||||
while (currentScope !== scope && currentScope != null) {
|
||||
currentScope = currentScope.upper;
|
||||
currentScope = currentScope.upper!;
|
||||
}
|
||||
if (currentScope !== scope) {
|
||||
// This reference is outside the Hook callback.
|
||||
@ -1561,21 +1648,22 @@ function scanForConstructions({
|
||||
* props.foo.(bar) => (props).foo.bar
|
||||
* props.foo.bar.(baz) => (props).foo.bar.baz
|
||||
*/
|
||||
function getDependency(node) {
|
||||
function getDependency(node: Node): Node {
|
||||
const parent = node.parent!;
|
||||
if (
|
||||
(node.parent.type === 'MemberExpression' ||
|
||||
node.parent.type === 'OptionalMemberExpression') &&
|
||||
node.parent.object === node &&
|
||||
node.parent.property.name !== 'current' &&
|
||||
!node.parent.computed &&
|
||||
(parent.type === 'MemberExpression' || parent.type === 'OptionalMemberExpression') &&
|
||||
parent.object === node &&
|
||||
parent.property.type === 'Identifier' &&
|
||||
parent.property.name !== 'current' &&
|
||||
!parent.computed &&
|
||||
!(
|
||||
node.parent.parent != null &&
|
||||
(node.parent.parent.type === 'CallExpression' ||
|
||||
node.parent.parent.type === 'OptionalCallExpression') &&
|
||||
node.parent.parent.callee === node.parent
|
||||
parent.parent != null &&
|
||||
(parent.parent.type === 'CallExpression' ||
|
||||
parent.parent.type === 'OptionalCallExpression') &&
|
||||
parent.parent.callee === parent
|
||||
)
|
||||
) {
|
||||
return getDependency(node.parent);
|
||||
return getDependency(parent);
|
||||
} else if (
|
||||
// Note: we don't check OptionalMemberExpression because it can't be LHS.
|
||||
node.type === 'MemberExpression' &&
|
||||
@ -1595,9 +1683,13 @@ function getDependency(node) {
|
||||
* It just means there is an optional member somewhere inside.
|
||||
* This particular node might still represent a required member, so check .optional field.
|
||||
*/
|
||||
function markNode(node, optionalChains, result) {
|
||||
function markNode(
|
||||
node: Node,
|
||||
optionalChains: Map<string, boolean> | null,
|
||||
result: string,
|
||||
): void {
|
||||
if (optionalChains) {
|
||||
if (node.optional) {
|
||||
if ((node as OptionalMemberExpression).optional) {
|
||||
// We only want to consider it optional if *all* usages were optional.
|
||||
if (!optionalChains.has(result)) {
|
||||
// Mark as (maybe) optional. If there's a required usage, this will be overridden.
|
||||
@ -1617,7 +1709,10 @@ function markNode(node, optionalChains, result) {
|
||||
* foo.bar(.)baz -> 'foo.bar.baz'
|
||||
* Otherwise throw.
|
||||
*/
|
||||
function analyzePropertyChain(node, optionalChains) {
|
||||
function analyzePropertyChain(
|
||||
node: Node,
|
||||
optionalChains: Map<string, boolean> | null,
|
||||
): string {
|
||||
if (node.type === 'Identifier' || node.type === 'JSXIdentifier') {
|
||||
const result = node.name;
|
||||
if (optionalChains) {
|
||||
@ -1654,7 +1749,7 @@ function analyzePropertyChain(node, optionalChains) {
|
||||
}
|
||||
}
|
||||
|
||||
function getNodeWithoutReactNamespace(node, options) {
|
||||
function getNodeWithoutReactNamespace(node: Identifier | MemberExpression) {
|
||||
if (
|
||||
node.type === 'MemberExpression' &&
|
||||
node.object.type === 'Identifier' &&
|
||||
@ -1672,7 +1767,13 @@ function getNodeWithoutReactNamespace(node, options) {
|
||||
// 0 for useEffect/useMemo/useCallback(fn).
|
||||
// 1 for useImperativeHandle(ref, fn).
|
||||
// For additionally configured Hooks, assume that they're like useEffect (0).
|
||||
function getReactiveHookCallbackIndex(calleeNode, options) {
|
||||
function getReactiveHookCallbackIndex(
|
||||
calleeNode: Expression | Super,
|
||||
options: {
|
||||
additionalHooks?: RegExp;
|
||||
enableDangerousAutofixThisMayCauseInfiniteLoops: boolean;
|
||||
},
|
||||
): 0 | 1 | -1 {
|
||||
const node = getNodeWithoutReactNamespace(calleeNode);
|
||||
if (node.type !== 'Identifier') {
|
||||
return -1;
|
||||
@ -1718,12 +1819,12 @@ function getReactiveHookCallbackIndex(calleeNode, options) {
|
||||
* - optimized by only searching nodes with a range surrounding our target node
|
||||
* - agnostic to AST node types, it looks for `{ type: string, ... }`
|
||||
*/
|
||||
function fastFindReferenceWithParent(start, target) {
|
||||
function fastFindReferenceWithParent(start: Node, target: Node): Node | null {
|
||||
const queue = [start];
|
||||
let item = null;
|
||||
let item: Node;
|
||||
|
||||
while (queue.length) {
|
||||
item = queue.shift();
|
||||
item = queue.shift()!;
|
||||
|
||||
if (isSameIdentifier(item, target)) {
|
||||
return item;
|
||||
@ -1754,7 +1855,7 @@ function fastFindReferenceWithParent(start, target) {
|
||||
return null;
|
||||
}
|
||||
|
||||
function joinEnglish(arr) {
|
||||
function joinEnglish(arr: string[]): string {
|
||||
let s = '';
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
s += arr[i];
|
||||
@ -1769,7 +1870,7 @@ function joinEnglish(arr) {
|
||||
return s;
|
||||
}
|
||||
|
||||
function isNodeLike(val) {
|
||||
function isNodeLike(val: any): boolean {
|
||||
return (
|
||||
typeof val === 'object' &&
|
||||
val !== null &&
|
||||
@ -1778,23 +1879,25 @@ function isNodeLike(val) {
|
||||
);
|
||||
}
|
||||
|
||||
function isSameIdentifier(a, b) {
|
||||
function isSameIdentifier(a: Node, b: Node): boolean {
|
||||
return (
|
||||
(a.type === 'Identifier' || a.type === 'JSXIdentifier') &&
|
||||
a.type === b.type &&
|
||||
a.name === b.name &&
|
||||
a.range[0] === b.range[0] &&
|
||||
a.range[1] === b.range[1]
|
||||
a.range![0] === b.range![0] &&
|
||||
a.range![1] === b.range![1]
|
||||
);
|
||||
}
|
||||
|
||||
function isAncestorNodeOf(a, b) {
|
||||
return a.range[0] <= b.range[0] && a.range[1] >= b.range[1];
|
||||
function isAncestorNodeOf(a: Node, b: Node): boolean {
|
||||
return a.range![0] <= b.range![0] && a.range![1] >= b.range![1];
|
||||
}
|
||||
|
||||
function isUseEffectEventIdentifier(node) {
|
||||
function isUseEffectEventIdentifier(node: Node): boolean {
|
||||
if (__EXPERIMENTAL__) {
|
||||
return node.type === 'Identifier' && node.name === 'useEffectEvent';
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export default rule;
|
||||
|
||||
Reference in New Issue
Block a user