react-intl 3.7.0 → 3.9.2

package/src/formatters/message.ts

@@ -0,0 +1,241 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import * as React from 'react';
+// Since rollup cannot deal with namespace being a function,
+// this is to interop with TypeScript since `invariant`
+// does not export a default
+// https://github.com/rollup/rollup/issues/1267
+import * as invariant_ from 'invariant';
+const invariant: typeof invariant_ = (invariant_ as any).default || invariant_;
+
+import {
+  Formatters,
+  IntlConfig,
+  MessageDescriptor,
+  CustomFormats,
+} from '../types';
+
+import {createError, escape} from '../utils';
+import IntlMessageFormat, {
+  FormatXMLElementFn,
+  PrimitiveType,
+} from 'intl-messageformat';
+
+function setTimeZoneInOptions(
+  opts: Record<string, Intl.DateTimeFormatOptions>,
+  timeZone: string
+): Record<string, Intl.DateTimeFormatOptions> {
+  return Object.keys(opts).reduce(
+    (all: Record<string, Intl.DateTimeFormatOptions>, k) => {
+      all[k] = {
+        timeZone,
+        ...opts[k],
+      };
+      return all;
+    },
+    {}
+  );
+}
+
+function deepMergeOptions(
+  opts1: Record<string, Intl.DateTimeFormatOptions>,
+  opts2: Record<string, Intl.DateTimeFormatOptions>
+): Record<string, Intl.DateTimeFormatOptions> {
+  const keys = Object.keys({...opts1, ...opts2});
+  return keys.reduce((all: Record<string, Intl.DateTimeFormatOptions>, k) => {
+    all[k] = {
+      ...(opts1[k] || {}),
+      ...(opts2[k] || {}),
+    };
+    return all;
+  }, {});
+}
+
+function deepMergeFormatsAndSetTimeZone(
+  f1: CustomFormats,
+  timeZone?: string
+): CustomFormats {
+  if (!timeZone) {
+    return f1;
+  }
+  const mfFormats = IntlMessageFormat.formats;
+  return {
+    ...mfFormats,
+    ...f1,
+    date: deepMergeOptions(
+      setTimeZoneInOptions(mfFormats.date, timeZone),
+      setTimeZoneInOptions(f1.date || {}, timeZone)
+    ),
+    time: deepMergeOptions(
+      setTimeZoneInOptions(mfFormats.time, timeZone),
+      setTimeZoneInOptions(f1.time || {}, timeZone)
+    ),
+  };
+}
+
+export function formatMessage(
+  {
+    locale,
+    formats,
+    messages,
+    defaultLocale,
+    defaultFormats,
+    onError,
+  }: Pick<
+    IntlConfig,
+    | 'locale'
+    | 'formats'
+    | 'messages'
+    | 'defaultLocale'
+    | 'defaultFormats'
+    | 'onError'
+  >,
+  state: Formatters,
+  messageDescriptor?: MessageDescriptor,
+  values?: Record<string, PrimitiveType>
+): string;
+export function formatMessage(
+  {
+    locale,
+    formats,
+    messages,
+    defaultLocale,
+    defaultFormats,
+    onError,
+    timeZone,
+  }: Pick<
+    IntlConfig,
+    | 'locale'
+    | 'formats'
+    | 'messages'
+    | 'defaultLocale'
+    | 'defaultFormats'
+    | 'onError'
+    | 'timeZone'
+  >,
+  state: Formatters,
+  messageDescriptor: MessageDescriptor = {id: ''},
+  values: Record<
+    string,
+    PrimitiveType | React.ReactElement | FormatXMLElementFn
+  > = {}
+): string | React.ReactNodeArray {
+  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.');
+  if (!id) {
+    throw new Error(
+      '[React Intl] An `id` must be provided to format a message.'
+    );
+  }
+  const message = messages && messages[id];
+  formats = deepMergeFormatsAndSetTimeZone(formats, timeZone);
+  defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone);
+
+  let formattedMessageParts: Array<string | object> = [];
+
+  if (message) {
+    try {
+      const formatter = state.getMessageFormat(message, locale, formats, {
+        formatters: state,
+      });
+
+      formattedMessageParts = formatter.formatHTMLMessage(values);
+    } catch (e) {
+      onError(
+        createError(
+          `Error formatting message: "${id}" for locale: "${locale}"` +
+            (defaultMessage ? ', using default message as fallback.' : ''),
+          e
+        )
+      );
+    }
+  } else {
+    // This prevents warnings from littering the console in development
+    // when no `messages` are passed into the <IntlProvider> for the
+    // default locale, and a default message is in the source.
+    if (
+      !defaultMessage ||
+      (locale && locale.toLowerCase() !== defaultLocale.toLowerCase())
+    ) {
+      onError(
+        createError(
+          `Missing message: "${id}" for locale: "${locale}"` +
+            (defaultMessage ? ', using default message as fallback.' : '')
+        )
+      );
+    }
+  }
+
+  if (!formattedMessageParts.length && defaultMessage) {
+    try {
+      const formatter = state.getMessageFormat(
+        defaultMessage,
+        defaultLocale,
+        defaultFormats
+      );
+
+      formattedMessageParts = formatter.formatHTMLMessage(values);
+    } catch (e) {
+      onError(
+        createError(`Error formatting the default message for: "${id}"`, e)
+      );
+    }
+  }
+
+  if (!formattedMessageParts.length) {
+    onError(
+      createError(
+        `Cannot format message: "${id}", ` +
+          `using message ${
+            message || defaultMessage ? 'source' : 'id'
+          } as fallback.`
+      )
+    );
+    if (typeof message === 'string') {
+      return message || defaultMessage || id;
+    }
+    return defaultMessage || id;
+  }
+  if (
+    formattedMessageParts.length === 1 &&
+    typeof formattedMessageParts[0] === 'string'
+  ) {
+    return (formattedMessageParts[0] as string) || defaultMessage || id;
+  }
+  return formattedMessageParts;
+}
+
+export function formatHTMLMessage(
+  config: Pick<
+    IntlConfig,
+    | 'locale'
+    | 'formats'
+    | 'messages'
+    | 'defaultLocale'
+    | 'defaultFormats'
+    | 'onError'
+  >,
+  state: Formatters,
+  messageDescriptor: MessageDescriptor = {id: ''},
+  rawValues: Record<string, PrimitiveType> = {}
+): React.ReactNode {
+  // Process all the values before they are used when formatting the ICU
+  // Message string. Since the formatted message might be injected via
+  // `innerHTML`, all String-based values need to be HTML-escaped.
+  const escapedValues = Object.keys(rawValues).reduce(
+    (escaped: Record<string, any>, name) => {
+      const value = rawValues[name];
+      escaped[name] = typeof value === 'string' ? escape(value) : value;
+      return escaped;
+    },
+    {}
+  );
+
+  return formatMessage(config, state, messageDescriptor, escapedValues);
+}

package/src/formatters/number.ts

@@ -0,0 +1,77 @@
+import {IntlConfig, Formatters, IntlFormatters} from '../types';
+import {getNamedFormat, filterProps, createError} from '../utils';
+import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat';
+
+const NUMBER_FORMAT_OPTIONS: Array<keyof UnifiedNumberFormatOptions> = [
+  'localeMatcher',
+
+  'style',
+  'currency',
+  'currencyDisplay',
+  'unit',
+  'unitDisplay',
+  'useGrouping',
+
+  'minimumIntegerDigits',
+  'minimumFractionDigits',
+  'maximumFractionDigits',
+  'minimumSignificantDigits',
+  'maximumSignificantDigits',
+
+  // Unified NumberFormat (Stage 3 as of 10/22/19)
+  'compactDisplay',
+  'currencyDisplay',
+  'currencySign',
+  'notation',
+  'signDisplay',
+  'unit',
+  'unitDisplay',
+];
+
+export function getFormatter(
+  {
+    locale,
+    formats,
+    onError,
+  }: Pick<IntlConfig, 'locale' | 'formats' | 'onError'>,
+  getNumberFormat: Formatters['getNumberFormat'],
+  options: Parameters<IntlFormatters['formatNumber']>[1] = {}
+): Intl.NumberFormat {
+  const {format} = options;
+  const defaults = ((format &&
+    getNamedFormat(formats!, 'number', format, onError)) ||
+    {}) as UnifiedNumberFormatOptions;
+  const filteredOptions = filterProps(options, NUMBER_FORMAT_OPTIONS, defaults);
+
+  return getNumberFormat(locale, filteredOptions);
+}
+
+export function formatNumber(
+  config: Pick<IntlConfig, 'locale' | 'formats' | 'onError'>,
+  getNumberFormat: Formatters['getNumberFormat'],
+  value: Parameters<IntlFormatters['formatNumber']>[0],
+  options: Parameters<IntlFormatters['formatNumber']>[1] = {}
+): string {
+  try {
+    return getFormatter(config, getNumberFormat, options).format(value);
+  } catch (e) {
+    config.onError(createError('Error formatting number.', e));
+  }
+
+  return String(value);
+}
+
+export function formatNumberToParts(
+  config: Pick<IntlConfig, 'locale' | 'formats' | 'onError'>,
+  getNumberFormat: Formatters['getNumberFormat'],
+  value: Parameters<IntlFormatters['formatNumber']>[0],
+  options: Parameters<IntlFormatters['formatNumber']>[1] = {}
+): Intl.NumberFormatPart[] {
+  try {
+    return getFormatter(config, getNumberFormat, options).formatToParts(value);
+  } catch (e) {
+    config.onError(createError('Error formatting number.', e));
+  }
+
+  return [];
+}

package/src/formatters/plural.ts

@@ -0,0 +1,31 @@
+import {IntlConfig, Formatters, IntlFormatters} from '../types';
+import {filterProps, createError} from '../utils';
+
+const PLURAL_FORMAT_OPTIONS: Array<keyof Intl.PluralRulesOptions> = [
+  'localeMatcher',
+  'type',
+];
+
+export function formatPlural(
+  {locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
+  getPluralRules: Formatters['getPluralRules'],
+  value: Parameters<IntlFormatters['formatPlural']>[0],
+  options: Parameters<IntlFormatters['formatPlural']>[1] = {}
+): string {
+  if (!Intl.PluralRules) {
+    onError(
+      createError(`Intl.PluralRules is not available in this environment.
+Try polyfilling it using "@formatjs/intl-pluralrules"
+`)
+    );
+  }
+  const filteredOptions = filterProps(options, PLURAL_FORMAT_OPTIONS);
+
+  try {
+    return getPluralRules(locale, filteredOptions).select(value);
+  } catch (e) {
+    onError(createError('Error formatting plural.', e));
+  }
+
+  return 'other';
+}

package/src/formatters/relativeTime.ts

@@ -0,0 +1,63 @@
+import {IntlConfig, IntlFormatters, Formatters} from '../types';
+
+import {getNamedFormat, filterProps, createError} from '../utils';
+import RelativeTimeFormat, {
+  IntlRelativeTimeFormatOptions,
+} from '@formatjs/intl-relativetimeformat';
+
+const RELATIVE_TIME_FORMAT_OPTIONS: Array<keyof IntlRelativeTimeFormatOptions> = [
+  'numeric',
+  'style',
+];
+
+function getFormatter(
+  {
+    locale,
+    formats,
+    onError,
+  }: Pick<IntlConfig, 'locale' | 'formats' | 'onError'>,
+  getRelativeTimeFormat: Formatters['getRelativeTimeFormat'],
+  options: Parameters<IntlFormatters['formatRelativeTime']>[2] = {}
+): RelativeTimeFormat {
+  const {format} = options;
+
+  const defaults =
+    (!!format && getNamedFormat(formats, 'relative', format, onError)) || {};
+  const filteredOptions = filterProps(
+    options,
+    RELATIVE_TIME_FORMAT_OPTIONS,
+    defaults as IntlRelativeTimeFormatOptions
+  );
+
+  return getRelativeTimeFormat(locale, filteredOptions);
+}
+
+export function formatRelativeTime(
+  config: Pick<IntlConfig, 'locale' | 'formats' | 'onError'>,
+  getRelativeTimeFormat: Formatters['getRelativeTimeFormat'],
+  value: Parameters<IntlFormatters['formatRelativeTime']>[0],
+  unit?: Parameters<IntlFormatters['formatRelativeTime']>[1],
+  options: Parameters<IntlFormatters['formatRelativeTime']>[2] = {}
+): string {
+  if (!unit) {
+    unit = 'second';
+  }
+  const RelativeTimeFormat = (Intl as any).RelativeTimeFormat;
+  if (!RelativeTimeFormat) {
+    config.onError(
+      createError(`Intl.RelativeTimeFormat is not available in this environment.
+Try polyfilling it using "@formatjs/intl-relativetimeformat"
+`)
+    );
+  }
+  try {
+    return getFormatter(config, getRelativeTimeFormat, options).format(
+      value,
+      unit
+    );
+  } catch (e) {
+    config.onError(createError('Error formatting relative time.', e));
+  }
+
+  return String(value);
+}

package/src/index.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+import * as React from 'react';
+export * from './types';
+export {defineMessages} from '@formatjs/macro';
+import {
+  createFormattedComponent,
+  createFormattedDateTimePartsComponent,
+} from './components/createFormattedComponent';
+import {CustomFormatConfig} from './types';
+import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat';
+import {IntlListFormatOptions} from '@formatjs/intl-listformat';
+export {
+  default as injectIntl,
+  Provider as RawIntlProvider,
+  Context as IntlContext,
+  WithIntlProps,
+  WrappedComponentProps,
+} from './components/injectIntl';
+export {default as useIntl} from './components/useIntl';
+export {default as IntlProvider, createIntl} from './components/provider';
+// IMPORTANT: Explicit here to prevent api-extractor from outputing `import('./types').CustomFormatConfig`
+export const FormattedDate: React.FC<Intl.DateTimeFormatOptions &
+  CustomFormatConfig & {
+    value: string | number | Date | undefined;
+  }> = createFormattedComponent('formatDate');
+export const FormattedTime: React.FC<Intl.DateTimeFormatOptions &
+  CustomFormatConfig & {
+    value: string | number | Date | undefined;
+  }> = createFormattedComponent('formatTime');
+export const FormattedNumber: React.FC<UnifiedNumberFormatOptions &
+  CustomFormatConfig & {
+    value: number;
+  }> = createFormattedComponent('formatNumber');
+export const FormattedList: React.FC<IntlListFormatOptions & {
+  value: React.ReactNode[];
+}> = createFormattedComponent('formatList');
+export const FormattedDateParts = createFormattedDateTimePartsComponent(
+  'formatDate'
+);
+export const FormattedTimeParts = createFormattedDateTimePartsComponent(
+  'formatTime'
+);
+export {FormattedNumberParts} from './components/createFormattedComponent';
+export {default as FormattedRelativeTime} from './components/relative';
+export {default as FormattedPlural} from './components/plural';
+export {default as FormattedMessage} from './components/message';
+export {default as FormattedHTMLMessage} from './components/html-message';
+export {createIntlCache} from './utils';

package/src/tsconfig.cjs.json

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../dist",
+        "module": "commonjs",
+        "target": "es5",
+    }
+}

package/src/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../lib",
+        "baseUrl": ".",
+        "lib": ["dom", "es2015", "esnext.intl", "es2018.intl", "es2017.intl"]
+    }
+}

package/src/types.ts

@@ -0,0 +1,160 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+import * as React from 'react';
+import IntlMessageFormat, {
+  Formats,
+  PrimitiveType,
+  FormatXMLElementFn,
+} from 'intl-messageformat';
+import IntlRelativeTimeFormat, {
+  IntlRelativeTimeFormatOptions,
+} from '@formatjs/intl-relativetimeformat';
+import {MessageFormatElement} from 'intl-messageformat-parser';
+import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat';
+import IntlListFormat, {IntlListFormatOptions} from '@formatjs/intl-listformat';
+
+export interface IntlConfig {
+  locale: string;
+  timeZone?: string;
+  formats: CustomFormats;
+  textComponent?: React.ComponentType | keyof React.ReactHTML;
+  messages: Record<string, string> | Record<string, MessageFormatElement[]>;
+  defaultLocale: string;
+  defaultFormats: CustomFormats;
+  onError(err: string): void;
+}
+
+export interface CustomFormats extends Partial<Formats> {
+  relative?: Record<string, IntlRelativeTimeFormatOptions>;
+}
+
+export interface CustomFormatConfig {
+  format?: string;
+}
+
+export type FormatDateOptions = Exclude<
+  Intl.DateTimeFormatOptions,
+  'localeMatcher'
+> &
+  CustomFormatConfig;
+export type FormatNumberOptions = Exclude<
+  UnifiedNumberFormatOptions,
+  'localeMatcher'
+> &
+  CustomFormatConfig;
+export type FormatRelativeTimeOptions = Exclude<
+  IntlRelativeTimeFormatOptions,
+  'localeMatcher'
+> &
+  CustomFormatConfig;
+export type FormatPluralOptions = Exclude<
+  Intl.PluralRulesOptions,
+  'localeMatcher'
+> &
+  CustomFormatConfig;
+
+export type FormatListOptions = Exclude<IntlListFormatOptions, 'localeMatcher'>;
+
+export interface IntlFormatters {
+  formatDate(
+    value: Parameters<Intl.DateTimeFormat['format']>[0] | string,
+    opts?: FormatDateOptions
+  ): string;
+  formatTime(
+    value: Parameters<Intl.DateTimeFormat['format']>[0] | string,
+    opts?: FormatDateOptions
+  ): string;
+  formatDateToParts(
+    value: Parameters<Intl.DateTimeFormat['format']>[0] | string,
+    opts?: FormatDateOptions
+  ): Intl.DateTimeFormatPart[];
+  formatTimeToParts(
+    value: Parameters<Intl.DateTimeFormat['format']>[0] | string,
+    opts?: FormatDateOptions
+  ): Intl.DateTimeFormatPart[];
+  formatRelativeTime(
+    value: Parameters<IntlRelativeTimeFormat['format']>[0],
+    unit?: Parameters<IntlRelativeTimeFormat['format']>[1],
+    opts?: FormatRelativeTimeOptions
+  ): string;
+  formatNumber(
+    value: Parameters<Intl.NumberFormat['format']>[0],
+    opts?: FormatNumberOptions
+  ): string;
+  formatNumberToParts(
+    value: Parameters<Intl.NumberFormat['format']>[0],
+    opts?: FormatNumberOptions
+  ): Intl.NumberFormatPart[];
+  formatPlural(
+    value: Parameters<Intl.PluralRules['select']>[0],
+    opts?: FormatPluralOptions
+  ): ReturnType<Intl.PluralRules['select']>;
+  formatMessage(
+    descriptor: MessageDescriptor,
+    values?: Record<string, PrimitiveType>
+  ): string;
+  formatMessage(
+    descriptor: MessageDescriptor,
+    values?: Record<
+      string,
+      PrimitiveType | React.ReactElement | FormatXMLElementFn
+    >
+  ): string | React.ReactNodeArray;
+  formatHTMLMessage(
+    descriptor: MessageDescriptor,
+    values?: Record<string, PrimitiveType>
+  ): React.ReactNode;
+  formatList(
+    values: Array<string>,
+    opts?: FormatListOptions
+  ): string;
+  formatList(
+    values: Array<string | React.ReactNode>,
+    opts?: FormatListOptions
+  ): React.ReactNode;
+}
+
+export interface Formatters {
+  getDateTimeFormat(
+    ...args: ConstructorParameters<typeof Intl.DateTimeFormat>
+  ): Intl.DateTimeFormat;
+  getNumberFormat(
+    ...args: ConstructorParameters<typeof Intl.NumberFormat>
+  ): Intl.NumberFormat;
+  getMessageFormat(
+    ...args: ConstructorParameters<typeof IntlMessageFormat>
+  ): IntlMessageFormat;
+  getRelativeTimeFormat(
+    ...args: ConstructorParameters<typeof IntlRelativeTimeFormat>
+  ): IntlRelativeTimeFormat;
+  getPluralRules(
+    ...args: ConstructorParameters<typeof Intl.PluralRules>
+  ): Intl.PluralRules;
+  getListFormat(
+    ...args: ConstructorParameters<typeof IntlListFormat>
+  ): IntlListFormat;
+}
+
+export interface IntlShape extends IntlConfig, IntlFormatters {
+  formatters: Formatters;
+}
+
+export interface IntlCache {
+  dateTime: Record<string, Intl.DateTimeFormat>;
+  number: Record<string, Intl.NumberFormat>;
+  message: Record<string, IntlMessageFormat>;
+  relativeTime: Record<string, IntlRelativeTimeFormat>;
+  pluralRules: Record<string, Intl.PluralRules>;
+  list: Record<string, IntlListFormat>;
+}
+
+export interface MessageDescriptor {
+  id?: string;
+  description?: string | object;
+  defaultMessage?: string;
+}
+
+export type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;