refactor: migrate to signal-based components

apps/solace-message-client-testing-app/src/app/message-list-item/message-list-item.component.html

@@ -1,35 +1,35 @@
-<span class="timestamp">{{message.getReceiverTimestamp() | date:'HH:mm:ss'}}</span>
+<span class="timestamp">{{message().getReceiverTimestamp() | date:'HH:mm:ss'}}</span>
 
 <span>Destination:</span>
-<span class="topic">{{envelope.message.getDestination()!.getName()}}</span>
+<span class="topic">{{envelope().message.getDestination()!.getName()}}</span>
 
 <span>Type:</span>
-<span>{{type}}</span>
+<span>{{type()}}</span>
 
-@if (envelope.params.size) {
+@if (envelope().params.size) {
   <span>Params:</span>
-  <span>{{envelope.params | appStringifyMap}}</span>
+  <span>{{envelope().params | appStringifyMap}}</span>
 }
 
-@if (envelope.headers.size) {
+@if (envelope().headers.size) {
   <span>Headers:</span>
-  <span>{{envelope.headers | appStringifyMap}}</span>
+  <span>{{envelope().headers | appStringifyMap}}</span>
 }
 
 <span>Details:</span>
-<sci-viewport class="content">{{details}}</sci-viewport>
+<sci-viewport class="content">{{details()}}</sci-viewport>
 
 <span>Content:</span>
 <sci-viewport class="content">
-  <section [class.zipped]="envelope.headers.get('Content-Encoding') === 'gzip'">
-    {{content}}
+  <section [class.zipped]="envelope().headers.get('Content-Encoding') === 'gzip'">
+    {{content()}}
   </section>
 </sci-viewport>
 
 <section class="actions">
-  @if (envelope.message.getReplyTo()) {
+  @if (envelope().message.getReplyTo()) {
     <button mat-mini-fab class="reply" color="primary" title="Reply"
-            (click)="onReply(envelope.message)">
+            (click)="onReply()">
       <mat-icon>reply</mat-icon>
     </button>
   }

apps/solace-message-client-testing-app/src/app/message-list-item/message-list-item.component.ts

@@ -1,7 +1,7 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
+import {ChangeDetectionStrategy, Component, computed, input, output, Signal, untracked} from '@angular/core';
 import {MessageEnvelope} from '@solace-community/angular-solace-message-client';
 import {ungzip} from 'pako';
-import {Message, MessageDumpFlag, MessageType} from 'solclientjs';
+import {MessageDumpFlag, MessageType} from 'solclientjs';
 import {DatePipe} from '@angular/common';
 import {StringifyMapPipe} from '../stringify-map.pipe';
 import {SciViewportComponent} from '@scion/components/viewport';
@@ -21,35 +21,37 @@ import {MatButtonModule} from '@angular/material/button';
     MatButtonModule,
   ],
 })
-export class MessageListItemComponent implements OnChanges {
+export class MessageListItemComponent {
 
-  public message!: Message;
-  public details!: string;
-  public type!: string;
-  public content: string | undefined;
+  public readonly envelope = input.required<MessageEnvelope>();
+  public readonly delete = output<void>();
+  public readonly reply = output<void>();
 
-  @Input()
-  public envelope!: MessageEnvelope;
+  protected readonly message = computed(() => this.envelope().message);
+  protected readonly details = computed(() => this.message().dump(MessageDumpFlag.MSGDUMP_BRIEF));
+  protected readonly content = this.computeContent();
+  protected readonly type = this.computeType();
 
-  @Output()
-  public delete = new EventEmitter<void>();
-
-  @Output()
-  public reply = new EventEmitter<void>();
-
-  public onDelete(): void {
+  protected onDelete(): void {
     this.delete.emit();
   }
 
-  public onReply(messageToReplyTo: Message): void {
+  protected onReply(): void {
     this.reply.emit();
   }
 
-  public ngOnChanges(changes: SimpleChanges): void {
-    this.message = this.envelope.message;
-    this.details = this.message.dump(MessageDumpFlag.MSGDUMP_BRIEF);
-    this.type = formatMessageType(this.message.getType());
-    this.content = getContent(this.envelope);
+  private computeContent(): Signal<string | undefined> {
+    return computed(() => {
+      const envelope = this.envelope();
+      return untracked(() => getContent(envelope));
+    });
+  }
+
+  private computeType(): Signal<string> {
+    return computed(() => {
+      const message = this.message();
+      return untracked(() => formatMessageType(message.getType()));
+    });
   }
 }
 

apps/solace-message-client-testing-app/src/app/subscriber/subscriber.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, DestroyRef, EventEmitter, inject, Output, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, DestroyRef, inject, output, viewChild} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {MessageEnvelope, SolaceMessageClient} from '@solace-community/angular-solace-message-client';
 import {Observable, Subscription} from 'rxjs';
@@ -39,9 +39,12 @@ export const FOLLOW_TAIL = 'followTail';
 })
 export class SubscriberComponent {
 
+  public readonly destination = output<string>();
+
   private readonly _solaceMessageClient = inject(SolaceMessageClient);
   private readonly _cd = inject(ChangeDetectorRef);
   private readonly _destroyRef = inject(DestroyRef);
+  private readonly _viewport = viewChild.required(SciViewportComponent);
 
   protected readonly form = new FormGroup({
     [SUBSCRIPTION]: new FormGroup({
@@ -72,12 +75,6 @@ export class SubscriberComponent {
   protected subscribeError: string | null = null;
   protected envelopes: MessageEnvelope[] = [];
 
-  @ViewChild(SciViewportComponent, {static: true})
-  private _viewport!: SciViewportComponent;
-
-  @Output()
-  public destination = new EventEmitter<string>();
-
   constructor() {
     this.installDestinationEmitter();
     this.installFollowTailListener();
@@ -156,13 +153,13 @@ export class SubscriberComponent {
   }
 
   private scrollToEnd(): void {
-    this._viewport.scrollTop = this._viewport.scrollHeight;
+    this._viewport().scrollTop = this._viewport().scrollHeight;
   }
 
   private installDestinationEmitter(): void {
     this.form.get([SUBSCRIPTION, DESTINATION])!.valueChanges
       .pipe(takeUntilDestroyed())
-      .subscribe(this.destination);
+      .subscribe((value: string) => this.destination.emit(value));
   }
 
   private installFollowTailListener(): void {