Formatter: Wrap attributes based on maxLineLength only

javascript/packages/formatter/README.md

@@ -226,7 +226,7 @@ The `include` patterns are **additive** - they add to the defaults.
 
 - **`enabled`**: `true` or `false` - Must be `true` to enable formatting
 - **`indentWidth`**: Number (default: `2`) - Spaces per indentation level
-- **`maxLineLength`**: Number (default: `80`) - Maximum line length before wrapping. Note: tags with **more than 3 attributes** are always wrapped one-per-line, independent of `maxLineLength`.
+- **`maxLineLength`**: Number (default: `80`) - Maximum line length before wrapping. Tags whose attributes would exceed this length are wrapped one-per-line.
 - **`include`**: Array of glob patterns - Additional patterns to format (additive to defaults)
 - **`exclude`**: Array of glob patterns - Patterns to exclude from formatting
 

javascript/packages/formatter/src/attribute-renderer.ts

@@ -88,11 +88,7 @@ export class AttributeRenderer {
       }
     }
 
-    if (totalAttributeCount > 3 || inlineLength + indentLength > maxLineLength) {
-      return false
-    }
-
-    return true
+    return inlineLength + indentLength <= maxLineLength
   }
 
   wouldClassAttributeBeMultiline(content: string, indentLength: number): boolean {

javascript/packages/formatter/test/attribute-renderer.test.ts

@@ -251,16 +251,16 @@ describe("AttributeRenderer", () => {
       expect(renderer.shouldRenderInline(0, 40, 4)).toBe(false)
     })
 
-    test("returns true for 1-3 attributes within line length", () => {
+    test("returns true for multiple attributes within line length", () => {
       const renderer = createRenderer(120)
 
       expect(renderer.shouldRenderInline(2, 40, 4)).toBe(true)
     })
 
-    test("returns false for more than 3 attributes", () => {
+    test("returns true for many attributes that still fit within line length", () => {
       const renderer = createRenderer(120)
 
-      expect(renderer.shouldRenderInline(4, 40, 4)).toBe(false)
+      expect(renderer.shouldRenderInline(4, 40, 4)).toBe(true)
     })
 
     test("returns false when exceeding line length", () => {

javascript/packages/formatter/test/document-formatting.test.ts

@@ -341,19 +341,14 @@ describe("Document-level formatting", () => {
     `)
   })
 
-  test("formats regular HTML elements in multiline when attributes > 3", () => {
+  test("keeps opening tag inline when attributes fit within maxLineLength", () => {
     const source = dedent`
       <div id="element" class="bg-gray-300" another="attribute" final="one">Content</div>
     `
 
     const result = formatter.format(source)
     expect(result).toEqual(dedent`
-      <div
-        id="element"
-        class="bg-gray-300"
-        another="attribute"
-        final="one"
-      >
+      <div id="element" class="bg-gray-300" another="attribute" final="one">
         Content
       </div>
     `)

javascript/packages/formatter/test/erb-formatter/erb-formatter-additional.test.ts

@@ -223,14 +223,7 @@ describe("ERB Formatter Additional Tests", () => {
 
       const result = formatter.format(source)
 
-      expect(result).toBe(dedent`
-        <input
-          type="text"
-          required
-          disabled
-          readonly
-        />
-      `)
+      expect(result).toBe(`<input type="text" required disabled readonly />`)
     })
   })
 })

javascript/packages/formatter/test/html/attributes.test.ts

@@ -46,53 +46,49 @@ describe("@herb-tools/formatter", () => {
     `)
   })
 
-  test("wraps 4+ attributes correctly", () => {
+  test("keeps 4+ attributes inline when they fit within maxLineLength", () => {
     const source = dedent`
       <div class="foo" id="bar" data-test="value" role="button"></div>
     `
     const result = formatter.format(source)
     expect(result).toEqual(dedent`
-      <div
-        class="foo"
-        id="bar"
-        data-test="value"
-        role="button"
-      ></div>
+      <div class="foo" id="bar" data-test="value" role="button"></div>
     `)
   })
 
-  test("keeps empty attribute values inline when ≤3 attributes", () => {
+  test("wraps attributes when they would exceed maxLineLength", () => {
     const source = dedent`
-      <div id=""></div>
+      <div class="foo-bar-baz" id="element-id" data-test="example-value" role="navigation" aria-label="main"></div>
     `
     const result = formatter.format(source)
     expect(result).toEqual(dedent`
-      <div id=""></div>
+      <div
+        class="foo-bar-baz"
+        id="element-id"
+        data-test="example-value"
+        role="navigation"
+        aria-label="main"
+      ></div>
     `)
   })
 
-  test("keeps multiple empty attributes inline when <= 3 attributes", () => {
+  test("keeps empty attribute values inline", () => {
     const source = dedent`
-      <div id="" class="" data-value=""></div>
+      <div id=""></div>
     `
     const result = formatter.format(source)
     expect(result).toEqual(dedent`
-      <div id="" class="" data-value=""></div>
+      <div id=""></div>
     `)
   })
 
-  test("splits multiple empty attributes inline when > 3 attributes", () => {
+  test("keeps multiple empty attributes inline when within maxLineLength", () => {
     const source = dedent`
       <div id="" class="" data-value="" another-value=""></div>
     `
     const result = formatter.format(source)
     expect(result).toEqual(dedent`
-      <div
-        id=""
-        class=""
-        data-value=""
-        another-value=""
-      ></div>
+      <div id="" class="" data-value="" another-value=""></div>
     `)
   })
 
@@ -136,33 +132,39 @@ describe("@herb-tools/formatter", () => {
     `)
   })
 
-  test("formats self-closing input with 4+ attributes", () => {
+  test("keeps self-closing input with 4+ attributes inline when within maxLineLength", () => {
     const source = dedent`
       <input type="text" name="username" required readonly />
     `
     const result = formatter.format(source)
     expect(result).toEqual(dedent`
-      <input
-        type="text"
-        name="username"
-        required
-        readonly
-      />
+      <input type="text" name="username" required readonly />
     `)
   })
 
-  test("formats input with 4+ attributes without closing slash", () => {
+  test("keeps input with 4+ attributes without closing slash inline when within maxLineLength", () => {
     const source = dedent`
       <input type="text" name="username" required readonly>
     `
     const result = formatter.format(source)
+    expect(result).toEqual(dedent`
+      <input type="text" name="username" required readonly>
+    `)
+  })
+
+  test("wraps self-closing input when attributes exceed maxLineLength", () => {
+    const source = dedent`
+      <input type="text" name="username" placeholder="Enter your username" required readonly />
+    `
+    const result = formatter.format(source)
     expect(result).toEqual(dedent`
       <input
         type="text"
         name="username"
+        placeholder="Enter your username"
         required
         readonly
-      >
+      />
     `)
   })
 

javascript/packages/formatter/test/html/quote-normalization.test.ts

@@ -171,14 +171,7 @@ describe("Quote normalization", () => {
 
       const result = formatter.format(source)
 
-      expect(result).toBe(dedent`
-        <input
-          type="checkbox"
-          checked
-          disabled
-          readonly
-        />
-      `)
+      expect(result).toBe(`<input type="checkbox" checked disabled readonly />`)
     })
 
     test("handles data attributes with complex JSON", () => {

javascript/packages/formatter/test/html/script-style-tags.test.ts

@@ -259,12 +259,7 @@ describe("@herb-tools/formatter - script and style tags", () => {
     `
     const result = formatter.format(source)
     expect(result).toEqual(dedent`
-      <script
-        src="app.js"
-        defer
-        type="text/javascript"
-        id="main-script"
-      >
+      <script src="app.js" defer type="text/javascript" id="main-script">
         console.log("Fallback script");
       </script>
     `)