fix(eslint-plugin): properly handle computed literals for some rules (#…

…600)
angular-eslint · Aug 31, 2021 · fbd6ff7 · fbd6ff7
1 parent bdef8c7
commit fbd6ff7
Show file tree

Hide file tree

Showing 13 changed files with 643 additions and 436 deletions.
diff --git a/packages/eslint-plugin/docs/rules/no-input-prefix.md b/packages/eslint-plugin/docs/rules/no-input-prefix.md
@@ -55,54 +55,62 @@ class Test {}
 ```ts
 @Directive({
   outputs: [onCredit],
-  inputs: [onLevel, `test: on`, onFunction()],
-                    ~~~~~~~~~~
+  'inputs': [onLevel, `test: on`, onFunction()],
+                      ~~~~~~~~~~
 })
 class Test {}
 ```
 
 ```ts
 @Component({
-  'inputs': ['onTest: test', ...onArray],
-             ~~~~~~~~~~~~~~
+  ['inputs']: ['onTest: test', ...onArray],
+               ~~~~~~~~~~~~~~
 })
 class Test {}
 ```
 
 ```ts
-@Directive()
+@Directive({
+  [`inputs`]: ['onTest: test', ...onArray],
+               ~~~~~~~~~~~~~~
+})
+class Test {}
+```
+
+```ts
+@Component()
 class Test {
   @Input() on: EventEmitter<any> = new EventEmitter<{}>();
            ~~
 }
 ```
 
 ```ts
-@Component()
+@Directive()
 class Test {
   @Input() @Custom('on') 'onPrefix' = new EventEmitter<void>();
                          ~~~~~~~~~~
 }
 ```
 
 ```ts
-@Directive()
+@Component()
 class Test {
   @Custom() @Input(`on`) _on = getInput();
                    ~~~~
 }
 ```
 
 ```ts
-@Component()
+@Directive()
 class Test {
   @Input('onPrefix') _on = (this.subject$ as Subject<{on: boolean}>).pipe();
          ~~~~~~~~~~
 }
 ```
 
 ```ts
-@Directive()
+@Component()
 class Test {
   @Input('setter') set 'on-setter'() {}
                        ~~~~~~~~~~~

diff --git a/packages/eslint-plugin/docs/rules/no-input-rename.md b/packages/eslint-plugin/docs/rules/no-input-rename.md
@@ -60,16 +60,24 @@ class Test {}
 ```ts
 @Directive({
   outputs: ['abort'],
-  inputs: [boundary, `test: copy`, 'check: check'],
-                     ~~~~~~~~~~~~
+  'inputs': [boundary, `test: copy`, 'check: check'],
+                       ~~~~~~~~~~~~
 })
 class Test {}
 ```
 
 ```ts
 @Component({
-  'inputs': ['orientation: orientation'],
-             ~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ['inputs']: ['orientation: orientation'],
+               ~~~~~~~~~~~~~~~~~~~~~~~~~~
+})
+class Test {}
+```
+
+```ts
+@Directive({
+  [`inputs`]: ['orientation: orientation'],
+               ~~~~~~~~~~~~~~~~~~~~~~~~~~
 })
 class Test {}
 ```

diff --git a/packages/eslint-plugin/docs/rules/no-inputs-metadata-property.md b/packages/eslint-plugin/docs/rules/no-inputs-metadata-property.md
@@ -67,7 +67,7 @@ class Test {}
 ```
 
 ```ts
-@Component({
+@Directive({
   inputs: [],
   ~~~~~~~~~~
 })
@@ -77,16 +77,16 @@ class Test {}
 ```ts
 const test = [];
 @Component({
-  inputs: test,
-  ~~~~~~~~~~~~
+  'inputs': test,
+  ~~~~~~~~~~~~~~
 })
 class Test {}
 ```
 
 ```ts
-@Component({
-  inputs: undefined,
-  ~~~~~~~~~~~~~~~~~
+@Directive({
+  ['inputs']: undefined,
+  ~~~~~~~~~~~~~~~~~~~~~
 })
 class Test {}
 ```
@@ -96,9 +96,9 @@ function inputs() {
   return [];
 }
 
-@Directive({
-  'inputs': inputs(),
-  ~~~~~~~~~~~~~~~~~~
+@Component({
+  [`inputs`]: inputs(),
+  ~~~~~~~~~~~~~~~~~~~~
 })
 class Test {}
 ```

diff --git a/packages/eslint-plugin/docs/rules/no-pipe-impure.md b/packages/eslint-plugin/docs/rules/no-pipe-impure.md
@@ -56,8 +56,17 @@ class Test {}
 ```ts
 @Pipe({
   name: 'test',
-  'pure': !true
-  ~~~~~~~~~~~~~
+  ['pure']: !true
+  ~~~~~~~~~~~~~~~
+})
+class Test {}
+```
+
+```ts
+@Pipe({
+  name: 'test',
+  [`pure`]: false
+  ~~~~~~~~~~~~~~~
 })
 class Test {}
 ```
@@ -106,14 +115,14 @@ class Test {}
 
 ```ts
 @Pipe({
-  pure: !0,
+  'pure': !0,
 })
 class Test {}
 ```
 
 ```ts
 @Pipe({
-  pure: !!isPure(),
+  ['pure']: !!isPure(),
 })
 class Test {}
 ```
@@ -140,7 +149,7 @@ function isPure() {
 }
 
 @Pipe({
-  pure: isPure(),
+  [`pure`]: isPure(),
 })
 class Test {}
 ```

diff --git a/packages/eslint-plugin/docs/rules/use-component-view-encapsulation.md b/packages/eslint-plugin/docs/rules/use-component-view-encapsulation.md
@@ -44,7 +44,7 @@ class Test {}
 ```
 
 ```ts
-import { ViewEncapsulation } from '@angular/core';
+import type { ViewEncapsulation } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 @Component({
@@ -55,6 +55,30 @@ import { HttpClient } from '@angular/common/http';
 class Test {}
 ```
 
+```ts
+import { ViewEncapsulation } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-foo-bar',
+  ['encapsulation']: ViewEncapsulation.None
+                                       ~~~~
+})
+class Test {}
+```
+
+```ts
+import { ViewEncapsulation } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-foo-bar',
+  [`encapsulation`]: ViewEncapsulation.None
+                                       ~~~~
+})
+class Test {}
+```
+
 <br>
 
 ---
@@ -73,15 +97,15 @@ class Test {}
 
 ```ts
 @Component({
-  encapsulation: ViewEncapsulation.Native,
+  'encapsulation': ViewEncapsulation.Native,
   selector: 'app-foo-bar',
 })
 class Test {}
 ```
 
 ```ts
 @Component({
-  encapsulation: ViewEncapsulation.ShadowDom,
+  ['encapsulation']: ViewEncapsulation.ShadowDom,
 })
 class Test {}
 ```
@@ -92,7 +116,7 @@ function encapsulation() {
 }
 
 @Component({
-  encapsulation: encapsulation()
+  [`encapsulation`]: encapsulation()
 })
 class Test {}
 ```

diff --git a/packages/eslint-plugin/src/rules/no-inputs-metadata-property.ts b/packages/eslint-plugin/src/rules/no-inputs-metadata-property.ts
@@ -30,7 +30,7 @@ export default createESLintRule<Options, MessageIds>({
     return {
       [`${COMPONENT_OR_DIRECTIVE_CLASS_DECORATOR} ${metadataProperty(
         METADATA_PROPERTY_NAME,
-      )}`](node: TSESTree.PropertyNonComputedName) {
+      )}`](node: TSESTree.Property) {
         context.report({
           node,
           messageId: 'noInputsMetadataProperty',

diff --git a/packages/eslint-plugin/src/rules/no-pipe-impure.ts b/packages/eslint-plugin/src/rules/no-pipe-impure.ts
@@ -1,6 +1,6 @@
 import type { TSESTree } from '@typescript-eslint/experimental-utils';
 import { createESLintRule } from '../utils/create-eslint-rule';
-import { PIPE_CLASS_DECORATOR } from '../utils/selectors';
+import { metadataProperty, PIPE_CLASS_DECORATOR } from '../utils/selectors';
 import { getNodeToCommaRemoveFix } from '../utils/utils';
 
 type Options = [];
@@ -29,8 +29,10 @@ export default createESLintRule<Options, MessageIds>({
     const sourceCode = context.getSourceCode();
 
     return {
-      [`${PIPE_CLASS_DECORATOR} ObjectExpression > Property:matches([key.name='pure'], [key.value='pure']):matches([value.value=false], [value.operator='!'][value.argument.value=true])[computed=false]`](
-        node: TSESTree.Property & { parent: TSESTree.ObjectExpression },
+      [`${PIPE_CLASS_DECORATOR} ${metadataProperty(
+        'pure',
+      )}:matches([value.value=false], [value.operator='!'][value.argument.value=true])`](
+        node: TSESTree.Property,
       ) {
         context.report({
           node,

diff --git a/packages/eslint-plugin/src/rules/use-component-view-encapsulation.ts b/packages/eslint-plugin/src/rules/use-component-view-encapsulation.ts
@@ -1,6 +1,9 @@
 import type { TSESTree } from '@typescript-eslint/experimental-utils';
 import { createESLintRule } from '../utils/create-eslint-rule';
-import { COMPONENT_CLASS_DECORATOR } from '../utils/selectors';
+import {
+  COMPONENT_CLASS_DECORATOR,
+  metadataProperty,
+} from '../utils/selectors';
 import {
   getImportDeclarations,
   getImportRemoveFix,
@@ -35,7 +38,9 @@ export default createESLintRule<Options, MessageIds>({
     const sourceCode = context.getSourceCode();
 
     return {
-      [`${COMPONENT_CLASS_DECORATOR} Property:matches([key.name='encapsulation'], [key.value='encapsulation']) > MemberExpression[object.name='ViewEncapsulation'] > Identifier[name='None']`](
+      [`${COMPONENT_CLASS_DECORATOR} ${metadataProperty(
+        'encapsulation',
+      )} > MemberExpression[object.name='ViewEncapsulation'] > Identifier[name='None']`](
         node: TSESTree.Identifier & {
           parent: TSESTree.MemberExpression & { parent: TSESTree.Property };
         },