Improve multi line attributes printing in concise mode

marko-js · Dec 31, 2018 · 443e75e · 443e75e
1 parent 966a556
commit 443e75e
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 41 deletions.
diff --git a/packages/prettyprint/src/printHtmlElement.js b/packages/prettyprint/src/printHtmlElement.js
@@ -1,5 +1,6 @@
 "use strict";
 
+const redent = require("redent");
 const hasUnenclosedWhitespace = require("./util/hasUnenclosedWhitespace");
 const getBodyText = require("./util/getBodyText");
 const hasLineBreaks = require("./util/hasLineBreaks");
@@ -224,17 +225,24 @@ module.exports = function printHtmlElement(node, printContext, writer) {
             }
           });
         } else {
-          writer.write(" [" + printContext.eol);
-          attrStringsArray.forEach(attrString => {
-            writer.write(printContext.currentIndentString);
-            writer.write(printContext.indentString);
-            writer.write(printContext.indentString);
-            writer.write(attrString + printContext.eol);
-          });
+          if (attrStringsArray.length === 1) {
+            writer.write(" " + attrStringsArray[0]);
+          } else {
+            writer.write(" [" + printContext.eol);
+            attrStringsArray.forEach(attrString => {
+              writer.write(
+                redent(
+                  attrString,
+                  printContext.depth + 1,
+                  printContext.indentString
+                )
+              );
+              writer.write(printContext.eol);
+            });
 
-          writer.write(printContext.currentIndentString);
-          writer.write(printContext.indentString);
-          writer.write("]");
+            writer.write(printContext.currentIndentString);
+            writer.write("]");
+          }
         }
       }
     }

diff --git a/packages/prettyprint/test/autotest/argument-attr/expected.marko b/packages/prettyprint/test/autotest/argument-attr/expected.marko
@@ -9,13 +9,11 @@
 <div>${Hello}</div>
 ~~~~~~~
 div foo()
-div [
-        foo(
+div foo(
     { aaaaaaaaaa: 1, bbbbbbbbbb: 2, cccccccccc: 3 },
     aaaaaaaaaa,
     bbbbbbbbbb,
     cccccccccc
 )
-    ]
 -- ${test}
 div -- ${Hello}
diff --git a/packages/prettyprint/test/autotest/attrs-multiline-nested/expected.marko b/packages/prettyprint/test/autotest/attrs-multiline-nested/expected.marko
@@ -15,18 +15,18 @@
 </div>
 ~~~~~~~
 div [
+    data-foo="foo"
+    data-bar="bar"
+    data-hello="hello"
+    data-world="world"
+    class="my-class"
+    data-widget="my-really-awesome-weidget"
+]
+    div [
         data-foo="foo"
         data-bar="bar"
         data-hello="hello"
         data-world="world"
         class="my-class"
         data-widget="my-really-awesome-weidget"
-    ]
-    div [
-            data-foo="foo"
-            data-bar="bar"
-            data-hello="hello"
-            data-world="world"
-            class="my-class"
-            data-widget="my-really-awesome-weidget"
-        ] -- Hello World
+    ] -- Hello World
diff --git a/packages/prettyprint/test/autotest/attrs-multiline/expected.marko b/packages/prettyprint/test/autotest/attrs-multiline/expected.marko
@@ -7,10 +7,10 @@
     data-widget="my-really-awesome-weidget">Hello World</div>
 ~~~~~~~
 div [
-        data-foo="foo"
-        data-bar="bar"
-        data-hello="hello"
-        data-world="world"
-        class="my-class"
-        data-widget="my-really-awesome-weidget"
-    ] -- Hello World
+    data-foo="foo"
+    data-bar="bar"
+    data-hello="hello"
+    data-world="world"
+    class="my-class"
+    data-widget="my-really-awesome-weidget"
+] -- Hello World
diff --git a/packages/prettyprint/test/autotest/attrs-over-80-chars/expected.marko b/packages/prettyprint/test/autotest/attrs-over-80-chars/expected.marko
@@ -8,10 +8,9 @@
 </div>
 ~~~~~~~
 div [
-        data-widget="my-really-awesome-weidget-this-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going END"
-        data-widget2="my-really-awesome-weidget-this-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going END"
-        another-attribute="foo"
-    ]
-    div [
-            data-widget="my-really-awesome-weidget-this-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going END"
-        ] -- Hello World
+    data-widget="my-really-awesome-weidget-this-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going END"
+    data-widget2="my-really-awesome-weidget-this-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going END"
+    another-attribute="foo"
+]
+    div data-widget="my-really-awesome-weidget-this-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going-keeps-going-and-going-and-going END"
+        -- Hello World
diff --git a/packages/prettyprint/test/autotest/max-line-length/expected.marko b/packages/prettyprint/test/autotest/max-line-length/expected.marko
@@ -20,8 +20,8 @@ html lang="en"
     body
         h1 class="super-duper-long__class-name" -- Hello ${data.name}!
         h2 [
-                class="super-duper-long__class-name"
-                data-test="test attribute data"
-                data-more="more attribute data"
-                style="display: inline;"
-            ] -- Hello ${data.name}!
+            class="super-duper-long__class-name"
+            data-test="test attribute data"
+            data-more="more attribute data"
+            style="display: inline;"
+        ] -- Hello ${data.name}!