eslint-plugin-absolute 0.2.0 → 0.2.1

package/src/rules/localize-react-props.ts

@@ -20,37 +20,20 @@ type CandidateVariable = {
 };
 
 export const localizeReactProps: TSESLint.RuleModule<MessageIds, Options> = {
-	meta: {
-		type: "suggestion",
-		docs: {
-			description:
-				"Disallow variables that are only passed to a single custom child component. For useState, only report if both the state and its setter are exclusively passed to a single custom child. For general variables, only report if a given child receives exactly one such candidate – if two or more are passed to the same component type, they’re assumed to be settings that belong on the parent."
-		},
-		schema: [],
-		messages: {
-			stateAndSetterToChild:
-				"State variable '{{stateVarName}}' and its setter '{{setterVarName}}' are only passed to a single custom child component. Consider moving the state into that component.",
-			variableToChild:
-				"Variable '{{varName}}' is only passed to a single custom child component. Consider moving it to that component."
-		}
-	},
-
-	defaultOptions: [],
-
 	create(context) {
 		// A list of candidate variables for reporting (for general variables only).
 		const candidateVariables: CandidateVariable[] = [];
 
-		function getSingleSetElement<T>(set: Set<T>): T | null {
+		const getSingleSetElement = <T>(set: Set<T>) => {
 			for (const value of set) {
 				return value;
 			}
 			return null;
-		}
+		};
 
-		function getRightmostJSXIdentifier(
+		const getRightmostJSXIdentifier = (
 			name: TSESTree.JSXTagNameExpression
-		): TSESTree.JSXIdentifier | null {
+		) => {
 			let current: TSESTree.JSXTagNameExpression = name;
 			while (current.type === AST_NODE_TYPES.JSXMemberExpression) {
 				current = current.property;
@@ -59,11 +42,11 @@ export const localizeReactProps: TSESLint.RuleModule<MessageIds, Options> = {
 				return current;
 			}
 			return null;
-		}
+		};
 
-		function getLeftmostJSXIdentifier(
+		const getLeftmostJSXIdentifier = (
 			name: TSESTree.JSXTagNameExpression
-		): TSESTree.JSXIdentifier | null {
+		) => {
 			let current: TSESTree.JSXTagNameExpression = name;
 			while (current.type === AST_NODE_TYPES.JSXMemberExpression) {
 				current = current.object;
@@ -72,10 +55,10 @@ export const localizeReactProps: TSESLint.RuleModule<MessageIds, Options> = {
 				return current;
 			}
 			return null;
-		}
+		};
 
 		// Helper: Extract the component name from a JSXElement.
-		function getJSXElementName(jsxElement: TSESTree.JSXElement | null) {
+		const getJSXElementName = (jsxElement: TSESTree.JSXElement | null) => {
 			if (
 				!jsxElement ||
 				!jsxElement.openingElement ||
@@ -92,44 +75,35 @@ export const localizeReactProps: TSESLint.RuleModule<MessageIds, Options> = {
 				return rightmost.name;
 			}
 			return "";
-		}
+		};
 
 		// Helper: Check if the node is a call to useState.
-		function isUseStateCall(
+		const isUseStateCall = (
 			node: TSESTree.Node | null
-		): node is TSESTree.CallExpression {
-			return (
-				node !== null &&
-				node.type === AST_NODE_TYPES.CallExpression &&
-				node.callee !== null &&
-				((node.callee.type === AST_NODE_TYPES.Identifier &&
-					node.callee.name === "useState") ||
-					(node.callee.type === AST_NODE_TYPES.MemberExpression &&
-						node.callee.property !== null &&
-						node.callee.property.type ===
-							AST_NODE_TYPES.Identifier &&
-						node.callee.property.name === "useState"))
-			);
-		}
+		): node is TSESTree.CallExpression =>
+			node !== null &&
+			node.type === AST_NODE_TYPES.CallExpression &&
+			node.callee !== null &&
+			((node.callee.type === AST_NODE_TYPES.Identifier &&
+				node.callee.name === "useState") ||
+				(node.callee.type === AST_NODE_TYPES.MemberExpression &&
+					node.callee.property !== null &&
+					node.callee.property.type === AST_NODE_TYPES.Identifier &&
+					node.callee.property.name === "useState"));
 
 		// Helper: Check if a call expression is a hook call (other than useState).
-		function isHookCall(
+		const isHookCall = (
 			node: TSESTree.Node | null
-		): node is TSESTree.CallExpression {
-			return (
-				node !== null &&
-				node.type === AST_NODE_TYPES.CallExpression &&
-				node.callee !== null &&
-				node.callee.type === AST_NODE_TYPES.Identifier &&
-				/^use[A-Z]/.test(node.callee.name) &&
-				node.callee.name !== "useState"
-			);
-		}
+		): node is TSESTree.CallExpression =>
+			node !== null &&
+			node.type === AST_NODE_TYPES.CallExpression &&
+			node.callee !== null &&
+			node.callee.type === AST_NODE_TYPES.Identifier &&
+			/^use[A-Z]/.test(node.callee.name) &&
+			node.callee.name !== "useState";
 
 		// Helper: Walk upward to find the closest JSXElement ancestor.
-		function getJSXAncestor(
-			node: TSESTree.Node
-		): TSESTree.JSXElement | null {
+		const getJSXAncestor = (node: TSESTree.Node) => {
 			let current: TSESTree.Node | null | undefined = node.parent;
 			while (current) {
 				if (current.type === AST_NODE_TYPES.JSXElement) {
@@ -138,54 +112,49 @@ export const localizeReactProps: TSESLint.RuleModule<MessageIds, Options> = {
 				current = current.parent;
 			}
 			return null;
-		}
+		};
+
+		const getTagNameFromOpening = (
+			openingElement: TSESTree.JSXOpeningElement
+		) => {
+			const nameNode = openingElement.name;
+			if (nameNode.type === AST_NODE_TYPES.JSXIdentifier) {
+				return nameNode.name;
+			}
+			const rightmost = getRightmostJSXIdentifier(nameNode);
+			return rightmost ? rightmost.name : null;
+		};
+
+		const isProviderOrContext = (tagName: string) =>
+			tagName.endsWith("Provider") || tagName.endsWith("Context");
+
+		const isValueAttributeOnProvider = (node: TSESTree.Node) =>
+			node.type === AST_NODE_TYPES.JSXAttribute &&
+			node.name &&
+			node.name.type === AST_NODE_TYPES.JSXIdentifier &&
+			node.name.name === "value" &&
+			node.parent &&
+			node.parent.type === AST_NODE_TYPES.JSXOpeningElement &&
+			(() => {
+				const tagName = getTagNameFromOpening(node.parent);
+				return tagName !== null && isProviderOrContext(tagName);
+			})();
 
 		// Helper: Check whether the given node is inside a JSXAttribute "value"
 		// that belongs to a context-like component (i.e. tag name ends with Provider or Context).
-		function isContextProviderValueProp(node: TSESTree.Node): boolean {
+		const isContextProviderValueProp = (node: TSESTree.Node) => {
 			let current: TSESTree.Node | null | undefined = node.parent;
 			while (current) {
-				if (
-					current.type === AST_NODE_TYPES.JSXAttribute &&
-					current.name &&
-					current.name.type === AST_NODE_TYPES.JSXIdentifier &&
-					current.name.name === "value"
-				) {
-					// current.parent should be a JSXOpeningElement.
-					if (
-						current.parent &&
-						current.parent.type === AST_NODE_TYPES.JSXOpeningElement
-					) {
-						const nameNode = current.parent.name;
-						if (nameNode.type === AST_NODE_TYPES.JSXIdentifier) {
-							const tagName = nameNode.name;
-							if (
-								tagName.endsWith("Provider") ||
-								tagName.endsWith("Context")
-							) {
-								return true;
-							}
-						} else {
-							const rightmost =
-								getRightmostJSXIdentifier(nameNode);
-							if (rightmost) {
-								if (
-									rightmost.name.endsWith("Provider") ||
-									rightmost.name.endsWith("Context")
-								) {
-									return true;
-								}
-							}
-						}
-					}
+				if (isValueAttributeOnProvider(current)) {
+					return true;
 				}
 				current = current.parent;
 			}
 			return false;
-		}
+		};
 
 		// Helper: Determine if a JSXElement is a custom component (tag name begins with an uppercase letter).
-		function isCustomJSXElement(jsxElement: TSESTree.JSXElement | null) {
+		const isCustomJSXElement = (jsxElement: TSESTree.JSXElement | null) => {
 			if (
 				!jsxElement ||
 				!jsxElement.openingElement ||
@@ -198,16 +167,11 @@ export const localizeReactProps: TSESLint.RuleModule<MessageIds, Options> = {
 				return /^[A-Z]/.test(nameNode.name);
 			}
 			const leftmost = getLeftmostJSXIdentifier(nameNode);
-			if (leftmost && /^[A-Z]/.test(leftmost.name)) {
-				return true;
-			}
-			return false;
-		}
+			return leftmost !== null && /^[A-Z]/.test(leftmost.name);
+		};
 
 		// Helper: Find the nearest enclosing function (assumed to be the component).
-		function getComponentFunction(
-			node: TSESTree.Node | null
-		): ComponentFunction | null {
+		const getComponentFunction = (node: TSESTree.Node | null) => {
 			let current: TSESTree.Node | null | undefined = node;
 			while (current) {
 				if (
@@ -220,118 +184,232 @@ export const localizeReactProps: TSESLint.RuleModule<MessageIds, Options> = {
 				current = current.parent;
 			}
 			return null;
-		}
+		};
 
-		function findVariableForIdentifier(
-			id: TSESTree.Identifier
-		): TSESLint.Scope.Variable | null {
+		const findVariableForIdentifier = (identifier: TSESTree.Identifier) => {
 			let scope: TSESLint.Scope.Scope | null =
-				context.sourceCode.getScope(id);
+				context.sourceCode.getScope(identifier);
 			while (scope) {
-				for (const variable of scope.variables) {
-					for (const def of variable.defs) {
-						if (def.name === id) {
-							return variable;
-						}
-					}
+				const found = scope.variables.find((variable) =>
+					variable.defs.some((def) => def.name === identifier)
+				);
+				if (found) {
+					return found;
 				}
 				scope = scope.upper ?? null;
 			}
 			return null;
-		}
+		};
 
 		// Analyze variable usage using ESLint scopes (no manual AST crawling).
 		// Only count a usage if it occurs inside a custom JSX element (and is not inside a context provider's "value" prop).
-		function analyzeVariableUsage(
+		const classifyReference = (
+			reference: TSESLint.Scope.Reference,
+			declarationId: TSESTree.Identifier,
+			jsxUsageSet: Set<TSESTree.JSXElement>
+		) => {
+			const { identifier } = reference;
+
+			if (
+				identifier === declarationId ||
+				isContextProviderValueProp(identifier)
+			) {
+				return false;
+			}
+
+			const jsxAncestor = getJSXAncestor(identifier);
+			if (jsxAncestor && isCustomJSXElement(jsxAncestor)) {
+				jsxUsageSet.add(jsxAncestor);
+				return false;
+			}
+			return true;
+		};
+
+		const analyzeVariableUsage = (
 			declarationId: TSESTree.Identifier
-		): Usage {
+		): Usage => {
 			const variable = findVariableForIdentifier(declarationId);
 			if (!variable) {
 				return {
-					jsxUsageSet: new Set<TSESTree.JSXElement>(),
-					hasOutsideUsage: false
+					hasOutsideUsage: false,
+					jsxUsageSet: new Set<TSESTree.JSXElement>()
 				};
 			}
 
 			const jsxUsageSet = new Set<TSESTree.JSXElement>();
-			let hasOutsideUsage = false;
-
-			for (const reference of variable.references) {
-				const identifier = reference.identifier;
-
-				if (identifier === declarationId) {
-					continue;
-				}
-
-				// If the identifier is inside a "value" prop on a context-like component, ignore it.
-				if (isContextProviderValueProp(identifier)) {
-					continue;
-				}
-
-				const jsxAncestor = getJSXAncestor(identifier);
-				if (jsxAncestor && isCustomJSXElement(jsxAncestor)) {
-					jsxUsageSet.add(jsxAncestor);
-				} else {
-					hasOutsideUsage = true;
-				}
-			}
+			const hasOutsideUsage = variable.references.some((ref) =>
+				classifyReference(ref, declarationId, jsxUsageSet)
+			);
 
 			return {
-				jsxUsageSet,
-				hasOutsideUsage
+				hasOutsideUsage,
+				jsxUsageSet
 			};
-		}
+		};
 
 		// Manage hook-derived variables.
 		const componentHookVars = new WeakMap<ComponentFunction, Set<string>>();
-		function getHookSet(componentFunction: ComponentFunction): Set<string> {
+		const getHookSet = (componentFunction: ComponentFunction) => {
 			let hookSet = componentHookVars.get(componentFunction);
 			if (!hookSet) {
 				hookSet = new Set<string>();
 				componentHookVars.set(componentFunction, hookSet);
 			}
 			return hookSet;
-		}
+		};
 
-		function hasHookDependency(
+		const isRangeContained = (
+			refRange: [number, number],
+			nodeRange: [number, number]
+		) => refRange[0] >= nodeRange[0] && refRange[1] <= nodeRange[1];
+
+		const variableHasReferenceInRange = (
+			variable: TSESLint.Scope.Variable,
+			nodeRange: [number, number]
+		) =>
+			variable.references.some(
+				(reference) =>
+					reference.identifier.range !== undefined &&
+					isRangeContained(reference.identifier.range, nodeRange)
+			);
+
+		const hasHookDependency = (
 			node: TSESTree.Node,
 			hookSet: Set<string>
-		): boolean {
+		) => {
 			if (!node.range) {
 				return false;
 			}
 			const nodeRange = node.range;
-			const nodeStart = nodeRange[0];
-			const nodeEnd = nodeRange[1];
 
 			let scope: TSESLint.Scope.Scope | null =
 				context.sourceCode.getScope(node);
 
 			while (scope) {
-				for (const variable of scope.variables) {
-					if (!hookSet.has(variable.name)) {
-						continue;
-					}
-					for (const reference of variable.references) {
-						const identifier = reference.identifier;
-						if (!identifier.range) {
-							continue;
-						}
-						const refRange = identifier.range;
-						const refStart = refRange[0];
-						const refEnd = refRange[1];
-						if (refStart >= nodeStart && refEnd <= nodeEnd) {
-							return true;
-						}
-					}
+				const hookVars = scope.variables.filter((variable) =>
+					hookSet.has(variable.name)
+				);
+				if (
+					hookVars.some((variable) =>
+						variableHasReferenceInRange(variable, nodeRange)
+					)
+				) {
+					return true;
 				}
 				scope = scope.upper ?? null;
 			}
 
 			return false;
-		}
+		};
+
+		const processUseStateDeclarator = (
+			node: TSESTree.VariableDeclarator
+		) => {
+			if (
+				!node.init ||
+				!isUseStateCall(node.init) ||
+				node.id.type !== AST_NODE_TYPES.ArrayPattern ||
+				node.id.elements.length < 2
+			) {
+				return false;
+			}
+
+			const [stateElem, setterElem] = node.id.elements;
+			if (
+				!stateElem ||
+				stateElem.type !== AST_NODE_TYPES.Identifier ||
+				!setterElem ||
+				setterElem.type !== AST_NODE_TYPES.Identifier
+			) {
+				return false;
+			}
+
+			const stateVarName = stateElem.name;
+			const setterVarName = setterElem.name;
+
+			const stateUsage = analyzeVariableUsage(stateElem);
+			const setterUsage = analyzeVariableUsage(setterElem);
+
+			const stateExclusivelySingleJSX =
+				!stateUsage.hasOutsideUsage &&
+				stateUsage.jsxUsageSet.size === 1;
+			const setterExclusivelySingleJSX =
+				!setterUsage.hasOutsideUsage &&
+				setterUsage.jsxUsageSet.size === 1;
+
+			if (!stateExclusivelySingleJSX || !setterExclusivelySingleJSX) {
+				return true;
+			}
+
+			const stateTarget = getSingleSetElement(stateUsage.jsxUsageSet);
+			const setterTarget = getSingleSetElement(setterUsage.jsxUsageSet);
+			if (stateTarget && stateTarget === setterTarget) {
+				context.report({
+					data: { setterVarName, stateVarName },
+					messageId: "stateAndSetterToChild",
+					node: node
+				});
+			}
+			return true;
+		};
+
+		const processGeneralVariable = (
+			node: TSESTree.VariableDeclarator,
+			componentFunction: ComponentFunction
+		) => {
+			if (!node.id || node.id.type !== AST_NODE_TYPES.Identifier) {
+				return;
+			}
+
+			const varName = node.id.name;
+			// Exempt variables that depend on hooks.
+			if (node.init) {
+				const hookSet = getHookSet(componentFunction);
+				if (hasHookDependency(node.init, hookSet)) {
+					return;
+				}
+			}
+			const usage = analyzeVariableUsage(node.id);
+			if (!usage.hasOutsideUsage && usage.jsxUsageSet.size === 1) {
+				const target = getSingleSetElement(usage.jsxUsageSet);
+				const componentName = getJSXElementName(target);
+				candidateVariables.push({
+					componentName,
+					node,
+					varName
+				});
+			}
+		};
 
 		return {
+			// At the end of the traversal, group candidate variables by the target component name.
+			"Program:exit"() {
+				const groups = new Map<string, CandidateVariable[]>();
+				candidateVariables.forEach((candidate) => {
+					const key = candidate.componentName;
+					const existing = groups.get(key);
+					if (existing) {
+						existing.push(candidate);
+					} else {
+						groups.set(key, [candidate]);
+					}
+				});
+				// Only report candidates for a given component type if there is exactly one candidate.
+				groups.forEach((candidates) => {
+					if (candidates.length !== 1) {
+						return;
+					}
+					const [candidate] = candidates;
+					if (!candidate) {
+						return;
+					}
+					context.report({
+						data: { varName: candidate.varName },
+						messageId: "variableToChild",
+						node: candidate.node
+					});
+				});
+			},
 			VariableDeclarator(node: TSESTree.VariableDeclarator) {
 				const componentFunction = getComponentFunction(node);
 				if (!componentFunction || !componentFunction.body) return;
@@ -349,111 +427,28 @@ export const localizeReactProps: TSESLint.RuleModule<MessageIds, Options> = {
 				}
 
 				// Case 1: useState destructuring (state & setter).
-				if (
-					node.init &&
-					isUseStateCall(node.init) &&
-					node.id.type === AST_NODE_TYPES.ArrayPattern &&
-					node.id.elements.length >= 2
-				) {
-					const stateElem = node.id.elements[0];
-					const setterElem = node.id.elements[1];
-					if (
-						!stateElem ||
-						stateElem.type !== AST_NODE_TYPES.Identifier ||
-						!setterElem ||
-						setterElem.type !== AST_NODE_TYPES.Identifier
-					) {
-						return;
-					}
-					const stateVarName = stateElem.name;
-					const setterVarName = setterElem.name;
-
-					const stateUsage = analyzeVariableUsage(stateElem);
-					const setterUsage = analyzeVariableUsage(setterElem);
-
-					const stateExclusivelySingleJSX =
-						!stateUsage.hasOutsideUsage &&
-						stateUsage.jsxUsageSet.size === 1;
-					const setterExclusivelySingleJSX =
-						!setterUsage.hasOutsideUsage &&
-						setterUsage.jsxUsageSet.size === 1;
-					// Report immediately if both the state and setter are used exclusively
-					// in the same single custom JSX element.
-					if (
-						stateExclusivelySingleJSX &&
-						setterExclusivelySingleJSX
-					) {
-						const stateTarget = getSingleSetElement(
-							stateUsage.jsxUsageSet
-						);
-						const setterTarget = getSingleSetElement(
-							setterUsage.jsxUsageSet
-						);
-						if (stateTarget && stateTarget === setterTarget) {
-							context.report({
-								node: node,
-								messageId: "stateAndSetterToChild",
-								data: { stateVarName, setterVarName }
-							});
-						}
-					}
-				}
+				const wasUseState = processUseStateDeclarator(node);
+
 				// Case 2: General variable.
-				else if (
-					node.id &&
-					node.id.type === AST_NODE_TYPES.Identifier
-				) {
-					const varName = node.id.name;
-					// Exempt variables that depend on hooks.
-					if (node.init) {
-						const hookSet = getHookSet(componentFunction);
-						if (hasHookDependency(node.init, hookSet)) {
-							return;
-						}
-					}
-					const usage = analyzeVariableUsage(node.id);
-					// Instead of reporting immediately, add a candidate if the variable is used exclusively in a single custom JSX element.
-					if (
-						!usage.hasOutsideUsage &&
-						usage.jsxUsageSet.size === 1
-					) {
-						const target = getSingleSetElement(usage.jsxUsageSet);
-						const componentName = getJSXElementName(target);
-						candidateVariables.push({
-							node,
-							varName,
-							componentName
-						});
-					}
-				}
-			},
-			// At the end of the traversal, group candidate variables by the target component name.
-			"Program:exit"() {
-				const groups = new Map<string, CandidateVariable[]>();
-				for (const candidate of candidateVariables) {
-					const key = candidate.componentName;
-					const existing = groups.get(key);
-					if (existing) {
-						existing.push(candidate);
-					} else {
-						groups.set(key, [candidate]);
-					}
-				}
-				// Only report candidates for a given component type if there is exactly one candidate.
-				for (const candidates of groups.values()) {
-					if (candidates.length === 1) {
-						const candidate = candidates[0];
-						if (!candidate) {
-							continue;
-						}
-						context.report({
-							node: candidate.node,
-							messageId: "variableToChild",
-							data: { varName: candidate.varName }
-						});
-					}
+				if (!wasUseState) {
+					processGeneralVariable(node, componentFunction);
 				}
 			}
 		};
+	},
+	defaultOptions: [],
+	meta: {
+		docs: {
+			description:
+				"Disallow variables that are only passed to a single custom child component. For useState, only report if both the state and its setter are exclusively passed to a single custom child. For general variables, only report if a given child receives exactly one such candidate – if two or more are passed to the same component type, they're assumed to be settings that belong on the parent."
+		},
+		messages: {
+			stateAndSetterToChild:
+				"State variable '{{stateVarName}}' and its setter '{{setterVarName}}' are only passed to a single custom child component. Consider moving the state into that component.",
+			variableToChild:
+				"Variable '{{varName}}' is only passed to a single custom child component. Consider moving it to that component."
+		},
+		schema: [],
+		type: "suggestion"
 	}
 };