feat: Use enum type for style of NumberFormatOptions

packages/next-intl/package.json

@@ -45,15 +45,15 @@
   },
   "devDependencies": {
     "@testing-library/react": "^11.1.2",
-    "@types/react": "^16.9.56",
+    "@types/react": "^17.0.33",
     "eslint": "7.4.0",
     "eslint-config-molindo": "5.0.1",
     "next": "^11.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "tsdx": "^0.14.1",
-    "tslib": "^2.0.3",
-    "typescript": "^4.1.2"
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.4"
   },
   "engines": {
     "node": ">=10"

packages/next-intl/tsconfig.json

@@ -6,7 +6,7 @@
     "importHelpers": true,
     "declaration": true,
     "sourceMap": true,
-    "rootDir": "./src",
+    "rootDir": ".",
     "strict": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,

packages/use-intl/package.json

@@ -42,15 +42,15 @@
   },
   "devDependencies": {
     "@testing-library/react": "^11.1.2",
-    "@types/react": "^16.9.56",
+    "@types/react": "^17.0.33",
     "date-fns": "^2.16.1",
     "eslint": "7.4.0",
     "eslint-config-molindo": "5.0.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "tsdx": "^0.14.1",
-    "tslib": "^2.0.3",
-    "typescript": "^4.1.2"
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.4"
   },
   "engines": {
     "node": ">=10"

packages/use-intl/src/NumberFormatOptions.tsx

@@ -0,0 +1,5 @@
+type NumberFormatOptions = Intl.NumberFormatOptions & {
+  style?: 'decimal' | 'currency' | 'percent' | 'unit';
+};
+
+export default NumberFormatOptions;

packages/use-intl/src/TranslationValues.tsx

@@ -1,15 +1,13 @@
 import {ReactNode} from 'react';
 
-type TranslationValues = Record<
+// From IntlMessageFormat#format
+type TranslationValue = string | number | boolean | Date | null | undefined;
+
+type TranslationValues = Record<string, TranslationValue>;
+
+export type RichTranslationValues = Record<
   string,
-  // From IntlMessageFormat#format
-  | string
-  | number
-  | boolean
-  | Date
-  | null
-  | undefined
-  | ((children: ReactNode) => ReactNode)
+  TranslationValue | ((children: ReactNode) => ReactNode)
 >;
 
 export default TranslationValues;

packages/use-intl/src/index.tsx

@@ -1,9 +1,13 @@
 export {default as IntlProvider} from './IntlProvider';
 export {default as IntlMessages} from './IntlMessages';
 export {default as useTranslations} from './useTranslations';
-export {default as TranslationValues} from './TranslationValues';
+export {
+  default as TranslationValues,
+  RichTranslationValues
+} from './TranslationValues';
 export {default as useIntl} from './useIntl';
 export {default as useNow} from './useNow';
 export {default as Formats} from './Formats';
 export {default as DateTimeFormatOptions} from './DateTimeFormatOptions';
+export {default as NumberFormatOptions} from './NumberFormatOptions';
 export {default as IntlError, IntlErrorCode} from './IntlError';

packages/use-intl/src/useIntl.tsx

@@ -87,7 +87,9 @@ export default function useIntl() {
     try {
       return formatter(options);
     } catch (error) {
-      onError(new IntlError(IntlErrorCode.FORMATTING_ERROR, error.message));
+      onError(
+        new IntlError(IntlErrorCode.FORMATTING_ERROR, (error as Error).message)
+      );
       return String(value);
     }
   }
@@ -154,7 +156,9 @@ export default function useIntl() {
         numeric: 'auto'
       }).format(value, unit);
     } catch (error) {
-      onError(new IntlError(IntlErrorCode.FORMATTING_ERROR, error.message));
+      onError(
+        new IntlError(IntlErrorCode.FORMATTING_ERROR, (error as Error).message)
+      );
       return String(date);
     }
   }

packages/use-intl/src/useTranslations.tsx

@@ -11,7 +11,7 @@ import {
 import Formats from './Formats';
 import IntlError, {IntlErrorCode} from './IntlError';
 import IntlMessages from './IntlMessages';
-import TranslationValues from './TranslationValues';
+import TranslationValues, {RichTranslationValues} from './TranslationValues';
 import convertFormatsToIntlMessageFormat from './convertFormatsToIntlMessageFormat';
 import useIntlContext from './useIntlContext';
 
@@ -47,11 +47,11 @@ function resolvePath(
   return message;
 }
 
-function prepareTranslationValues(values?: TranslationValues) {
+function prepareTranslationValues(values?: RichTranslationValues) {
   if (!values) return values;
 
   // Workaround for https://github.com/formatjs/formatjs/issues/1467
-  const transformedValues: TranslationValues = {};
+  const transformedValues: RichTranslationValues = {};
   Object.keys(values).forEach((key) => {
     const value = values[key];
 
@@ -116,7 +116,7 @@ export default function useTranslations(namespace?: string) {
     } catch (error) {
       const intlError = new IntlError(
         IntlErrorCode.MISSING_MESSAGE,
-        error.message
+        (error as Error).message
       );
       onError(intlError);
       return intlError;
@@ -138,7 +138,7 @@ export default function useTranslations(namespace?: string) {
       /** 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,
+      values?: RichTranslationValues,
       /** Provide custom formats for numbers, dates and times. */
       formats?: Partial<Formats>
     ): string | ReactElement | ReactNodeArray {
@@ -169,7 +169,7 @@ export default function useTranslations(namespace?: string) {
           return getFallbackFromErrorAndNotify(
             key,
             IntlErrorCode.MISSING_MESSAGE,
-            error.message
+            (error as Error).message
           );
         }
 
@@ -198,7 +198,7 @@ export default function useTranslations(namespace?: string) {
           return getFallbackFromErrorAndNotify(
             key,
             IntlErrorCode.INVALID_MESSAGE,
-            error.message
+            (error as Error).message
           );
         }
 
@@ -234,7 +234,7 @@ export default function useTranslations(namespace?: string) {
         return getFallbackFromErrorAndNotify(
           key,
           IntlErrorCode.FORMATTING_ERROR,
-          error.message
+          (error as Error).message
         );
       }
     }
@@ -286,7 +286,7 @@ export default function useTranslations(namespace?: string) {
         return getFallbackFromErrorAndNotify(
           key,
           IntlErrorCode.MISSING_MESSAGE,
-          error.message
+          (error as Error).message
         );
       }
     };

packages/use-intl/test/useIntl.test.tsx

@@ -3,6 +3,7 @@ import {parseISO} from 'date-fns';
 import React, {ComponentProps, ReactNode} from 'react';
 import {
   DateTimeFormatOptions,
+  NumberFormatOptions,
   IntlError,
   IntlErrorCode,
   IntlProvider,
@@ -192,7 +193,7 @@ describe('formatDateTime', () => {
 });
 
 describe('formatNumber', () => {
-  function renderNumber(value: number, options?: Intl.NumberFormatOptions) {
+  function renderNumber(value: number, options?: NumberFormatOptions) {
     function Component() {
       const intl = useIntl();
       return <>{intl.formatNumber(value, options)}</>;

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

@@ -6,6 +6,7 @@ import {
   IntlError,
   IntlErrorCode,
   IntlProvider,
+  RichTranslationValues,
   TranslationValues,
   useTranslations
 } from '../src';
@@ -266,7 +267,7 @@ it('renders the correct message when the namespace changes', () => {
 describe('t.rich', () => {
   function renderRichTextMessage(
     message: string,
-    values?: TranslationValues,
+    values?: RichTranslationValues,
     formats?: Partial<Formats>
   ) {
     function Component() {
@@ -488,6 +489,7 @@ describe('error handling', () => {
 
     function Component() {
       const t = useTranslations();
+      // @ts-expect-error Invalid usage
       return <>{t('rich', {p: (children) => <p>{children}</p>})}</>;
     }
 

packages/use-intl/tsconfig.json

@@ -6,7 +6,7 @@
     "importHelpers": true,
     "declaration": true,
     "sourceMap": true,
-    "rootDir": "./src",
+    "rootDir": ".",
     "strict": true,
     "noImplicitReturns": false,
     "noFallthroughCasesInSwitch": true,

yarn.lock

@@ -2392,12 +2392,13 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
-"@types/react@^16.9.56":
-  version "16.14.2"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c"
-  integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==
+"@types/react@^17.0.33":
+  version "17.0.33"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.33.tgz#e01ae3de7613dac1094569880bb3792732203ad5"
+  integrity sha512-pLWntxXpDPaU+RTAuSGWGSEL2FRTNyRQOjSWDke/rxRg14ncsZvx8AKWMWZqvc1UOaJIAoObdZhAWvRaHFi5rw==
   dependencies:
     "@types/prop-types" "*"
+    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/[email protected]":
@@ -2407,6 +2408,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -10842,11 +10848,16 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.1, tslib@^2.0.3:
+tslib@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
   integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
 
+tslib@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
@@ -10949,10 +10960,10 @@ typescript@^3.0.0, typescript@^3.7.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
   integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
 
-typescript@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9"
-  integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ==
+typescript@^4.4.4:
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c"
+  integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
 
 uglify-js@^3.1.4:
   version "3.12.5"