@herb-tools/formatter 0.6.0 → 0.7.0

package/dist/types/format-printer.d.ts

@@ -26,6 +26,7 @@ export declare class FormatPrinter extends Printer {
     private elementFormattingAnalysis;
     source: string;
     private static readonly INLINE_ELEMENTS;
+    private static readonly CONTENT_PRESERVING_ELEMENTS;
     private static readonly SPACEABLE_CONTAINERS;
     private static readonly TIGHT_GROUP_PARENTS;
     private static readonly TIGHT_GROUP_CHILDREN;
@@ -58,6 +59,10 @@ export declare class FormatPrinter extends Printer {
      * @deprecated refactor to use @herb-tools/printer infrastructre (or rework printer use push and this.lines)
      */
     private push;
+    /**
+     * @deprecated refactor to use @herb-tools/printer infrastructre (or rework printer use push and this.lines)
+     */
+    private pushWithIndent;
     private withIndent;
     private get indent();
     /**
@@ -240,4 +245,5 @@ export declare class FormatPrinter extends Printer {
     private filterEmptyNodes;
     private renderElementInline;
     private renderChildrenInline;
+    private isContentPreserving;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herb-tools/formatter",
-  "version": "0.6.0",
+  "version": "0.7.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,8 +35,8 @@
     }
   },
   "dependencies": {
-    "@herb-tools/core": "0.6.0",
-    "@herb-tools/printer": "0.6.0"
+    "@herb-tools/core": "0.7.0",
+    "@herb-tools/printer": "0.7.0"
   },
   "devDependencies": {
     "glob": "^11.0.3"

package/src/cli.ts

@@ -6,7 +6,7 @@ import { join, resolve } from "path"
 import { Herb } from "@herb-tools/node-wasm"
 import { Formatter } from "./formatter.js"
 
-import { name, version } from "../package.json"
+import { name, version, dependencies } from "../package.json"
 
 const pluralize = (count: number, singular: string, plural: string = singular + 's'): string => {
   return count === 1 ? singular : plural
@@ -52,7 +52,9 @@ export class CLI {
 
       if (args.includes("--version") || args.includes("-v")) {
         console.log("Versions:")
-        console.log(`  ${name}@${version}, ${Herb.version}`.split(", ").join("\n  "))
+        console.log(`  ${name}@${version}`)
+        console.log(`  @herb-tools/printer@${dependencies['@herb-tools/printer']}`)
+        console.log(`  ${Herb.version}`.split(", ").join("\n  "))
 
         process.exit(0)
       }

package/src/format-printer.ts

@@ -1,3 +1,4 @@
+import dedent from "dedent"
 import {
   getTagName,
   getCombinedAttributeName,
@@ -105,13 +106,18 @@ export class FormatPrinter extends Printer {
     'tt', 'var', 'del', 'ins', 'mark', 's', 'u', 'time', 'wbr'
   ])
 
+  private static readonly CONTENT_PRESERVING_ELEMENTS = new Set([
+    'script', 'style', 'pre', 'textarea'
+  ])
+
   private static readonly SPACEABLE_CONTAINERS = new Set([
     'div', 'section', 'article', 'main', 'header', 'footer', 'aside',
     'figure', 'details', 'summary', 'dialog', 'fieldset'
   ])
 
   private static readonly TIGHT_GROUP_PARENTS = new Set([
-    'ul', 'ol', 'nav', 'select', 'datalist', 'optgroup', 'tr', 'thead', 'tbody', 'tfoot'
+    'ul', 'ol', 'nav', 'select', 'datalist', 'optgroup', 'tr', 'thead',
+    'tbody', 'tfoot'
   ])
 
   private static readonly TIGHT_GROUP_CHILDREN = new Set([
@@ -229,6 +235,15 @@ export class FormatPrinter extends Printer {
     this.lines.push(line)
   }
 
+  /**
+   * @deprecated refactor to use @herb-tools/printer infrastructre (or rework printer use push and this.lines)
+   */
+  private pushWithIndent(line: string) {
+    const indent = line.trim() === "" ? "" : this.indent
+
+    this.push(indent + line)
+  }
+
   private withIndent<T>(callback: () => T): T {
     this.indentLevel++
     const result = callback()
@@ -490,21 +505,16 @@ export class FormatPrinter extends Printer {
   }
 
   private getAttributeValue(attribute: HTMLAttributeNode): string {
-    if (attribute.value && isNode(attribute.value, HTMLAttributeValueNode)) {
-      const content = attribute.value.children.map(child => {
-        if (isNode(child, HTMLTextNode)) {
-          return child.content
-        }
-        return IdentityPrinter.print(child)
-      }).join('')
-      return content
+    if (isNode(attribute.value, HTMLAttributeValueNode)) {
+      return attribute.value.children.map(child => isNode(child, HTMLTextNode) ? child.content : IdentityPrinter.print(child)).join('')
     }
+
     return ''
   }
 
   private hasMultilineAttributes(attributes: HTMLAttributeNode[]): boolean {
     return attributes.some(attribute => {
-      if (attribute.value && isNode(attribute.value, HTMLAttributeValueNode)) {
+      if (isNode(attribute.value, HTMLAttributeValueNode)) {
         const content = getCombinedStringFromNodes(attribute.value.children)
 
         if (/\r?\n/.test(content)) {
@@ -619,12 +629,12 @@ export class FormatPrinter extends Printer {
    * Render multiline attributes for a tag
    */
   private renderMultilineAttributes(tagName: string, allChildren: Node[] = [], isSelfClosing: boolean = false,) {
-    this.push(this.indent + `<${tagName}`)
+    this.pushWithIndent(`<${tagName}`)
 
     this.withIndent(() => {
       allChildren.forEach(child => {
         if (isNode(child, HTMLAttributeNode)) {
-          this.push(this.indent + this.renderAttribute(child))
+          this.pushWithIndent(this.renderAttribute(child))
         } else if (!isNode(child, WhitespaceNode)) {
           this.visit(child)
         }
@@ -632,9 +642,9 @@ export class FormatPrinter extends Printer {
     })
 
     if (isSelfClosing) {
-      this.push(this.indent + "/>")
+      this.pushWithIndent("/>")
     } else {
-      this.push(this.indent + ">")
+      this.pushWithIndent(">")
     }
   }
 
@@ -719,8 +729,13 @@ export class FormatPrinter extends Printer {
   }
 
   visitHTMLElementBody(body: Node[], element: HTMLElementNode) {
-    const analysis = this.elementFormattingAnalysis.get(element)
+    if (this.isContentPreserving(element)) {
+      element.body.map(child => this.pushToLastLine(IdentityPrinter.print(child)))
 
+      return
+    }
+
+    const analysis = this.elementFormattingAnalysis.get(element)
     const hasTextFlow = this.isInTextFlowContext(null, body)
     const children = this.filterSignificantChildren(body, hasTextFlow)
 
@@ -881,7 +896,7 @@ export class FormatPrinter extends Printer {
     if (this.currentElement && closeTagInline) {
       this.pushToLastLine(closingTag)
     } else {
-      this.push(this.indent + closingTag)
+      this.pushWithIndent(closingTag)
     }
   }
 
@@ -921,15 +936,15 @@ export class FormatPrinter extends Printer {
   }
 
   visitHTMLAttributeNode(node: HTMLAttributeNode) {
-    this.push(this.indent + this.renderAttribute(node))
+    this.pushWithIndent(this.renderAttribute(node))
   }
 
   visitHTMLAttributeNameNode(node: HTMLAttributeNameNode) {
-    this.push(this.indent + getCombinedAttributeName(node))
+    this.pushWithIndent(getCombinedAttributeName(node))
   }
 
   visitHTMLAttributeValueNode(node: HTMLAttributeValueNode) {
-    this.push(this.indent + IdentityPrinter.print(node))
+    this.pushWithIndent(IdentityPrinter.print(node))
   }
 
   // TODO: rework
@@ -941,9 +956,9 @@ export class FormatPrinter extends Printer {
 
     if (node.children && node.children.length > 0) {
       inner = node.children.map(child => {
-        if (isNode(child, HTMLTextNode) || isNode(child, LiteralNode)) {
+        if (isNode(child, HTMLTextNode) || isNode(child, LiteralNode)) {
           return child.content
-        } else if (isERBNode(child) || isNode(child, ERBContentNode)) {
+        } else if (isERBNode(child) || isNode(child, ERBContentNode)) {
           return this.reconstructERBNode(child, false)
         } else {
           return ""
@@ -993,44 +1008,53 @@ export class FormatPrinter extends Printer {
       inner = ""
     }
 
-    this.push(this.indent + open + inner + close)
+    this.pushWithIndent(open + inner + close)
   }
 
   visitERBCommentNode(node: ERBContentNode) {
-    const open = node.tag_opening?.value ?? ""
-    const close = node.tag_closing?.value ?? ""
+    const open = node.tag_opening?.value || "<%#"
+    const content = node?.content?.value || ""
+    const close = node.tag_closing?.value || "%>"
 
-    let inner: string
+    const contentLines = content.split("\n")
+    const contentTrimmedLines = content.trim().split("\n")
 
-    if (node.content && node.content.value) {
-      const rawInner = node.content.value
-      const lines = rawInner.split("\n")
+    if (contentLines.length === 1 && contentTrimmedLines.length === 1) {
+      const startsWithSpace = content[0] === " "
+      const before = startsWithSpace ? "" : " "
 
-      if (lines.length > 2) {
-        const childIndent = this.indent + " ".repeat(this.indentWidth)
-        const innerLines = lines.slice(1, -1).map(line => childIndent + line.trim())
+      this.pushWithIndent(open + before + content.trimEnd() + ' ' + close)
 
-        inner = "\n" + innerLines.join("\n") + "\n"
-      } else {
-        inner = ` ${rawInner.trim()} `
-      }
-    } else {
-      inner = ""
+      return
+    }
+
+    if (contentTrimmedLines.length === 1) {
+      this.pushWithIndent(open + ' ' + content.trim() + ' ' + close)
+      return
     }
 
-    this.push(this.indent + open + inner + close)
+    const firstLineEmpty = contentLines[0].trim() === ""
+    const dedentedContent = dedent(firstLineEmpty ? content : content.trimStart())
+
+    this.pushWithIndent(open)
+
+    this.withIndent(() => {
+      dedentedContent.split("\n").forEach(line => this.pushWithIndent(line))
+    })
+
+    this.pushWithIndent(close)
   }
 
   visitHTMLDoctypeNode(node: HTMLDoctypeNode) {
-    this.push(this.indent + IdentityPrinter.print(node))
+    this.pushWithIndent(IdentityPrinter.print(node))
   }
 
   visitXMLDeclarationNode(node: XMLDeclarationNode) {
-    this.push(this.indent + IdentityPrinter.print(node))
+    this.pushWithIndent(IdentityPrinter.print(node))
   }
 
   visitCDATANode(node: CDATANode) {
-    this.push(this.indent + IdentityPrinter.print(node))
+    this.pushWithIndent(IdentityPrinter.print(node))
   }
 
   visitERBContentNode(node: ERBContentNode) {
@@ -1202,7 +1226,7 @@ export class FormatPrinter extends Printer {
    * Determines if the open tag should be rendered inline
    */
   private shouldRenderOpenTagInline(node: HTMLElementNode): boolean {
-    const children = node.open_tag?.children || []
+    const children = node.open_tag?.children || []
     const attributes = filterNodes(children, HTMLAttributeNode)
     const inlineNodes = this.extractInlineNodes(children)
     const hasERBControlFlow = inlineNodes.some(node => isERBControlFlowNode(node)) || children.some(node => isERBControlFlowNode(node))
@@ -1299,9 +1323,9 @@ export class FormatPrinter extends Printer {
    * Determines if the close tag should be rendered inline (usually follows content decision)
    */
   private shouldRenderCloseTagInline(node: HTMLElementNode, elementContentInline: boolean): boolean {
-    const isSelfClosing = node.open_tag?.tag_closing?.value === "/>"
-
-    if (isSelfClosing || node.is_void) return true
+    if (node.is_void) return true
+    if (node.open_tag?.tag_closing?.value === "/>") return true
+    if (this.isContentPreserving(node)) return true
 
     const children = this.filterSignificantChildren(node.body, this.isInTextFlowContext(null, node.body))
 
@@ -1379,7 +1403,7 @@ export class FormatPrinter extends Printer {
             }
           } else {
             if (currentLineContent.trim()) {
-              this.push(this.indent + currentLineContent.trim())
+              this.pushWithIndent(currentLineContent.trim())
               currentLineContent = ""
             }
 
@@ -1387,7 +1411,7 @@ export class FormatPrinter extends Printer {
           }
         } else {
           if (currentLineContent.trim()) {
-            this.push(this.indent + currentLineContent.trim())
+            this.pushWithIndent(currentLineContent.trim())
             currentLineContent = ""
           }
 
@@ -1418,7 +1442,7 @@ export class FormatPrinter extends Printer {
         }
       } else {
         if (currentLineContent.trim()) {
-          this.push(this.indent + currentLineContent.trim())
+          this.pushWithIndent(currentLineContent.trim())
           currentLineContent = ""
         }
 
@@ -1523,7 +1547,7 @@ export class FormatPrinter extends Printer {
 
     let value = ""
 
-    if (attribute.value && isNode(attribute.value, HTMLAttributeValueNode)) {
+    if (isNode(attribute.value, HTMLAttributeValueNode)) {
       const attributeValue = attribute.value
 
       let open_quote = attributeValue.open_quote?.value ?? ""
@@ -1531,7 +1555,7 @@ export class FormatPrinter extends Printer {
       let htmlTextContent = ""
 
       const content = attributeValue.children.map((child: Node) => {
-        if (isNode(child, HTMLTextNode) || isNode(child, LiteralNode)) {
+        if (isNode(child, HTMLTextNode) || isNode(child, LiteralNode)) {
           htmlTextContent += child.content
 
           return child.content
@@ -1819,4 +1843,10 @@ export class FormatPrinter extends Printer {
 
     return content.replace(/\s+/g, ' ').trim()
   }
+
+  private isContentPreserving(element: HTMLElementNode | HTMLOpenTagNode | HTMLCloseTagNode): boolean {
+    const tagName = getTagName(element)
+
+    return FormatPrinter.CONTENT_PRESERVING_ELEMENTS.has(tagName)
+  }
 }