search

ni / javascript-styleguide

JavaScript and TypeScript Style Guide
MIT License
9 stars 9 forks source link

Avoid child elements in translation units #92

Open rajsite opened 2 years ago

rajsite commented 2 years ago

Elements in an angular template with the i18n attribute should not have child elements. For example:

👎 Incorrect code for the rule

<nimble-toggle-button i18n>
    <nimble-thumbtack-icon slot="start"></nimble-thumbtack-icon>
        Pin navigation
</nimble-toggle-button>

👍 Correct code for the rule

<nimble-toggle-button>
    <nimble-icon-thumbtack slot="start"></nimble-icon-thumbtack>
    <span i18n>Pin navigation</span>
</nimble-toggle-button>

Unfortunately, angular eslint does not have a rule for that yet, but there is an existing issue: https://github.com/angular-eslint/angular-eslint/issues/930

For more about why we want to avoid this behavior see this Skyline PR. This is also currently documented on the Angular Internationalization page,

jattasNI commented 1 year ago

One idea to fix this would be to write a custom script (not an ESLint plugin) that scans the extracted XLIFF/JSON strings and fails if it contains any HTML tags. Clients would call that CLI tool from their lint/build script.

Or we could contribute a custom rule in angular-eslint.