fix(eslint-plugin): [no-inputs-metadata-property] do not report on di…

…rective composition API (#1248)
angular-eslint · Jan 14, 2023 · 539cf9f · 539cf9f
1 parent b870123
commit 539cf9f
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 1 deletion.
diff --git a/packages/eslint-plugin/docs/rules/no-inputs-metadata-property.md b/packages/eslint-plugin/docs/rules/no-inputs-metadata-property.md
@@ -489,6 +489,105 @@ class Test {}
 class Test {}
 ```
 
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/no-inputs-metadata-property": [
+      "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-inputs-metadata-property": [
+      "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-inputs-metadata-property": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```ts
+@Component({
+  selector: 'qx-menuitem',
+  ['hostDirectives']: [{
+    directive: CdkMenuItem,
+    inputs: ['cdkMenuItemDisabled: disabled'],
+  }]
+})
+class Test {}
+```
+
 </details>
 
 <br>
diff --git a/packages/eslint-plugin/src/rules/no-inputs-metadata-property.ts b/packages/eslint-plugin/src/rules/no-inputs-metadata-property.ts
@@ -1,5 +1,6 @@
-import { Selectors } from '@angular-eslint/utils';
+import { ASTUtils, Selectors } from '@angular-eslint/utils';
 import type { TSESTree } from '@typescript-eslint/utils';
+import { ASTUtils as TSESLintASTUtils } from '@typescript-eslint/utils';
 import { createESLintRule } from '../utils/create-eslint-rule';
 
 type Options = [];
@@ -29,6 +30,30 @@ export default createESLintRule<Options, MessageIds>({
       } ${Selectors.metadataProperty(METADATA_PROPERTY_NAME)}`](
         node: TSESTree.Property,
       ) {
+        /**
+         * Angular v15 introduced the directive composition API: https://angular.io/guide/directive-composition-api
+         * Using host directive inputs using this API is not a bad practice and should not be reported
+         */
+        const ancestorMayBeHostDirectiveAPI = node.parent?.parent?.parent;
+
+        if (
+          ancestorMayBeHostDirectiveAPI &&
+          ASTUtils.isProperty(ancestorMayBeHostDirectiveAPI)
+        ) {
+          const hostDirectiveAPIPropertyName = 'hostDirectives';
+
+          if (
+            (ASTUtils.isLiteral(ancestorMayBeHostDirectiveAPI.key) &&
+              ancestorMayBeHostDirectiveAPI.key.value ===
+                hostDirectiveAPIPropertyName) ||
+            (TSESLintASTUtils.isIdentifier(ancestorMayBeHostDirectiveAPI.key) &&
+              ancestorMayBeHostDirectiveAPI.key.name ===
+                hostDirectiveAPIPropertyName)
+          ) {
+            return;
+          }
+        }
+
         context.report({
           node,
           messageId: 'noInputsMetadataProperty',

diff --git a/packages/eslint-plugin/tests/rules/no-inputs-metadata-property/cases.ts b/packages/eslint-plugin/tests/rules/no-inputs-metadata-property/cases.ts
@@ -45,6 +45,41 @@ export const valid = [
     })
     class Test {}
   `,
+  /**
+   * Using 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 {}
+ `,
 ];
 
 export const invalid = [