fix(eslint-plugin): [no-input-rename] do not report on directive composition API (#1231)

Author: JamesHenry

packages/eslint-plugin/docs/rules/no-input-rename.md

@@ -655,6 +655,105 @@ class Test {}
 
 #### ✅ Valid Code
 
+```ts
+@Component({
+ selector: 'qx-menuitem',
+ hostDirectives: [{
+ directive: CdkMenuItem,
+ inputs: ['cdkMenuItemDisabled: disabled'],
+ }]
+})
+class Test {}
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+ "rules": {
+ "@angular-eslint/no-input-rename": [
+ "error"
+ ]
+ }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```ts
+@Component({
+ selector: 'qx-menuitem',
+ 'hostDirectives': [{
+ directive: CdkMenuItem,
+ inputs: ['cdkMenuItemDisabled: disabled'],
+ }]
+})
+class Test {}
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+ "rules": {
+ "@angular-eslint/no-input-rename": [
+ "error"
+ ]
+ }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```ts
+@Component({
+ selector: 'qx-menuitem',
+ ['hostDirectives']: [{
+ directive: CdkMenuItem,
+ inputs: ['cdkMenuItemDisabled: disabled'],
+ }]
+})
+class Test {}
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+ "rules": {
+ "@angular-eslint/no-input-rename": [
+ "error"
+ ]
+ }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
 ```ts
 @Component({})
 class Test {

packages/eslint-plugin/src/rules/no-input-rename.ts

@@ -139,6 +139,28 @@ export default createESLintRule<Options, MessageIds>({
  [Selectors.INPUTS_METADATA_PROPERTY_LITERAL](
  node: TSESTree.Literal | TSESTree.TemplateElement,
  ) {
+ const ancestorMaybeHostDirectiveAPI =
+ node.parent?.parent?.parent?.parent?.parent;
+ if (
+ ancestorMaybeHostDirectiveAPI &&
+ ASTUtils.isProperty(ancestorMaybeHostDirectiveAPI)
+ ) {
+ /**
+ * Angular v15 introduced the directive composition API: https://angular.io/guide/directive-composition-api
+ * Renaming host directive inputs using this API is not a bad practice and should not be reported
+ */
+ const hostDirectiveAPIPropertyName = 'hostDirectives';
+ if (
+ (ASTUtils.isLiteral(ancestorMaybeHostDirectiveAPI.key) &&
+ ancestorMaybeHostDirectiveAPI.key.value ===
+ hostDirectiveAPIPropertyName) ||
+ (TSESLintASTUtils.isIdentifier(ancestorMaybeHostDirectiveAPI.key) &&
+ ancestorMaybeHostDirectiveAPI.key.name ===
+ hostDirectiveAPIPropertyName)
+ ) {
+ return;
+ }
+ }
  const [propertyName, aliasName] = withoutBracketsAndWhitespaces(
  ASTUtils.getRawText(node),
  ).split(':');

packages/eslint-plugin/tests/rules/no-input-rename/cases.ts

@@ -50,6 +50,41 @@ export const valid = [
  })
  class Test {}
  `,
+ /**
+ * Renaming inputs when using the directive composition API is not a bad practice
+ * https://angular.io/guide/directive-composition-api
+ * https://www.youtube.com/watch?v=EJJwyyjsRGs
+ */
+ `
+ @Component({
+ selector: 'qx-menuitem',
+ hostDirectives: [{
+ directive: CdkMenuItem,
+ inputs: ['cdkMenuItemDisabled: disabled'],
+ }]
+ })
+ class Test {}
+ `,
+ `
+ @Component({
+ selector: 'qx-menuitem',
+ 'hostDirectives': [{
+ directive: CdkMenuItem,
+ inputs: ['cdkMenuItemDisabled: disabled'],
+ }]
+ })
+ class Test {}
+ `,
+ `
+ @Component({
+ selector: 'qx-menuitem',
+ ['hostDirectives']: [{
+ directive: CdkMenuItem,
+ inputs: ['cdkMenuItemDisabled: disabled'],
+ }]
+ })
+ class Test {}
+ `,
  `
  @Component({})
  class Test {