feat: add prefer-observers-over-events rule

Co-authored-by: Kristján Oddsson <[email protected]>

Author: keithamus

docs/rules/prefer-observers-over-events.md

@@ -0,0 +1,47 @@
+# Prever Observers over Events
+
+Some events, such as `scroll` and `resize` have traditionally caused performance issues on web pages, as they are high frequency events, firing many times per second as the user interacts with the page viewport.
+
+## Scroll vs IntersectionObserver
+
+Typically `scroll` events are used to determine if an element is intersecting a viewport, which can result in expensive operations such as layout calculations, which has a detrimental affect on UI performance. Recent developments in web standards have introduced the `IntersectionObserver`, which is a more performant mechanism for determining if an element is intersecting the viewport.
+
+```js
+// bad, expensive, error-prone code to determine if the element is in the viewport;
+window.addEventListener('scroll', () => {
+  const isIntersecting = checkIfElementIntersects(element.getBoundingClientRect(), window.innerHeight, document.clientHeight)
+  element.classList.toggle('intersecting', isIntersecting)
+})
+
+// good - more performant and less error-prone
+const observer = new IntersectionObserver(entries => {
+  for(const {target, isIntersecting} of entries) {
+    target.classList.toggle(target, isIntersecting)
+  }
+})
+observer.observe(element)
+```
+
+## Resize vs ResizeObserver
+
+Similarly, `resize` events are typically used to determine if the viewport is smaller or larger than a certain size, similar to CSS media break points. Similar to the `IntersectionObserver` the `ResizeObserver` also exists as a more performant mechanism for observing changes to the viewport size.
+
+```js
+// bad, low-performing code to determine if the element is less than 500px large
+window.addEventListener('resize', () => {
+  element.classList.toggle('size-small', element.getBoundingClientRect().width < 500)
+})
+
+// good - more performant, only fires when the actual elements change size
+const observer = new ResizeObserver(entries => {
+  for(const {target, contentRect} of entries) {
+    target.classList.toggle('size-small', contentRect.width < 500)
+  }
+})
+observer.observe(element)
+```
+
+## See Also
+
+https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API

lib/rules/prefer-observers-over-events.js

@@ -0,0 +1,24 @@
+const observerMap = {
+  scroll: 'IntersectionObserver',
+  resize: 'ResizeObserver'
+}
+module.exports = {
+  meta: {
+    docs: {},
+    fixable: 'code'
+  },
+
+  create(context) {
+    return {
+      ['CallExpression[callee.property.name="addEventListener"]']: function(node) {
+        const [name] = node.arguments
+        if (name.type !== 'Literal') return
+        if (!(name.value in observerMap)) return
+        context.report({
+          node,
+          message: `Avoid using "${name.value}" event listener. Consider using ${observerMap[name.value]} instead`
+        })
+      }
+    }
+  }
+}

tests/prefer-observers-over-events.js

@@ -0,0 +1,32 @@
+const rule = require('../lib/rules/prefer-observers-over-events')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester()
+
+ruleTester.run('prefer-observers-over-events', rule, {
+  valid: [
+    {
+      code: 'document.addEventListener("touchstart", function(event) {})'
+    }
+  ],
+  invalid: [
+    {
+      code: 'document.addEventListener("scroll", function(event) {})',
+      errors: [
+        {
+          message: 'Avoid using "scroll" event listener. Consider using IntersectionObserver instead',
+          type: 'CallExpression'
+        }
+      ]
+    },
+    {
+      code: 'document.addEventListener("resize", function(event) {})',
+      errors: [
+        {
+          message: 'Avoid using "resize" event listener. Consider using ResizeObserver instead',
+          type: 'CallExpression'
+        }
+      ]
+    }
+  ]
+})