use-intl 2.4.1-alpha.1 → 2.4.1

package/src/useTranslations.tsx

@@ -1,8 +1,79 @@
-import GlobalMessages from './GlobalMessages';
+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 useIntlContext from './useIntlContext';
-import useTranslationsImpl from './useTranslationsImpl';
-import NamespaceKeys from './utils/NamespaceKeys';
-import NestedKeyOf from './utils/NestedKeyOf';
+
+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 (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 = (children: ReactNode) => {
+        const result = value(children);
+
+        return isValidElement(result)
+          ? cloneElement(result, {key: key + index++})
+          : result;
+      };
+    } else {
+      transformed = value;
+    }
+
+    transformedValues[key] = transformed;
+  });
+
+  return transformedValues;
+}
 
 /**
  * Translates messages from the given namespace by using the ICU syntax.
@@ -12,23 +83,231 @@ import NestedKeyOf from './utils/NestedKeyOf';
  * The namespace can also indicate nesting by using a dot
  * (e.g. `namespace.Component`).
  */
-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'
-  );
+export default function useTranslations(namespace?: string) {
+  const {
+    defaultTranslationValues,
+    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({...defaultTranslationValues, ...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,
+    defaultTranslationValues
+  ]);
+
+  return translate;
 }

package/dist/GlobalMessages.d.ts

@@ -1,4 +0,0 @@
-declare type Unknown = {};
-interface GlobalMessages extends Unknown {
-}
-export default GlobalMessages;

package/dist/useTranslationsImpl.d.ts

@@ -1,12 +0,0 @@
-import { ReactElement, ReactNodeArray } from 'react';
-import Formats from './Formats';
-import IntlMessages from './IntlMessages';
-import TranslationValues, { RichTranslationValues } from './TranslationValues';
-import MessageKeys from './utils/MessageKeys';
-import NestedKeyOf from './utils/NestedKeyOf';
-import NestedValueOf from './utils/NestedValueOf';
-export default function useTranslationsImpl<Messages extends IntlMessages, NestedKey extends NestedKeyOf<Messages>>(allMessages: Messages, namespace: NestedKey): {
-    <TargetKey extends MessageKeys<NestedValueOf<Messages, NestedKey>, NestedKeyOf<NestedValueOf<Messages, NestedKey>>>>(key: TargetKey, values?: TranslationValues | undefined, formats?: Partial<Formats> | undefined): string;
-    rich: (key: string, values?: RichTranslationValues | undefined, formats?: Partial<Formats> | undefined) => string | ReactElement | ReactNodeArray;
-    raw(key: string): any;
-};

package/dist/utils/MessageKeys.d.ts

@@ -1,5 +0,0 @@
-import NestedValueOf from './NestedValueOf';
-declare type MessageKeys<ObjectType, Keys extends string> = {
-    [Property in Keys]: NestedValueOf<ObjectType, Property> extends string ? Property : never;
-}[Keys];
-export default MessageKeys;

package/dist/utils/NamespaceKeys.d.ts

@@ -1,5 +0,0 @@
-import NestedValueOf from './NestedValueOf';
-declare type NamespaceKeys<ObjectType, Keys extends string> = {
-    [Property in Keys]: NestedValueOf<ObjectType, Property> extends string ? never : Property;
-}[Keys];
-export default NamespaceKeys;

package/dist/utils/NestedKeyOf.d.ts

@@ -1,4 +0,0 @@
-declare type NestedKeyOf<ObjectType> = ObjectType extends object ? {
-    [Key in keyof ObjectType]: `${Key & string}` | `${Key & string}.${NestedKeyOf<ObjectType[Key]>}`;
-}[keyof ObjectType] : never;
-export default NestedKeyOf;

package/dist/utils/NestedValueOf.d.ts

@@ -1,2 +0,0 @@
-declare type NestedValueOf<ObjectType, Property extends string> = Property extends `${infer Key}.${infer Rest}` ? Key extends keyof ObjectType ? NestedValueOf<ObjectType[Key], Rest> : never : Property extends keyof ObjectType ? ObjectType[Property] : never;
-export default NestedValueOf;

package/src/GlobalMessages.tsx

@@ -1,14 +0,0 @@
-// 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/en.json

@@ -1,32 +0,0 @@
-{
-  "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"
-      }
-    }
-  }
-}