diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md index efefa677..10b564ae 100644 --- a/CHANGELOG.unreleased.md +++ b/CHANGELOG.unreleased.md @@ -1082,6 +1082,35 @@ sometimes{{nogaps}}areimportant {{name}} is your name ``` +#### Angular: Add formatting for `i18n` attributes ([#6695] by [@voithos]) + +Prettier will auto-wrap the contents of `i18n` attributes once they exceed the line length. + + +```html + +

+ Hello! +

+ + +

+ Hello! +

+ + +

+ Hello! +

+``` + #### JavaScript: Break arrays of arrays/objects if each element has more than one element/property ([#6694] by [@sosukesuzuki]) @@ -1177,6 +1206,7 @@ new Map([ [#6646]: https://github.com/prettier/prettier/pull/6646 [#6666]: https://github.com/prettier/prettier/pull/6666 [#6673]: https://github.com/prettier/prettier/pull/6673 +[#6695]: https://github.com/prettier/prettier/pull/6695 [#6694]: https://github.com/prettier/prettier/pull/6694 [@brainkim]: https://github.com/brainkim [@duailibe]: https://github.com/duailibe @@ -1194,3 +1224,4 @@ new Map([ [@selvazhagan]: https://github.com/selvazhagan [@chadian]: https://github.com/chadian [@kaicataldo]: https://github.com/kaicataldo +[@voithos]: https://github.com/voithos diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js index 9a082ba4..ba073a41 100644 --- a/src/language-html/printer-html.js +++ b/src/language-html/printer-html.js @@ -1033,6 +1033,11 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) { * bindon-target="angularExpression" */ const ngExpressionBindingPatterns = ["^\\[.+\\]$", "^bind(on)?-"]; + /** + * i18n="longDescription" + * i18n-attr="longDescription" + */ + const ngI18nPatterns = ["^i18n(-.+)?$"]; if (isKeyMatched(ngStatementBindingPatterns)) { return printMaybeHug(ngTextToDoc(getValue(), { parser: "__ng_action" })); @@ -1042,6 +1047,10 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) { return printMaybeHug(ngTextToDoc(getValue(), { parser: "__ng_binding" })); } + if (isKeyMatched(ngI18nPatterns)) { + return printExpand(fill(getTextValueParts(node, getValue()))); + } + if (isKeyMatched(ngDirectiveBindingPatterns)) { return printMaybeHug( ngTextToDoc(getValue(), { parser: "__ng_directive" }) diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap index 94383d6d..c305f1f7 100644 --- a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap +++ b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap @@ -182,6 +182,15 @@ printWidth: 80 {{ valid }} baz' + i18n="Normal i18n text" + i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n-test="Attribute i18n text" + i18n-test="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" i18n="This is yet another very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n="@@customId" + i18n="Some description@@customIdWithDescription" + i18n="some meaning|Some description@@customIdWithDescription" + i18n="some meaning|Some very long internationalization description text exceeding the configured print width@@customIdWithDescription" > =====================================output===================================== @@ -308,6 +317,31 @@ printWidth: 80 {{ valid }} baz" + i18n="Normal i18n text" + i18n=" + This is a very long internationalization description text, exceeding the + configured print width, but could easily be formatted + " + i18n-test="Attribute i18n text" + i18n-test=" + This is a very long internationalization description text, exceeding the + configured print width, but could easily be formatted + " + i18n=" + This is a very long internationalization description text, exceeding the + configured print width, but could easily be formatted + " + i18n=" + This is yet another very long internationalization description text, + exceeding the configured print width, but could easily be formatted + " + i18n="@@customId" + i18n="Some description@@customIdWithDescription" + i18n="some meaning|Some description@@customIdWithDescription" + i18n=" + some meaning|Some very long internationalization description text exceeding + the configured print width@@customIdWithDescription + " > ================================================================================ @@ -420,6 +454,15 @@ trailingComma: "es5" {{ valid }} baz' + i18n="Normal i18n text" + i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n-test="Attribute i18n text" + i18n-test="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" i18n="This is yet another very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n="@@customId" + i18n="Some description@@customIdWithDescription" + i18n="some meaning|Some description@@customIdWithDescription" + i18n="some meaning|Some very long internationalization description text exceeding the configured print width@@customIdWithDescription" > =====================================output===================================== @@ -546,6 +589,31 @@ trailingComma: "es5" {{ valid }} baz" + i18n="Normal i18n text" + i18n=" + This is a very long internationalization description text, exceeding the + configured print width, but could easily be formatted + " + i18n-test="Attribute i18n text" + i18n-test=" + This is a very long internationalization description text, exceeding the + configured print width, but could easily be formatted + " + i18n=" + This is a very long internationalization description text, exceeding the + configured print width, but could easily be formatted + " + i18n=" + This is yet another very long internationalization description text, + exceeding the configured print width, but could easily be formatted + " + i18n="@@customId" + i18n="Some description@@customIdWithDescription" + i18n="some meaning|Some description@@customIdWithDescription" + i18n=" + some meaning|Some very long internationalization description text exceeding + the configured print width@@customIdWithDescription + " > ================================================================================ @@ -657,6 +725,15 @@ printWidth: 1 {{ valid }} baz' + i18n="Normal i18n text" + i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n-test="Attribute i18n text" + i18n-test="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" i18n="This is yet another very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n="@@customId" + i18n="Some description@@customIdWithDescription" + i18n="some meaning|Some description@@customIdWithDescription" + i18n="some meaning|Some very long internationalization description text exceeding the configured print width@@customIdWithDescription" > =====================================output===================================== @@ -1023,6 +1100,123 @@ printWidth: 1 }} baz" + i18n=" + Normal + i18n + text + " + i18n=" + This + is + a + very + long + internationalization + description + text, + exceeding + the + configured + print + width, + but + could + easily + be + formatted + " + i18n-test=" + Attribute + i18n + text + " + i18n-test=" + This + is + a + very + long + internationalization + description + text, + exceeding + the + configured + print + width, + but + could + easily + be + formatted + " + i18n=" + This + is + a + very + long + internationalization + description + text, + exceeding + the + configured + print + width, + but + could + easily + be + formatted + " + i18n=" + This + is + yet + another + very + long + internationalization + description + text, + exceeding + the + configured + print + width, + but + could + easily + be + formatted + " + i18n=" + @@customId + " + i18n=" + Some + description@@customIdWithDescription + " + i18n=" + some + meaning|Some + description@@customIdWithDescription + " + i18n=" + some + meaning|Some + very + long + internationalization + description + text + exceeding + the + configured + print + width@@customIdWithDescription + " > ================================================================================ @@ -1135,6 +1329,15 @@ printWidth: 80 {{ valid }} baz' + i18n="Normal i18n text" + i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n-test="Attribute i18n text" + i18n-test="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" i18n="This is yet another very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n="@@customId" + i18n="Some description@@customIdWithDescription" + i18n="some meaning|Some description@@customIdWithDescription" + i18n="some meaning|Some very long internationalization description text exceeding the configured print width@@customIdWithDescription" > =====================================output===================================== @@ -1261,6 +1464,31 @@ printWidth: 80 {{ valid }} baz" + i18n="Normal i18n text" + i18n=" + This is a very long internationalization description text, exceeding the + configured print width, but could easily be formatted + " + i18n-test="Attribute i18n text" + i18n-test=" + This is a very long internationalization description text, exceeding the + configured print width, but could easily be formatted + " + i18n=" + This is a very long internationalization description text, exceeding the + configured print width, but could easily be formatted + " + i18n=" + This is yet another very long internationalization description text, + exceeding the configured print width, but could easily be formatted + " + i18n="@@customId" + i18n="Some description@@customIdWithDescription" + i18n="some meaning|Some description@@customIdWithDescription" + i18n=" + some meaning|Some very long internationalization description text exceeding + the configured print width@@customIdWithDescription + " > ================================================================================ @@ -1373,6 +1601,15 @@ printWidth: 80 {{ valid }} baz' + i18n="Normal i18n text" + i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n-test="Attribute i18n text" + i18n-test="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" i18n="This is yet another very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n="@@customId" + i18n="Some description@@customIdWithDescription" + i18n="some meaning|Some description@@customIdWithDescription" + i18n="some meaning|Some very long internationalization description text exceeding the configured print width@@customIdWithDescription" > =====================================output===================================== @@ -1499,6 +1736,31 @@ printWidth: 80 {{ valid }} baz" + i18n="Normal i18n text" + i18n=" + This is a very long internationalization description text, exceeding the + configured print width, but could easily be formatted + " + i18n-test="Attribute i18n text" + i18n-test=" + This is a very long internationalization description text, exceeding the + configured print width, but could easily be formatted + " + i18n=" + This is a very long internationalization description text, exceeding the + configured print width, but could easily be formatted + " + i18n=" + This is yet another very long internationalization description text, + exceeding the configured print width, but could easily be formatted + " + i18n="@@customId" + i18n="Some description@@customIdWithDescription" + i18n="some meaning|Some description@@customIdWithDescription" + i18n=" + some meaning|Some very long internationalization description text exceeding + the configured print width@@customIdWithDescription + " > ================================================================================ diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html index 291533d0..1fa9c389 100644 --- a/tests/html_angular/attributes.component.html +++ b/tests/html_angular/attributes.component.html @@ -98,4 +98,13 @@ {{ valid }} baz' + i18n="Normal i18n text" + i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n-test="Attribute i18n text" + i18n-test="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted" i18n="This is yet another very long internationalization description text, exceeding the configured print width, but could easily be formatted" + i18n="@@customId" + i18n="Some description@@customIdWithDescription" + i18n="some meaning|Some description@@customIdWithDescription" + i18n="some meaning|Some very long internationalization description text exceeding the configured print width@@customIdWithDescription" >