feat: Allow overriding typed Messages when using createTranslator (#1655)

Ref: https://x.com/ddunderfelt/status/1874403640515121642

Author: amannn

packages/use-intl/src/core/IntlConfig.tsx

@@ -8,49 +8,51 @@ import type TimeZone from './TimeZone.tsx';
  * Should be used for entry points that configure the library.
  */
 
-type IntlConfig<Messages = AbstractIntlMessages> = {
-  /** A valid Unicode locale tag (e.g. "en" or "en-GB"). */
-  locale: Locale;
-  /** Global formats can be provided to achieve consistent
-   * formatting across components. */
-  formats?: Formats;
-  /** A time zone as defined in [the tz database](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) which will be applied when formatting dates and times. If this is absent, the user time zone will be used. You can override this by supplying an explicit time zone to `formatDateTime`. */
-  timeZone?: TimeZone;
-  /** This callback will be invoked when an error is encountered during
-   * resolving a message or formatting it. This defaults to `console.error` to
-   * keep your app running. You can customize the handling by taking
-   * `error.code` into account. */
-  onError?(error: IntlError): void;
-  /** Will be called when a message couldn't be resolved or formatting it led to
-   * an error. This defaults to `${namespace}.${key}` You can use this to
-   * customize what will be rendered in this case. */
-  getMessageFallback?(info: {
-    error: IntlError;
-    key: string;
-    namespace?: string;
-  }): string;
-  /**
-   * Providing this value will have two effects:
-   * 1. It will be used as the default for the `now` argument of
-   *    `useFormatter().formatRelativeTime` if no explicit value is provided.
-   * 2. It will be returned as a static value from the `useNow` hook. Note
-   *    however that when `updateInterval` is configured on the `useNow` hook,
-   *    the global `now` value will only be used for the initial render, but
-   *    afterwards the current date will be returned continuously.
-   */
-  now?: Date;
-  /** All messages that will be available. */
-  messages?: Messages;
-};
+type IntlConfig<Messages extends AbstractIntlMessages = AbstractIntlMessages> =
+  {
+    /** A valid Unicode locale tag (e.g. "en" or "en-GB"). */
+    locale: Locale;
+    /** Global formats can be provided to achieve consistent
+     * formatting across components. */
+    formats?: Formats;
+    /** A time zone as defined in [the tz database](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) which will be applied when formatting dates and times. If this is absent, the user time zone will be used. You can override this by supplying an explicit time zone to `formatDateTime`. */
+    timeZone?: TimeZone;
+    /** This callback will be invoked when an error is encountered during
+     * resolving a message or formatting it. This defaults to `console.error` to
+     * keep your app running. You can customize the handling by taking
+     * `error.code` into account. */
+    onError?(error: IntlError): void;
+    /** Will be called when a message couldn't be resolved or formatting it led to
+     * an error. This defaults to `${namespace}.${key}` You can use this to
+     * customize what will be rendered in this case. */
+    getMessageFallback?(info: {
+      error: IntlError;
+      key: string;
+      namespace?: string;
+    }): string;
+    /**
+     * Providing this value will have two effects:
+     * 1. It will be used as the default for the `now` argument of
+     *    `useFormatter().formatRelativeTime` if no explicit value is provided.
+     * 2. It will be returned as a static value from the `useNow` hook. Note
+     *    however that when `updateInterval` is configured on the `useNow` hook,
+     *    the global `now` value will only be used for the initial render, but
+     *    afterwards the current date will be returned continuously.
+     */
+    now?: Date;
+    /** All messages that will be available. */
+    messages?: Messages;
+  };
 
 /**
  * A stricter set of the configuration that should be used internally
  * once defaults are assigned to `IntlConfiguration`.
  */
-export type InitializedIntlConfig<Messages = AbstractIntlMessages> =
-  IntlConfig<Messages> & {
-    onError: NonNullable<IntlConfig<Messages>['onError']>;
-    getMessageFallback: NonNullable<IntlConfig<Messages>['getMessageFallback']>;
-  };
+export type InitializedIntlConfig<
+  Messages extends AbstractIntlMessages = AbstractIntlMessages
+> = IntlConfig<Messages> & {
+  onError: NonNullable<IntlConfig<Messages>['onError']>;
+  getMessageFallback: NonNullable<IntlConfig<Messages>['getMessageFallback']>;
+};
 
 export default IntlConfig;

packages/use-intl/src/core/createTranslator.tsx

@@ -1,5 +1,4 @@
 import type {ReactNode} from 'react';
-import type {Messages} from './AppConfig.tsx';
 import type Formats from './Formats.tsx';
 import type ICUArgs from './ICUArgs.tsx';
 import type ICUTags from './ICUTags.tsx';
@@ -62,8 +61,12 @@ type TranslateArgs<
         : [values: Prettify<Args>, formats?: Formats]
       : never;
 
+// This type is slightly more loose than `AbstractIntlMessages`
+// in order to avoid a type error.
+type IntlMessages = Record<string, any>;
+
 type NamespacedMessageKeys<
-  TranslatorMessages extends Messages,
+  TranslatorMessages extends IntlMessages,
   Namespace extends NamespaceKeys<
     TranslatorMessages,
     NestedKeyOf<TranslatorMessages>
@@ -82,7 +85,7 @@ type NamespacedMessageKeys<
 >;
 
 type NamespacedValue<
-  TranslatorMessages extends Messages,
+  TranslatorMessages extends IntlMessages,
   Namespace extends NamespaceKeys<
     TranslatorMessages,
     NestedKeyOf<TranslatorMessages>
@@ -102,7 +105,7 @@ type NamespacedValue<
  * (e.g. `namespace.Component`).
  */
 export default function createTranslator<
-  const TranslatorMessages extends Messages = Messages,
+  const TranslatorMessages extends IntlMessages,
   const Namespace extends NamespaceKeys<
     TranslatorMessages,
     NestedKeyOf<TranslatorMessages>