fix(plugins/web-api): add 'forEach' support to 'no-leaked-event-liste…

examples/vite-react-dom-legacy/package.json

@@ -27,7 +27,7 @@
     "eslint": "^9.16.0",
     "eslint-plugin-react-hooks": "rc",
     "eslint-plugin-react-refresh": "^0.4.14",
-    "globals": "^15.12.0",
+    "globals": "^15.13.0",
     "vite": "^6.0.1"
   }
 }

examples/vite-react-dom/package.json

@@ -28,7 +28,7 @@
     "eslint": "^9.16.0",
     "eslint-plugin-react-hooks": "rc",
     "eslint-plugin-react-refresh": "^0.4.14",
-    "globals": "^15.12.0",
+    "globals": "^15.13.0",
     "vite": "^6.0.1"
   }
 }

packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.spec.ts

@@ -427,6 +427,98 @@ ruleTester.run(RULE_NAME, rule, {
         },
       ],
     },
+    {
+      code: /* tsx */ `
+        import { useEffect } from "react";
+
+        export const Component = () => {
+          const events = ["mousemove", "mousedown", "keydown", "scroll", "touchstart"];
+
+          const handleActivity = () => {};
+
+          useEffect(() => {
+            events.forEach((evt) => {
+              window.addEventListener(event, handleActivity);
+            });
+
+            return () => {
+              events.forEach((event) => {
+                window.removeEventListener(evt, handleActivity);
+              });
+            };
+          }, []);
+
+          return null;
+        };
+      `,
+      errors: [
+        {
+          messageId: "noLeakedEventListenerInEffect",
+        },
+      ],
+    },
+    {
+      code: /* tsx */ `
+        import { useEffect } from "react";
+
+        export const Component = () => {
+          const events = ["mousemove", "mousedown", "keydown", "scroll", "touchstart"];
+
+          const handleActivity1 = () => {};
+          const handleActivity2 = () => {};
+
+          useEffect(() => {
+            events.forEach((event) => {
+              window.addEventListener(event, handleActivity1);
+            });
+
+            return () => {
+              events.forEach((event) => {
+                window.removeEventListener(event, handleActivity2);
+              });
+            };
+          }, []);
+
+          return null;
+        };
+      `,
+      errors: [
+        {
+          messageId: "noLeakedEventListenerInEffect",
+        },
+      ],
+    },
+    {
+      code: /* tsx */ `
+        import { useEffect } from "react";
+
+        export const Component = () => {
+          const events1 = ["mousemove", "mousedown", "keydown"];
+          const events2 = ["keydown", "scroll", "touchstart"];
+
+          const handleActivity = () => {};
+
+          useEffect(() => {
+            events1.forEach((event) => {
+              window.addEventListener(event, handleActivity);
+            });
+
+            return () => {
+              events2.forEach((event) => {
+                window.removeEventListener(event, handleActivity);
+              });
+            };
+          }, []);
+
+          return null;
+        };
+      `,
+      errors: [
+        {
+          messageId: "noLeakedEventListenerInEffect",
+        },
+      ],
+    },
   ],
   valid: [
     ...allValid,
@@ -796,5 +888,51 @@ ruleTester.run(RULE_NAME, rule, {
     //     }, []);
     //   }
     // `,
+    /* tsx */ `
+      import { useEffect } from "react";
+
+      export const Component = () => {
+        const events = ["mousemove", "mousedown", "keydown", "scroll", "touchstart"];
+
+        const handleActivity = () => {};
+
+        useEffect(() => {
+          events.forEach((event) => {
+            window.addEventListener(event, handleActivity);
+          });
+
+          return () => {
+            events.forEach((event) => {
+              window.removeEventListener(event, handleActivity);
+            });
+          };
+        }, []);
+
+        return null;
+      };
+    `,
+    /* tsx */ `
+      import { useEffect } from "react";
+
+      export const Component = () => {
+        const events = ["mousemove", "mousedown", "keydown", "scroll", "touchstart"];
+
+        const handleActivity = () => {};
+
+        useEffect(() => {
+          events.forEach((event) => {
+            window.addEventListener(event, handleActivity);
+          });
+
+          return () => {
+            events.forEach((evt) => {
+              window.removeEventListener(evt, handleActivity);
+            });
+          };
+        }, []);
+
+        return null;
+      };
+    `,
   ],
 });

packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.ts

@@ -1,7 +1,7 @@
 /* eslint-disable better-mutation/no-mutating-methods */
 import * as AST from "@eslint-react/ast";
 import type { EREffectMethodKind, ERLifecycleMethodKind, ERPhaseKind } from "@eslint-react/core";
-import { isInversePhase, ERPhaseRelevance } from "@eslint-react/core";
+import { ERPhaseRelevance, isInversePhase } from "@eslint-react/core";
 import * as JSX from "@eslint-react/jsx";
 import { F, isBoolean, O } from "@eslint-react/tools";
 import * as VAR from "@eslint-react/var";
@@ -168,7 +168,6 @@ export default createRule<[], MessageID>({
       const [_, listener] = node.arguments;
       if (!AST.isFunction(listener)) return O.none();
       if (O.isSome(options.signal)) return O.none();
-      // if (O.exists(options.once, F.identity)) return O.none();
       return O.some({
         messageId: "noLeakedEventListenerOfInlineFunction",
         node: listener,

packages/plugins/eslint-plugin-react-web-api/src/utils/is-instance-id-equal.ts

@@ -4,6 +4,8 @@ import * as VAR from "@eslint-react/var";
 import type { TSESTree } from "@typescript-eslint/types";
 
 export function isInstanceIDEqual(a: TSESTree.Node, b: TSESTree.Node, context: RuleContext) {
-  return AST.isNodeEqual(a, b)
-    || VAR.isNodeValueEqual(a, b, [context.sourceCode.getScope(a), context.sourceCode.getScope(b)]);
+  return AST.isNodeEqual(a, b) || VAR.isNodeValueEqual(a, b, [
+    context.sourceCode.getScope(a),
+    context.sourceCode.getScope(b),
+  ]);
 }

packages/utilities/var/src/get-variable-node.ts

@@ -1,3 +1,4 @@
+import * as AST from "@eslint-react/ast";
 import { F, O } from "@eslint-react/tools";
 import type { Variable } from "@typescript-eslint/scope-manager";
 import { DefinitionType } from "@typescript-eslint/scope-manager";
@@ -28,16 +29,19 @@ export function getVariableNode(at: number) {
       O.flatMap(getVariableDef(at)),
       O.flatMapNullable(def => {
         switch (true) {
-          case "init" in def.node
-            && def.node.init
-            && !("declarations" in def.node.init):
-            return def.node.init;
           case def.type === DefinitionType.FunctionName
             && def.node.type === AST_NODE_TYPES.FunctionDeclaration:
             return def.node;
           case def.type === DefinitionType.ClassName
             && def.node.type === AST_NODE_TYPES.ClassDeclaration:
             return def.node;
+          case def.type === DefinitionType.Parameter
+            && AST.isFunction(def.node):
+            return def.node;
+          case "init" in def.node
+            && def.node.init
+            && !("declarations" in def.node.init):
+            return def.node.init;
           default:
             return null;
         }

packages/utilities/var/src/is-node-value-equal.ts

@@ -38,10 +38,24 @@ export function isNodeValueEqual(
   if (a.type === AST_NODE_TYPES.Identifier && b.type === AST_NODE_TYPES.Identifier) {
     const va = findVariable(a, aScope);
     const vb = findVariable(b, bScope);
-    const ia = O.flatMap(va, getVariableNode(0));
-    const ib = O.flatMap(vb, getVariableNode(0));
-    if (O.isNone(ia) || O.isNone(ib)) return false;
-    return ia.value === ib.value;
+    const na = O.flatMap(va, getVariableNode(0));
+    const nb = O.flatMap(vb, getVariableNode(0));
+    if (O.isNone(na) || O.isNone(nb)) return false;
+    if (O.exists(na, AST.isFunction) && O.exists(nb, AST.isFunction)) {
+      const fa = na.value;
+      const fb = nb.value;
+      const pa = fa.parent;
+      const pb = fb.parent;
+      if (pa.type !== AST_NODE_TYPES.CallExpression || pb.type !== AST_NODE_TYPES.CallExpression) return false;
+      if (!AST.isNodeEqual(pa.callee, pb.callee)) return false;
+      const paramsA = fa.params;
+      const paramsB = fb.params;
+      const posA = paramsA.findIndex((p) => AST.isNodeEqual(p, a));
+      const posB = paramsB.findIndex((p) => AST.isNodeEqual(p, b));
+      if (posA === -1 || posB === -1) return false;
+      return posA === posB;
+    }
+    return na.value === nb.value;
   }
   if (a.type === AST_NODE_TYPES.MemberExpression && b.type === AST_NODE_TYPES.MemberExpression) {
     return AST.isNodeEqual(a.property, b.property) && isNodeValueEqual(a.object, b.object, initialScopes);