New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(eslint-plugin): [no-inputs-metadata-property] do not report on di… #1248
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'; | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. a short comment similar to https://github.com/angular-eslint/angular-eslint/pull/1231/files#diff-34e0047dec14410dccd7fee53b69b0edeb6c62c8b6d4480a4d6144e95aa323b5 might be useful. |
||
if ( | ||
(ASTUtils.isLiteral(ancestorMayBeHostDirectiveAPI.key) && | ||
ancestorMayBeHostDirectiveAPI.key.value === | ||
hostDirectiveAPIPropertyName) || | ||
(TSESLintASTUtils.isIdentifier(ancestorMayBeHostDirectiveAPI.key) && | ||
ancestorMayBeHostDirectiveAPI.key.name === | ||
hostDirectiveAPIPropertyName) | ||
) { | ||
return; | ||
} | ||
} | ||
|
||
context.report({ | ||
node, | ||
messageId: 'noInputsMetadataProperty', | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 | ||
*/ | ||
` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. a short commend similar to https://github.com/angular-eslint/angular-eslint/pull/1231/files#diff-1bbea1d57ed1e6d5683a8bc3bed3652cf91b699b8383932dac9422cf721f5bed might be useful. |
||
@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 = [ | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
question: I see a difference between the implementation here https://github.com/angular-eslint/angular-eslint/pull/1231/files#diff-34e0047dec14410dccd7fee53b69b0edeb6c62c8b6d4480a4d6144e95aa323b5. What's the reason for it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Only a slight difference 😄 . So in
no-input-rename
, the targeted selector isSelectors.INPUTS_METADATA_PROPERTY_LITERAL
, while the targeted selector for this rule is${Selectors.COMPONENT_OR_DIRECTIVE_CLASS_DECORATOR} ${Selectors.metadataProperty(METADATA_PROPERTY_NAME)}
. Although either of the two selectors could work for this rule, the main reason why I kept the latter selector is because when we do report a lint violation, we want to highlight theinputs
keyword like shown in the invalid test cases. When using the former selector, we'd end up highlighting the value bound toinputs
, which I think is less helpful.