From 4e46f92b8648c7f25de62bfaf4368aa3f2e588d9 Mon Sep 17 00:00:00 2001
From: Zaven Muradyan <voithos@google.com>
Date: Fri, 25 Oct 2019 12:10:43 -0700
Subject: [PATCH] Add formatting for i18n attributes. (#6695)

* Add formatting for i18n attributes.

Previously, Prettier would largely ignore i18n attributes, not even
wrapping their content, which wasn't ideal since i18n descriptive text
can sometimes get long.

After this, Prettier will auto-wrap the contents of i18n attributes once
they exceed the line length.

Fixes #5875.
---
 CHANGELOG.unreleased.md                       |  31 +++
 src/language-html/printer-html.js             |   9 +
 .../__snapshots__/jsfmt.spec.js.snap          | 262 ++++++++++++++++++
 tests/html_angular/attributes.component.html  |   9 +
 4 files changed, 311 insertions(+)

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.
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<h1 i18n="This is a very long internationalization description text, exceeding the configured print width">
+  Hello!
+</h1>
+
+<!-- Output (Prettier stable) -->
+<h1
+  i18n="This is a very long internationalization description text, exceeding the configured print width"
+>
+  Hello!
+</h1>
+
+<!-- Output (Prettier master) -->
+<h1
+  i18n="
+    This is a very long internationalization description text, exceeding the
+    configured print width
+  "
+>
+  Hello!
+</h1>
+```
+
 #### JavaScript: Break arrays of arrays/objects if each element has more than one element/property ([#6694] by [@sosukesuzuki])
 
 <!-- prettier-ignore -->
@@ -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"
 ></div>
 
 =====================================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
+  "
 ></div>
 
 ================================================================================
@@ -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"
 ></div>
 
 =====================================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
+  "
 ></div>
 
 ================================================================================
@@ -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"
 ></div>
 
 =====================================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
+  "
 ></div>
 
 ================================================================================
@@ -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"
 ></div>
 
 =====================================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
+  "
 ></div>
 
 ================================================================================
@@ -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"
 ></div>
 
 =====================================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
+  "
 ></div>
 
 ================================================================================
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"
 ></div>