react-intl 4.2.2 → 4.5.0

package/src/formatters/displayName.ts

@@ -1,18 +1,18 @@
-import {IntlConfig, Formatters, IntlFormatters} from '../types';
-import {filterProps} from '../utils';
+import {IntlConfig, Formatters, IntlFormatters} from '../types'
+import {filterProps} from '../utils'
 import {
   DisplayNamesOptions,
   DisplayNames as IntlDisplayNames,
-} from '@formatjs/intl-displaynames';
-import {FormatError, ErrorCode} from 'intl-messageformat';
-import {ReactIntlErrorCode, ReactIntlError} from '../error';
+} from '@formatjs/intl-displaynames'
+import {FormatError, ErrorCode} from 'intl-messageformat'
+import {ReactIntlErrorCode, ReactIntlError} from '../error'
 
 const DISPLAY_NAMES_OPTONS: Array<keyof DisplayNamesOptions> = [
   'localeMatcher',
   'style',
   'type',
   'fallback',
-];
+]
 
 export function formatDisplayName(
   {locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
@@ -20,7 +20,7 @@ export function formatDisplayName(
   value: Parameters<IntlFormatters['formatDisplayName']>[0],
   options: Parameters<IntlFormatters['formatDisplayName']>[1] = {}
 ): string | undefined {
-  const DisplayNames: typeof IntlDisplayNames = (Intl as any).DisplayNames;
+  const DisplayNames: typeof IntlDisplayNames = (Intl as any).DisplayNames
   if (!DisplayNames) {
     onError(
       new FormatError(
@@ -29,11 +29,11 @@ Try polyfilling it using "@formatjs/intl-displaynames"
 `,
         ErrorCode.MISSING_INTL_API
       )
-    );
+    )
   }
-  const filteredOptions = filterProps(options, DISPLAY_NAMES_OPTONS);
+  const filteredOptions = filterProps(options, DISPLAY_NAMES_OPTONS)
   try {
-    return getDisplayNames(locale, filteredOptions).of(value);
+    return getDisplayNames(locale, filteredOptions).of(value)
   } catch (e) {
     onError(
       new ReactIntlError(
@@ -41,6 +41,6 @@ Try polyfilling it using "@formatjs/intl-displaynames"
         'Error formatting display name.',
         e
       )
-    );
+    )
   }
 }

package/src/formatters/list.ts

@@ -1,20 +1,20 @@
-import * as React from 'react';
-import {IntlConfig, Formatters, IntlFormatters} from '../types';
-import {filterProps} from '../utils';
-import IntlListFormat, {IntlListFormatOptions} from '@formatjs/intl-listformat';
-import {FormatError, ErrorCode} from 'intl-messageformat';
-import {ReactIntlError, ReactIntlErrorCode} from '../error';
+import * as React from 'react'
+import {IntlConfig, Formatters, IntlFormatters} from '../types'
+import {filterProps} from '../utils'
+import IntlListFormat, {IntlListFormatOptions} from '@formatjs/intl-listformat'
+import {FormatError, ErrorCode} from 'intl-messageformat'
+import {ReactIntlError, ReactIntlErrorCode} from '../error'
 
 const LIST_FORMAT_OPTIONS: Array<keyof IntlListFormatOptions> = [
   'localeMatcher',
   'type',
   'style',
-];
+]
 
-const now = Date.now();
+const now = Date.now()
 
 function generateToken(i: number): string {
-  return `${now}_${i}_${now}`;
+  return `${now}_${i}_${now}`
 }
 
 export function formatList(
@@ -22,14 +22,14 @@ export function formatList(
   getListFormat: Formatters['getListFormat'],
   values: Array<string>,
   options: Parameters<IntlFormatters['formatList']>[1]
-): string;
+): string
 export function formatList(
   {locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
   getListFormat: Formatters['getListFormat'],
   values: Parameters<IntlFormatters['formatList']>[0],
   options: Parameters<IntlFormatters['formatList']>[1] = {}
 ): React.ReactNode {
-  const ListFormat: typeof IntlListFormat = (Intl as any).ListFormat;
+  const ListFormat: typeof IntlListFormat = (Intl as any).ListFormat
   if (!ListFormat) {
     onError(
       new FormatError(
@@ -38,37 +38,37 @@ Try polyfilling it using "@formatjs/intl-listformat"
 `,
         ErrorCode.MISSING_INTL_API
       )
-    );
+    )
   }
-  const filteredOptions = filterProps(options, LIST_FORMAT_OPTIONS);
+  const filteredOptions = filterProps(options, LIST_FORMAT_OPTIONS)
 
   try {
-    const richValues: Record<string, React.ReactNode> = {};
+    const richValues: Record<string, React.ReactNode> = {}
     const serializedValues = values.map((v, i) => {
       if (typeof v === 'object') {
-        const id = generateToken(i);
-        richValues[id] = v;
-        return id;
+        const id = generateToken(i)
+        richValues[id] = v
+        return id
       }
-      return String(v);
-    });
+      return String(v)
+    })
     if (!Object.keys(richValues).length) {
-      return getListFormat(locale, filteredOptions).format(serializedValues);
+      return getListFormat(locale, filteredOptions).format(serializedValues)
     }
     const parts = getListFormat(locale, filteredOptions).formatToParts(
       serializedValues
-    );
+    )
     return parts.reduce((all: Array<string | React.ReactNode>, el) => {
-      const val = el.value;
+      const val = el.value
       if (richValues[val]) {
-        all.push(richValues[val]);
+        all.push(richValues[val])
       } else if (typeof all[all.length - 1] === 'string') {
-        all[all.length - 1] += val;
+        all[all.length - 1] += val
       } else {
-        all.push(val);
+        all.push(val)
       }
-      return all;
-    }, []);
+      return all
+    }, [])
   } catch (e) {
     onError(
       new ReactIntlError(
@@ -76,8 +76,8 @@ Try polyfilling it using "@formatjs/intl-listformat"
         'Error formatting list.',
         e
       )
-    );
+    )
   }
 
-  return values;
+  return values
 }

package/src/formatters/message.ts

@@ -4,21 +4,21 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import * as React from 'react';
-import {invariant} from '@formatjs/intl-utils';
+import * as React from 'react'
+import {invariant} from '@formatjs/intl-utils'
 
 import {
   Formatters,
   IntlConfig,
   MessageDescriptor,
   CustomFormats,
-} from '../types';
+} from '../types'
 
 import IntlMessageFormat, {
   FormatXMLElementFn,
   PrimitiveType,
-} from 'intl-messageformat';
-import {ReactIntlError, ReactIntlErrorCode} from '../error';
+} from 'intl-messageformat'
+import {ReactIntlError, ReactIntlErrorCode} from '../error'
 
 function setTimeZoneInOptions(
   opts: Record<string, Intl.DateTimeFormatOptions>,
@@ -29,25 +29,25 @@ function setTimeZoneInOptions(
       all[k] = {
         timeZone,
         ...opts[k],
-      };
-      return all;
+      }
+      return all
     },
     {}
-  );
+  )
 }
 
 function deepMergeOptions(
   opts1: Record<string, Intl.DateTimeFormatOptions>,
   opts2: Record<string, Intl.DateTimeFormatOptions>
 ): Record<string, Intl.DateTimeFormatOptions> {
-  const keys = Object.keys({...opts1, ...opts2});
+  const keys = Object.keys({...opts1, ...opts2})
   return keys.reduce((all: Record<string, Intl.DateTimeFormatOptions>, k) => {
     all[k] = {
       ...(opts1[k] || {}),
       ...(opts2[k] || {}),
-    };
-    return all;
-  }, {});
+    }
+    return all
+  }, {})
 }
 
 function deepMergeFormatsAndSetTimeZone(
@@ -55,9 +55,9 @@ function deepMergeFormatsAndSetTimeZone(
   timeZone?: string
 ): CustomFormats {
   if (!timeZone) {
-    return f1;
+    return f1
   }
-  const mfFormats = IntlMessageFormat.formats;
+  const mfFormats = IntlMessageFormat.formats
   return {
     ...mfFormats,
     ...f1,
@@ -69,13 +69,13 @@ function deepMergeFormatsAndSetTimeZone(
       setTimeZoneInOptions(mfFormats.time, timeZone),
       setTimeZoneInOptions(f1.time || {}, timeZone)
     ),
-  };
+  }
 }
 
-function prepareIntlMessageFormatHtmlOutput<T>(
-  chunks: (string | T)[]
+function prepareIntlMessageFormatHtmlOutput(
+  chunks: React.ReactNodeArray
 ): React.ReactElement {
-  return React.createElement(React.Fragment, null, ...chunks);
+  return React.createElement(React.Fragment, null, ...chunks)
 }
 
 export function formatMessage(
@@ -98,8 +98,8 @@ export function formatMessage(
   state: Formatters,
   messageDescriptor?: MessageDescriptor,
   values?: Record<string, PrimitiveType>
-): string;
-export function formatMessage<T>(
+): string
+export function formatMessage(
   {
     locale,
     formats,
@@ -125,43 +125,39 @@ export function formatMessage<T>(
   values:
     | Record<
         string,
-        | string
-        | number
-        | boolean
+        | React.ReactNode
         | Date
-        | T
-        | FormatXMLElementFn<T>
-        | null
-        | undefined
+        | FormatXMLElementFn<React.ReactNode, React.ReactNode>
       >
     | undefined = {}
 ): React.ReactNode {
-  const {id, defaultMessage} = messageDescriptor;
+  const {id, defaultMessage} = messageDescriptor
 
   // `id` is a required field of a Message Descriptor.
-  invariant(!!id, '[React Intl] An `id` must be provided to format a message.');
-  const message = messages && messages[String(id)];
-  formats = deepMergeFormatsAndSetTimeZone(formats, timeZone);
-  defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone);
+  invariant(!!id, '[React Intl] An `id` must be provided to format a message.')
+  const message = messages && messages[String(id)]
+  formats = deepMergeFormatsAndSetTimeZone(formats, timeZone)
+  defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone)
 
-  let formattedMessageParts: string | T | (string | T)[] = '';
+  let formattedMessageParts: React.ReactNode = ''
 
   if (message) {
     try {
       const formatter = state.getMessageFormat(message, locale, formats, {
         formatters: state,
-      });
+      })
 
-      formattedMessageParts = formatter.format(values);
+      formattedMessageParts = formatter.format<React.ReactNode>(values)
     } catch (e) {
       onError(
         new ReactIntlError(
           ReactIntlErrorCode.FORMAT_ERROR,
           `Error formatting message: "${id}" for locale: "${locale}"` +
             (defaultMessage ? ', using default message as fallback.' : ''),
+          messageDescriptor,
           e
         )
-      );
+      )
     }
   } else if (
     !defaultMessage ||
@@ -174,9 +170,10 @@ export function formatMessage<T>(
       new ReactIntlError(
         ReactIntlErrorCode.MISSING_TRANSLATION,
         `Missing message: "${id}" for locale: "${locale}"` +
-          (defaultMessage ? ', using default message as fallback.' : '')
+          (defaultMessage ? ', using default message as fallback.' : ''),
+        messageDescriptor
       )
-    );
+    )
   }
 
   if (!formattedMessageParts && defaultMessage) {
@@ -185,17 +182,18 @@ export function formatMessage<T>(
         defaultMessage,
         defaultLocale,
         defaultFormats
-      );
+      )
 
-      formattedMessageParts = formatter.format(values);
+      formattedMessageParts = formatter.format(values)
     } catch (e) {
       onError(
         new ReactIntlError(
           ReactIntlErrorCode.FORMAT_ERROR,
           `Error formatting the default message for: "${id}"`,
+          messageDescriptor,
           e
         )
-      );
+      )
     }
   }
 
@@ -206,21 +204,20 @@ export function formatMessage<T>(
         `Cannot format message: "${id}", ` +
           `using message ${
             message || defaultMessage ? 'source' : 'id'
-          } as fallback.`
+          } as fallback.`,
+        messageDescriptor
       )
-    );
+    )
     if (typeof message === 'string') {
-      return message || defaultMessage || String(id);
+      return message || defaultMessage || String(id)
     }
-    return defaultMessage || String(id);
+    return defaultMessage || String(id)
   }
   if (Array.isArray(formattedMessageParts)) {
     if (wrapRichTextChunksInFragment) {
-      return prepareIntlMessageFormatHtmlOutput<T>(
-        formattedMessageParts as Array<string | T>
-      );
+      return prepareIntlMessageFormatHtmlOutput(formattedMessageParts)
     }
-    return formattedMessageParts;
+    return formattedMessageParts
   }
-  return formattedMessageParts as string | T;
+  return formattedMessageParts as React.ReactNode
 }

package/src/formatters/number.ts

@@ -1,7 +1,7 @@
-import {IntlConfig, Formatters, IntlFormatters} from '../types';
-import {getNamedFormat, filterProps} from '../utils';
-import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat';
-import {ReactIntlError, ReactIntlErrorCode} from '../error';
+import {IntlConfig, Formatters, IntlFormatters} from '../types'
+import {getNamedFormat, filterProps} from '../utils'
+import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat'
+import {ReactIntlError, ReactIntlErrorCode} from '../error'
 
 const NUMBER_FORMAT_OPTIONS: Array<keyof UnifiedNumberFormatOptions> = [
   'localeMatcher',
@@ -27,7 +27,7 @@ const NUMBER_FORMAT_OPTIONS: Array<keyof UnifiedNumberFormatOptions> = [
   'signDisplay',
   'unit',
   'unitDisplay',
-];
+]
 
 export function getFormatter(
   {
@@ -38,13 +38,13 @@ export function getFormatter(
   getNumberFormat: Formatters['getNumberFormat'],
   options: Parameters<IntlFormatters['formatNumber']>[1] = {}
 ): Intl.NumberFormat {
-  const {format} = options;
+  const {format} = options
   const defaults = ((format &&
     getNamedFormat(formats!, 'number', format, onError)) ||
-    {}) as UnifiedNumberFormatOptions;
-  const filteredOptions = filterProps(options, NUMBER_FORMAT_OPTIONS, defaults);
+    {}) as UnifiedNumberFormatOptions
+  const filteredOptions = filterProps(options, NUMBER_FORMAT_OPTIONS, defaults)
 
-  return getNumberFormat(locale, filteredOptions);
+  return getNumberFormat(locale, filteredOptions)
 }
 
 export function formatNumber(
@@ -54,7 +54,7 @@ export function formatNumber(
   options: Parameters<IntlFormatters['formatNumber']>[1] = {}
 ): string {
   try {
-    return getFormatter(config, getNumberFormat, options).format(value);
+    return getFormatter(config, getNumberFormat, options).format(value)
   } catch (e) {
     config.onError(
       new ReactIntlError(
@@ -62,10 +62,10 @@ export function formatNumber(
         'Error formatting number.',
         e
       )
-    );
+    )
   }
 
-  return String(value);
+  return String(value)
 }
 
 export function formatNumberToParts(
@@ -75,7 +75,7 @@ export function formatNumberToParts(
   options: Parameters<IntlFormatters['formatNumber']>[1] = {}
 ): Intl.NumberFormatPart[] {
   try {
-    return getFormatter(config, getNumberFormat, options).formatToParts(value);
+    return getFormatter(config, getNumberFormat, options).formatToParts(value)
   } catch (e) {
     config.onError(
       new ReactIntlError(
@@ -83,8 +83,8 @@ export function formatNumberToParts(
         'Error formatting number.',
         e
       )
-    );
+    )
   }
 
-  return [];
+  return []
 }

package/src/formatters/plural.ts

@@ -1,12 +1,12 @@
-import {IntlConfig, Formatters, IntlFormatters} from '../types';
-import {filterProps} from '../utils';
-import {ReactIntlErrorCode, ReactIntlError} from '../error';
-import {FormatError, ErrorCode} from 'intl-messageformat';
+import {IntlConfig, Formatters, IntlFormatters} from '../types'
+import {filterProps} from '../utils'
+import {ReactIntlErrorCode, ReactIntlError} from '../error'
+import {FormatError, ErrorCode} from 'intl-messageformat'
 
 const PLURAL_FORMAT_OPTIONS: Array<keyof Intl.PluralRulesOptions> = [
   'localeMatcher',
   'type',
-];
+]
 
 export function formatPlural(
   {locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
@@ -22,12 +22,12 @@ Try polyfilling it using "@formatjs/intl-pluralrules"
 `,
         ErrorCode.MISSING_INTL_API
       )
-    );
+    )
   }
-  const filteredOptions = filterProps(options, PLURAL_FORMAT_OPTIONS);
+  const filteredOptions = filterProps(options, PLURAL_FORMAT_OPTIONS)
 
   try {
-    return getPluralRules(locale, filteredOptions).select(value);
+    return getPluralRules(locale, filteredOptions).select(value)
   } catch (e) {
     onError(
       new ReactIntlError(
@@ -35,8 +35,8 @@ Try polyfilling it using "@formatjs/intl-pluralrules"
         'Error formatting plural.',
         e
       )
-    );
+    )
   }
 
-  return 'other';
+  return 'other'
 }

package/src/formatters/relativeTime.ts

@@ -1,16 +1,15 @@
-import {IntlConfig, IntlFormatters, Formatters} from '../types';
+import {IntlConfig, IntlFormatters, Formatters} from '../types'
 
-import {getNamedFormat, filterProps} from '../utils';
+import {getNamedFormat, filterProps} from '../utils'
 import RelativeTimeFormat, {
   IntlRelativeTimeFormatOptions,
-} from '@formatjs/intl-relativetimeformat';
-import {FormatError, ErrorCode} from 'intl-messageformat';
-import {ReactIntlError, ReactIntlErrorCode} from '../error';
+} from '@formatjs/intl-relativetimeformat'
+import {FormatError, ErrorCode} from 'intl-messageformat'
+import {ReactIntlError, ReactIntlErrorCode} from '../error'
 
-const RELATIVE_TIME_FORMAT_OPTIONS: Array<keyof IntlRelativeTimeFormatOptions> = [
-  'numeric',
-  'style',
-];
+const RELATIVE_TIME_FORMAT_OPTIONS: Array<
+  keyof IntlRelativeTimeFormatOptions
+> = ['numeric', 'style']
 
 function getFormatter(
   {
@@ -21,17 +20,17 @@ function getFormatter(
   getRelativeTimeFormat: Formatters['getRelativeTimeFormat'],
   options: Parameters<IntlFormatters['formatRelativeTime']>[2] = {}
 ): RelativeTimeFormat {
-  const {format} = options;
+  const {format} = options
 
   const defaults =
-    (!!format && getNamedFormat(formats, 'relative', format, onError)) || {};
+    (!!format && getNamedFormat(formats, 'relative', format, onError)) || {}
   const filteredOptions = filterProps(
     options,
     RELATIVE_TIME_FORMAT_OPTIONS,
     defaults as IntlRelativeTimeFormatOptions
-  );
+  )
 
-  return getRelativeTimeFormat(locale, filteredOptions);
+  return getRelativeTimeFormat(locale, filteredOptions)
 }
 
 export function formatRelativeTime(
@@ -42,9 +41,9 @@ export function formatRelativeTime(
   options: Parameters<IntlFormatters['formatRelativeTime']>[2] = {}
 ): string {
   if (!unit) {
-    unit = 'second';
+    unit = 'second'
   }
-  const RelativeTimeFormat = (Intl as any).RelativeTimeFormat;
+  const RelativeTimeFormat = (Intl as any).RelativeTimeFormat
   if (!RelativeTimeFormat) {
     config.onError(
       new FormatError(
@@ -53,13 +52,13 @@ Try polyfilling it using "@formatjs/intl-relativetimeformat"
 `,
         ErrorCode.MISSING_INTL_API
       )
-    );
+    )
   }
   try {
     return getFormatter(config, getRelativeTimeFormat, options).format(
       value,
       unit
-    );
+    )
   } catch (e) {
     config.onError(
       new ReactIntlError(
@@ -67,8 +66,8 @@ Try polyfilling it using "@formatjs/intl-relativetimeformat"
         'Error formatting relative time.',
         e
       )
-    );
+    )
   }
 
-  return String(value);
+  return String(value)
 }