feat(use-i18): typesafe useTranslation (#956)

* feat(use-i18): typesafe useTranslation

* refactor: remove prefix key

* feat: add back tests without prefix

* chore(deps): bump international-types

Author: Tom Lienard

packages/use-i18n/package.json

@@ -31,13 +31,13 @@
     "@formatjs/fast-memoize": "1.2.6",
     "date-fns": "2.29.2",
     "filesize": "9.0.11",
-    "international-types": "0.3.3",
+    "international-types": "0.3.4",
     "intl-messageformat": "10.1.4",
     "prop-types": "15.8.1"
   },
   "peerDependencies": {
     "date-fns": "2.x",
-    "international-types": "0.3.3",
+    "international-types": "0.3.4",
     "react": "18.x",
     "react-dom": "18.x"
   }

packages/use-i18n/src/__tests__/locales/namespaces/en/profile.json

@@ -1,5 +1,4 @@
 {
-  "prefix": "profile",
   "name": "Name",
   "lastName": "Last Name"
 }

packages/use-i18n/src/__tests__/locales/namespaces/en/user.json

@@ -1,5 +1,4 @@
 {
-  "prefix": "user",
   "name": "Name",
   "lastName": "Last Name",
   "languages": "Languages"

packages/use-i18n/src/__tests__/locales/namespaces/fr/profile.json

@@ -1,5 +1,4 @@
 {
-  "prefix": "profile",
   "name": "Prénom",
   "lastName": "Nom"
 }

packages/use-i18n/src/__tests__/locales/namespaces/fr/user.json

@@ -1,5 +1,4 @@
 {
-  "prefix": "user",
   "name": "Prénom",
   "lastName": "Nom"
 }

packages/use-i18n/src/__tests__/usei18n.tsx

@@ -133,18 +133,16 @@ describe('i18n hook', () => {
     await waitFor(() => {
       expect(result.current.translations).toStrictEqual({
         en: {
-          'profile.lastName': 'Last Name',
-          'profile.name': 'Name',
-          'user.languages': 'Languages',
-          'user.lastName': 'Last Name',
-          'user.name': 'Name',
+          languages: 'Languages',
+          lastName: 'Last Name',
+          name: 'Name',
         },
       })
     })
 
-    expect(result.current.t('user.name')).toEqual('Name')
-    expect(result.current.t('user.lastName')).toEqual('Last Name')
-    expect(result.current.t('user.languages')).toEqual('Languages')
+    expect(result.current.t('name')).toEqual('Name')
+    expect(result.current.t('lastName')).toEqual('Last Name')
+    expect(result.current.t('languages')).toEqual('Languages')
 
     act(() => {
       result.current.switchLocale('fr')
@@ -153,27 +151,20 @@ describe('i18n hook', () => {
     await waitFor(() => {
       expect(result.current.translations).toStrictEqual({
         en: {
-          'profile.lastName': 'Last Name',
-          'profile.name': 'Name',
-          'user.languages': 'Languages',
-          'user.lastName': 'Last Name',
-          'user.name': 'Name',
+          languages: 'Languages',
+          lastName: 'Last Name',
+          name: 'Name',
         },
         fr: {
-          'profile.lastName': 'Nom',
-          'profile.name': 'Prénom',
-          'user.lastName': 'Nom',
-          'user.name': 'Prénom',
+          lastName: 'Nom',
+          name: 'Prénom',
         },
       })
     })
 
-    expect(result.current.t('user.name')).toEqual('Prénom')
-    expect(result.current.t('user.lastName')).toEqual('Nom')
-    expect(result.current.t('user.languages')).toEqual('')
-
-    expect(result.current.t('user')).toEqual('')
-    expect(result.current.t('user', { test: 'toto' })).toEqual('')
+    expect(result.current.t('name')).toEqual('Prénom')
+    expect(result.current.t('lastName')).toEqual('Nom')
+    expect(result.current.t('languages')).toEqual('')
   })
 
   it("should use specific load and fallback default local if the key doesn't exist", async () => {
@@ -202,19 +193,19 @@ describe('i18n hook', () => {
     await waitFor(() => {
       expect(result.current.translations).toStrictEqual({
         en: {
-          'user.languages': 'Languages',
-          'user.lastName': 'Last Name',
-          'user.name': 'Name',
+          languages: 'Languages',
+          lastName: 'Last Name',
+          name: 'Name',
         },
         fr: {
-          'user.lastName': 'Nom',
-          'user.name': 'Prénom',
+          lastName: 'Nom',
+          name: 'Prénom',
         },
       })
 
-      expect(result.current.t('user.languages')).toEqual('')
-      expect(result.current.t('user.lastName')).toEqual('Nom')
-      expect(result.current.t('user.name')).toEqual('Prénom')
+      expect(result.current.t('languages')).toEqual('')
+      expect(result.current.t('lastName')).toEqual('Nom')
+      expect(result.current.t('name')).toEqual('Prénom')
     })
   })
 

packages/use-i18n/src/usei18n.tsx

@@ -35,13 +35,6 @@ export type InitialScopedTranslateFn = (
   t?: InitialTranslateFn,
 ) => InitialTranslateFn
 
-const prefixKeys = (prefix: string) => (obj: { [key: string]: string }) =>
-  Object.keys(obj).reduce((acc: { [key: string]: string }, key) => {
-    acc[`${prefix}${key}`] = obj[key]
-
-    return acc
-  }, {})
-
 const areNamespacesLoaded = (
   namespaces: string[],
   loadedNamespaces: string[] = [],
@@ -126,10 +119,12 @@ export function useI18n<
   return context as unknown as Context<Locale>
 }
 
-export const useTranslation = (
+export function useTranslation<
+  Locale extends BaseLocale | undefined = undefined,
+>(
   namespaces: string[] = [],
   load: LoadTranslationsFn | undefined = undefined,
-): Context & { isLoaded: boolean } => {
+): Context<Locale> & { isLoaded: boolean } {
   const context = useContext(I18nContext)
   if (context === undefined) {
     throw new Error('useTranslation must be used within a I18nProvider')
@@ -148,7 +143,9 @@ export const useTranslation = (
     [loadedNamespaces, namespaces],
   )
 
-  return { ...context, isLoaded }
+  return { ...context, isLoaded } as unknown as Context<Locale> & {
+    isLoaded: boolean
+  }
 }
 
 type LoadTranslationsFn = ({
@@ -222,9 +219,6 @@ const I18nContextProvider = ({
         ...result[currentLocale].default,
       }
 
-      const { prefix, ...values } = trad
-      const preparedValues = prefix ? prefixKeys(`${prefix}.`)(values) : values
-
       // avoid a lot of render when async update
       // This is handled automatically in react 18, but we leave it here for compat
       // https://github.com/reactwg/react-18/discussions/21#discussioncomment-801703
@@ -234,7 +228,7 @@ const I18nContextProvider = ({
           ...{
             [currentLocale]: {
               ...prevState[currentLocale],
-              ...preparedValues,
+              ...trad,
             },
           },
         }))