@herb-tools/formatter 0.4.3 → 0.5.0

package/dist/index.esm.js

@@ -129,7 +129,7 @@ class Token {
 }
 
 // NOTE: This file is generated by the templates/template.rb script and should not
-// be modified manually. See /Users/marcoroth/Development/herb-release-7/templates/javascript/packages/core/src/errors.ts.erb
+// be modified manually. See /Users/marcoroth/Development/herb-release-0.5.0/templates/javascript/packages/core/src/errors.ts.erb
 class HerbError {
     type;
     message;
@@ -579,7 +579,7 @@ function convertToUTF8(string) {
 }
 
 // NOTE: This file is generated by the templates/template.rb script and should not
-// be modified manually. See /Users/marcoroth/Development/herb-release-7/templates/javascript/packages/core/src/nodes.ts.erb
+// be modified manually. See /Users/marcoroth/Development/herb-release-0.5.0/templates/javascript/packages/core/src/nodes.ts.erb
 class Node {
     type;
     location;
@@ -2574,7 +2574,7 @@ function fromSerializedNode(node) {
 }
 
 // NOTE: This file is generated by the templates/template.rb script and should not
-// be modified manually. See /Users/marcoroth/Development/herb-release-7/templates/javascript/packages/core/src/visitor.ts.erb
+// be modified manually. See /Users/marcoroth/Development/herb-release-0.5.0/templates/javascript/packages/core/src/visitor.ts.erb
 class Visitor {
     visit(node) {
         if (!node)
@@ -2679,6 +2679,11 @@ class Visitor {
     }
 }
 
+// TODO: we can probably expand this list with more tags/attributes
+const FORMATTABLE_ATTRIBUTES = {
+    '*': ['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.
@@ -2691,6 +2696,7 @@ class Printer extends Visitor {
     indentLevel = 0;
     inlineMode = false;
     isInComplexNesting = false;
+    currentTagName = "";
     static INLINE_ELEMENTS = new Set([
         'a', 'abbr', 'acronym', 'b', 'bdo', 'big', 'br', 'cite', 'code',
         'dfn', 'em', 'i', 'img', 'kbd', 'label', 'map', 'object', 'q',
@@ -2789,26 +2795,117 @@ class Printer extends Visitor {
     /**
      * Determine if a tag should be rendered inline based on attribute count and other factors
      */
-    shouldRenderInline(totalAttributeCount, inlineLength, indentLength, maxLineLength = this.maxLineLength, hasComplexERB = false, nestingDepth = 0, inlineNodesLength = 0) {
-        if (hasComplexERB)
+    shouldRenderInline(totalAttributeCount, inlineLength, indentLength, maxLineLength = this.maxLineLength, hasComplexERB = false, _nestingDepth = 0, _inlineNodesLength = 0, hasMultilineAttributes = 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;
-        const erbInlineCondition = inlineNodesLength > 0 && totalAttributeCount <= 3;
-        return basicInlineCondition || erbInlineCondition;
+        if (totalAttributeCount > 3 || inlineLength + indentLength > maxLineLength) {
+            return false;
+        }
+        return true;
+    }
+    hasMultilineAttributes(attributes) {
+        return attributes.some(attribute => {
+            if (attribute.value && (attribute.value instanceof HTMLAttributeValueNode || attribute.value?.type === 'AST_HTML_ATTRIBUTE_VALUE_NODE')) {
+                const attributeValue = attribute.value;
+                const content = attributeValue.children.map((child) => {
+                    if (child instanceof HTMLTextNode || child.type === 'AST_HTML_TEXT_NODE' || child instanceof LiteralNode || child.type === 'AST_LITERAL_NODE') {
+                        return child.content;
+                    }
+                    else if (child instanceof ERBContentNode || child.type === 'AST_ERB_CONTENT_NODE') {
+                        const erbAttribute = child;
+                        return erbAttribute.tag_opening.value + erbAttribute.content.value + erbAttribute.tag_closing.value;
+                    }
+                    return "";
+                }).join("");
+                if (/\r?\n/.test(content)) {
+                    const name = attribute.name.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;
+        });
+    }
+    formatClassAttribute(content, name, equals, open_quote, close_quote) {
+        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;
+    }
+    isFormattableAttribute(attributeName, tagName) {
+        const globalFormattable = FORMATTABLE_ATTRIBUTES['*'] || [];
+        const tagSpecificFormattable = FORMATTABLE_ATTRIBUTES[tagName.toLowerCase()] || [];
+        return globalFormattable.includes(attributeName) || tagSpecificFormattable.includes(attributeName);
+    }
+    formatMultilineAttribute(content, name, equals, open_quote, close_quote) {
+        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;
+    }
+    formatMultilineAttributeValue(lines) {
+        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, currentIndent, separator = ' ') {
+        const lines = [];
+        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;
     }
     /**
      * Render multiline attributes for a tag
      */
-    renderMultilineAttributes(tagName, attributes, inlineNodes = [], allChildren = [], isSelfClosing = false, isVoid = false, hasBodyContent = false) {
+    renderMultilineAttributes(tagName, _attributes, _inlineNodes = [], allChildren = [], isSelfClosing = false, isVoid = false, hasBodyContent = false) {
         const indent = this.indent();
         this.push(indent + `<${tagName}`);
         this.withIndent(() => {
-            // Render children in order, handling both attributes and ERB nodes
             allChildren.forEach(child => {
                 if (child instanceof HTMLAttributeNode || child.type === 'AST_HTML_ATTRIBUTE_NODE') {
                     this.push(this.indent() + this.renderAttribute(child));
@@ -2876,6 +2973,7 @@ class Printer extends Visitor {
         const open = node.open_tag;
         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);
         const hasTextFlow = this.isInTextFlowContext(null, node.body);
@@ -3017,7 +3115,7 @@ class Printer extends Visitor {
         const inline = hasComplexERB ? "" : this.renderInlineOpen(tagName, attributes, isSelfClosing, inlineNodes, open.children);
         const nestingDepth = this.getMaxNestingDepth(children, 0);
         const totalAttributeCount = this.getTotalAttributeCount(attributes, inlineNodes);
-        const shouldKeepInline = this.shouldRenderInline(totalAttributeCount, inline.length, indent.length, this.maxLineLength, hasComplexERB, nestingDepth, inlineNodes.length);
+        const shouldKeepInline = this.shouldRenderInline(totalAttributeCount, inline.length, indent.length, this.maxLineLength, hasComplexERB, nestingDepth, inlineNodes.length, this.hasMultilineAttributes(attributes));
         if (shouldKeepInline) {
             if (children.length === 0) {
                 if (isSelfClosing) {
@@ -3126,19 +3224,24 @@ 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);
             if (!isSelfClosing && !node.is_void && children.length > 0) {
@@ -3166,7 +3269,7 @@ class Printer extends Visitor {
         }
         const inline = this.renderInlineOpen(tagName, attributes, node.is_void, inlineNodes, node.children);
         const totalAttributeCount = this.getTotalAttributeCount(attributes, inlineNodes);
-        const shouldKeepInline = this.shouldRenderInline(totalAttributeCount, inline.length, indent.length, this.maxLineLength, false, 0, inlineNodes.length);
+        const shouldKeepInline = this.shouldRenderInline(totalAttributeCount, inline.length, indent.length, this.maxLineLength, false, 0, inlineNodes.length, this.hasMultilineAttributes(attributes));
         if (shouldKeepInline) {
             this.push(indent + inline);
             return;
@@ -3180,7 +3283,7 @@ class Printer extends Visitor {
         const inlineNodes = this.extractInlineNodes(node.attributes);
         const inline = this.renderInlineOpen(tagName, attributes, true, inlineNodes, node.attributes);
         const totalAttributeCount = this.getTotalAttributeCount(attributes, inlineNodes);
-        const shouldKeepInline = this.shouldRenderInline(totalAttributeCount, inline.length, indent.length, this.maxLineLength, false, 0, inlineNodes.length);
+        const shouldKeepInline = this.shouldRenderInline(totalAttributeCount, inline.length, indent.length, this.maxLineLength, false, 0, inlineNodes.length, this.hasMultilineAttributes(attributes));
         if (shouldKeepInline) {
             this.push(indent + inline);
             return;
@@ -3254,19 +3357,24 @@ class Printer extends Visitor {
         const open = node.comment_start?.value ?? "";
         const close = node.comment_end?.value ?? "";
         let inner;
-        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.type === 'AST_HTML_TEXT_NODE') {
+                    return child.content;
+                }
+                else if (child instanceof LiteralNode || child.type === 'AST_LITERAL_NODE') {
+                    return child.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);
     }
@@ -3275,10 +3383,8 @@ class Printer extends Visitor {
         const open = node.tag_opening?.value ?? "";
         const close = node.tag_closing?.value ?? "";
         let inner;
-        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);
@@ -3289,32 +3395,41 @@ class Printer extends Visitor {
                 inner = ` ${rawInner.trim()} `;
             }
         }
-        else {
-            inner = node.children
-                .map((child) => {
+        else if (node.children) {
+            inner = node.children.map((child) => {
                 const prevLines = this.lines.length;
                 this.visit(child);
                 return this.lines.slice(prevLines).join("");
-            })
-                .join("");
+            }).join("");
+        }
+        else {
+            inner = "";
         }
         this.push(indent + open + inner + close);
     }
     visitHTMLDoctypeNode(node) {
         const indent = this.indent();
         const open = node.tag_opening?.value ?? "";
-        let innerDoctype;
-        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.type === 'AST_HTML_TEXT_NODE') {
+                return child.content;
+            }
+            else if (child instanceof LiteralNode || child.type === 'AST_LITERAL_NODE') {
+                return child.content;
+            }
+            else if (child instanceof ERBContentNode || child.type === 'AST_ERB_CONTENT_NODE') {
+                const erbNode = child;
+                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);
     }
@@ -3561,6 +3676,8 @@ class Printer extends Visitor {
                     const erbContent = this.lines.join("");
                     currentLineContent += erbContent;
                     if ((indent.length + currentLineContent.length) > Math.max(this.maxLineLength, 120)) {
+                        this.lines = oldLines;
+                        this.inlineMode = oldInlineMode;
                         this.visitTextFlowChildrenMultiline(children);
                         return;
                     }
@@ -3702,14 +3819,24 @@ class Printer extends Visitor {
                 open_quote = '"';
                 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;
     }
     /**
      * Try to render a complete element inline including opening tag, children, and closing tag
      */
-    tryRenderInlineFull(node, tagName, attributes, children) {
+    tryRenderInlineFull(_node, tagName, attributes, children) {
         let result = `<${tagName}`;
         result += this.renderAttributesString(attributes);
         result += ">";