Improve ResizeObserver detection with better heuristics

- Add isLikelyResizeObserver function to identify ResizeObserver instances
- Exclude IntersectionObserver, MutationObserver, and other observer types
- Add tests to verify IntersectionObserver and MutationObserver are not flagged
- Fix linting issues and improve code comments

Co-authored-by: mattcosta7 <8616962+mattcosta7@users.noreply.github.com>

Author: Copilot

lib/rules/prefer-observers.js

@@ -29,6 +29,43 @@ function isDocumentRoot(node) {
   return false
 }
 
+/**
+ * Checks if a node is likely a ResizeObserver instance
+ * Checks for patterns like:
+ * - new ResizeObserver(...).observe(...)
+ * - resizeObserverVariable.observe(...)
+ * - observer.observe(...) when not explicitly another observer type
+ * This is a heuristic approach since we can't always determine the exact type
+ */
+function isLikelyResizeObserver(node) {
+  // Check for new ResizeObserver(...).observe(...) pattern
+  if (node.type === 'NewExpression' && node.callee.type === 'Identifier' && node.callee.name === 'ResizeObserver') {
+    return true
+  }
+
+  // Check for variable names that suggest ResizeObserver
+  if (node.type === 'Identifier') {
+    const name = node.name.toLowerCase()
+
+    // Exclude other observer types explicitly
+    if (
+      name.includes('intersection') ||
+      name.includes('mutation') ||
+      name.includes('performance') ||
+      name.includes('reportingobserver')
+    ) {
+      return false
+    }
+
+    // Match explicit ResizeObserver or generic "observer" variable names
+    if (name.includes('resizeobserver') || name.includes('resize') || name === 'observer' || name.includes('obs')) {
+      return true
+    }
+  }
+
+  return false
+}
+
 export default {
   meta: {
     type: 'suggestion',
@@ -63,8 +100,8 @@ export default {
         if (name.type !== 'Literal') return
         if (!(name.value in observerMap)) return
 
-        // Allow window events (window.resize for viewport detection)
-        // Note: orientationchange is not in observerMap but this check is defensive
+        // Allow window events for viewport-level detection
+        // This prevents flagging window.resize and window.scroll which are appropriate for viewport detection
         if (node.callee.object && isWindowObject(node.callee.object)) {
           return
         }
@@ -76,12 +113,15 @@ export default {
         })
       },
 
-      // Check ResizeObserver.observe() calls
+      // Check ResizeObserver.observe() calls on document root elements
       ['CallExpression[callee.property.name="observe"]']: function (node) {
-        // Check if this is a ResizeObserver instance
         const callee = node.callee
         if (!callee.object) return
 
+        // Only check if this appears to be a ResizeObserver
+        // This prevents false positives for IntersectionObserver, MutationObserver, etc.
+        if (!isLikelyResizeObserver(callee.object)) return
+
         // Get the first argument (the element being observed)
         const [observedElement] = node.arguments
         if (!observedElement) return

tests/prefer-observers.js

@@ -27,6 +27,14 @@ ruleTester.run('prefer-observers', rule, {
     {
       code: 'const observer = new ResizeObserver(() => {}); const el = document.querySelector(".item"); observer.observe(el)',
     },
+    // IntersectionObserver on document root is valid (not flagged by this rule)
+    {
+      code: 'const intersectionObserver = new IntersectionObserver(() => {}); intersectionObserver.observe(document.documentElement)',
+    },
+    // MutationObserver on document root is valid (not flagged by this rule)
+    {
+      code: 'const mutationObserver = new MutationObserver(() => {}); mutationObserver.observe(document.documentElement)',
+    },
   ],
   invalid: [
     {