@herb-tools/linter 0.8.6 → 0.8.7

package/src/rules/html-no-duplicate-attributes.ts

@@ -1,48 +1,163 @@
-import { ParserRule } from "../types.js"
-import { AttributeVisitorMixin, StaticAttributeStaticValueParams, StaticAttributeDynamicValueParams } from "./rule-utils.js"
+import { ParserRule, BaseAutofixContext } from "../types.js"
+import { ControlFlowTrackingVisitor, ControlFlowType, getAttributeName } from "./rule-utils.js"
 
 import type { UnboundLintOffense, LintContext, FullRuleConfig } from "../types.js"
-import type { HTMLOpenTagNode, HTMLAttributeNode, ParseResult } from "@herb-tools/core"
+import type { HTMLOpenTagNode, HTMLAttributeNode, ParseResult, Location } from "@herb-tools/core"
 
-class NoDuplicateAttributesVisitor extends AttributeVisitorMixin {
-  private attributeNames = new Map<string, HTMLAttributeNode[]>()
+interface ControlFlowState {
+  previousBranchAttributes: Set<string>
+  previousControlFlowAttributes: Set<string>
+}
+
+interface BranchState {
+  previousBranchAttributes: Set<string>
+}
+
+class NoDuplicateAttributesVisitor extends ControlFlowTrackingVisitor<
+  BaseAutofixContext,
+  ControlFlowState,
+  BranchState
+> {
+  private tagAttributes = new Set<string>()
+  private currentBranchAttributes = new Set<string>()
+  private controlFlowAttributes = new Set<string>()
 
   visitHTMLOpenTagNode(node: HTMLOpenTagNode): void {
-    this.attributeNames.clear()
+    this.tagAttributes = new Set()
+    this.currentBranchAttributes = new Set()
+    this.controlFlowAttributes = new Set()
     super.visitHTMLOpenTagNode(node)
-    this.reportDuplicates()
   }
 
+  visitHTMLAttributeNode(node: HTMLAttributeNode): void {
+    this.checkAttribute(node)
+  }
+
+  protected onEnterControlFlow(_controlFlowType: ControlFlowType, wasAlreadyInControlFlow: boolean): ControlFlowState {
+    const stateToRestore: ControlFlowState = {
+      previousBranchAttributes: this.currentBranchAttributes,
+      previousControlFlowAttributes: this.controlFlowAttributes,
+    }
+
+    this.currentBranchAttributes = new Set()
+
+    if (!wasAlreadyInControlFlow) {
+      this.controlFlowAttributes = new Set()
+    }
+
+    return stateToRestore
+  }
+
+  protected onExitControlFlow(
+    controlFlowType: ControlFlowType,
+    wasAlreadyInControlFlow: boolean,
+    stateToRestore: ControlFlowState,
+  ): void {
+    if (controlFlowType === ControlFlowType.CONDITIONAL && !wasAlreadyInControlFlow) {
+      this.controlFlowAttributes.forEach((attr) => this.tagAttributes.add(attr))
+    }
+
+    this.currentBranchAttributes = stateToRestore.previousBranchAttributes
+    this.controlFlowAttributes = stateToRestore.previousControlFlowAttributes
+  }
+
+  protected onEnterBranch(): BranchState {
+    const stateToRestore: BranchState = {
+      previousBranchAttributes: this.currentBranchAttributes,
+    }
+
+    if (this.isInControlFlow) {
+      this.currentBranchAttributes = new Set()
+    }
+
+    return stateToRestore
+  }
+
+  protected onExitBranch(_stateToRestore: BranchState): void {}
+
+  private checkAttribute(attributeNode: HTMLAttributeNode): void {
+    const identifier = getAttributeName(attributeNode)
+    if (!identifier) return
 
-  protected checkStaticAttributeStaticValue({ attributeName, attributeNode }: StaticAttributeStaticValueParams): void {
-    this.trackAttributeName(attributeName, attributeNode)
+    this.processAttributeDuplicate(identifier, attributeNode)
   }
 
-  protected checkStaticAttributeDynamicValue({ attributeName, attributeNode }: StaticAttributeDynamicValueParams): void {
-    this.trackAttributeName(attributeName, attributeNode)
+  private processAttributeDuplicate(identifier: string, attributeNode: HTMLAttributeNode): void {
+    if (!this.isInControlFlow) {
+      this.handleHTMLAttribute(identifier, attributeNode)
+      return
+    }
+
+    if (this.currentControlFlowType === ControlFlowType.LOOP) {
+      this.handleLoopAttribute(identifier, attributeNode)
+    } else {
+      this.handleConditionalAttribute(identifier, attributeNode)
+    }
+
+    this.currentBranchAttributes.add(identifier)
   }
 
-  private trackAttributeName(attributeName: string, attributeNode: HTMLAttributeNode): void {
-    if (!this.attributeNames.has(attributeName)) {
-      this.attributeNames.set(attributeName, [])
+  private handleHTMLAttribute(identifier: string, attributeNode: HTMLAttributeNode): void {
+    if (this.tagAttributes.has(identifier)) {
+      this.addDuplicateAttributeOffense(identifier, attributeNode.name!.location)
+    }
+
+    this.tagAttributes.add(identifier)
+  }
+
+  private handleLoopAttribute(identifier: string, attributeNode: HTMLAttributeNode): void {
+    if (this.currentBranchAttributes.has(identifier)) {
+      this.addSameLoopIterationOffense(identifier, attributeNode.name!.location)
+      return
+    }
+
+    if (this.tagAttributes.has(identifier)) {
+      this.addDuplicateAttributeOffense(identifier, attributeNode.name!.location)
+      return
     }
 
-    this.attributeNames.get(attributeName)!.push(attributeNode)
+    this.addLoopWillDuplicateOffense(identifier, attributeNode.name!.location)
   }
 
-  private reportDuplicates(): void {
-    for (const [attributeName, attributeNodes] of this.attributeNames) {
-      if (attributeNodes.length > 1) {
-        for (let i = 1; i < attributeNodes.length; i++) {
-          const attributeNode = attributeNodes[i]
+  private handleConditionalAttribute(identifier: string, attributeNode: HTMLAttributeNode): void {
+    if (this.currentBranchAttributes.has(identifier)) {
+      this.addSameBranchOffense(identifier, attributeNode.name!.location)
+      return
+    }
 
-          this.addOffense(
-            `Duplicate attribute \`${attributeName}\` found on tag. Remove the duplicate occurrence.`,
-            attributeNode.name!.location,
-          )
-        }
-      }
+    if (this.tagAttributes.has(identifier)) {
+      this.addDuplicateAttributeOffense(identifier, attributeNode.name!.location)
     }
+
+    this.controlFlowAttributes.add(identifier)
+  }
+
+  private addDuplicateAttributeOffense(identifier: string, location: Location): void {
+    this.addOffense(
+      `Duplicate attribute \`${identifier}\`. Browsers only use the first occurrence and ignore duplicate attributes. Remove the duplicate or merge the values.`,
+      location,
+    )
+  }
+
+  private addSameLoopIterationOffense(identifier: string, location: Location): void {
+    this.addOffense(
+      `Duplicate attribute \`${identifier}\` in same loop iteration. Each iteration will produce an element with duplicate attributes. Remove one or merge the values.`,
+      location,
+    )
+  }
+
+  private addLoopWillDuplicateOffense(identifier: string, location: Location): void {
+    this.addOffense(
+      `Attribute \`${identifier}\` inside loop will appear multiple times on this element. Use a dynamic attribute name like \`${identifier}-<%= index %>\` or move the attribute outside the loop.`,
+      location,
+    )
+  }
+
+  private addSameBranchOffense(identifier: string, location: Location): void {
+    this.addOffense(
+      `Duplicate attribute \`${identifier}\` in same branch. This branch will produce an element with duplicate attributes. Remove one or merge the values.`,
+      location,
+    )
   }
 }