From c86e450f682fcfb23fff5315b3f60ced08ca02bc Mon Sep 17 00:00:00 2001 From: Jan Amann Date: Fri, 10 Jan 2025 09:09:38 +0100 Subject: [PATCH 1/2] feat: Allow overriding typed `Messages` when using `createTranslator` --- packages/use-intl/src/core/createTranslator.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/use-intl/src/core/createTranslator.tsx b/packages/use-intl/src/core/createTranslator.tsx index eef02b5da..4b08ae315 100644 --- a/packages/use-intl/src/core/createTranslator.tsx +++ b/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, formats?: Formats] : never; +// This type is slightly more loose than `AbstractIntlMessages` +// in order to avoid a type error. +type IntlMessages = Record; + type NamespacedMessageKeys< - TranslatorMessages extends Messages, + TranslatorMessages extends IntlMessages, Namespace extends NamespaceKeys< TranslatorMessages, NestedKeyOf @@ -82,7 +85,7 @@ type NamespacedMessageKeys< >; type NamespacedValue< - TranslatorMessages extends Messages, + TranslatorMessages extends IntlMessages, Namespace extends NamespaceKeys< TranslatorMessages, NestedKeyOf @@ -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 From e5982a744b299143117e8c04092afeb8d78dabe6 Mon Sep 17 00:00:00 2001 From: Jan Amann Date: Fri, 10 Jan 2025 09:23:36 +0100 Subject: [PATCH 2/2] `IntlConfig` should use extends to validate messages --- packages/use-intl/src/core/IntlConfig.tsx | 80 ++++++++++++----------- 1 file changed, 41 insertions(+), 39 deletions(-) diff --git a/packages/use-intl/src/core/IntlConfig.tsx b/packages/use-intl/src/core/IntlConfig.tsx index e5b379a9d..7a4f85208 100644 --- a/packages/use-intl/src/core/IntlConfig.tsx +++ b/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 = { - /** 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 = + { + /** 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 = - IntlConfig & { - onError: NonNullable['onError']>; - getMessageFallback: NonNullable['getMessageFallback']>; - }; +export type InitializedIntlConfig< + Messages extends AbstractIntlMessages = AbstractIntlMessages +> = IntlConfig & { + onError: NonNullable['onError']>; + getMessageFallback: NonNullable['getMessageFallback']>; +}; export default IntlConfig;