chore(eslint): Migrate from tslint to eslint

Author: mpalourdio

.editorconfig

@@ -9,7 +9,7 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 end_of_line = lf
 
-[{package.json,ng-package.json,angular.json,tslint.json,karma.conf.js,tsconfig*.json,test.ts,main.ts,polyfills.ts}]
+[{package.json,ng-package.json,angular.json,.eslintrc.json,karma.conf.js,tsconfig*.json,test.ts,main.ts,polyfills.ts}]
 indent_size = 2
 
 [*.md]

.eslintrc.json

@@ -0,0 +1,59 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "prefix": "",
+            "style": "kebab-case",
+            "type": "element"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "prefix": "",
+            "style": "camelCase",
+            "type": "attribute"
+          }
+        ],
+        "comma-dangle": [
+          "error",
+          {
+            "objects": "never",
+            "arrays": "always-multiline",
+            "functions": "never"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

README.md

@@ -120,7 +120,7 @@ import { Spinkit } from 'ng-http-loader'; // <============
     styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-    public spinkit = Spinkit; // <============
+    spinkit = Spinkit; // <============
 }
 ```
 The different spinners available are referenced in [this file](src/lib/spinkits.ts).

angular.json

@@ -40,14 +40,11 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "./tsconfig.lib.json",
-              "./tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
             ]
           }
         }
@@ -56,6 +53,7 @@
   },
   "defaultProject": "ng-http-loader",
   "cli": {
-    "packageManager": "yarn"
+    "packageManager": "yarn",
+    "defaultCollection": "@angular-eslint/schematics"
   }
 }

package.json

@@ -48,6 +48,11 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^12.0.0",
+    "@angular-eslint/builder": "12.6.1",
+    "@angular-eslint/eslint-plugin": "12.6.1",
+    "@angular-eslint/eslint-plugin-template": "12.6.1",
+    "@angular-eslint/schematics": "12.6.1",
+    "@angular-eslint/template-parser": "12.6.1",
     "@angular/cli": "^12.0.0",
     "@angular/common": "^12.0.0",
     "@angular/compiler": "^12.0.0",
@@ -57,7 +62,9 @@
     "@angular/platform-browser-dynamic": "^12.0.0",
     "@types/jasmine": "~3.8.0",
     "@types/node": "^12.11.1",
-    "codelyzer": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "4.28.2",
+    "@typescript-eslint/parser": "4.28.2",
+    "eslint": "^7.26.0",
     "jasmine-core": "~3.8.0",
     "karma": "~6.3.2",
     "karma-chrome-launcher": "~3.1.0",
@@ -68,8 +75,6 @@
     "ng-packagr": "^12.0.0",
     "puppeteer": "^10.0.0",
     "rxjs": "^6.6.0",
-    "rxjs-tslint-rules": "^4.13.0",
-    "tslint": "~6.1.0",
     "typescript": "~4.3.5",
     "zone.js": "~0.11.4"
   }

src/lib/components/abstract.loader.directive.ts

@@ -12,5 +12,5 @@ import { Input, Directive } from '@angular/core';
 @Directive()
 export abstract class AbstractLoaderDirective {
 
-    @Input() public backgroundColor!: string;
+    @Input() backgroundColor!: string;
 }

src/lib/components/ng-http-loader.component.ts

@@ -21,27 +21,27 @@ import { Spinkit } from '../spinkits';
 })
 export class NgHttpLoaderComponent implements OnInit {
 
-    public spinkit = Spinkit;
-    public isVisible$!: Observable<boolean>;
-    private visibleUntil = Date.now();
+    spinkit = Spinkit;
+    isVisible$!: Observable<boolean>;
+    visibleUntil = Date.now();
 
-    @Input() public backdrop = true;
-    @Input() public backgroundColor!: string;
-    @Input() public debounceDelay = 0;
-    @Input() public entryComponent: any = null;
-    @Input() public extraDuration = 0;
-    @Input() public filteredHeaders: string[] = [];
-    @Input() public filteredMethods: string[] = [];
-    @Input() public filteredUrlPatterns: string[] = [];
-    @Input() public minDuration = 0;
-    @Input() public opacity = '.7';
-    @Input() public backdropBackgroundColor = '#f1f1f1';
-    @Input() public spinner: string | null = Spinkit.skWave;
+    @Input() backdrop = true;
+    @Input() backgroundColor!: string;
+    @Input() debounceDelay = 0;
+    @Input() entryComponent: any = null;
+    @Input() extraDuration = 0;
+    @Input() filteredHeaders: string[] = [];
+    @Input() filteredMethods: string[] = [];
+    @Input() filteredUrlPatterns: string[] = [];
+    @Input() minDuration = 0;
+    @Input() opacity = '.7';
+    @Input() backdropBackgroundColor = '#f1f1f1';
+    @Input() spinner: string | null = Spinkit.skWave;
 
     constructor(private pendingRequestsInterceptor: PendingRequestsInterceptor, private spinnerVisibility: SpinnerVisibilityService) {
     }
 
-    public ngOnInit(): void {
+    ngOnInit(): void {
         this.initIsvisibleObservable();
         this.nullifySpinnerIfEntryComponentIsDefined();
         this.initFilters();

src/lib/ng-http-loader.module.ts

@@ -27,7 +27,7 @@ import { SPINKIT_COMPONENTS } from './spinkits';
     ]
 })
 export class NgHttpLoaderModule {
-    public static forRoot(): ModuleWithProviders<NgHttpLoaderModule> {
+    static forRoot(): ModuleWithProviders<NgHttpLoaderModule> {
         return {
             ngModule: NgHttpLoaderModule,
             providers: [

src/lib/services/pending-requests-interceptor.service.ts

@@ -73,7 +73,7 @@ export class PendingRequestsInterceptor implements HttpInterceptor {
             || this.shouldBypassHeader(req);
     }
 
-    public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
         const shouldBypass = this.shouldBypass(req);
 
         if (!shouldBypass) {

src/lib/services/spinner-visibility.service.ts

@@ -25,12 +25,12 @@ export class SpinnerVisibilityService {
         return this._visibility$.asObservable();
     }
 
-    public show(): void {
+    show(): void {
         this.pendingRequestsInterceptor.forceByPass = true;
         this._visibility$.next(true);
     }
 
-    public hide(): void {
+    hide(): void {
         this._visibility$.next(false);
         this.pendingRequestsInterceptor.forceByPass = false;
     }