ci: setup ESLint RxJS plugins

Teradata · Jul 26, 2022 · 58d971e · 58d971e
1 parent 4c652a8
commit 58d971e
Show file tree

Hide file tree

Showing 16 changed files with 5,604 additions and 2,616 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,7 +1,7 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
+  "plugins": ["@nrwl/nx", "rxjs", "rxjs-angular"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
@@ -29,7 +29,14 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nrwl/nx/typescript"],
-      "rules": {}
+      "parserOptions": {
+        "project": ["tsconfig.*?.json"],
+        "warnOnUnsupportedTypeScriptVersion": false
+      },
+      "rules": {
+        "rxjs/no-unsafe-takeuntil": "error",
+        "rxjs-angular/prefer-takeuntil": "warn"
+      }
     },
     {
       "files": ["*.js", "*.jsx"],

diff --git a/apps/docs-app/src/app/components/home/home.component.ts b/apps/docs-app/src/app/components/home/home.component.ts
@@ -1,4 +1,5 @@
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, OnDestroy } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
 import { GitHubService } from '../../services';
 
 interface IRouteConfig {
@@ -16,7 +17,7 @@ interface IRouteConfig {
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
-export class HomeComponent implements AfterViewInit {
+export class HomeComponent implements AfterViewInit, OnDestroy {
   // Current date
   year: any = new Date().getFullYear();
 
@@ -68,12 +69,21 @@ export class HomeComponent implements AfterViewInit {
     },
   ];
 
+  private _destroy$ = new Subject<void>();
+
   constructor(private _gitHubService: GitHubService) {}
 
   ngAfterViewInit(): void {
-    this._gitHubService.queryStartCount().subscribe((starsCount: number) => {
-      this.starCount = starsCount;
-    });
+    this._gitHubService
+      .queryStartCount()
+      .pipe(takeUntil(this._destroy$))
+      .subscribe((starsCount: number) => {
+        this.starCount = starsCount;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this._destroy$.next();
   }
 
   get activeTheme(): string {

diff --git a/apps/docs-app/src/app/components/shared/component-overview/component-overview.component.ts b/apps/docs-app/src/app/components/shared/component-overview/component-overview.component.ts
@@ -1,7 +1,8 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
+import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subject, takeUntil } from 'rxjs';
 
 import { slideInUpAnimation } from '../../../app.animations';
-import { ActivatedRoute } from '@angular/router';
 import { routeGroups } from '../../../utilities/route-trees';
 import { ICombinedRouteGroup } from '../../../utilities/route-group';
 
@@ -12,23 +13,29 @@ const ANGULAR_DOCS_URL = 'https://material.angular.io/';
   templateUrl: './component-overview.component.html',
   animations: [slideInUpAnimation],
 })
-export class ComponentOverviewComponent implements OnInit {
+export class ComponentOverviewComponent implements OnInit, OnDestroy {
   @HostBinding('@routeAnimation') routeAnimation = true;
   @HostBinding('class.td-route-animation') classAnimation = true;
 
   category: any;
   categoryGroups: any;
   angularDocsURL: string = ANGULAR_DOCS_URL;
 
+  private _destroy$ = new Subject<void>();
+
   constructor(private route: ActivatedRoute) {}
 
   ngOnInit(): void {
-    this.route.data.subscribe((data: any) => {
+    this.route.data.pipe(takeUntil(this._destroy$)).subscribe((data: any) => {
       this.category = routeGroups.find(
         (group: ICombinedRouteGroup) =>
           group.name.toLowerCase() === data.category
       );
       this.categoryGroups = this.category.routeGroups;
     });
   }
+
+  ngOnDestroy(): void {
+    this._destroy$.next();
+  }
 }
diff --git a/apps/docs-app/src/app/components/shared/demo-tools/demo.component.ts b/apps/docs-app/src/app/components/shared/demo-tools/demo.component.ts
@@ -1,23 +1,29 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnDestroy } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { forkJoin, Observable, Subscriber } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
+import { forkJoin, Observable, Subject, Subscriber } from 'rxjs';
+import { catchError, map, takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'demo-component',
   styleUrls: ['./demo.component.scss'],
   templateUrl: './demo.component.html',
 })
-export class DemoComponent {
+export class DemoComponent implements OnDestroy {
   @Input() demoId!: string;
   @Input() demoTitle!: string;
   viewCode = false;
   typescriptFile!: string;
   htmlFile!: string;
   stylesFile!: string;
 
+  private _destroy$ = new Subject<void>();
+
   constructor(private _http: HttpClient) {}
 
+  ngOnDestroy(): void {
+    this._destroy$.next();
+  }
+
   toggleCodeView(): void {
     if (this.viewCode) {
       this.viewCode = false;
@@ -66,7 +72,8 @@ export class DemoComponent {
                 subscriber.error(error);
               }
             });
-          })
+          }),
+          takeUntil(this._destroy$)
         )
         .subscribe(
           (demo: { typescript: string; html: string; styles: string }) => {

diff --git a/apps/docs-app/src/app/components/shared/sidenav-content/component-overview.component.ts b/apps/docs-app/src/app/components/shared/sidenav-content/component-overview.component.ts
@@ -1,7 +1,8 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
+import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subject, takeUntil } from 'rxjs';
 
 import { slideInUpAnimation } from '../../../app.animations';
-import { ActivatedRoute } from '@angular/router';
 import { routeGroups } from '../../../utilities/route-trees';
 import { ICombinedRouteGroup } from '../../../utilities/route-group';
 
@@ -12,23 +13,29 @@ const ANGULAR_DOCS_URL = 'https://material.angular.io/';
   templateUrl: './component-overview.component.html',
   animations: [slideInUpAnimation],
 })
-export class ComponentOverviewComponent implements OnInit {
+export class ComponentOverviewComponent implements OnInit, OnDestroy {
   @HostBinding('@routeAnimation') routeAnimation = true;
   @HostBinding('class.td-route-animation') classAnimation = true;
 
   category: any;
   categoryGroups: any;
   angularDocsURL: string = ANGULAR_DOCS_URL;
 
+  private _destroy$ = new Subject<void>();
+
   constructor(private route: ActivatedRoute) {}
 
   ngOnInit(): void {
-    this.route.data.subscribe((data: any) => {
+    this.route.data.pipe(takeUntil(this._destroy$)).subscribe((data: any) => {
       this.category = routeGroups.find(
         (group: ICombinedRouteGroup) =>
           group.name.toLowerCase() === data.category
       );
       this.categoryGroups = this.category.routeGroups;
     });
   }
+
+  ngOnDestroy(): void {
+    this._destroy$.next();
+  }
 }
diff --git a/...logs-demo-draggable-resizable-window/dialogs-demo-draggable-resizable-window.component.ts b/...logs-demo-draggable-resizable-window/dialogs-demo-draggable-resizable-window.component.ts
@@ -4,6 +4,7 @@ import {
   Renderer2,
   Output,
   EventEmitter,
+  OnDestroy,
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { DragRef } from '@angular/cdk/drag-drop';
@@ -12,6 +13,7 @@ import {
   IDraggableRefs,
   ResizableDraggableDialog,
 } from '@covalent/core/dialogs';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   selector: 'draggable-resizable-window-dialog',
@@ -39,13 +41,19 @@ export class DraggableResizableWindowDialogComponent {
   styleUrls: ['./dialogs-demo-draggable-resizable-window.component.scss'],
   templateUrl: './dialogs-demo-draggable-resizable-window.component.html',
 })
-export class DialogsDemoDraggableResizableWindowComponent {
+export class DialogsDemoDraggableResizableWindowComponent implements OnDestroy {
+  private _destroy$ = new Subject<void>();
+
   constructor(
     private _dialogService: TdDialogService,
     @Inject(DOCUMENT) private _document: any,
     private _renderer2: Renderer2
   ) {}
 
+  ngOnDestroy(): void {
+    this._destroy$.next();
+  }
+
   openDraggableResizableWindowDialog(): void {
     const {
       matDialogRef,
@@ -61,17 +69,21 @@ export class DialogsDemoDraggableResizableWindowComponent {
     );
 
     // listen to close event
-    matDialogRef.componentInstance.closed.subscribe(() => matDialogRef.close());
+    matDialogRef.componentInstance.closed
+      .pipe(takeUntil(this._destroy$))
+      .subscribe(() => matDialogRef.close());
 
     let resizableDraggableDialog: ResizableDraggableDialog;
-    dragRefSubject.subscribe((dragRf: DragRef) => {
-      resizableDraggableDialog = new ResizableDraggableDialog(
-        this._document,
-        this._renderer2,
-        matDialogRef,
-        dragRf
-      );
-    });
+    dragRefSubject
+      .pipe(takeUntil(this._destroy$))
+      .subscribe((dragRf: DragRef) => {
+        resizableDraggableDialog = new ResizableDraggableDialog(
+          this._document,
+          this._renderer2,
+          matDialogRef,
+          dragRf
+        );
+      });
 
     // Detach resize-ability event listeners after dialog closes
     matDialogRef

diff --git a/...logs/demos/dialogs-demo-draggable-resizable/dialogs-demo-draggable-resizable.component.ts b/...logs/demos/dialogs-demo-draggable-resizable/dialogs-demo-draggable-resizable.component.ts
@@ -1,11 +1,13 @@
-import { Component, Inject, Renderer2 } from '@angular/core';
+import { Component, Inject, Renderer2, OnDestroy } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { DragRef } from '@angular/cdk/drag-drop';
 import {
   TdDialogService,
   IDraggableRefs,
   ResizableDraggableDialog,
 } from '@covalent/core/dialogs';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'draggable-resizable-dialog',
@@ -25,13 +27,19 @@ export class DraggableResizableDialogComponent {}
   styleUrls: ['./dialogs-demo-draggable-resizable.component.scss'],
   templateUrl: './dialogs-demo-draggable-resizable.component.html',
 })
-export class DialogsDemoDraggableResizableComponent {
+export class DialogsDemoDraggableResizableComponent implements OnDestroy {
+  private _destroy$ = new Subject<void>();
+
   constructor(
     private _dialogService: TdDialogService,
     @Inject(DOCUMENT) private _document: any,
     private _renderer2: Renderer2
   ) {}
 
+  ngOnDestroy(): void {
+    this._destroy$.next();
+  }
+
   openDraggableResizableDialog(): void {
     const {
       matDialogRef,
@@ -45,14 +53,16 @@ export class DialogsDemoDraggableResizableComponent {
     );
 
     let resizableDraggableDialog: ResizableDraggableDialog;
-    dragRefSubject.subscribe((dragRf: DragRef) => {
-      resizableDraggableDialog = new ResizableDraggableDialog(
-        this._document,
-        this._renderer2,
-        matDialogRef,
-        dragRf
-      );
-    });
+    dragRefSubject
+      .pipe(takeUntil(this._destroy$))
+      .subscribe((dragRf: DragRef) => {
+        resizableDraggableDialog = new ResizableDraggableDialog(
+          this._document,
+          this._renderer2,
+          matDialogRef,
+          dragRf
+        );
+      });
 
     // Detach resize-ability event listeners after dialog closes
     matDialogRef

diff --git a/...r-demo-service-button-clicked/markdown-navigator-demo-service-button-clicked.component.ts b/...r-demo-service-button-clicked/markdown-navigator-demo-service-button-clicked.component.ts
@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import {
   TdMarkdownNavigatorWindowService,
   TdMarkdownNavigatorWindowComponent,
 } from '@covalent/markdown-navigator';
 import { MatDialogRef } from '@angular/material/dialog';
 import { ITdFlavoredMarkdownButtonClickEvent } from '@covalent/flavored-markdown';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   selector: 'markdown-navigator-demo-service-button-clicked',
@@ -15,11 +16,20 @@ import { MatSnackBar } from '@angular/material/snack-bar';
   templateUrl:
     './markdown-navigator-demo-service-button-clicked.component.html',
 })
-export class MarkdownNavigatorDemoServiceButtonClickedComponent {
+export class MarkdownNavigatorDemoServiceButtonClickedComponent
+  implements OnDestroy
+{
+  private _destroy$ = new Subject<void>();
+
   constructor(
     private _markdownNavigatorWindowService: TdMarkdownNavigatorWindowService,
     private _snackBar: MatSnackBar
   ) {}
+
+  ngOnDestroy(): void {
+    this._destroy$.next();
+  }
+
   open(): void {
     const dialogRef: MatDialogRef<TdMarkdownNavigatorWindowComponent> =
       this._markdownNavigatorWindowService.open({
@@ -29,13 +39,14 @@ export class MarkdownNavigatorDemoServiceButtonClickedComponent {
           },
         ],
       });
-    dialogRef.componentInstance.buttonClicked.subscribe(
-      (data: ITdFlavoredMarkdownButtonClickEvent) =>
+    dialogRef.componentInstance.buttonClicked
+      .pipe(takeUntil(this._destroy$))
+      .subscribe((data: ITdFlavoredMarkdownButtonClickEvent) =>
         this._snackBar.open(
           `Button clicked: ${JSON.stringify(data)}`,
           undefined,
           { duration: 2000 }
         )
-    );
+      );
   }
 }