oxlint-plugin-react-doctor 0.2.18-dev.abbb042 → 0.2.18-dev.cbdff62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +64 -7
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import path from "node:path";
|
|
1
|
+
import * as path from "node:path";
|
|
2
2
|
import { analyze } from "eslint-scope";
|
|
3
3
|
import * as eslintVisitorKeys from "eslint-visitor-keys";
|
|
4
|
-
import fs from "node:fs";
|
|
4
|
+
import * as fs from "node:fs";
|
|
5
5
|
import { parseSync } from "oxc-parser";
|
|
6
6
|
//#region src/plugin/utils/is-testlike-filename.ts
|
|
7
7
|
const NON_PRODUCTION_PATH_SEGMENTS = [
|
|
@@ -3954,6 +3954,7 @@ const noEmDashInJsxText = defineRule({
|
|
|
3954
3954
|
title: "Em dash in JSX text",
|
|
3955
3955
|
tags: ["design", "test-noise"],
|
|
3956
3956
|
severity: "warn",
|
|
3957
|
+
defaultEnabled: false,
|
|
3957
3958
|
category: "Architecture",
|
|
3958
3959
|
recommendation: "Replace em dashes in UI text with commas, colons, semicolons, or parentheses so the copy reads less like AI output.",
|
|
3959
3960
|
create: (context) => ({ JSXText(jsxTextNode) {
|
|
@@ -4000,6 +4001,7 @@ const noRedundantPaddingAxes = defineRule({
|
|
|
4000
4001
|
title: "Redundant padding axes",
|
|
4001
4002
|
tags: ["design", "test-noise"],
|
|
4002
4003
|
severity: "warn",
|
|
4004
|
+
defaultEnabled: false,
|
|
4003
4005
|
category: "Architecture",
|
|
4004
4006
|
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`).",
|
|
4005
4007
|
create: (context) => ({ JSXAttribute(jsxAttribute) {
|
|
@@ -4023,6 +4025,7 @@ const noRedundantSizeAxes = defineRule({
|
|
|
4023
4025
|
requires: ["tailwind:3.4"],
|
|
4024
4026
|
tags: ["design", "test-noise"],
|
|
4025
4027
|
severity: "warn",
|
|
4028
|
+
defaultEnabled: false,
|
|
4026
4029
|
category: "Architecture",
|
|
4027
4030
|
recommendation: "Collapse `w-N h-N` to `size-N` (Tailwind v3.4+) when both sides match.",
|
|
4028
4031
|
create: (context) => ({ JSXAttribute(jsxAttribute) {
|
|
@@ -4046,6 +4049,7 @@ const noSpaceOnFlexChildren = defineRule({
|
|
|
4046
4049
|
title: "space-* utility on flex children",
|
|
4047
4050
|
tags: ["design", "test-noise"],
|
|
4048
4051
|
severity: "warn",
|
|
4052
|
+
defaultEnabled: false,
|
|
4049
4053
|
category: "Architecture",
|
|
4050
4054
|
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.",
|
|
4051
4055
|
create: (context) => ({ JSXAttribute(jsxAttribute) {
|
|
@@ -4079,6 +4083,7 @@ const noThreePeriodEllipsis = defineRule({
|
|
|
4079
4083
|
title: "Three dots instead of ellipsis",
|
|
4080
4084
|
tags: ["design", "test-noise"],
|
|
4081
4085
|
severity: "warn",
|
|
4086
|
+
defaultEnabled: false,
|
|
4082
4087
|
category: "Architecture",
|
|
4083
4088
|
recommendation: "Use the real ellipsis \"…\" (or `…`) instead of three dots. Good for labels like \"Rename…\" and \"Loading…\".",
|
|
4084
4089
|
create: (context) => ({ JSXText(jsxTextNode) {
|
|
@@ -4138,6 +4143,7 @@ const noVagueButtonLabel = defineRule({
|
|
|
4138
4143
|
title: "Vague button label",
|
|
4139
4144
|
tags: ["design", "test-noise"],
|
|
4140
4145
|
severity: "warn",
|
|
4146
|
+
defaultEnabled: false,
|
|
4141
4147
|
recommendation: "Name the action: \"Save changes\" instead of \"Continue\", \"Send invite\" instead of \"Submit\". The label is the button's accessible name.",
|
|
4142
4148
|
create: (context) => ({ JSXElement(jsxElementNode) {
|
|
4143
4149
|
const tagName = getOpeningElementTagName(jsxElementNode.openingElement);
|
|
@@ -11808,6 +11814,7 @@ const jsxPascalCase = defineRule({
|
|
|
11808
11814
|
id: "jsx-pascal-case",
|
|
11809
11815
|
title: "Component name not PascalCase",
|
|
11810
11816
|
severity: "warn",
|
|
11817
|
+
defaultEnabled: false,
|
|
11811
11818
|
tags: ["test-noise"],
|
|
11812
11819
|
recommendation: "Rename custom JSX components to PascalCase.",
|
|
11813
11820
|
category: "Architecture",
|
|
@@ -14266,6 +14273,7 @@ const noArrayIndexKey = defineRule({
|
|
|
14266
14273
|
id: "no-array-index-key",
|
|
14267
14274
|
title: "Array index used as a key",
|
|
14268
14275
|
severity: "warn",
|
|
14276
|
+
defaultEnabled: false,
|
|
14269
14277
|
recommendation: "Use a stable `key` from your data instead of the array index.",
|
|
14270
14278
|
category: "Performance",
|
|
14271
14279
|
create: (context) => ({
|
|
@@ -14778,6 +14786,37 @@ const isSetterIdentifier = (name) => SETTER_PATTERN.test(name);
|
|
|
14778
14786
|
//#region src/plugin/utils/is-setter-call.ts
|
|
14779
14787
|
const isSetterCall = (node) => isNodeOfType(node, "CallExpression") && isNodeOfType(node.callee, "Identifier") && isSetterIdentifier(node.callee.name);
|
|
14780
14788
|
//#endregion
|
|
14789
|
+
//#region src/plugin/utils/is-hook-binding-in-scope.ts
|
|
14790
|
+
const isHookBindingInScope = (node, query) => {
|
|
14791
|
+
const { bindingName, hookName, destructureIndex } = query;
|
|
14792
|
+
let cursor = node;
|
|
14793
|
+
while (cursor) {
|
|
14794
|
+
if (isNodeOfType(cursor, "BlockStatement") || isNodeOfType(cursor, "Program")) for (const statement of cursor.body ?? []) {
|
|
14795
|
+
if (!isNodeOfType(statement, "VariableDeclaration")) continue;
|
|
14796
|
+
for (const declarator of statement.declarations ?? []) {
|
|
14797
|
+
if (!isNodeOfType(declarator.init, "CallExpression")) continue;
|
|
14798
|
+
if (!isHookCall$1(declarator.init, hookName)) continue;
|
|
14799
|
+
if (destructureIndex !== void 0) {
|
|
14800
|
+
if (!isNodeOfType(declarator.id, "ArrayPattern")) continue;
|
|
14801
|
+
const elements = declarator.id.elements ?? [];
|
|
14802
|
+
if (elements.length <= destructureIndex) continue;
|
|
14803
|
+
const element = elements[destructureIndex];
|
|
14804
|
+
if (isNodeOfType(element, "Identifier") && element.name === bindingName) return true;
|
|
14805
|
+
} else if (isNodeOfType(declarator.id, "Identifier") && declarator.id.name === bindingName) return true;
|
|
14806
|
+
}
|
|
14807
|
+
}
|
|
14808
|
+
cursor = cursor.parent ?? null;
|
|
14809
|
+
}
|
|
14810
|
+
return false;
|
|
14811
|
+
};
|
|
14812
|
+
//#endregion
|
|
14813
|
+
//#region src/plugin/utils/is-use-state-setter-in-scope.ts
|
|
14814
|
+
const isUseStateSetterInScope = (node, setterName) => isHookBindingInScope(node, {
|
|
14815
|
+
bindingName: setterName,
|
|
14816
|
+
hookName: "useState",
|
|
14817
|
+
destructureIndex: 1
|
|
14818
|
+
});
|
|
14819
|
+
//#endregion
|
|
14781
14820
|
//#region src/plugin/rules/state-and-effects/no-cascading-set-state.ts
|
|
14782
14821
|
const isAsyncFunctionLike = (node) => {
|
|
14783
14822
|
if (isNodeOfType(node, "ArrowFunctionExpression") || isNodeOfType(node, "FunctionExpression") || isNodeOfType(node, "FunctionDeclaration")) return Boolean(node.async);
|
|
@@ -14819,7 +14858,7 @@ const countMaxPathSetStateCalls = (node) => {
|
|
|
14819
14858
|
const finallyCount = node.finalizer ? countMaxPathSetStateCalls(node.finalizer) : 0;
|
|
14820
14859
|
return Math.max(tryCount, catchCount) + finallyCount;
|
|
14821
14860
|
}
|
|
14822
|
-
if (isSetterCall(node)) {
|
|
14861
|
+
if (isNodeOfType(node, "CallExpression") && isSetterCall(node) && isNodeOfType(node.callee, "Identifier") && isUseStateSetterInScope(node, node.callee.name)) {
|
|
14823
14862
|
let nestedSettersInArgs = 0;
|
|
14824
14863
|
for (const argument of node.arguments ?? []) nestedSettersInArgs += countMaxPathSetStateCalls(argument);
|
|
14825
14864
|
return 1 + nestedSettersInArgs;
|
|
@@ -15405,6 +15444,7 @@ const noDarkModeGlow = defineRule({
|
|
|
15405
15444
|
title: "Colored glow on dark background",
|
|
15406
15445
|
tags: ["design", "test-noise"],
|
|
15407
15446
|
severity: "warn",
|
|
15447
|
+
defaultEnabled: false,
|
|
15408
15448
|
recommendation: "Use a subtle `box-shadow` in neutral colors for depth, or a faint `border`. Colored glows on dark backgrounds look overdone.",
|
|
15409
15449
|
create: (context) => ({ JSXAttribute(node) {
|
|
15410
15450
|
const expression = getInlineStyleExpression(node);
|
|
@@ -15439,6 +15479,7 @@ const noDefaultProps = defineRule({
|
|
|
15439
15479
|
requires: ["react:19"],
|
|
15440
15480
|
tags: ["test-noise"],
|
|
15441
15481
|
severity: "warn",
|
|
15482
|
+
defaultEnabled: false,
|
|
15442
15483
|
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\" }`.",
|
|
15443
15484
|
create: (context) => ({ AssignmentExpression(node) {
|
|
15444
15485
|
if (node.operator !== "=") return;
|
|
@@ -15618,7 +15659,11 @@ const noDerivedStateEffect = defineRule({
|
|
|
15618
15659
|
if (statements.length === 0) return;
|
|
15619
15660
|
if (!statements.every((statement) => {
|
|
15620
15661
|
if (!isNodeOfType(statement, "ExpressionStatement")) return false;
|
|
15621
|
-
|
|
15662
|
+
const expression = statement.expression;
|
|
15663
|
+
if (!isSetterCall(expression)) return false;
|
|
15664
|
+
if (!isNodeOfType(expression, "CallExpression")) return false;
|
|
15665
|
+
if (!isNodeOfType(expression.callee, "Identifier")) return false;
|
|
15666
|
+
return isUseStateSetterInScope(expression, expression.callee.name);
|
|
15622
15667
|
})) return;
|
|
15623
15668
|
let allArgumentsDeriveFromDeps = true;
|
|
15624
15669
|
let hasAnyDependencyReference = false;
|
|
@@ -17611,6 +17656,7 @@ const noGenericHandlerNames = defineRule({
|
|
|
17611
17656
|
id: "no-generic-handler-names",
|
|
17612
17657
|
title: "Vague event handler name",
|
|
17613
17658
|
severity: "warn",
|
|
17659
|
+
defaultEnabled: false,
|
|
17614
17660
|
tags: ["test-noise"],
|
|
17615
17661
|
recommendation: "Rename it to say what it does. For example `handleSubmit` could be `saveUserProfile`, and `handleClick` could be `toggleSidebar`.",
|
|
17616
17662
|
create: (context) => ({ JSXAttribute(node) {
|
|
@@ -17812,6 +17858,7 @@ const noGradientText = defineRule({
|
|
|
17812
17858
|
title: "Gradient text is hard to read",
|
|
17813
17859
|
tags: ["design", "test-noise"],
|
|
17814
17860
|
severity: "warn",
|
|
17861
|
+
defaultEnabled: false,
|
|
17815
17862
|
recommendation: "Use a solid text color so it stays readable. For emphasis, change the weight, size, or color instead of using a gradient.",
|
|
17816
17863
|
create: (context) => ({
|
|
17817
17864
|
JSXAttribute(node) {
|
|
@@ -18098,6 +18145,7 @@ const noJustifiedText = defineRule({
|
|
|
18098
18145
|
title: "Justified text without hyphens",
|
|
18099
18146
|
tags: ["test-noise"],
|
|
18100
18147
|
severity: "warn",
|
|
18148
|
+
defaultEnabled: false,
|
|
18101
18149
|
category: "Accessibility",
|
|
18102
18150
|
recommendation: "Use `text-align: left` for body text. If you must justify, add `hyphens: auto` and `overflow-wrap: break-word`.",
|
|
18103
18151
|
create: (context) => ({ JSXAttribute(node) {
|
|
@@ -20345,6 +20393,7 @@ const noPropTypes = defineRule({
|
|
|
20345
20393
|
requires: ["react:19"],
|
|
20346
20394
|
tags: ["test-noise"],
|
|
20347
20395
|
severity: "warn",
|
|
20396
|
+
defaultEnabled: false,
|
|
20348
20397
|
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.",
|
|
20349
20398
|
create: (context) => ({
|
|
20350
20399
|
AssignmentExpression(node) {
|
|
@@ -20373,6 +20422,7 @@ const noPureBlackBackground = defineRule({
|
|
|
20373
20422
|
title: "Pure black background",
|
|
20374
20423
|
tags: ["design", "test-noise"],
|
|
20375
20424
|
severity: "warn",
|
|
20425
|
+
defaultEnabled: false,
|
|
20376
20426
|
recommendation: "Nudge the background slightly toward your brand color, like `#0a0a0f` or Tailwind's `bg-gray-950`. Pure black looks harsh on modern screens.",
|
|
20377
20427
|
create: (context) => ({
|
|
20378
20428
|
JSXAttribute(node) {
|
|
@@ -21802,6 +21852,7 @@ const noSideTabBorder = defineRule({
|
|
|
21802
21852
|
title: "Thick one-sided border",
|
|
21803
21853
|
tags: ["design", "test-noise"],
|
|
21804
21854
|
severity: "warn",
|
|
21855
|
+
defaultEnabled: false,
|
|
21805
21856
|
recommendation: "Use a softer accent like an inset box-shadow, a background, or a thin border-bottom instead of a thick one-sided border.",
|
|
21806
21857
|
create: (context) => ({
|
|
21807
21858
|
JSXAttribute(node) {
|
|
@@ -23713,6 +23764,7 @@ const noWideLetterSpacing = defineRule({
|
|
|
23713
23764
|
id: "no-wide-letter-spacing",
|
|
23714
23765
|
title: "Wide letter spacing on body text",
|
|
23715
23766
|
severity: "warn",
|
|
23767
|
+
defaultEnabled: false,
|
|
23716
23768
|
tags: ["test-noise"],
|
|
23717
23769
|
recommendation: "Save wide letter-spacing (over 0.05em) for short uppercase labels, nav items, and buttons, not body text.",
|
|
23718
23770
|
create: (context) => ({ JSXAttribute(node) {
|
|
@@ -23796,6 +23848,7 @@ const noZIndex9999 = defineRule({
|
|
|
23796
23848
|
title: "Excessively high z-index",
|
|
23797
23849
|
tags: ["test-noise"],
|
|
23798
23850
|
severity: "warn",
|
|
23851
|
+
defaultEnabled: false,
|
|
23799
23852
|
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.",
|
|
23800
23853
|
create: (context) => ({
|
|
23801
23854
|
JSXAttribute(node) {
|
|
@@ -24571,6 +24624,7 @@ const preferEs6Class = defineRule({
|
|
|
24571
24624
|
id: "prefer-es6-class",
|
|
24572
24625
|
title: "createClass instead of ES6 class",
|
|
24573
24626
|
severity: "warn",
|
|
24627
|
+
defaultEnabled: false,
|
|
24574
24628
|
recommendation: "Pick one component style for the whole codebase: `class extends React.Component` (default) or `createReactClass` (legacy).",
|
|
24575
24629
|
category: "Architecture",
|
|
24576
24630
|
create: (context) => {
|
|
@@ -25949,7 +26003,9 @@ const renderingHydrationNoFlicker = defineRule({
|
|
|
25949
26003
|
const bodyStatements = isNodeOfType(callback.body, "BlockStatement") ? callback.body.body : [callback.body];
|
|
25950
26004
|
if (!bodyStatements || bodyStatements.length !== 1) return;
|
|
25951
26005
|
const soleStatement = bodyStatements[0];
|
|
25952
|
-
if (isNodeOfType(soleStatement, "ExpressionStatement")
|
|
26006
|
+
if (!isNodeOfType(soleStatement, "ExpressionStatement")) return;
|
|
26007
|
+
const expression = soleStatement.expression;
|
|
26008
|
+
if (isSetterCall(expression) && isNodeOfType(expression, "CallExpression") && isNodeOfType(expression.callee, "Identifier") && isUseStateSetterInScope(expression, expression.callee.name)) context.report({
|
|
25953
26009
|
node,
|
|
25954
26010
|
message: "This flashes for your users because useEffect(setState, []) runs after the first paint, so use useSyncExternalStore, or add suppressHydrationWarning"
|
|
25955
26011
|
});
|
|
@@ -26472,6 +26528,7 @@ const rerenderFunctionalSetstate = defineRule({
|
|
|
26472
26528
|
if (!isSetterCall(node)) return;
|
|
26473
26529
|
if (!node.arguments?.length) return;
|
|
26474
26530
|
if (!isNodeOfType(node.callee, "Identifier")) return;
|
|
26531
|
+
if (!isUseStateSetterInScope(node, node.callee.name)) return;
|
|
26475
26532
|
const calleeName = node.callee.name;
|
|
26476
26533
|
const argument = node.arguments[0];
|
|
26477
26534
|
const expectedStateName = deriveStateVariableName(calleeName);
|
|
@@ -26806,7 +26863,7 @@ const handlerCallsSetState = (handler) => {
|
|
|
26806
26863
|
let setStateCall = null;
|
|
26807
26864
|
walkAst(handler.body, (child) => {
|
|
26808
26865
|
if (setStateCall) return;
|
|
26809
|
-
if (isNodeOfType(child, "CallExpression") && isNodeOfType(child.callee, "Identifier") && /^set[A-Z]/.test(child.callee.name)) setStateCall = child;
|
|
26866
|
+
if (isNodeOfType(child, "CallExpression") && isNodeOfType(child.callee, "Identifier") && /^set[A-Z]/.test(child.callee.name) && isUseStateSetterInScope(child, child.callee.name)) setStateCall = child;
|
|
26810
26867
|
});
|
|
26811
26868
|
return setStateCall;
|
|
26812
26869
|
};
|
|
@@ -28054,7 +28111,7 @@ const findSetStateInBody = (body) => {
|
|
|
28054
28111
|
let setStateCallNode = null;
|
|
28055
28112
|
walkAst(body, (child) => {
|
|
28056
28113
|
if (setStateCallNode) return;
|
|
28057
|
-
if (isNodeOfType(child, "CallExpression") && isNodeOfType(child.callee, "Identifier") && SET_STATE_PATTERN.test(child.callee.name)) setStateCallNode = child;
|
|
28114
|
+
if (isNodeOfType(child, "CallExpression") && isNodeOfType(child.callee, "Identifier") && SET_STATE_PATTERN.test(child.callee.name) && isUseStateSetterInScope(child, child.callee.name)) setStateCallNode = child;
|
|
28058
28115
|
});
|
|
28059
28116
|
return setStateCallNode;
|
|
28060
28117
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "oxlint-plugin-react-doctor",
|
|
3
|
-
"version": "0.2.18-dev.
|
|
3
|
+
"version": "0.2.18-dev.cbdff62",
|
|
4
4
|
"description": "oxlint plugin for React Doctor: diagnose React codebases for security, performance, correctness, accessibility, bundle-size, and architecture issues",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"accessibility",
|