fix(#635) Locale pipes optimizations

Author: ben12

libs/transloco-locale/src/lib/pipes/transloco-currency.pipe.ts

@@ -22,7 +22,11 @@ import { TranslocoLocalePipe } from './transloco-locale.pipe';
   pure: false,
 })
 export class TranslocoCurrencyPipe
-  extends TranslocoLocalePipe
+  extends TranslocoLocalePipe<number | string, [
+                              display?: 'code' | 'symbol' | 'name',
+                              numberFormatOptions?: NumberFormatOptions,
+                              currencyCode?: Currency,
+                              locale?: Locale]>
   implements PipeTransform, OnDestroy
 {
   constructor(
@@ -43,7 +47,7 @@ export class TranslocoCurrencyPipe
    * 1000000 | translocoCurrency: 'symbol' : {minimumFractionDigits: 0 } : USD // $1,000,000
    *
    */
-  transform(
+  protected override doTransform(
     value: number | string,
     display: 'code' | 'symbol' | 'name' = 'symbol',
     numberFormatOptions: NumberFormatOptions = {},

libs/transloco-locale/src/lib/pipes/transloco-date.pipe.ts

@@ -22,7 +22,7 @@ import { TranslocoLocalePipe } from './transloco-locale.pipe';
   pure: false,
 })
 export class TranslocoDatePipe
-  extends TranslocoLocalePipe
+  extends TranslocoLocalePipe<ValidDate, [options?: DateFormatOptions, locale?: Locale]>
   implements PipeTransform, OnDestroy
 {
   constructor(
@@ -47,14 +47,22 @@ export class TranslocoDatePipe
    * 1 | translocoDate: { dateStyle: 'medium' } // Jan 1, 1970
    * '2019-02-08' | translocoDate: { dateStyle: 'medium' } // Feb 8, 2019
    */
-  transform(date: ValidDate, options: DateFormatOptions = {}, locale?: Locale) {
+  protected override doTransform(date: ValidDate, options: DateFormatOptions = {}, locale?: Locale) {
     if (isNil(date)) return '';
     locale = this.getLocale(locale);
 
     return this.translocoLocaleService.localizeDate(date, locale, {
       ...getDefaultOptions(locale, 'date', this.localeConfig),
       ...options,
     });
+  } 
+
+  protected override isSameValue(value?: ValidDate) {
+    return this.getComparableDate(this.lastValue) === this.getComparableDate(value);
+  }
+
+  private getComparableDate(value?: any) {
+    return value?.getTime ? value.getTime() : value;
   }
 
   ngOnDestroy(): void {

libs/transloco-locale/src/lib/pipes/transloco-decimal.pipe.ts

@@ -21,7 +21,7 @@ import { TranslocoLocalePipe } from './transloco-locale.pipe';
   pure: false,
 })
 export class TranslocoDecimalPipe
-  extends TranslocoLocalePipe
+  extends TranslocoLocalePipe<string | number, [numberFormatOptions?: NumberFormatOptions, locale?: Locale]>
   implements PipeTransform, OnDestroy
 {
   constructor(
@@ -41,7 +41,7 @@ export class TranslocoDecimalPipe
    * 1234567890 | translocoDecimal: {useGrouping: false}: en-US // 1234567890
    *
    */
-  transform(
+  protected override doTransform(
     value: string | number,
     numberFormatOptions: NumberFormatOptions = {},
     locale?: Locale

libs/transloco-locale/src/lib/pipes/transloco-locale.pipe.ts

@@ -3,12 +3,17 @@ import { Subscription } from 'rxjs';
 import { Locale } from '../../lib/transloco-locale.types';
 import { TranslocoLocaleService } from '../transloco-locale.service';
 
-export class TranslocoLocalePipe {
+export abstract class TranslocoLocalePipe<VALUE = unknown, ARGS extends unknown[] = []> {
   private subscription: Subscription | null =
     this.translocoLocaleService.localeChanges$.subscribe({
-      next: () => this.cdr.markForCheck(),
+      next: () => this.invalidate(),
     });
 
+  protected lastValue?: VALUE;
+  protected lastArgs?: string;
+
+  protected lastResult = '';
+
   constructor(
     protected translocoLocaleService: TranslocoLocaleService,
     protected cdr: ChangeDetectorRef
@@ -19,6 +24,33 @@ export class TranslocoLocalePipe {
     return locale || this.translocoLocaleService.getLocale()!;
   }
 
+  transform(value: VALUE, ...args: ARGS): string {
+    if (this.isSameValue(value) && this.isSameArgs(...args)) {
+      return this.lastResult;
+    }
+    this.lastResult = this.doTransform(value, ...args);
+    this.lastValue = value;
+    this.lastArgs = JSON.stringify(args);
+    return this.lastResult;
+  }
+
+  protected abstract doTransform(value: VALUE, ...args: ARGS): string;
+
+  protected isSameValue(value: VALUE): boolean {
+    return this.lastValue === value;
+  }
+
+  protected isSameArgs(...args: ARGS): boolean {
+    return JSON.stringify(args) === this.lastArgs;
+  }
+
+  invalidate() {
+    this.lastValue = undefined;
+    this.lastArgs = undefined;
+    this.lastResult = '';
+    this.cdr.markForCheck();
+  }
+
   onDestroy(): void {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     this.subscription!.unsubscribe();

libs/transloco-locale/src/lib/pipes/transloco-percent.pipe.ts

@@ -21,7 +21,7 @@ import { TranslocoLocalePipe } from './transloco-locale.pipe';
   pure: false,
 })
 export class TranslocoPercentPipe
-  extends TranslocoLocalePipe
+  extends TranslocoLocalePipe<number | string, [numberFormatOptions?: NumberFormatOptions, locale?: Locale]>
   implements PipeTransform, OnDestroy
 {
   constructor(
@@ -41,7 +41,7 @@ export class TranslocoPercentPipe
    * "1" | translocoPercent : {} : en-US // 100%
    *
    */
-  transform(
+  protected override doTransform(
     value: number | string,
     numberFormatOptions: NumberFormatOptions = {},
     locale?: Locale