Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[i18n] option to check content of tag with i18n #930

Closed
superole opened this issue Feb 24, 2022 · 1 comment · Fixed by #1795
Closed

[i18n] option to check content of tag with i18n #930

superole opened this issue Feb 24, 2022 · 1 comment · Fixed by #1795
Labels
package: eslint-plugin-template Angular Template rules triage This issue needs to be looked at and categorized by a maintainer

Comments

@superole
Copy link

superole commented Feb 24, 2022 •
edited

Description and reproduction of the issue
I would like to propose that you include an option to the i18n rule.

This option should make the rule check the content of a tag that has the i18n attribute set, and report if the content is not plain text (eg. it contains markup).

I recently discovered that a misplaced i18n attribute caused a bug in an application, because the markup content in the tag was replaced with plain text.

I try to enforce the convention that markup (and application logic) should not be mixed with i18n, and I would like this rule to help me with that. Therefore it is also my opinion that this new option should be enabled by default.

{
  "rules": {
    "@angular-eslint/template/i18n": ["error"]
  }
}

OR

{
  "rules": {
    "@angular-eslint/template/i18n": ["error",{"newOptionName": "true"}]
  }
}

Invalid code for this rule

<div i18n="@@mainHeader">
  <h1>Hello i18n!</h1>
</div>

OR

<!-- this was changed from a text-button to an icon with a tooltip, but we forgot to remove the i18n for the button text -->
<div i18n="@@buttonText" i18n-title="@@buttonTooltip" title="Enable magic">
  <fa-icon [icon]="['fas', 'magic']"></fa-icon>
</div>

Valid code for this rule

<div>
  <h1 i18n="@@mainHeader">Hello i18n!</h1>
</div>

OR

<div i18n-title="@@buttonTooltip" title="Enable magic">
  <fa-icon [icon]="['fas', 'magic']"></fa-icon>
</div>
@superole superole added package: eslint-plugin-template Angular Template rules triage This issue needs to be looked at and categorized by a maintainer labels Feb 24, 2022
@rajsite
Copy link

rajsite commented May 31, 2022

We ran into a very similar situation using web components with Angular and slotted content:

invalid:

<my-button i18n>
    <my-icon slot="icon"></my-icon>
    Hello World
</my-button>

valid:

<my-button>
    <my-icon slot="icon"></my-icon>
    <span i18n>Hello World</span>
</my-button>

The invalid case resulted in the icon html being considered part of the localized string which isn't what we really wanted and I expect few do.

@rajsite rajsite mentioned this issue Jun 2, 2022
Open
@m-akinc m-akinc mentioned this issue May 1, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
package: eslint-plugin-template Angular Template rules triage This issue needs to be looked at and categorized by a maintainer
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(eslint-plugin-template): [i18n] add allowMarkupInContent option m-akinc/angular-eslint
2 participants
@superole @rajsite