use-intl 3.0.0-beta.1 → 3.0.0-beta.3

package/_IntlProvider.d.ts

@@ -0,0 +1 @@
+export * from './dist/types/src/_IntlProvider';

package/_useLocale.d.ts

@@ -0,0 +1 @@
+export * from './dist/types/src/_useLocale';

package/core.d.ts

@@ -1 +1 @@
-export * from './dist/core';
+export * from './dist/types/src/core';

package/dist/_IntlProvider.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./production/_IntlProvider.js');
+} else {
+  module.exports = require('./development/_IntlProvider.js');
+}

package/dist/_useLocale.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./production/_useLocale.js');
+} else {
+  module.exports = require('./development/_useLocale.js');
+}

package/dist/core.js

@@ -1,8 +1,7 @@
-
-'use strict'
+'use strict';
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./core.cjs.production.min.js')
+  module.exports = require('./production/core.js');
 } else {
-  module.exports = require('./core.cjs.development.js')
+  module.exports = require('./development/core.js');
 }

package/dist/development/IntlContext-b5cc6be8.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var React = require('react');
+
+const IntlContext = /*#__PURE__*/React.createContext(undefined);
+var IntlContext$1 = IntlContext;
+
+exports.IntlContext = IntlContext$1;

package/dist/development/_IntlProvider.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var initializeConfig = require('./initializeConfig-cde42612.js');
+var IntlContext = require('./IntlContext-b5cc6be8.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+function IntlProvider(_ref) {
+  let {
+    children,
+    ...config
+  } = _ref;
+  const [messageFormatCache] = React.useState(() => new Map());
+  return /*#__PURE__*/React__default.default.createElement(IntlContext.IntlContext.Provider, {
+    value: {
+      ...initializeConfig.initializeConfig(config),
+      messageFormatCache
+    }
+  }, children);
+}
+
+exports.IntlProvider = IntlProvider;

package/dist/development/_useLocale-321e619f.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var IntlContext = require('./IntlContext-b5cc6be8.js');
+
+function useIntlContext() {
+  const context = React.useContext(IntlContext.IntlContext);
+  if (!context) {
+    throw new Error('No intl context found. Have you configured the provider?' );
+  }
+  return context;
+}
+
+function useLocale() {
+  return useIntlContext().locale;
+}
+
+exports.useIntlContext = useIntlContext;
+exports.useLocale = useLocale;

package/dist/development/_useLocale.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _useLocale = require('./_useLocale-321e619f.js');
+require('react');
+require('./IntlContext-b5cc6be8.js');
+
+
+
+exports.useLocale = _useLocale.useLocale;

package/dist/development/core.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var initializeConfig = require('./initializeConfig-cde42612.js');
+var createIntl = require('./createIntl-dfba4462.js');
+require('intl-messageformat');
+require('react');
+
+function createTranslatorImpl(_ref, namespacePrefix) {
+  let {
+    getMessageFallback,
+    messages,
+    namespace,
+    onError,
+    ...rest
+  } = _ref;
+  // The `namespacePrefix` is part of the type system.
+  // See the comment in the function invocation.
+  messages = messages[namespacePrefix];
+  namespace = createIntl.resolveNamespace(namespace, namespacePrefix);
+  const translator = createIntl.createBaseTranslator({
+    ...rest,
+    onError,
+    getMessageFallback,
+    messages,
+    namespace
+  });
+  const originalRich = translator.rich;
+  function base() {
+    return translator(...arguments);
+  }
+
+  // Augment `t.rich` to return plain strings
+  base.rich = (key, values, formats) => {
+    // `chunks` is returned as a string when no React element
+    // is used, therefore it's safe to cast this type.
+    const result = originalRich(key, values, formats);
+
+    // When only string chunks are provided to the parser, only strings should be returned here.
+    if (typeof result !== 'string') {
+      const error = new initializeConfig.IntlError(initializeConfig.IntlErrorCode.FORMATTING_ERROR, "`createTranslator` only accepts functions for rich text formatting that receive and return strings.\n\nE.g. t.rich('rich', {b: (chunks) => `<b>${chunks}</b>`})" );
+      onError(error);
+      return getMessageFallback({
+        error,
+        key,
+        namespace
+      });
+    }
+    return result;
+  };
+  base.raw = translator.raw;
+  return base;
+}
+
+/**
+ * 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`).
+ */
+function createTranslator(_ref) {
+  let {
+    getMessageFallback = initializeConfig.defaultGetMessageFallback,
+    messages,
+    namespace,
+    onError = initializeConfig.defaultOnError,
+    ...rest
+  } = _ref;
+  // 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({
+    ...rest,
+    onError,
+    getMessageFallback,
+    messages: {
+      '!': messages
+    },
+    namespace: namespace ? "!.".concat(namespace) : '!'
+  }, '!');
+}
+
+exports.IntlError = initializeConfig.IntlError;
+exports.IntlErrorCode = initializeConfig.IntlErrorCode;
+exports.initializeConfig = initializeConfig.initializeConfig;
+exports.createBaseTranslator = createIntl.createBaseTranslator;
+exports.createFormatter = createIntl.createFormatter;
+exports.createIntl = createIntl.createIntl;
+exports.createTranslator = createTranslator;

package/dist/development/createIntl-dfba4462.js

@@ -0,0 +1,421 @@
+'use strict';
+
+var IntlMessageFormat = require('intl-messageformat');
+var React = require('react');
+var initializeConfig = require('./initializeConfig-cde42612.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var IntlMessageFormat__default = /*#__PURE__*/_interopDefault(IntlMessageFormat);
+
+// eslint-disable-next-line import/no-named-as-default -- False positive
+function setTimeZoneInFormats(formats, timeZone) {
+  if (!formats) return formats;
+
+  // The only way to set a time zone with `intl-messageformat` is to merge it into the formats
+  // https://github.com/formatjs/formatjs/blob/8256c5271505cf2606e48e3c97ecdd16ede4f1b5/packages/intl/src/message.ts#L15
+  return Object.keys(formats).reduce((acc, key) => {
+    acc[key] = {
+      timeZone,
+      ...formats[key]
+    };
+    return acc;
+  }, {});
+}
+
+/**
+ * `intl-messageformat` uses separate keys for `date` and `time`, but there's
+ * only one native API: `Intl.DateTimeFormat`. Additionally you might want to
+ * include both a time and a date in a value, therefore the separation doesn't
+ * seem so useful. We offer a single `dateTime` namespace instead, but we have
+ * to convert the format before `intl-messageformat` can be used.
+ */
+function convertFormatsToIntlMessageFormat(formats, timeZone) {
+  const formatsWithTimeZone = timeZone ? {
+    ...formats,
+    dateTime: setTimeZoneInFormats(formats.dateTime, timeZone)
+  } : formats;
+  const mfDateDefaults = IntlMessageFormat__default.default.formats.date;
+  const defaultDateFormats = timeZone ? setTimeZoneInFormats(mfDateDefaults, timeZone) : mfDateDefaults;
+  const mfTimeDefaults = IntlMessageFormat__default.default.formats.time;
+  const defaultTimeFormats = timeZone ? setTimeZoneInFormats(mfTimeDefaults, timeZone) : mfTimeDefaults;
+  return {
+    ...formatsWithTimeZone,
+    date: {
+      ...defaultDateFormats,
+      ...(formatsWithTimeZone === null || formatsWithTimeZone === void 0 ? void 0 : formatsWithTimeZone.dateTime)
+    },
+    time: {
+      ...defaultTimeFormats,
+      ...(formatsWithTimeZone === null || formatsWithTimeZone === void 0 ? void 0 : formatsWithTimeZone.dateTime)
+    }
+  };
+}
+
+// eslint-disable-next-line import/no-named-as-default -- False positive
+function resolvePath(messages, key, namespace) {
+  if (!messages) {
+    throw new Error("No messages available at `".concat(namespace, "`.") );
+  }
+  let message = messages;
+  key.split('.').forEach(part => {
+    const next = message[part];
+    if (part == null || next == null) {
+      throw new Error("Could not resolve `".concat(key, "` in ").concat(namespace ? "`".concat(namespace, "`") : 'messages', ".") );
+    }
+    message = next;
+  });
+  return message;
+}
+function prepareTranslationValues(values) {
+  if (Object.keys(values).length === 0) return undefined;
+
+  // Workaround for https://github.com/formatjs/formatjs/issues/1467
+  const transformedValues = {};
+  Object.keys(values).forEach(key => {
+    let index = 0;
+    const value = values[key];
+    let transformed;
+    if (typeof value === 'function') {
+      transformed = chunks => {
+        const result = value(chunks);
+        return /*#__PURE__*/React.isValidElement(result) ? /*#__PURE__*/React.cloneElement(result, {
+          key: key + index++
+        }) : result;
+      };
+    } else {
+      transformed = value;
+    }
+    transformedValues[key] = transformed;
+  });
+  return transformedValues;
+}
+function getMessagesOrError(_ref) {
+  let {
+    messages,
+    namespace,
+    onError = initializeConfig.defaultOnError
+  } = _ref;
+  try {
+    if (!messages) {
+      throw new Error("No messages were configured on the provider." );
+    }
+    const retrievedMessages = namespace ? resolvePath(messages, namespace) : messages;
+    if (!retrievedMessages) {
+      throw new Error("No messages for namespace `".concat(namespace, "` found.") );
+    }
+    return retrievedMessages;
+  } catch (error) {
+    const intlError = new initializeConfig.IntlError(initializeConfig.IntlErrorCode.MISSING_MESSAGE, error.message);
+    onError(intlError);
+    return intlError;
+  }
+}
+function getPlainMessage(candidate, values) {
+  if (values) return undefined;
+  const unescapedMessage = candidate.replace(/'([{}])/gi, '$1');
+
+  // Placeholders can be in the message if there are default values,
+  // or if the user has forgotten to provide values. In the latter
+  // case we need to compile the message to receive an error.
+  const hasPlaceholders = /<|{/.test(unescapedMessage);
+  if (!hasPlaceholders) {
+    return unescapedMessage;
+  }
+  return undefined;
+}
+function createBaseTranslator(config) {
+  const messagesOrError = getMessagesOrError({
+    messages: config.messages,
+    namespace: config.namespace,
+    onError: config.onError
+  });
+  return createBaseTranslatorImpl({
+    ...config,
+    messagesOrError
+  });
+}
+function createBaseTranslatorImpl(_ref2) {
+  let {
+    defaultTranslationValues,
+    formats: globalFormats,
+    getMessageFallback = initializeConfig.defaultGetMessageFallback,
+    locale,
+    messageFormatCache,
+    messagesOrError,
+    namespace,
+    onError,
+    timeZone
+  } = _ref2;
+  function getFallbackFromErrorAndNotify(key, code, message) {
+    const error = new initializeConfig.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, /** Key value pairs for values to interpolate into the message. */
+  values, /** Provide custom formats for numbers, dates and times. */
+  formats) {
+    if (messagesOrError instanceof initializeConfig.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, initializeConfig.IntlErrorCode.MISSING_MESSAGE, error.message);
+    }
+    function joinPath(parts) {
+      return parts.filter(part => part != null).join('.');
+    }
+    const cacheKey = joinPath([locale, namespace, key, String(message)]);
+    let messageFormat;
+    if (messageFormatCache !== null && messageFormatCache !== void 0 && messageFormatCache.has(cacheKey)) {
+      messageFormat = messageFormatCache.get(cacheKey);
+    } else {
+      if (typeof message === 'object') {
+        let code, errorMessage;
+        if (Array.isArray(message)) {
+          code = initializeConfig.IntlErrorCode.INVALID_MESSAGE;
+          {
+            errorMessage = "Message at `".concat(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 = initializeConfig.IntlErrorCode.INSUFFICIENT_PATH;
+          {
+            errorMessage = "Message at `".concat(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);
+      }
+
+      // Hot path that avoids creating an `IntlMessageFormat` instance
+      const plainMessage = getPlainMessage(message, values);
+      if (plainMessage) return plainMessage;
+      try {
+        messageFormat = new IntlMessageFormat__default.default(message, locale, convertFormatsToIntlMessageFormat({
+          ...globalFormats,
+          ...formats
+        }, timeZone));
+      } catch (error) {
+        return getFallbackFromErrorAndNotify(key, initializeConfig.IntlErrorCode.INVALID_MESSAGE, error.message);
+      }
+      messageFormatCache === null || messageFormatCache === void 0 || messageFormatCache.set(cacheKey, messageFormat);
+    }
+    try {
+      const formattedMessage = messageFormat.format(
+      // @ts-expect-error `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("Unable to format `".concat(key, "` in ").concat(namespace ? "namespace `".concat(namespace, "`") : 'messages') );
+      }
+
+      // Limit the function signature to return strings or React elements
+      return /*#__PURE__*/React.isValidElement(formattedMessage) ||
+      // Arrays of React elements
+      Array.isArray(formattedMessage) || typeof formattedMessage === 'string' ? formattedMessage : String(formattedMessage);
+    } catch (error) {
+      return getFallbackFromErrorAndNotify(key, initializeConfig.IntlErrorCode.FORMATTING_ERROR, error.message);
+    }
+  }
+  function translateFn( /** Use a dot to indicate a level of nesting (e.g. `namespace.nestedLabel`). */
+  key, /** Key value pairs for values to interpolate into the message. */
+  values, /** Provide custom formats for numbers, dates and times. */
+  formats) {
+    const result = translateBaseFn(key, values, formats);
+    if (typeof result !== 'string') {
+      return getFallbackFromErrorAndNotify(key, initializeConfig.IntlErrorCode.INVALID_MESSAGE, "The message `".concat(key, "` in ").concat(namespace ? "namespace `".concat(namespace, "`") : 'messages', " didn't resolve to a string. If you want to format rich text, use `t.rich` instead.") );
+    }
+    return result;
+  }
+  translateFn.rich = translateBaseFn;
+  translateFn.raw = key => {
+    if (messagesOrError instanceof initializeConfig.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, initializeConfig.IntlErrorCode.MISSING_MESSAGE, error.message);
+    }
+  };
+  return translateFn;
+}
+
+/**
+ * For the strictly typed messages to work we have to wrap the namespace into
+ * a mandatory prefix. See https://stackoverflow.com/a/71529575/343045
+ */
+function resolveNamespace(namespace, namespacePrefix) {
+  return namespace === namespacePrefix ? undefined : namespace.slice((namespacePrefix + '.').length);
+}
+
+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) {
+  const absValue = Math.abs(seconds);
+  let value, unit;
+
+  // 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
+  };
+}
+function createFormatter(_ref) {
+  let {
+    formats,
+    locale,
+    now: globalNow,
+    onError = initializeConfig.defaultOnError,
+    timeZone
+  } = _ref;
+  function resolveFormatOrOptions(typeFormats, formatOrOptions) {
+    let options;
+    if (typeof formatOrOptions === 'string') {
+      const formatName = formatOrOptions;
+      options = typeFormats === null || typeFormats === void 0 ? void 0 : typeFormats[formatName];
+      if (!options) {
+        const error = new initializeConfig.IntlError(initializeConfig.IntlErrorCode.MISSING_FORMAT, "Format `".concat(formatName, "` is not available. You can configure it on the provider or provide custom options.") );
+        onError(error);
+        throw error;
+      }
+    } else {
+      options = formatOrOptions;
+    }
+    return options;
+  }
+  function getFormattedValue(value, formatOrOptions, typeFormats, formatter) {
+    let options;
+    try {
+      options = resolveFormatOrOptions(typeFormats, formatOrOptions);
+    } catch (error) {
+      return String(value);
+    }
+    try {
+      return formatter(options);
+    } catch (error) {
+      onError(new initializeConfig.IntlError(initializeConfig.IntlErrorCode.FORMATTING_ERROR, error.message));
+      return String(value);
+    }
+  }
+  function dateTime( /** If a number is supplied, this is interpreted as a UTC timestamp. */
+  value,
+  /** If a time zone is supplied, the `value` is converted to that time zone.
+   * Otherwise the user time zone will be used. */
+  formatOrOptions) {
+    return getFormattedValue(value, formatOrOptions, formats === null || formats === void 0 ? void 0 : formats.dateTime, options => {
+      var _options;
+      if (timeZone && !((_options = options) !== null && _options !== void 0 && _options.timeZone)) {
+        options = {
+          ...options,
+          timeZone
+        };
+      }
+      return new Intl.DateTimeFormat(locale, options).format(value);
+    });
+  }
+  function number(value, formatOrOptions) {
+    return getFormattedValue(value, formatOrOptions, formats === null || formats === void 0 ? void 0 : formats.number, options => new Intl.NumberFormat(locale, options).format(value));
+  }
+  function relativeTime( /** The date time that needs to be formatted. */
+  date, /** The reference point in time to which `date` will be formatted in relation to.  */
+  now) {
+    try {
+      if (!now) {
+        if (globalNow) {
+          now = globalNow;
+        } else {
+          throw new Error("The `now` parameter wasn't provided and there was no global fallback configured on the provider." );
+        }
+      }
+      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 initializeConfig.IntlError(initializeConfig.IntlErrorCode.FORMATTING_ERROR, error.message));
+      return String(date);
+    }
+  }
+  function list(value, formatOrOptions) {
+    return getFormattedValue(value, formatOrOptions, formats === null || formats === void 0 ? void 0 : formats.list, options => new Intl.ListFormat(locale, options).format(value));
+  }
+  return {
+    dateTime,
+    number,
+    relativeTime,
+    list
+  };
+}
+
+/** @deprecated Switch to `createFormatter` */
+function createIntl() {
+  const formatter = createFormatter(...arguments);
+  return {
+    formatDateTime: formatter.dateTime,
+    formatNumber: formatter.number,
+    formatRelativeTime: formatter.relativeTime
+  };
+}
+
+exports.createBaseTranslator = createBaseTranslator;
+exports.createFormatter = createFormatter;
+exports.createIntl = createIntl;
+exports.resolveNamespace = resolveNamespace;

package/dist/development/index.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var initializeConfig = require('./initializeConfig-cde42612.js');
+var core = require('./core.js');
+var createIntl = require('./createIntl-dfba4462.js');
+var _IntlProvider = require('./_IntlProvider.js');
+var react = require('./react.js');
+var _useLocale = require('./_useLocale-321e619f.js');
+require('intl-messageformat');
+require('react');
+require('./IntlContext-b5cc6be8.js');
+
+
+
+exports.IntlError = initializeConfig.IntlError;
+exports.IntlErrorCode = initializeConfig.IntlErrorCode;
+exports.initializeConfig = initializeConfig.initializeConfig;
+exports.createTranslator = core.createTranslator;
+exports.createBaseTranslator = createIntl.createBaseTranslator;
+exports.createFormatter = createIntl.createFormatter;
+exports.createIntl = createIntl.createIntl;
+exports.IntlProvider = _IntlProvider.IntlProvider;
+exports.useFormatter = react.useFormatter;
+exports.useIntl = react.useIntl;
+exports.useMessages = react.useMessages;
+exports.useNow = react.useNow;
+exports.useTimeZone = react.useTimeZone;
+exports.useTranslations = react.useTranslations;
+exports.useLocale = _useLocale.useLocale;