forked from jsverse/transloco
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(jsverse#632): locale pipes optimizations unit tests
- Loading branch information
Showing
9 changed files
with
396 additions
and
284 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; | ||
} | ||
} |
132 changes: 66 additions & 66 deletions
132
libs/transloco-locale/src/lib/pipes/transloco-currency.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,66 +1,66 @@ | ||
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 { | ||
Currency, | ||
Locale, | ||
LocaleConfig, | ||
NumberFormatOptions, | ||
} from '../transloco-locale.types'; | ||
|
||
import { BaseLocalePipe } from './base-locale.pipe'; | ||
|
||
@Pipe({ | ||
name: 'translocoCurrency', | ||
pure: false, | ||
standalone: true, | ||
}) | ||
export class TranslocoCurrencyPipe | ||
extends BaseLocalePipe<number | string, [ | ||
display?: 'code' | 'symbol' | 'name', | ||
numberFormatOptions?: NumberFormatOptions, | ||
currencyCode?: Currency, | ||
locale?: Locale]> | ||
implements PipeTransform | ||
{ | ||
private localeConfig: LocaleConfig = inject(TRANSLOCO_LOCALE_CONFIG); | ||
|
||
/** | ||
* Transform a given number into the locale's currency format. | ||
* | ||
* @example | ||
* | ||
* 1000000 | translocoCurrency: 'symbol' : {} : USD // $1,000,000.00 | ||
* 1000000 | translocoCurrency: 'name' : {} : USD // 1,000,000.00 US dollars | ||
* 1000000 | translocoCurrency: 'symbol' : {minimumFractionDigits: 0 } : USD // $1,000,000 | ||
* 1000000 | translocoCurrency: 'symbol' : {minimumFractionDigits: 0 } : CAD // CA$1,000,000 | ||
* 1000000 | translocoCurrency: 'narrowSymbol' : {minimumFractionDigits: 0 } : CAD // $1,000,000 | ||
* | ||
*/ | ||
protected override doTransform( | ||
value: number | string, | ||
display: 'code' | 'symbol' | 'narrowSymbol' | 'name' = 'symbol', | ||
numberFormatOptions: NumberFormatOptions = {}, | ||
currencyCode?: Currency, | ||
locale?: Locale | ||
): string { | ||
if (isNil(value)) return ''; | ||
locale = this.getLocale(locale); | ||
|
||
const options = { | ||
...getDefaultOptions(locale, 'currency', this.localeConfig), | ||
...numberFormatOptions, | ||
currencyDisplay: display, | ||
currency: currencyCode || this.localeService._resolveCurrencyCode(), | ||
}; | ||
|
||
return this.localeService.localizeNumber( | ||
value, | ||
'currency', | ||
locale, | ||
options | ||
); | ||
} | ||
} | ||
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 { | ||
Currency, | ||
Locale, | ||
LocaleConfig, | ||
NumberFormatOptions, | ||
} from '../transloco-locale.types'; | ||
|
||
import { BaseLocalePipe } from './base-locale.pipe'; | ||
|
||
@Pipe({ | ||
name: 'translocoCurrency', | ||
pure: false, | ||
standalone: true, | ||
}) | ||
export class TranslocoCurrencyPipe | ||
extends BaseLocalePipe<number | string, [ | ||
display?: 'code' | 'symbol' | 'name', | ||
numberFormatOptions?: NumberFormatOptions, | ||
currencyCode?: Currency, | ||
locale?: Locale]> | ||
implements PipeTransform | ||
{ | ||
private localeConfig: LocaleConfig = inject(TRANSLOCO_LOCALE_CONFIG); | ||
|
||
/** | ||
* Transform a given number into the locale's currency format. | ||
* | ||
* @example | ||
* | ||
* 1000000 | translocoCurrency: 'symbol' : {} : USD // $1,000,000.00 | ||
* 1000000 | translocoCurrency: 'name' : {} : USD // 1,000,000.00 US dollars | ||
* 1000000 | translocoCurrency: 'symbol' : {minimumFractionDigits: 0 } : USD // $1,000,000 | ||
* 1000000 | translocoCurrency: 'symbol' : {minimumFractionDigits: 0 } : CAD // CA$1,000,000 | ||
* 1000000 | translocoCurrency: 'narrowSymbol' : {minimumFractionDigits: 0 } : CAD // $1,000,000 | ||
* | ||
*/ | ||
protected override doTransform( | ||
value: number | string, | ||
display: 'code' | 'symbol' | 'narrowSymbol' | 'name' = 'symbol', | ||
numberFormatOptions: NumberFormatOptions = {}, | ||
currencyCode?: Currency, | ||
locale?: Locale | ||
): string { | ||
if (isNil(value)) return ''; | ||
locale = this.getLocale(locale); | ||
|
||
const options = { | ||
...getDefaultOptions(locale, 'currency', this.localeConfig), | ||
...numberFormatOptions, | ||
currencyDisplay: display, | ||
currency: currencyCode || this.localeService._resolveCurrencyCode(), | ||
}; | ||
|
||
return this.localeService.localizeNumber( | ||
value, | ||
'currency', | ||
locale, | ||
options | ||
); | ||
} | ||
} |
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.