fix: Accept a deep partial of Messages for messages prop of provider (#1679)

([ref](#1631 (comment)))

Author: amannn

examples/example-app-router-playground/src/components/TypePortabilityTest.ts

@@ -5,7 +5,7 @@
 
 import {
   createFormatter,
-  initializeConfig,
+  createTranslator,
   useFormatter,
   useLocale,
   useMessages,
@@ -60,9 +60,12 @@ export async function asyncApis() {
 }
 
 export const withNextIntl = createNextIntlPlugin();
-export const config = initializeConfig({locale: 'en'});
-// export const translator = createTranslator({locale: 'en'});
+
 export const formatter = createFormatter({
   locale: 'en',
   now: new Date(2022, 10, 6, 20, 20, 0, 0)
 });
+
+export const translator = createTranslator({
+  locale: 'en'
+});

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

@@ -1,58 +1,56 @@
-import type AbstractIntlMessages from './AbstractIntlMessages.js';
-import type {Locale} from './AppConfig.js';
+import type {Locale, Messages} from './AppConfig.js';
 import type Formats from './Formats.js';
 import type IntlError from './IntlError.js';
 import type TimeZone from './TimeZone.js';
+import type {DeepPartial} from './types.js';
 
 /**
  * Should be used for entry points that configure the library.
  */
 
-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;
-  };
+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?: DeepPartial<Messages>;
+};
 
+/**
 /**
  * A stricter set of the configuration that should be used internally
  * once defaults are assigned to `IntlConfiguration`.
  */
-export type InitializedIntlConfig<
-  Messages extends AbstractIntlMessages = AbstractIntlMessages
-> = IntlConfig<Messages> & {
-  onError: NonNullable<IntlConfig<Messages>['onError']>;
-  getMessageFallback: NonNullable<IntlConfig<Messages>['getMessageFallback']>;
+export type InitializedIntlConfig = IntlConfig & {
+  onError: NonNullable<IntlConfig['onError']>;
+  getMessageFallback: NonNullable<IntlConfig['getMessageFallback']>;
 };
 
 export default IntlConfig;

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

@@ -118,7 +118,7 @@ export default function createTranslator<
   namespace,
   onError = defaultOnError,
   ...rest
-}: Omit<IntlConfig<TranslatorMessages>, 'messages'> & {
+}: Omit<IntlConfig, 'messages'> & {
   messages?: TranslatorMessages;
   namespace?: Namespace;
   /** @private */

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

@@ -2,3 +2,9 @@
 export type Prettify<T> = {
   [K in keyof T]: T[K];
 } & {};
+
+export type DeepPartial<Type> = {
+  [Key in keyof Type]?: Type[Key] extends object
+    ? DeepPartial<Type[Key]>
+    : Type[Key];
+};

packages/use-intl/src/react/useTranslations.test.tsx

@@ -745,13 +745,7 @@ describe('error handling', () => {
     const onError = vi.fn();
 
     render(
-      <IntlProvider
-        locale="en"
-        // @ts-expect-error The types don't allow this,
-        // but this shouldn't lead to an error.
-        messages={{a: null}}
-        onError={onError}
-      >
+      <IntlProvider locale="en" messages={{a: null}} onError={onError}>
         <span />
       </IntlProvider>
     );
@@ -878,7 +872,6 @@ describe('error handling', () => {
     render(
       <IntlProvider
         locale="en"
-        // @ts-expect-error Arrays are not allowed
         messages={{Component: {array: ['a', 'b']}}}
         onError={onError}
       >
@@ -904,7 +897,6 @@ describe('error handling', () => {
     render(
       <IntlProvider
         locale="en"
-        // @ts-expect-error Arrays are not allowed
         messages={{Component: {array: ['a', 'b']}}}
         onError={onError}
       >