Update angular-cli monorepo to v22.1.5

Update npm to v12

.github/dependabot.yml

@@ -1,18 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: 'npm'
-    directory: '/'
-    schedule:
-      interval: 'weekly'
-    groups:
-      angular:
-        applies-to: version-updates
-        patterns:
-          - '@angular*'
-        update-types:
-          - 'minor'
-          - 'patch'
-  - package-ecosystem: 'github-actions'
-    directory: '/'
-    schedule:
-      interval: 'weekly'

.github/workflows/check-webui-build.yml

@@ -9,10 +9,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
 
       - name: Set up Node.js
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'

.github/workflows/publish.yml

@@ -8,10 +8,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
 
       - name: Set up Node.js
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'

.nvmrc

@@ -1 +1 @@
-v24.11.1
+24.19.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@showbridge/webui",
-  "version": "0.14.1",
+  "version": "0.14.4",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,37 +26,36 @@
     "dist"
   ],
   "license": "MIT",
-  "packageManager": "npm@11.6.2",
+  "packageManager": "npm@12.0.2",
   "dependencies": {
-    "@angular/cdk": "21.2.13",
+    "@angular/cdk": "22.1.2",
-    "@angular/common": "21.2.15",
+    "@angular/common": "22.1.2",
-    "@angular/compiler": "21.2.15",
+    "@angular/compiler": "22.1.2",
-    "@angular/core": "21.2.15",
+    "@angular/core": "22.1.2",
-    "@angular/forms": "21.2.15",
+    "@angular/forms": "22.1.2",
-    "@angular/material": "21.2.13",
+    "@angular/material": "22.1.2",
-    "@angular/platform-browser": "21.2.15",
+    "@angular/platform-browser": "22.1.2",
-    "@angular/router": "21.2.15",
+    "@angular/router": "22.1.2",
     "ajv": "8.20.0",
-    "js-yaml": "4.1.1",
+    "js-yaml": "5.3.0",
     "lodash-es": "4.18.1",
     "rxjs": "7.8.2",
     "tslib": "2.8.1"
   },
   "devDependencies": {
-    "@angular/build": "21.2.13",
+    "@angular/build": "22.1.5",
-    "@angular/cli": "21.2.13",
+    "@angular/cli": "22.1.5",
-    "@angular/compiler-cli": "21.2.15",
+    "@angular/compiler-cli": "22.1.2",
-    "@angular/material": "21.2.13",
+    "@playwright/test": "1.62.1",
-    "@playwright/test": "1.60.0",
+    "@tailwindcss/postcss": "4.3.3",
-    "@tailwindcss/postcss": "4.3.0",
     "@types/js-yaml": "4.0.9",
     "@types/lodash-es": "4.17.12",
-    "jsdom": "29.1.1",
+    "jsdom": "30.0.1",
-    "playwright-ng-schematics": "^21.1.0",
+    "playwright-ng-schematics": "22.0.3",
-    "postcss": "8.5.15",
+    "postcss": "8.5.26",
-    "prettier": "3.8.3",
+    "prettier": "3.9.6",
-    "tailwindcss": "4.3.0",
+    "tailwindcss": "4.3.3",
-    "typescript": "5.9.3",
+    "typescript": "6.0.3",
-    "vitest": "4.1.7"
+    "vitest": "4.1.11"
   }
 }

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}

src/app/app.ts

@@ -1,4 +1,4 @@
-import { Component, computed, effect, inject } from '@angular/core';
+import { Component, computed, effect, inject, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -29,6 +29,7 @@ import { SettingsService } from './services/settings';
     ConfigPreviewComponent,
   ],
   templateUrl: './app.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './app.css',
 })
 export class App {

src/app/components/array-form/array-form.ts

@@ -1,5 +1,5 @@
 import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Component, inject, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { ParamInfo } from '../../models/form';
@@ -12,6 +12,7 @@ import { parseStringToArray } from '../../utils/params';
   templateUrl: './array-form.html',
   styleUrl: './array-form.css',
   imports: [MatIconModule, FormsModule, CdkDrag, CdkDropList],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: true,
 })
 export class ArrayFormComponent implements OnInit {

src/app/components/config-preview/config-preview.ts

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { Component, computed, input, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -9,6 +9,7 @@ import { Config } from '../../models/config';
   selector: 'app-config-preview',
   imports: [MatIconModule, MatButtonModule, MatTooltipModule],
   templateUrl: './config-preview.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './config-preview.css',
 })
 export class ConfigPreviewComponent {

src/app/components/module-list/module-list.ts

@@ -1,5 +1,5 @@
 import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Component, inject, input, output } from '@angular/core';
+import { Component, inject, input, output, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -7,9 +7,9 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { cloneDeep } from 'lodash-es';
 import { ModuleConfig } from '../../models/config';
+import { ListsService } from '../../services/lists';
 import { SchemaService } from '../../services/schema';
 import { ModuleComponent } from '../module/module';
-import { ListsService } from '../../services/lists';
 
 @Component({
   selector: 'app-module-list',
@@ -23,6 +23,7 @@ import { ListsService } from '../../services/lists';
     CdkDropList,
   ],
   templateUrl: './module-list.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './module-list.css',
 })
 export class ModuleListComponent {
@@ -75,7 +76,6 @@ export class ModuleListComponent {
   }
 
   drop(event: CdkDragDrop<ModuleConfig[] | undefined>) {
-    console.log('Drop event:', event);
     if (event.previousContainer === event.container) {
       const currentModules = this.modules();
       if (currentModules === undefined) {

src/app/components/module/module.ts

@@ -1,6 +1,14 @@
 import { CdkDragHandle, CdkDragPlaceholder, CdkDragPreview } from '@angular/cdk/drag-drop';
 import { JsonPipe } from '@angular/common';
-import { Component, computed, inject, input, output, signal } from '@angular/core';
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  output,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -29,6 +37,7 @@ import { ParamsFormComponent } from '../params-form/params-form';
     CdkDragPlaceholder,
   ],
   templateUrl: './module.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './module.css',
 })
 export class ModuleComponent {

src/app/components/params-form/params-form.ts

@@ -1,5 +1,12 @@
 import { JsonPipe } from '@angular/common';
-import { Component, effect, input, OnDestroy, output } from '@angular/core';
+import {
+  Component,
+  effect,
+  input,
+  OnDestroy,
+  output,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -26,6 +33,7 @@ import { ArrayFormComponent } from '../array-form/array-form';
     ArrayFormComponent,
     MatTabsModule,
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: true,
 })
 export class ParamsFormComponent implements OnDestroy {

src/app/components/processor/processor.ts

@@ -1,5 +1,5 @@
 import { CdkDragHandle, CdkDragPlaceholder, CdkDragPreview } from '@angular/cdk/drag-drop';
-import { Component, computed, inject, input, output } from '@angular/core';
+import { Component, computed, inject, input, output, ChangeDetectionStrategy } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { ProcessorConfig } from '../../models/config';
@@ -17,6 +17,7 @@ import { ParamsFormComponent } from '../params-form/params-form';
     CdkDragPlaceholder,
   ],
   templateUrl: './processor.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './processor.css',
 })
 export class ProcessorComponent {

src/app/components/route-list/route-list.html

@@ -17,7 +17,7 @@
     (cdkDropListDropped)="drop($event)"
     [cdkDropListData]="routes()"
   >
-    @for (route of routes(); track route; let i = $index) {
+    @for (route of routes(); track route.id; let i = $index) {
       <div class="m-2" cdkDrag>
         <app-route
           [id]="listService.pathToId(`routes/${i}`)"

src/app/components/route-list/route-list.ts

@@ -6,7 +6,7 @@ import {
   moveItemInArray,
   transferArrayItem,
 } from '@angular/cdk/drag-drop';
-import { Component, inject, input, output } from '@angular/core';
+import { Component, inject, input, output, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -14,9 +14,9 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { cloneDeep } from 'lodash-es';
 import { RouteConfig } from '../../models/config';
+import { ListsService } from '../../services/lists';
 import { SchemaService } from '../../services/schema';
 import { RouteComponent } from '../route/route';
-import { ListsService } from '../../services/lists';
 
 @Component({
   selector: 'app-route-list',
@@ -31,6 +31,7 @@ import { ListsService } from '../../services/lists';
     A11yModule,
   ],
   templateUrl: './route-list.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './route-list.css',
 })
 export class RouteListComponent {
@@ -123,7 +124,6 @@ export class RouteListComponent {
   }
 
   drop(event: CdkDragDrop<RouteConfig[] | undefined>) {
-    console.log('Drop event:', event);
     if (event.previousContainer === event.container) {
       const currentRoutes = this.routes();
       if (currentRoutes === undefined) {

src/app/components/route/route.html

@@ -81,7 +81,7 @@
             (cdkDropListDropped)="drop($event)"
             [cdkDropListData]="route()?.processors"
           >
-            @for (processor of processors(); track processor; let i = $index) {
+            @for (processor of processors(); track processor.id; let i = $index) {
               <div cdkDrag>
                 <app-processor
                   [path]="path() + '/processors/' + i"
@@ -237,7 +237,7 @@
               (cdkDropListDropped)="drop($event)"
               [cdkDropListData]="route()?.processors"
             >
-              @for (processor of processors(); track processor; let i = $index) {
+              @for (processor of processors(); track processor.id; let i = $index) {
                 <div cdkDrag>
                   <app-processor
                     [path]="path() + '/processors/' + i"

src/app/components/route/route.ts

@@ -1,13 +1,22 @@
 import {
   CdkDrag,
   CdkDragDrop,
+  CdkDragHandle,
   CdkDragPlaceholder,
   CdkDragPreview,
   CdkDropList,
   moveItemInArray,
 } from '@angular/cdk/drag-drop';
 import { JsonPipe } from '@angular/common';
-import { Component, computed, inject, input, output, signal } from '@angular/core';
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  output,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -34,11 +43,13 @@ import { ProcessorComponent } from '../processor/processor';
     ProcessorComponent,
     MatTooltipModule,
     CdkDrag,
+    CdkDragHandle,
     CdkDropList,
     CdkDragPreview,
     CdkDragPlaceholder,
   ],
   templateUrl: './route.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './route.css',
 })
 export class RouteComponent {

src/app/models/config.ts

@@ -22,11 +22,13 @@ export type ModuleConfig = {
 };
 
 export type RouteConfig = {
+  id: string;
   input?: string;
   processors?: ProcessorConfig[];
 };
 
 export type ProcessorConfig = {
+  id: string;
   type: string;
   params?: Record<string, any>;
 };

src/app/services/config.ts

@@ -17,17 +17,18 @@ import { SettingsService } from './settings';
 })
 export class ConfigService {
   pendingConfigIsValid = computed(() => {
-    const config = this.currentlyShownConfig();
+    const config = this._currentlyShownConfig();
     if (config === undefined) {
       return false;
     }
     return this.schemaService.validate(this.schemaService.configSchemaId, config);
   });
-  currentlyShownConfig = signal<Config | undefined>(undefined);
+  private runningConfig = signal<Config | undefined>(undefined);
-  runningConfig = signal<Config | undefined>(undefined);
+  private _currentlyShownConfig = signal<Config | undefined>(undefined);
+  readonly currentlyShownConfig = this._currentlyShownConfig.asReadonly();
 
   configIsDirty = computed(() => {
-    const currentlyShown = this.currentlyShownConfig();
+    const currentlyShown = this._currentlyShownConfig();
     const running = this.runningConfig();
     if (currentlyShown === undefined || running === undefined) {
       return false;
@@ -44,7 +45,7 @@ export class ConfigService {
 
   constructor(private schemaService: SchemaService) {
     effect(() => {
-      console.log('config state changed', this.currentlyShownConfig());
+      console.log('config state changed', this._currentlyShownConfig());
     });
 
     effect(() => {
@@ -124,27 +125,22 @@ export class ConfigService {
   }
 
   updateCurrentlyShownConfig(config: Config) {
-    if (isEqual(config, this.currentlyShownConfig())) {
+    this._currentlyShownConfig.set(cloneDeep(config));
-      // NOTE(jwetzell): no update
-      return;
-    }
-    this.currentlyShownConfig.set(cloneDeep(config));
   }
 
   updateModules(modules: ModuleConfig[]) {
-    const currentConfig = this.currentlyShownConfig();
+    var newConfig = cloneDeep(this._currentlyShownConfig());
-    if (!currentConfig) {
+    if (!newConfig) {
       console.error('No currently shown config to update modules on');
       return;
     }
+    newConfig.modules = cloneDeep(modules);
 
-    currentConfig.modules = cloneDeep(modules);
+    this.updateCurrentlyShownConfig(newConfig);
-
-    this.updateCurrentlyShownConfig(currentConfig);
   }
 
   updateRoutes(routes: RouteConfig[]) {
-    const currentConfig = this.currentlyShownConfig();
+    const currentConfig = this._currentlyShownConfig();
     if (!currentConfig) {
       console.error('No currently shown config to update routes on');
       return;

src/app/services/schema.ts

@@ -139,12 +139,16 @@ export class SchemaService {
   }
 
   getSkeletonForRoute(): RouteConfig {
-    const template: RouteConfig = {};
+    const template: RouteConfig = {
+      id: crypto.randomUUID(),
+      processors: [],
+    };
     return template;
   }
 
   getSkeletonForProcessor(processorType: string): ProcessorConfig {
     const template: ProcessorConfig = {
+      id: crypto.randomUUID(),
       type: processorType,
     };
     const itemInfo = this.processorTypes.find((itemInfo) => itemInfo.type === processorType);

tsconfig.app.json

@@ -7,5 +7,13 @@
     "types": []
   },
   "include": ["src/**/*.ts"],
-  "exclude": ["src/**/*.spec.ts"]
+  "exclude": ["src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }