Implement prefer-observers rule enhancements for viewport detection

- Allow window.resize and window.orientationchange listeners (viewport detection)
- Continue flagging element-level resize listeners (suggest ResizeObserver)
- Flag ResizeObserver on document.documentElement/body (suggest window.resize + orientationchange)
- Add variable tracking to detect indirect document root observations
- Add comprehensive test cases covering all scenarios

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

Author: Copilot

lib/rules/prefer-observers.js

@@ -4,6 +4,31 @@ const observerMap = {
   scroll: 'IntersectionObserver',
   resize: 'ResizeObserver',
 }
+
+/**
+ * Checks if a node refers to the window object
+ */
+function isWindowObject(node) {
+  return node.type === 'Identifier' && node.name === 'window'
+}
+
+/**
+ * Checks if a node refers to document.documentElement or document.body
+ */
+function isDocumentRoot(node) {
+  if (node.type === 'MemberExpression') {
+    if (
+      node.object.type === 'Identifier' &&
+      node.object.name === 'document' &&
+      node.property.type === 'Identifier' &&
+      (node.property.name === 'documentElement' || node.property.name === 'body')
+    ) {
+      return true
+    }
+  }
+  return false
+}
+
 export default {
   meta: {
     type: 'suggestion',
@@ -15,21 +40,68 @@ export default {
     schema: [],
     messages: {
       avoid: 'Avoid using "{{name}}" event listener. Consider using {{observer}} instead',
+      avoidResizeObserverOnRoot:
+        'Avoid using ResizeObserver on document root elements. Consider using window.addEventListener("resize", ...) combined with window.addEventListener("orientationchange", ...) for viewport detection instead',
     },
   },
 
   create(context) {
+    // Track variables that reference document.documentElement or document.body
+    const documentRootVariables = new Map()
+
     return {
-      ['CallExpression[callee.property.name="addEventListener"]']: function (node) {
+      // Track variable declarations that assign document.documentElement or document.body
+      VariableDeclarator(node) {
+        if (node.init && isDocumentRoot(node.init) && node.id.type === 'Identifier') {
+          documentRootVariables.set(node.id.name, node.init)
+        }
+      },
+
+      // Check addEventListener calls
+      ['CallExpression[callee.property.name="addEventListener"]'](node) {
         const [name] = node.arguments
         if (name.type !== 'Literal') return
         if (!(name.value in observerMap)) return
+
+        // Allow window.addEventListener("resize", ...) and window.addEventListener("orientationchange", ...)
+        if (node.callee.object && isWindowObject(node.callee.object)) {
+          if (name.value === 'resize') return
+        }
+
         context.report({
           node,
           messageId: 'avoid',
           data: {name: name.value, observer: observerMap[name.value]},
         })
       },
+
+      // Check ResizeObserver.observe() calls
+      ['CallExpression[callee.property.name="observe"]'](node) {
+        // Check if this is a ResizeObserver instance
+        const callee = node.callee
+        if (!callee.object) return
+
+        // Get the first argument (the element being observed)
+        const [observedElement] = node.arguments
+        if (!observedElement) return
+
+        // Check if observing document.documentElement or document.body directly
+        if (isDocumentRoot(observedElement)) {
+          context.report({
+            node,
+            messageId: 'avoidResizeObserverOnRoot',
+          })
+          return
+        }
+
+        // Check if observing a variable that was assigned document.documentElement or document.body
+        if (observedElement.type === 'Identifier' && documentRootVariables.has(observedElement.name)) {
+          context.report({
+            node,
+            messageId: 'avoidResizeObserverOnRoot',
+          })
+        }
+      },
     }
   },
 }

tests/prefer-observers.js

@@ -8,6 +8,21 @@ ruleTester.run('prefer-observers', rule, {
     {
       code: 'document.addEventListener("touchstart", function(event) {})',
     },
+    // window.resize is valid for viewport detection
+    {
+      code: 'window.addEventListener("resize", function(event) {})',
+    },
+    // window.orientationchange is valid for viewport detection
+    {
+      code: 'window.addEventListener("orientationchange", function(event) {})',
+    },
+    // ResizeObserver on regular elements is valid
+    {
+      code: 'const observer = new ResizeObserver(() => {}); observer.observe(someElement)',
+    },
+    {
+      code: 'const observer = new ResizeObserver(() => {}); const el = document.querySelector(".item"); observer.observe(el)',
+    },
   ],
   invalid: [
     {
@@ -28,5 +43,70 @@ ruleTester.run('prefer-observers', rule, {
         },
       ],
     },
+    // element.resize should be flagged
+    {
+      code: 'element.addEventListener("resize", function(event) {})',
+      errors: [
+        {
+          message: 'Avoid using "resize" event listener. Consider using ResizeObserver instead',
+          type: 'CallExpression',
+        },
+      ],
+    },
+    // ResizeObserver on document.documentElement should be flagged
+    {
+      code: 'const observer = new ResizeObserver(() => {}); observer.observe(document.documentElement)',
+      errors: [
+        {
+          message:
+            'Avoid using ResizeObserver on document root elements. Consider using window.addEventListener("resize", ...) combined with window.addEventListener("orientationchange", ...) for viewport detection instead',
+          type: 'CallExpression',
+        },
+      ],
+    },
+    // ResizeObserver on document.body should be flagged
+    {
+      code: 'const observer = new ResizeObserver(() => {}); observer.observe(document.body)',
+      errors: [
+        {
+          message:
+            'Avoid using ResizeObserver on document root elements. Consider using window.addEventListener("resize", ...) combined with window.addEventListener("orientationchange", ...) for viewport detection instead',
+          type: 'CallExpression',
+        },
+      ],
+    },
+    // Inline ResizeObserver with document.documentElement should be flagged
+    {
+      code: 'new ResizeObserver(() => {}).observe(document.documentElement)',
+      errors: [
+        {
+          message:
+            'Avoid using ResizeObserver on document root elements. Consider using window.addEventListener("resize", ...) combined with window.addEventListener("orientationchange", ...) for viewport detection instead',
+          type: 'CallExpression',
+        },
+      ],
+    },
+    // Variable tracking: document.documentElement assigned to variable
+    {
+      code: 'const el = document.documentElement; observer.observe(el)',
+      errors: [
+        {
+          message:
+            'Avoid using ResizeObserver on document root elements. Consider using window.addEventListener("resize", ...) combined with window.addEventListener("orientationchange", ...) for viewport detection instead',
+          type: 'CallExpression',
+        },
+      ],
+    },
+    // Variable tracking: document.body assigned to variable
+    {
+      code: 'const root = document.body; observer.observe(root)',
+      errors: [
+        {
+          message:
+            'Avoid using ResizeObserver on document root elements. Consider using window.addEventListener("resize", ...) combined with window.addEventListener("orientationchange", ...) for viewport detection instead',
+          type: 'CallExpression',
+        },
+      ],
+    },
   ],
 })