oxlint-plugin-react-doctor 0.2.18-dev.4dc48d7 → 0.2.18-dev.67be206

package/dist/index.js

@@ -3954,6 +3954,7 @@ const noEmDashInJsxText = defineRule({
 	title: "Em dash in JSX text",
 	tags: ["design", "test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	category: "Architecture",
 	recommendation: "Replace em dashes in UI text with commas, colons, semicolons, or parentheses so the copy reads less like AI output.",
 	create: (context) => ({ JSXText(jsxTextNode) {
@@ -4000,6 +4001,7 @@ const noRedundantPaddingAxes = defineRule({
 	title: "Redundant padding axes",
 	tags: ["design", "test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	category: "Architecture",
 	recommendation: "Collapse `px-N py-N` to `p-N` when both sides match. Keep them split only when one side changes at a breakpoint (`py-2 md:py-3`).",
 	create: (context) => ({ JSXAttribute(jsxAttribute) {
@@ -4023,6 +4025,7 @@ const noRedundantSizeAxes = defineRule({
 	requires: ["tailwind:3.4"],
 	tags: ["design", "test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	category: "Architecture",
 	recommendation: "Collapse `w-N h-N` to `size-N` (Tailwind v3.4+) when both sides match.",
 	create: (context) => ({ JSXAttribute(jsxAttribute) {
@@ -4046,6 +4049,7 @@ const noSpaceOnFlexChildren = defineRule({
 	title: "space-* utility on flex children",
 	tags: ["design", "test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	category: "Architecture",
 	recommendation: "Use `gap-*` on the flex or grid parent. `space-x-*` and `space-y-*` leave gaps when a child is hidden, miss spacing on wrapped lines, and don't flip in right-to-left layouts.",
 	create: (context) => ({ JSXAttribute(jsxAttribute) {
@@ -4079,6 +4083,7 @@ const noThreePeriodEllipsis = defineRule({
 	title: "Three dots instead of ellipsis",
 	tags: ["design", "test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	category: "Architecture",
 	recommendation: "Use the real ellipsis \"…\" (or `…`) instead of three dots. Good for labels like \"Rename…\" and \"Loading…\".",
 	create: (context) => ({ JSXText(jsxTextNode) {
@@ -4138,6 +4143,7 @@ const noVagueButtonLabel = defineRule({
 	title: "Vague button label",
 	tags: ["design", "test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	recommendation: "Name the action: \"Save changes\" instead of \"Continue\", \"Send invite\" instead of \"Submit\". The label is the button's accessible name.",
 	create: (context) => ({ JSXElement(jsxElementNode) {
 		const tagName = getOpeningElementTagName(jsxElementNode.openingElement);
@@ -11808,6 +11814,7 @@ const jsxPascalCase = defineRule({
 	id: "jsx-pascal-case",
 	title: "Component name not PascalCase",
 	severity: "warn",
+	defaultEnabled: false,
 	tags: ["test-noise"],
 	recommendation: "Rename custom JSX components to PascalCase.",
 	category: "Architecture",
@@ -14266,6 +14273,7 @@ const noArrayIndexKey = defineRule({
 	id: "no-array-index-key",
 	title: "Array index used as a key",
 	severity: "warn",
+	defaultEnabled: false,
 	recommendation: "Use a stable `key` from your data instead of the array index.",
 	category: "Performance",
 	create: (context) => ({
@@ -14778,6 +14786,37 @@ const isSetterIdentifier = (name) => SETTER_PATTERN.test(name);
 //#region src/plugin/utils/is-setter-call.ts
 const isSetterCall = (node) => isNodeOfType(node, "CallExpression") && isNodeOfType(node.callee, "Identifier") && isSetterIdentifier(node.callee.name);
 //#endregion
+//#region src/plugin/utils/is-hook-binding-in-scope.ts
+const isHookBindingInScope = (node, query) => {
+	const { bindingName, hookName, destructureIndex } = query;
+	let cursor = node;
+	while (cursor) {
+		if (isNodeOfType(cursor, "BlockStatement") || isNodeOfType(cursor, "Program")) for (const statement of cursor.body ?? []) {
+			if (!isNodeOfType(statement, "VariableDeclaration")) continue;
+			for (const declarator of statement.declarations ?? []) {
+				if (!isNodeOfType(declarator.init, "CallExpression")) continue;
+				if (!isHookCall$1(declarator.init, hookName)) continue;
+				if (destructureIndex !== void 0) {
+					if (!isNodeOfType(declarator.id, "ArrayPattern")) continue;
+					const elements = declarator.id.elements ?? [];
+					if (elements.length <= destructureIndex) continue;
+					const element = elements[destructureIndex];
+					if (isNodeOfType(element, "Identifier") && element.name === bindingName) return true;
+				} else if (isNodeOfType(declarator.id, "Identifier") && declarator.id.name === bindingName) return true;
+			}
+		}
+		cursor = cursor.parent ?? null;
+	}
+	return false;
+};
+//#endregion
+//#region src/plugin/utils/is-use-state-setter-in-scope.ts
+const isUseStateSetterInScope = (node, setterName) => isHookBindingInScope(node, {
+	bindingName: setterName,
+	hookName: "useState",
+	destructureIndex: 1
+});
+//#endregion
 //#region src/plugin/rules/state-and-effects/no-cascading-set-state.ts
 const isAsyncFunctionLike = (node) => {
 	if (isNodeOfType(node, "ArrowFunctionExpression") || isNodeOfType(node, "FunctionExpression") || isNodeOfType(node, "FunctionDeclaration")) return Boolean(node.async);
@@ -14819,7 +14858,7 @@ const countMaxPathSetStateCalls = (node) => {
 		const finallyCount = node.finalizer ? countMaxPathSetStateCalls(node.finalizer) : 0;
 		return Math.max(tryCount, catchCount) + finallyCount;
 	}
-	if (isSetterCall(node)) {
+	if (isNodeOfType(node, "CallExpression") && isSetterCall(node) && isNodeOfType(node.callee, "Identifier") && isUseStateSetterInScope(node, node.callee.name)) {
 		let nestedSettersInArgs = 0;
 		for (const argument of node.arguments ?? []) nestedSettersInArgs += countMaxPathSetStateCalls(argument);
 		return 1 + nestedSettersInArgs;
@@ -15405,6 +15444,7 @@ const noDarkModeGlow = defineRule({
 	title: "Colored glow on dark background",
 	tags: ["design", "test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	recommendation: "Use a subtle `box-shadow` in neutral colors for depth, or a faint `border`. Colored glows on dark backgrounds look overdone.",
 	create: (context) => ({ JSXAttribute(node) {
 		const expression = getInlineStyleExpression(node);
@@ -15439,6 +15479,7 @@ const noDefaultProps = defineRule({
 	requires: ["react:19"],
 	tags: ["test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	recommendation: "React 19 drops `Component.defaultProps` for function components. Set the defaults in the destructured props instead: `function Foo({ size = \"md\", variant = \"primary\" })` instead of `Foo.defaultProps = { size: \"md\", variant: \"primary\" }`.",
 	create: (context) => ({ AssignmentExpression(node) {
 		if (node.operator !== "=") return;
@@ -15618,7 +15659,11 @@ const noDerivedStateEffect = defineRule({
 		if (statements.length === 0) return;
 		if (!statements.every((statement) => {
 			if (!isNodeOfType(statement, "ExpressionStatement")) return false;
-			return isSetterCall(statement.expression);
+			const expression = statement.expression;
+			if (!isSetterCall(expression)) return false;
+			if (!isNodeOfType(expression, "CallExpression")) return false;
+			if (!isNodeOfType(expression.callee, "Identifier")) return false;
+			return isUseStateSetterInScope(expression, expression.callee.name);
 		})) return;
 		let allArgumentsDeriveFromDeps = true;
 		let hasAnyDependencyReference = false;
@@ -17611,6 +17656,7 @@ const noGenericHandlerNames = defineRule({
 	id: "no-generic-handler-names",
 	title: "Vague event handler name",
 	severity: "warn",
+	defaultEnabled: false,
 	tags: ["test-noise"],
 	recommendation: "Rename it to say what it does. For example `handleSubmit` could be `saveUserProfile`, and `handleClick` could be `toggleSidebar`.",
 	create: (context) => ({ JSXAttribute(node) {
@@ -17812,6 +17858,7 @@ const noGradientText = defineRule({
 	title: "Gradient text is hard to read",
 	tags: ["design", "test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	recommendation: "Use a solid text color so it stays readable. For emphasis, change the weight, size, or color instead of using a gradient.",
 	create: (context) => ({
 		JSXAttribute(node) {
@@ -18098,6 +18145,7 @@ const noJustifiedText = defineRule({
 	title: "Justified text without hyphens",
 	tags: ["test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	category: "Accessibility",
 	recommendation: "Use `text-align: left` for body text. If you must justify, add `hyphens: auto` and `overflow-wrap: break-word`.",
 	create: (context) => ({ JSXAttribute(node) {
@@ -20345,6 +20393,7 @@ const noPropTypes = defineRule({
 	requires: ["react:19"],
 	tags: ["test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	recommendation: "React 19 ignores `Component.propTypes`, so invalid props pass silently. Describe props with TypeScript types and add real runtime checks (or schema parsing) only where data can actually be wrong. Only runs on React 19+ projects.",
 	create: (context) => ({
 		AssignmentExpression(node) {
@@ -20373,6 +20422,7 @@ const noPureBlackBackground = defineRule({
 	title: "Pure black background",
 	tags: ["design", "test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	recommendation: "Nudge the background slightly toward your brand color, like `#0a0a0f` or Tailwind's `bg-gray-950`. Pure black looks harsh on modern screens.",
 	create: (context) => ({
 		JSXAttribute(node) {
@@ -21802,6 +21852,7 @@ const noSideTabBorder = defineRule({
 	title: "Thick one-sided border",
 	tags: ["design", "test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	recommendation: "Use a softer accent like an inset box-shadow, a background, or a thin border-bottom instead of a thick one-sided border.",
 	create: (context) => ({
 		JSXAttribute(node) {
@@ -23680,15 +23731,46 @@ const noUsememoSimpleExpression = defineRule({
 });
 //#endregion
 //#region src/plugin/rules/design/no-wide-letter-spacing.ts
+const getJsxAttributeStringValue = (attributeValue) => {
+	if (!attributeValue) return null;
+	if (isNodeOfType(attributeValue, "Literal") && typeof attributeValue.value === "string") return attributeValue.value;
+	if (isNodeOfType(attributeValue, "JSXExpressionContainer")) {
+		const expression = attributeValue.expression;
+		if (isNodeOfType(expression, "Literal") && typeof expression.value === "string") return expression.value;
+	}
+	return null;
+};
+const isTruthyBooleanJsxAttribute = (attributeValue) => {
+	if (attributeValue === null) return true;
+	if (isNodeOfType(attributeValue, "JSXExpressionContainer")) {
+		const expression = attributeValue.expression;
+		return isNodeOfType(expression, "Literal") && expression.value === true;
+	}
+	return false;
+};
+const hasUppercaseSiblingProp = (styleAttribute) => {
+	const openingElement = styleAttribute.parent;
+	if (!openingElement || !isNodeOfType(openingElement, "JSXOpeningElement")) return false;
+	for (const attribute of openingElement.attributes ?? []) {
+		if (!isNodeOfType(attribute, "JSXAttribute")) continue;
+		if (!isNodeOfType(attribute.name, "JSXIdentifier")) continue;
+		const attributeName = attribute.name.name;
+		if (attributeName === "uppercase" && isTruthyBooleanJsxAttribute(attribute.value)) return true;
+		if (attributeName === "textTransform" && getJsxAttributeStringValue(attribute.value) === "uppercase") return true;
+	}
+	return false;
+};
 const noWideLetterSpacing = defineRule({
 	id: "no-wide-letter-spacing",
 	title: "Wide letter spacing on body text",
 	severity: "warn",
+	defaultEnabled: false,
 	tags: ["test-noise"],
 	recommendation: "Save wide letter-spacing (over 0.05em) for short uppercase labels, nav items, and buttons, not body text.",
 	create: (context) => ({ JSXAttribute(node) {
 		const expression = getInlineStyleExpression(node);
 		if (!expression) return;
+		if (hasUppercaseSiblingProp(node)) return;
 		let isUppercase = false;
 		let letterSpacingProperty = null;
 		let letterSpacingEm = null;
@@ -23766,6 +23848,7 @@ const noZIndex9999 = defineRule({
 	title: "Excessively high z-index",
 	tags: ["test-noise"],
 	severity: "warn",
+	defaultEnabled: false,
 	recommendation: "Pick a small z-index scale, like dropdown 10, modal 20, toast 30. To layer something on top, use `isolation: isolate` instead of bigger numbers.",
 	create: (context) => ({
 		JSXAttribute(node) {
@@ -24541,6 +24624,7 @@ const preferEs6Class = defineRule({
 	id: "prefer-es6-class",
 	title: "createClass instead of ES6 class",
 	severity: "warn",
+	defaultEnabled: false,
 	recommendation: "Pick one component style for the whole codebase: `class extends React.Component` (default) or `createReactClass` (legacy).",
 	category: "Architecture",
 	create: (context) => {
@@ -24851,6 +24935,7 @@ const preferModuleScopeStaticValue = defineRule({
 	tags: ["test-noise"],
 	severity: "warn",
 	category: "Architecture",
+	disabledBy: ["react-compiler"],
 	recommendation: "Move the value above the component, at the top of the file. It doesn't use local state, so rebuilding it each update is wasted and makes it look new every time.",
 	create: (context) => ({ VariableDeclarator(node) {
 		if (!isNodeOfType(node.id, "Identifier")) return;
@@ -25918,7 +26003,9 @@ const renderingHydrationNoFlicker = defineRule({
 		const bodyStatements = isNodeOfType(callback.body, "BlockStatement") ? callback.body.body : [callback.body];
 		if (!bodyStatements || bodyStatements.length !== 1) return;
 		const soleStatement = bodyStatements[0];
-		if (isNodeOfType(soleStatement, "ExpressionStatement") && isSetterCall(soleStatement.expression)) context.report({
+		if (!isNodeOfType(soleStatement, "ExpressionStatement")) return;
+		const expression = soleStatement.expression;
+		if (isSetterCall(expression) && isNodeOfType(expression, "CallExpression") && isNodeOfType(expression.callee, "Identifier") && isUseStateSetterInScope(expression, expression.callee.name)) context.report({
 			node,
 			message: "This flashes for your users because useEffect(setState, []) runs after the first paint, so use useSyncExternalStore, or add suppressHydrationWarning"
 		});
@@ -26441,6 +26528,7 @@ const rerenderFunctionalSetstate = defineRule({
 		if (!isSetterCall(node)) return;
 		if (!node.arguments?.length) return;
 		if (!isNodeOfType(node.callee, "Identifier")) return;
+		if (!isUseStateSetterInScope(node, node.callee.name)) return;
 		const calleeName = node.callee.name;
 		const argument = node.arguments[0];
 		const expectedStateName = deriveStateVariableName(calleeName);
@@ -26775,7 +26863,7 @@ const handlerCallsSetState = (handler) => {
 	let setStateCall = null;
 	walkAst(handler.body, (child) => {
 		if (setStateCall) return;
-		if (isNodeOfType(child, "CallExpression") && isNodeOfType(child.callee, "Identifier") && /^set[A-Z]/.test(child.callee.name)) setStateCall = child;
+		if (isNodeOfType(child, "CallExpression") && isNodeOfType(child.callee, "Identifier") && /^set[A-Z]/.test(child.callee.name) && isUseStateSetterInScope(child, child.callee.name)) setStateCall = child;
 	});
 	return setStateCall;
 };
@@ -26807,76 +26895,22 @@ const rerenderTransitionsScroll = defineRule({
 	} })
 });
 //#endregion
+//#region src/plugin/utils/define-retired-rule.ts
+const defineRetiredRule = (rule) => defineRule({
+	...rule,
+	defaultEnabled: false,
+	lifecycle: "retired",
+	create: () => ({})
+});
+//#endregion
 //#region src/plugin/rules/react-native/rn-animate-layout-property.ts
-const REANIMATED_LAYOUT_KEYS = new Set([
-	"width",
-	"height",
-	"top",
-	"left",
-	"right",
-	"bottom",
-	"minWidth",
-	"minHeight",
-	"maxWidth",
-	"maxHeight",
-	"margin",
-	"marginTop",
-	"marginBottom",
-	"marginLeft",
-	"marginRight",
-	"marginHorizontal",
-	"marginVertical",
-	"padding",
-	"paddingTop",
-	"paddingBottom",
-	"paddingLeft",
-	"paddingRight",
-	"paddingHorizontal",
-	"paddingVertical",
-	"flex",
-	"flexBasis",
-	"flexGrow",
-	"flexShrink",
-	"borderWidth",
-	"borderTopWidth",
-	"borderBottomWidth",
-	"borderLeftWidth",
-	"borderRightWidth",
-	"fontSize",
-	"lineHeight",
-	"letterSpacing"
-]);
-const findReturnedObject = (callback) => {
-	if (!isNodeOfType(callback, "ArrowFunctionExpression") && !isNodeOfType(callback, "FunctionExpression")) return null;
-	const body = callback.body;
-	if (isNodeOfType(body, "ObjectExpression")) return body;
-	if (!isNodeOfType(body, "BlockStatement")) return null;
-	for (const stmt of body.body ?? []) if (isNodeOfType(stmt, "ReturnStatement") && isNodeOfType(stmt.argument, "ObjectExpression")) return stmt.argument;
-	return null;
-};
-const rnAnimateLayoutProperty = defineRule({
+const rnAnimateLayoutProperty = defineRetiredRule({
 	id: "rn-animate-layout-property",
 	title: "Animating a layout property",
 	tags: ["test-noise"],
 	requires: ["react-native"],
-	severity: "error",
-	recommendation: "Animating size or position props runs on the JS thread and can stutter. Animate `transform: [{ translateX/Y }, { scale }]` or `opacity` instead, which run on the GPU.",
-	create: (context) => ({ CallExpression(node) {
-		if (!isNodeOfType(node.callee, "Identifier") || node.callee.name !== "useAnimatedStyle") return;
-		const callback = node.arguments?.[0];
-		if (!callback) return;
-		const returnedObject = findReturnedObject(callback);
-		if (!returnedObject) return;
-		for (const property of returnedObject.properties ?? []) {
-			if (!isNodeOfType(property, "Property")) continue;
-			if (!isNodeOfType(property.key, "Identifier")) continue;
-			if (!REANIMATED_LAYOUT_KEYS.has(property.key.name)) continue;
-			context.report({
-				node: property,
-				message: `Your users see stutter when useAnimatedStyle animates "${property.key.name}" on the layout thread.`
-			});
-		}
-	} })
+	severity: "warn",
+	recommendation: "Reanimated useAnimatedStyle runs on the UI thread; layout-affecting properties driven by animation helpers, interpolate, or shared values are valid."
 });
 //#endregion
 //#region src/plugin/rules/react-native/rn-animation-reaction-as-derived.ts
@@ -28077,7 +28111,7 @@ const findSetStateInBody = (body) => {
 	let setStateCallNode = null;
 	walkAst(body, (child) => {
 		if (setStateCallNode) return;
-		if (isNodeOfType(child, "CallExpression") && isNodeOfType(child.callee, "Identifier") && SET_STATE_PATTERN.test(child.callee.name)) setStateCallNode = child;
+		if (isNodeOfType(child, "CallExpression") && isNodeOfType(child.callee, "Identifier") && SET_STATE_PATTERN.test(child.callee.name) && isUseStateSetterInScope(child, child.callee.name)) setStateCallNode = child;
 	});
 	return setStateCallNode;
 };
@@ -28203,14 +28237,6 @@ const rnNoSingleElementStyleArray = defineRule({
 	} })
 });
 //#endregion
-//#region src/plugin/utils/define-retired-rule.ts
-const defineRetiredRule = (rule) => defineRule({
-	...rule,
-	defaultEnabled: false,
-	lifecycle: "retired",
-	create: () => ({})
-});
-//#endregion
 //#region src/plugin/rules/react-native/rn-prefer-content-inset-adjustment.ts
 const rnPreferContentInsetAdjustment = defineRetiredRule({
 	id: "rn-prefer-content-inset-adjustment",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oxlint-plugin-react-doctor",
-  "version": "0.2.18-dev.4dc48d7",
+  "version": "0.2.18-dev.67be206",
   "description": "oxlint plugin for React Doctor: diagnose React codebases for security, performance, correctness, accessibility, bundle-size, and architecture issues",
   "keywords": [
     "accessibility",