fix: reimplement 'naming-convention/use-state', closes #953 (#954)

Author: Rel1cx

packages/plugins/eslint-plugin-react-naming-convention/package.json

@@ -53,6 +53,7 @@
     "@eslint-react/core": "workspace:*",
     "@eslint-react/eff": "workspace:*",
     "@eslint-react/jsx": "workspace:*",
+    "@eslint-react/var": "workspace:*",
     "@eslint-react/shared": "workspace:*",
     "@typescript-eslint/scope-manager": "^8.25.0",
     "@typescript-eslint/type-utils": "^8.25.0",

packages/plugins/eslint-plugin-react-naming-convention/src/rules/use-state.spec.ts

@@ -12,33 +12,20 @@ ruleTester.run(RULE_NAME, rule, {
         }
       `,
       errors: [{
-        messageId: "unexpected",
-        data: {
-          setterName: "setState",
-          stateName: "state",
-        },
+        messageId: "badValueOrSetterName",
       }],
     },
     {
       code: /* tsx */ `
         function Component() {
-          const [state, setValue] = useState(0);
+          const [state, set] = useState(0);
 
           return <div />;
         }
       `,
       errors: [{
-        messageId: "unexpected",
-        data: {
-          setterName: "setState",
-          stateName: "state",
-        },
+        messageId: "badValueOrSetterName",
       }],
-      settings: {
-        "react-x": {
-          skipImportCheck: true,
-        },
-      },
     },
     {
       code: /* tsx */ `
@@ -51,11 +38,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       `,
       errors: [{
-        messageId: "unexpected",
-        data: {
-          setterName: "setState",
-          stateName: "state",
-        },
+        messageId: "badValueOrSetterName",
       }],
     },
     {
@@ -69,11 +52,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       `,
       errors: [{
-        messageId: "unexpected",
-        data: {
-          setterName: "setState",
-          stateName: "state",
-        },
+        messageId: "badValueOrSetterName",
       }],
     },
     {
@@ -87,37 +66,35 @@ ruleTester.run(RULE_NAME, rule, {
         }
       `,
       errors: [{
-        messageId: "unexpected",
-        data: {
-          setterName: "setState",
-          stateName: "state",
-        },
+        messageId: "badValueOrSetterName",
       }],
     },
     {
       code: /* tsx */ `
         import { useState } from "react";
 
         function Component() {
-          const [state, setstate] = useLocalStorageState(0);
+          const [{foo, bar, baz}, setFooBar] = useState({foo: "bbb", bar: "aaa", baz: "qqq"})
 
           return <div />;
         }
       `,
       errors: [{
-        messageId: "unexpected",
-        data: {
-          setterName: "setState",
-          stateName: "state",
-        },
+        messageId: "badValueOrSetterName",
+      }],
+    },
+    {
+      code: /* tsx */ `
+        import { useState } from 'react';
+
+        export function useTest(): [number, (n: number) => void] {
+          const [count1, setCount] = useState(0);
+          return [count1, setCount];
+        }
+      `,
+      errors: [{
+        messageId: "badValueOrSetterName",
       }],
-      settings: {
-        "react-x": {
-          additionalHooks: {
-            useState: ["useLocalStorageState"],
-          },
-        },
-      },
     },
   ],
   valid: [
@@ -149,19 +126,13 @@ ruleTester.run(RULE_NAME, rule, {
         return <div />;
       }
     `,
-    {
-      code: /* tsx */ `
-        function Component() {
-          const [state, setValue] = useState(0);
+    /* tsx */ `
+      import { useState } from 'react';
 
-          return <div />;
-        }
-      `,
-      settings: {
-        "react-x": {
-          skipImportCheck: false,
-        },
-      },
-    },
+      export function useTest(): [number, (n: number) => void] {
+        const [count, setCount] = useState(0);
+        return [count, setCount];
+      }
+    `,
   ],
 });

packages/plugins/eslint-plugin-react-naming-convention/src/rules/use-state.ts

@@ -1,13 +1,10 @@
-import {
-  DEFAULT_COMPONENT_HINT,
-  isReactHookCallWithNameLoose,
-  isUseStateCall,
-  useComponentCollector,
-} from "@eslint-react/core";
+import { _ } from "@eslint-react/eff";
 import type { RuleFeature } from "@eslint-react/shared";
-import { getSettingsFromContext } from "@eslint-react/shared";
+import * as VAR from "@eslint-react/var";
+import type { TSESTree } from "@typescript-eslint/types";
 import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
-import { capitalize } from "string-ts";
+import { snakeCase } from "string-ts";
+import { match } from "ts-pattern";
 
 import { createRule } from "../utils";
 
@@ -17,15 +14,7 @@ export const RULE_FEATURES = [
   "CHK",
 ] as const satisfies RuleFeature[];
 
-export type MessageID = "unexpected";
-
-function isSetterNameLoose(name: string) {
-  // eslint-disable-next-line @typescript-eslint/no-misused-spread
-  const fourthChar = [...name][3];
-
-  return name.startsWith("set")
-    && fourthChar === fourthChar?.toUpperCase();
-}
+export type MessageID = "badValueOrSetterName";
 
 export default createRule<[], MessageID>({
   meta: {
@@ -35,66 +24,49 @@ export default createRule<[], MessageID>({
       [Symbol.for("rule_features")]: RULE_FEATURES,
     },
     messages: {
-      unexpected: "An useState call is not destructured into value + setter pair.",
+      badValueOrSetterName: "An useState call is not destructured into value + setter pair.",
     },
     schema: [],
   },
   name: RULE_NAME,
   create(context) {
-    const alias = getSettingsFromContext(context).additionalHooks.useState ?? [];
-    const {
-      ctx,
-      listeners,
-    } = useComponentCollector(
-      context,
-      {
-        collectDisplayName: false,
-        collectHookCalls: true,
-        hint: DEFAULT_COMPONENT_HINT,
-      },
-    );
-
     return {
-      ...listeners,
-      "Program:exit"(node) {
-        const components = ctx.getAllComponents(node);
-        for (const { hookCalls } of components.values()) {
-          if (hookCalls.length === 0) {
-            continue;
-          }
-          for (const hookCall of hookCalls) {
-            if (!isUseStateCall(context, hookCall) && !alias.some(isReactHookCallWithNameLoose(hookCall))) {
-              continue;
-            }
-            if (hookCall.parent.type !== T.VariableDeclarator) {
-              continue;
-            }
-            const { id } = hookCall.parent;
-            switch (id.type) {
-              case T.Identifier: {
-                context.report({ messageId: "unexpected", node: id });
-                break;
-              }
-              case T.ArrayPattern: {
-                const [state, setState] = id.elements;
-                if (state?.type === T.ObjectPattern && setState?.type === T.Identifier) {
-                  if (!isSetterNameLoose(setState.name)) {
-                    context.report({ messageId: "unexpected", node: id });
-                  }
-                  break;
-                }
-                if (state?.type !== T.Identifier || setState?.type !== T.Identifier) {
-                  return;
-                }
-                const [stateName, setStateName] = [state.name, setState.name];
-                const expectedSetterName = `set${capitalize(stateName)}`;
-                if (setStateName === expectedSetterName) {
-                  return;
-                }
-                context.report({ messageId: "unexpected", node: id });
+      "CallExpression[callee.name='useState']"(node: TSESTree.CallExpression) {
+        if (node.parent.type !== T.VariableDeclarator) {
+          context.report({ messageId: "badValueOrSetterName", node });
+        }
+        const id = VAR.getVariableId(node);
+        if (id?.type !== T.ArrayPattern) {
+          context.report({ messageId: "badValueOrSetterName", node });
+          return;
+        }
+        const [value, setter] = id.elements;
+        if (value == null || setter == null) {
+          context.report({ messageId: "badValueOrSetterName", node });
+          return;
+        }
+        const setterName = match(setter)
+          .with({ type: T.Identifier }, (id) => id.name)
+          .otherwise(() => _);
+        if (setterName == null || !setterName.startsWith("set")) {
+          context.report({ messageId: "badValueOrSetterName", node });
+          return;
+        }
+        const valueName = match(value)
+          .with({ type: T.Identifier }, (id) => id.name)
+          .with({ type: T.ObjectPattern }, ({ properties }) => {
+            const values = properties.reduce<string[]>((acc, prop) => {
+              if (prop.type === T.Property && prop.key.type === T.Identifier) {
+                return [...acc, prop.key.name];
               }
-            }
-          }
+              return acc;
+            }, []);
+            return values.join("_");
+          })
+          .otherwise(() => _);
+        if (valueName == null || `set_${valueName}` !== snakeCase(setterName)) {
+          context.report({ messageId: "badValueOrSetterName", node });
+          return;
         }
       },
     };