prefer-dom-node-dataset: Check .hasAttribute() and .getAttribute()

docs/rules/prefer-dom-node-dataset.md

@@ -1,10 +1,10 @@
-# Prefer using `.dataset` on DOM elements over `.setAttribute(…)` and `.removeAttribute(…)`
+# Prefer using `.dataset` on DOM elements over accessing attributes
 
 ✅ *This rule is part of the [recommended](/~https://github.com/sindresorhus/eslint-plugin-unicorn#recommended-config) config.*
 
 🔧 *This rule is [auto-fixable](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems).*
 
-Use [`.dataset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) on DOM elements over `.setAttribute(…)` and `.removeAttribute(…)`.
+Use [`.dataset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) on DOM elements over `.setAttribute(…)`, `.removeAttribute(…)` and `.hasAttribute(…)`.
 
 ## Fail
 
@@ -16,6 +16,10 @@ element.setAttribute('data-unicorn', '🦄');
 element.removeAttribute('data-unicorn');
 ```
 
+```js
+const hasUnicorn = element.hasAttribute('data-unicorn');
+```
+
 ## Pass
 
 ```js
@@ -26,10 +30,34 @@ element.dataset.unicorn = '🦄';
 delete element.dataset.unicorn;
 ```
 
+```js
+const hasUnicorn = Object.hasOwn(element.dataset, 'unicorn');
+```
+
+```js
+const hasUnicorn = Object.prototype.hasOwnProperty.call(element.dataset, 'unicorn');
+```
+
+```js
+const hasUnicorn = element.dataset.hasOwnProperty('unicorn');
+```
+
+```js
+const hasUnicorn = Reflect.has(element.dataset, 'unicorn');
+```
+
+```js
+const hasUnicorn = 'unicorn' in element.dataset;
+```
+
 ```js
 element.setAttribute('not-dataset', '🦄');
 ```
 
 ```js
 element.removeAttribute('not-dataset');
 ```
+
+```js
+const hasFoo = element.hasAttribute('foo');
+```

readme.md

@@ -213,7 +213,7 @@ Each rule has emojis denoting:
 | [prefer-date-now](docs/rules/prefer-date-now.md) | Prefer `Date.now()` to get the number of milliseconds since the Unix Epoch. | ✅ | 🔧 |  |
 | [prefer-default-parameters](docs/rules/prefer-default-parameters.md) | Prefer default parameters over reassignment. | ✅ | 🔧 | 💡 |
 | [prefer-dom-node-append](docs/rules/prefer-dom-node-append.md) | Prefer `Node#append()` over `Node#appendChild()`. | ✅ | 🔧 |  |
-| [prefer-dom-node-dataset](docs/rules/prefer-dom-node-dataset.md) | Prefer using `.dataset` on DOM elements over `.setAttribute(…)` and `.removeAttribute(…)`. | ✅ | 🔧 |  |
+| [prefer-dom-node-dataset](docs/rules/prefer-dom-node-dataset.md) | Prefer using `.dataset` on DOM elements over accessing attributes. | ✅ | 🔧 |  |
 | [prefer-dom-node-remove](docs/rules/prefer-dom-node-remove.md) | Prefer `childNode.remove()` over `parentNode.removeChild(childNode)`. | ✅ | 🔧 | 💡 |
 | [prefer-dom-node-text-content](docs/rules/prefer-dom-node-text-content.md) | Prefer `.textContent` over `.innerText`. | ✅ |  | 💡 |
 | [prefer-export-from](docs/rules/prefer-export-from.md) | Prefer `export…from` when re-exporting. | ✅ | 🔧 | 💡 |

rules/prefer-dom-node-dataset.js

@@ -11,7 +11,7 @@ const messages = {
 const selector = [
 	matches([
 		methodCallSelector({method: 'setAttribute', argumentsLength: 2}),
-		methodCallSelector({method: 'removeAttribute', argumentsLength: 1}),
+		methodCallSelector({methods: ['removeAttribute', 'hasAttribute'], argumentsLength: 1}),
 	]),
 	'[arguments.0.type="Literal"]',
 ].join('');
@@ -30,14 +30,28 @@ const create = context => ({
 
 		const method = node.callee.property.name;
 		const name = dashToCamelCase(attributeName.slice(5));
-		let text = isValidVariableName(name) ? `.${name}` : `[${quoteString(name, nameNode.raw.charAt(0))}]`;
 
 		const sourceCode = context.getSourceCode();
-		text = `${sourceCode.getText(node.callee.object)}.dataset${text}`;
+		let text = '';
+		const datasetText = `${sourceCode.getText(node.callee.object)}.dataset`;
+		switch (method) {
+			case 'setAttribute':
+			case 'removeAttribute': {
+				text = isValidVariableName(name) ? `.${name}` : `[${quoteString(name, nameNode.raw.charAt(0))}]`;
+				text = `${datasetText}${text}`;
+				text = method === 'setAttribute'
+					? `${text} = ${sourceCode.getText(node.arguments[1])}`
+					: `delete ${text}`;
+				break;
+			}
 
-		text = method === 'setAttribute'
-			? `${text} = ${sourceCode.getText(node.arguments[1])}`
-			: `delete ${text}`;
+			case 'hasAttribute':
+				// TODO: Use `Object.hasOwn()` here when targeting Node.js 16.
+				// If user have `prefer-object-has-own` rule enabled, this will be fixed to use `Object.hasOwn()`
+				text = `Object.prototype.hasOwnProperty.call(${datasetText}, ${quoteString(name, nameNode.raw.charAt(0))})`;
+				break;
+			// No default
+		}
 
 		return {
 			node,
@@ -54,7 +68,7 @@ module.exports = {
 	meta: {
 		type: 'suggestion',
 		docs: {
-			description: 'Prefer using `.dataset` on DOM elements over `.setAttribute(…)` and `.removeAttribute(…)`.',
+			description: 'Prefer using `.dataset` on DOM elements over accessing attributes.',
 		},
 		fixable: 'code',
 		messages,

test/prefer-dom-node-dataset.mjs

@@ -97,3 +97,54 @@ test.snapshot({
 		'element.querySelector("#selector").removeAttribute("data-AllowAccess");',
 	],
 });
+
+// `hasAttribute``
+test.snapshot({
+	valid: [
+		'"unicorn" in element.dataset',
+		'element.dataset.hasOwnProperty("unicorn")',
+		'Object.prototype.hasOwnProperty.call(element.dataset, "unicorn")',
+		'Object.hasOwn(element.dataset, "unicorn")',
+		'Reflect.has(element.dataset, "unicorn")',
+		// Not `CallExpression`
+		'new element.hasAttribute("data-unicorn");',
+		// Not `MemberExpression`
+		'hasAttribute("data-unicorn");',
+		// `callee.property` is not a `Identifier`
+		'element["hasAttribute"]("data-unicorn");',
+		// Computed
+		'element[hasAttribute]("data-unicorn");',
+		// Not `removeAttribute`
+		'element.foo("data-unicorn");',
+		// More or less argument(s)
+		'element.hasAttribute("data-unicorn", "extra");',
+		'element.hasAttribute();',
+		'element.hasAttribute(...argumentsArray, ...argumentsArray2)',
+		// First Argument is not `Literal`
+		'element.hasAttribute(`data-unicorn`);',
+		// First Argument is not `string`
+		'element.hasAttribute(0);',
+		// First Argument is not startsWith `data-`
+		'element.hasAttribute("foo-unicorn");',
+		// First Argument is `data-`
+		'element.hasAttribute("data-");',
+	],
+	invalid: [
+		outdent`
+			element.hasAttribute(
+				"data-foo", // comment
+			);
+		`,
+		'element.hasAttribute(\'data-unicorn\');',
+		'element.hasAttribute("data-unicorn");',
+		'element.hasAttribute("data-unicorn",);',
+		'element.hasAttribute("data-🦄");',
+		'element.hasAttribute("data-foo2");',
+		'element.hasAttribute("data-foo:bar");',
+		'element.hasAttribute("data-foo:bar");',
+		'element.hasAttribute("data-foo.bar");',
+		'element.hasAttribute("data-foo-bar");',
+		'element.hasAttribute("data-foo");',
+		'element.querySelector("#selector").hasAttribute("data-AllowAccess");',
+	],
+});

test/snapshots/prefer-dom-node-dataset.mjs.md

@@ -370,3 +370,201 @@ Generated by [AVA](https://avajs.dev).
     > 1 | element.querySelector("#selector").removeAttribute("data-AllowAccess");␊
         | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Prefer \`.dataset\` over \`removeAttribute(…)\`.␊
     `
+
+## Invalid #1
+      1 | element.hasAttribute(
+      2 | 	"data-foo", // comment
+      3 | );
+
+> Output
+
+    `␊
+      1 | Object.prototype.hasOwnProperty.call(element.dataset, "foo");␊
+    `
+
+> Error 1/1
+
+    `␊
+    > 1 | element.hasAttribute(␊
+        | ^^^^^^^^^^^^^^^^^^^^^␊
+    > 2 | 	"data-foo", // comment␊
+        | ^^^^^^^^^^^^^^^^^^^^^^^␊
+    > 3 | );␊
+        | ^^ Prefer \`.dataset\` over \`hasAttribute(…)\`.␊
+    `
+
+## Invalid #2
+      1 | element.hasAttribute('data-unicorn');
+
+> Output
+
+    `␊
+      1 | Object.prototype.hasOwnProperty.call(element.dataset, 'unicorn');␊
+    `
+
+> Error 1/1
+
+    `␊
+    > 1 | element.hasAttribute('data-unicorn');␊
+        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Prefer \`.dataset\` over \`hasAttribute(…)\`.␊
+    `
+
+## Invalid #3
+      1 | element.hasAttribute("data-unicorn");
+
+> Output
+
+    `␊
+      1 | Object.prototype.hasOwnProperty.call(element.dataset, "unicorn");␊
+    `
+
+> Error 1/1
+
+    `␊
+    > 1 | element.hasAttribute("data-unicorn");␊
+        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Prefer \`.dataset\` over \`hasAttribute(…)\`.␊
+    `
+
+## Invalid #4
+      1 | element.hasAttribute("data-unicorn",);
+
+> Output
+
+    `␊
+      1 | Object.prototype.hasOwnProperty.call(element.dataset, "unicorn");␊
+    `
+
+> Error 1/1
+
+    `␊
+    > 1 | element.hasAttribute("data-unicorn",);␊
+        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Prefer \`.dataset\` over \`hasAttribute(…)\`.␊
+    `
+
+## Invalid #5
+      1 | element.hasAttribute("data-🦄");
+
+> Output
+
+    `␊
+      1 | Object.prototype.hasOwnProperty.call(element.dataset, "🦄");␊
+    `
+
+> Error 1/1
+
+    `␊
+    > 1 | element.hasAttribute("data-🦄");␊
+        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Prefer \`.dataset\` over \`hasAttribute(…)\`.␊
+    `
+
+## Invalid #6
+      1 | element.hasAttribute("data-foo2");
+
+> Output
+
+    `␊
+      1 | Object.prototype.hasOwnProperty.call(element.dataset, "foo2");␊
+    `
+
+> Error 1/1
+
+    `␊
+    > 1 | element.hasAttribute("data-foo2");␊
+        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Prefer \`.dataset\` over \`hasAttribute(…)\`.␊
+    `
+
+## Invalid #7
+      1 | element.hasAttribute("data-foo:bar");
+
+> Output
+
+    `␊
+      1 | Object.prototype.hasOwnProperty.call(element.dataset, "foo:bar");␊
+    `
+
+> Error 1/1
+
+    `␊
+    > 1 | element.hasAttribute("data-foo:bar");␊
+        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Prefer \`.dataset\` over \`hasAttribute(…)\`.␊
+    `
+
+## Invalid #8
+      1 | element.hasAttribute("data-foo:bar");
+
+> Output
+
+    `␊
+      1 | Object.prototype.hasOwnProperty.call(element.dataset, "foo:bar");␊
+    `
+
+> Error 1/1
+
+    `␊
+    > 1 | element.hasAttribute("data-foo:bar");␊
+        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Prefer \`.dataset\` over \`hasAttribute(…)\`.␊
+    `
+
+## Invalid #9
+      1 | element.hasAttribute("data-foo.bar");
+
+> Output
+
+    `␊
+      1 | Object.prototype.hasOwnProperty.call(element.dataset, "foo.bar");␊
+    `
+
+> Error 1/1
+
+    `␊
+    > 1 | element.hasAttribute("data-foo.bar");␊
+        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Prefer \`.dataset\` over \`hasAttribute(…)\`.␊
+    `
+
+## Invalid #10
+      1 | element.hasAttribute("data-foo-bar");
+
+> Output
+
+    `␊
+      1 | Object.prototype.hasOwnProperty.call(element.dataset, "fooBar");␊
+    `
+
+> Error 1/1
+
+    `␊
+    > 1 | element.hasAttribute("data-foo-bar");␊
+        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Prefer \`.dataset\` over \`hasAttribute(…)\`.␊
+    `
+
+## Invalid #11
+      1 | element.hasAttribute("data-foo");
+
+> Output
+
+    `␊
+      1 | Object.prototype.hasOwnProperty.call(element.dataset, "foo");␊
+    `
+
+> Error 1/1
+
+    `␊
+    > 1 | element.hasAttribute("data-foo");␊
+        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Prefer \`.dataset\` over \`hasAttribute(…)\`.␊
+    `
+
+## Invalid #12
+      1 | element.querySelector("#selector").hasAttribute("data-AllowAccess");
+
+> Output
+
+    `␊
+      1 | Object.prototype.hasOwnProperty.call(element.querySelector("#selector").dataset, "AllowAccess");␊
+    `
+
+> Error 1/1
+
+    `␊
+    > 1 | element.querySelector("#selector").hasAttribute("data-AllowAccess");␊
+        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Prefer \`.dataset\` over \`hasAttribute(…)\`.␊
+    `