-
-
Notifications
You must be signed in to change notification settings - Fork 199
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(#634) Locale pipes optimizations unit tests
- Loading branch information
Showing
6 changed files
with
658 additions
and
546 deletions.
There are no files selected for viewing
128 changes: 64 additions & 64 deletions
128
libs/transloco-locale/src/lib/pipes/base-locale.pipe.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,64 +1,64 @@ | ||
import { | ||
ChangeDetectorRef, | ||
inject, | ||
Injectable, | ||
OnDestroy, | ||
} from '@angular/core'; | ||
import { Subscription } from 'rxjs'; | ||
|
||
import { Locale } from '../../lib/transloco-locale.types'; | ||
import { TranslocoLocaleService } from '../transloco-locale.service'; | ||
|
||
type Deps = [TranslocoLocaleService, ChangeDetectorRef]; | ||
@Injectable() | ||
export abstract class BaseLocalePipe<VALUE = unknown, ARGS extends unknown[] = []> implements OnDestroy { | ||
protected localeService = inject(TranslocoLocaleService); | ||
protected cdr = inject(ChangeDetectorRef); | ||
|
||
private localeChangeSub: Subscription | null = | ||
this.localeService.localeChanges$.subscribe(() => this.invalidate()); | ||
|
||
protected lastValue?: VALUE; | ||
protected lastArgs?: string; | ||
protected lastResult = ''; | ||
protected getLocale(locale?: Locale): Locale { | ||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
return locale || this.localeService.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(); | ||
} | ||
|
||
ngOnDestroy(): void { | ||
this.localeChangeSub?.unsubscribe(); | ||
// Caretaker note: it's important to clean up references to subscriptions since they save the `next` | ||
// callback within its `destination` property, preventing classes from being GC'd. | ||
this.localeChangeSub = null; | ||
} | ||
} | ||
import { | ||
ChangeDetectorRef, | ||
inject, | ||
Injectable, | ||
OnDestroy, | ||
} from '@angular/core'; | ||
import { Subscription } from 'rxjs'; | ||
|
||
import { Locale } from '../../lib/transloco-locale.types'; | ||
import { TranslocoLocaleService } from '../transloco-locale.service'; | ||
|
||
type Deps = [TranslocoLocaleService, ChangeDetectorRef]; | ||
@Injectable() | ||
export abstract class BaseLocalePipe<VALUE = unknown, ARGS extends unknown[] = []> implements OnDestroy { | ||
protected localeService = inject(TranslocoLocaleService); | ||
protected cdr = inject(ChangeDetectorRef); | ||
|
||
private localeChangeSub: Subscription | null = | ||
this.localeService.localeChanges$.subscribe(() => this.invalidate()); | ||
|
||
protected lastValue?: VALUE; | ||
protected lastArgs?: string; | ||
|
||
protected lastResult = ''; | ||
|
||
protected getLocale(locale?: Locale): Locale { | ||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
return locale || this.localeService.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(); | ||
} | ||
|
||
ngOnDestroy(): void { | ||
this.localeChangeSub?.unsubscribe(); | ||
// Caretaker note: it's important to clean up references to subscriptions since they save the `next` | ||
// callback within its `destination` property, preventing classes from being GC'd. | ||
this.localeChangeSub = null; | ||
} | ||
} |
113 changes: 57 additions & 56 deletions
113
libs/transloco-locale/src/lib/pipes/transloco-date.pipe.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,56 +1,57 @@ | ||
import { inject, Pipe, PipeTransform } from '@angular/core'; | ||
import { isNil } from '@ngneat/transloco'; | ||
|
||
import { getDefaultOptions } from '../shared'; | ||
import { TRANSLOCO_LOCALE_CONFIG } from '../transloco-locale.config'; | ||
import { | ||
DateFormatOptions, | ||
Locale, | ||
LocaleConfig, | ||
ValidDate, | ||
} from '../transloco-locale.types'; | ||
|
||
import { BaseLocalePipe } from './base-locale.pipe'; | ||
|
||
@Pipe({ | ||
name: 'translocoDate', | ||
pure: false, | ||
standalone: true, | ||
}) | ||
export class TranslocoDatePipe | ||
extends BaseLocalePipe<ValidDate, [options?: DateFormatOptions, locale?: Locale]> | ||
implements PipeTransform { | ||
private localeConfig: LocaleConfig = inject(TRANSLOCO_LOCALE_CONFIG); | ||
|
||
/** | ||
* Transform a date into the locale's date format. | ||
* | ||
* The date expression: a `Date` object, a number | ||
* (milliseconds since UTC epoch), or an ISO string (https://www.w3.org/TR/NOTE-datetime). | ||
* | ||
* @example | ||
* | ||
* date | translocoDate: {} : en-US // 9/10/2019 | ||
* date | translocoDate: { dateStyle: 'medium', timeStyle: 'medium' } : en-US // Sep 10, 2019, 10:46:12 PM | ||
* date | translocoDate: { timeZone: 'UTC', timeStyle: 'full' } : en-US // 7:40:32 PM Coordinated Universal Time | ||
* 1 | translocoDate: { dateStyle: 'medium' } // Jan 1, 1970 | ||
* '2019-02-08' | translocoDate: { dateStyle: 'medium' } // Feb 8, 2019 | ||
*/ | ||
protected override doTransform(date: ValidDate, options: DateFormatOptions = {}, locale?: Locale) { | ||
if (isNil(date)) return ''; | ||
locale = this.getLocale(locale); | ||
|
||
return this.localeService.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; | ||
} | ||
} | ||
import { inject, Pipe, PipeTransform } from '@angular/core'; | ||
import { isNil } from '@ngneat/transloco'; | ||
|
||
import { isDate } from '../helpers'; | ||
import { getDefaultOptions } from '../shared'; | ||
import { TRANSLOCO_LOCALE_CONFIG } from '../transloco-locale.config'; | ||
import { | ||
DateFormatOptions, | ||
Locale, | ||
LocaleConfig, | ||
ValidDate, | ||
} from '../transloco-locale.types'; | ||
|
||
import { BaseLocalePipe } from './base-locale.pipe'; | ||
|
||
@Pipe({ | ||
name: 'translocoDate', | ||
pure: false, | ||
standalone: true, | ||
}) | ||
export class TranslocoDatePipe | ||
extends BaseLocalePipe<ValidDate, [options?: DateFormatOptions, locale?: Locale]> | ||
implements PipeTransform { | ||
private localeConfig: LocaleConfig = inject(TRANSLOCO_LOCALE_CONFIG); | ||
|
||
/** | ||
* Transform a date into the locale's date format. | ||
* | ||
* The date expression: a `Date` object, a number | ||
* (milliseconds since UTC epoch), or an ISO string (https://www.w3.org/TR/NOTE-datetime). | ||
* | ||
* @example | ||
* | ||
* date | translocoDate: {} : en-US // 9/10/2019 | ||
* date | translocoDate: { dateStyle: 'medium', timeStyle: 'medium' } : en-US // Sep 10, 2019, 10:46:12 PM | ||
* date | translocoDate: { timeZone: 'UTC', timeStyle: 'full' } : en-US // 7:40:32 PM Coordinated Universal Time | ||
* 1 | translocoDate: { dateStyle: 'medium' } // Jan 1, 1970 | ||
* '2019-02-08' | translocoDate: { dateStyle: 'medium' } // Feb 8, 2019 | ||
*/ | ||
protected override doTransform(date: ValidDate, options: DateFormatOptions = {}, locale?: Locale) { | ||
if (isNil(date)) return ''; | ||
locale = this.getLocale(locale); | ||
|
||
return this.localeService.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 isDate(value) ? value.getTime() : value; | ||
} | ||
} |
Oops, something went wrong.