feat: added durationFormat

schummar · Mar 19, 2024 · 71e9120 · 71e9120
1 parent 8df71e3
commit 71e9120
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "intl-messageformat": "^10.5.0"
   },
   "peerDependencies": {
+    "@formatjs/intl-durationformat": "^0.2.2",
     "@types/react": ">=16.8.0",
     "react": ">=16.8.0"
   },
@@ -80,6 +81,7 @@
     }
   },
   "devDependencies": {
+    "@formatjs/intl-durationformat": "^0.2.2",
     "@js-temporal/polyfill": "^0.4.4",
     "@schummar/runp": "1.12.0",
     "@testing-library/react": "14.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/intlHelpers.ts b/src/intlHelpers.ts
@@ -1,7 +1,7 @@
 import { Cache } from './cache';
 import { toDate } from './helpers';
 import { TemporalLike } from './polyfill/temporal';
-import { IntlHelpers } from './types';
+import { DurationFormatOptions, IntlHelpers } from './types';
 
 export function intlHelpers<Output>({
   cache,
@@ -19,6 +19,7 @@ export function intlHelpers<Output>({
   numberFormatOptions?: Intl.NumberFormatOptions;
   pluralRulesOptions?: Intl.PluralRulesOptions;
   relativeTimeFormatOptions?: Intl.RelativeTimeFormatOptions;
+  durationFormatOptions?: DurationFormatOptions;
 }): IntlHelpers<Output> {
   return {
     dateTimeFormat(date, options = dateTimeFormatOptions) {
@@ -52,6 +53,14 @@ export function intlHelpers<Output>({
     relativeTimeFormat(value, unit, options = relativeTimeFormatOptions) {
       return transform((locale) => cache.get(Intl.RelativeTimeFormat, locale, options).format(value, unit));
     },
+
+    durationFormat(duration, options) {
+      const intl = Intl as { DurationFormat?: any };
+      if (!intl.DurationFormat) {
+        throw new Error('Intl.DurationFormat is not available in this environment. Try using the polyfill');
+      }
+      return transform((locale) => cache.get(intl.DurationFormat, locale, options).format(duration));
+    },
   };
 }
 

diff --git a/src/translator.ts b/src/translator.ts
@@ -21,6 +21,7 @@ export const createGetTranslator =
       numberFormatOptions,
       pluralRulesOptions,
       relativeTimeFormatOptions,
+      durationFormatOptions,
       ignoreMissingArgs,
       provideArgs,
     }: CreateTranslatorOptions<D, ProvidedArgs>,
@@ -73,6 +74,7 @@ export const createGetTranslator =
         numberFormatOptions,
         pluralRulesOptions,
         relativeTimeFormatOptions,
+        durationFormatOptions,
       }),
     });
   };

diff --git a/src/types.ts b/src/types.ts
@@ -1,6 +1,7 @@
 import { CacheOptions } from './cache';
 import { GetICUArgs } from './extractICU';
 import { TemporalLike } from './polyfill/temporal';
+import { DurationFormat } from '@formatjs/intl-durationformat';
 
 ////////////////////////////////////////////////////////////////////////////////
 // Helpers
@@ -41,6 +42,9 @@ export type Flatten<T> = T extends object
     }
   : T;
 
+export type DurationFormatOptions = Partial<ReturnType<DurationFormat['resolvedOptions']>>;
+export type DurationInput = Parameters<DurationFormat['format']>[0];
+
 ////////////////////////////////////////////////////////////////////////////////
 // Public types
 ////////////////////////////////////////////////////////////////////////////////
@@ -89,6 +93,8 @@ export type CreateTranslatorOptions<D extends Dict, ProvidedArgs extends string
     pluralRulesOptions?: Intl.PluralRulesOptions;
     /** Default options */
     relativeTimeFormatOptions?: Intl.RelativeTimeFormatOptions;
+    /** Default options */
+    durationFormatOptions?: DurationFormatOptions;
   } & (IsNever<ProvidedArgs> extends true
     ? { provideArgs?: Record<string, never> }
     : {
@@ -189,6 +195,8 @@ export interface IntlHelpers<Output = string> {
 
   /** Wraps Intl.RelativeTimeFormat.format */
   relativeTimeFormat(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): Output;
+  /** Wraps Intl.DurationFormat.format */
+  durationFormat(duration: DurationInput, options?: DurationFormatOptions): Output;
 }
 
 export type ICUArgument = string | number | boolean | Date;

diff --git a/test/_setup.ts b/test/_setup.ts
@@ -1,5 +1,6 @@
-import { afterEach } from 'vitest';
+import '@formatjs/intl-durationformat/polyfill';
 import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
 
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 

diff --git a/test/react.test.tsx b/test/react.test.tsx
@@ -312,6 +312,20 @@ forCases(
   },
 );
 
+forCases(
+  'durationFormat',
+  () => t.durationFormat({ seconds: 1 }, { style: 'long' }),
+  async (div) => {
+    expect(div.textContent).toBe('1 second');
+
+    act(() => {
+      div.click();
+    });
+
+    expect(div.textContent).toBe('1 Sekunde');
+  },
+);
+
 forCases(
   'match locales',
   () => t('key1'),

diff --git a/test/translator.test.ts b/test/translator.test.ts
@@ -325,6 +325,14 @@ test('relativeTimeFormat', async () => {
   expect(de.relativeTimeFormat(-30, 'seconds')).toBe('vor 30 Sekunden');
 });
 
+test('durationFormat', async () => {
+  const en = await getTranslator('en');
+  const de = await getTranslator('de');
+
+  expect(en.durationFormat({ seconds: 1 }, { style: 'long' })).toBe('1 second');
+  expect(de.durationFormat({ seconds: 1 }, { style: 'long' })).toBe('1 Sekunde');
+});
+
 test('clear', async () => {
   let count = 0;