Merge pull request unitopia-de#27 from mystiker/feat/frontend-strict

add strict mode and fix eslint issues

.vscode/settings.json

@@ -1,8 +1,8 @@
 {
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "editor.codeActionsOnSave": {
-    "source.organizeImports": "always",
     "source.fixAll": "explicit",
+    "source.removeUnusedImports": "explicit"
   },
   "editor.formatOnSave": true
-}
+}

frontend/.eslintrc.json → frontend/.eslintrc.js

@@ -1,40 +1,39 @@
-{
-  "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
-  "overrides": [
+module.exports = {
+  ignorePatterns: ["projects/**/*"],
+  plugins: ["simple-import-sort", "import"],
+  overrides: [
     {
-      "files": [
-        "*.ts"
-      ],
-      "parserOptions": {
-        "project": ["tsconfig.(app|spec).json"]
+      files: ["*.ts"],
+      parserOptions: {
+        project: ["./tsconfig.app.json"],
+        tsconfigRootDir: __dirname,
+        sourceType: "module",
+        ecmaVersion: "latest",
       },
-      "extends": [
+      extends: [
         "eslint:recommended",
         "plugin:@typescript-eslint/strict-type-checked",
         "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates"
+        "plugin:@angular-eslint/template/process-inline-templates",
       ],
-      "rules": {
+      rules: {
         "@angular-eslint/directive-selector": [
           "error",
           {
-            "type": "attribute",
-            "prefix": "app",
-            "style": "camelCase"
-          }
+            type: "attribute",
+            prefix: "app",
+            style: "camelCase",
+          },
         ],
         "@angular-eslint/component-selector": [
           "error",
           {
-            "type": "element",
-            "prefix": "app",
-            "style": "kebab-case"
-          }
+            type: "element",
+            prefix: "app",
+            style: "kebab-case",
+          },
         ],
-        "eqeqeq": "error",
+        eqeqeq: "error",
         "grouped-accessor-pairs": "warn",
         "guard-for-in": "error",
         "no-alert": "warn",
@@ -49,18 +48,20 @@
         "no-use-before-define": "error",
         "no-var": "error",
         "prefer-const": "warn",
-        "sort-imports": "warn"
-      }
+        "simple-import-sort/imports": "warn",
+        "simple-import-sort/exports": "warn",
+        "import/first": "warn",
+        "import/newline-after-import": "warn",
+        "import/no-duplicates": "warn",
+      },
     },
     {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
+      files: ["*.html"],
+      extends: [
         "plugin:@angular-eslint/template/recommended",
-        "plugin:@angular-eslint/template/accessibility"
+        "plugin:@angular-eslint/template/accessibility",
       ],
-      "rules": {}
-    }
-  ]
-}
+      rules: {},
+    },
+  ],
+};

frontend/package.json

@@ -11,7 +11,8 @@
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
-    "lint": "ng lint"
+    "lint": "ng lint",
+    "lint:fix": "ng lint --fix"
   },
   "private": true,
   "dependencies": {
@@ -25,7 +26,7 @@
     "@angular/platform-browser": "~17.3.6",
     "@angular/platform-browser-dynamic": "~17.3.6",
     "@angular/router": "~17.3.6",
-    "@ngrx/store": "^17.2.0",
+    "@ngrx/store": "~17.2.0",
     "ace-builds": "~1.33.1",
     "angular2-uuid": "~1.1.1",
     "ngx-cookie-service": "~17.1.0",
@@ -53,6 +54,8 @@
     "@typescript-eslint/eslint-plugin": "~7.7.1",
     "@typescript-eslint/parser": "~7.7.1",
     "eslint": "~8.57.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
     "jest": "~29.7.0",
     "jest-preset-angular": "~14.0.3",
     "prettier": "~3.2.5",

frontend/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component, HostListener } from '@angular/core';
+
 import { ServerConfigService } from './shared/server-config.service';
 import { WindowService } from './shared/window.service';
 

frontend/src/app/app.module.ts

@@ -1,20 +1,21 @@
 import { HttpClientModule } from '@angular/common/http';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { CookieService } from 'ngx-cookie-service';
-import { AppComponent } from './app.component';
-import { WINDOW_PROVIDERS } from './shared/WINDOW_PROVIDERS';
-import { PrimeModule } from './shared/prime.module';
 // import { ServiceWorkerModule } from '@angular/service-worker';
 // import { environment } from '../environments/environment';
 import { CoreModule } from '@mudlet3/frontend/core';
 import { GmcpModule } from '@mudlet3/frontend/features/gmcp';
 import { MudconfigModule } from '@mudlet3/frontend/features/mudconfig';
 import { SettingsModule } from '@mudlet3/frontend/features/settings';
 import { WidgetsModule } from '@mudlet3/frontend/features/widgets';
+import { CookieService } from 'ngx-cookie-service';
 import { SharedModule } from 'primeng/api';
+
+import { AppComponent } from './app.component';
 import { MudConfigService } from './features/config/mud-config.service';
 import { ModelessModule } from './features/modeless/modeless.module';
+import { PrimeModule } from './shared/prime.module';
+import { WINDOW_PROVIDERS } from './shared/WINDOW_PROVIDERS';
 
 /* eslint @typescript-eslint/ban-types: "warn" */
 export function setupAppConfigServiceFactory(

frontend/src/app/core/core.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+
 import { MenuModule } from './menu/menu.module';
 import { MudModule } from './mud/mud.module';
 

frontend/src/app/core/index.ts

@@ -2,6 +2,5 @@
 export { MenuService } from './menu/menu.service';
 
 /* Mud Core Module */
-export { MudModule } from './mud/mud.module';
-
 export { CoreModule } from './core.module';
+export { MudModule } from './mud/mud.module';

frontend/src/app/core/menu/menu.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { PrimeModule } from '@mudlet3/frontend/shared';
+
 import { MudmenuComponent } from './mud-menu/mud-menu.component';
 
 @NgModule({

frontend/src/app/core/menu/menu.service.ts

@@ -1,6 +1,7 @@
 import { EventEmitter, Injectable, Output } from '@angular/core';
 import { MenuItem, MenuItemCommandEvent } from 'primeng/api';
 import { BehaviorSubject, Observable } from 'rxjs';
+
 import { MudService } from '../../core/mud/mud.service';
 import { MenuState, MenuType } from './types/menu-state';
 
@@ -41,15 +42,15 @@ export class MenuService {
       id: 'MUD:CONNECT',
       label: 'Verbinden',
       icon: 'pi pi-sign-in',
-      command: (event: MenuItemCommandEvent) => this.connectClicked.emit(event),
+      command: (event: MenuItemCommandEvent) => { this.connectClicked.emit(event); },
     };
 
     const disconnectItem: MenuItem = {
       id: 'MUD:DISCONNECT',
       label: 'Trennen',
       icon: 'pi pi-sign-out',
       command: (event: MenuItemCommandEvent) =>
-        this.disconnectClicked.emit(event),
+        { this.disconnectClicked.emit(event); },
     };
 
     const items: MenuItem[] = [

frontend/src/app/core/menu/mud-menu/mud-menu.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { MenuItemCommandEvent } from 'primeng/api';
 import { Observable } from 'rxjs';
+
 import { MenuService } from '../menu.service';
 import { MenuState } from '../types/menu-state';
 

frontend/src/app/core/mud/components/mud-output/mud-output.component.ts

@@ -7,6 +7,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
+
 import { IMudMessage } from '../../types/mud-message';
 
 @Component({

frontend/src/app/core/mud/components/mud-span/mud-span.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
-import { BehaviorSubject, Observable, map, startWith } from 'rxjs';
+import { BehaviorSubject, map, Observable, startWith } from 'rxjs';
+
 import { IMudMessage } from '../../types/mud-message';
 
 @Component({

frontend/src/app/core/mud/mud-client/mud-client.component.html

@@ -3,7 +3,8 @@
   (disconnectClicked)="this.onDisconnectClicked()"
 ></app-mud-menu>
 <app-mud-output
-  [lines]="this.output$ | async"
+  *ngIf="this.output$ | async as lines"
+  [lines]="lines"
   [foregroundColor]="this.v.stdfg"
   [backgroundColor]="this.v.stdbg"
 ></app-mud-output>

frontend/src/app/core/mud/mud-client/mud-client.component.ts

@@ -5,8 +5,8 @@ import {
   KeypadData,
   WindowConfig,
 } from '@mudlet3/frontend/shared';
-
 import { Observable } from 'rxjs';
+
 import { MudService } from '../mud.service';
 import { IMudMessage } from '../types/mud-message';
 import { tableOutput } from '../utils/table-output';

frontend/src/app/core/mud/mud.module.ts

@@ -5,6 +5,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { WidgetsModule } from '@mudlet3/frontend/features/widgets';
 import { PrimeModule } from '@mudlet3/frontend/shared';
+
 import { MenuModule } from '../menu/menu.module';
 import { MudInputComponent } from './components/mud-input/mud-input.component';
 import { MudOutputComponent } from './components/mud-output/mud-output.component';

frontend/src/app/core/mud/mud.service.ts

@@ -5,6 +5,7 @@ import { IoMud, SocketsService } from '@mudlet3/frontend/features/sockets';
 import { wordWrap } from '@mudlet3/frontend/shared';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { IMudMessage } from 'src/app/core/mud/types/mud-message';
+
 import { mudProcessData } from './utils/mud-process-data';
 
 @Injectable({

frontend/src/app/features/ansi/utils/process-ansi-data.ts

@@ -1,5 +1,6 @@
 import { IAnsiData } from '@mudlet3/frontend/features/ansi';
 import { WithRequired } from '@mudlet3/frontend/shared';
+
 import { processAnsiSequences } from './process-ansi-sequences';
 
 function isAnsiDataWithText(

frontend/src/app/features/ansi/utils/process-ansi-sequences.ts

@@ -1,4 +1,5 @@
 import { FormatData } from 'src/app/features/ansi/types/format-data';
+
 import { processAnsiCodes } from './process-ansi-codes';
 
 /**

frontend/src/app/features/config/mud-config.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
-import { IMudConfig } from './types/mud-config';
 
 import { DefaultWebmudConfig } from './models/default-webmud-config';
 import config from './models/mud_config.json';
+import { IMudConfig } from './types/mud-config';
 import { IWebmudConfig } from './types/webmud-config';
 
 @Injectable({

frontend/src/app/features/gmcp/gmcp.module.ts

@@ -1,5 +1,5 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 
 @NgModule({
   imports: [CommonModule],

frontend/src/app/features/gmcp/gmcp.service.ts

@@ -1,5 +1,6 @@
 import { EventEmitter, Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+
 import { UnitopiaService } from '../mudconfig/unitopia.service';
 import { GmcpConfig } from './gmcp-config';
 import { GmcpMenu } from './gmcp-menu';

frontend/src/app/features/gmcp/index.ts

@@ -1,2 +1,2 @@
-export { GmcpService } from './gmcp.service';
-export { GmcpModule } from './gmcp.module';
+export { GmcpModule } from './gmcp.module';
+export { GmcpService } from './gmcp.service';

frontend/src/app/features/modeless/dirlist/dirlist.component.html

@@ -1,19 +1,35 @@
 <div class="noselect">
-  <div><b>{{path}}</b></div>
+  <div>
+    <b>{{ path }}</b>
+  </div>
   <table>
     <ng-container *ngFor="let entry of entries; index as i">
-      <tr *ngIf="entry.isdir===0">
-        <td><a (click)="fileOpen(entry.name)" (keypress)="fileOpen(entry.name,$event)" [tabindex]="i">{{entry.name}}</a></td>
-        <td>{{entry.size}}</td>
-        <td>{{entry.filedate}}</td>
-        <td>{{entry.filetime}}</td>
+      <tr *ngIf="entry.isdir === 0">
+        <td>
+          <a
+            (click)="fileOpen(entry.name)"
+            (keypress)="fileOpen(entry.name)"
+            [tabindex]="i"
+            >{{ entry.name }}</a
+          >
+        </td>
+        <td>{{ entry.size }}</td>
+        <td>{{ entry.filedate }}</td>
+        <td>{{ entry.filetime }}</td>
       </tr>
-      <tr *ngIf="entry.isdir!==0">
-        <td><a (click)="changeDir(entry.name)" (keypress)="changeDir(entry.name,$event)" [tabindex]="i">{{entry.name}}/</a></td>
+      <tr *ngIf="entry.isdir !== 0">
+        <td>
+          <a
+            (click)="changeDir(entry.name)"
+            (keypress)="changeDir(entry.name)"
+            [tabindex]="i"
+            >{{ entry.name }}/</a
+          >
+        </td>
         <td></td>
-        <td>{{entry.filedate}}</td>
-        <td>{{entry.filetime}}</td>
+        <td>{{ entry.filedate }}</td>
+        <td>{{ entry.filetime }}</td>
       </tr>
     </ng-container>
   </table>
-</div>
+</div>

frontend/src/app/features/modeless/dirlist/dirlist.component.ts

@@ -48,11 +48,11 @@ export class DirlistComponent implements OnInit {
     console.debug('DirlistComponent-updateDirList', this.path);
   }
 
-  fileOpen(file: string, event = undefined) {
+  fileOpen(file: string) {
     this.config?.outGoingEvents.next('FileOpen:' + this.path + ':' + file);
   }
 
-  changeDir(dir: string, event = undefined) {
+  changeDir(dir: string) {
     this.config?.outGoingEvents.next('ChangeDir:' + this.path + ':' + dir);
   }