Refactor prefer-dataset with selector (#515)

Author: fisker

rules/prefer-dataset.js

@@ -1,71 +1,48 @@
 'use strict';
 const getDocumentationUrl = require('./utils/get-documentation-url');
 const isValidVariableName = require('./utils/is-valid-variable-name');
+const quoteString = require('./utils/quote-string');
+const methodSelector = require('./utils/method-selector');
 
-const getMethodName = memberExpression => memberExpression.property.name;
-
-const getDataAttributeName = argument => {
-	if (argument.type === 'Literal') {
-		const matches = /^data-(?<name>.+)/.exec(argument.value);
-		return matches ? matches.groups.name : '';
-	}
-
-	return '';
-};
+const selector = methodSelector({
+	name: 'setAttribute',
+	length: 2
+}) + '[arguments.0.type="Literal"]';
 
 const parseNodeText = (context, argument) => context.getSourceCode().getText(argument);
 
 const dashToCamelCase = string => string.replace(/-[a-z]/g, s => s[1].toUpperCase());
 
-const getReplacement = (context, node, memberExpression, propertyName) => {
-	const calleeObject = parseNodeText(context, memberExpression.object);
-	const value = parseNodeText(context, node.arguments[1]);
+const fix = (context, node, fixer) => {
+	let [name, value] = node.arguments;
+	const calleeObject = parseNodeText(context, node.callee.object);
 
-	propertyName = dashToCamelCase(propertyName);
-
-	if (!isValidVariableName(propertyName)) {
-		return `${calleeObject}.dataset['${propertyName}'] = ${value}`;
-	}
-
-	return `${calleeObject}.dataset.${propertyName} = ${value}`;
-};
+	name = dashToCamelCase(name.value.slice(5));
+	value = parseNodeText(context, value);
 
-const isBracketNotation = (context, callee) => {
-	const bracketOpen = context
-		.getSourceCode()
-		.getFirstTokenBetween(callee.object, callee.property, {
-			filter: token => token.value === '['
-		});
+	const replacement = `${calleeObject}.dataset${
+		isValidVariableName(name) ?
+			`.${name}` :
+			`[${quoteString(name)}]`
+	} = ${value}`;
 
-	return bracketOpen !== null && bracketOpen.value === '[';
+	return fixer.replaceText(node, replacement);
 };
 
 const create = context => {
 	return {
-		CallExpression(node) {
-			const {callee} = node;
+		[selector](node) {
+			const name = node.arguments[0].value;
 
-			if (callee.type !== 'MemberExpression') {
+			if (typeof name !== 'string' || !name.startsWith('data-') || name === 'data-') {
 				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)
-				});
-			}
+			context.report({
+				node,
+				message: 'Prefer `.dataset` over `setAttribute(…)`.',
+				fix: fixer => fix(context, node, fixer)
+			});
 		}
 	};
 };

test/prefer-dataset.js

@@ -20,10 +20,28 @@ ruleTester.run('prefer-dataset', rule, {
 	valid: [
 		'element.dataset.unicorn = \'🦄\';',
 		'element.dataset[\'unicorn\'] = \'🦄\';',
+		// Not `CallExpression`
+		'new element.setAttribute(\'data-unicorn\', \'🦄\');',
+		// Not `MemberExpression`
+		'setAttribute(\'data-unicorn\', \'🦄\');',
+		// `callee.property` is not a `Identifier`
+		'element[\'setAttribute\'](\'data-unicorn\', \'🦄\');',
+		// Computed
 		'element[setAttribute](\'data-unicorn\', \'🦄\');',
-		'element.setAttribute(\'foo\', \'bar\');',
-		'element.setAttribute(foo, bar);',
-		'element.getAttribute(\'data-unicorn\');'
+		// Not `appendChild`
+		'element.foo(\'data-unicorn\', \'🦄\');',
+		// More or less argument(s)
+		'element.setAttribute(\'data-unicorn\', \'🦄\', \'extra\');',
+		'element.setAttribute(\'data-unicorn\');',
+		'element.setAttribute(...argumentsArray, ...argumentsArray2)',
+		// First Argument is not `Literal`
+		'element.setAttribute(`data-unicorn`, \'🦄\');',
+		// First Argument is not `string`
+		'element.setAttribute(0, \'🦄\');',
+		// First Argument is not startsWith `data-`
+		'element.setAttribute(\'foo-unicorn\', \'🦄\');',
+		// First Argument is `data-`
+		'element.setAttribute(\'data-\', \'🦄\');'
 	],
 	invalid: [
 		{