use-intl 2.3.4 → 2.4.1-alpha.1

package/src/GlobalMessages.tsx

@@ -0,0 +1,14 @@
+// This module is intended to be overridden
+// by the consumer for optional type safety
+
+// type Messages = typeof import('./en.json');
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type Unknown = {};
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface GlobalMessages
+  // Messages,
+  extends Unknown {}
+
+export default GlobalMessages;

package/src/IntlContext.tsx

@@ -2,6 +2,7 @@ import {createContext} from 'react';
 import Formats from './Formats';
 import IntlError from './IntlError';
 import IntlMessages from './IntlMessages';
+import {RichTranslationValues} from './TranslationValues';
 
 export type IntlContextShape = {
   messages?: IntlMessages;
@@ -15,6 +16,7 @@ export type IntlContextShape = {
     namespace?: string;
   }): string;
   now?: Date;
+  defaultTranslationValues?: RichTranslationValues;
 };
 
 const IntlContext = createContext<IntlContextShape | undefined>(undefined);

package/src/IntlMessages.tsx

@@ -1,3 +1,5 @@
-type IntlMessages = {[id: string]: IntlMessages | string};
+type IntlMessages = {
+  [id: string]: IntlMessages | string;
+};
 
 export default IntlMessages;

package/src/IntlProvider.tsx

@@ -2,6 +2,7 @@ import React, {ReactNode} from 'react';
 import Formats from './Formats';
 import IntlContext from './IntlContext';
 import IntlMessages from './IntlMessages';
+import {RichTranslationValues} from './TranslationValues';
 import {IntlError} from '.';
 
 type Props = {
@@ -39,6 +40,10 @@ type Props = {
    *    afterwards the current date will be returned continuously.
    */
   now?: Date;
+  /** 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;
 };
 
 function defaultGetMessageFallback({

package/src/en.json

@@ -0,0 +1,32 @@
+{
+  "About": {
+    "title": "About",
+    "lastUpdated": "This example was updated {lastUpdatedRelative} ({lastUpdated, date, short}).",
+    "nested": {
+      "hello": "Hello"
+    }
+  },
+  "Index": {
+    "title": "Home",
+    "description": "<p>Only the minimum of <code>{locale}</code> messages are loaded to render this page.</p><p>These namespaces are available:</p>"
+  },
+  "Navigation": {
+    "index": "Home",
+    "about": "About",
+    "switchLocale": "Switch to {locale, select, de {German} en {English}}"
+  },
+  "NotFound": {
+    "title": "Sorry, this page could not be found."
+  },
+  "PageLayout": {
+    "pageTitle": "next-intl"
+  },
+  "Test": {
+    "nested": {
+      "hello": "Hello",
+      "another": {
+        "level": "Level"
+      }
+    }
+  }
+}

package/src/index.tsx

@@ -1,5 +1,6 @@
 export {default as IntlProvider} from './IntlProvider';
 export {default as IntlMessages} from './IntlMessages';
+export {default as GlobalMessages} from './GlobalMessages';
 export {default as useTranslations} from './useTranslations';
 export {
   default as TranslationValues,

package/src/useTranslations.tsx

@@ -1,80 +1,8 @@
-import IntlMessageFormat from 'intl-messageformat';
-import {
-  cloneElement,
-  isValidElement,
-  ReactElement,
-  ReactNode,
-  ReactNodeArray,
-  useMemo,
-  useRef
-} from 'react';
-import Formats from './Formats';
-import IntlError, {IntlErrorCode} from './IntlError';
-import IntlMessages from './IntlMessages';
-import TranslationValues, {RichTranslationValues} from './TranslationValues';
-import convertFormatsToIntlMessageFormat from './convertFormatsToIntlMessageFormat';
+import GlobalMessages from './GlobalMessages';
 import useIntlContext from './useIntlContext';
-
-function resolvePath(
-  messages: IntlMessages | undefined,
-  idPath: string,
-  namespace?: string
-) {
-  if (!messages) {
-    throw new Error(
-      __DEV__ ? `No messages available at \`${namespace}\`.` : undefined
-    );
-  }
-
-  let message = messages;
-
-  idPath.split('.').forEach((part) => {
-    const next = (message as any)[part];
-
-    if (part == null || next == null) {
-      throw new Error(
-        __DEV__
-          ? `Could not resolve \`${idPath}\` in ${
-              namespace ? `\`${namespace}\`` : 'messages'
-            }.`
-          : undefined
-      );
-    }
-
-    message = next;
-  });
-
-  return message;
-}
-
-function prepareTranslationValues(values?: RichTranslationValues) {
-  if (!values) return values;
-
-  // Workaround for https://github.com/formatjs/formatjs/issues/1467
-  const transformedValues: RichTranslationValues = {};
-  Object.keys(values).forEach((key) => {
-    const value = values[key];
-
-    let transformed;
-    if (typeof value === 'function') {
-      transformed = (children: ReactNode) => {
-        const result = value(children);
-
-        return isValidElement(result)
-          ? cloneElement(result, {
-              key: result.key || key + String(children)
-            })
-          : result;
-      };
-    } else {
-      transformed = value;
-    }
-
-    transformedValues[key] = transformed;
-  });
-
-  return transformedValues;
-}
+import useTranslationsImpl from './useTranslationsImpl';
+import NamespaceKeys from './utils/NamespaceKeys';
+import NestedKeyOf from './utils/NestedKeyOf';
 
 /**
  * Translates messages from the given namespace by using the ICU syntax.
@@ -84,229 +12,23 @@ function prepareTranslationValues(values?: RichTranslationValues) {
  * The namespace can also indicate nesting by using a dot
  * (e.g. `namespace.Component`).
  */
-export default function useTranslations(namespace?: string) {
-  const {
-    formats: globalFormats,
-    getMessageFallback,
-    locale,
-    messages: allMessages,
-    onError,
-    timeZone
-  } = useIntlContext();
-
-  const cachedFormatsByLocaleRef = useRef<
-    Record<string, Record<string, IntlMessageFormat>>
-  >({});
-
-  const messagesOrError = useMemo(() => {
-    try {
-      if (!allMessages) {
-        throw new Error(
-          __DEV__ ? `No messages were configured on the provider.` : undefined
-        );
-      }
-
-      const retrievedMessages = namespace
-        ? resolvePath(allMessages, namespace)
-        : allMessages;
-
-      if (!retrievedMessages) {
-        throw new Error(
-          __DEV__
-            ? `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;
-    }
-  }, [allMessages, namespace, onError]);
-
-  const translate = useMemo(() => {
-    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 {
-      const cachedFormatsByLocale = cachedFormatsByLocaleRef.current;
-
-      if (messagesOrError instanceof IntlError) {
-        // We have already warned about this during render
-        return getMessageFallback({
-          error: messagesOrError,
-          key,
-          namespace
-        });
-      }
-      const messages = messagesOrError;
-
-      const cacheKey = [namespace, key]
-        .filter((part) => part != null)
-        .join('.');
-
-      let messageFormat;
-      if (cachedFormatsByLocale[locale]?.[cacheKey]) {
-        messageFormat = cachedFormatsByLocale[locale][cacheKey];
-      } else {
-        let message;
-        try {
-          message = resolvePath(messages, key, namespace);
-        } catch (error) {
-          return getFallbackFromErrorAndNotify(
-            key,
-            IntlErrorCode.MISSING_MESSAGE,
-            (error as Error).message
-          );
-        }
-
-        if (typeof message === 'object') {
-          return getFallbackFromErrorAndNotify(
-            key,
-            IntlErrorCode.INSUFFICIENT_PATH,
-            __DEV__
-              ? `Insufficient path specified for \`${key}\` in \`${
-                  namespace ? `\`${namespace}\`` : 'messages'
-                }\`.`
-              : undefined
-          );
-        }
-
-        try {
-          messageFormat = new IntlMessageFormat(
-            message,
-            locale,
-            convertFormatsToIntlMessageFormat(
-              {...globalFormats, ...formats},
-              timeZone
-            )
-          );
-        } catch (error) {
-          return getFallbackFromErrorAndNotify(
-            key,
-            IntlErrorCode.INVALID_MESSAGE,
-            (error as Error).message
-          );
-        }
-
-        if (!cachedFormatsByLocale[locale]) {
-          cachedFormatsByLocale[locale] = {};
-        }
-        cachedFormatsByLocale[locale][cacheKey] = messageFormat;
-      }
-
-      try {
-        const formattedMessage = messageFormat.format(
-          prepareTranslationValues(values)
-        );
-
-        if (formattedMessage == null) {
-          throw new Error(
-            __DEV__
-              ? `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(
-      /** 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?: TranslationValues,
-      /** Provide custom formats for numbers, dates and times. */
-      formats?: Partial<Formats>
-    ): string {
-      const message = translateBaseFn(key, values, formats);
-
-      if (typeof message !== 'string') {
-        return getFallbackFromErrorAndNotify(
-          key,
-          IntlErrorCode.INVALID_MESSAGE,
-          __DEV__
-            ? `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 message;
-    }
-
-    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;
-  }, [
-    getMessageFallback,
-    globalFormats,
-    locale,
-    messagesOrError,
-    namespace,
-    onError,
-    timeZone
-  ]);
-
-  return translate;
+export default function useTranslations<
+  NestedKey extends NamespaceKeys<GlobalMessages, NestedKeyOf<GlobalMessages>>
+>(namespace?: NestedKey) {
+  // @ts-ignore
+  const messages = useIntlContext().messages as GlobalMessages;
+  if (!messages) throw new Error('TODO')
+
+  // We have to wrap the actual hook so the type inference for the optional
+  // namespace works correctly. See https://stackoverflow.com/a/71529575/343045
+  return useTranslationsImpl<
+    // @ts-ignore
+    {__private: GlobalMessages},
+    NamespaceKeys<GlobalMessages, NestedKeyOf<GlobalMessages>> extends NestedKey
+      ? '__private'
+      : `__private.${NestedKey}`
+  >(
+    {__private: messages},
+    namespace ? `__private.${namespace}` : '__private'
+  );
 }