use-intl 2.11.0-alpha.2 → 2.11.0-useFormatter-alpha.1

package/src/core/createIntl.tsx

@@ -1,181 +1,13 @@
-import DateTimeFormatOptions from './DateTimeFormatOptions';
-import Formats from './Formats';
-import IntlError, {IntlErrorCode} from './IntlError';
-import NumberFormatOptions from './NumberFormatOptions';
-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?: string;
-  onError?(error: IntlError): void;
-  formats?: Partial<Formats>;
-  now?: Date;
-};
-
-export default function createIntl({
-  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 formatDateTime(
-    /** 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 formatNumber(
-    value: number,
-    formatOrOptions?: string | NumberFormatOptions
-  ) {
-    return getFormattedValue(
-      value,
-      formatOrOptions,
-      formats?.number,
-      (options) => new Intl.NumberFormat(locale, options).format(value)
-    );
-  }
-
-  function formatRelativeTime(
-    /** 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 to \`formatRelativeTime\` 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);
-    }
-  }
-
-  return {formatDateTime, formatNumber, formatRelativeTime};
+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/index.tsx

@@ -8,4 +8,7 @@ export {default as DateTimeFormatOptions} from './DateTimeFormatOptions';
 export {default as NumberFormatOptions} from './NumberFormatOptions';
 export {default as IntlError, IntlErrorCode} from './IntlError';
 export {default as createTranslator} from './createTranslator';
+export {default as createFormatter} from './createFormatter';
+
+// TODO: Remove in next major version
 export {default as createIntl} from './createIntl';

package/src/react/IntlContext.tsx

@@ -1,6 +1,24 @@
 import {createContext} from 'react';
-import IntlContextValue from './IntlContextValue';
+import AbstractIntlMessages from '../core/AbstractIntlMessages';
+import Formats from '../core/Formats';
+import IntlError from '../core/IntlError';
+import {RichTranslationValues} from '../core/TranslationValues';
 
-const IntlContext = createContext<IntlContextValue | undefined>(undefined);
+export type IntlContextShape = {
+  messages?: AbstractIntlMessages;
+  locale: string;
+  formats?: Partial<Formats>;
+  timeZone?: string;
+  onError(error: IntlError): void;
+  getMessageFallback(info: {
+    error: IntlError;
+    key: string;
+    namespace?: string;
+  }): string;
+  now?: Date;
+  defaultTranslationValues?: RichTranslationValues;
+};
+
+const IntlContext = createContext<IntlContextShape | undefined>(undefined);
 
 export default IntlContext;

package/src/react/IntlProvider.tsx

@@ -1,11 +1,42 @@
-import React from 'react';
+import React, {ReactNode, useEffect} from 'react';
+import {AbstractIntlMessages} from '../core';
+import IntlConfiguration from '../core/IntlConfiguration';
+import {RichTranslationValues} from '../core/TranslationValues';
+import {defaultGetMessageFallback, defaultOnError} from '../core/defaults';
+import validateMessages from '../core/validateMessages';
 import IntlContext from './IntlContext';
-import IntlProviderProps from './IntlProviderProps';
-import getIntlContextValue from './getIntlContextValue';
 
-export default function IntlProvider({children, ...props}: IntlProviderProps) {
+type Props = IntlConfiguration & {
+  /** All components that use the provided hooks should be within this tree. */
+  children: ReactNode;
+  /** Global default values for translation values and rich text elements.
+   * Can be used for consistent usage or styling of rich text elements.
+   * Defaults will be overidden by locally provided values. */
+  defaultTranslationValues?: RichTranslationValues;
+  /** All messages that will be available in your components. */
+  messages?: AbstractIntlMessages;
+};
+
+export default function IntlProvider({
+  children,
+  onError = defaultOnError,
+  getMessageFallback = defaultGetMessageFallback,
+  messages,
+  ...contextValues
+}: Props) {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      if (messages) {
+        validateMessages(messages, onError);
+      }
+    }, [messages, onError]);
+  }
+
   return (
-    <IntlContext.Provider value={getIntlContextValue(props)}>
+    <IntlContext.Provider
+      value={{...contextValues, messages, onError, getMessageFallback}}
+    >
       {children}
     </IntlContext.Provider>
   );

package/src/react/index.tsx

@@ -1,6 +1,9 @@
 export {default as IntlProvider} from './IntlProvider';
 export {default as useTranslations} from './useTranslations';
-export {default as useIntl} from './useIntl';
 export {default as useLocale} from './useLocale';
 export {default as useNow} from './useNow';
 export {default as useTimeZone} from './useTimeZone';
+export {default as useFormatter} from './useFormatter';
+
+// TODO: Remove in next major version
+export {default as useIntl} from './useIntl';

package/src/react/useFormatter.tsx

@@ -0,0 +1,19 @@
+import {useMemo} from 'react';
+import createFormatter from '../core/createFormatter';
+import useIntlContext from './useIntlContext';
+
+export default function useFormatter() {
+  const {formats, locale, now: globalNow, onError, timeZone} = useIntlContext();
+
+  return useMemo(
+    () =>
+      createFormatter({
+        formats,
+        locale,
+        now: globalNow,
+        onError,
+        timeZone
+      }),
+    [formats, globalNow, locale, onError, timeZone]
+  );
+}

package/src/react/useIntl.tsx

@@ -2,9 +2,19 @@ import {useMemo} from 'react';
 import createIntl from '../core/createIntl';
 import useIntlContext from './useIntlContext';
 
+let hasWarned = false;
+
+/** @deprecated  Switch to `useFormatter` */
 export default function useIntl() {
   const {formats, locale, now: globalNow, onError, timeZone} = useIntlContext();
 
+  if (!hasWarned) {
+    hasWarned = true;
+    console.warn(
+      '`useIntl()` is deprecated and will be removed in the next major version. Please switch to `useFormatter()`.'
+    );
+  }
+
   return useMemo(
     () =>
       createIntl({

package/dist/react/IntlContextValue.d.ts

@@ -1,19 +0,0 @@
-import AbstractIntlMessages from '../core/AbstractIntlMessages';
-import Formats from '../core/Formats';
-import IntlError from '../core/IntlError';
-import { RichTranslationValues } from '../core/TranslationValues';
-declare type IntlContextValue = {
-    messages?: AbstractIntlMessages;
-    locale: string;
-    formats?: Partial<Formats>;
-    timeZone?: string;
-    onError(error: IntlError): void;
-    getMessageFallback(info: {
-        error: IntlError;
-        key: string;
-        namespace?: string;
-    }): string;
-    now?: Date;
-    defaultTranslationValues?: RichTranslationValues;
-};
-export default IntlContextValue;

package/dist/react/IntlProviderProps.d.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-import { AbstractIntlMessages } from '../core';
-import IntlConfiguration from '../core/IntlConfiguration';
-import { RichTranslationValues } from '../core/TranslationValues';
-declare type IntlProviderProps = IntlConfiguration & {
-    /** All components that use the provided hooks should be within this tree. */
-    children: ReactNode;
-    /** Global default values for translation values and rich text elements.
-     * Can be used for consistent usage or styling of rich text elements.
-     * Defaults will be overidden by locally provided values. */
-    defaultTranslationValues?: RichTranslationValues;
-    /** All messages that will be available in your components. */
-    messages?: AbstractIntlMessages;
-};
-export default IntlProviderProps;

package/dist/react/getIntlContextValue.d.ts

@@ -1,18 +0,0 @@
-import IntlProviderProps from './IntlProviderProps';
-/**
- * Enhances the incoming props with defaults.
- */
-export default function getIntlContextValue({ getMessageFallback, messages, onError, ...rest }: Omit<IntlProviderProps, 'children'>): {
-    messages: import("../core/AbstractIntlMessages").default | undefined;
-    onError: (error: import("..").IntlError) => void;
-    getMessageFallback: (info: {
-        error: import("..").IntlError;
-        key: string;
-        namespace?: string | undefined;
-    }) => string;
-    locale: string;
-    formats?: Partial<import("../core/Formats").default> | undefined;
-    timeZone?: string | undefined;
-    now?: Date | undefined;
-    defaultTranslationValues?: import("..").RichTranslationValues | undefined;
-};

package/dist/src/react/IntlContextValue.d.ts

@@ -1,19 +0,0 @@
-import AbstractIntlMessages from '../core/AbstractIntlMessages';
-import Formats from '../core/Formats';
-import IntlError from '../core/IntlError';
-import { RichTranslationValues } from '../core/TranslationValues';
-declare type IntlContextValue = {
-    messages?: AbstractIntlMessages;
-    locale: string;
-    formats?: Partial<Formats>;
-    timeZone?: string;
-    onError(error: IntlError): void;
-    getMessageFallback(info: {
-        error: IntlError;
-        key: string;
-        namespace?: string;
-    }): string;
-    now?: Date;
-    defaultTranslationValues?: RichTranslationValues;
-};
-export default IntlContextValue;

package/dist/src/react/IntlContextValue.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=IntlContextValue.js.map

package/dist/src/react/IntlContextValue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IntlContextValue.js","sourceRoot":"","sources":["../../../src/react/IntlContextValue.tsx"],"names":[],"mappings":""}

package/dist/src/react/IntlProviderProps.d.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-import { AbstractIntlMessages } from '../core';
-import IntlConfiguration from '../core/IntlConfiguration';
-import { RichTranslationValues } from '../core/TranslationValues';
-declare type IntlProviderProps = IntlConfiguration & {
-    /** All components that use the provided hooks should be within this tree. */
-    children: ReactNode;
-    /** Global default values for translation values and rich text elements.
-     * Can be used for consistent usage or styling of rich text elements.
-     * Defaults will be overidden by locally provided values. */
-    defaultTranslationValues?: RichTranslationValues;
-    /** All messages that will be available in your components. */
-    messages?: AbstractIntlMessages;
-};
-export default IntlProviderProps;

package/dist/src/react/IntlProviderProps.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=IntlProviderProps.js.map

package/dist/src/react/IntlProviderProps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IntlProviderProps.js","sourceRoot":"","sources":["../../../src/react/IntlProviderProps.tsx"],"names":[],"mappings":""}

package/dist/src/react/getIntlContextValue.d.ts

@@ -1,18 +0,0 @@
-import IntlProviderProps from './IntlProviderProps';
-/**
- * Enhances the incoming props with defaults.
- */
-export default function getIntlContextValue({ getMessageFallback, messages, onError, ...rest }: Omit<IntlProviderProps, 'children'>): {
-    messages: import("../core/AbstractIntlMessages").default | undefined;
-    onError: (error: import("..").IntlError) => void;
-    getMessageFallback: (info: {
-        error: import("..").IntlError;
-        key: string;
-        namespace?: string | undefined;
-    }) => string;
-    defaultTranslationValues?: import("..").RichTranslationValues | undefined;
-    formats?: Partial<import("../core/Formats").default> | undefined;
-    locale: string;
-    timeZone?: string | undefined;
-    now?: Date | undefined;
-};

package/dist/src/react/getIntlContextValue.js

@@ -1,21 +0,0 @@
-import { defaultGetMessageFallback, defaultOnError } from '../core/defaults';
-import validateMessages from '../core/validateMessages';
-/**
- * Enhances the incoming props with defaults.
- */
-export default function getIntlContextValue({ getMessageFallback, messages, onError, ...rest }) {
-    const finalOnError = onError || defaultOnError;
-    const finalGetMessageFallback = getMessageFallback || defaultGetMessageFallback;
-    if (process.env.NODE_ENV !== 'production') {
-        if (messages) {
-            validateMessages(messages, finalOnError);
-        }
-    }
-    return {
-        ...rest,
-        messages,
-        onError: finalOnError,
-        getMessageFallback: finalGetMessageFallback
-    };
-}
-//# sourceMappingURL=getIntlContextValue.js.map

package/dist/src/react/getIntlContextValue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getIntlContextValue.js","sourceRoot":"","sources":["../../../src/react/getIntlContextValue.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,yBAAyB,EAAE,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAC3E,OAAO,gBAAgB,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EAC6B;IACpC,MAAM,YAAY,GAAG,OAAO,IAAI,cAAc,CAAC;IAC/C,MAAM,uBAAuB,GAC3B,kBAAkB,IAAI,yBAAyB,CAAC;IAElD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;QACzC,IAAI,QAAQ,EAAE;YACZ,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;SAC1C;KACF;IAED,OAAO;QACL,GAAG,IAAI;QACP,QAAQ;QACR,OAAO,EAAE,YAAY;QACrB,kBAAkB,EAAE,uBAAuB;KAC5C,CAAC;AACJ,CAAC"}

package/src/react/IntlContextValue.tsx

@@ -1,21 +0,0 @@
-import AbstractIntlMessages from '../core/AbstractIntlMessages';
-import Formats from '../core/Formats';
-import IntlError from '../core/IntlError';
-import {RichTranslationValues} from '../core/TranslationValues';
-
-type IntlContextValue = {
-  messages?: AbstractIntlMessages;
-  locale: string;
-  formats?: Partial<Formats>;
-  timeZone?: string;
-  onError(error: IntlError): void;
-  getMessageFallback(info: {
-    error: IntlError;
-    key: string;
-    namespace?: string;
-  }): string;
-  now?: Date;
-  defaultTranslationValues?: RichTranslationValues;
-};
-
-export default IntlContextValue;

package/src/react/IntlProviderProps.tsx

@@ -1,17 +0,0 @@
-import {ReactNode} from 'react';
-import {AbstractIntlMessages} from '../core';
-import IntlConfiguration from '../core/IntlConfiguration';
-import {RichTranslationValues} from '../core/TranslationValues';
-
-type IntlProviderProps = IntlConfiguration & {
-  /** All components that use the provided hooks should be within this tree. */
-  children: ReactNode;
-  /** Global default values for translation values and rich text elements.
-   * Can be used for consistent usage or styling of rich text elements.
-   * Defaults will be overidden by locally provided values. */
-  defaultTranslationValues?: RichTranslationValues;
-  /** All messages that will be available in your components. */
-  messages?: AbstractIntlMessages;
-};
-
-export default IntlProviderProps;

package/src/react/getIntlContextValue.tsx

@@ -1,30 +0,0 @@
-import {defaultGetMessageFallback, defaultOnError} from '../core/defaults';
-import validateMessages from '../core/validateMessages';
-import IntlProviderProps from './IntlProviderProps';
-
-/**
- * Enhances the incoming props with defaults.
- */
-export default function getIntlContextValue({
-  getMessageFallback,
-  messages,
-  onError,
-  ...rest
-}: Omit<IntlProviderProps, 'children'>) {
-  const finalOnError = onError || defaultOnError;
-  const finalGetMessageFallback =
-    getMessageFallback || defaultGetMessageFallback;
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (messages) {
-      validateMessages(messages, finalOnError);
-    }
-  }
-
-  return {
-    ...rest,
-    messages,
-    onError: finalOnError,
-    getMessageFallback: finalGetMessageFallback
-  };
-}