From 0438bc87f4659e4c17e17f6818ac645962ef962f Mon Sep 17 00:00:00 2001 From: Dylan Piercey Date: Mon, 31 Dec 2018 08:52:57 -0700 Subject: [PATCH] Improve multi line attributes printing in concise mode --- package-lock.json | 2 +- packages/prettyprint/package-lock.json | 20 +++++++---- packages/prettyprint/package.json | 2 +- packages/prettyprint/src/printHtmlElement.js | 33 +++++++++++-------- .../autotest/argument-attr/expected.marko | 4 +-- .../attrs-multiline-nested/expected.marko | 18 +++++----- .../autotest/attrs-multiline/expected.marko | 14 ++++---- .../attrs-over-80-chars/expected.marko | 13 ++++---- .../autotest/max-line-length/expected.marko | 10 +++--- 9 files changed, 63 insertions(+), 53 deletions(-) diff --git a/package-lock.json b/package-lock.json index eff39912..31e1cb23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6964,7 +6964,7 @@ }, "multimatch": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz", "integrity": "sha1-nHkGoi+0wCkZ4vX3UWG0zb1LKis=", "dev": true, "requires": { diff --git a/packages/prettyprint/package-lock.json b/packages/prettyprint/package-lock.json index 6b91dfae..29386210 100644 --- a/packages/prettyprint/package-lock.json +++ b/packages/prettyprint/package-lock.json @@ -5,13 +5,14 @@ "requires": true, "dependencies": { "marko": { - "version": "4.14.7", - "resolved": "https://registry.npmjs.org/marko/-/marko-4.14.7.tgz", - "integrity": "sha512-bIczDUfFZxpKySaYvLGkMuUuTGG5OhiQKyjRUXcE64GtoKpntGfjseUHRTKl3+AFgF7LC+fMWLLnIBHOt6R3wg==", + "version": "4.14.12", + "resolved": "https://registry.npmjs.org/marko/-/marko-4.14.12.tgz", + "integrity": "sha512-BLG+A8HkgpPYIR8/gG7smQyvnbw4EhpjTo/3TvB2U8v85eayMvw4lhAS+bfOYvqpDp36g9ASq5WrQLbg3+3rRQ==", "requires": { "app-module-path": "^2.2.0", "argly": "^1.0.0", "browser-refresh-client": "^1.0.0", + "camelcase": "^5.0.0", "char-props": "~0.1.5", "complain": "^1.3.0", "deresolve": "^1.1.2", @@ -39,7 +40,7 @@ "simple-sha1": "^2.1.0", "strip-json-comments": "^2.0.1", "try-require": "^1.2.1", - "warp10": "^1.0.0" + "warp10": "^2.0.1" }, "dependencies": { "app-module-path": { @@ -76,6 +77,11 @@ "resolved": "https://registry.npmjs.org/browser-refresh-client/-/browser-refresh-client-1.1.4.tgz", "integrity": "sha1-jl/4R1/h1UHSroH3oa6gWuIaYhc=" }, + "camelcase": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.0.0.tgz", + "integrity": "sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==" + }, "chai": { "version": "3.5.0", "resolved": "http://registry.npmjs.org/chai/-/chai-3.5.0.tgz", @@ -405,9 +411,9 @@ "integrity": "sha1-diIXzAbbJY7EiQihKY6LlRIejqI=" }, "warp10": { - "version": "1.3.6", - "resolved": "https://registry.npmjs.org/warp10/-/warp10-1.3.6.tgz", - "integrity": "sha512-7cijX+NprqPV+UGUZXZw1I15JFHPqoy65tNVvP6cL43Vlanpcm8hBYoQTuDYUHa5x90Bct4gHhRtqqOOkLhQkw==" + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/warp10/-/warp10-2.0.1.tgz", + "integrity": "sha512-nS1KG2RCVTWepfSitZKzL+HYiqqMJag06KtOJF/LwklrJWeJYRWHjMYpd6GXMt09ot+HIEj+Y4dmQNnNNE0Bjg==" }, "wordwrap": { "version": "1.0.0", diff --git a/packages/prettyprint/package.json b/packages/prettyprint/package.json index 1d1547f2..b5c1023f 100644 --- 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 index 63aa656a..8d809428 100644 --- 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 index e886835c..5345c682 100644 --- a/packages/prettyprint/test/autotest/argument-attr/expected.marko +++ b/packages/prettyprint/test/autotest/argument-attr/expected.marko @@ -9,13 +9,11 @@
${Hello}
~~~~~~~ div foo() -div [ - foo( +div foo( { aaaaaaaaaa: 1, bbbbbbbbbb: 2, cccccccccc: 3 }, aaaaaaaaaa, bbbbbbbbbb, cccccccccc ) - ] -- ${test} div -- ${Hello} \ No newline at end of file diff --git a/packages/prettyprint/test/autotest/attrs-multiline-nested/expected.marko b/packages/prettyprint/test/autotest/attrs-multiline-nested/expected.marko index c1ea89f6..9c9a4604 100644 --- 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 [ + 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 \ No newline at end of file + ] -- Hello World \ No newline at end of file diff --git a/packages/prettyprint/test/autotest/attrs-multiline/expected.marko b/packages/prettyprint/test/autotest/attrs-multiline/expected.marko index e413604a..a5b54e62 100644 --- 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 [ - data-foo="foo" - data-bar="bar" - data-hello="hello" - data-world="world" - class="my-class" - data-widget="my-really-awesome-weidget" - ] -- Hello World \ No newline at end of file + data-foo="foo" + data-bar="bar" + data-hello="hello" + data-world="world" + class="my-class" + data-widget="my-really-awesome-weidget" +] -- Hello World \ No newline at end of file diff --git a/packages/prettyprint/test/autotest/attrs-over-80-chars/expected.marko b/packages/prettyprint/test/autotest/attrs-over-80-chars/expected.marko index 38d4a5c1..838dfc87 100644 --- 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 [ - 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 \ No newline at end of file + 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 \ No newline at end of file diff --git a/packages/prettyprint/test/autotest/max-line-length/expected.marko b/packages/prettyprint/test/autotest/max-line-length/expected.marko index 65ea6b2c..406756ba 100644 --- 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}! \ No newline at end of file + class="super-duper-long__class-name" + data-test="test attribute data" + data-more="more attribute data" + style="display: inline;" + ] -- Hello ${data.name}! \ No newline at end of file