feat(eslint-plugin): add new avoid-mapping-component-store-selectors rule (#4026)

Closes #3940

Author: timdeschryver

modules/eslint-plugin/scripts/generate-docs.ts

@@ -1,4 +1,4 @@
-import { readFileSync, writeFileSync } from 'fs';
+import { readFileSync, writeFileSync, existsSync } from 'fs';
 import * as path from 'path';
 import { format, resolveConfig } from 'prettier';
 import { rules } from '../src/rules';
@@ -9,6 +9,9 @@ const RULES_PATH = './projects/ngrx.io/content/guide/eslint-plugin/rules';
 
 for (const [ruleName, { meta }] of Object.entries(rules)) {
   const docPath = path.join(RULES_PATH, `${ruleName}.md`);
+  if (!existsSync(docPath)) {
+    writeFileSync(docPath, ``);
+  }
   const doc = readFileSync(docPath, 'utf-8');
   const docContent = doc.substring(
     doc.indexOf(PLACEHOLDER) + PLACEHOLDER.length

modules/eslint-plugin/spec/rules/component-store/avoid-mapping-component-store-selectors.spec.ts

@@ -0,0 +1,140 @@
+import type {
+  ESLintUtils,
+  TSESLint,
+} from '@typescript-eslint/experimental-utils';
+import { fromFixture } from 'eslint-etc';
+import * as path from 'path';
+import rule, {
+  messageId,
+} from '../../../src/rules/component-store/avoid-mapping-component-store-selectors';
+import { ruleTester } from '../../utils';
+
+type MessageIds = ESLintUtils.InferMessageIdsTypeFromRule<typeof rule>;
+type Options = ESLintUtils.InferOptionsTypeFromRule<typeof rule>;
+type RunTests = TSESLint.RunTests<MessageIds, Options>;
+
+const validConstructor: () => RunTests['valid'] = () => [
+  `
+import { ComponentStore } from '@ngrx/component-store'
+
+class Ok extends ComponentStore<MoviesState> {
+  movies$ = this.select((state) => state.movies);
+  firstMovie$ = this.select(this.movies$, (movies) => movies[0]);
+
+  constructor() {
+    super({ movies: [] })
+  }
+}`,
+  `
+import { ComponentStore } from '@ngrx/component-store'
+
+class Ok {
+  readonly movies$ = this.store.select((state) => state.movies);
+  firstMovie$ = this.store.select(this.movies$, (movies) => movies[0]);
+
+  constructor(private readonly store: ComponentStore<MoviesState>) {}
+}`,
+  `
+import { ComponentStore } from '@ngrx/component-store'
+
+class Ok {
+  readonly movies$: Observable<unknown>
+  readonly firstMovie$: Observable<unknown>
+
+  constructor(private customStore: ComponentStore<MoviesState>) {
+    const movies = customStore.select((state) => state.movies);
+    this.firstMovie$ = customStore.select(movies, (movies) => movies[0]);
+    
+    this.movies$ = this.customStore.select((state) => state.movies);
+    this.firstMovie$ = this.customStore.select(this.movies$, (movies) => movies[0]);
+  }
+}`,
+  `
+import { ComponentStore } from '@ngrx/component-store'
+
+export class UserStore extends ComponentStore<UserState> {
+  loggedInUser$ = this.select((state) => state.loggedInUser);
+  name$ = this.select(this.loggedInUser$, (user) => user.name);
+}
+`,
+];
+
+const validInject: () => RunTests['valid'] = () => [
+  `
+import { inject } from '@angular/core'
+import { ComponentStore } from '@ngrx/component-store'
+
+class Ok {
+  readonly store = inject(ComponentStore<MoviesState>)
+  readonly movies$ = this.store.select((state) => state.movies)
+  readonly firstMovie$ = this.store.select(this.movies$, (movies) => movies[0]);
+}`,
+];
+
+const invalidConstructor: () => RunTests['invalid'] = () => [
+  fromFixture(`
+import { ComponentStore } from '@ngrx/component-store'
+
+class NotOk extends ComponentStore<MoviesState> {
+  movies$ = this.select((state) => state.movies).pipe(map((movies) => movies))
+                                                      ~~~~~~~~~~~~~~~~~~~~~~~ [${messageId}]
+
+  constructor() {
+    super({ movies: [] })
+  }
+}`),
+  fromFixture(`
+import { ComponentStore } from '@ngrx/component-store'
+
+class NotOk {
+  readonly movies$ = this.customStore.select((state) => state.movies).pipe(
+      filter(Boolean), 
+      map((movies) => movies)
+      ~~~~~~~~~~~~~~~~~~~~~~~ [${messageId}]
+  )
+
+  constructor(private readonly customStore: ComponentStore<MoviesState>) {}
+}`),
+  fromFixture(`
+import { ComponentStore } from '@ngrx/component-store'
+
+class NotOk {
+  readonly movies$: Observable<unknown>
+
+  constructor(private customStore: ComponentStore<MoviesState>) {
+    this.movies$ = customStore.select((state) => state.movies).pipe(map((movies) => movies), filter(Boolean));
+                                                                    ~~~~~~~~~~~~~~~~~~~~~~~ [${messageId}]
+    this.movies$ = this.customStore.select((state) => state.movies).pipe(map((movies) => movies));
+                                                                         ~~~~~~~~~~~~~~~~~~~~~~~ [${messageId}]
+  }
+}`),
+  fromFixture(`
+import { ComponentStore } from '@ngrx/component-store'
+
+export class UserStore extends ComponentStore<UserState> {
+  name$ = this.select((state) => state.loggedInUser).pipe(map((user) => user.name));
+                                                          ~~~~~~~~~~~~~~~~~~~~~~~~ [${messageId}]
+}`),
+];
+
+const invalidInject: () => RunTests['invalid'] = () => [
+  fromFixture(`
+  import { inject } from '@angular/core'
+  import { ComponentStore } from '@ngrx/component-store'
+
+  class NotOk {
+    readonly otherStoreName = inject(ComponentStore<MoviesState>)
+    readonly movie$ = this.otherStoreName.select((state) => state.movies).pipe(
+      map((m) => m),
+      ~~~~~~~~~~~~~ [${messageId}]
+      filter(Boolean),
+      map((movies) => movies[0]),
+      ~~~~~~~~~~~~~~~~~~~~~~~~~~ [${messageId}]
+    )
+  }`),
+];
+
+ruleTester().run(path.parse(__filename).name, rule, {
+  valid: [...validConstructor(), ...validInject()],
+  invalid: [...invalidConstructor(), ...invalidInject()],
+});

modules/eslint-plugin/spec/rules/updater-explicit-return-type.spec.ts renamed to modules/eslint-plugin/spec/rules/component-store/updater-explicit-return-type.spec.ts

@@ -6,8 +6,8 @@ import { fromFixture } from 'eslint-etc';
 import * as path from 'path';
 import rule, {
   messageId,
-} from '../../src/rules/component-store/updater-explicit-return-type';
-import { ruleTester } from '../utils';
+} from '../../../src/rules/component-store/updater-explicit-return-type';
+import { ruleTester } from '../../utils';
 
 type MessageIds = ESLintUtils.InferMessageIdsTypeFromRule<typeof rule>;
 type Options = ESLintUtils.InferOptionsTypeFromRule<typeof rule>;

modules/eslint-plugin/spec/rules/avoid-cyclic-effects.spec.ts renamed to modules/eslint-plugin/spec/rules/effects/avoid-cyclic-effects.spec.ts

@@ -4,8 +4,10 @@ import type {
 } from '@typescript-eslint/experimental-utils';
 import { fromFixture } from 'eslint-etc';
 import * as path from 'path';
-import rule, { messageId } from '../../src/rules/effects/avoid-cyclic-effects';
-import { ruleTester } from '../utils';
+import rule, {
+  messageId,
+} from '../../../src/rules/effects/avoid-cyclic-effects';
+import { ruleTester } from '../../utils';
 
 type MessageIds = ESLintUtils.InferMessageIdsTypeFromRule<typeof rule>;
 type Options = ESLintUtils.InferOptionsTypeFromRule<typeof rule>;

modules/eslint-plugin/spec/rules/no-dispatch-in-effects.spec.ts renamed to modules/eslint-plugin/spec/rules/effects/no-dispatch-in-effects.spec.ts

@@ -7,8 +7,8 @@ import * as path from 'path';
 import rule, {
   noDispatchInEffects,
   noDispatchInEffectsSuggest,
-} from '../../src/rules/effects/no-dispatch-in-effects';
-import { ruleTester } from '../utils';
+} from '../../../src/rules/effects/no-dispatch-in-effects';
+import { ruleTester } from '../../utils';
 
 type MessageIds = ESLintUtils.InferMessageIdsTypeFromRule<typeof rule>;
 type Options = ESLintUtils.InferOptionsTypeFromRule<typeof rule>;

modules/eslint-plugin/spec/rules/no-effects-in-providers.spec.ts renamed to modules/eslint-plugin/spec/rules/effects/no-effects-in-providers.spec.ts

@@ -6,8 +6,8 @@ import { fromFixture } from 'eslint-etc';
 import * as path from 'path';
 import rule, {
   messageId,
-} from '../../src/rules/effects/no-effects-in-providers';
-import { ruleTester } from '../utils';
+} from '../../../src/rules/effects/no-effects-in-providers';
+import { ruleTester } from '../../utils';
 
 type MessageIds = ESLintUtils.InferMessageIdsTypeFromRule<typeof rule>;
 type Options = ESLintUtils.InferOptionsTypeFromRule<typeof rule>;

modules/eslint-plugin/spec/rules/no-multiple-actions-in-effects.spec.ts renamed to modules/eslint-plugin/spec/rules/effects/no-multiple-actions-in-effects.spec.ts

@@ -6,8 +6,8 @@ import { fromFixture } from 'eslint-etc';
 import * as path from 'path';
 import rule, {
   messageId,
-} from '../../src/rules/effects/no-multiple-actions-in-effects';
-import { ruleTester } from '../utils';
+} from '../../../src/rules/effects/no-multiple-actions-in-effects';
+import { ruleTester } from '../../utils';
 
 type MessageIds = ESLintUtils.InferMessageIdsTypeFromRule<typeof rule>;
 type Options = ESLintUtils.InferOptionsTypeFromRule<typeof rule>;

modules/eslint-plugin/spec/rules/prefer-effect-callback-in-block-statement.spec.ts renamed to modules/eslint-plugin/spec/rules/effects/prefer-effect-callback-in-block-statement.spec.ts

@@ -6,8 +6,8 @@ import { fromFixture } from 'eslint-etc';
 import * as path from 'path';
 import rule, {
   messageId,
-} from '../../src/rules/effects/prefer-effect-callback-in-block-statement';
-import { ruleTester } from '../utils';
+} from '../../../src/rules/effects/prefer-effect-callback-in-block-statement';
+import { ruleTester } from '../../utils';
 
 type MessageIds = ESLintUtils.InferMessageIdsTypeFromRule<typeof rule>;
 type Options = ESLintUtils.InferOptionsTypeFromRule<typeof rule>;

modules/eslint-plugin/spec/rules/use-effects-lifecycle-interface.spec.ts renamed to modules/eslint-plugin/spec/rules/effects/use-effects-lifecycle-interface.spec.ts

@@ -6,8 +6,8 @@ import { fromFixture } from 'eslint-etc';
 import * as path from 'path';
 import rule, {
   messageId,
-} from '../../src/rules/effects/use-effects-lifecycle-interface';
-import { ruleTester } from '../utils';
+} from '../../../src/rules/effects/use-effects-lifecycle-interface';
+import { ruleTester } from '../../utils';
 
 type MessageIds = ESLintUtils.InferMessageIdsTypeFromRule<typeof rule>;
 type Options = ESLintUtils.InferOptionsTypeFromRule<typeof rule>;

modules/eslint-plugin/spec/rules/avoid-combining-selectors.spec.ts renamed to modules/eslint-plugin/spec/rules/store/avoid-combining-selectors.spec.ts

@@ -6,8 +6,8 @@ import { fromFixture } from 'eslint-etc';
 import * as path from 'path';
 import rule, {
   messageId,
-} from '../../src/rules/store/avoid-combining-selectors';
-import { ruleTester } from '../utils';
+} from '../../../src/rules/store/avoid-combining-selectors';
+import { ruleTester } from '../../utils';
 
 type MessageIds = ESLintUtils.InferMessageIdsTypeFromRule<typeof rule>;
 type Options = ESLintUtils.InferOptionsTypeFromRule<typeof rule>;