prefer-dom-node-{append,remove}: Check optional chaining (#2061)

sindresorhus · Apr 7, 2023 · 443999b · 443999b
1 parent 0f4f492
commit 443999b
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 2 deletions.
diff --git a/rules/prefer-dom-node-append.js b/rules/prefer-dom-node-append.js
@@ -10,6 +10,7 @@ const selector = [
 	methodCallSelector({
 		method: 'appendChild',
 		argumentsLength: 1,
+		includeOptionalMember: true,
 	}),
 	notDomNodeSelector('callee.object'),
 	notDomNodeSelector('arguments.0'),

diff --git a/rules/prefer-dom-node-remove.js b/rules/prefer-dom-node-remove.js
@@ -17,6 +17,7 @@ const selector = [
 	methodCallSelector({
 		method: 'removeChild',
 		argumentsLength: 1,
+		includeOptionalMember: true,
 	}),
 	notDomNodeSelector('callee.object'),
 	notDomNodeSelector('arguments.0'),
@@ -52,7 +53,7 @@ const create = context => {
 				return fixer.replaceText(node, `${childNodeText}.remove()`);
 			};
 
-			if (!hasSideEffect(parentNode, sourceCode) && isValueNotUsable(node)) {
+			if (!hasSideEffect(parentNode, sourceCode) && isValueNotUsable(node) && !node.callee.optional) {
 				problem.fix = fix;
 			} else {
 				problem.suggest = [

diff --git a/rules/utils/is-value-not-usable.js b/rules/utils/is-value-not-usable.js
@@ -1,3 +1,8 @@
 'use strict';
 
-module.exports = ({parent}) => !parent || parent.type === 'ExpressionStatement';
+module.exports = node =>
+	node.parent.type === 'ExpressionStatement'
+	|| (
+		node.parent.type === 'ChainExpression'
+		&& node.parent.parent.type === 'ExpressionStatement'
+	);
diff --git a/test/prefer-dom-node-append.mjs b/test/prefer-dom-node-append.mjs
@@ -26,6 +26,8 @@ test({
 		'parent.appendChild(one, two);',
 		'parent.appendChild();',
 		'parent.appendChild(...argumentsArray)',
+		// Optional call
+		'parent.appendChild?.(child)',
 		// `callee.object` is not a DOM Node,
 		...notDomNodeTypes.map(data => `(${data}).appendChild(foo)`),
 		// First argument is not a DOM Node,
@@ -117,5 +119,14 @@ test({
 			code: 'foo(bar = node.appendChild(child))',
 			errors: [error],
 		},
+		{
+			code: 'node?.appendChild(child);',
+			output: 'node?.append(child);',
+			errors: [error],
+		},
+		{
+			code: '() => node?.appendChild(child)',
+			errors: [error],
+		},
 	],
 });
diff --git a/test/prefer-dom-node-remove.mjs b/test/prefer-dom-node-remove.mjs
@@ -59,6 +59,8 @@ test({
 		'parentNode.removeChild(bar, extra);',
 		'parentNode.removeChild();',
 		'parentNode.removeChild(...argumentsArray)',
+		// Optional call
+		'parentNode.removeChild?.(foo)',
 
 		// `callee.object` is not a DOM Node,
 		...notDomNodeTypes.map(data => `(${data}).removeChild(foo)`),
@@ -245,5 +247,10 @@ test({
 			code: 'foo[doSomething()].removeChild(child)',
 			suggestionOutput: 'child.remove()',
 		},
+		// Optional parent
+		{
+			code: 'parentNode?.removeChild(foo)',
+			suggestionOutput: 'foo.remove()',
+		},
 	].map(options => invalidTestCase(options)),
 });