Merge branch 'master' into prefer-template-ref/auto-fix

# Conflicts:
#	lib/rules/prefer-use-template-ref.js

Author: 9romise

.changeset/rich-bags-turn.md

@@ -1,5 +1,13 @@
 # eslint-plugin-vue
 
+## 10.6.2
+
+### Patch Changes
+
+- Fixed false positives in non-intersecting conditions in [`vue/no-duplicate-class-names`](https://eslint.vuejs.org/rules/no-duplicate-class-names.html) and correctly detect duplicates in combining expressions ([#2980](https://github.com/vuejs/eslint-plugin-vue/pull/2980))
+- Fixed false positives for `TSImportType` in [`vue/script-indent`](https://eslint.vuejs.org/rules/script-indent.html) rule ([#2969](https://github.com/vuejs/eslint-plugin-vue/pull/2969))
+- Improved performance and type safety in [`vue/prefer-use-template-ref`](https://eslint.vuejs.org/rules/prefer-use-template-ref.html) ([#2982](https://github.com/vuejs/eslint-plugin-vue/pull/2982))
+
 ## 10.6.1
 
 ### Patch Changes
@@ -11,15 +19,12 @@
 ### Minor Changes
 
 - Updated [`vue/no-import-compiler-macros`](https://eslint.vuejs.org/rules/no-import-compiler-macros.html) to clarify that macros are not allowed outside `<script setup>` ([#2938](https://github.com/vuejs/eslint-plugin-vue/pull/2938))
-
 - Added new [`vue/no-duplicate-class-names`](https://eslint.vuejs.org/rules/no-duplicate-class-names.html) rule ([#2934](https://github.com/vuejs/eslint-plugin-vue/pull/2934))
 
 ### Patch Changes
 
 - Fixed [`vue/no-v-html`](https://eslint.vuejs.org/rules/no-v-html.html) rule to allow ignoring call expressions ([#2950](https://github.com/vuejs/eslint-plugin-vue/pull/2950))
-
 - Improved [`vue/define-macros-order`](https://eslint.vuejs.org/rules/define-macros-order.html) error messages to distinguish between macro placement and ordering issues ([#2953](https://github.com/vuejs/eslint-plugin-vue/pull/2953))
-
 - Updated dependency [postcss-selector-parser](https://github.com/postcss/postcss-selector-parser) to v7.1.0 ([#2947](https://github.com/vuejs/eslint-plugin-vue/pull/2947))
 
 ## 10.5.1

CHANGELOG.md

@@ -11,15 +11,21 @@ const utils = require('../utils')
  * @param {VDirective} node
  * @param {Expression} [expression]
  * @param {boolean} [unconditional=true] whether the expression is unconditional
- * @return {IterableIterator<{ node: Literal | TemplateElement, unconditional: boolean }>}
+ * @param {Expression} [parentExpr] parent expression for context
+ * @return {IterableIterator<{ node: Literal | TemplateElement, unconditional: boolean, parentExpr?: Expression }>}
  */
-function* extractClassNodes(node, expression, unconditional = true) {
+function* extractClassNodes(
+  node,
+  expression,
+  unconditional = true,
+  parentExpr
+) {
   const nodeExpression = expression ?? node.value?.expression
   if (!nodeExpression) return
 
   switch (nodeExpression.type) {
     case 'Literal': {
-      yield { node: nodeExpression, unconditional }
+      yield { node: nodeExpression, unconditional, parentExpr }
       break
     }
     case 'ObjectExpression': {
@@ -29,42 +35,76 @@ function* extractClassNodes(node, expression, unconditional = true) {
           prop.key?.type === 'Literal' &&
           typeof prop.key.value === 'string'
         ) {
-          yield { node: prop.key, unconditional: false }
+          yield {
+            node: prop.key,
+            unconditional: false,
+            parentExpr: nodeExpression
+          }
         }
       }
       break
     }
     case 'ArrayExpression': {
       for (const element of nodeExpression.elements) {
         if (!element || element.type === 'SpreadElement') continue
-        yield* extractClassNodes(node, element, unconditional)
+        yield* extractClassNodes(node, element, unconditional, nodeExpression)
       }
       break
     }
     case 'ConditionalExpression': {
-      yield* extractClassNodes(node, nodeExpression.consequent, false)
-      yield* extractClassNodes(node, nodeExpression.alternate, false)
+      yield* extractClassNodes(
+        node,
+        nodeExpression.consequent,
+        false,
+        nodeExpression
+      )
+      yield* extractClassNodes(
+        node,
+        nodeExpression.alternate,
+        false,
+        nodeExpression
+      )
       break
     }
     case 'TemplateLiteral': {
       for (const quasi of nodeExpression.quasis) {
-        yield { node: quasi, unconditional }
+        yield { node: quasi, unconditional, parentExpr: nodeExpression }
       }
       for (const expr of nodeExpression.expressions) {
-        yield* extractClassNodes(node, expr, unconditional)
+        yield* extractClassNodes(node, expr, unconditional, nodeExpression)
       }
       break
     }
     case 'BinaryExpression': {
       if (nodeExpression.operator === '+') {
-        yield* extractClassNodes(node, nodeExpression.left, unconditional)
-        yield* extractClassNodes(node, nodeExpression.right, unconditional)
+        yield* extractClassNodes(
+          node,
+          nodeExpression.left,
+          unconditional,
+          nodeExpression
+        )
+        yield* extractClassNodes(
+          node,
+          nodeExpression.right,
+          unconditional,
+          nodeExpression
+        )
       }
       break
     }
     case 'LogicalExpression': {
-      yield* extractClassNodes(node, nodeExpression.left, unconditional)
-      yield* extractClassNodes(node, nodeExpression.right, unconditional)
+      yield* extractClassNodes(
+        node,
+        nodeExpression.left,
+        unconditional,
+        nodeExpression
+      )
+      yield* extractClassNodes(
+        node,
+        nodeExpression.right,
+        false,
+        nodeExpression
+      )
       break
     }
   }
@@ -250,11 +290,15 @@ module.exports = {
         /** @type {Map<string, ASTNode>} */
         const seen = new Map()
 
-        /** @type {Map<string, {node: ASTNode, unconditional: boolean}>} */
+        /** @type {Map<string, {node: ASTNode, unconditional: boolean, parentExpr?: Expression}>} */
         const collected = new Map()
 
         const classNodes = extractClassNodes(node)
-        for (const { node: reportNode, unconditional } of classNodes) {
+        for (const {
+          node: reportNode,
+          unconditional,
+          parentExpr
+        } of classNodes) {
           // report fixable duplicates and collect reported class names
           const reportedClasses = reportDuplicateClasses(reportNode)
           if (reportedClasses) {
@@ -272,14 +316,21 @@ module.exports = {
             if (reported.has(className)) continue
             const existing = collected.get(className)
             if (existing) {
-              // only add duplicate if at least one is unconditional
-              if (existing.unconditional || unconditional) {
+              // only add duplicate if at least one is unconditional, or share the same combining parent
+              const isSameParent =
+                parentExpr &&
+                existing.parentExpr === parentExpr &&
+                (parentExpr.type === 'BinaryExpression' ||
+                  parentExpr.type === 'TemplateLiteral')
+
+              if (existing.unconditional || unconditional || isSameParent) {
                 duplicatesInExpression.add(className)
               }
             } else {
               collected.set(className, {
                 node: reportNode.parent,
-                unconditional
+                unconditional,
+                parentExpr
               })
             }
             // track unconditional duplicates separately for reporting

lib/rules/no-duplicate-class-names.js

@@ -97,8 +97,7 @@ module.exports = {
               node: scriptRef,
               messageId: 'preferUseTemplateRef',
               data: {
-                // @ts-expect-error `scriptRef.callee` is `Identifier`
-                name: scriptRef.callee.name
+                name: /** @type {Identifier} */ (scriptRef.callee).name
               },
               fix(fixer) {
                 return fixer.replaceText(

lib/rules/prefer-use-template-ref.js

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vue",
-  "version": "10.6.1",
+  "version": "10.6.2",
   "description": "Official ESLint plugin for Vue.js",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package.json

@@ -56,6 +56,18 @@ tester.run('no-duplicate-class-names', rule, {
     {
       filename: 'class-object-duplicate-value.vue',
       code: `<div :class="{ 'foo bar': isActive, 'foo': isAnotherActive }"></div>`
+    },
+    {
+      filename: 'class-non-intersecting-conditions.vue',
+      code: `<template><div :class="[isActive1 && { 'foo': isActive2, 'bar': isActive3 }, isActive4 && 'bar']"></div></template>`
+    },
+    {
+      filename: 'class-multiple-logical-non-intersecting.vue',
+      code: `<template><div :class="[isActive1 && 'foo', isActive2 && 'foo']"></div></template>`
+    },
+    {
+      filename: 'class-binary-in-logical-non-intersecting.vue',
+      code: `<template><div :class="[isActive1 && ('foo' + ' bar'), isActive2 && 'foo']"></div></template>`
     }
   ],
   invalid: [
@@ -527,6 +539,36 @@ tester.run('no-duplicate-class-names', rule, {
           endColumn: 63
         }
       ]
+    },
+    {
+      filename: 'duplicate-class-binary-in-logical-expression.vue',
+      code: `<template><div :class="isActive && 'bar' + ' bar'"></div></template>`,
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'bar'.",
+          type: 'BinaryExpression',
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 50
+        }
+      ]
+    },
+    {
+      filename: 'duplicate-class-template-literal-in-logical-expression.vue',
+      code: '<template><div :class="isActive && `foo ${bar} foo`"></div></template>',
+      output: null,
+      errors: [
+        {
+          message: "Duplicate class name 'foo'.",
+          type: 'TemplateLiteral',
+          line: 1,
+          column: 36,
+          endLine: 1,
+          endColumn: 52
+        }
+      ]
     }
   ]
 })