Add prefer-add-event-listener rule (#147)

Author: wu-s-john

docs/rules/prefer-add-event-listener.md

@@ -0,0 +1,34 @@
+# Prefer `addEventListener` over `on`-functions
+
+Enforces the use of, for example, `foo.addEventListener('click', handler);` over `foo.onclick = handler;` for HTML DOM Events. There are [numerous advantages of using `addEventListener`](https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick/35093997#35093997). Some of these advantages include registering unlimited event handlers and optionally having the event handler invoked only once.
+
+This rule is fixable.
+
+
+## Fail
+
+```js
+foo.onclick = () => {};
+```
+
+```js
+foo.onkeydown = () => {};
+```
+
+```js
+foo.bar.onclick = onClick;
+```
+
+## Pass
+
+```js
+foo.addEventListener('click', () => {});
+```
+
+```js
+foo.addEventListener('keydown', () => {});
+```
+
+```js
+foo.bar.addEventListener('click', onClick);
+```

index.js

@@ -34,7 +34,8 @@ module.exports = {
 				'unicorn/regex-shorthand': 'error',
 				'unicorn/prefer-spread': 'error',
 				'unicorn/error-message': 'error',
-				'unicorn/no-unsafe-regex': 'error'
+				'unicorn/no-unsafe-regex': 'error',
+				'unicorn/prefer-add-event-listener': 'error'
 			}
 		}
 	}

readme.md

@@ -53,7 +53,8 @@ Configure it in `package.json`.
 			"unicorn/regex-shorthand": "error",
 			"unicorn/prefer-spread": "error",
 			"unicorn/error-message": "error",
-			"unicorn/no-unsafe-regex": "error"
+			"unicorn/no-unsafe-regex": "error",
+			"unicorn/prefer-add-event-listener": "error"
 		}
 	}
 }
@@ -83,6 +84,7 @@ Configure it in `package.json`.
 - [prefer-spread](docs/rules/prefer-spread.md) - Prefer the spread operator over `Array.from()`. *(fixable)*
 - [error-message](docs/rules/error-message.md) - Enforce passing a `message` value when throwing a built-in error.
 - [no-unsafe-regex](docs/rules/no-unsafe-regex.md) - Disallow unsafe regular expressions.
+- [prefer-add-event-listener](docs/rules/prefer-add-event-listener.md) - Prefer `addEventListener` over `on`-functions. *(fixable)*
 
 
 ## Recommended config

rules/prefer-add-event-listener.js

@@ -0,0 +1,52 @@
+'use strict';
+const getDocsUrl = require('./utils/get-docs-url');
+const domEventsJson = require('./utils/dom-events.json');
+
+const nestedEvents = Object.keys(domEventsJson).map(key => domEventsJson[key]);
+const eventTypes = new Set(nestedEvents.reduce((accEvents, events) => accEvents.concat(events), []));
+const getEventMethodName = memberExpression => memberExpression.property.name;
+const getEventTypeName = eventMethodName => eventMethodName.slice('on'.length);
+
+const fix = (fixer, sourceCode, assignmentNode, memberExpression) => {
+	const eventTypeName = getEventTypeName(getEventMethodName(memberExpression));
+	const eventObjectCode = sourceCode.getText(memberExpression.object);
+	const fncCode = sourceCode.getText(assignmentNode.right);
+	const fixedCodeStatement = `${eventObjectCode}.addEventListener('${eventTypeName}', ${fncCode})`;
+	return fixer.replaceText(assignmentNode, fixedCodeStatement);
+};
+
+const isOnEvent = memberExpression => {
+	if (memberExpression.type === 'MemberExpression') {
+		const eventMethodName = getEventMethodName(memberExpression);
+		if (eventMethodName.startsWith('on')) {
+			return eventTypes.has(getEventTypeName(eventMethodName));
+		}
+	}
+
+	return false;
+};
+
+const create = context => {
+	return {
+		AssignmentExpression(node) {
+			const memberExpression = node.left;
+			if (isOnEvent(memberExpression, context, node)) {
+				context.report({
+					node,
+					message: `Prefer \`addEventListener\` over \`${getEventMethodName(memberExpression)}\``,
+					fix: fixer => fix(fixer, context.getSourceCode(), node, memberExpression)
+				});
+			}
+		}
+	};
+};
+
+module.exports = {
+	create,
+	meta: {
+		docs: {
+			url: getDocsUrl()
+		},
+		fixable: 'code'
+	}
+};

rules/utils/dom-events.json

@@ -0,0 +1,98 @@
+{
+	"mouse": [
+		"click",
+		"contextmenu",
+		"dblclick",
+		"mousedown",
+		"mouseenter",
+		"mouseleave",
+		"mousemove",
+		"mouseover",
+		"mouseout",
+		"mouseup"
+	],
+	"keyboard": [
+		"keydown",
+		"keypress",
+		"keyup"
+	],
+	"frame": [
+		"abort",
+		"beforeunload",
+		"error",
+		"hashchange",
+		"load",
+		"pageshow",
+		"pagehide",
+		"resize",
+		"scroll",
+		"unload"
+	],
+	"form": [
+		"blur",
+		"change",
+		"focus",
+		"focusin",
+		"focusout",
+		"input",
+		"invalid",
+		"reset",
+		"search",
+		"select",
+		"submit"
+	],
+	"drag": [
+		"drag",
+		"dragend",
+		"dragenter",
+		"dragleave",
+		"dragover",
+		"dragstart",
+		"drop"
+	],
+	"clipboard": [
+		"copy",
+		"cut",
+		"paste"
+	],
+	"print": [
+		"afterprint",
+		"beforeprint"
+	],
+	"media": [
+		"abort",
+		"canplay",
+		"canplaythrough",
+		"durationchange",
+		"ended",
+		"error",
+		"loadeddata",
+		"loadedmetadata",
+		"loadstart",
+		"pause",
+		"play",
+		"playing",
+		"progress",
+		"ratechange",
+		"seeked",
+		"seeking",
+		"stalled",
+		"suspend",
+		"timeupdate",
+		"volumechange",
+		"waiting"
+	],
+	"server-sent": [
+		"error",
+		"message",
+		"open"
+	],
+	"misc": [
+		"wheel",
+		"online",
+		"offline",
+		"show",
+		"toggle",
+		"wheel"
+	]
+}

test/prefer-add-event-listener.js

@@ -0,0 +1,58 @@
+import test from 'ava';
+import avaRuleTester from 'eslint-ava-rule-tester';
+import rule from '../rules/prefer-add-event-listener';
+
+const ruleTester = avaRuleTester(test, {
+	env: {
+		es6: true
+	}
+});
+
+const invalidTestCase = (code, correctCode, eventType) => {
+	return {
+		code,
+		output: correctCode,
+		errors: [{message: `Prefer \`addEventListener\` over \`${eventType}\``}]
+	};
+};
+
+ruleTester.run('prefer-add-event-listener', rule, {
+	valid: [
+		`foo.addEventListener('click', () => {})`,
+		`foo.onclick`,
+		`foo.setCallBack = () => {console.log('foo')}`,
+		`setCallBack = () => {console.log('foo')}`,
+		`foo.onclick.bar = () => {}`
+	],
+	invalid: [
+		invalidTestCase(
+			'foo.onclick = () => {}',
+			`foo.addEventListener('click', () => {})`,
+			'onclick'
+		),
+		invalidTestCase(
+			'foo.bar.onclick = onClick',
+			`foo.bar.addEventListener('click', onClick)`,
+			'onclick'
+		),
+		invalidTestCase(
+			'foo.onkeydown = () => {}',
+			`foo.addEventListener('keydown', () => {})`,
+			'onkeydown'
+		),
+		invalidTestCase(
+			'foo.ondragend = () => {}',
+			`foo.addEventListener('dragend', () => {})`,
+			'ondragend'
+		),
+		invalidTestCase(
+			`foo.onclick = function (e) {
+				console.log(e);
+			}`,
+			`foo.addEventListener('click', function (e) {
+				console.log(e);
+			})`,
+			'onclick'
+		)
+	]
+});