angular-split · Jefiozie · Jan 23, 2024 · Jan 23, 2024 · Jan 23, 2024 · Jan 23, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,44 @@
+{
+  "root": true,
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "sp",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "warn",
+          {
+            "type": "element",
+            "prefix": "sp",
+            "style": "kebab-case"
+          }
+        ],
+        "@typescript-eslint/explicit-member-accessibility": [
+          "error",
+          {
+            "accessibility": "no-public"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -29,5 +29,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
         run: yarn
+      - name: Lint
+        run: yarn lint
       - name: Run tests
         run: yarn test_ci
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,7 @@
 !.vscode/extensions.json
 
 # misc
+/.nx/*
 /.angular/cache
 /.sass-cache
 /connect.lock

diff --git a/angular.json b/angular.json
@@ -20,10 +20,18 @@
             "outputPath": "dist/angular-split-app",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "src/tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "src/styles.scss"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -60,6 +68,15 @@
         "deploy": {
           "builder": "angular-cli-ghpages:deploy",
           "options": {}
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     },
@@ -75,6 +92,15 @@
             "tsConfig": "projects/angular-split/tsconfig.lib.json",
             "project": "projects/angular-split/ng-package.json"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/angular-split/**/*.ts",
+              "projects/angular-split/**/*.html"
+            ]
+          }
         }
       }
     }

diff --git a/package.json b/package.json
@@ -12,9 +12,12 @@
     "lib_pub_latest": "wireit",
     "lib_pub_next": "wireit",
     "lib_tgz": "wireit",
-    "lint": "ng lint",
+    "lint_lib": "wireit",
+    "lint_app": "wireit",
+    "lint": "wireit",
     "ng": "ng",
-    "start": "wireit"
+    "start": "wireit",
+    "prepare": "husky install"
   },
   "private": true,
   "dependencies": {
@@ -39,30 +42,40 @@
     "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1701.0",
-    "@angular-devkit/build-angular": "^17.1.0",
-    "@angular-devkit/core": "^17.1.0",
-    "@angular-devkit/schematics": "^17.1.0",
-    "@angular/cli": "^17.1.0",
-    "@angular/compiler-cli": "^17.1.0",
-    "@angular/language-service": "^17.1.0",
+    "@angular-devkit/architect": "^0.1700.0",
+    "@angular-devkit/build-angular": "^17.0.0",
+    "@angular-devkit/core": "^17.0.0",
+    "@angular-devkit/schematics": "^17.0.0",
+    "@angular-eslint/builder": "17.2.1",
+    "@angular-eslint/eslint-plugin": "17.2.1",
+    "@angular-eslint/eslint-plugin-template": "17.2.1",
+    "@angular-eslint/schematics": "17.2.1",
+    "@angular-eslint/template-parser": "17.2.1",
+    "@angular/cli": "^17.0.0",
+    "@angular/compiler-cli": "^17.0.2",
+    "@angular/language-service": "^17.0.2",
     "@types/marked": "^5.0.1",
     "@types/node": "20.5.4",
+    "@typescript-eslint/eslint-plugin": "6.19.0",
+    "@typescript-eslint/parser": "6.19.0",
     "codelyzer": "^6.0.2",
     "concurrently": "8.2.1",
     "cypress": "12.17.4",
+    "eslint": "^8.56.0",
     "ng-packagr": "^17.0.0",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.28",
     "serve": "^14.2.1",
     "ts-node": "10.9.1",
     "tslib": "^2.6.2",
-    "tslint": "~6.1.3",
     "typescript": "5.2.2",
     "webpack-bundle-analyzer": "4.9.0",
     "wireit": "^0.14.3"
   },
   "lint-staged": {
+    "*.{ts,html}": [
+      "yarn lint -- --quiet"
+    ],
     "*.{js,json,css,scss,less,md,ts,tsx,html,component.html,graphql}": [
       "prettier --write"
     ]
@@ -83,12 +96,29 @@
         "dist/angular-split-app"
       ]
     },
+    "lint_app": {
+      "command": "ng lint --project angular-split-app --fix",
+      "files": [
+        "**/*.ts",
+        "**/*.html",
+        ".eslintignore",
+        ".eslintrc.cjs",
+        ".eslintrc.json"
+      ],
+      "output": []
+    },
     "build": {
       "dependencies": [
         "app_build",
         "lib_build"
       ]
     },
+    "lint": {
+      "dependencies": [
+        "lint_app",
+        "lint_lib"
+      ]
+    },
     "test_ci": {
       "dependencies": [
         "cypress_run",
@@ -136,6 +166,17 @@
         "dist/angular-split"
       ]
     },
+    "lint_lib": {
+      "command": "ng lint --project angular-split --fix",
+      "files": [
+        "**/*.ts",
+        "**/*.html",
+        ".eslintignore",
+        ".eslintrc.cjs",
+        ".eslintrc.json"
+      ],
+      "output": []
+    },
     "lib_pub_latest": {
       "command": "npm publish --tag latest ./dist/angular-split",
       "dependencies": [

diff --git a/projects/angular-split/.eslintrc.json b/projects/angular-split/.eslintrc.json
@@ -0,0 +1,31 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "as",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "as",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts
@@ -308,7 +308,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
   private isDragging = false
   private isWaitingClear = false
   private isWaitingInitialMove = false
-  private dragListeners: Array<Function> = []
+  private dragListeners: Array<() => void> = []
   private snapshot: ISplitSnapshot | null = null
   private startPoint: IPoint | null = null
   private endPoint: IPoint | null = null
@@ -414,8 +414,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
       return false
     }
 
-    // @ts-ignore
-    this.displayedAreas.forEach((area, i) => (area.component._size = formattedSizes[i]))
+    // @@ts-expect-error
+    this.displayedAreas.forEach((area, i) => (area.component.size = formattedSizes[i]))
 
     this.build(false, true)
     return true
@@ -791,7 +791,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
 
     // Each gutter side areas can't absorb all offset
     if (areasBefore.remain !== 0 && areasAfter.remain !== 0) {
+      // TODO: fix this emty block
       if (Math.abs(areasBefore.remain) === Math.abs(areasAfter.remain)) {
+        /* empty */
       } else if (Math.abs(areasBefore.remain) > Math.abs(areasAfter.remain)) {
         areasAfter = getGutterSideAbsorptionCapacity(
           this.unit,

diff --git a/projects/angular-split/src/lib/directive/split-area.directive.ts b/projects/angular-split/src/lib/directive/split-area.directive.ts
@@ -5,6 +5,7 @@ import { getInputBoolean, getInputPositiveNumber } from '../utils'
 import { IAreaSize } from '../interface'
 
 @Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
   selector: 'as-split-area, [as-split-area]',
   exportAs: 'asSplitArea',
 })
@@ -87,10 +88,10 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
     return this._visible
   }
 
-  private transitionListener: Function
+  private transitionListener: () => void
   private dragStartSubscription: Subscription
   private dragEndSubscription: Subscription
-  private readonly lockListeners: Array<Function> = []
+  private readonly lockListeners: Array<() => void> = []
 
   constructor(
     private ngZone: NgZone,

diff --git a/projects/angular-split/src/lib/utils.ts b/projects/angular-split/src/lib/utils.ts
@@ -1,12 +1,12 @@
 import { ElementRef } from '@angular/core'
 import {
   IArea,
-  IPoint,
-  IAreaSnapshot,
-  ISplitSideAbsorptionCapacity,
   IAreaAbsorptionCapacity,
   IAreaSize,
+  IAreaSnapshot,
+  IPoint,
   ISplitDirection,
+  ISplitSideAbsorptionCapacity,
   ISplitUnit,
 } from './interface'
 
@@ -112,11 +112,11 @@ export function getElementPixelSize(elRef: ElementRef, direction: ISplitDirectio
   return direction === 'horizontal' ? rect.width : rect.height
 }
 
-export function getInputBoolean(v: any): boolean {
-  return typeof v === 'boolean' ? v : v === 'false' ? false : true
+export function getInputBoolean(v: boolean | `${boolean}`): boolean {
+  return typeof v === 'boolean' ? v : v !== 'false'
 }
 
-export function getInputPositiveNumber<T>(v: any, defaultValue: T): number | T {
+export function getInputPositiveNumber<T>(v: number | `${number}` | '*', defaultValue: T): number | T {
   if (v === null || v === undefined) return defaultValue
 
   v = Number(v)
@@ -236,7 +236,7 @@ function getAreaAbsorptionCapacity(
   }
 
   if (unit === 'pixel') {
-    return getAreaAbsorptionCapacityPixel(areaSnapshot, pixels, allAreasSizePixel)
+    return getAreaAbsorptionCapacityPixel(areaSnapshot, pixels)
   }
 }
 
@@ -302,11 +302,7 @@ function getAreaAbsorptionCapacityPercent(
   }
 }
 
-function getAreaAbsorptionCapacityPixel(
-  areaSnapshot: IAreaSnapshot,
-  pixels: number,
-  containerSizePixel: number,
-): IAreaAbsorptionCapacity {
+function getAreaAbsorptionCapacityPixel(areaSnapshot: IAreaSnapshot, pixels: number): IAreaAbsorptionCapacity {
   const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels
 
   // ENLARGE AREA

diff --git a/projects/angular-split/src/test.ts b/projects/angular-split/src/test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
 import 'core-js/es7/reflect'

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -27,7 +27,7 @@ import { filter } from 'rxjs/operators'
 })
 export class AppComponent {
   constructor(public router: Router) {
-    this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => {
+    this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => {
       window.scrollTo(0, 0)
     })
   }

diff --git a/src/app/changelog/changelog.service.ts b/src/app/changelog/changelog.service.ts
@@ -25,7 +25,7 @@ export class ChangelogService {
           this.cachedHtml = marked(md)
           return this.cachedHtml
         }),
-        catchError((error) =>
+        catchError(() =>
           of(
             `Error:<br>Unable to retrieve CHANGELOG.md from github..<br>Please go to <a href="${this.url}">${this.url}</a> to view it.`,
           ),