@herb-tools/formatter 0.8.10 → 0.9.0

package/src/attribute-renderer.ts

@@ -0,0 +1,309 @@
+import { IdentityPrinter } from "@herb-tools/printer"
+import { HTMLAttributeNode, HTMLAttributeValueNode, HTMLTextNode, LiteralNode, ERBContentNode } from "@herb-tools/core"
+
+import { getCombinedAttributeName, getCombinedStringFromNodes, isNode, TOKEN_LIST_ATTRIBUTES } from "@herb-tools/core"
+
+import { ASCII_WHITESPACE, FORMATTABLE_ATTRIBUTES } from "./format-helpers.js"
+
+import type { Node, ERBNode } from "@herb-tools/core"
+
+/**
+ * Interface that the delegate must implement to provide
+ * ERB reconstruction capabilities to the AttributeRenderer.
+ */
+export interface AttributeRendererDelegate {
+  reconstructERBNode(node: ERBNode, withFormatting: boolean): string
+}
+
+/**
+ * AttributeRenderer converts HTMLAttributeNode AST nodes into formatted strings.
+ * It handles class attribute wrapping, multiline attribute formatting,
+ * quote normalization, and token list attribute spacing.
+ */
+export class AttributeRenderer {
+  private delegate: AttributeRendererDelegate
+  private maxLineLength: number
+  private indentWidth: number
+
+  public currentAttributeName: string | null = null
+  public indentLevel: number = 0
+
+  constructor(
+    delegate: AttributeRendererDelegate,
+    maxLineLength: number,
+    indentWidth: number,
+  ) {
+    this.delegate = delegate
+    this.maxLineLength = maxLineLength
+    this.indentWidth = indentWidth
+  }
+
+  /**
+   * Check if we're currently processing a token list attribute that needs spacing
+   */
+  get isInTokenListAttribute(): boolean {
+    return this.currentAttributeName !== null && TOKEN_LIST_ATTRIBUTES.has(this.currentAttributeName)
+  }
+
+  /**
+   * Render attributes as a space-separated string
+   */
+  renderAttributesString(attributes: HTMLAttributeNode[], tagName: string): string {
+    if (attributes.length === 0) return ""
+
+    return ` ${attributes.map(attribute => this.renderAttribute(attribute, tagName)).join(" ")}`
+  }
+
+  /**
+   * Determine if a tag should be rendered inline based on attribute count and other factors
+   */
+  shouldRenderInline(
+    totalAttributeCount: number,
+    inlineLength: number,
+    indentLength: number,
+    maxLineLength: number = this.maxLineLength,
+    hasComplexERB: boolean = false,
+    hasMultilineAttributes: boolean = false,
+    attributes: HTMLAttributeNode[] = []
+  ): boolean {
+    if (hasComplexERB || hasMultilineAttributes) return false
+
+    if (totalAttributeCount === 0) {
+      return inlineLength + indentLength <= maxLineLength
+    }
+
+    if (totalAttributeCount === 1 && attributes.length === 1) {
+      const attribute = attributes[0]
+      const attributeName = this.getAttributeName(attribute)
+
+      if (attributeName === 'class') {
+        const attributeValue = this.getAttributeValue(attribute)
+        const wouldBeMultiline = this.wouldClassAttributeBeMultiline(attributeValue, indentLength)
+
+        if (!wouldBeMultiline) {
+          return true
+        } else {
+          return false
+        }
+      }
+    }
+
+    if (totalAttributeCount > 3 || inlineLength + indentLength > maxLineLength) {
+      return false
+    }
+
+    return true
+  }
+
+  wouldClassAttributeBeMultiline(content: string, indentLength: number): boolean {
+    const normalizedContent = content.replace(ASCII_WHITESPACE, ' ').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 true
+      }
+    }
+
+    const attributeLine = `class="${normalizedContent}"`
+    const currentIndent = indentLength
+
+    if (currentIndent + attributeLine.length > this.maxLineLength && normalizedContent.length > 60) {
+      if (/<%[^%]*%>/.test(normalizedContent)) {
+        return false
+      }
+
+      const classes = normalizedContent.split(' ')
+      const lines = this.breakTokensIntoLines(classes, currentIndent)
+      return lines.length > 1
+    }
+
+    return false
+  }
+
+  // TOOD: extract to core or reuse function from core
+  getAttributeName(attribute: HTMLAttributeNode): string {
+    return attribute.name ? getCombinedAttributeName(attribute.name) : ""
+  }
+
+  // TOOD: extract to core or reuse function from core
+  getAttributeValue(attribute: HTMLAttributeNode): string {
+    if (isNode(attribute.value, HTMLAttributeValueNode)) {
+      return attribute.value.children.map(child => isNode(child, HTMLTextNode) ? child.content : IdentityPrinter.print(child)).join('')
+    }
+
+    return ''
+  }
+
+  hasMultilineAttributes(attributes: HTMLAttributeNode[]): boolean {
+    return attributes.some(attribute => {
+      if (isNode(attribute.value, HTMLAttributeValueNode)) {
+        const content = getCombinedStringFromNodes(attribute.value.children)
+
+        if (/\r?\n/.test(content)) {
+          const name = attribute.name ? getCombinedAttributeName(attribute.name) : ""
+
+          if (name === "class") {
+            const normalizedContent = content.replace(ASCII_WHITESPACE, ' ').trim()
+
+            return normalizedContent.length > 80
+          }
+
+          const lines = content.split(/\r?\n/)
+
+          if (lines.length > 1) {
+            return lines.slice(1).some(line => /^[ \t\n\r]+/.test(line))
+          }
+        }
+      }
+
+      return false
+    })
+  }
+
+  formatClassAttribute(content: string, name: string, equals: string, open_quote: string, close_quote: string): string {
+    const normalizedContent = content.replace(ASCII_WHITESPACE, ' ').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) {
+      if (/<%[^%]*%>/.test(normalizedContent)) {
+        return open_quote + normalizedContent + close_quote
+      }
+
+      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
+  }
+
+  isFormattableAttribute(attributeName: string, tagName: string): boolean {
+    const globalFormattable = FORMATTABLE_ATTRIBUTES['*'] || []
+    const tagSpecificFormattable = FORMATTABLE_ATTRIBUTES[tagName.toLowerCase()] || []
+
+    return globalFormattable.includes(attributeName) || tagSpecificFormattable.includes(attributeName)
+  }
+
+  formatMultilineAttribute(content: string, name: string, open_quote: string, close_quote: string): string {
+    if (name === 'srcset' || name === 'sizes') {
+      const normalizedContent = content.replace(ASCII_WHITESPACE, ' ').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
+  }
+
+  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
+  }
+
+  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
+      }
+    }
+
+    if (currentLine) lines.push(currentLine)
+
+    return lines
+  }
+
+  renderAttribute(attribute: HTMLAttributeNode, tagName: string): string {
+    const name = attribute.name ? getCombinedAttributeName(attribute.name) : ""
+    const equals = attribute.equals?.value ?? ""
+
+    this.currentAttributeName = name
+
+    let value = ""
+
+    if (isNode(attribute.value, HTMLAttributeValueNode)) {
+      const attributeValue = attribute.value
+
+      let open_quote = attributeValue.open_quote?.value ?? ""
+      let close_quote = attributeValue.close_quote?.value ?? ""
+      let htmlTextContent = ""
+
+      const content = attributeValue.children.map((child: Node) => {
+        if (isNode(child, HTMLTextNode) || isNode(child, LiteralNode)) {
+          htmlTextContent += child.content
+
+          return child.content
+        } else if (isNode(child, ERBContentNode)) {
+          return this.delegate.reconstructERBNode(child, true)
+        } else {
+          const printed = IdentityPrinter.print(child)
+
+          if (this.isInTokenListAttribute) {
+            return printed.replace(/%>([^<\s])/g, '%> $1').replace(/([^>\s])<%/g, '$1 <%')
+          }
+
+          return printed
+        }
+      }).join("")
+
+      if (open_quote === "" && close_quote === "") {
+        open_quote = '"'
+        close_quote = '"'
+      } else if (open_quote === "'" && close_quote === "'" && !htmlTextContent.includes('"')) {
+        open_quote = '"'
+        close_quote = '"'
+      }
+
+      if (this.isFormattableAttribute(name, tagName)) {
+        if (name === 'class') {
+          value = this.formatClassAttribute(content, name, equals, open_quote, close_quote)
+        } else {
+          value = this.formatMultilineAttribute(content, name, open_quote, close_quote)
+        }
+      } else {
+        value = open_quote + content + close_quote
+      }
+    }
+
+    this.currentAttributeName = null
+
+    return name + equals + value
+  }
+}

package/src/cli.ts

@@ -1,5 +1,5 @@
 import dedent from "dedent"
-import { readFileSync, writeFileSync, statSync } from "fs"
+import { readFileSync, writeFileSync, statSync, existsSync } from "fs"
 import { glob } from "tinyglobby"
 import { resolve, relative } from "path"
 
@@ -18,6 +18,26 @@ const pluralize = (count: number, singular: string, plural: string = singular +
 }
 
 export class CLI {
+  protected projectPath: string = process.cwd()
+
+  protected determineProjectPath(patterns: string[]): void {
+    const pattern = patterns[0]
+
+    if (pattern && pattern !== '-') {
+      const resolvedPattern = resolve(pattern)
+
+      if (existsSync(resolvedPattern)) {
+        this.projectPath = Config.findProjectRootSync(resolvedPattern)
+      } else {
+        const baseDir = pattern.split(/[*?{[\]]/)[0].replace(/\/$/, '')
+
+        if (baseDir && existsSync(baseDir)) {
+          this.projectPath = Config.findProjectRootSync(resolve(baseDir))
+        }
+      }
+    }
+  }
+
   private usage = dedent`
     Usage: herb-format [files|directories|glob-patterns...] [options]
 
@@ -133,14 +153,15 @@ export class CLI {
         process.exit(1)
       }
 
+      this.determineProjectPath(positionals)
+
       const file = positionals[0]
-      const startPath = file || process.cwd()
 
       if (isInitMode) {
-        const configPath = configFile || startPath
+        const configPath = configFile || this.projectPath
 
         if (Config.exists(configPath)) {
-          const fullPath = configFile || Config.configPathFromProjectPath(startPath)
+          const fullPath = configFile || Config.configPathFromProjectPath(this.projectPath)
           console.log(`\n✗ Configuration file already exists at ${fullPath}`)
           console.log(`  Use --config-file to specify a different location.\n`)
           process.exit(1)
@@ -154,8 +175,8 @@ export class CLI {
           }
         })
 
-        const projectPath = configFile ? resolve(configFile) : startPath
-        const projectDir = statSync(projectPath).isDirectory() ? projectPath : resolve(projectPath, '..')
+        const initProjectPath = configFile ? resolve(configFile) : this.projectPath
+        const projectDir = statSync(initProjectPath).isDirectory() ? initProjectPath : resolve(initProjectPath, '..')
         const extensionAdded = addHerbExtensionRecommendation(projectDir)
 
         console.log(`\n✓ Configuration initialized at ${config.path}`)
@@ -170,7 +191,7 @@ export class CLI {
         process.exit(0)
       }
 
-      const config = await Config.loadForCLI(configFile || startPath, version)
+      const config = await Config.loadForCLI(configFile || this.projectPath, version)
       const hasConfigFile = Config.exists(config.projectPath)
       const formatterConfig = config.formatter || {}
 
@@ -198,8 +219,8 @@ export class CLI {
         formatterConfig.maxLineLength = maxLineLength
       }
 
-      let preRewriters: ASTRewriter[] = []
-      let postRewriters: StringRewriter[] = []
+      const preRewriters: ASTRewriter[] = []
+      const postRewriters: StringRewriter[] = []
       const rewriterNames = { pre: formatterConfig.rewriter?.pre || [], post: formatterConfig.rewriter?.post || [] }
 
       if (formatterConfig.rewriter && (rewriterNames.pre.length > 0 || rewriterNames.post.length > 0)) {
@@ -398,7 +419,7 @@ export class CLI {
         }
 
         let formattedCount = 0
-        let unformattedFiles: string[] = []
+        const unformattedFiles: string[] = []
 
         for (const filePath of files) {
           const displayPath = relative(process.cwd(), filePath)
@@ -446,7 +467,7 @@ export class CLI {
         }
 
         let formattedCount = 0
-        let unformattedFiles: string[] = []
+        const unformattedFiles: string[] = []
 
         for (const filePath of files) {
           const displayPath = relative(process.cwd(), filePath)

package/src/comment-helpers.ts

@@ -0,0 +1,129 @@
+import dedent from "dedent"
+
+import { isNode, isERBNode } from "@herb-tools/core"
+import { IdentityPrinter } from "@herb-tools/printer"
+import { Node, HTMLTextNode, LiteralNode } from "@herb-tools/core"
+
+/**
+ * Result of formatting an ERB comment.
+ * - `single-line`: the caller emits the text on a single line (using push or pushWithIndent)
+ * - `multi-line`: the caller emits header, indented content lines, and footer separately
+ */
+export type ERBCommentResult =
+  | { type: 'single-line'; text: string }
+  | { type: 'multi-line'; header: string; contentLines: string[]; footer: string }
+
+/**
+ * Extract the raw inner text from HTML comment children.
+ * Joins text/literal nodes by content and ERB nodes via IdentityPrinter.
+ */
+export function extractHTMLCommentContent(children: Node[]): string {
+  return children.map(child => {
+    if (isNode(child, HTMLTextNode) || isNode(child, LiteralNode)) {
+      return child.content
+    } else if (isERBNode(child)) {
+      return IdentityPrinter.print(child)
+    } else {
+      return ""
+    }
+  }).join("")
+}
+
+/**
+ * Format the inner content of an HTML comment.
+ *
+ * Handles three cases:
+ * 1. IE conditional comments (`[if ...` / `<![endif]`) — returned as-is
+ * 2. Multiline comments — re-indented with relative indent preservation
+ * 3. Single-line comments — wrapped with spaces: ` content `
+ *
+ * Returns null for IE conditional comments to signal the caller
+ * should emit the raw content without reformatting.
+ *
+ * @param rawInner - The joined children content string (may be empty)
+ * @param indentWidth - Number of spaces per indent level
+ * @returns The formatted inner string, or null if rawInner is empty-ish
+ */
+export function formatHTMLCommentInner(rawInner: string, indentWidth: number): string {
+  if (!rawInner && rawInner !== "") return ""
+
+  const trimmedInner = rawInner.trim()
+
+  if (trimmedInner.startsWith('[if ') && trimmedInner.endsWith('<![endif]')) {
+    return rawInner
+  }
+
+  const hasNewlines = rawInner.includes('\n')
+
+  if (hasNewlines) {
+    const lines = rawInner.split('\n')
+    const childIndent = " ".repeat(indentWidth)
+    const firstLineHasContent = lines[0].trim() !== ''
+
+    if (firstLineHasContent && lines.length > 1) {
+      const contentLines = lines.map(line => line.trim()).filter(line => line !== '')
+      return '\n' + contentLines.map(line => childIndent + line).join('\n') + '\n'
+    } else {
+      const contentLines = lines.filter((line, index) => {
+        return line.trim() !== '' && !(index === 0 || index === lines.length - 1)
+      })
+
+      const minIndent = contentLines.length > 0 ? Math.min(...contentLines.map(line => line.length - line.trimStart().length)) : 0
+
+      const processedLines = lines.map((line, index) => {
+        const trimmedLine = line.trim()
+
+        if ((index === 0 || index === lines.length - 1) && trimmedLine === '') {
+          return line
+        }
+
+        if (trimmedLine !== '') {
+          const currentIndent = line.length - line.trimStart().length
+          const relativeIndent = Math.max(0, currentIndent - minIndent)
+
+          return childIndent + " ".repeat(relativeIndent) + trimmedLine
+        }
+
+        return line
+      })
+
+      return processedLines.join('\n')
+    }
+  } else {
+    return ` ${rawInner.trim()} `
+  }
+}
+
+/**
+ * Format an ERB comment into either a single-line or multi-line result.
+ *
+ * @param open - The opening tag (e.g. "<%#")
+ * @param content - The raw content string between open/close tags
+ * @param close - The closing tag (e.g. "%>")
+ * @returns A discriminated union describing how to render the comment
+ */
+export function formatERBCommentLines(open: string, content: string, close: string): ERBCommentResult {
+  const contentLines = content.split("\n")
+  const contentTrimmedLines = content.trim().split("\n")
+
+  if (contentLines.length === 1 && contentTrimmedLines.length === 1) {
+    const startsWithSpace = content[0] === " "
+    const before = startsWithSpace ? "" : " "
+
+    return { type: 'single-line', text: open + before + content.trimEnd() + ' ' + close }
+  }
+
+  if (contentTrimmedLines.length === 1) {
+    return { type: 'single-line', text: open + ' ' + content.trim() + ' ' + close }
+  }
+
+  const firstLineEmpty = contentLines[0].trim() === ""
+  const dedentedContent = dedent(firstLineEmpty ? content : content.trimStart())
+
+  return {
+    type: 'multi-line',
+    header: open,
+    contentLines: dedentedContent.split("\n"),
+    footer: close
+  }
+}