Improve multi line attributes printing in concise mode

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

Hide file tree

Showing 9 changed files with 63 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/prettyprint/package-lock.json b/packages/prettyprint/package-lock.json
diff --git a/packages/prettyprint/package.json b/packages/prettyprint/package.json
@@ -8,7 +8,7 @@
     "argly": "^1.2.0",
     "editorconfig": "^0.15.2",
     "lasso-package-root": "^1.0.1",
-    "marko": "^4.14.3",
+    "marko": "^4.14.12",
     "minimatch": "^3.0.4",
     "prettier": "^1.15.3",
     "redent": "^2.0.0",

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");
@@ -204,7 +205,10 @@ module.exports = function printHtmlElement(node, printContext, writer) {
         attrsString = " " + attrStringsArray.join(" ");
       }
 
-      if (writer.col + attrsString.length < maxLen) {
+      if (
+        writer.col + attrsString.length < maxLen ||
+        attrStringsArray.length === 1
+      ) {
         writer.write(attrsString);
       } else {
         if (useCommas) {
@@ -213,27 +217,30 @@ module.exports = function printHtmlElement(node, printContext, writer) {
 
           attrStringsArray.forEach((attrString, i) => {
             if (i !== 0) {
-              writer.write(printContext.currentIndentString);
-              writer.write(printContext.indentString);
+              attrString = redent(
+                attrString,
+                printContext.depth + 1,
+                printContext.indentString
+              );
             }
 
-            if (i === lastIndex) {
-              writer.write(attrString + ";" + printContext.eol);
-            } else {
-              writer.write(attrString + "," + printContext.eol);
-            }
+            writer.write(attrString + (i === lastIndex ? ";" : ","));
+            writer.write(printContext.eol);
           });
         } 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);
+            writer.write(
+              redent(
+                attrString,
+                printContext.depth + 1,
+                printContext.indentString
+              )
+            );
+            writer.write(printContext.eol);
           });
 
           writer.write(printContext.currentIndentString);
-          writer.write(printContext.indentString);
           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}!