[Angular] Format values of i18n attributes

[voithos]

Prettier 1.16.4
Playground link

--parser angular

Input:

<h1 i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted">
  Hello!
</h1>
<my-custom-component customAttr="meep" i81n-customAttr="This is a very long attribute-based internationalization description text, which also exceeds the configured print width">
</my-custom-component>

Output:

<h1
  i18n="This is a very long internationalization description text, exceeding the configured print width, but could easily be formatted"
>
  Hello!
</h1>
<my-custom-component
  customAttr="meep"
  i81n-customAttr="This is a very long attribute-based internationalization description text, which also exceeds the configured print width"
>
</my-custom-component>

Expected behavior:
Currently, Prettier doesn't wrap the i18n attribute content. Based on discussions in #5479 and #5482, I think this would be a good candidate for formatting, since the i18n content is well-known, and tends to be long (and thus is more of a pain when unformatted).

Documentation on Angular's i18n attributes, for reference: https://angular.io/guide/i18n

Ideally, I'd want output similar to either this (with a continuation indent):

<h1
  i18n="This is a very long internationalization description text, exceeding the
    configured print width, but could easily be formatted"
>
  Hello!
</h1>
<my-custom-component
  customAttr="meep"
  i81n-customAttr="This is a very long attribute-based internationalization
    description text, which also exceeds the configured print width"
>
</my-custom-component>

Or this (with an alignment to the opening quote, "):

<h1
  i18n="This is a very long internationalization description text, exceeding the
        configured print width, but could easily be formatted"
>
  Hello!
</h1>
<my-custom-component
  customAttr="meep"
  i81n-customAttr="This is a very long attribute-based internationalization
                   description text, which also exceeds the configured print
                   width"
>
</my-custom-component>

I'd somewhat prefer the continuation indent instead of the quote alignment, as it minimizes wasted horizontal space and seems to be more consistent with how Prettier formats long sequences of attributes.

Does this sound reasonable? If so, I may try sending a PR.

[j-f1]

Not an Angular user, so take this with a grain of salt, but how about this?

<h1
  i18n="
    This is a very long internationalization description text, exceeding the
    configured print width, but could easily be formatted
  "
>
  Hello!
</h1>
<my-custom-component
  customAttr="meep"
  i81n-customAttr="
    This is a very long attribute-based internationalization
    description text, which also exceeds the configured print width
  "
>
</my-custom-component>

[voithos]

That should work fine as well - basically, any kind of auto-formatting would be better than the current behavior (which does nothing). Does Prettier already have a precedent of treating attribute values that way? If so, that should be fine - otherwise, I think I'd prefer the first example (with the continuation indent).

[voithos]

Just to confirm, does this sound good as-is (i.e. is it ready for a PR) or does it need more discussion?

[j-f1]

Feel free to open a PR!

[krilllind]

Hi, we recently started using prettier in our project and I think that this PR is missing a key point...

If you for example already have a translation for something like:

<div i18n-prop="Special-property|This is a special property with much important information@@MyTextId" prop="My Text"></div>

Then the result translation would be something like:

{
  "MyTextId": "My translated text value"
}

But with this change, running prettier would format my translation to something like:

<div 
  i18n="
    Special-property|This is a special property with much important information@@MyTextId
  "
  prop="My Text"
>
</div>

And my resulting translation id would now be changed to:

{
  "MyTextId\n  ": ""
}

Beasure this is not the same translation id anymore, the xi18n angular cli command will remove my old translation (because there is no reference to it anymore) and insert the new translation id with an empty value.

I think that everything that has to do with translations should be left "as is" to prevent falsy results like this.

Any chance we can change this back to not break the ending " into a new line?

(result could be something like this?)

<div 
  i18n="
    Special-property|This is a special property with much
    important information@@MyTextId"
  prop="My Text"
>
</div>

[voithos]

Thanks for the fix! I'm wondering, though, if this is a bug in the Angular compiler? Intuitively, I wouldn't expect the @@ to include the whitespace that follows. From what I can tell, the XLIFF spec discourages whitespace in IDs anyway.