feat: add no-non-passive-high-frequency-events rule

Co-authored-by: Kristján Oddsson <koddsson@gmail.com>

Author: keithamus

docs/rules/no-non-passive-high-frequency-events.md

@@ -0,0 +1,21 @@
+# No Non Passive High Frequency Events
+
+This rule disallows adding high frequency event listeners (`touchstart`, `touchmove`, `wheel`, `mousewheel`) without the `passive: true` option.
+
+```js
+// bad
+window.addEventListener('touchstart', () => { /* ... */ })
+
+// good
+window.addEventListener('touchstart', () => { /* ... */ }, { passive: true })
+```
+
+## Why? 
+
+Adding these events listeners can block the main thread as it waits to find out if the callbacks call `preventDefault`. This can cause large amounts UI lag, which will be noticeable for users.
+
+Adding `passive: true` informs the browser that this event will not be calling `preventDefault` and as such is safe to asynchronously dispatch, freeing up the main thread for lag-free operation.
+
+## See Also
+
+https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners

lib/rules/no-non-passive-high-frequency-events.js

@@ -0,0 +1,22 @@
+const passiveEventListenerNames = new Set(['touchstart', 'touchmove', 'wheel', 'mousewheel'])
+
+const propIsPassiveTrue = prop => prop.key && prop.key.name === 'passive' && prop.value && prop.value.value === true
+
+module.exports = {
+ meta: {
+ docs: {}
+ },
+
+ create(context) {
+ return {
+ ['CallExpression[callee.property.name="addEventListener"]']: function(node) {
+ const [name, listener, options] = node.arguments
+ if (!listener) return
+ if (name.type !== 'Literal') return
+ if (!passiveEventListenerNames.has(name.value)) return
+ if (options && options.type === 'ObjectExpression' && options.properties.some(propIsPassiveTrue)) return
+ context.report(node, `High Frequency Events like "${name.value}" should be \`passive: true\``)
+ }
+ }
+ }
+}

tests/no-non-passive-high-frequency-events.js

@@ -0,0 +1,69 @@
+const rule = require('../lib/rules/no-non-passive-high-frequency-events')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester()
+
+ruleTester.run('no-non-passive-high-frequency-events', rule, {
+ valid: [
+ {
+ code: 'document.addEventListener("load", function(event) {})'
+ },
+ {
+ code: 'document.addEventListener("click", function(event) {})'
+ },
+ {
+ code: 'document.addEventListener("touchstart", function(event) {}, { passive: true })'
+ },
+ {
+ code: 'el.addEventListener("touchstart", function(event) {}, { passive: true })'
+ }
+ ],
+ invalid: [
+ {
+ code: 'document.addEventListener("touchstart", function(event) {})',
+ errors: [
+ {
+ message: 'High Frequency Events like "touchstart" should be `passive: true`',
+ type: 'CallExpression'
+ }
+ ]
+ },
+ {
+ code: 'el.addEventListener("wheel", function(event) {})',
+ errors: [
+ {
+ message: 'High Frequency Events like "wheel" should be `passive: true`',
+ type: 'CallExpression'
+ }
+ ]
+ },
+ {
+ code: 'document.addEventListener("wheel", function(event) {})',
+ errors: [
+ {
+ message: 'High Frequency Events like "wheel" should be `passive: true`',
+ type: 'CallExpression'
+ }
+ ]
+ },
+ {
+ // Intentionally mispelled!
+ code: 'document.addEventListener("wheel", function(event) {}, { pssive: true })',
+ errors: [
+ {
+ message: 'High Frequency Events like "wheel" should be `passive: true`',
+ type: 'CallExpression'
+ }
+ ]
+ },
+ {
+ code: 'document.addEventListener("wheel", function(event) {}, { passive: false })',
+ errors: [
+ {
+ message: 'High Frequency Events like "wheel" should be `passive: true`',
+ type: 'CallExpression'
+ }
+ ]
+ }
+ ]
+})