use-intl 2.19.1 → 3.0.0-beta.1

package/src/core/createBaseTranslator.tsx

@@ -1,335 +0,0 @@
-// eslint-disable-next-line import/no-named-as-default -- False positive
-import IntlMessageFormat from 'intl-messageformat';
-import {
-  cloneElement,
-  isValidElement,
-  ReactElement,
-  ReactNode,
-  ReactNodeArray
-} from 'react';
-import AbstractIntlMessages from './AbstractIntlMessages';
-import Formats from './Formats';
-import {InitializedIntlConfig} from './IntlConfig';
-import IntlError, {IntlErrorCode} from './IntlError';
-import TranslationValues, {RichTranslationValues} from './TranslationValues';
-import convertFormatsToIntlMessageFormat from './convertFormatsToIntlMessageFormat';
-import {defaultGetMessageFallback, defaultOnError} from './defaults';
-import MessageKeys from './utils/MessageKeys';
-import NestedKeyOf from './utils/NestedKeyOf';
-import NestedValueOf from './utils/NestedValueOf';
-
-function resolvePath(
-  messages: AbstractIntlMessages | undefined,
-  key: string,
-  namespace?: string
-) {
-  if (!messages) {
-    throw new Error(
-      process.env.NODE_ENV !== 'production'
-        ? `No messages available at \`${namespace}\`.`
-        : undefined
-    );
-  }
-
-  let message = messages;
-
-  key.split('.').forEach((part) => {
-    const next = (message as any)[part];
-
-    if (part == null || next == null) {
-      throw new Error(
-        process.env.NODE_ENV !== 'production'
-          ? `Could not resolve \`${key}\` in ${
-              namespace ? `\`${namespace}\`` : 'messages'
-            }.`
-          : undefined
-      );
-    }
-
-    message = next;
-  });
-
-  return message;
-}
-
-function prepareTranslationValues(values: RichTranslationValues) {
-  if (Object.keys(values).length === 0) return undefined;
-
-  // Workaround for https://github.com/formatjs/formatjs/issues/1467
-  const transformedValues: RichTranslationValues = {};
-  Object.keys(values).forEach((key) => {
-    let index = 0;
-    const value = values[key];
-
-    let transformed;
-    if (typeof value === 'function') {
-      transformed = (chunks: ReactNode) => {
-        const result = value(chunks);
-
-        return isValidElement(result)
-          ? cloneElement(result, {key: key + index++})
-          : result;
-      };
-    } else {
-      transformed = value;
-    }
-
-    transformedValues[key] = transformed;
-  });
-
-  return transformedValues;
-}
-
-export function getMessagesOrError<Messages extends AbstractIntlMessages>({
-  messages,
-  namespace,
-  onError = defaultOnError
-}: {
-  messages: Messages;
-  namespace?: string;
-  onError?(error: IntlError): void;
-}) {
-  try {
-    if (!messages) {
-      throw new Error(
-        process.env.NODE_ENV !== 'production'
-          ? `No messages were configured on the provider.`
-          : undefined
-      );
-    }
-
-    const retrievedMessages = namespace
-      ? resolvePath(messages, namespace)
-      : messages;
-
-    if (!retrievedMessages) {
-      throw new Error(
-        process.env.NODE_ENV !== 'production'
-          ? `No messages for namespace \`${namespace}\` found.`
-          : undefined
-      );
-    }
-
-    return retrievedMessages;
-  } catch (error) {
-    const intlError = new IntlError(
-      IntlErrorCode.MISSING_MESSAGE,
-      (error as Error).message
-    );
-    onError(intlError);
-    return intlError;
-  }
-}
-
-export type CreateBaseTranslatorProps<Messages> = InitializedIntlConfig & {
-  cachedFormatsByLocale?: Record<string, Record<string, IntlMessageFormat>>;
-  defaultTranslationValues?: RichTranslationValues;
-  namespace?: string;
-  messagesOrError: Messages | IntlError;
-};
-
-export default function createBaseTranslator<
-  Messages extends AbstractIntlMessages,
-  NestedKey extends NestedKeyOf<Messages>
->({
-  cachedFormatsByLocale,
-  defaultTranslationValues,
-  formats: globalFormats,
-  getMessageFallback = defaultGetMessageFallback,
-  locale,
-  messagesOrError,
-  namespace,
-  onError,
-  timeZone
-}: CreateBaseTranslatorProps<Messages>) {
-  function getFallbackFromErrorAndNotify(
-    key: string,
-    code: IntlErrorCode,
-    message?: string
-  ) {
-    const error = new IntlError(code, message);
-    onError(error);
-    return getMessageFallback({error, key, namespace});
-  }
-
-  function translateBaseFn(
-    /** Use a dot to indicate a level of nesting (e.g. `namespace.nestedLabel`). */
-    key: string,
-    /** Key value pairs for values to interpolate into the message. */
-    values?: RichTranslationValues,
-    /** Provide custom formats for numbers, dates and times. */
-    formats?: Partial<Formats>
-  ): string | ReactElement | ReactNodeArray {
-    if (messagesOrError instanceof IntlError) {
-      // We have already warned about this during render
-      return getMessageFallback({
-        error: messagesOrError,
-        key,
-        namespace
-      });
-    }
-    const messages = messagesOrError;
-
-    let message;
-    try {
-      message = resolvePath(messages, key, namespace);
-    } catch (error) {
-      return getFallbackFromErrorAndNotify(
-        key,
-        IntlErrorCode.MISSING_MESSAGE,
-        (error as Error).message
-      );
-    }
-
-    function joinPath(parts: Array<string | undefined>) {
-      return parts.filter((part) => part != null).join('.');
-    }
-
-    const cacheKey = joinPath([namespace, key, String(message)]);
-
-    let messageFormat;
-    if (cachedFormatsByLocale?.[locale]?.[cacheKey]) {
-      messageFormat = cachedFormatsByLocale?.[locale][cacheKey];
-    } else {
-      if (typeof message === 'object') {
-        let code, errorMessage;
-        if (Array.isArray(message)) {
-          code = IntlErrorCode.INVALID_MESSAGE;
-          if (process.env.NODE_ENV !== 'production') {
-            errorMessage = `Message at \`${joinPath([
-              namespace,
-              key
-            ])}\` resolved to an array, but only strings are supported. See https://next-intl-docs.vercel.app/docs/usage/messages#arrays-of-messages`;
-          }
-        } else {
-          code = IntlErrorCode.INSUFFICIENT_PATH;
-          if (process.env.NODE_ENV !== 'production') {
-            errorMessage = `Message at \`${joinPath([
-              namespace,
-              key
-            ])}\` resolved to an object, but only strings are supported. Use a \`.\` to retrieve nested messages. See https://next-intl-docs.vercel.app/docs/usage/messages#structuring-messages`;
-          }
-        }
-
-        return getFallbackFromErrorAndNotify(key, code, errorMessage);
-      }
-
-      try {
-        messageFormat = new IntlMessageFormat(
-          message,
-          locale,
-          convertFormatsToIntlMessageFormat(
-            {...globalFormats, ...formats},
-            timeZone
-          )
-        );
-      } catch (error) {
-        return getFallbackFromErrorAndNotify(
-          key,
-          IntlErrorCode.INVALID_MESSAGE,
-          (error as Error).message
-        );
-      }
-
-      if (cachedFormatsByLocale) {
-        if (!cachedFormatsByLocale[locale]) {
-          cachedFormatsByLocale[locale] = {};
-        }
-        cachedFormatsByLocale[locale][cacheKey] = messageFormat;
-      }
-    }
-
-    try {
-      const formattedMessage = messageFormat.format(
-        // @ts-ignore `intl-messageformat` expects a different format
-        // for rich text elements since a recent minor update. This
-        // needs to be evaluated in detail, possibly also in regards
-        // to be able to format to parts.
-        prepareTranslationValues({...defaultTranslationValues, ...values})
-      );
-
-      if (formattedMessage == null) {
-        throw new Error(
-          process.env.NODE_ENV !== 'production'
-            ? `Unable to format \`${key}\` in ${
-                namespace ? `namespace \`${namespace}\`` : 'messages'
-              }`
-            : undefined
-        );
-      }
-
-      // Limit the function signature to return strings or React elements
-      return isValidElement(formattedMessage) ||
-        // Arrays of React elements
-        Array.isArray(formattedMessage) ||
-        typeof formattedMessage === 'string'
-        ? formattedMessage
-        : String(formattedMessage);
-    } catch (error) {
-      return getFallbackFromErrorAndNotify(
-        key,
-        IntlErrorCode.FORMATTING_ERROR,
-        (error as Error).message
-      );
-    }
-  }
-
-  function translateFn<
-    TargetKey extends MessageKeys<
-      NestedValueOf<Messages, NestedKey>,
-      NestedKeyOf<NestedValueOf<Messages, NestedKey>>
-    >
-  >(
-    /** Use a dot to indicate a level of nesting (e.g. `namespace.nestedLabel`). */
-    key: TargetKey,
-    /** Key value pairs for values to interpolate into the message. */
-    values?: TranslationValues,
-    /** Provide custom formats for numbers, dates and times. */
-    formats?: Partial<Formats>
-  ): string {
-    const result = translateBaseFn(key, values, formats);
-
-    if (typeof result !== 'string') {
-      return getFallbackFromErrorAndNotify(
-        key,
-        IntlErrorCode.INVALID_MESSAGE,
-        process.env.NODE_ENV !== 'production'
-          ? `The message \`${key}\` in ${
-              namespace ? `namespace \`${namespace}\`` : 'messages'
-            } didn't resolve to a string. If you want to format rich text, use \`t.rich\` instead.`
-          : undefined
-      );
-    }
-
-    return result;
-  }
-
-  translateFn.rich = translateBaseFn;
-
-  translateFn.raw = (
-    /** Use a dot to indicate a level of nesting (e.g. `namespace.nestedLabel`). */
-    key: string
-  ): any => {
-    if (messagesOrError instanceof IntlError) {
-      // We have already warned about this during render
-      return getMessageFallback({
-        error: messagesOrError,
-        key,
-        namespace
-      });
-    }
-    const messages = messagesOrError;
-
-    try {
-      return resolvePath(messages, key, namespace);
-    } catch (error) {
-      return getFallbackFromErrorAndNotify(
-        key,
-        IntlErrorCode.MISSING_MESSAGE,
-        (error as Error).message
-      );
-    }
-  };
-
-  return translateFn;
-}

package/src/core/createFormatter.tsx

@@ -1,191 +0,0 @@
-import DateTimeFormatOptions from './DateTimeFormatOptions';
-import Formats from './Formats';
-import IntlError, {IntlErrorCode} from './IntlError';
-import NumberFormatOptions from './NumberFormatOptions';
-import TimeZone from './TimeZone';
-import {defaultOnError} from './defaults';
-
-const MINUTE = 60;
-const HOUR = MINUTE * 60;
-const DAY = HOUR * 24;
-const WEEK = DAY * 7;
-const MONTH = DAY * (365 / 12); // Approximation
-const YEAR = DAY * 365;
-
-function getRelativeTimeFormatConfig(seconds: number) {
-  const absValue = Math.abs(seconds);
-  let value, unit: Intl.RelativeTimeFormatUnit;
-
-  // We have to round the resulting values, as `Intl.RelativeTimeFormat`
-  // will include fractions like '2.1 hours ago'.
-
-  if (absValue < MINUTE) {
-    unit = 'second';
-    value = Math.round(seconds);
-  } else if (absValue < HOUR) {
-    unit = 'minute';
-    value = Math.round(seconds / MINUTE);
-  } else if (absValue < DAY) {
-    unit = 'hour';
-    value = Math.round(seconds / HOUR);
-  } else if (absValue < WEEK) {
-    unit = 'day';
-    value = Math.round(seconds / DAY);
-  } else if (absValue < MONTH) {
-    unit = 'week';
-    value = Math.round(seconds / WEEK);
-  } else if (absValue < YEAR) {
-    unit = 'month';
-    value = Math.round(seconds / MONTH);
-  } else {
-    unit = 'year';
-    value = Math.round(seconds / YEAR);
-  }
-
-  return {value, unit};
-}
-
-type Props = {
-  locale: string;
-  timeZone?: TimeZone;
-  onError?(error: IntlError): void;
-  formats?: Partial<Formats>;
-  now?: Date;
-};
-
-export default function createFormatter({
-  formats,
-  locale,
-  now: globalNow,
-  onError = defaultOnError,
-  timeZone
-}: Props) {
-  function resolveFormatOrOptions<Options>(
-    typeFormats: Record<string, Options> | undefined,
-    formatOrOptions?: string | Options
-  ) {
-    let options;
-    if (typeof formatOrOptions === 'string') {
-      const formatName = formatOrOptions;
-      options = typeFormats?.[formatName];
-
-      if (!options) {
-        const error = new IntlError(
-          IntlErrorCode.MISSING_FORMAT,
-          process.env.NODE_ENV !== 'production'
-            ? `Format \`${formatName}\` is not available. You can configure it on the provider or provide custom options.`
-            : undefined
-        );
-        onError(error);
-        throw error;
-      }
-    } else {
-      options = formatOrOptions;
-    }
-
-    return options;
-  }
-
-  function getFormattedValue<Value, Options>(
-    value: Value,
-    formatOrOptions: string | Options | undefined,
-    typeFormats: Record<string, Options> | undefined,
-    formatter: (options?: Options) => string
-  ) {
-    let options;
-    try {
-      options = resolveFormatOrOptions(typeFormats, formatOrOptions);
-    } catch (error) {
-      return String(value);
-    }
-
-    try {
-      return formatter(options);
-    } catch (error) {
-      onError(
-        new IntlError(IntlErrorCode.FORMATTING_ERROR, (error as Error).message)
-      );
-      return String(value);
-    }
-  }
-
-  function dateTime(
-    /** If a number is supplied, this is interpreted as a UTC timestamp. */
-    value: Date | number,
-    /** If a time zone is supplied, the `value` is converted to that time zone.
-     * Otherwise the user time zone will be used. */
-    formatOrOptions?: string | DateTimeFormatOptions
-  ) {
-    return getFormattedValue(
-      value,
-      formatOrOptions,
-      formats?.dateTime,
-      (options) => {
-        if (timeZone && !options?.timeZone) {
-          options = {...options, timeZone};
-        }
-
-        return new Intl.DateTimeFormat(locale, options).format(value);
-      }
-    );
-  }
-
-  function number(
-    value: number | bigint,
-    formatOrOptions?: string | NumberFormatOptions
-  ) {
-    return getFormattedValue(
-      value,
-      formatOrOptions,
-      formats?.number,
-      (options) => new Intl.NumberFormat(locale, options).format(value)
-    );
-  }
-
-  function relativeTime(
-    /** The date time that needs to be formatted. */
-    date: number | Date,
-    /** The reference point in time to which `date` will be formatted in relation to.  */
-    now?: number | Date
-  ) {
-    try {
-      if (!now) {
-        if (globalNow) {
-          now = globalNow;
-        } else {
-          throw new Error(
-            process.env.NODE_ENV !== 'production'
-              ? `The \`now\` parameter wasn't provided and there was no global fallback configured on the provider.`
-              : undefined
-          );
-        }
-      }
-
-      const dateDate = date instanceof Date ? date : new Date(date);
-      const nowDate = now instanceof Date ? now : new Date(now);
-
-      const seconds = (dateDate.getTime() - nowDate.getTime()) / 1000;
-      const {unit, value} = getRelativeTimeFormatConfig(seconds);
-
-      return new Intl.RelativeTimeFormat(locale, {
-        numeric: 'auto'
-      }).format(value, unit);
-    } catch (error) {
-      onError(
-        new IntlError(IntlErrorCode.FORMATTING_ERROR, (error as Error).message)
-      );
-      return String(date);
-    }
-  }
-
-  function list(
-    value: Iterable<string>,
-    formatOrOptions?: string | Intl.ListFormatOptions
-  ) {
-    return getFormattedValue(value, formatOrOptions, formats?.list, (options) =>
-      new Intl.ListFormat(locale, options).format(value)
-    );
-  }
-
-  return {dateTime, number, relativeTime, list};
-}

package/src/core/createIntl.tsx

@@ -1,13 +0,0 @@
-import createFormatter from './createFormatter';
-
-/** @deprecated Switch to `createFormatter` */
-export default function createIntl(
-  ...args: Parameters<typeof createFormatter>
-) {
-  const formatter = createFormatter(...args);
-  return {
-    formatDateTime: formatter.dateTime,
-    formatNumber: formatter.number,
-    formatRelativeTime: formatter.relativeTime
-  };
-}

package/src/core/createTranslator.tsx

@@ -1,112 +0,0 @@
-import Formats from './Formats';
-import IntlConfig from './IntlConfig';
-import TranslationValues from './TranslationValues';
-import createTranslatorImpl, {
-  CoreRichTranslationValues
-} from './createTranslatorImpl';
-import {defaultGetMessageFallback, defaultOnError} from './defaults';
-import MessageKeys from './utils/MessageKeys';
-import NamespaceKeys from './utils/NamespaceKeys';
-import NestedKeyOf from './utils/NestedKeyOf';
-import NestedValueOf from './utils/NestedValueOf';
-
-/**
- * Translates messages from the given namespace by using the ICU syntax.
- * See https://formatjs.io/docs/core-concepts/icu-syntax.
- *
- * If no namespace is provided, all available messages are returned.
- * The namespace can also indicate nesting by using a dot
- * (e.g. `namespace.Component`).
- */
-export default function createTranslator<
-  NestedKey extends NamespaceKeys<
-    IntlMessages,
-    NestedKeyOf<IntlMessages>
-  > = never
->({
-  getMessageFallback = defaultGetMessageFallback,
-  messages,
-  namespace,
-  onError = defaultOnError,
-  ...rest
-}: Omit<IntlConfig<IntlMessages>, 'defaultTranslationValues' | 'messages'> & {
-  messages: NonNullable<IntlConfig<IntlMessages>['messages']>;
-  namespace?: NestedKey;
-}): // Explicitly defining the return type is necessary as TypeScript would get it wrong
-{
-  // Default invocation
-  <
-    TargetKey extends MessageKeys<
-      NestedValueOf<
-        {'!': IntlMessages},
-        [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
-      >,
-      NestedKeyOf<
-        NestedValueOf<
-          {'!': IntlMessages},
-          [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
-        >
-      >
-    >
-  >(
-    key: TargetKey,
-    values?: TranslationValues,
-    formats?: Partial<Formats>
-  ): string;
-
-  // `rich`
-  rich<
-    TargetKey extends MessageKeys<
-      NestedValueOf<
-        {'!': IntlMessages},
-        [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
-      >,
-      NestedKeyOf<
-        NestedValueOf<
-          {'!': IntlMessages},
-          [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
-        >
-      >
-    >
-  >(
-    key: TargetKey,
-    values?: CoreRichTranslationValues,
-    formats?: Partial<Formats>
-  ): string;
-
-  // `raw`
-  raw<
-    TargetKey extends MessageKeys<
-      NestedValueOf<
-        {'!': IntlMessages},
-        [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
-      >,
-      NestedKeyOf<
-        NestedValueOf<
-          {'!': IntlMessages},
-          [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
-        >
-      >
-    >
-  >(
-    key: TargetKey
-  ): any;
-} {
-  // We have to wrap the actual function so the type inference for the optional
-  // namespace works correctly. See https://stackoverflow.com/a/71529575/343045
-  // The prefix ("!") is arbitrary.
-  return createTranslatorImpl<
-    {'!': IntlMessages},
-    [NestedKey] extends [never] ? '!' : `!.${NestedKey}`
-  >(
-    {
-      ...rest,
-      onError,
-      getMessageFallback,
-      messages: {'!': messages},
-      // @ts-ignore
-      namespace: namespace ? `!.${namespace}` : '!'
-    },
-    '!'
-  );
-}