perf: use onpush and signals

ideatic · Apr 5, 2024 · 124de6b · 124de6b
1 parent 8cc17cc
commit 124de6b
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 17 deletions.
diff --git a/projects/ng-talk/src/lib/components/bubble/ng-talk-bubble-channel.component.ts b/projects/ng-talk/src/lib/components/bubble/ng-talk-bubble-channel.component.ts
@@ -1,7 +1,7 @@
 import {CdkDrag, CdkDragEnd, CdkDragMove} from '@angular/cdk/drag-drop';
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {DecimalPipe} from "@angular/common";
-import {Component, computed, DestroyRef, ElementRef, forwardRef, HostListener, Input, signal, viewChild} from '@angular/core';
+import {ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, forwardRef, HostListener, Input, signal, viewChild} from '@angular/core';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {fromEvent, Subscription} from 'rxjs';
 import {ChatAdapter} from '../../models/chat-adapter';
@@ -14,6 +14,7 @@ import {NgTalkSettings} from '../ng-talk-settings';
 @Component({
   selector: 'channel-bubble',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   // https://dev.to/loukaskotas/the-power-of-forwardref-to-fix-circular-dependencies-in-angular-337k
   imports: [forwardRef(() => NgTalkChannelComponent), DecimalPipe, CdkDrag],
   template: `

diff --git a/projects/ng-talk/src/lib/components/channel/message/ng-talk-channel-message.component.ts b/projects/ng-talk/src/lib/components/channel/message/ng-talk-channel-message.component.ts
@@ -17,7 +17,7 @@ import {NgTalkChannelMessageRefComponent} from "./ref/ng-talk-channel-message-re
   template: `
     @if (chat.settings.showAvatars && showAuthor) {
       <div class="avatar">
-        <img [src]="message.from.avatar || chat.settings.defaultAvatar" (click)="chat.userClicked.emit(message.from)"/>
+        <img [src]="message.from().avatar ?? chat.settings.defaultAvatar" (click)="chat.userClicked.emit(message.from())"/>
       </div>
     }
     <div class="speech-balloon">
@@ -41,9 +41,7 @@ import {NgTalkChannelMessageRefComponent} from "./ref/ng-talk-channel-message-re
 
       <!-- Author, body and date -->
       @if (chat.settings.showNames && showAuthor) {
-        <div class="author" [style.color]="message.from.color"
-             (click)="chat.userClicked.emit(message.from)">{{ message.from.name }}
-        </div>
+        <div class="author" [style.color]="message.from().color" (click)="chat.userClicked.emit(message.from())">{{ message.from().name }}</div>
       }
 
       <ng-talk-channel-message-body [message]="message"/>
@@ -80,10 +78,10 @@ export class NgTalkChannelMessageComponent implements OnChanges, OnDestroy {
   }
 
   public ngOnChanges() {
-    this.showAuthor = !this.prevMessage || this.prevMessage.from.id != this.message.from.id || !isSameDay(this.prevMessage.date, this.message.date);
+    this.showAuthor = !this.prevMessage || this.prevMessage.from().id != this.message.from().id || !isSameDay(this.prevMessage.date, this.message.date);
 
     this._className = this.chat.settings.messageClass
-      + (this.message.from.id == this.chat.user.id ? ' sent' : 'received')
+      + (this.message.from().id == this.chat.user.id ? ' sent' : 'received')
       + (this.chat.settings.showAvatars ? ' with-avatar' : '')
       + (this.showAuthor && this.prevMessage ? ' wide' : '');
   }

diff --git a/...s/ng-talk/src/lib/components/channel/message/ref/ng-talk-channel-message-ref.component.ts b/...s/ng-talk/src/lib/components/channel/message/ref/ng-talk-channel-message-ref.component.ts
@@ -1,13 +1,14 @@
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {ChatMessage} from '../../../../models/chat-message';
 import {NgTalkChannelMessageBodyComponent} from "../body/ng-talk-channel-message-body.component";
 
 @Component({
   selector: 'ng-talk-channel-message-ref',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [NgTalkChannelMessageBodyComponent],
   template: `
-    <strong>{{ message.from.name }}</strong>
+    <strong>{{ message.from().name }}</strong>
     <ng-talk-channel-message-body [message]="message"/>
   `,
   styles: `

diff --git a/projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.html b/projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.html
@@ -26,6 +26,7 @@
     @for (message of messages(); track trackMessage(index, message); let index = $index) {
       <!-- Date separator -->
       @if (message | fn:isSeparatorVisible:this:messages()[index - 1]) {
+        <div style="clear: both"></div>
         <div class="day-separator">
           <span>{{ message.date | relativeDate : settings }}</span>
         </div>

diff --git a/projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.less b/projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.less
@@ -32,7 +32,6 @@
 
 
 .day-separator {
-  clear: both;
   text-align: center;
   margin: 15px 0;
 

diff --git a/projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.ts b/projects/ng-talk/src/lib/components/channel/ng-talk-channel.component.ts
@@ -1,4 +1,18 @@
-import {AfterViewInit, Component, DestroyRef, ElementRef, Input, OnChanges, OnInit, output, signal, SimpleChanges, viewChild, viewChildren} from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnInit,
+  output,
+  signal,
+  SimpleChanges,
+  viewChild,
+  viewChildren
+} from '@angular/core';
 import {ChatAdapter} from '../../models/chat-adapter';
 import {ChatChannel} from '../../models/chat-channel';
 import {ChatMessage, ChatMessageType} from '../../models/chat-message';
@@ -20,6 +34,7 @@ declare const ngDevMode: boolean;
 @Component({
   selector: 'ng-talk-channel',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [NgComponentOutlet, FnPipe, NgTalkSendMessageComponent, RelativeDatePipe, InViewportDirective, NgTalkChannelMessageComponent, CdkDrag],
   templateUrl: './ng-talk-channel.component.html',
   styleUrls: [

diff --git a/projects/ng-talk/src/lib/components/channel/preview/ng-talk-channel-preview.component.ts b/projects/ng-talk/src/lib/components/channel/preview/ng-talk-channel-preview.component.ts
@@ -1,4 +1,4 @@
-import {Component, Inject, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Inject, Input} from '@angular/core';
 import {ChatChannel, ChatChannelType} from '../../../models/chat-channel';
 import {ChatMessageType} from '../../../models/chat-message';
 import type {NgTalkChannelListComponent} from '../../channel-list/ng-talk-channel-list.component';
@@ -8,6 +8,7 @@ import {DecimalPipe} from "@angular/common";
 @Component({
   selector: 'ng-talk-channel-preview',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [DecimalPipe],
   template: `
     @if (channels.settings.showChannelsIcons) {
@@ -17,8 +18,8 @@ import {DecimalPipe} from "@angular/common";
       <div class="channel-name">{{ channel.name }}</div>
       <div class="channel-status">
         <div class="last-message">
-          @if (channel.lastMessage()?.from && channel.type == ChannelType.Group) {
-            {{ channel.lastMessage().from.name }}:&ngsp;
+          @if (channel.lastMessage()?.from() && channel.type == ChannelType.Group) {
+            {{ channel.lastMessage().from().name }}:&ngsp;
           }
 
           @switch (channel.lastMessage()?.type) {

diff --git a/projects/ng-talk/src/lib/components/channel/send/ng-talk-send-message.component.ts b/projects/ng-talk/src/lib/components/channel/send/ng-talk-send-message.component.ts
@@ -1,4 +1,4 @@
-import {Component, DestroyRef, ElementRef, Inject, Optional, viewChild} from '@angular/core';
+import {ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Inject, Optional, signal, viewChild} from '@angular/core';
 import {FormsModule} from "@angular/forms";
 import {ChatChannel} from '../../../models/chat-channel';
 import {ChatMessage, ChatMessageType} from '../../../models/chat-message';
@@ -13,6 +13,7 @@ import {growAnimation} from './grow-animation';
 @Component({
   selector: 'ng-talk-send-message',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [FormsModule, NgTalkSendEmojiComponent, NgTalkChannelMessageRefComponent, NgTalkSendGifComponent, NgTalkSendEmojiComponent],
   template: `
     @if (chat.channel?.blocked) {
@@ -99,7 +100,7 @@ export class NgTalkSendMessageComponent {
     if (this.chat.channel && !this.chat.channel.disabled) {
       const fullMessage = {
         replyTo: this.chat.replyingTo,
-        from: this.chat.user,
+        from: signal(this.chat.user),
         ...message
       } as ChatMessage;
 

diff --git a/projects/ng-talk/src/lib/models/chat-message.ts b/projects/ng-talk/src/lib/models/chat-message.ts
@@ -1,4 +1,5 @@
 import {ChatUser} from './chat-user';
+import {Signal} from "@angular/core";
 
 export enum ChatMessageType {
   Text = 'text',
@@ -10,7 +11,7 @@ export enum ChatMessageType {
 export interface ChatMessage<T = any> {
   id?: number | string;
   type?: ChatMessageType;
-  from: ChatUser;
+  from: Signal<ChatUser>;
   content: string;
   date?: Date;
   replyTo?: ChatMessage;