handle defs outside the scope

AhmedBaset · Aug 16, 2024 · 9119153 · 9119153
1 parent 835fd10
commit 9119153
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 9 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,6 @@
 import type { FlatConfig } from "@typescript-eslint/utils/ts-eslint";
-import { noPhysicalProperties } from "./rules/no-phyisical-properties/rule";
 import { name, version } from "../package.json";
+import { noPhysicalProperties } from "./rules/no-phyisical-properties/rule";
 
 const rtlFriendly = {
   meta: { name, version },

diff --git a/src/rules/no-phyisical-properties/test.ts b/src/rules/no-phyisical-properties/test.ts
@@ -216,7 +216,16 @@ vitest.describe(RULE_NAME, () => {
   });
 
   tester.run("Look for variable decleration", noPhysicalProperties, {
-    valid: [],
+    valid: [
+      {
+        name: "function arg",
+        code: `
+          function Comp({className}) {
+            return <div className={cn(className)} />
+          }
+        `,
+      },
+    ],
     invalid: [
       {
         name: "className={variable}",
@@ -244,6 +253,105 @@ vitest.describe(RULE_NAME, () => {
         `,
         errors: [{ messageId: NO_PHYSICAL_CLASSESS }],
       },
+      {
+        name: "let b = '...'",
+        code: `
+          let b = "text-left";
+          <div className={b} />
+        `,
+        output: `
+          let b = "text-start";
+          <div className={b} />
+        `,
+        errors: [{ messageId: NO_PHYSICAL_CLASSESS }],
+      },
+      {
+        name: "let b = '...'; b = '...'",
+        code: `
+          let b = "text-left";
+          b = "text-right";
+          <div className={b} />
+        `,
+        output: `
+          let b = "text-start";
+          b = "text-end";
+          <div className={b} />
+        `,
+        errors: [
+          { messageId: NO_PHYSICAL_CLASSESS },
+          { messageId: NO_PHYSICAL_CLASSESS },
+        ],
+      },
+      {
+        name: "Outside the scope",
+        code: `
+          const cls = "left-2";
+          function Comp() {
+            return <div className={cls} />
+          }
+        `,
+        output: `
+          const cls = "start-2";
+          function Comp() {
+            return <div className={cls} />
+          }
+        `,
+        errors: [{ messageId: NO_PHYSICAL_CLASSESS }],
+      },
+      {
+        name: "Reassignment in a nested scope",
+        code: `
+          let cls = "left-2";
+          function Comp() {
+            cls = "text-left";
+            return <div className={cls} />
+          }
+        `,
+        output: `
+          let cls = "start-2";
+          function Comp() {
+            cls = "text-start";
+            return <div className={cls} />
+          }
+        `,
+        errors: [
+          { messageId: NO_PHYSICAL_CLASSESS },
+          { messageId: NO_PHYSICAL_CLASSESS },
+        ],
+      },
+      {
+        name: "Don't conflict with other vars with the same name",
+        code: `
+          const cls = "left-2";
+          function Comp() {
+            const cls = "text-left";
+            return <div className={cls} />
+          }
+        `,
+        output: `
+          const cls = "left-2";
+          function Comp() {
+            const cls = "text-start";
+            return <div className={cls} />
+          }
+        `,
+        errors: [{ messageId: NO_PHYSICAL_CLASSESS }],
+      },
+      {
+        name: "function arg",
+        code: `
+          function Comp({ className = "text-left" }) {
+            return <div className={cn(className)} />
+          }
+        `,
+        output: `
+          function Comp({ className = "text-start" }) {
+            return <div className={cn(className)} />
+          }
+        `,
+        errors: [{ messageId: NO_PHYSICAL_CLASSESS }],
+        skip: true,
+      },
     ],
   });
 

diff --git a/src/utils/ast.ts b/src/utils/ast.ts
@@ -1,4 +1,5 @@
-import { TSESTree } from "@typescript-eslint/utils";
+import type { TSESTree } from "@typescript-eslint/utils";
+import type { Scope } from "@typescript-eslint/utils/ts-eslint";
 import type { Context } from "../rules/no-phyisical-properties/rule";
 
 const unimplemented = new Set<string>();
@@ -50,7 +51,7 @@ export function extractTokensFromNode(
     return run(node.init);
   }
 
-  if (is(node, "ArrowFunctionExpression")) return run(node);
+  // if (is(node, "ArrowFunctionExpression")) return run(node);
 
   return [];
 }
@@ -150,11 +151,12 @@ function extractTokensFromExpression(
   if (is(exp, "Identifier")) {
     // We should follow the identifier and get the value
     const scope = ctx.sourceCode.getScope(exp);
-    const binding = scope?.set.get(exp.name);
-    const node = binding?.defs[0].node;
-    if (!node) return [];
 
-    return extractTokensFromNode(node, ctx, runner);
+    const writes = getDefinitions(exp, ctx, scope).filter(
+      (r) => r?.type === "Literal" || r?.type === "Identifier"
+    );
+
+    return writes.flatMap((n) => rerun(n));
   }
 
   if (is(exp, "MemberExpression")) {
@@ -259,3 +261,24 @@ function is<E extends Exp | TSESTree.Node, T extends E["type"]>(
 ): exp is Extract<E, { type: T }> {
   return exp.type === type;
 }
+
+function getDefinitions(
+  identifier: TSESTree.Identifier,
+  ctx: Context,
+  scope: Scope.Scope
+) {
+  const writes = scope.references
+    .filter((r) => r.identifier.name === identifier.name && r.writeExpr)
+    .flatMap((r) => r.writeExpr);
+
+  const defs = scope.set.get(identifier.name)?.defs ?? [];
+  if (!defs.length && scope.upper) {
+    const defs = getDefinitions(identifier, ctx, scope.upper);
+    writes.push(...defs);
+  }
+
+  if (writes.length) return writes;
+
+  if (scope.upper) return getDefinitions(identifier, ctx, scope.upper);
+  return [];
+}
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -7,6 +7,6 @@ export default defineConfig({
     include: ["src/**/test.ts"],
     coverage: {
       include: ["src/**"],
-    }
+    },
   },
 });