chore: update, refactor, and fix ec linting

toedter · Sep 18, 2024 · bf75582 · bf75582
1 parent 3b2b85f
commit bf75582
Show file tree

Hide file tree

Showing 41 changed files with 794 additions and 592 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,46 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {
+      "@angular-eslint/template/label-has-associated-control": "off"
+    },
+  }
+);
diff --git a/package.json b/package.json
@@ -41,11 +41,6 @@
     "@angular-devkit/build-angular": "^18.2.4",
     "@angular-devkit/core": "^18.2.4",
     "@angular-devkit/schematics": "^18.2.4",
-    "@angular-eslint/builder": "18.3.1",
-    "@angular-eslint/eslint-plugin": "18.3.1",
-    "@angular-eslint/eslint-plugin-template": "18.3.1",
-    "@angular-eslint/schematics": "18.3.1",
-    "@angular-eslint/template-parser": "18.3.1",
     "@angular/cli": "^18.2.4",
     "@angular/compiler-cli": "^18.2.4",
     "@angular/language-service": "^18.2.4",
@@ -55,12 +50,10 @@
     "@types/jasminewd2": "~2.0.13",
     "@types/node": "^22.5.4",
     "@types/uri-templates": "^0.1.34",
-    "@typescript-eslint/eslint-plugin": "^8.5.0",
-    "@typescript-eslint/parser": "^8.5.0",
-    "@typescript-eslint/utils": "^8.5.0",
+    "angular-eslint": "18.3.1",
     "concurrently": "^9.0.1",
     "cypress": "13.14.2",
-    "eslint": "^9.10.0",
+    "eslint": "^9.9.1",
     "jasmine-core": "~5.3.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.4",
@@ -70,12 +63,13 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "lite-server": "^2.6.1",
     "ts-node": "~10.9.2",
-    "typescript": "~5.5.4"
+    "typescript": "~5.5.4",
+    "typescript-eslint": "8.2.0"
   },
   "author": {
     "name": "Kai Toedter",
     "email": "[email protected]",
     "url": "https://toedter.com"
   },
   "private": true
-}
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -22,7 +22,7 @@
           </a>
           <div class="dropdown-menu" aria-labelledby="navbarDropdownTheme">
             <a class="dropdown-item" href="#" *ngFor="let theme of themes" (click)="changeTheme(theme)">
-              <i class="icon-ok" [style]="getThemeIconCheckStyle(theme)"></i>{{theme}}</a>
+              <i class="icon-ok" [style]="getThemeIconCheckStyle(theme)"></i>{{ theme }}</a>
           </div>
         </li>
         <li class="nav-item dropdown">
@@ -35,7 +35,7 @@
               <hr *ngIf="setting === '---'" class="dropdown-divider">
               <a *ngIf="setting !== '---'" class="dropdown-item" href="#"
                  (click)="selectSetting(setting)">
-                <i class="icon-ok" [style]="getSettingsIconCheckStyle(setting)"></i>{{setting}}</a>
+                <i class="icon-ok" [style]="getSettingsIconCheckStyle(setting)"></i>{{ setting }}</a>
             </div>
           </div>
         </li>
@@ -64,7 +64,7 @@ <h5 class="modal-title" id="aboutModalLabel">About HAL Explorer</h5>
             </tr>
             <tr>
               <td>Version:</td>
-              <td>{{version}}</td>
+              <td>{{ version }}</td>
             </tr>
             <tr>
               <td>GitHub:</td>

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -1,10 +1,10 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
-import {AppComponent} from './app.component';
-import {NO_ERRORS_SCHEMA} from '@angular/core';
-import {AppService, RequestHeader} from './app.service';
-import {RequestService} from './request/request.service';
-import {DomSanitizer} from '@angular/platform-browser';
-import {Subject} from 'rxjs';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { AppService, RequestHeader } from './app.service';
+import { RequestService } from './request/request.service';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Subject } from 'rxjs';
 
 describe('AppComponent', () => {
   let component: AppComponent;

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,12 +1,12 @@
-import {Component, OnInit} from '@angular/core';
-import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
-import {RequestService} from './request/request.service';
-import {AppService} from './app.service';
-import {DocumentationComponent} from './documentation/documentation.component';
-import {ResponseDetailsComponent} from './response-details/response-details.component';
-import {ResponseExplorerComponent} from './response-explorer/response-explorer.component';
-import {RequestComponent} from './request/request.component';
-import {NgIf, NgFor} from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { RequestService } from './request/request.service';
+import { AppService } from './app.service';
+import { DocumentationComponent } from './documentation/documentation.component';
+import { ResponseDetailsComponent } from './response-details/response-details.component';
+import { ResponseExplorerComponent } from './response-explorer/response-explorer.component';
+import { RequestComponent } from './request/request.component';
+import { NgFor, NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-root',
@@ -103,8 +103,8 @@ export class AppComponent implements OnInit {
   changeTheme(theme: string) {
     this.isCustomTheme = theme !== this.themes[0];
     if (this.isCustomTheme) {
-        this.selectedThemeUrl =
-          this.sanitizer.bypassSecurityTrustResourceUrl('https://bootswatch.com/5/' + theme.toLowerCase() + '/bootstrap.min.css');
+      this.selectedThemeUrl =
+        this.sanitizer.bypassSecurityTrustResourceUrl('https://bootswatch.com/5/' + theme.toLowerCase() + '/bootstrap.min.css');
     }
     this.appService.setTheme(theme);
   }

diff --git a/src/app/app.service.spec.ts b/src/app/app.service.spec.ts
@@ -1,4 +1,4 @@
-import {AppService, RequestHeader} from './app.service';
+import { AppService, RequestHeader } from './app.service';
 
 describe('AppService', () => {
   let service: AppService;

diff --git a/src/app/app.service.ts b/src/app/app.service.ts
@@ -1,5 +1,5 @@
-import {Injectable} from '@angular/core';
-import {Observable, Subject} from 'rxjs';
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 
 
 export class RequestHeader {
@@ -78,7 +78,7 @@ export class AppService {
     return this.uriParam;
   }
 
-  setUri(uri: string, reactOnLocationHashChange: boolean = true) {
+  setUri(uri: string, reactOnLocationHashChange = true) {
     this.reactOnLocationHashChange = reactOnLocationHashChange;
     this.uriParamBackup = this.uriParam;
     this.uriParam = uri;
@@ -188,7 +188,7 @@ export class AppService {
         m = regex.exec(fragment);
       } else if (key.startsWith('hkey')) {
         const headerKeyParam = decodeURIComponent(m[2]);
-        const headerKeyIndex: number = Number(key.substring(4));
+        const headerKeyIndex = Number(key.substring(4));
         const requestHeader = tempCustomRequestHeaders[headerKeyIndex];
         if (requestHeader) {
           requestHeader.key = headerKeyParam;
@@ -198,7 +198,7 @@ export class AppService {
         m = regex.exec(fragment);
       } else if (key.startsWith('hval')) {
         const headerValueParam = decodeURIComponent(m[2]);
-        const headerValueIndex: number = Number(key.substring(4));
+        const headerValueIndex = Number(key.substring(4));
         const requestHeader = tempCustomRequestHeaders[headerValueIndex];
         if (requestHeader) {
           requestHeader.value = headerValueParam;

diff --git a/src/app/documentation/documentation.component.spec.ts b/src/app/documentation/documentation.component.spec.ts
@@ -1,9 +1,9 @@
-import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import {DocumentationComponent, getDocHeight} from './documentation.component';
-import {RequestService} from '../request/request.service';
-import {DomSanitizer} from '@angular/platform-browser';
-import {Subject} from 'rxjs';
+import { DocumentationComponent, getDocHeight } from './documentation.component';
+import { RequestService } from '../request/request.service';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Subject } from 'rxjs';
 
 describe('DocumentationComponent', () => {
   let component: DocumentationComponent;
@@ -22,12 +22,12 @@ describe('DocumentationComponent', () => {
     domSanitizerMock.bypassSecurityTrustResourceUrl.and.returnValue('/doc');
 
     TestBed.configureTestingModule({
-    imports: [DocumentationComponent],
-    providers: [
-        { provide: RequestService, useValue: requestServiceMock },
-        { provide: DomSanitizer, useValue: domSanitizerMock }
-    ]
-})
+      imports: [DocumentationComponent],
+      providers: [
+        {provide: RequestService, useValue: requestServiceMock},
+        {provide: DomSanitizer, useValue: domSanitizerMock}
+      ]
+    })
       .compileComponents();
   }));
 

diff --git a/src/app/documentation/documentation.component.ts b/src/app/documentation/documentation.component.ts
@@ -1,15 +1,15 @@
-import {Component, OnInit, ViewEncapsulation} from '@angular/core';
-import {RequestService} from '../request/request.service';
-import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { RequestService } from '../request/request.service';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { NgIf } from '@angular/common';
 
 @Component({
-    selector: 'app-documentation',
-    templateUrl: './documentation.component.html',
-    styleUrls: ['./documentation.component.css'],
-    encapsulation: ViewEncapsulation.None,
-    standalone: true,
-    imports: [NgIf]
+  selector: 'app-documentation',
+  templateUrl: './documentation.component.html',
+  styleUrls: ['./documentation.component.css'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [NgIf]
 })
 export class DocumentationComponent implements OnInit {
   docUri: SafeResourceUrl;
@@ -51,7 +51,7 @@ export function getDocHeight(doc): number {
     const doc = iFrame.contentDocument ? iFrame.contentDocument :
       iFrame.contentWindow.document;
     iFrame.style.height = getDocHeight(doc) + 4 + 'px';
-  } catch (e) {
+  } catch {
     // this exception most likely occurs when the iFrame's URL has a CORS issue
     // then just take the original document as base
     iFrame.style.height = (getDocHeight(document) - 130) + 'px';