prefer-includes: Fix compatibility with Vue SFC (#2704)

Author: fisker

rules/no-instanceof-builtins.js

@@ -1,5 +1,8 @@
-import {checkVueTemplate} from './utils/rule.js';
-import {getParenthesizedRange} from './utils/parentheses.js';
+import {
+	checkVueTemplate,
+	getParenthesizedRange,
+	getTokenStore,
+} from './utils/index.js';
 import {replaceNodeOrTokenAndSpacesBefore, fixSpaceAroundKeyword} from './fix/index.js';
 import builtinErrors from './shared/builtin-errors.js';
 import typedArray from './shared/typed-array.js';
@@ -53,9 +56,11 @@ const strictStrategyConstructors = [
 	'FinalizationRegistry',
 ];
 
-const replaceWithFunctionCall = (node, sourceCode, functionName) => function * (fixer) {
-	const {tokenStore, instanceofToken} = getInstanceOfToken(sourceCode, node);
+const replaceWithFunctionCall = (node, context, functionName) => function * (fixer) {
 	const {left, right} = node;
+	const tokenStore = getTokenStore(context, node);
+	const instanceofToken = tokenStore.getTokenAfter(left, isInstanceofToken);
+	const {sourceCode} = context;
 
 	yield * fixSpaceAroundKeyword(fixer, node, sourceCode);
 
@@ -67,9 +72,11 @@ const replaceWithFunctionCall = (node, sourceCode, functionName) => function * (
 	yield * replaceNodeOrTokenAndSpacesBefore(right, '', fixer, sourceCode, tokenStore);
 };
 
-const replaceWithTypeOfExpression = (node, sourceCode) => function * (fixer) {
-	const {tokenStore, instanceofToken} = getInstanceOfToken(sourceCode, node);
+const replaceWithTypeOfExpression = (node, context) => function * (fixer) {
 	const {left, right} = node;
+	const tokenStore = getTokenStore(context, node);
+	const instanceofToken = tokenStore.getTokenAfter(left, isInstanceofToken);
+	const {sourceCode} = context;
 
 	// Check if the node is in a Vue template expression
 	const vueExpressionContainer = sourceCode.getAncestors(node).findLast(ancestor => ancestor.type === 'VExpressionContainer');
@@ -89,19 +96,6 @@ const replaceWithTypeOfExpression = (node, sourceCode) => function * (fixer) {
 	yield fixer.replaceTextRange(rightRange, safeQuote + sourceCode.getText(right).toLowerCase() + safeQuote);
 };
 
-const getInstanceOfToken = (sourceCode, node) => {
-	const {left} = node;
-
-	let tokenStore = sourceCode;
-	let instanceofToken = tokenStore.getTokenAfter(left, isInstanceofToken);
-	if (!instanceofToken && sourceCode.parserServices.getTemplateBodyTokenStore) {
-		tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore();
-		instanceofToken = tokenStore.getTokenAfter(left, isInstanceofToken);
-	}
-
-	return {tokenStore, instanceofToken};
-};
-
 /** @param {import('eslint').Rule.RuleContext} context */
 const create = context => {
 	const {
@@ -117,8 +111,6 @@ const create = context => {
 			: include,
 	);
 
-	const {sourceCode} = context;
-
 	return {
 		/** @param {import('estree').BinaryExpression} node */
 		BinaryExpression(node) {
@@ -141,12 +133,12 @@ const create = context => {
 				|| (constructorName === 'Error' && useErrorIsError)
 			) {
 				const functionName = constructorName === 'Array' ? 'Array.isArray' : 'Error.isError';
-				problem.fix = replaceWithFunctionCall(node, sourceCode, functionName);
+				problem.fix = replaceWithFunctionCall(node, context, functionName);
 				return problem;
 			}
 
 			if (constructorName === 'Function') {
-				problem.fix = replaceWithTypeOfExpression(node, sourceCode);
+				problem.fix = replaceWithTypeOfExpression(node, context);
 				return problem;
 			}
 
@@ -155,7 +147,7 @@ const create = context => {
 					{
 						messageId: MESSAGE_ID_SWITCH_TO_TYPE_OF,
 						data: {type: constructorName.toLowerCase()},
-						fix: replaceWithTypeOfExpression(node, sourceCode),
+						fix: replaceWithTypeOfExpression(node, context),
 					},
 				];
 				return problem;

rules/prefer-includes.js

@@ -1,5 +1,8 @@
-import {checkVueTemplate} from './utils/rule.js';
-import isMethodNamed from './utils/is-method-named.js';
+import {
+	checkVueTemplate,
+	isMethodNamed,
+	getTokenStore,
+} from './utils/index.js';
 import simpleArraySearchRule from './shared/simple-array-search-rule.js';
 import {isLiteral, isNegativeOne} from './ast/index.js';
 
@@ -15,7 +18,7 @@ const isNegativeResult = node => ['===', '==', '<'].includes(node.operator);
 
 const getProblem = (context, node, target, argumentsNodes) => {
 	const {sourceCode} = context;
-	const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore?.() ?? sourceCode;
+	const tokenStore = getTokenStore(context, target);
 
 	const memberExpressionNode = target.parent;
 	const dotToken = tokenStore.getTokenBefore(memberExpressionNode.property);

rules/utils/get-token-store.js

@@ -0,0 +1,24 @@
+// When parsing with `vue-eslint-parser`, we need to use `getTemplateBodyTokenStore()` to get a token inside a `<template>`, and `sourceCode` to get a token inside a `<script>`.
+// https://github.com/sindresorhus/eslint-plugin-unicorn/pull/2704/files#r2209196626
+
+/**
+@param {import('eslint').Rule.RuleContext} context
+@param {import('estree').Node} node
+@returns {import('eslint').SourceCode}
+*/
+function getTokenStore(context, node) {
+	const {sourceCode} = context;
+
+	if (
+		sourceCode.parserServices.getTemplateBodyTokenStore
+		&& sourceCode.ast.templateBody
+		&& sourceCode.getRange(sourceCode.ast.templateBody)[0] <= sourceCode.getRange(node)[0]
+		&& sourceCode.getRange(node)[1] <= sourceCode.getRange(sourceCode.ast.templateBody)[1]
+	) {
+		return sourceCode.parserServices.getTemplateBodyTokenStore();
+	}
+
+	return sourceCode;
+}
+
+export default getTokenStore;

rules/utils/index.js

@@ -29,6 +29,7 @@ export {default as getCallExpressionTokens} from './get-call-expression-tokens.j
 export {default as getIndentString} from './get-indent-string.js';
 export {default as getReferences} from './get-references.js';
 export {default as getScopes} from './get-scopes.js';
+export {default as getTokenStore} from './get-token-store.js';
 export {default as getVariableIdentifiers} from './get-variable-identifiers.js';
 export {default as hasOptionalChainElement} from './has-optional-chain-element.js';
 export {default as isFunctionSelfUsedInside} from './is-function-self-used-inside.js';
@@ -45,6 +46,7 @@ export {default as isShorthandImportLocal} from './is-shorthand-import-local.js'
 export {default as isShorthandPropertyValue} from './is-shorthand-property-value.js';
 export {default as isValueNotUsable} from './is-value-not-usable.js';
 export {default as needsSemicolon} from './needs-semicolon.js';
+export {checkVueTemplate} from './rule.js';
 export {default as shouldAddParenthesesToAwaitExpressionArgument} from './should-add-parentheses-to-await-expression-argument.js';
 export {default as shouldAddParenthesesToCallExpressionCallee} from './should-add-parentheses-to-call-expression-callee.js';
 export {default as shouldAddParenthesesToConditionalExpressionChild} from './should-add-parentheses-to-conditional-expression-child.js';

test/prefer-includes.js

@@ -1,3 +1,4 @@
+import {outdent} from 'outdent';
 import {getTester, parsers} from './utils/test.js';
 import tests from './shared/simple-array-search-rule-tests.js';
 
@@ -23,18 +24,28 @@ test.snapshot({
 		'f(0) < 0',
 	],
 	invalid: [
-		'\'foobar\'.indexOf(\'foo\') !== -1',
-		'str.indexOf(\'foo\') != -1',
-		'str.indexOf(\'foo\') > -1',
-		'str.indexOf(\'foo\') == -1',
-		'\'foobar\'.indexOf(\'foo\') >= 0',
-		'[1,2,3].indexOf(4) !== -1',
-		'str.indexOf(\'foo\') < 0',
-		'\'\'.indexOf(\'foo\') < 0',
-		'(a || b).indexOf(\'foo\') === -1',
-		'foo.indexOf(bar, 0) !== -1',
-		'foo.indexOf(bar, 1) !== -1',
-	].flatMap(code => [code, code.replace('.indexOf', '.lastIndexOf'), {code: `<template><div v-if="${code}"></div></template>`, languageOptions: {parser: parsers.vue}}]),
+		...[
+			'\'foobar\'.indexOf(\'foo\') !== -1',
+			'str.indexOf(\'foo\') != -1',
+			'str.indexOf(\'foo\') > -1',
+			'str.indexOf(\'foo\') == -1',
+			'\'foobar\'.indexOf(\'foo\') >= 0',
+			'[1,2,3].indexOf(4) !== -1',
+			'str.indexOf(\'foo\') < 0',
+			'\'\'.indexOf(\'foo\') < 0',
+			'(a || b).indexOf(\'foo\') === -1',
+			'foo.indexOf(bar, 0) !== -1',
+			'foo.indexOf(bar, 1) !== -1',
+		].flatMap(code => [code, code.replace('.indexOf', '.lastIndexOf'), {code: `<template><div v-if="${code}"></div></template>`, languageOptions: {parser: parsers.vue}}]),
+		{
+			code: outdent`
+				<script setup lang="ts">
+				console.log([].indexOf(1) != -1);
+				</script>
+			`,
+			languageOptions: {parser: parsers.vue},
+		},
+	],
 });
 
 const {snapshot, typescript} = tests({

test/snapshots/prefer-includes.js.md

@@ -697,6 +697,33 @@ Generated by [AVA](https://avajs.dev).
         |                          ^^^^^^^ Use \`.includes()\`, rather than \`.indexOf()\`, when checking for existence.␊
     `
 
+## invalid(34): <script setup lang="ts"> console.log([].indexOf(1) != -1); </script>
+
+> Input
+
+    `␊
+      1 | <script setup lang="ts">␊
+      2 | console.log([].indexOf(1) != -1);␊
+      3 | </script>␊
+    `
+
+> Output
+
+    `␊
+      1 | <script setup lang="ts">␊
+      2 | console.log([].includes(1));␊
+      3 | </script>␊
+    `
+
+> Error 1/1
+
+    `␊
+      1 | <script setup lang="ts">␊
+    > 2 | console.log([].indexOf(1) != -1);␊
+        |                ^^^^^^^ Use \`.includes()\`, rather than \`.indexOf()\`, when checking for existence.␊
+      3 | </script>␊
+    `
+
 ## invalid(1): values.some(x => x === "foo")
 
 > Input