Merge pull request #36 from shiftcode/#22-tslint-eslint-migration

#22 tslint -> eslint migration

.eslintrc.cjs

@@ -0,0 +1,6 @@
+const typescriptEslint = require('@shiftcode/eslint-config-recommended')
+
+module.exports = {
+  ...typescriptEslint,
+  root: true,
+}

apps/styleguide/src/main.ts

@@ -22,5 +22,4 @@ bootstrapApplication(AppComponent, {
     provideSgConfig(),
   ],
 })
-  // tslint:disable-next-line:no-console
   .catch((err) => console.error(err))

libs/aws/.eslintrc.cjs

@@ -0,0 +1,27 @@
+module.exports = {
+    // automatically extends root eslint-config (which extends @shiftcode/eslint-config-recommended for TS)
+    extends: ['@shiftcode/eslint-config-recommended/ng-config'],
+  overrides: [
+    {
+      files: ['*.ts'],
+      rules: {
+        'import/no-internal-modules': ['error', { allow: ['rxjs/operators'] }],
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            selector: ['classProperty'],
+            modifiers: ['static'],
+            format: ['UPPER_CASE'],
+          },
+        ],
+      },
+    },
+  ],
+
+  parserOptions: {
+    project: [
+      "./tsconfig.lib.json",
+      "./tsconfig.spec.json"
+    ]
+  }
+}

libs/aws/.lintstagedrc.yml

@@ -1,12 +1,6 @@
-# we use tslint instead of ng lint, because we can't use --project (tsconfig specifying files with include, exclude )
-# and --files argument pointing to other files
-src/{**/,}!(*.+(spec|test)).ts:
+"*.{ts,html}":
   - npm run prettier:staged
-  - npm run lint:lib -- --fix
-# test folder and specs
-test/{**/,}*.ts,src/{**/,}*.+(spec|test).ts:
-  - npm run prettier:staged
-  - npm run lint:test -- --fix
+  - npm run lint:staged
 # sort package.json keys
 ./package.json:
   - npx sort-package-json

libs/aws/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@shiftcode/ngx-aws",
-  "version": "6.0.0",
+  "version": "6.1.0-pr22.12",
   "repository": "https://github.com/shiftcode/sc-ng-commons-public",
   "license": "MIT",
   "author": "shiftcode GmbH <[email protected]>",
   "sideEffects": false,
   "scripts": {
-    "lint": "npm run lint:lib -- --fix && npm run lint:test -- --fix",
-    "lint:ci": "npm run lint:lib && npm run lint:test",
-    "lint:lib": "tslint --format codeFrame --project ./tsconfig.lib.json",
-    "lint:test": "tslint --format codeFrame --project ./tsconfig.spec.json",
+    "lint": "eslint ./src --fix --cache",
+    "lint:ci": "npm run lint:lib",
+    "lint:lib": "eslint ./src",
+    "lint:staged": "eslint --fix --cache",
     "prettier": "prettier --write --config ../../.prettierrc.yml 'src/**/*.ts'",
     "prettier:staged": "prettier --write --config ../../.prettierrc.yml"
   },
@@ -21,7 +21,7 @@
     "@angular/core": "^18.0.0",
     "@aws-sdk/client-cloudwatch-logs": "^3.27.0",
     "@aws-sdk/types": "^3.0.0",
-    "@shiftcode/ngx-core": "^6.0.0 || ^6.0.0-pr28",
+    "@shiftcode/ngx-core": "^6.0.0 || ^6.1.0-pr22.1",
     "@shiftcode/utilities": "^3.0.0",
     "rxjs": "^6.5.3 || ^7.4.0"
   }

libs/aws/src/lib/cloudwatch-logger/cloud-watch.service.ts

@@ -1,4 +1,4 @@
-// tslint:disable:no-console
+/* eslint-disable no-console */
 import { Inject, Injectable, Optional } from '@angular/core'
 import {
   CloudWatchLogsClient,

libs/aws/src/lib/cloudwatch-logger/is-error.function.ts

@@ -1,7 +1,7 @@
 import { DataAlreadyAcceptedException, InvalidSequenceTokenException } from '@aws-sdk/client-cloudwatch-logs'
 import { SmithyException } from '@aws-sdk/types/dist/types/shapes'
 
-export function isError(value: any | unknown): value is { name: string; message: string } {
+export function isError(value: unknown): value is { name: string; message: string } {
   return (
     value instanceof Error || (typeof value === 'object' && value !== null && 'name' in value && 'message' in value)
   )

libs/components/.eslintrc.cjs

@@ -0,0 +1,28 @@
+module.exports = {
+  // automatically extends root eslint-config (which extends @shiftcode/eslint-config-recommended for TS)
+  extends: ['@shiftcode/eslint-config-recommended/ng-config'],
+  overrides: [
+    {
+      plugins: ['@shiftcode/rules'],
+      files: ['*.ts'],
+      rules: {
+        'import/no-internal-modules': ['error', { allow: ['rxjs/operators'] }],
+      },
+    },
+  ],
+
+  parserOptions: {
+    project: [
+      "./tsconfig.lib.json",
+      "./tsconfig.spec.json"
+    ],
+    tsconfigRootDir: __dirname,
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    env: {
+      browser: true,
+      node: true,
+      es6: true,
+    },
+  },
+}

libs/components/.lintstagedrc.yml

@@ -1,15 +1,6 @@
-# we use tslint instead of ng lint, because we can't use --project (tsconfig specifying files with include, exclude )
-# and --files argument pointing to other files
-src/{**/,}!(*.+(spec|test)).ts:
-  - npm run prettier:staged
-  - npm run lint:lib -- --fix
-# test folder and specs
-test/{**/,}*.ts,src/{**/,}*.+(spec|test).ts:
-  - npm run prettier:staged
-  - npm run lint:test -- --fix
-# all html files
-src/**/*.html:
+"*.{ts,html}":
   - npm run prettier:staged
+  - npm run lint:staged
 # all scss files
 src/**/*.scss:
   - npm run prettier:staged

libs/components/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@shiftcode/ngx-components",
-  "version": "6.1.0",
+  "version": "6.1.0-pr22.11",
   "repository": "https://github.com/shiftcode/sc-ng-commons-public",
   "license": "MIT",
   "author": "shiftcode GmbH <[email protected]>",
   "sideEffects": false,
   "scripts": {
-    "lint": "npm run lint:lib -- --fix && npm run lint:test -- --fix",
-    "lint:ci": "npm run lint:lib && npm run lint:test",
-    "lint:lib": "tslint --format codeFrame --project ./tsconfig.lib.json",
-    "lint:test": "tslint --format codeFrame --project ./tsconfig.spec.json",
+    "lint:ci": "npm run lint:lib",
+    "lint:lib": "eslint ./src",
+    "lint:src": "eslint ./src --fix --cache",
+    "lint:staged": "eslint --fix --cache",
+    "lint:test": "eslint ./test",
     "prettier": "prettier --write --config ../../.prettierrc.yml 'src/**/*.ts'",
     "prettier:staged": "prettier --write --config ../../.prettierrc.yml"
   },
@@ -23,7 +24,7 @@
     "@angular/core": "^18.0.0",
     "@angular/forms": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@shiftcode/ngx-core": "^6.0.0 || ^6.0.0-pr28",
+    "@shiftcode/ngx-core": "^6.0.0 || ^6.1.0-pr22.5",
     "rxjs": "^6.5.3 || ^7.4.0"
   }
 }

libs/components/src/lib/button/button.component.ts

@@ -1,4 +1,3 @@
-// tslint:disable:no-host-metadata-property
 import { Component, EventEmitter, HostListener, Output } from '@angular/core'
 
 /**

libs/components/src/lib/click-outside/click-outside.directive.ts

@@ -1,14 +1,4 @@
-import {
-  Directive,
-  ElementRef,
-  EventEmitter,
-  inject,
-  Input,
-  OnChanges,
-  OnDestroy,
-  Output,
-  SimpleChanges,
-} from '@angular/core'
+import { Directive, ElementRef, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from '@angular/core'
 import { UIEventService } from '@shiftcode/ngx-core'
 import { Subscription } from 'rxjs'
 
@@ -17,7 +7,6 @@ import { Subscription } from 'rxjs'
  */
 @Directive({ selector: '[scClickOutside]', standalone: true })
 export class ClickOutsideDirective implements OnDestroy, OnChanges {
-  // tslint:disable-next-line:no-input-rename
   @Input('scClickOutsideDisabled') disabled = false
 
   @Output() readonly scClickOutside = new EventEmitter<Event>()
@@ -27,7 +16,7 @@ export class ClickOutsideDirective implements OnDestroy, OnChanges {
 
   constructor(private uiEventService: UIEventService) {}
 
-  ngOnChanges(changes: SimpleChanges): void {
+  ngOnChanges(): void {
     // as there is only one input, ngOnChanges is only called when `isActive` changes
     this.subscription?.unsubscribe()
     if (!this.disabled) {

libs/components/src/lib/rx/rx-if.directive.ts

@@ -64,7 +64,7 @@ export class RxIfDirective<T> extends BaseRxDirective<T | null | undefined, RxIf
     this._elseRenderSubscription?.unsubscribe()
     this._elseRenderSubscription = null
 
-    if (!!value) {
+    if (value) {
       this.renderDataView({ scRxIf: value })
     } else {
       this.renderElseOrClear()

libs/components/src/lib/svg-animate/svg-animate.directive.ts

@@ -1,5 +1,5 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'
-import { AfterViewInit, Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core'
+import { AfterViewInit, Directive, ElementRef, Input, OnChanges, OnInit } from '@angular/core'
 
 /**
  * Standalone Directive to animate SVG parts by calling beginElement method
@@ -18,7 +18,7 @@ import { AfterViewInit, Directive, ElementRef, Input, OnChanges, SimpleChanges }
  *  ```
  */
 @Directive({ selector: '[scSvgAnimate]', standalone: true })
-export class SvgAnimateDirective implements OnChanges, AfterViewInit {
+export class SvgAnimateDirective implements OnChanges, AfterViewInit, OnInit {
   /**
    * state input in form {selector:state} - will be animated when state === true
    */
@@ -54,7 +54,7 @@ export class SvgAnimateDirective implements OnChanges, AfterViewInit {
     }
   }
 
-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges() {
     this.apply()
   }
 

libs/components/src/lib/svg/svg.component.ts

@@ -36,12 +36,12 @@ export class SvgComponent implements OnChanges {
 
   @Input() attrs?: Record<string, string>
 
-  private readonly logger: Logger = inject(LoggerService).getInstance('SvgComponent')
-
   protected readonly elRef: ElementRef<HTMLElement> = inject(ElementRef)
   protected readonly renderer = inject(Renderer2)
   protected readonly svgRegistry = inject(SvgRegistry)
 
+  private readonly logger: Logger = inject(LoggerService).getInstance('SvgComponent')
+
   ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
     // Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations.
     if ('attrs' in changes || 'url' in changes) {

libs/components/src/lib/tooltip/flexible-connected-position-strategy-2.ts

@@ -34,17 +34,16 @@ FlexibleConnectedPositionStrategy2.prototype['_getNarrowedViewportRect'] =
     // the problem: the viewport changes on mobile browsers depending the scroll direction
     // window innerHeight/innerWidth correctly handles this changes but does not consider scrollbars
     // documentElement clientHeight/clientWidth correctly handles the scrollbars but not the viewport changes
-    //
     // therefore we use `clientWidth` for the width and `innerHeight` for the height
     // this works for use because we never have horizontal scrollbars
 
-    // @ts-expect-error
+    // @ts-expect-error: Property might not be declared or initialized
     const viewportMargin = this._viewportMargin
 
-    // @ts-expect-error
+    // @ts-expect-error: Document element may not be fully typed
     const docEl = this._document.documentElement
 
-    // @ts-expect-error
+    // @ts-expect-error: Method return type may not match TypeScript expectations
     const scrollPosition = this._viewportRuler.getViewportScrollPosition()
 
     const width = docEl.clientWidth
@@ -71,9 +70,11 @@ FlexibleConnectedPositionStrategy2.prototype['_getOverlayFit'] = function _getOv
   // viewport, because the viewport is always rounded.
   const overlay = getRoundedBoundingClientRect(rawOverlayRect)
   let { x, y } = point
-  // @ts-ignore
+
+  // @ts-expect-error: Accessing private member '_getOffset'
   const offsetX = this._getOffset(position, 'x')
-  // @ts-ignore
+
+  // @ts-expect-error: Accessing private member '_getOffset'
   const offsetY = this._getOffset(position, 'y')
   // Account for the offsets since they could push the overlay out of the viewport.
   if (offsetX) {
@@ -88,10 +89,12 @@ FlexibleConnectedPositionStrategy2.prototype['_getOverlayFit'] = function _getOv
   const topOverflow = 0 - y
   const bottomOverflow = y + overlay.height - viewport.height
   // Visible parts of the element on each axis.
-  // @ts-ignore
+  // @ts-expect-error: Accessing private member '_subtractOverflows'
   const visibleWidth = this._subtractOverflows(overlay.width, leftOverflow, rightOverflow)
-  // @ts-ignore
+
+  // @ts-expect-error: Accessing private member '_subtractOverflows'
   const visibleHeight = this._subtractOverflows(overlay.height, topOverflow, bottomOverflow)
+
   const visibleArea =
     visibleWidth < 0 && visibleHeight < 0
       ? Number.MIN_SAFE_INTEGER
@@ -116,16 +119,18 @@ FlexibleConnectedPositionStrategy2.prototype['_getExactOverlayY'] = function _ge
   // Reset any existing styles. This is necessary in case the
   // preferred position has changed since the last `apply`.
   const styles = { top: '', bottom: '' } as CSSStyleDeclaration
-  // @ts-expect-error
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore: Accessing private member '_overlayRect' '_getOverlayPoint'
   let overlayPoint = this._getOverlayPoint(originPoint, this._overlayRect, position)
-
-  // @ts-expect-error
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore: Accessing private member '_isPushed'
   if (this._isPushed) {
-    // @ts-expect-error
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore: Accessing private member '_overlayRect', '._pushOverlayOnScreen'
     overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition)
   }
-
-  // @ts-expect-error
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore: Accessing private member '_overlayContainer'
   const virtualKeyboardOffset = this._overlayContainer.getContainerElement().getBoundingClientRect().top
 
   // Normally this would be zero, however when the overlay is attached to an input (e.g. in an
@@ -140,13 +145,15 @@ FlexibleConnectedPositionStrategy2.prototype['_getExactOverlayY'] = function _ge
     // When using `bottom`, we adjust the y position such that it is the distance
     // from the bottom of the viewport rather than the top.
 
-    // @ts-expect-error
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore: Accessing private member '_document'
     const docEl = this._document.documentElement
 
     // THIS IS OUR FIX HERE: innerHeight instead of clientHeight
     const documentHeight = window?.innerHeight ?? docEl.clientHeight
 
-    // @ts-expect-error
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore: Accessing private member '_overlayRect'
     styles.bottom = `${documentHeight - (overlayPoint.y + this._overlayRect.height)}px`
   } else {
     styles.top = coerceCssPixelValue(overlayPoint.y)