prefer-dom-node-text-content: Check destructuring, Use suggestion i…

…nstead of auto-fix (#1417)
sindresorhus · Jul 13, 2021 · c4bfc42 · c4bfc42
1 parent 741484a
commit c4bfc42
Show file tree

Hide file tree

Showing 6 changed files with 276 additions and 32 deletions.
diff --git a/docs/rules/prefer-dom-node-text-content.md b/docs/rules/prefer-dom-node-text-content.md
@@ -1,18 +1,35 @@
 # Prefer `.textContent` over `.innerText`
 
-Enforces the use of `.textContent` over `.innerText` for DOM nodes. There are [some advantages of using `.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent), like performance and more predictable behavior when updating it.
+Enforces the use of `.textContent` over `.innerText` for DOM nodes.
 
-This rule is fixable.
+There are [some advantages of using `.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent), like performance and more predictable behavior when updating it.
 
+Note that there are [differences](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext) between them.
 
 ## Fail
 
+```js
+const text = foo.innerText;
+```
+
+```js
+const {innerText} = foo;
+```
+
 ```js
 foo.innerText = '🦄';
 ```
 
 ## Pass
 
+```js
+const text = foo.textContent;
+```
+
+```js
+const {textContent} = foo;
+```
+
 ```js
 foo.textContent = '🦄';
 ```
diff --git a/readme.md b/readme.md
@@ -209,7 +209,7 @@ Each rule has emojis denoting:
 | [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(…)`. | ✅ | 🔧 |  |
 | [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-dom-node-text-content](docs/rules/prefer-dom-node-text-content.md) | Prefer `.textContent` over `.innerText`. | ✅ |  | 💡 |
 | [prefer-includes](docs/rules/prefer-includes.md) | Prefer `.includes()` over `.indexOf()` and `Array#some()` when checking for existence or non-existence. | ✅ | 🔧 | 💡 |
 | [prefer-keyboard-event-key](docs/rules/prefer-keyboard-event-key.md) | Prefer `KeyboardEvent#key` over `KeyboardEvent#keyCode`. | ✅ | 🔧 |  |
 | [prefer-math-trunc](docs/rules/prefer-math-trunc.md) | Enforce the use of `Math.trunc` instead of bitwise operators. | ✅ | 🔧 | 💡 |

diff --git a/rules/prefer-dom-node-text-content.js b/rules/prefer-dom-node-text-content.js
@@ -1,20 +1,52 @@
 'use strict';
 const {memberExpressionSelector} = require('./selectors/index.js');
 
-const MESSAGE_ID = 'prefer-dom-node-text-content';
+const ERROR = 'error';
+const SUGGESTION = 'suggestion';
 const messages = {
-	[MESSAGE_ID]: 'Prefer `.textContent` over `.innerText`.',
+	[ERROR]: 'Prefer `.textContent` over `.innerText`.',
+	[SUGGESTION]: 'Switch to `.textContent`.',
 };
 
-const selector = `${memberExpressionSelector('innerText')} > .property`;
+const memberExpressionPropertySelector = `${memberExpressionSelector('innerText')} > .property`;
+const destructuringSelector = [
+	'ObjectPattern',
+	' > ',
+	'Property.properties',
+	'[kind="init"]',
+	'[computed!=true]',
+	' > ',
+	'Identifier.key',
+	'[name="innerText"]',
+].join('');
 
 const create = () => {
 	return {
-		[selector](node) {
+		[memberExpressionPropertySelector](node) {
 			return {
 				node,
-				messageId: MESSAGE_ID,
-				fix: fixer => fixer.replaceText(node, 'textContent'),
+				messageId: ERROR,
+				suggest: [
+					{
+						messageId: SUGGESTION,
+						fix: fixer => fixer.replaceText(node, 'textContent'),
+					},
+				],
+			};
+		},
+		[destructuringSelector](node) {
+			return {
+				node,
+				messageId: ERROR,
+				suggest: [
+					{
+						messageId: SUGGESTION,
+						fix: fixer => fixer.replaceText(
+							node,
+							node.parent.shorthand ? 'textContent: innerText' : 'textContent',
+						),
+					},
+				],
 			};
 		},
 	};
@@ -27,7 +59,7 @@ module.exports = {
 		docs: {
 			description: 'Prefer `.textContent` over `.innerText`.',
 		},
-		fixable: 'code',
 		messages,
+		hasSuggestions: true,
 	},
 };
diff --git a/test/prefer-dom-node-text-content.mjs b/test/prefer-dom-node-text-content.mjs
@@ -2,36 +2,31 @@ import {getTester} from './utils/test.mjs';
 
 const {test} = getTester(import.meta);
 
-const errors = [
-	{
-		message: 'Prefer `.textContent` over `.innerText`.',
-	},
-];
-
-test({
+test.snapshot({
 	valid: [
 		'innerText;',
 		'node.textContent;',
 		'node[innerText];',
 		'innerText = true;',
 		'node[\'innerText\'];',
 		'innerText.textContent',
+		'const [innerText] = node;',
+		'[innerText] = node;',
+		'const {[innerText]: text} = node;',
+		'({[innerText]: text} = node);',
+		'const foo = {innerText}',
+		'const foo = {innerText: text}',
 	],
 	invalid: [
-		{
-			code: 'node.innerText;',
-			output: 'node.textContent;',
-			errors,
-		},
-		{
-			code: 'node.innerText = \'foo\';',
-			output: 'node.textContent = \'foo\';',
-			errors,
-		},
-		{
-			code: 'innerText.innerText;',
-			output: 'innerText.textContent;',
-			errors,
-		},
+		'node.innerText;',
+		'node.innerText = \'foo\';',
+		'innerText.innerText;',
+		'const {innerText} = node;',
+		'const {innerText,} = node;',
+		'const {innerText: text} = node;',
+		'({innerText} = node);',
+		'({innerText: text} = node);',
+		'function foo({innerText}) {return innerText}',
+		'for (const [{innerText}] of elements);',
 	],
 });
diff --git a/test/snapshots/prefer-dom-node-text-content.mjs.md b/test/snapshots/prefer-dom-node-text-content.mjs.md
@@ -0,0 +1,200 @@
+# Snapshot report for `test/prefer-dom-node-text-content.mjs`
+
+The actual snapshot is saved in `prefer-dom-node-text-content.mjs.snap`.
+
+Generated by [AVA](https://avajs.dev).
+
+## Invalid #1
+      1 | node.innerText;
+
+> Error 1/1
+
+    `␊
+    > 1 | node.innerText;␊
+        |      ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | node.textContent;␊
+    `
+
+## Invalid #2
+      1 | node.innerText = 'foo';
+
+> Error 1/1
+
+    `␊
+    > 1 | node.innerText = 'foo';␊
+        |      ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | node.textContent = 'foo';␊
+    `
+
+## Invalid #3
+      1 | innerText.innerText;
+
+> Error 1/1
+
+    `␊
+    > 1 | innerText.innerText;␊
+        |           ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | innerText.textContent;␊
+    `
+
+## Invalid #4
+      1 | const {innerText} = node;
+
+> Error 1/2
+
+    `␊
+    > 1 | const {innerText} = node;␊
+        |        ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | const {textContent: innerText} = node;␊
+    `
+
+> Error 2/2
+
+    `␊
+    > 1 | const {innerText} = node;␊
+        |        ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | const {textContent: innerText} = node;␊
+    `
+
+## Invalid #5
+      1 | const {innerText,} = node;
+
+> Error 1/2
+
+    `␊
+    > 1 | const {innerText,} = node;␊
+        |        ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | const {textContent: innerText,} = node;␊
+    `
+
+> Error 2/2
+
+    `␊
+    > 1 | const {innerText,} = node;␊
+        |        ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | const {textContent: innerText,} = node;␊
+    `
+
+## Invalid #6
+      1 | const {innerText: text} = node;
+
+> Error 1/1
+
+    `␊
+    > 1 | const {innerText: text} = node;␊
+        |        ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | const {textContent: text} = node;␊
+    `
+
+## Invalid #7
+      1 | ({innerText} = node);
+
+> Error 1/2
+
+    `␊
+    > 1 | ({innerText} = node);␊
+        |   ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | ({textContent: innerText} = node);␊
+    `
+
+> Error 2/2
+
+    `␊
+    > 1 | ({innerText} = node);␊
+        |   ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | ({textContent: innerText} = node);␊
+    `
+
+## Invalid #8
+      1 | ({innerText: text} = node);
+
+> Error 1/1
+
+    `␊
+    > 1 | ({innerText: text} = node);␊
+        |   ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | ({textContent: text} = node);␊
+    `
+
+## Invalid #9
+      1 | function foo({innerText}) {return innerText}
+
+> Error 1/2
+
+    `␊
+    > 1 | function foo({innerText}) {return innerText}␊
+        |               ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | function foo({textContent: innerText}) {return innerText}␊
+    `
+
+> Error 2/2
+
+    `␊
+    > 1 | function foo({innerText}) {return innerText}␊
+        |               ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | function foo({textContent: innerText}) {return innerText}␊
+    `
+
+## Invalid #10
+      1 | for (const [{innerText}] of elements);
+
+> Error 1/2
+
+    `␊
+    > 1 | for (const [{innerText}] of elements);␊
+        |              ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | for (const [{textContent: innerText}] of elements);␊
+    `
+
+> Error 2/2
+
+    `␊
+    > 1 | for (const [{innerText}] of elements);␊
+        |              ^^^^^^^^^ Prefer \`.textContent\` over \`.innerText\`.␊
+    ␊
+    --------------------------------------------------------------------------------␊
+    Suggestion 1/1: Switch to \`.textContent\`.␊
+      1 | for (const [{textContent: innerText}] of elements);␊
+    `
diff --git a/test/snapshots/prefer-dom-node-text-content.mjs.snap b/test/snapshots/prefer-dom-node-text-content.mjs.snap