use-intl 2.4.1-alpha.2 → 2.4.1-alpha.5

package/src/IntlContext.tsx

@@ -1,11 +1,11 @@
 import {createContext} from 'react';
+import AbstractIntlMessages from './AbstractIntlMessages';
 import Formats from './Formats';
 import IntlError from './IntlError';
-import IntlMessages from './IntlMessages';
 import {RichTranslationValues} from './TranslationValues';
 
 export type IntlContextShape = {
-  messages?: IntlMessages;
+  messages?: AbstractIntlMessages;
   locale: string;
   formats?: Partial<Formats>;
   timeZone?: string;

package/src/IntlMessages.tsx

@@ -1,5 +1,5 @@
-type IntlMessages = {
-  [id: string]: IntlMessages | string;
-};
+// This module is intended to be overridden
+// by the consumer for optional type safety
 
-export default IntlMessages;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+declare interface IntlMessages extends Record<string, any> {}

package/src/IntlProvider.tsx

@@ -1,13 +1,13 @@
 import React, {ReactNode} from 'react';
+import AbstractIntlMessages from './AbstractIntlMessages';
 import Formats from './Formats';
 import IntlContext from './IntlContext';
-import IntlMessages from './IntlMessages';
 import {RichTranslationValues} from './TranslationValues';
 import {IntlError} from '.';
 
 type Props = {
   /** All messages that will be available in your components. */
-  messages?: IntlMessages;
+  messages?: AbstractIntlMessages;
   /** A valid Unicode locale tag (e.g. "en" or "en-GB"). */
   locale: string;
   /** Global formats can be provided to achieve consistent

package/src/index.tsx

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

package/src/useTranslations.tsx

@@ -1,8 +1,13 @@
-// import GlobalMessages from './GlobalMessages';
+import {ReactElement, ReactNodeArray} from 'react';
+import Formats from './Formats';
+import IntlError, {IntlErrorCode} from './IntlError';
+import TranslationValues, {RichTranslationValues} from './TranslationValues';
 import useIntlContext from './useIntlContext';
 import useTranslationsImpl from './useTranslationsImpl';
+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.
@@ -13,23 +18,114 @@ import NestedKeyOf from './utils/NestedKeyOf';
  * (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')
+  NestedKey extends NamespaceKeys<IntlMessages, NestedKeyOf<IntlMessages>>
+>(
+  namespace?: NestedKey
+): // Explicitly defining the return type is necessary as TypeScript would get it wrong
+{
+  // Default invocation
+  <
+    TargetKey extends MessageKeys<
+      NestedValueOf<
+        {'!': IntlMessages},
+        NamespaceKeys<IntlMessages, NestedKeyOf<IntlMessages>> extends NestedKey
+          ? '!'
+          : `!.${NestedKey}`
+      >,
+      NestedKeyOf<
+        NestedValueOf<
+          {'!': IntlMessages},
+          NamespaceKeys<
+            IntlMessages,
+            NestedKeyOf<IntlMessages>
+          > extends NestedKey
+            ? '!'
+            : `!.${NestedKey}`
+        >
+      >
+    >
+  >(
+    key: TargetKey,
+    values?: TranslationValues,
+    formats?: Partial<Formats>
+  ): string;
+
+  // `rich`
+  rich<
+    TargetKey extends MessageKeys<
+      NestedValueOf<
+        {'!': IntlMessages},
+        NamespaceKeys<IntlMessages, NestedKeyOf<IntlMessages>> extends NestedKey
+          ? '!'
+          : `!.${NestedKey}`
+      >,
+      NestedKeyOf<
+        NestedValueOf<
+          {'!': IntlMessages},
+          NamespaceKeys<
+            IntlMessages,
+            NestedKeyOf<IntlMessages>
+          > extends NestedKey
+            ? '!'
+            : `!.${NestedKey}`
+        >
+      >
+    >
+  >(
+    key: TargetKey,
+    values?: RichTranslationValues,
+    formats?: Partial<Formats>
+  ): string | ReactElement | ReactNodeArray;
+
+  // `raw`
+  raw<
+    TargetKey extends MessageKeys<
+      NestedValueOf<
+        {'!': IntlMessages},
+        NamespaceKeys<IntlMessages, NestedKeyOf<IntlMessages>> extends NestedKey
+          ? '!'
+          : `!.${NestedKey}`
+      >,
+      NestedKeyOf<
+        NestedValueOf<
+          {'!': IntlMessages},
+          NamespaceKeys<
+            IntlMessages,
+            NestedKeyOf<IntlMessages>
+          > extends NestedKey
+            ? '!'
+            : `!.${NestedKey}`
+        >
+      >
+    >
+  >(
+    key: TargetKey
+  ): any;
+} {
+  const context = useIntlContext();
+
+  const messages = context.messages as IntlMessages;
+  if (!messages) {
+    const intlError = new IntlError(
+      IntlErrorCode.MISSING_MESSAGE,
+      __DEV__ ? `No messages were configured on the provider.` : undefined
+    );
+    context.onError(intlError);
+    throw intlError;
+  }
 
   // We have to wrap the actual hook so the type inference for the optional
   // namespace works correctly. See https://stackoverflow.com/a/71529575/343045
+  // The prefix ("!"") is arbitrary, but we have to use some.
   return useTranslationsImpl<
-    // @ts-ignore
-    {__private: GlobalMessages},
-    NamespaceKeys<GlobalMessages, NestedKeyOf<GlobalMessages>> extends NestedKey
-      ? '__private'
-      : `__private.${NestedKey}`
+    {'!': IntlMessages},
+    NamespaceKeys<IntlMessages, NestedKeyOf<IntlMessages>> extends NestedKey
+      ? '!'
+      : `!.${NestedKey}`
   >(
-    {__private: messages},
+    {'!': messages},
     // @ts-ignore
-    namespace ? `__private.${namespace}` : '__private'
+    namespace ? `!.${namespace}` : '!',
+    '!'
   );
 }

package/src/useTranslationsImpl.tsx

@@ -1,4 +1,4 @@
-import IntlMessageFormat from 'intl-messageformat';
+import {IntlMessageFormat} from 'intl-messageformat';
 import {
   cloneElement,
   isValidElement,
@@ -8,9 +8,9 @@ import {
   useMemo,
   useRef
 } from 'react';
+import AbstractIntlMessages from './AbstractIntlMessages';
 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';
@@ -19,7 +19,7 @@ import NestedKeyOf from './utils/NestedKeyOf';
 import NestedValueOf from './utils/NestedValueOf';
 
 function resolvePath(
-  messages: IntlMessages | undefined,
+  messages: AbstractIntlMessages | undefined,
   idPath: string,
   namespace?: string
 ) {
@@ -79,9 +79,9 @@ function prepareTranslationValues(values: RichTranslationValues) {
 }
 
 export default function useTranslationsImpl<
-  Messages extends IntlMessages,
+  Messages extends AbstractIntlMessages,
   NestedKey extends NestedKeyOf<Messages>
->(allMessages: Messages, namespace: NestedKey) {
+>(allMessages: Messages, namespace: NestedKey, namespacePrefix: string) {
   const {
     defaultTranslationValues,
     formats: globalFormats,
@@ -91,6 +91,15 @@ export default function useTranslationsImpl<
     timeZone
   } = useIntlContext();
 
+  // The `namespacePrefix` is part of the type system.
+  // See the comment in the hook invocation.
+  allMessages = allMessages[namespacePrefix] as Messages;
+  namespace = (
+    namespace === namespacePrefix
+      ? undefined
+      : namespace.slice((namespacePrefix + '.').length)
+  ) as NestedKey;
+
   const cachedFormatsByLocaleRef = useRef<
     Record<string, Record<string, IntlMessageFormat>>
   >({});

package/dist/GlobalMessages.d.ts

@@ -1,2 +0,0 @@
-declare interface GlobalMessages {
-}

package/src/GlobalMessages.tsx

@@ -1,6 +0,0 @@
-// This module is intended to be overridden
-// by the consumer for optional type safety
-
-// declare interface GlobalMessages extends Record<any, any> {}
-
-declare interface 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"
-      }
-    }
-  }
-}