@herb-tools/formatter 0.4.1 → 0.4.2

package/dist/types/printer.d.ts

@@ -12,6 +12,7 @@ export declare class Printer extends Visitor {
     private lines;
     private indentLevel;
     private inlineMode;
+    private isInComplexNesting;
     constructor(source: string, options: Required<FormatOptions>);
     print(object: Node | Token, indentLevel?: number): string;
     private push;
@@ -53,4 +54,17 @@ export declare class Printer extends Visitor {
     private visitERBGeneric;
     private renderInlineOpen;
     renderAttribute(attribute: HTMLAttributeNode): string;
+    /**
+     * Try to render children inline if they are simple enough.
+     * Returns the inline string if possible, null otherwise.
+     */
+    private tryRenderInline;
+    /**
+     * Calculate the maximum nesting depth in a subtree of nodes.
+     */
+    private getMaxNestingDepth;
+    /**
+     * Render an HTML element's content inline (without the wrapping tags).
+     */
+    private renderElementInline;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herb-tools/formatter",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "license": "MIT",
   "homepage": "https://herb-tools.dev",
   "bugs": "https://github.com/marcoroth/herb/issues/new?title=Package%20%60@herb-tools/formatter%60:%20",
@@ -34,7 +34,7 @@
     }
   },
   "dependencies": {
-    "@herb-tools/core": "0.4.1",
+    "@herb-tools/core": "0.4.2",
     "glob": "^11.0.3"
   },
   "files": [

package/src/cli.ts

@@ -105,13 +105,16 @@ export class CLI {
               try {
                 const source = readFileSync(filePath, "utf-8")
                 const result = formatter.format(source)
-                if (result !== source) {
+                const output = result.endsWith('\n') ? result : result + '\n'
+
+                if (output !== source) {
                   if (isCheckMode) {
                     unformattedFiles.push(filePath)
                   } else {
-                    writeFileSync(filePath, result, "utf-8")
+                    writeFileSync(filePath, output, "utf-8")
                     console.log(`Formatted: ${filePath}`)
                   }
+
                   formattedCount++
                 }
               } catch (error) {
@@ -134,13 +137,14 @@ export class CLI {
           } else {
             const source = readFileSync(file, "utf-8")
             const result = formatter.format(source)
+            const output = result.endsWith('\n') ? result : result + '\n'
 
-            if (result !== source) {
+            if (output !== source) {
               if (isCheckMode) {
                 console.log(`File is not formatted: ${file}`)
                 process.exit(1)
               } else {
-                writeFileSync(file, result, "utf-8")
+                writeFileSync(file, output, "utf-8")
                 console.log(`Formatted: ${file}`)
               }
             } else if (isCheckMode) {
@@ -169,12 +173,13 @@ export class CLI {
           try {
             const source = readFileSync(filePath, "utf-8")
             const result = formatter.format(source)
+            const output = result.endsWith('\n') ? result : result + '\n'
 
-            if (result !== source) {
+            if (output !== source) {
               if (isCheckMode) {
                 unformattedFiles.push(filePath)
               } else {
-                writeFileSync(filePath, result, "utf-8")
+                writeFileSync(filePath, output, "utf-8")
                 console.log(`Formatted: ${filePath}`)
               }
               formattedCount++

package/src/printer.ts

@@ -68,6 +68,7 @@ export class Printer extends Visitor {
   private lines: string[] = []
   private indentLevel: number = 0
   private inlineMode: boolean = false
+  private isInComplexNesting: boolean = false
 
   constructor(source: string, options: Required<FormatOptions>) {
     super()
@@ -85,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)
@@ -144,6 +146,7 @@ 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')
@@ -177,6 +180,31 @@ export class Printer extends Visitor {
         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(() => {
@@ -221,10 +249,18 @@ export class Printer extends Visitor {
       (singleAttribute.value instanceof HTMLAttributeValueNode || (singleAttribute.value as any)?.type === 'AST_HTML_ATTRIBUTE_VALUE_NODE') &&
       (singleAttribute.value as any)?.children.length === 0
 
+    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 &&
-                            !hasEmptyValue &&
                             inline.length + indent.length <= this.maxLineLength) ||
-                            inlineNodes.length > 0
+                            (inlineNodes.length > 0 && !hasERBControlFlow)
 
     if (shouldKeepInline) {
       if (children.length === 0) {
@@ -235,6 +271,7 @@ export class Printer extends Visitor {
         } else {
           this.push(indent + inline.replace('>', `></${tagName}>`))
         }
+
         return
       }
 
@@ -255,7 +292,32 @@ export class Printer extends Visitor {
       return
     }
 
-    if (inlineNodes.length > 0) {
+    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 + ">")
+        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) {
@@ -336,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) {
@@ -539,21 +600,39 @@ export class Printer extends Visitor {
       const open = node.tag_opening?.value ?? ""
       const content = node.content?.value ?? ""
       const close = node.tag_closing?.value ?? ""
+
       this.lines.push(open + content + close)
 
-      node.statements.forEach(child => {
+      if (node.statements.length > 0) {
+        this.lines.push(" ")
+      }
+
+      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) + " ")
+          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 {
@@ -758,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()
+  }
 }