Add prefer-modern-dom-apis rule

docs/rules/prefer-modern-dom-apis.md

@@ -0,0 +1,52 @@
+# Prefer modern DOM APIs
+
+Enforces the use of:
+
+- `childNode.replaceWith(newNode);` over `parentNode.replaceChild(newNode, oldNode)`;
+- `referenceNode.before(newNode);` over `parentNode.insertBefore(newNode, referenceNode);`
+- `referenceNode.before("text");` over `referenceNode.insertAdjacentText("beforebegin", "text");`
+- `referenceNode.before(newNode);` over `referenceNode.insertAdjacentElement("beforebegin", newNode);`
+
+There are some advantages of using the newer DOM APIs, like:
+
+- traversing to the parent node is not necessary
+- appending multiple nodes at once
+- both [`DOMString`](https://developer.mozilla.org/en-US/docs/Web/API/DOMString) and [DOM node objects](https://developer.mozilla.org/en-US/docs/Web/API/Element) can be manipulated.
+
+This rule is fixable.
+
+## Fail
+
+```js
+foo.replaceChild(baz, bar);
+
+foo.insertBefore(baz, bar);
+
+foo.insertAdjacentText('position', bar);
+
+foo.insertAdjacentElement('position', bar);
+```
+
+## Pass
+
+```js
+foo.replaceWith(bar);
+foo.replaceWith('bar');
+foo.replaceWith(bar, 'baz'));
+
+foo.before(bar)
+foo.before('bar')
+foo.before(bar, 'baz')
+
+foo.prepend(bar)
+foo.prepend('bar')
+foo.prepend(bar, 'baz')
+
+foo.append(bar)
+foo.append('bar')
+foo.append(bar, 'baz')
+
+foo.after(bar)
+foo.after('bar')
+foo.after(bar, 'baz')
+```

index.js

@@ -13,9 +13,7 @@ module.exports = {
 				ecmaVersion: 2020,
 				sourceType: 'module'
 			},
-			plugins: [
-				'unicorn'
-			],
+			plugins: ['unicorn'],
 			rules: {
 				'unicorn/catch-error-name': 'error',
 				'unicorn/consistent-function-scoping': 'error',
@@ -46,6 +44,7 @@ module.exports = {
 				'unicorn/prefer-exponentiation-operator': 'error',
 				'unicorn/prefer-flat-map': 'error',
 				'unicorn/prefer-includes': 'error',
+				'unicorn/prefer-modern-dom-apis': 'error',
 				'unicorn/prefer-node-append': 'error',
 				'unicorn/prefer-node-remove': 'error',
 				'unicorn/prefer-query-selector': 'error',

readme.md

@@ -8,14 +8,12 @@ You might want to check out [XO](https://github.com/xojs/xo), which includes thi
 
 [**Propose or contribute a new rule ➡**](.github/contributing.md)
 
-
 ## Install
 
-```
+```bash
 $ npm install --save-dev eslint eslint-plugin-unicorn
 ```
 
-
 ## Usage
 
 Configure it in `package.json`.
@@ -64,6 +62,7 @@ Configure it in `package.json`.
 			"unicorn/prefer-exponentiation-operator": "error",
 			"unicorn/prefer-flat-map": "error",
 			"unicorn/prefer-includes": "error",
+			"unicorn/prefer-modern-dom-apis": "error",
 			"unicorn/prefer-node-append": "error",
 			"unicorn/prefer-node-remove": "error",
 			"unicorn/prefer-query-selector": "error",
@@ -79,7 +78,6 @@ Configure it in `package.json`.
 }
 ```
 
-
 ## Rules
 
 - [catch-error-name](docs/rules/catch-error-name.md) - Enforce a specific parameter name in catch clauses.
@@ -111,6 +109,7 @@ Configure it in `package.json`.
 - [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)*
 - [prefer-includes](docs/rules/prefer-includes.md) - Prefer `.includes()` over `.indexOf()` when checking for existence or non-existence. *(fixable)*
+- [prefer-modern-dom-apis](docs/rules/prefer-modern-dom-apis.md) - Prefer `.before()` over `.insertBefore()`, `.replaceWith()` over `.replaceChild()`, prefer one of `.before()`, `.after()`, `.append()` or `.prepend()` over `insertAdjacentText()` and `insertAdjacentElement()`. *(fixable)*
 - [prefer-node-append](docs/rules/prefer-node-append.md) - Prefer `Node#append()` over `Node#appendChild()`. *(fixable)*
 - [prefer-node-remove](docs/rules/prefer-node-remove.md) - Prefer `node.remove()` over `parentNode.removeChild(node)` and `parentElement.removeChild(node)`. *(fixable)*
 - [prefer-query-selector](docs/rules/prefer-query-selector.md) - Prefer `.querySelector()` over `.getElementById()`, `.querySelectorAll()` over `.getElementsByClassName()` and `.getElementsByTagName()`. *(partly fixable)*
@@ -122,7 +121,6 @@ Configure it in `package.json`.
 - [regex-shorthand](docs/rules/regex-shorthand.md) - Enforce the use of regex shorthands to improve readability. *(fixable)*
 - [throw-new-error](docs/rules/throw-new-error.md) - Require `new` when throwing an error. *(fixable)*
 
-
 ## Recommended config
 
 This plugin exports a [`recommended` config](index.js) that enforces good practices.
@@ -142,7 +140,6 @@ See the [ESLint docs](http://eslint.org/docs/user-guide/configuring#extending-co
 
 **Note**: This config will also enable the correct [parser options](http://eslint.org/docs/user-guide/configuring#specifying-parser-options) and [environment](http://eslint.org/docs/user-guide/configuring#specifying-environments).
 
-
 ## Maintainers
 
 - [Sindre Sorhus](https://github.com/sindresorhus)
@@ -154,7 +151,6 @@ See the [ESLint docs](http://eslint.org/docs/user-guide/configuring#extending-co
 
 - [Jeroen Engels](https://github.com/jfmengels)
 
-
 ## License
 
 MIT

rules/prefer-modern-dom-apis.js

@@ -0,0 +1,136 @@
+'use strict';
+const getDocsUrl = require('./utils/get-docs-url');
+
+const getArgumentNameForReplaceChildOrInsertBefore = nodeArguments => {
+	if (nodeArguments.type === 'Identifier') {
+		return nodeArguments.name;
+	}
+
+	return null;
+};
+
+const forbiddenIdentifierNames = new Map([
+	['replaceChild', 'replaceWith'],
+	['insertBefore', 'before']
+]);
+
+const checkForReplaceChildOrInsertBefore = (context, node) => {
+	const identifierName = node.callee.property.name;
+
+	// Return early when specified methods don't exist in forbiddenIdentifierNames
+	if (!forbiddenIdentifierNames.has(identifierName)) {
+		return;
+	}
+
+	const nodeArguments = node.arguments;
+	const newChildNodeArg = getArgumentNameForReplaceChildOrInsertBefore(
+		nodeArguments[0]
+	);
+	const oldChildNodeArg = getArgumentNameForReplaceChildOrInsertBefore(
+		nodeArguments[1]
+	);
+
+	// Return early in case that one of the provided arguments is not a node
+	if (!newChildNodeArg || !oldChildNodeArg) {
+		return;
+	}
+
+	const parentNode = node.callee.object.name;
+	// This check makes sure that only the first method of chained methods with same identifier name e.g: parentNode.insertBefore(alfa, beta).insertBefore(charlie, delta); gets transformed
+	if (!parentNode) {
+		return;
+	}
+
+	const preferredSelector = forbiddenIdentifierNames.get(identifierName);
+
+	return context.report({
+		node,
+		message: `Prefer \`${oldChildNodeArg}.${preferredSelector}(${newChildNodeArg})\` over \`${parentNode}.${identifierName}(${newChildNodeArg}, ${oldChildNodeArg})\`.`,
+		fix: fixer =>
+			fixer.replaceText(
+				node,
+				`${oldChildNodeArg}.${preferredSelector}(${newChildNodeArg})`
+			)
+	});
+};
+
+// Handle both Identifier and Literal because the preferred selectors support nodes and DOMString
+const getArgumentNameForInsertAdjacentMethods = nodeArguments => {
+	if (nodeArguments.type === 'Identifier') {
+		return nodeArguments.name;
+	}
+
+	if (nodeArguments.type === 'Literal') {
+		return nodeArguments.raw;
+	}
+
+	return null;
+};
+
+const positionReplacers = new Map([
+	['beforebegin', 'before'],
+	['afterbegin', 'prepend'],
+	['beforeend', 'append'],
+	['afterend', 'after']
+]);
+
+const checkForInsertAdjacentTextOrInsertAdjacentElement = (context, node) => {
+	const identifierName = node.callee.property.name;
+
+	if (
+		identifierName !== 'insertAdjacentText' &&
+		identifierName !== 'insertAdjacentElement'
+	) {
+		return;
+	}
+
+	const nodeArguments = node.arguments;
+	const positionArg = getArgumentNameForInsertAdjacentMethods(nodeArguments[0]);
+	const positionAsValue = nodeArguments[0].value;
+
+	// Return early when specified position value of 1st argument is not a recognised value
+	if (!positionReplacers.has(positionAsValue)) {
+		return;
+	}
+
+	const referenceNode = node.callee.object.name;
+	const preferredSelector = positionReplacers.get(positionAsValue);
+	const insertedTextArg = getArgumentNameForInsertAdjacentMethods(
+		nodeArguments[1]
+	);
+
+	return context.report({
+		node,
+		message: `Prefer \`${referenceNode}.${preferredSelector}(${insertedTextArg})\` over \`${referenceNode}.${identifierName}(${positionArg}, ${insertedTextArg})\`.`,
+		fix: fixer =>
+			fixer.replaceText(
+				node,
+				`${referenceNode}.${preferredSelector}(${insertedTextArg})`
+			)
+	});
+};
+
+const create = context => {
+	return {
+		CallExpression(node) {
+			if (
+				node.callee.type === 'MemberExpression' &&
+				node.arguments.length === 2
+			) {
+				checkForReplaceChildOrInsertBefore(context, node);
+				checkForInsertAdjacentTextOrInsertAdjacentElement(context, node);
+			}
+		}
+	};
+};
+
+module.exports = {
+	create,
+	meta: {
+		type: 'suggestion',
+		docs: {
+			url: getDocsUrl(__filename)
+		},
+		fixable: 'code'
+	}
+};