feat(i18n): add types for react components in params value (#1034)

Author: Tom Lienard

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

@@ -602,9 +602,12 @@ describe('i18n hook', () => {
   })
 
   it('should work with a component', async () => {
-    const { result } = renderHook(() => useTranslation([]), {
-      wrapper: wrapper({ defaultLocale: 'en' }),
-    })
+    const { result } = renderHook(
+      () => useTranslation<{ 'with.identifier': 'Hello {identifier}' }>([]),
+      {
+        wrapper: wrapper({ defaultLocale: 'en' }),
+      },
+    )
     const CustomComponent = ({ children }: { children: ReactNode }) => (
       <p style={{ fontWeight: 'bold' }}>{children}</p>
     )

packages/use-i18n/src/__typetests__/t.test.ts renamed to packages/use-i18n/src/__typetests__/t.test.tsx

@@ -47,3 +47,14 @@ expectType<string>(
 )
 expectError(t('describe.john', {}))
 expectError(t('describe.john'))
+
+// With react components as param value
+expectType<string>(
+  t('doe.child', {
+    name: (
+      <p>
+        My name is<b>John</b>
+      </p>
+    ),
+  }),
+)

packages/use-i18n/src/types.ts

@@ -3,17 +3,22 @@ import type {
   LocaleKeys,
   LocaleValue,
   Params,
-  ParamsObject,
   ScopedValue,
   Scopes,
 } from 'international-types'
+import type { ReactNode } from 'react'
+
+export type ReactParamsObject<Value extends LocaleValue> = Record<
+  Params<Value>[number],
+  LocaleValue | ReactNode
+>
 
 export type TranslateFn<Locale extends BaseLocale> = <
   Key extends LocaleKeys<Locale, undefined>,
   Value extends LocaleValue = ScopedValue<Locale, undefined, Key>,
 >(
   key: Key,
-  ...params: Params<Value>['length'] extends 0 ? [] : [ParamsObject<Value>]
+  ...params: Params<Value>['length'] extends 0 ? [] : [ReactParamsObject<Value>]
 ) => string
 
 export type ScopedTranslateFn<Locale extends BaseLocale> = <
@@ -25,5 +30,5 @@ export type ScopedTranslateFn<Locale extends BaseLocale> = <
   Value extends LocaleValue = ScopedValue<Locale, Scope, Key>,
 >(
   key: Key,
-  ...params: Params<Value>['length'] extends 0 ? [] : [ParamsObject<Value>]
+  ...params: Params<Value>['length'] extends 0 ? [] : [ReactParamsObject<Value>]
 ) => string

tsconfig.json

@@ -13,5 +13,9 @@
     "jsx": "preserve"
   },
   "include": ["**/*.ts", "**/*.js", "**/.*.js", "**/*.tsx"],
-  "exclude": ["**/dist/*.ts", "**/__typetests__/*.test.ts"]
+  "exclude": [
+    "**/dist/*.ts",
+    "**/__typetests__/*.test.ts",
+    "**/__typetests__/*.test.tsx"
+  ]
 }