fix(use-i18n): do not use typescript global namespace (#343)

* fix(use-i18n): do not use typescript global namespace

* fix: last one

Author: chambo-e

packages/use-i18n/src/formatters.ts

@@ -3,6 +3,22 @@ import IntlTranslationFormat from 'intl-messageformat'
 
 // Deeply inspired by https://github.com/formatjs/formatjs/blob/7406e526a9c5666cee22cc2316dad1fa1d88697c/packages/intl-messageformat/src/core.ts
 
+// TS does not include non standard API
+// Intl.ListFormat in at TC39 stage 4 and is widely adopted in browsers
+// So we expose homegrown types
+// https://github.com/tc39/proposal-intl-list-format
+export interface IntlListFormatOptions {
+  localeMatcher?: 'best fit' | 'lookup'
+  type?: 'conjunction' | 'disjunction' | 'unit'
+  style?: 'long' | 'short' | 'narrow'
+}
+
+declare abstract class IntlListFormat {
+  constructor(locales?: string | string[], options?: IntlListFormatOptions);
+
+  format: (items: string[]) => string;
+}
+
 interface BaseFormatters {
   getNumberFormat(
     ...args: ConstructorParameters<typeof Intl.NumberFormat>
@@ -14,8 +30,8 @@ interface BaseFormatters {
     ...args: ConstructorParameters<typeof Intl.PluralRules>
   ): Intl.PluralRules
   getListFormat(
-    ...args: ConstructorParameters<typeof Intl.ListFormat>
-  ): Intl.ListFormat
+    ...args: ConstructorParameters<typeof IntlListFormat>
+  ): IntlListFormat
 }
 
 function createFastMemoizeCache<V>(): Cache<string, V> {
@@ -40,8 +56,10 @@ const baseFormatters: BaseFormatters = {
     cache: createFastMemoizeCache<Intl.DateTimeFormat>(),
     strategy: strategies.variadic,
   }),
-  getListFormat: memoize((...args) => new Intl.ListFormat(...args), {
-    cache: createFastMemoizeCache<Intl.ListFormat>(),
+  // @ts-expect-error we assume Intl.ListFormat exists in our current context
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  getListFormat: memoize((...args) => new Intl.ListFormat(...args) as IntlListFormat, {
+    cache: createFastMemoizeCache<IntlListFormat>(),
     strategy: strategies.variadic,
   }),
   getNumberFormat: memoize((...args) => new Intl.NumberFormat(...args), {

packages/use-i18n/src/usei18n.tsx

@@ -14,10 +14,12 @@ import ReactDOM from 'react-dom'
 import 'intl-pluralrules'
 import dateFormat, { FormatDateOptions } from './formatDate'
 import unitFormat, { FormatUnitOptions } from './formatUnit'
-import formatters from './formatters'
+import formatters, { IntlListFormatOptions } from './formatters'
 
 const LOCALE_ITEM_STORAGE = 'locale'
 
+type PrimitiveType = string | number | boolean | null | undefined | Date;
+
 type Translations = Record<string, string> & { prefix?: string }
 type TranslationsByLocales = Record<string, Translations>
 type TranslateFn = (key: string, context?: Record<string, PrimitiveType>) => string
@@ -59,7 +61,7 @@ interface Context {
   dateFnsLocale?: Locale,
   datetime: (date: Date | number, options?: Intl.DateTimeFormatOptions) => string,
   formatDate: (value: Date | number | string, options: FormatDateOptions) => string,
-  formatList: (listFormat: string[], options?: Intl.ListFormatOptions) => string,
+  formatList: (listFormat: string[], options?: IntlListFormatOptions) => string,
   formatNumber: (numb: number, options?: Intl.NumberFormatOptions) => string,
   formatUnit: (value: number, options: FormatUnitOptions) => string,
   loadTranslations: (namespace: string, load?: LoadTranslationsFn) => Promise<string>,
@@ -213,7 +215,7 @@ const I18nContextProvider = ({
   )
 
   const formatList = useCallback(
-    (listFormat: string[], options?: Intl.ListFormatOptions) =>
+    (listFormat: string[], options?: IntlListFormatOptions) =>
     formatters.getListFormat(currentLocale, options).format(listFormat),
     [currentLocale],
   )