fix: issues with printing attribute tags

marko-js · Nov 8, 2024 · 3a93b7f · 3a93b7f
1 parent 13f0f75
commit 3a93b7f
Show file tree

Hide file tree

Showing 12 changed files with 1,458 additions and 902 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "author": "Dylan Piercey <dpiercey@ebay.com>",
   "bugs": "https://github.com/marko-js/prettier/issues",
   "devDependencies": {
-    "@babel/generator": "^7.25.5",
+    "@babel/generator": "^7.26.2",
     "@commitlint/cli": "^17.7.2",
     "@commitlint/config-conventional": "^17.7.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
@@ -14,15 +14,15 @@
     "@types/node": "^22.5.1",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
-    "esbuild": "^0.19.4",
-    "esbuild-register": "^3.5.0",
+    "esbuild": "^0.24.0",
+    "esbuild-register": "^3.6.0",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "fast-glob": "^3.3.2",
     "fixpack": "^4.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
-    "marko": "^5.35.11",
+    "marko": "^5.35.32",
     "mocha": "^10.7.3",
     "mocha-snap": "^5.0.0",
     "nyc": "^15.1.0",

diff --git a/src/__tests__/__snapshots__/attr-tags.expected/auto.marko b/src/__tests__/__snapshots__/attr-tags.expected/auto.marko
@@ -0,0 +1,11 @@
+<my-select>
+  <@option>One</@option>
+  <@option>Two</@option>
+  <@option>Three</@option>
+</my-select>
+
+<my-dialog>
+  <@header>Head</@header>
+  <@footer>Foot</@footer>
+  Body
+</my-dialog>
diff --git a/src/__tests__/__snapshots__/attr-tags.expected/concise.marko b/src/__tests__/__snapshots__/attr-tags.expected/concise.marko
@@ -0,0 +1,9 @@
+my-select
+  @option -- One
+  @option -- Two
+  @option -- Three
+
+my-dialog
+  @header -- Head
+  @footer -- Foot
+  -- Body
diff --git a/src/__tests__/__snapshots__/attr-tags.expected/html.marko b/src/__tests__/__snapshots__/attr-tags.expected/html.marko
@@ -0,0 +1,11 @@
+<my-select>
+  <@option>One</@option>
+  <@option>Two</@option>
+  <@option>Three</@option>
+</my-select>
+
+<my-dialog>
+  <@header>Head</@header>
+  <@footer>Foot</@footer>
+  Body
+</my-dialog>
diff --git a/src/__tests__/__snapshots__/attr-tags.expected/with-parens.marko b/src/__tests__/__snapshots__/attr-tags.expected/with-parens.marko
@@ -0,0 +1,11 @@
+<my-select>
+  <@option>One</@option>
+  <@option>Two</@option>
+  <@option>Three</@option>
+</my-select>
+
+<my-dialog>
+  <@header>Head</@header>
+  <@footer>Foot</@footer>
+  Body
+</my-dialog>
diff --git a/src/__tests__/__snapshots__/style.expected/auto.marko b/src/__tests__/__snapshots__/style.expected/auto.marko
@@ -4,6 +4,7 @@ style {
     color: blue;
   }
 }
+
 style.less {
   @import "./thing.css";
   body {

diff --git a/src/__tests__/__snapshots__/style.expected/concise.marko b/src/__tests__/__snapshots__/style.expected/concise.marko
@@ -4,6 +4,7 @@ style {
     color: blue;
   }
 }
+
 style.less {
   @import "./thing.css";
   body {

diff --git a/src/__tests__/__snapshots__/style.expected/html.marko b/src/__tests__/__snapshots__/style.expected/html.marko
@@ -4,6 +4,7 @@ style {
     color: blue;
   }
 }
+
 style.less {
   @import "./thing.css";
   body {

diff --git a/src/__tests__/__snapshots__/style.expected/with-parens.marko b/src/__tests__/__snapshots__/style.expected/with-parens.marko
@@ -4,6 +4,7 @@ style {
     color: blue;
   }
 }
+
 style.less {
   @import "./thing.css";
   body {

diff --git a/src/__tests__/fixtures/attr-tags.marko b/src/__tests__/fixtures/attr-tags.marko
@@ -0,0 +1,11 @@
+<my-select>
+  <@option>One</@option>
+  <@option>Two</@option>
+  <@option>Three</@option>
+</my-select>
+
+<my-dialog>
+  <@header>Head</@header>
+  Body
+  <@footer>Foot</@footer>
+</my-dialog>
diff --git a/src/index.ts b/src/index.ts
@@ -398,14 +398,16 @@ export const printers: Record<string, Printer<types.Node>> = {
             }
           }
 
+          const hasAttrTags = !!node.attributeTags?.length;
+
           if (voidHTMLReg.test(literalTagName)) {
             if (opts.markoSyntax === "html") doc.push(">");
-          } else if (node.body.body.length) {
+          } else if (node.body.body.length || hasAttrTags) {
             const lastIndex = node.body.body.length - 1;
-            const bodyDocs = Array.isArray((node as any).attributeTags)
+            const bodyDocs = hasAttrTags
               ? (tagPath as any).map(print, "attributeTags")
               : [];
-            let textOnly = true;
+            let textOnly = !hasAttrTags;
 
             let textDocs = [] as Doc[];
             tagPath.each(
@@ -456,6 +458,7 @@ export const printers: Record<string, Printer<types.Node>> = {
             const joinSep =
               (preserveSpace || !textOnly) &&
               (opts.markoSyntax === "concise" ||
+                node.attributeTags?.length ||
                 node.body.body.some((child) => child.type === "MarkoScriptlet"))
                 ? b.hardline
                 : preserveSpace
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ style { @@
         color: blue;
       }
     }
     style.less {
       @import "./thing.css";
       body {
@@ Expand Down @@