@herb-tools/formatter 0.4.3 → 0.5.0

package/dist/types/printer.d.ts

@@ -13,6 +13,7 @@ export declare class Printer extends Visitor {
     private indentLevel;
     private inlineMode;
     private isInComplexNesting;
+    private currentTagName;
     private static readonly INLINE_ELEMENTS;
     constructor(source: string, options: Required<FormatOptions>);
     print(object: Node | Token, indentLevel?: number): string;
@@ -48,6 +49,12 @@ export declare class Printer extends Visitor {
      * Determine if a tag should be rendered inline based on attribute count and other factors
      */
     private shouldRenderInline;
+    private hasMultilineAttributes;
+    private formatClassAttribute;
+    private isFormattableAttribute;
+    private formatMultilineAttribute;
+    private formatMultilineAttributeValue;
+    private breakTokensIntoLines;
     /**
      * Render multiline attributes for a tag
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herb-tools/formatter",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "Auto-formatter for HTML+ERB templates with intelligent indentation, line wrapping, and ERB-aware pretty-printing.",
   "license": "MIT",
   "homepage": "https://herb-tools.dev",
@@ -35,7 +35,7 @@
     }
   },
   "dependencies": {
-    "@herb-tools/core": "0.4.3",
+    "@herb-tools/core": "0.5.0",
     "glob": "^11.0.3"
   },
   "files": [

package/src/cli.ts

@@ -27,11 +27,11 @@ export class CLI {
 
     Examples:
       herb-format                            # Format all **/*.html.erb files in current directory
-      herb-format --check                    # Check if all **/*.html.erb files are formatted
+      herb-format templates/                 # Format and **/*.html.erb within the given directory
       herb-format templates/index.html.erb   # Format and write single file
+      herb-format --check                    # Check if all **/*.html.erb files are formatted
       herb-format --check templates/         # Check if all **/*.html.erb files in templates/ are formatted
       cat template.html.erb | herb-format    # Format from stdin to stdout
-      herb-format - < template.html.erb      # Format from stdin to stdout
   `
 
   async run() {

package/src/printer.ts

@@ -57,6 +57,12 @@ type ERBNode =
 
 import type { FormatOptions } from "./options.js"
 
+// TODO: we can probably expand this list with more tags/attributes
+const FORMATTABLE_ATTRIBUTES: Record<string, string[]> = {
+  '*': ['class'],
+  'img': ['srcset', 'sizes']
+}
+
 /**
  * Printer traverses the Herb AST using the Visitor pattern
  * and emits a formatted string with proper indentation, line breaks, and attribute wrapping.
@@ -69,6 +75,7 @@ export class Printer extends Visitor {
   private indentLevel: number = 0
   private inlineMode: boolean = false
   private isInComplexNesting: boolean = false
+  private currentTagName: string = ""
 
   private static readonly INLINE_ELEMENTS = new Set([
     'a', 'abbr', 'acronym', 'b', 'bdo', 'big', 'br', 'cite', 'code',
@@ -196,22 +203,142 @@ export class Printer extends Visitor {
     indentLength: number,
     maxLineLength: number = this.maxLineLength,
     hasComplexERB: boolean = false,
-    nestingDepth: number = 0,
-    inlineNodesLength: number = 0
+    _nestingDepth: number = 0,
+    _inlineNodesLength: number = 0,
+    hasMultilineAttributes: boolean = false
   ): boolean {
-    if (hasComplexERB) return false
+    if (hasComplexERB || hasMultilineAttributes) return false
 
-    // Special case: no attributes at all, always inline if it fits
     if (totalAttributeCount === 0) {
       return inlineLength + indentLength <= maxLineLength
     }
 
-    const basicInlineCondition = totalAttributeCount <= 3 &&
-                                 inlineLength + indentLength <= maxLineLength
+    if (totalAttributeCount > 3 || inlineLength + indentLength > maxLineLength) {
+      return false
+    }
+
+    return true
+  }
+
+  private hasMultilineAttributes(attributes: HTMLAttributeNode[]): boolean {
+    return attributes.some(attribute => {
+      if (attribute.value && (attribute.value instanceof HTMLAttributeValueNode || (attribute.value as any)?.type === 'AST_HTML_ATTRIBUTE_VALUE_NODE')) {
+        const attributeValue = attribute.value as HTMLAttributeValueNode
+
+        const content = attributeValue.children.map((child: Node) => {
+          if (child instanceof HTMLTextNode || (child as any).type === 'AST_HTML_TEXT_NODE' || child instanceof LiteralNode || (child as any).type === 'AST_LITERAL_NODE') {
+            return (child as HTMLTextNode | LiteralNode).content
+          } else if (child instanceof ERBContentNode || (child as any).type === 'AST_ERB_CONTENT_NODE') {
+            const erbAttribute = child as ERBContentNode
+
+            return erbAttribute.tag_opening!.value + erbAttribute.content!.value + erbAttribute.tag_closing!.value
+          }
+
+          return ""
+        }).join("")
+
+        if (/\r?\n/.test(content)) {
+          const name = (attribute.name as HTMLAttributeNameNode)!.name!.value ?? ""
+
+          if (name === 'class') {
+            const normalizedContent = content.replace(/\s+/g, ' ').trim()
+
+            return normalizedContent.length > 80
+          }
+
+          const lines = content.split(/\r?\n/)
+
+          if (lines.length > 1) {
+            return lines.slice(1).some(line => /^\s+/.test(line))
+          }
+        }
+      }
+
+      return false
+    })
+  }
+
+  private formatClassAttribute(content: string, name: string, equals: string, open_quote: string, close_quote: string): string {
+    const normalizedContent = content.replace(/\s+/g, ' ').trim()
+    const hasActualNewlines = /\r?\n/.test(content)
+
+    if (hasActualNewlines && normalizedContent.length > 80) {
+      const lines = content.split(/\r?\n/).map(line => line.trim()).filter(line => line)
+
+      if (lines.length > 1) {
+        return open_quote + this.formatMultilineAttributeValue(lines) + close_quote
+      }
+    }
+
+    const currentIndent = this.indentLevel * this.indentWidth
+    const attributeLine = `${name}${equals}${open_quote}${normalizedContent}${close_quote}`
+
+    if (currentIndent + attributeLine.length > this.maxLineLength && normalizedContent.length > 60) {
+      const classes = normalizedContent.split(' ')
+      const lines = this.breakTokensIntoLines(classes, currentIndent)
+
+      if (lines.length > 1) {
+        return open_quote + this.formatMultilineAttributeValue(lines) + close_quote
+      }
+    }
+
+    return open_quote + normalizedContent + close_quote
+  }
+
+  private isFormattableAttribute(attributeName: string, tagName: string): boolean {
+    const globalFormattable = FORMATTABLE_ATTRIBUTES['*'] || []
+    const tagSpecificFormattable = FORMATTABLE_ATTRIBUTES[tagName.toLowerCase()] || []
+
+    return globalFormattable.includes(attributeName) || tagSpecificFormattable.includes(attributeName)
+  }
+
+  private formatMultilineAttribute(content: string, name: string, equals: string, open_quote: string, close_quote: string): string {
+    if (name === 'srcset' || name === 'sizes') {
+      const normalizedContent = content.replace(/\s+/g, ' ').trim()
+
+      return open_quote + normalizedContent + close_quote
+    }
+
+    const lines = content.split('\n')
+
+    if (lines.length <= 1) {
+      return open_quote + content + close_quote
+    }
+
+    const formattedContent = this.formatMultilineAttributeValue(lines)
+
+    return open_quote + formattedContent + close_quote
+  }
+
+  private formatMultilineAttributeValue(lines: string[]): string {
+    const indent = " ".repeat((this.indentLevel + 1) * this.indentWidth)
+    const closeIndent = " ".repeat(this.indentLevel * this.indentWidth)
+
+    return "\n" + lines.map(line => indent + line).join("\n") + "\n" + closeIndent
+  }
+
+  private breakTokensIntoLines(tokens: string[], currentIndent: number, separator: string = ' '): string[] {
+    const lines: string[] = []
+    let currentLine = ''
+
+    for (const token of tokens) {
+      const testLine = currentLine ? currentLine + separator + token : token
+
+      if (testLine.length > (this.maxLineLength - currentIndent - 6)) {
+        if (currentLine) {
+          lines.push(currentLine)
+          currentLine = token
+        } else {
+          lines.push(token)
+        }
+      } else {
+        currentLine = testLine
+      }
+    }
 
-    const erbInlineCondition = inlineNodesLength > 0 && totalAttributeCount <= 3
+    if (currentLine) lines.push(currentLine)
 
-    return basicInlineCondition || erbInlineCondition
+    return lines
   }
 
   /**
@@ -219,8 +346,8 @@ export class Printer extends Visitor {
    */
   private renderMultilineAttributes(
     tagName: string,
-    attributes: HTMLAttributeNode[],
-    inlineNodes: Node[] = [],
+    _attributes: HTMLAttributeNode[],
+    _inlineNodes: Node[] = [],
     allChildren: Node[] = [],
     isSelfClosing: boolean = false,
     isVoid: boolean = false,
@@ -230,7 +357,6 @@ export class Printer extends Visitor {
     this.push(indent + `<${tagName}`)
 
     this.withIndent(() => {
-      // Render children in order, handling both attributes and ERB nodes
       allChildren.forEach(child => {
         if (child instanceof HTMLAttributeNode || (child as any).type === 'AST_HTML_ATTRIBUTE_NODE') {
           this.push(this.indent() + this.renderAttribute(child as HTMLAttributeNode))
@@ -310,6 +436,7 @@ export class Printer extends Visitor {
     const tagName = open.tag_name?.value ?? ""
     const indent = this.indent()
 
+    this.currentTagName = tagName
 
     const attributes = this.extractAttributes(open.children)
     const inlineNodes = this.extractInlineNodes(open.children)
@@ -498,11 +625,10 @@ export class Printer extends Visitor {
       this.maxLineLength,
       hasComplexERB,
       nestingDepth,
-      inlineNodes.length
+      inlineNodes.length,
+      this.hasMultilineAttributes(attributes)
     )
 
-
-
     if (shouldKeepInline) {
       if (children.length === 0) {
         if (isSelfClosing) {
@@ -632,17 +758,32 @@ export class Printer extends Visitor {
       }
 
       if (isInlineElement && children.length === 0) {
-        let result = `<${tagName}`
-        result += this.renderAttributesString(attributes)
-        if (isSelfClosing) {
-          result += " />"
-        } else if (node.is_void) {
-          result += ">"
-        } else {
-          result += `></${tagName}>`
+        const inline = this.renderInlineOpen(tagName, attributes, isSelfClosing, inlineNodes, open.children)
+        const totalAttributeCount = this.getTotalAttributeCount(attributes, inlineNodes)
+        const shouldKeepInline = this.shouldRenderInline(
+          totalAttributeCount,
+          inline.length,
+          indent.length,
+          this.maxLineLength,
+          false,
+          0,
+          inlineNodes.length,
+          this.hasMultilineAttributes(attributes)
+        )
+
+        if (shouldKeepInline) {
+          let result = `<${tagName}`
+          result += this.renderAttributesString(attributes)
+          if (isSelfClosing) {
+            result += " />"
+          } else if (node.is_void) {
+            result += ">"
+          } else {
+            result += `></${tagName}>`
+          }
+          this.push(indent + result)
+          return
         }
-        this.push(indent + result)
-        return
       }
 
       this.renderMultilineAttributes(tagName, attributes, inlineNodes, open.children, isSelfClosing, node.is_void, children.length > 0)
@@ -683,7 +824,8 @@ export class Printer extends Visitor {
       this.maxLineLength,
       false,
       0,
-      inlineNodes.length
+      inlineNodes.length,
+      this.hasMultilineAttributes(attributes)
     )
 
     if (shouldKeepInline) {
@@ -711,7 +853,8 @@ export class Printer extends Visitor {
       this.maxLineLength,
       false,
       0,
-      inlineNodes.length
+      inlineNodes.length,
+      this.hasMultilineAttributes(attributes)
     )
 
     if (shouldKeepInline) {
@@ -805,20 +948,25 @@ export class Printer extends Visitor {
     const indent = this.indent()
     const open = node.comment_start?.value ?? ""
     const close = node.comment_end?.value ?? ""
+
     let inner: string
 
-    if (node.comment_start && node.comment_end) {
-      // TODO: use .value
-      const [_, startIndex] = node.comment_start.range.toArray()
-      const [endIndex] = node.comment_end.range.toArray()
-      const rawInner = this.source.slice(startIndex, endIndex)
-      inner = ` ${rawInner.trim()} `
-    } else {
+    if (node.children && node.children.length > 0) {
       inner = node.children.map(child => {
-        const prevLines = this.lines.length
-        this.visit(child)
-        return this.lines.slice(prevLines).join("")
+        if (child instanceof HTMLTextNode || (child as any).type === 'AST_HTML_TEXT_NODE') {
+          return (child as HTMLTextNode).content
+        } else if (child instanceof LiteralNode || (child as any).type === 'AST_LITERAL_NODE') {
+          return (child as LiteralNode).content
+        } else {
+          const prevLines = this.lines.length
+          this.visit(child)
+          return this.lines.slice(prevLines).join("")
+        }
       }).join("")
+
+      inner = ` ${inner.trim()} `
+    } else {
+      inner = ""
     }
 
     this.push(indent + open + inner + close)
@@ -830,26 +978,28 @@ export class Printer extends Visitor {
     const close = node.tag_closing?.value ?? ""
     let inner: string
 
-    if (node.tag_opening && node.tag_closing) {
-      const [, openingEnd] = node.tag_opening.range.toArray()
-      const [closingStart] = node.tag_closing.range.toArray()
-      const rawInner = this.source.slice(openingEnd, closingStart)
+    if (node.content && node.content.value) {
+      const rawInner = node.content.value
       const lines = rawInner.split("\n")
+
       if (lines.length > 2) {
         const childIndent = indent + " ".repeat(this.indentWidth)
         const innerLines = lines.slice(1, -1).map(line => childIndent + line.trim())
+
         inner = "\n" + innerLines.join("\n") + "\n"
       } else {
         inner = ` ${rawInner.trim()} `
       }
+    } else if ((node as any).children) {
+      inner = (node as any).children.map((child: any) => {
+        const prevLines = this.lines.length
+
+        this.visit(child)
+
+        return this.lines.slice(prevLines).join("")
+      }).join("")
     } else {
-      inner = (node as any).children
-        .map((child: any) => {
-          const prevLines = this.lines.length
-          this.visit(child)
-          return this.lines.slice(prevLines).join("")
-        })
-        .join("")
+      inner = ""
     }
 
     this.push(indent + open + inner + close)
@@ -858,22 +1008,30 @@ export class Printer extends Visitor {
   visitHTMLDoctypeNode(node: HTMLDoctypeNode): void {
     const indent = this.indent()
     const open = node.tag_opening?.value ?? ""
-    let innerDoctype: string
 
-    if (node.tag_opening && node.tag_closing) {
-      // TODO: use .value
-      const [, openingEnd] = node.tag_opening.range.toArray()
-      const [closingStart] = node.tag_closing.range.toArray()
-      innerDoctype = this.source.slice(openingEnd, closingStart)
-    } else {
-      innerDoctype = node.children
-        .map(child =>
-          child instanceof HTMLTextNode ? child.content : (() => { const prevLines = this.lines.length; this.visit(child); return this.lines.slice(prevLines).join("") })(),
-        )
-        .join("")
-    }
+    let innerDoctype = node.children.map(child => {
+      if (child instanceof HTMLTextNode || (child as any).type === 'AST_HTML_TEXT_NODE') {
+        return (child as HTMLTextNode).content
+      } else if (child instanceof LiteralNode || (child as any).type === 'AST_LITERAL_NODE') {
+        return (child as LiteralNode).content
+      } else if (child instanceof ERBContentNode || (child as any).type === 'AST_ERB_CONTENT_NODE') {
+        const erbNode = child as ERBContentNode
+        const erbOpen = erbNode.tag_opening?.value ?? ""
+        const erbContent = erbNode.content?.value ?? ""
+        const erbClose = erbNode.tag_closing?.value ?? ""
+
+        return erbOpen + (erbContent ? ` ${erbContent.trim()} ` : "") + erbClose
+      } else {
+        const prevLines = this.lines.length
+
+        this.visit(child)
+
+        return this.lines.slice(prevLines).join("")
+      }
+    }).join("")
 
     const close = node.tag_closing?.value ?? ""
+
     this.push(indent + open + innerDoctype + close)
   }
 
@@ -1175,6 +1333,8 @@ export class Printer extends Visitor {
           currentLineContent += erbContent
 
           if ((indent.length + currentLineContent.length) > Math.max(this.maxLineLength, 120)) {
+            this.lines = oldLines
+            this.inlineMode = oldInlineMode
             this.visitTextFlowChildrenMultiline(children)
 
             return
@@ -1359,7 +1519,15 @@ export class Printer extends Visitor {
         close_quote = '"'
       }
 
-      value = open_quote + content + close_quote
+      if (this.isFormattableAttribute(name, this.currentTagName)) {
+        if (name === 'class') {
+          value = this.formatClassAttribute(content, name, equals, open_quote, close_quote)
+        } else {
+          value = this.formatMultilineAttribute(content, name, equals, open_quote, close_quote)
+        }
+      } else {
+        value = open_quote + content + close_quote
+      }
     }
 
     return name + equals + value
@@ -1368,7 +1536,7 @@ export class Printer extends Visitor {
   /**
    * Try to render a complete element inline including opening tag, children, and closing tag
    */
-  private tryRenderInlineFull(node: HTMLElementNode, tagName: string, attributes: HTMLAttributeNode[], children: Node[]): string | null {
+  private tryRenderInlineFull(_node: HTMLElementNode, tagName: string, attributes: HTMLAttributeNode[], children: Node[]): string | null {
     let result = `<${tagName}`
 
     result += this.renderAttributesString(attributes)