Codelyzer: no-input-rename should be configurabile

[lazarljubenovic]

Sometimes you want to align an input name with a common, well-known HTML attribute, such as aria-. There are two ways I see this can be configured to allow some (sensible) freedom.

Allow a certain prefix

We could allow users to list prefixes (such as "aria") in their config file which would allow all @Input('aria-*') renames.

Allow change to kebab-case

This might make even more sense, and my vote goes to this one (unless we decide to do both). We allow renaming the input when all it does is changing from camelCase to kebab-case:

@Input('aria-label') ariaLabel: string; // should be allowed with this config

This seems like a pretty sensible solution to me and doesn't clash with the rationale behind the rule:

Two names for the same property (one private, one public) is inherently confusing.

[mgechev]

Here's another related issue https://github.com/mgechev/codelyzer/issues/224.

Allow change to kebab-case

Since the Angular compiler is case sensitive and the recommendation for naming attributes (from directive selectors) is to use camelCase literals, I'm not sure we should go this way.

Maybe, developers can provide key-value pairs of propertyName: rename as a whitelist. Ones the property name matches the propertyName value and the new name matches the rename, we can ignore the rule. This covers both cases from above with a bit more explicitness.

What do you think?

[lazarljubenovic]

Personally, I dislike too much lint configuration. If you think you have a valid reason to break the rule a lot, you should just disable it in my opinion.

Whitelisting renames is pretty much disabling a next line with a source code comment. Otherwise it would require changing the lint configuration a lot during development, which shouldn't be the case. Config should stay more or less the same and not change frequently.

[mgechev]

Whitelisting renames is pretty much disabling a next line with a source code comment. Otherwise it would require changing the lint configuration a lot during development, which shouldn't be the case. Config should stay more or less the same and not change frequently.

Yep, I agree. Let's keep the rule as it is for now.

[MickL]

I think it should be configurable, too. Best example is a component having the input class which sets class in html. But variable class is reserved.

Component.ts:

@Input() src: string;
@Input('class') classes: string;
@Input() alt = '';

Component.html

<img [src]="src" [class]="classes" [alt]="alt">

Usage.html

<app-svg-icon src="assets/img/icon/sandwatch.svg" alt="" class="svg-icon icon icon-big"></app-svg-icon>

Also @lazarljubenovic made a good frequent example of converting html's kebab-case to camelCase