react-doctor 0.0.8 → 0.0.10

package/dist/react-doctor-plugin.js

@@ -1,10 +1,10 @@
 //#region src/plugin/constants.ts
-const GIANT_COMPONENT_LINE_THRESHOLD = 200;
-const CASCADING_SET_STATE_THRESHOLD = 2;
-const RELATED_USE_STATE_THRESHOLD = 3;
+const GIANT_COMPONENT_LINE_THRESHOLD = 300;
+const CASCADING_SET_STATE_THRESHOLD = 3;
+const RELATED_USE_STATE_THRESHOLD = 5;
 const DEEP_NESTING_THRESHOLD = 3;
 const DUPLICATE_STORAGE_READ_THRESHOLD = 2;
-const SEQUENTIAL_AWAIT_THRESHOLD = 2;
+const SEQUENTIAL_AWAIT_THRESHOLD = 3;
 const SECRET_MIN_LENGTH_CHARS = 8;
 const AUTH_CHECK_LOOKAHEAD_STATEMENTS = 3;
 const LAYOUT_PROPERTIES = new Set([
@@ -109,16 +109,84 @@ const SECRET_PATTERNS = [
 	/^sk-[a-zA-Z0-9]{32,}$/
 ];
 const SECRET_VARIABLE_PATTERN = /(?:api_?key|secret|token|password|credential|auth)/i;
-const LOADING_STATE_PATTERN = /(?:loading|isLoading|isPending|isSubmitting|isFetching)/i;
-const EVENT_PROP_PATTERN = /^on[A-Z]/;
+const SECRET_FALSE_POSITIVE_SUFFIXES = new Set([
+	"modal",
+	"label",
+	"text",
+	"title",
+	"name",
+	"id",
+	"key",
+	"url",
+	"path",
+	"route",
+	"page",
+	"param",
+	"field",
+	"column",
+	"header",
+	"placeholder",
+	"description",
+	"type",
+	"icon",
+	"class",
+	"style",
+	"variant",
+	"event",
+	"action",
+	"status",
+	"state",
+	"mode",
+	"flag",
+	"option",
+	"config",
+	"message",
+	"error",
+	"display",
+	"view",
+	"component",
+	"element",
+	"container",
+	"wrapper",
+	"button",
+	"link",
+	"input",
+	"select",
+	"dialog",
+	"menu",
+	"form",
+	"step",
+	"index",
+	"count",
+	"length",
+	"role",
+	"scope",
+	"context",
+	"provider",
+	"ref",
+	"handler",
+	"query",
+	"schema",
+	"constant"
+]);
+const TRIVIAL_INITIALIZER_NAMES = new Set([
+	"Boolean",
+	"String",
+	"Number",
+	"Array",
+	"Object",
+	"parseInt",
+	"parseFloat"
+]);
 const SETTER_PATTERN = /^set[A-Z]/;
 const RENDER_FUNCTION_PATTERN = /^render[A-Z]/;
 const UPPERCASE_PATTERN = /^[A-Z]/;
 const PAGE_FILE_PATTERN = /\/page\.(tsx?|jsx?)$/;
 const PAGE_OR_LAYOUT_FILE_PATTERN = /\/(page|layout)\.(tsx?|jsx?)$/;
+const INTERNAL_PAGE_PATH_PATTERN = /\/(?:(?:\((?:dashboard|admin|settings|account|internal|manage|console|portal|auth|onboarding|app|ee|protected)\))|(?:dashboard|admin|settings|account|internal|manage|console|portal))\//i;
+const TEST_FILE_PATTERN = /\.(?:test|spec|stories)\.[tj]sx?$/;
+const OG_ROUTE_PATTERN = /\/og\b/i;
 const PAGES_DIRECTORY_PATTERN = /\/pages\//;
-const SERVER_ACTION_FILE_PATTERN = /actions?\.(tsx?|jsx?)$/;
-const SERVER_ACTION_DIRECTORY_PATTERN = /\/actions\//;
 const NEXTJS_NAVIGATION_FUNCTIONS = new Set([
 	"redirect",
 	"permanentRedirect",
@@ -305,16 +373,6 @@ const extractDestructuredPropNames = (params) => {
 
 //#endregion
 //#region src/plugin/rules/architecture.ts
-const noGenericHandlerNames = { create: (context) => ({ JSXAttribute(node) {
-	if (node.name?.type !== "JSXIdentifier" || !EVENT_PROP_PATTERN.test(node.name.name)) return;
-	if (!node.value || node.value.type !== "JSXExpressionContainer") return;
-	const mirroredHandlerName = `handle${node.name.name.slice(2)}`;
-	const expression = node.value.expression;
-	if (expression?.type === "Identifier" && expression.name === mirroredHandlerName) context.report({
-		node,
-		message: `Non-descriptive handler name "${expression.name}" — name should describe what it does, not when it runs`
-	});
-} }) };
 const noGiantComponent = { create: (context) => {
 	const reportOversizedComponent = (nameNode, componentName, bodyNode) => {
 		if (!bodyNode.loc) return;
@@ -376,14 +434,21 @@ const noNestedComponentDefinition = { create: (context) => {
 
 //#endregion
 //#region src/plugin/rules/bundle-size.ts
-const noBarrelImport = { create: (context) => ({ ImportDeclaration(node) {
-	const source = node.source?.value;
-	if (typeof source !== "string" || !source.startsWith(".")) return;
-	if (BARREL_INDEX_SUFFIXES.some((suffix) => source.endsWith(suffix))) context.report({
-		node,
-		message: "Import from barrel/index file — import directly from the source module for better tree-shaking"
-	});
-} }) };
+const noBarrelImport = { create: (context) => {
+	let didReportForFile = false;
+	return { ImportDeclaration(node) {
+		if (didReportForFile) return;
+		const source = node.source?.value;
+		if (typeof source !== "string" || !source.startsWith(".")) return;
+		if (BARREL_INDEX_SUFFIXES.some((suffix) => source.endsWith(suffix))) {
+			didReportForFile = true;
+			context.report({
+				node,
+				message: "Import from barrel/index file — import directly from the source module for better tree-shaking"
+			});
+		}
+	} };
+} };
 const noFullLodashImport = { create: (context) => ({ ImportDeclaration(node) {
 	const source = node.source?.value;
 	if (source === "lodash" || source === "lodash-es") context.report({
@@ -457,11 +522,28 @@ const extractIndexName = (node) => {
 	if (node.type === "CallExpression" && node.callee?.type === "Identifier" && node.callee.name === "String" && node.arguments?.[0]?.type === "Identifier" && INDEX_PARAMETER_NAMES.has(node.arguments[0].name)) return node.arguments[0].name;
 	return null;
 };
+const isInsideStaticPlaceholderMap = (node) => {
+	let current = node;
+	while (current.parent) {
+		current = current.parent;
+		if (current.type === "CallExpression" && current.callee?.type === "MemberExpression" && current.callee.property?.name === "map") {
+			const receiver = current.callee.object;
+			if (receiver?.type === "CallExpression") {
+				const callee = receiver.callee;
+				if (callee?.type === "MemberExpression" && callee.object?.type === "Identifier" && callee.object.name === "Array" && callee.property?.name === "from") return true;
+			}
+			if (receiver?.type === "NewExpression" && receiver.callee?.type === "Identifier" && receiver.callee.name === "Array") return true;
+		}
+	}
+	return false;
+};
 const noArrayIndexAsKey = { create: (context) => ({ JSXAttribute(node) {
 	if (node.name?.type !== "JSXIdentifier" || node.name.name !== "key") return;
 	if (!node.value || node.value.type !== "JSXExpressionContainer") return;
 	const indexName = extractIndexName(node.value.expression);
-	if (indexName) context.report({
+	if (!indexName) return;
+	if (isInsideStaticPlaceholderMap(node)) return;
+	context.report({
 		node,
 		message: `Array index "${indexName}" used as key — causes bugs when list is reordered or filtered`
 	});
@@ -488,7 +570,7 @@ const noPreventDefault = { create: (context) => ({ JSXOpeningElement(node) {
 	const expression = eventAttribute.value.expression;
 	if (expression?.type !== "ArrowFunctionExpression" && expression?.type !== "FunctionExpression") return;
 	if (!containsPreventDefaultCall(expression)) return;
-	const message = elementName === "form" ? "preventDefault() on <form> onSubmit — form won't work without JavaScript" : "preventDefault() on <a> onClick — use a <button> or routing component instead";
+	const message = elementName === "form" ? "preventDefault() on <form> onSubmit — form won't work without JavaScript. Consider using a server action for progressive enhancement" : "preventDefault() on <a> onClick — use a <button> or routing component instead";
 	context.report({
 		node,
 		message
@@ -605,16 +687,21 @@ const jsEarlyExit = { create: (context) => ({ IfStatement(node) {
 		message: `${nestingDepth + 1} levels of nested if statements — use early returns to flatten`
 	});
 } }) };
-const asyncParallel = { create: (context) => ({ BlockStatement(node) {
-	const consecutiveAwaitStatements = [];
-	const flushConsecutiveAwaits = () => {
-		if (consecutiveAwaitStatements.length >= SEQUENTIAL_AWAIT_THRESHOLD) reportIfIndependent(consecutiveAwaitStatements, context);
-		consecutiveAwaitStatements.length = 0;
-	};
-	for (const statement of node.body ?? []) if (statement.type === "VariableDeclaration" && statement.declarations?.length === 1 && statement.declarations[0].init?.type === "AwaitExpression" || statement.type === "ExpressionStatement" && statement.expression?.type === "AwaitExpression") consecutiveAwaitStatements.push(statement);
-	else flushConsecutiveAwaits();
-	flushConsecutiveAwaits();
-} }) };
+const asyncParallel = { create: (context) => {
+	const filename = context.getFilename?.() ?? "";
+	const isTestFile = TEST_FILE_PATTERN.test(filename);
+	return { BlockStatement(node) {
+		if (isTestFile) return;
+		const consecutiveAwaitStatements = [];
+		const flushConsecutiveAwaits = () => {
+			if (consecutiveAwaitStatements.length >= SEQUENTIAL_AWAIT_THRESHOLD) reportIfIndependent(consecutiveAwaitStatements, context);
+			consecutiveAwaitStatements.length = 0;
+		};
+		for (const statement of node.body ?? []) if (statement.type === "VariableDeclaration" && statement.declarations?.length === 1 && statement.declarations[0].init?.type === "AwaitExpression" || statement.type === "ExpressionStatement" && statement.expression?.type === "AwaitExpression") consecutiveAwaitStatements.push(statement);
+		else flushConsecutiveAwaits();
+		flushConsecutiveAwaits();
+	} };
+} };
 const reportIfIndependent = (statements, context) => {
 	const declaredNames = /* @__PURE__ */ new Set();
 	for (const statement of statements) {
@@ -636,12 +723,17 @@ const reportIfIndependent = (statements, context) => {
 
 //#endregion
 //#region src/plugin/rules/nextjs.ts
-const nextjsNoImgElement = { create: (context) => ({ JSXOpeningElement(node) {
-	if (node.name?.type === "JSXIdentifier" && node.name.name === "img") context.report({
-		node,
-		message: "Use next/image instead of <img> — provides automatic optimization, lazy loading, and responsive srcset"
-	});
-} }) };
+const nextjsNoImgElement = { create: (context) => {
+	const filename = context.getFilename?.() ?? "";
+	const isOgRoute = OG_ROUTE_PATTERN.test(filename);
+	return { JSXOpeningElement(node) {
+		if (isOgRoute) return;
+		if (node.name?.type === "JSXIdentifier" && node.name.name === "img") context.report({
+			node,
+			message: "Use next/image instead of <img> — provides automatic optimization, lazy loading, and responsive srcset"
+		});
+	} };
+} };
 const nextjsAsyncClientComponent = { create: (context) => {
 	let fileHasUseClient = false;
 	return {
@@ -706,6 +798,7 @@ const nextjsNoClientFetchForServerData = { create: (context) => {
 const nextjsMissingMetadata = { create: (context) => ({ Program(programNode) {
 	const filename = context.getFilename?.() ?? "";
 	if (!PAGE_FILE_PATTERN.test(filename)) return;
+	if (INTERNAL_PAGE_PATH_PATTERN.test(filename)) return;
 	if (!programNode.body?.some((statement) => {
 		if (statement.type !== "ExportNamedDeclaration") return false;
 		const declaration = statement.declaration;
@@ -873,6 +966,47 @@ const nextjsNoSideEffectInGetHandler = { create: (context) => ({ ExportNamedDecl
 
 //#endregion
 //#region src/plugin/rules/performance.ts
+const isMemoCall = (node) => {
+	if (node.type !== "CallExpression") return false;
+	if (node.callee?.type === "Identifier" && node.callee.name === "memo") return true;
+	if (node.callee?.type === "MemberExpression" && node.callee.object?.type === "Identifier" && node.callee.object.name === "React" && node.callee.property?.type === "Identifier" && node.callee.property.name === "memo") return true;
+	return false;
+};
+const isInlineReference = (node) => {
+	if (node.type === "ArrowFunctionExpression" || node.type === "FunctionExpression" || node.type === "CallExpression" && node.callee?.type === "MemberExpression" && node.callee.property?.name === "bind") return "functions";
+	if (node.type === "ObjectExpression") return "objects";
+	if (node.type === "ArrayExpression") return "Arrays";
+	if (node.type === "JSXElement" || node.type === "JSXFragment") return "JSX";
+	return null;
+};
+const noInlinePropOnMemoComponent = { create: (context) => {
+	const memoizedComponentNames = /* @__PURE__ */ new Set();
+	return {
+		VariableDeclarator(node) {
+			if (node.id?.type !== "Identifier" || !node.init) return;
+			if (isMemoCall(node.init)) memoizedComponentNames.add(node.id.name);
+		},
+		ExportDefaultDeclaration(node) {
+			if (node.declaration && isMemoCall(node.declaration)) {
+				const innerArgument = node.declaration.arguments?.[0];
+				if (innerArgument?.type === "Identifier") memoizedComponentNames.add(innerArgument.name);
+			}
+		},
+		JSXAttribute(node) {
+			if (!node.value || node.value.type !== "JSXExpressionContainer") return;
+			const openingElement = node.parent;
+			if (!openingElement || openingElement.type !== "JSXOpeningElement") return;
+			let elementName = null;
+			if (openingElement.name?.type === "JSXIdentifier") elementName = openingElement.name.name;
+			if (!elementName || !memoizedComponentNames.has(elementName)) return;
+			const propType = isInlineReference(node.value.expression);
+			if (propType) context.report({
+				node: node.value.expression,
+				message: `JSX attribute values should not contain ${propType} created in the same scope — ${elementName} is wrapped in memo(), so new references cause unnecessary re-renders`
+			});
+		}
+	};
+} };
 const noUsememoSimpleExpression = { create: (context) => ({ CallExpression(node) {
 	if (!isHookCall(node, "useMemo")) return;
 	const callback = node.arguments?.[0];
@@ -886,9 +1020,18 @@ const noUsememoSimpleExpression = { create: (context) => ({ CallExpression(node)
 		message: "useMemo wrapping a trivially cheap expression — memo overhead exceeds the computation"
 	});
 } }) };
+const isMotionElement = (attributeNode) => {
+	const openingElement = attributeNode.parent;
+	if (!openingElement || openingElement.type !== "JSXOpeningElement") return false;
+	const elementName = openingElement.name;
+	if (elementName?.type === "JSXMemberExpression" && elementName.object?.type === "JSXIdentifier" && (elementName.object.name === "motion" || elementName.object.name === "m")) return true;
+	if (elementName?.type === "JSXIdentifier" && elementName.name.startsWith("Motion")) return true;
+	return false;
+};
 const noLayoutPropertyAnimation = { create: (context) => ({ JSXAttribute(node) {
 	if (node.name?.type !== "JSXIdentifier" || !MOTION_ANIMATE_PROPS.has(node.name.name)) return;
 	if (!node.value || node.value.type !== "JSXExpressionContainer") return;
+	if (isMotionElement(node)) return;
 	const expression = node.value.expression;
 	if (expression?.type !== "ObjectExpression") return;
 	for (const property of expression.properties ?? []) {
@@ -1019,19 +1162,6 @@ const renderingAnimateSvgWrapper = { create: (context) => ({ JSXOpeningElement(n
 		message: "Animation props directly on <svg> — wrap in a <div> or <motion.div> for better rendering performance"
 	});
 } }) };
-const renderingUsetransitionLoading = { create: (context) => ({ VariableDeclarator(node) {
-	if (node.id?.type !== "ArrayPattern" || !node.id.elements?.length) return;
-	if (!node.init || !isHookCall(node.init, "useState")) return;
-	if (!node.init.arguments?.length) return;
-	const initializer = node.init.arguments[0];
-	if (initializer.type !== "Literal" || initializer.value !== false) return;
-	const stateVariableName = node.id.elements[0]?.name;
-	if (!stateVariableName || !LOADING_STATE_PATTERN.test(stateVariableName)) return;
-	context.report({
-		node: node.init,
-		message: `useState for "${stateVariableName}" — consider useTransition for non-urgent loading states`
-	});
-} }) };
 const renderingHydrationNoFlicker = { create: (context) => ({ CallExpression(node) {
 	if (!isHookCall(node, EFFECT_HOOK_NAMES) || node.arguments?.length < 2) return;
 	const depsNode = node.arguments[1];
@@ -1075,7 +1205,9 @@ const noSecretsInClientCode = { create: (context) => ({ VariableDeclarator(node)
 	if (node.init?.type !== "Literal" || typeof node.init.value !== "string") return;
 	const variableName = node.id.name;
 	const literalValue = node.init.value;
-	if (SECRET_VARIABLE_PATTERN.test(variableName) && literalValue.length > SECRET_MIN_LENGTH_CHARS) {
+	const trailingSuffix = variableName.split("_").pop()?.toLowerCase() ?? "";
+	const isUiConstant = SECRET_FALSE_POSITIVE_SUFFIXES.has(trailingSuffix);
+	if (SECRET_VARIABLE_PATTERN.test(variableName) && !isUiConstant && literalValue.length > SECRET_MIN_LENGTH_CHARS) {
 		context.report({
 			node,
 			message: `Possible hardcoded secret in "${variableName}" — use environment variables instead`
@@ -1121,19 +1253,27 @@ const serverAuthActions = { create: (context) => {
 		}
 	};
 } };
-const serverAfterNonblocking = { create: (context) => ({ CallExpression(node) {
-	if (node.callee?.type !== "MemberExpression") return;
-	if (node.callee.property?.type !== "Identifier") return;
-	const objectName = node.callee.object?.type === "Identifier" ? node.callee.object.name : null;
-	if (!objectName) return;
-	const methodName = node.callee.property.name;
-	if (!(objectName === "console" && (methodName === "log" || methodName === "info" || methodName === "warn") || objectName === "analytics" && (methodName === "track" || methodName === "identify" || methodName === "page"))) return;
-	const filename = context.getFilename?.() ?? "";
-	if (SERVER_ACTION_FILE_PATTERN.test(filename) || SERVER_ACTION_DIRECTORY_PATTERN.test(filename)) context.report({
-		node,
-		message: `${objectName}.${methodName}() in server action — use after() for non-blocking logging/analytics`
-	});
-} }) };
+const serverAfterNonblocking = { create: (context) => {
+	let fileHasUseServerDirective = false;
+	return {
+		Program(programNode) {
+			fileHasUseServerDirective = hasDirective(programNode, "use server");
+		},
+		CallExpression(node) {
+			if (!fileHasUseServerDirective) return;
+			if (node.callee?.type !== "MemberExpression") return;
+			if (node.callee.property?.type !== "Identifier") return;
+			const objectName = node.callee.object?.type === "Identifier" ? node.callee.object.name : null;
+			if (!objectName) return;
+			const methodName = node.callee.property.name;
+			if (!(objectName === "console" && (methodName === "log" || methodName === "info" || methodName === "warn") || objectName === "analytics" && (methodName === "track" || methodName === "identify" || methodName === "page"))) return;
+			context.report({
+				node,
+				message: `${objectName}.${methodName}() in server action — use after() for non-blocking logging/analytics`
+			});
+		}
+	};
+} };
 
 //#endregion
 //#region src/plugin/rules/state-and-effects.ts
@@ -1192,7 +1332,10 @@ const noEffectEventHandler = { create: (context) => ({ CallExpression(node) {
 	const depsNode = node.arguments[1];
 	if (depsNode.type !== "ArrayExpression" || !depsNode.elements?.length) return;
 	const dependencyNames = new Set(depsNode.elements.filter((element) => element?.type === "Identifier").map((element) => element.name));
-	if (getCallbackStatements(callback).some((statement) => statement.type === "IfStatement" && statement.test?.type === "Identifier" && dependencyNames.has(statement.test.name))) context.report({
+	const statements = getCallbackStatements(callback);
+	if (statements.length !== 1) return;
+	const soleStatement = statements[0];
+	if (soleStatement.type === "IfStatement" && soleStatement.test?.type === "Identifier" && dependencyNames.has(soleStatement.test.name)) context.report({
 		node,
 		message: "useEffect simulating an event handler — move logic to an actual event handler instead"
 	});
@@ -1214,7 +1357,7 @@ const noDerivedUseState = { create: (context) => {
 			if (initializer.type !== "Identifier") return;
 			if (componentPropNames.has(initializer.name)) context.report({
 				node,
-				message: `useState initialized from prop "${initializer.name}" — derive it during render instead of syncing with state`
+				message: `useState initialized from prop "${initializer.name}" — if this value should stay in sync with the prop, derive it during render instead`
 			});
 		}
 	};
@@ -1248,6 +1391,7 @@ const rerenderLazyStateInit = { create: (context) => ({ CallExpression(node) {
 	const initializer = node.arguments[0];
 	if (initializer.type !== "CallExpression") return;
 	const calleeName = initializer.callee?.type === "Identifier" ? initializer.callee.name : initializer.callee?.property?.name ?? "fn";
+	if (TRIVIAL_INITIALIZER_NAMES.has(calleeName)) return;
 	context.report({
 		node: initializer,
 		message: `useState(${calleeName}()) calls initializer on every render — use useState(() => ${calleeName}()) for lazy initialization`
@@ -1293,7 +1437,6 @@ const plugin = {
 		"rerender-lazy-state-init": rerenderLazyStateInit,
 		"rerender-functional-setstate": rerenderFunctionalSetstate,
 		"rerender-dependencies": rerenderDependencies,
-		"no-generic-handler-names": noGenericHandlerNames,
 		"no-giant-component": noGiantComponent,
 		"no-render-in-render": noRenderInRender,
 		"no-nested-component-definition": noNestedComponentDefinition,
@@ -1301,7 +1444,7 @@ const plugin = {
 		"no-layout-property-animation": noLayoutPropertyAnimation,
 		"rerender-memo-with-default-value": rerenderMemoWithDefaultValue,
 		"rendering-animate-svg-wrapper": renderingAnimateSvgWrapper,
-		"rendering-usetransition-loading": renderingUsetransitionLoading,
+		"no-inline-prop-on-memo-component": noInlinePropOnMemoComponent,
 		"rendering-hydration-no-flicker": renderingHydrationNoFlicker,
 		"no-transition-all": noTransitionAll,
 		"no-global-css-variable-animation": noGlobalCssVariableAnimation,