From 124de6b60028c4f9ad3d140bc9118aca0674ad14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javier=20Mar=C3=ADn?= Date: Fri, 5 Apr 2024 16:53:18 +0200 Subject: [PATCH] perf: use onpush and signals --- .../bubble/ng-talk-bubble-channel.component.ts | 3 ++- .../ng-talk-channel-message.component.ts | 10 ++++------ .../ng-talk-channel-message-ref.component.ts | 5 +++-- .../channel/ng-talk-channel.component.html | 1 + .../channel/ng-talk-channel.component.less | 1 - .../channel/ng-talk-channel.component.ts | 17 ++++++++++++++++- .../ng-talk-channel-preview.component.ts | 7 ++++--- .../send/ng-talk-send-message.component.ts | 5 +++-- projects/ng-talk/src/lib/models/chat-message.ts | 3 ++- 9 files changed, 35 insertions(+), 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 index 20f8489..2304d98 100644 --- 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 index 474ac69..7417bac 100644 --- 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) {
- +
}
@@ -41,9 +41,7 @@ import {NgTalkChannelMessageRefComponent} from "./ref/ng-talk-channel-message-re @if (chat.settings.showNames && showAuthor) { -
{{ message.from.name }} -
+
{{ message.from().name }}
} @@ -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/projects/ng-talk/src/lib/components/channel/message/ref/ng-talk-channel-message-ref.component.ts b/projects/ng-talk/src/lib/components/channel/message/ref/ng-talk-channel-message-ref.component.ts index 53bb071..4e5c69e 100644 --- a/projects/ng-talk/src/lib/components/channel/message/ref/ng-talk-channel-message-ref.component.ts +++ b/projects/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: ` - {{ message.from.name }} + {{ message.from().name }} `, 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 index f5ae88e..4bcdb22 100644 --- 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) { @if (message | fn:isSeparatorVisible:this:messages()[index - 1]) { +
{{ message.date | relativeDate : settings }}
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 index a12d8e9..7fcfba8 100644 --- 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 index ff70719..d6b1ba4 100644 --- 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 index 8c26dd1..3904c5d 100644 --- 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";
{{ channel.name }}
- @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 index 229449c..249676a 100644 --- 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 index dc7d936..e455a10 100644 --- 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 { id?: number | string; type?: ChatMessageType; - from: ChatUser; + from: Signal; content: string; date?: Date; replyTo?: ChatMessage;