fix(eslint-plugin): [no-input-rename] do not report on directive comp…

…osition API
angular-eslint · Nov 24, 2022 · 8c3aa8a · 8c3aa8a
1 parent 299a0c2
commit 8c3aa8a
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 0 deletions.
diff --git a/packages/eslint-plugin/docs/rules/no-input-rename.md b/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 {

diff --git a/packages/eslint-plugin/src/rules/no-input-rename.ts b/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(':');

diff --git a/packages/eslint-plugin/tests/rules/no-input-rename/cases.ts b/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 {