build: update linting setup

crisbeto · crisbeto · commit 10e71ba89a59 · 2024-06-05T08:39:03.000+02:00
Updates the linting setup to the latest eslint which involved fixing some breaking changes.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -3,114 +3,21 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "plugins": ["ban"],
-      "parserOptions": {
-        "project": [
-          "tsconfig.json"
-        ],
-        "createDefaultProgram": true
-      },
       "extends": [
-        "plugin:@angular-eslint/ng-cli-compat",
-        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
-        "@angular-eslint/component-class-suffix": "off",
         "@angular-eslint/component-selector": "off",
-        "@angular-eslint/directive-class-suffix": "off",
-        "@angular-eslint/directive-selector": "off",
-        "@typescript-eslint/dot-notation": "off",
-        "@angular-eslint/no-host-metadata-property": "off",
-        "@typescript-eslint/member-delimiter-style": "off",
-        "@typescript-eslint/naming-convention": [
-          "error",
-          {
-            "selector": "property",
-            "format": ["camelCase"],
-            "filter": {
-              "regex": "^(\\[attr\\.|\\[class\\.|\\[style\\.)",
-              "match": false
-            }
-          }
-        ],
-        "@angular-eslint/no-output-on-prefix": "off",
-        "@typescript-eslint/explicit-member-accessibility": [
-          "off",
-          {
-            "accessibility": "explicit"
-          }
-        ],
-        "@typescript-eslint/no-inferrable-types": "off",
-        "@typescript-eslint/member-ordering": "off",
-        "@typescript-eslint/no-unused-vars": "error",
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "@typescript-eslint/quotes": [
-          "error",
-          "single",
-          {
-            "avoidEscape": true,
-            "allowTemplateLiterals": true
-          }
-        ],
-        "@typescript-eslint/semi": [
-          "error"
-        ],
-        "arrow-parens": [
-          "off",
-          "always"
-        ],
-        "brace-style": [
-          "error",
-          "1tbs"
-        ],
-        "import/order": "off",
-        "linebreak-style": [
-          "error",
-          "unix"
-        ],
-        "max-len": [
-          "error",
-          {
-            "code": 100
-          }
-        ],
-        "ban/ban": [
-          "error",
-          {"name": "fit"},
-          {"name": "fdescribe"},
-          {"name": "xit"},
-          {"name": "xdescribe"},
-          {"name": ["Object", "assign"], "message": "Use the spread operator instead."}
-        ],
-        "no-duplicate-imports": "error",
-        "no-redeclare": "error",
-        "object-shorthand": "error",
-        "no-underscore-dangle": "off",
-        "prefer-arrow/prefer-arrow-functions": "off",
-        "jsdoc/newline-after-description": "error",
-        "quote-props": "off"
+        "@angular-eslint/no-output-on-prefix": "off"
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
-      "rules": {
-        "@angular-eslint/template/accessibility-alt-text": "error",
-        "@angular-eslint/template/accessibility-elements-content": "error",
-        "@angular-eslint/template/accessibility-label-for": "error",
-        "@angular-eslint/template/accessibility-table-scope": "error",
-        "@angular-eslint/template/accessibility-valid-aria": "error",
-        "@angular-eslint/template/click-events-have-key-events": "error",
-        "@angular-eslint/template/mouse-events-have-key-events": "error",
-        "@angular-eslint/template/no-autofocus": "error",
-        "@angular-eslint/template/no-distracting-elements": "error",
-        "@angular-eslint/template/no-positive-tabindex": "error"
-      }
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {}
     }
   ]
 }
diff --git a/angular.json b/angular.json
@@ -118,5 +118,13 @@
   },
   "cli": {
     "analytics": false
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }
diff --git a/package.json b/package.json
@@ -29,26 +29,29 @@
     "url": "https://github.com/crisbeto/angular-svg-round-progressbar/issues"
   },
   "homepage": "https://github.com/crisbeto/angular-svg-round-progressbar",
-  "peerDependencies": {},
+  "peerDependencies": {
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0"
+  },
   "devDependencies": {
     "@angular-devkit/architect": "^0.1800.2",
     "@angular-devkit/build-angular": "^18.0.2",
-    "@angular-eslint/builder": "~14.1.2",
-    "@angular-eslint/eslint-plugin": "~14.1.2",
-    "@angular-eslint/eslint-plugin-template": "~14.1.2",
-    "@angular-eslint/template-parser": "~14.1.2",
+    "@angular-eslint/builder": "~18.0.1",
+    "@angular-eslint/schematics": "~18.0.1",
+    "@angular-eslint/eslint-plugin": "~18.0.1",
+    "@angular-eslint/eslint-plugin-template": "~18.0.1",
+    "@angular-eslint/template-parser": "~18.0.1",
     "@angular/cli": "^18.0.2",
     "@angular/common": "^18.0.1",
     "@angular/compiler": "^18.0.1",
     "@angular/compiler-cli": "^18.0.1",
     "@angular/core": "^18.0.1",
     "@angular/forms": "^18.0.1",
     "@angular/platform-browser": "^18.0.1",
-    "@angular/platform-browser-dynamic": "^18.0.1",
-    "@typescript-eslint/eslint-plugin": "~6.13.1",
-    "@typescript-eslint/parser": "~6.13.1",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "angular-cli-ghpages": "^1.0.7",
-    "eslint": "^8.55.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-ban": "^1.5.2",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jsdoc": "^31.1.0",
diff --git a/src/lib/round-progress/round-progress.component.ts b/src/lib/round-progress/round-progress.component.ts
@@ -99,31 +99,31 @@ export class RoundProgressComponent implements OnChanges {
     to = this._clamp(to);
     from = this._clamp(from);
 
-    const self = this;
     const changeInValue = to - from;
-    const duration = self.duration;
+    const duration = this.duration;
 
     // Avoid firing change detection for each of the animation frames.
-    self.ngZone.runOutsideAngular(() => {
+    this.ngZone.runOutsideAngular(() => {
       const start = () => {
-        const startTime = self.service.getTimestamp();
-        const id = ++self.lastAnimationId;
-
-        requestAnimationFrame(function animation() {
-          const currentTime = Math.min(self.service.getTimestamp() - startTime, duration);
-          const easingFn = self.easing[self.animation as keyof RoundProgressEase];
+        const startTime = this.service.getTimestamp();
+        const id = ++this.lastAnimationId;
+        const animation = () => {
+          const currentTime = Math.min(this.service.getTimestamp() - startTime, duration);
+          const easingFn = this.easing[this.animation as keyof RoundProgressEase];
           const value = easingFn(currentTime, from, changeInValue, duration);
 
-          self._updatePath(value);
+          this._updatePath(value);
 
-          if (self.onRender.observers.length > 0) {
-            self.onRender.emit(value);
+          if (this.onRender.observers.length > 0) {
+            this.onRender.emit(value);
           }
 
-          if (id === self.lastAnimationId && currentTime < duration) {
+          if (id === this.lastAnimationId && currentTime < duration) {
             requestAnimationFrame(animation);
           }
-        });
+        }
+
+        requestAnimationFrame(animation);
       };
 
       if (this.animationDelay > 0) {
diff --git a/src/lib/round-progress/round-progress.service.ts b/src/lib/round-progress/round-progress.service.ts
@@ -9,14 +9,14 @@ export class RoundProgressService {
   private hasPerf: boolean;
   public supportsSvg: boolean;
 
-  constructor(@Optional() @Inject(DOCUMENT) document: any) {
+  constructor(@Optional() @Inject(DOCUMENT) document?: Document) {
     this.supportsSvg = !!(
       document &&
       document.createElementNS &&
       document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect
     );
 
-    this.base = document && document.head.querySelector('base');
+    this.base = document?.head?.querySelector('base') as HTMLBaseElement;
     this.hasPerf =
       typeof window !== 'undefined' &&
       window.performance &&
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -118,5 +118,13 @@`
`118`	`118`	`},`
`119`	`119`	`"cli": {`
`120`	`120`	`"analytics": false`
	`121`	`+ },`
	`122`	`+ "schematics": {`
	`123`	`+ "@angular-eslint/schematics:application": {`
	`124`	`+ "setParserOptionsProject": true`
	`125`	`+ },`
	`126`	`+ "@angular-eslint/schematics:library": {`
	`127`	`+ "setParserOptionsProject": true`
	`128`	`+ }`
`121`	`129`	`}`
`122`	`130`	`}`