enhance tracking of component usage - focusing on repeated if directives

Author: felipemelendez

lib/rules/v-if-else-key.js

@@ -220,7 +220,7 @@ module.exports = {
           if (node.parent && node.parent.type === 'VElement') {
             let conditionalFamily = conditionalFamilies.get(node.parent)
 
-            if (conditionType === 'if' && !conditionalFamily) {
+            if (conditionType === 'if') {
               conditionalFamily = createConditionalFamily(node)
               conditionalFamilies.set(node.parent, conditionalFamily)
             }
@@ -253,44 +253,55 @@ module.exports = {
         const currentScope = componentUsageStack[componentUsageStack.length - 1]
         const usageInfo = currentScope.get(componentName) || {
           count: 0,
-          firstNode: null
+          firstNode: null,
+          hasIf: false
         }
 
-        if (hasConditionalDirective(node)) {
-          // Store the first node if this is the first occurrence
-          if (usageInfo.count === 0) {
-            usageInfo.firstNode = node
-          }
-
-          if (usageInfo.count > 0) {
-            const uniqueKey = `${casing.kebabCase(componentName)}-${
-              usageInfo.count + 1
-            }`
-            checkForKey(
-              node,
-              context,
-              componentName,
-              uniqueKey,
-              conditionalFamilies
-            )
+        const isIfDirective = utils.getDirective(node, 'if') !== null
+        const isConditional =
+          isIfDirective ||
+          utils.getDirective(node, 'else-if') !== null ||
+          utils.getDirective(node, 'else') !== null
 
-            // If this is the second occurrence, also apply a fix to the first occurrence
-            if (usageInfo.count === 1) {
-              const uniqueKeyForFirstInstance = `${casing.kebabCase(
-                componentName
-              )}-1`
+        if (isConditional) {
+          if (isIfDirective && usageInfo.hasIf) {
+            // Reset if family already has an 'if' directive
+            usageInfo.count = 1
+            usageInfo.firstNode = node
+          } else {
+            usageInfo.hasIf = true
+            if (usageInfo.count === 0) {
+              usageInfo.firstNode = node
+            } else if (usageInfo.count > 0 && usageInfo.firstNode !== node) {
+              const uniqueKey = `${casing.kebabCase(componentName)}-${
+                usageInfo.count + 1
+              }`
               checkForKey(
-                usageInfo.firstNode,
+                node,
                 context,
                 componentName,
-                uniqueKeyForFirstInstance,
+                uniqueKey,
                 conditionalFamilies
               )
+
+              if (usageInfo.count === 1) {
+                const uniqueKeyForFirstInstance = `${casing.kebabCase(
+                  componentName
+                )}-1`
+                checkForKey(
+                  usageInfo.firstNode,
+                  context,
+                  componentName,
+                  uniqueKeyForFirstInstance,
+                  conditionalFamilies
+                )
+              }
             }
+            usageInfo.count++
           }
-          usageInfo.count += 1
           currentScope.set(componentName, usageInfo)
         }
+
         componentUsageStack.push(new Map())
         pushedNodes.add(node)
       },