#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,26 @@
+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: ['aws-cdk-lib/*', '@shiftcode/iac-helper/*', 'rxjs/operators'] }],
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            selector: 'property',
+            format: ['camelCase', 'UPPER_CASE'],
+          },
+        ],
+      },
+    },
+  ],
+
+  parserOptions: {
+    project: [
+      "./tsconfig.lib.json",
+      "./tsconfig.spec.json"
+    ]
+  }
+}

libs/aws/.lintstagedrc.yml

@@ -1,4 +1,4 @@
-# we use tslint instead of ng lint, because we can't use --project (tsconfig specifying files with include, exclude )
+# we use eslint 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

libs/aws/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@shiftcode/ngx-aws",
-  "version": "6.0.0",
+  "version": "6.1.0-pr22.9",
   "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 ./src -- --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,64 @@
+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', '@angular/**/*'] }],
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            selector: 'property',
+            format: ['camelCase', 'UPPER_CASE'],
+            leadingUnderscore: 'allow'
+          },
+          {
+            selector: "objectLiteralProperty",
+            format: null,
+            filter: {
+              regex: '^(\\[.*\\]|\\(.*\\)|aria-.*)$',
+              match: true
+            }
+          },
+        ],
+        '@shiftcode/rules/import-denylist': [
+          'error', {
+            patterns: [
+              /\.\/(models|static|core|shared)\/.*/,
+              /src\/.*/
+            ],
+          },
+        ],
+      },
+    },
+    {
+      files: ['*.html'],
+      rules: {
+        '@angular-eslint/template/no-negated-async': 'off',
+      },
+    },
+    {
+      files: ['*.js', '*.mjs', '*.cjs'],
+      rules: {
+        'no-undef': 'off',
+      },
+    },
+  ],
+
+  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,12 +1,12 @@
-# we use tslint instead of ng lint, because we can't use --project (tsconfig specifying files with include, exclude )
+# we use eslint 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
+  - npm run lint:src -- --fix
 # test folder and specs
 test/{**/,}*.ts,src/{**/,}*.+(spec|test).ts:
   - npm run prettier:staged
-  - npm run lint:test -- --fix
+  - npm run lint:test
 # all html files
 src/**/*.html:
   - npm run prettier:staged

libs/components/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@shiftcode/ngx-components",
-  "version": "6.1.0",
+  "version": "6.1.0-pr22.8",
   "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:test": "eslint ./test",
     "prettier": "prettier --write --config ../../.prettierrc.yml 'src/**/*.ts'",
     "prettier:staged": "prettier --write --config ../../.prettierrc.yml"
   },
@@ -23,7 +23,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) {