@herb-tools/formatter 0.4.0 → 0.4.2

package/src/printer.ts

@@ -67,6 +67,8 @@ export class Printer extends Visitor {
   private source: string
   private lines: string[] = []
   private indentLevel: number = 0
+  private inlineMode: boolean = false
+  private isInComplexNesting: boolean = false
 
   constructor(source: string, options: Required<FormatOptions>) {
     super()
@@ -84,6 +86,7 @@ export class Printer extends Visitor {
 
     this.lines = []
     this.indentLevel = indentLevel
+    this.isInComplexNesting = false // Reset for each top-level element
 
     if (typeof (node as any).accept === 'function') {
       node.accept(this)
@@ -143,6 +146,12 @@ export class Printer extends Visitor {
     const attributes = open.children.filter((child): child is HTMLAttributeNode =>
       child instanceof HTMLAttributeNode || (child as any).type === 'AST_HTML_ATTRIBUTE_NODE'
     )
+
+    const inlineNodes = open.children.filter(child =>
+      !(child instanceof HTMLAttributeNode || (child as any).type === 'AST_HTML_ATTRIBUTE_NODE') &&
+      !(child instanceof WhitespaceNode || (child as any).type === 'AST_WHITESPACE_NODE')
+    )
+
     const children = node.body.filter(
       child =>
         !(child instanceof WhitespaceNode || (child as any).type === 'AST_WHITESPACE_NODE') &&
@@ -158,7 +167,7 @@ export class Printer extends Visitor {
       return
     }
 
-    if (attributes.length === 0) {
+    if (attributes.length === 0 && inlineNodes.length === 0) {
       if (children.length === 0) {
         if (isSelfClosing) {
           this.push(indent + `<${tagName} />`)
@@ -167,9 +176,35 @@ export class Printer extends Visitor {
         } else {
           this.push(indent + `<${tagName}></${tagName}>`)
         }
+
         return
       }
 
+      if (children.length >= 1) {
+        if (this.isInComplexNesting) {
+          if (children.length === 1) {
+            const child = children[0]
+
+            if (child instanceof HTMLTextNode || (child as any).type === 'AST_HTML_TEXT_NODE') {
+              const textContent = (child as HTMLTextNode).content.trim()
+              const singleLine = `<${tagName}>${textContent}</${tagName}>`
+
+              if (!textContent.includes('\n') && (indent.length + singleLine.length) <= this.maxLineLength) {
+                this.push(indent + singleLine)
+                return
+              }
+            }
+          }
+        } else {
+          const inlineResult = this.tryRenderInline(children, tagName)
+
+          if (inlineResult && (indent.length + inlineResult.length) <= this.maxLineLength) {
+            this.push(indent + inlineResult)
+            return
+          }
+        }
+      }
+
       this.push(indent + `<${tagName}>`)
 
       this.withIndent(() => {
@@ -183,16 +218,49 @@ export class Printer extends Visitor {
       return
     }
 
-    const inline = this.renderInlineOpen(tagName, attributes, isSelfClosing)
+    if (attributes.length === 0 && inlineNodes.length > 0) {
+      const inline = this.renderInlineOpen(tagName, [], isSelfClosing, inlineNodes, open.children)
+
+      if (children.length === 0) {
+        if (isSelfClosing || node.is_void) {
+          this.push(indent + inline)
+        } else {
+          this.push(indent + inline + `</${tagName}>`)
+        }
+        return
+      }
+
+      this.push(indent + inline)
+      this.withIndent(() => {
+        children.forEach(child => this.visit(child))
+      })
+
+      if (!node.is_void && !isSelfClosing) {
+        this.push(indent + `</${tagName}>`)
+      }
+
+      return
+    }
+
+    const inline = this.renderInlineOpen(tagName, attributes, isSelfClosing, inlineNodes, open.children)
     const singleAttribute = attributes[0]
     const hasEmptyValue =
       singleAttribute &&
       (singleAttribute.value instanceof HTMLAttributeValueNode || (singleAttribute.value as any)?.type === 'AST_HTML_ATTRIBUTE_VALUE_NODE') &&
       (singleAttribute.value as any)?.children.length === 0
 
-    const shouldKeepInline = attributes.length <= 3 &&
-                            !hasEmptyValue &&
-                            inline.length + indent.length <= this.maxLineLength
+    const hasERBControlFlow = inlineNodes.some(node =>
+      node instanceof ERBIfNode || (node as any).type === 'AST_ERB_IF_NODE' ||
+      node instanceof ERBUnlessNode || (node as any).type === 'AST_ERB_UNLESS_NODE' ||
+      node instanceof ERBBlockNode || (node as any).type === 'AST_ERB_BLOCK_NODE' ||
+      node instanceof ERBCaseNode || (node as any).type === 'AST_ERB_CASE_NODE' ||
+      node instanceof ERBWhileNode || (node as any).type === 'AST_ERB_WHILE_NODE' ||
+      node instanceof ERBForNode || (node as any).type === 'AST_ERB_FOR_NODE'
+    )
+
+    const shouldKeepInline = (attributes.length <= 3 &&
+                            inline.length + indent.length <= this.maxLineLength) ||
+                            (inlineNodes.length > 0 && !hasERBControlFlow)
 
     if (shouldKeepInline) {
       if (children.length === 0) {
@@ -203,6 +271,7 @@ export class Printer extends Visitor {
         } else {
           this.push(indent + inline.replace('>', `></${tagName}>`))
         }
+
         return
       }
 
@@ -223,27 +292,63 @@ export class Printer extends Visitor {
       return
     }
 
-    this.push(indent + `<${tagName}`)
-    this.withIndent(() => {
-      attributes.forEach(attribute => {
-        this.push(this.indent() + this.renderAttribute(attribute))
+    if (inlineNodes.length > 0 && hasERBControlFlow) {
+      this.push(indent + `<${tagName}`)
+      this.withIndent(() => {
+        open.children.forEach(child => {
+          if (child instanceof HTMLAttributeNode || (child as any).type === 'AST_HTML_ATTRIBUTE_NODE') {
+            this.push(this.indent() + this.renderAttribute(child as HTMLAttributeNode))
+          } else if (!(child instanceof WhitespaceNode || (child as any).type === 'AST_WHITESPACE_NODE')) {
+            this.visit(child)
+          }
+        })
       })
-    })
 
-    if (isSelfClosing) {
-      this.push(indent + "/>")
-    } else if (node.is_void) {
-      this.push(indent + ">")
-    } else if (children.length === 0) {
-      this.push(indent + ">" + `</${tagName}>`)
-    } else {
-      this.push(indent + ">")
+      if (isSelfClosing) {
+        this.push(indent + "/>")
+      } else if (node.is_void) {
+        this.push(indent + ">")
+      } else if (children.length === 0) {
+        this.push(indent + ">" + `</${tagName}>`)
+      } else {
+        this.push(indent + ">")
+        this.withIndent(() => {
+          children.forEach(child => this.visit(child))
+        })
+        this.push(indent + `</${tagName}>`)
+      }
+    } else if (inlineNodes.length > 0) {
+      this.push(indent + this.renderInlineOpen(tagName, attributes, isSelfClosing, inlineNodes, open.children))
 
+      if (!isSelfClosing && !node.is_void && children.length > 0) {
+        this.withIndent(() => {
+          children.forEach(child => this.visit(child))
+        })
+        this.push(indent + `</${tagName}>`)
+      }
+    } else {
+      this.push(indent + `<${tagName}`)
       this.withIndent(() => {
-        children.forEach(child => this.visit(child))
+        attributes.forEach(attribute => {
+          this.push(this.indent() + this.renderAttribute(attribute))
+        })
       })
 
-      this.push(indent + `</${tagName}>`)
+      if (isSelfClosing) {
+        this.push(indent + "/>")
+      } else if (node.is_void) {
+        this.push(indent + ">")
+      } else if (children.length === 0) {
+        this.push(indent + ">" + `</${tagName}>`)
+      } else {
+        this.push(indent + ">")
+
+        this.withIndent(() => {
+          children.forEach(child => this.visit(child))
+        })
+
+        this.push(indent + `</${tagName}>`)
+      }
     }
   }
 
@@ -293,7 +398,6 @@ export class Printer extends Visitor {
       (singleAttribute.value as any)?.children.length === 0
 
     const shouldKeepInline = attributes.length <= 3 &&
-                            !hasEmptyValue &&
                             inline.length + indent.length <= this.maxLineLength
 
     if (shouldKeepInline) {
@@ -492,18 +596,59 @@ export class Printer extends Visitor {
   }
 
   visitERBIfNode(node: ERBIfNode): void {
-    this.printERBNode(node)
+    if (this.inlineMode) {
+      const open = node.tag_opening?.value ?? ""
+      const content = node.content?.value ?? ""
+      const close = node.tag_closing?.value ?? ""
 
-    this.withIndent(() => {
-      node.statements.forEach(child => this.visit(child))
-    })
+      this.lines.push(open + content + close)
 
-    if (node.subsequent) {
-      this.visit(node.subsequent)
-    }
+      if (node.statements.length > 0) {
+        this.lines.push(" ")
+      }
 
-    if (node.end_node) {
-      this.printERBNode(node.end_node as any)
+      node.statements.forEach((child, index) => {
+        if (child instanceof HTMLAttributeNode || (child as any).type === 'AST_HTML_ATTRIBUTE_NODE') {
+          this.lines.push(this.renderAttribute(child as HTMLAttributeNode))
+        } else {
+          this.visit(child)
+        }
+
+        if (index < node.statements.length - 1) {
+          this.lines.push(" ")
+        }
+      })
+
+      if (node.statements.length > 0) {
+        this.lines.push(" ")
+      }
+
+      if (node.subsequent) {
+        this.visit(node.subsequent)
+      }
+
+      if (node.end_node) {
+        const endNode = node.end_node as any
+        const endOpen = endNode.tag_opening?.value ?? ""
+        const endContent = endNode.content?.value ?? ""
+        const endClose = endNode.tag_closing?.value ?? ""
+
+        this.lines.push(endOpen + endContent + endClose)
+      }
+    } else {
+      this.printERBNode(node)
+
+      this.withIndent(() => {
+        node.statements.forEach(child => this.visit(child))
+      })
+
+      if (node.subsequent) {
+        this.visit(node.subsequent)
+      }
+
+      if (node.end_node) {
+        this.printERBNode(node.end_node as any)
+      }
     }
   }
 
@@ -601,15 +746,73 @@ export class Printer extends Visitor {
 
   // --- Utility methods ---
 
-  private renderInlineOpen(name: string, attributes: HTMLAttributeNode[], selfClose: boolean): string {
+  private renderInlineOpen(name: string, attributes: HTMLAttributeNode[], selfClose: boolean, inlineNodes: Node[] = [], allChildren: Node[] = []): string {
     const parts = attributes.map(attribute => this.renderAttribute(attribute))
 
+    if (inlineNodes.length > 0) {
+      let result = `<${name}`
+
+      if (allChildren.length > 0) {
+        const currentIndentLevel = this.indentLevel
+        this.indentLevel = 0
+        const tempLines = this.lines
+        this.lines = []
+
+        allChildren.forEach(child => {
+          if (child instanceof HTMLAttributeNode || (child as any).type === 'AST_HTML_ATTRIBUTE_NODE') {
+            this.lines.push(" " + this.renderAttribute(child as HTMLAttributeNode))
+          } else if (!(child instanceof WhitespaceNode || (child as any).type === 'AST_WHITESPACE_NODE')) {
+            const wasInlineMode = this.inlineMode
+            this.inlineMode = true
+
+            this.lines.push(" ")
+
+            this.visit(child)
+            this.inlineMode = wasInlineMode
+          }
+        })
+
+        const inlineContent = this.lines.join("")
+        this.lines = tempLines
+        this.indentLevel = currentIndentLevel
+
+        result += inlineContent
+      } else {
+        if (parts.length > 0) {
+          result += ` ${parts.join(" ")}`
+        }
+
+        const currentIndentLevel = this.indentLevel
+        this.indentLevel = 0
+        const tempLines = this.lines
+        this.lines = []
+
+        inlineNodes.forEach(node => {
+          const wasInlineMode = this.inlineMode
+          this.inlineMode = true
+          this.visit(node)
+          this.inlineMode = wasInlineMode
+        })
+
+        const inlineContent = this.lines.join("")
+        this.lines = tempLines
+        this.indentLevel = currentIndentLevel
+
+        result += inlineContent
+      }
+
+      result += selfClose ? " />" : ">"
+
+      return result
+    }
+
     return `<${name}${parts.length ? " " + parts.join(" ") : ""}${selfClose ? " /" : ""}>`
   }
 
   renderAttribute(attribute: HTMLAttributeNode): string {
     const name = (attribute.name as HTMLAttributeNameNode)!.name!.value ?? ""
     const equals = attribute.equals?.value ?? ""
+
     let value = ""
 
     if (attribute.value && (attribute.value instanceof HTMLAttributeValueNode || (attribute.value as any)?.type === 'AST_HTML_ATTRIBUTE_VALUE_NODE')) {
@@ -617,13 +820,15 @@ export class Printer extends Visitor {
       const open_quote = (attrValue.open_quote?.value ?? "")
       const close_quote = (attrValue.close_quote?.value ?? "")
       const attribute_value = attrValue.children.map((attr: any) => {
-        if (attr instanceof HTMLTextNode || (attr as any).type === 'AST_HTML_TEXT_NODE' ||
-            attr instanceof LiteralNode || (attr as any).type === 'AST_LITERAL_NODE') {
+        if (attr instanceof HTMLTextNode || (attr as any).type === 'AST_HTML_TEXT_NODE' || attr instanceof LiteralNode || (attr as any).type === 'AST_LITERAL_NODE') {
+
           return (attr as HTMLTextNode | LiteralNode).content
         } else if (attr instanceof ERBContentNode || (attr as any).type === 'AST_ERB_CONTENT_NODE') {
           const erbAttr = attr as ERBContentNode
+
           return (erbAttr.tag_opening!.value + erbAttr.content!.value + erbAttr.tag_closing!.value)
         }
+
         return ""
       }).join("")
 
@@ -632,4 +837,159 @@ export class Printer extends Visitor {
 
     return name + equals + value
   }
+
+  /**
+   * Try to render children inline if they are simple enough.
+   * Returns the inline string if possible, null otherwise.
+   */
+  private tryRenderInline(children: Node[], tagName: string, depth: number = 0): string | null {
+    if (children.length > 10) {
+      return null
+    }
+
+    const maxNestingDepth = this.getMaxNestingDepth(children, 0)
+
+    if (maxNestingDepth > 1) {
+      this.isInComplexNesting = true
+      return null
+    }
+
+    for (const child of children) {
+      if (child instanceof HTMLTextNode || (child as any).type === 'AST_HTML_TEXT_NODE') {
+        const textContent = (child as HTMLTextNode).content
+
+        if (textContent.includes('\n')) {
+          return null
+        }
+      } else if (child instanceof HTMLElementNode || (child as any).type === 'AST_HTML_ELEMENT_NODE') {
+        const element = child as HTMLElementNode
+        const openTag = element.open_tag as HTMLOpenTagNode
+
+        const attributes = openTag.children.filter((child): child is HTMLAttributeNode =>
+          child instanceof HTMLAttributeNode || (child as any).type === 'AST_HTML_ATTRIBUTE_NODE'
+        )
+
+        if (attributes.length > 0) {
+          return null
+        }
+
+      } else if (child instanceof ERBContentNode || (child as any).type === 'AST_ERB_CONTENT_NODE') {
+        // ERB content nodes are allowed in inline rendering
+      } else {
+        return null
+      }
+    }
+
+    const oldLines = this.lines
+    const oldInlineMode = this.inlineMode
+
+    try {
+      this.lines = []
+      this.inlineMode = true
+
+      let content = ''
+
+      for (const child of children) {
+        if (child instanceof HTMLTextNode || (child as any).type === 'AST_HTML_TEXT_NODE') {
+          content += (child as HTMLTextNode).content
+        } else if (child instanceof HTMLElementNode || (child as any).type === 'AST_HTML_ELEMENT_NODE') {
+          const element = child as HTMLElementNode
+          const openTag = element.open_tag as HTMLOpenTagNode
+          const childTagName = openTag?.tag_name?.value || ''
+
+          const attributes = openTag.children.filter((child): child is HTMLAttributeNode =>
+            child instanceof HTMLAttributeNode || (child as any).type === 'AST_HTML_ATTRIBUTE_NODE'
+          )
+
+          const attributesString = attributes.length > 0
+            ? ' ' + attributes.map(attr => this.renderAttribute(attr)).join(' ')
+            : ''
+
+          const elementContent = this.renderElementInline(element)
+
+          content += `<${childTagName}${attributesString}>${elementContent}</${childTagName}>`
+        } else if (child instanceof ERBContentNode || (child as any).type === 'AST_ERB_CONTENT_NODE') {
+          const erbNode = child as ERBContentNode
+          const open = erbNode.tag_opening?.value ?? ""
+          const erbContent = erbNode.content?.value ?? ""
+          const close = erbNode.tag_closing?.value ?? ""
+
+          content += `${open} ${erbContent.trim()} ${close}`
+        }
+      }
+
+      content = content.replace(/\s+/g, ' ').trim()
+
+      return `<${tagName}>${content}</${tagName}>`
+
+    } finally {
+      this.lines = oldLines
+      this.inlineMode = oldInlineMode
+    }
+  }
+
+  /**
+   * Calculate the maximum nesting depth in a subtree of nodes.
+   */
+  private getMaxNestingDepth(children: Node[], currentDepth: number): number {
+    let maxDepth = currentDepth
+
+    for (const child of children) {
+      if (child instanceof HTMLElementNode || (child as any).type === 'AST_HTML_ELEMENT_NODE') {
+        const element = child as HTMLElementNode
+        const elementChildren = element.body.filter(
+          child =>
+            !(child instanceof WhitespaceNode || (child as any).type === 'AST_WHITESPACE_NODE') &&
+            !((child instanceof HTMLTextNode || (child as any).type === 'AST_HTML_TEXT_NODE') && (child as any)?.content.trim() === ""),
+        )
+
+        const childDepth = this.getMaxNestingDepth(elementChildren, currentDepth + 1)
+        maxDepth = Math.max(maxDepth, childDepth)
+      }
+    }
+
+    return maxDepth
+  }
+
+  /**
+   * Render an HTML element's content inline (without the wrapping tags).
+   */
+  private renderElementInline(element: HTMLElementNode): string {
+    const children = element.body.filter(
+      child =>
+        !(child instanceof WhitespaceNode || (child as any).type === 'AST_WHITESPACE_NODE') &&
+        !((child instanceof HTMLTextNode || (child as any).type === 'AST_HTML_TEXT_NODE') && (child as any)?.content.trim() === ""),
+    )
+
+    let content = ''
+    for (const child of children) {
+      if (child instanceof HTMLTextNode || (child as any).type === 'AST_HTML_TEXT_NODE') {
+        content += (child as HTMLTextNode).content
+      } else if (child instanceof HTMLElementNode || (child as any).type === 'AST_HTML_ELEMENT_NODE') {
+        const childElement = child as HTMLElementNode
+        const openTag = childElement.open_tag as HTMLOpenTagNode
+        const childTagName = openTag?.tag_name?.value || ''
+
+        const attributes = openTag.children.filter((child): child is HTMLAttributeNode =>
+          child instanceof HTMLAttributeNode || (child as any).type === 'AST_HTML_ATTRIBUTE_NODE'
+        )
+
+        const attributesString = attributes.length > 0
+          ? ' ' + attributes.map(attr => this.renderAttribute(attr)).join(' ')
+          : ''
+
+        const childContent = this.renderElementInline(childElement)
+        content += `<${childTagName}${attributesString}>${childContent}</${childTagName}>`
+      } else if (child instanceof ERBContentNode || (child as any).type === 'AST_ERB_CONTENT_NODE') {
+        const erbNode = child as ERBContentNode
+        const open = erbNode.tag_opening?.value ?? ""
+        const erbContent = erbNode.content?.value ?? ""
+        const close = erbNode.tag_closing?.value ?? ""
+
+        content += `${open} ${erbContent.trim()} ${close}`
+      }
+    }
+
+    return content.replace(/\s+/g, ' ').trim()
+  }
 }

package/bin/herb-formatter

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-import("../dist/herb-formatter.js")