Add prefer-dataset rule

docs/rules/prefer-dataset.md

@@ -0,0 +1,18 @@
+# Prefer the .dataset property on DOM elements over using setAttribute
+
+Enforces the use of, for example, `element.dataset.key` over `element.setAttribute('data-key', 'foo')` for DOM elements.
+
+This rule is fixable.
+
+
+## Fail
+
+```js
+element.setAttribute('data-unicorn', '🦄');
+```
+
+## Pass
+
+```js
+element.dataset.unicorn = '🦄';
+```

index.js

@@ -39,6 +39,7 @@ module.exports = {
 				'unicorn/no-zero-fractions': 'error',
 				'unicorn/number-literal-case': 'error',
 				'unicorn/prefer-add-event-listener': 'error',
+				'unicorn/prefer-dataset': 'error',
 				'unicorn/prefer-event-key': 'error',
 				'unicorn/prefer-exponentiation-operator': 'error',
 				'unicorn/prefer-flat-map': 'error',

readme.md

@@ -57,6 +57,7 @@ Configure it in `package.json`.
 			"unicorn/no-zero-fractions": "error",
 			"unicorn/number-literal-case": "error",
 			"unicorn/prefer-add-event-listener": "error",
+			"unicorn/prefer-dataset": "error",
 			"unicorn/prefer-event-key": "error",
 			"unicorn/prefer-exponentiation-operator": "error",
 			"unicorn/prefer-flat-map": "error",
@@ -101,6 +102,7 @@ Configure it in `package.json`.
 - [no-zero-fractions](docs/rules/no-zero-fractions.md) - Disallow number literals with zero fractions or dangling dots. *(fixable)*
 - [number-literal-case](docs/rules/number-literal-case.md) - Enforce lowercase identifier and uppercase value for number literals. *(fixable)*
 - [prefer-add-event-listener](docs/rules/prefer-add-event-listener.md) - Prefer `.addEventListener()` and `.removeEventListener()` over `on`-functions. *(partly fixable)*
+- [prefer-dataset](docs/rules/prefer-dataset.md) - Prefer the .dataset property on DOM elements over using setAttribute. *(fixable)*
 - [prefer-event-key](docs/rules/prefer-event-key.md) - Prefer `KeyboardEvent#key` over `KeyboardEvent#keyCode`. *(partly fixable)*
 - [prefer-exponentiation-operator](docs/rules/prefer-exponentiation-operator.md) - Prefer the exponentiation operator over `Math.pow()` *(fixable)*
 - [prefer-flat-map](docs/rules/prefer-flat-map.md) - Prefer `.flatMap(…)` over `.map(…).flat()`. *(fixable)*

rules/prefer-dataset.js

@@ -0,0 +1,82 @@
+'use strict';
+const getDocsUrl = require('./utils/get-docs-url');
+
+const getMethodName = memberExpression => memberExpression.property.name;
+
+const getDataAttributeName = arg => {
+	if (arg.type === 'Literal') {
+		return (arg.value.match(/^data-(.+)/) || ['', ''])[1];
+	}
+
+	return '';
+};
+
+const parseValueArgument = (context, arg) => {
+	return context.getSourceCode().getText(arg);
+};
+
+const dashToCamelCase = str => {
+	return str.replace(/-([a-z])/g, s => s[1].toUpperCase());
+};
+
+const getReplacement = (context, node, memberExpression, propertyName) => {
+	const objectName = memberExpression.object.name;
+	const value = parseValueArgument(context, node.arguments[1]);
+
+	propertyName = dashToCamelCase(propertyName);
+
+	if (propertyName.match(/[.:]/)) {
+		return `${objectName}.dataset['${propertyName}'] = ${value}`;
+	}
+
+	return `${objectName}.dataset.${propertyName} = ${value}`;
+};
+
+const isBracketNotation = (context, callee) => {
+	const bracketOpen = context.getSourceCode().getFirstTokenBetween(callee.object, callee.property, {filter: token => {
+		return token.value === '[';
+	}});
+
+	return bracketOpen !== null && bracketOpen.value === '[';
+};
+
+const create = context => {
+	return {
+		CallExpression(node) {
+			const {callee} = node;
+
+			if (callee.type !== 'MemberExpression') {
+				return;
+			}
+
+			if (getMethodName(callee) !== 'setAttribute') {
+				return;
+			}
+
+			if (isBracketNotation(context, callee)) {
+				return;
+			}
+
+			const attributeName = getDataAttributeName(node.arguments[0]);
+			if (attributeName) {
+				const replacement = getReplacement(context, node, callee, attributeName);
+				context.report({
+					node,
+					message: 'Prefer `dataset` over `setAttribute`',
+					fix: fixer => fixer.replaceText(node, replacement)
+				});
+			}
+		}
+	};
+};
+
+module.exports = {
+	create,
+	meta: {
+		type: 'suggestion',
+		docs: {
+			url: getDocsUrl(__filename)
+		},
+		fixable: 'code'
+	}
+};

test/prefer-dataset.js

@@ -0,0 +1,75 @@
+import test from 'ava';
+import {outdent} from 'outdent';
+import avaRuleTester from 'eslint-ava-rule-tester';
+import rule from '../rules/prefer-dataset';
+
+const ruleTester = avaRuleTester(test, {
+	env: {
+		es6: true
+	}
+});
+
+const errors = [
+	{
+		ruleId: 'prefer-dataset',
+		message: 'Prefer `dataset` over `setAttribute`'
+	}
+];
+
+ruleTester.run('prefer-dataset', rule, {
+	valid: [
+		'element.dataset.unicorn = \'🦄\';',
+		'element.dataset[\'unicorn\'] = \'🦄\';',
+		'element[setAttribute](\'data-unicorn\', \'🦄\');',
+		'element.setAttribute(\'foo\', \'bar\');',
+		'element.setAttribute(foo, bar);',
+		'element.getAttribute(\'data-unicorn\');'
+	],
+	invalid: [
+		{
+			code: 'element.setAttribute(\'data-unicorn\', \'🦄\');',
+			errors,
+			output: 'element.dataset.unicorn = \'🦄\';'
+		},
+		{
+			code: 'element.setAttribute(\'data-🦄\', \'🦄\');',
+			errors,
+			output: 'element.dataset.🦄 = \'🦄\';'
+		},
+		{
+			code: 'element.setAttribute(\'data-foo2\', \'🦄\');',
+			errors,
+			output: 'element.dataset.foo2 = \'🦄\';'
+		},
+		{
+			code: 'element.setAttribute(\'data-foo:bar\', \'zaz\');',
+			errors,
+			output: 'element.dataset[\'foo:bar\'] = \'zaz\';'
+		},
+		{
+			code: 'element.setAttribute(\'data-foo.bar\', \'zaz\');',
+			errors,
+			output: 'element.dataset[\'foo.bar\'] = \'zaz\';'
+		},
+		{
+			code: 'element.setAttribute(\'data-foo-bar\', \'zaz\');',
+			errors,
+			output: 'element.dataset.fooBar = \'zaz\';'
+		},
+		{
+			code: 'element.setAttribute(\'data-foo\', /* comment */ \'bar\');',
+			errors,
+			output: 'element.dataset.foo = \'bar\';'
+		},
+		{
+			code: outdent`
+				element.setAttribute(
+					\'data-foo\', // comment
+					\'bar\' // comment
+				);
+			`,
+			errors,
+			output: 'element.dataset.foo = \'bar\';'
+		}
+	]
+});