fix: Fix types for appWithTranslation (#1987)

i18next · Oct 25, 2022 · 73de76d · 73de76d
1 parent b47e9d3
commit 73de76d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 40 deletions.
diff --git a/src/appWithTranslation.server.test.tsx b/src/appWithTranslation.server.test.tsx
@@ -8,6 +8,7 @@ import { I18nextProvider } from 'react-i18next'
 import { renderToString } from 'react-dom/server'
 
 import { appWithTranslation } from './appWithTranslation'
+import { AppProps } from 'next/app'
 
 jest.mock('fs', () => ({
   existsSync: jest.fn(),
@@ -27,10 +28,15 @@ jest.mock('react-i18next', () => ({
   __esmodule: true,
 }))
 
+const MyApp = ({ Component, pageProps }: AppProps<{ example: string }>) => {
+  Component
+  pageProps
+  return (
+    <div>Hello world</div>
+  )
+}
 
-const DummyApp = appWithTranslation(() => (
-  <div>Hello world</div>
-))
+const DummyApp = appWithTranslation(MyApp)
 
 const props = {
   pageProps: {

diff --git a/src/appWithTranslation.tsx b/src/appWithTranslation.tsx
@@ -11,19 +11,15 @@ import { SSRConfig, UserConfig } from './types'
 import { i18n as I18NextClient } from 'i18next'
 export { Trans, useTranslation, withTranslation } from 'react-i18next'
 
-type AppProps = NextJsAppProps & {
-  pageProps: SSRConfig
-}
-
 export let globalI18n: I18NextClient | null = null
 
-export const appWithTranslation = <Props extends AppProps = AppProps>(
+export const appWithTranslation = <Props extends NextJsAppProps>(
   WrappedComponent: React.ComponentType<Props>,
   configOverride: UserConfig | null = null,
 ) => {
-  const AppWithTranslation = (props: Props) => {
-    const { _nextI18Next } = props.pageProps as SSRConfig
-    let locale: string | null =
+  const AppWithTranslation = (props: Props & { pageProps: Props['pageProps'] & SSRConfig }) => {
+    const { _nextI18Next } = props.pageProps
+    let locale: string | undefined =
       _nextI18Next?.initialLocale ?? props?.router?.locale
     const ns = _nextI18Next?.ns
 
@@ -34,16 +30,12 @@ export const appWithTranslation = <Props extends AppProps = AppProps>(
     const i18n: I18NextClient | null = useMemo(() => {
       if (!_nextI18Next && !configOverride) return null
 
-      let userConfig = configOverride ?? _nextI18Next?.userConfig
+      const userConfig = configOverride ?? _nextI18Next?.userConfig
 
-      if (!userConfig && configOverride === null) {
+      if (!userConfig) {
         throw new Error('appWithTranslation was called without a next-i18next config')
       }
 
-      if (configOverride !== null) {
-        userConfig = configOverride
-      }
-
       if (!userConfig?.i18n) {
         throw new Error('appWithTranslation was called without config.i18n')
       }

diff --git a/src/serverSideTranslations.test.tsx b/src/serverSideTranslations.test.tsx
@@ -76,14 +76,14 @@ describe('serverSideTranslations', () => {
       expect(fs.existsSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/en-US'))
       expect(fs.readdirSync).toHaveBeenCalledTimes(2)
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/en-US'))
-      expect(props._nextI18Next.initialI18nStore)
+      expect(props._nextI18Next?.initialI18nStore)
         .toEqual({
           'en-US': {
             common: {},
             'namespace-of-en-US': {},
           },
         })
-      expect(props._nextI18Next.ns).toEqual(['common', 'namespace-of-en-US'])
+      expect(props._nextI18Next?.ns).toEqual(['common', 'namespace-of-en-US'])
     })
 
     it('returns all namespaces with fallbackLng (as string)', async () => {
@@ -101,7 +101,7 @@ describe('serverSideTranslations', () => {
       expect(fs.readdirSync).toHaveBeenCalledTimes(4)
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/en-US'))
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/fr'))
-      expect(props._nextI18Next.initialI18nStore)
+      expect(props._nextI18Next?.initialI18nStore)
         .toEqual({
           'en-US': {
             common: {},
@@ -114,7 +114,7 @@ describe('serverSideTranslations', () => {
             'namespace-of-fr': {},
           },
         })
-      expect(props._nextI18Next.ns).toStrictEqual(['common', 'namespace-of-en-US', 'namespace-of-fr'])
+      expect(props._nextI18Next?.ns).toStrictEqual(['common', 'namespace-of-en-US', 'namespace-of-fr'])
     })
 
     it('returns all namespaces with fallbackLng (as array)', async () => {
@@ -131,7 +131,7 @@ describe('serverSideTranslations', () => {
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/en-US'))
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/en'))
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/fr'))
-      expect(props._nextI18Next.initialI18nStore)
+      expect(props._nextI18Next?.initialI18nStore)
         .toEqual({
           en: {
             common: {},
@@ -152,7 +152,7 @@ describe('serverSideTranslations', () => {
             'namespace-of-fr': {},
           },
         })
-      expect(props._nextI18Next.ns).toEqual([
+      expect(props._nextI18Next?.ns).toEqual([
         'common',
         'namespace-of-en-US',
         'namespace-of-en',
@@ -173,7 +173,7 @@ describe('serverSideTranslations', () => {
       expect(fs.readdirSync).toHaveBeenCalledTimes(4)
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/en-US'))
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/fr'))
-      expect(props._nextI18Next.initialI18nStore)
+      expect(props._nextI18Next?.initialI18nStore)
         .toEqual({
           'en-US': {
             common: {},
@@ -186,7 +186,7 @@ describe('serverSideTranslations', () => {
             'namespace-of-fr': {},
           },
         })
-      expect(props._nextI18Next.ns).toEqual([
+      expect(props._nextI18Next?.ns).toEqual([
         'common',
         'namespace-of-en-US',
         'namespace-of-fr',
@@ -206,7 +206,7 @@ describe('serverSideTranslations', () => {
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/de-CH'))
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/en-US'))
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/fr-BE'))
-      expect(props._nextI18Next.initialI18nStore)
+      expect(props._nextI18Next?.initialI18nStore)
         .toEqual({
           'de-CH': {
             common: {},
@@ -227,7 +227,7 @@ describe('serverSideTranslations', () => {
             'namespace-of-fr-BE': {},
           },
         })
-      expect(props._nextI18Next.ns).toEqual([
+      expect(props._nextI18Next?.ns).toEqual([
         'common',
         'namespace-of-de-CH',
         'namespace-of-en-US',
@@ -248,7 +248,7 @@ describe('serverSideTranslations', () => {
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/de'))
       expect(fs.readdirSync).toHaveBeenCalledWith(expect.stringMatching('/public/locales/en'))
 
-      expect(props._nextI18Next.initialI18nStore)
+      expect(props._nextI18Next?.initialI18nStore)
         .toEqual({
           'de-CH': {
             common: {},
@@ -262,7 +262,7 @@ describe('serverSideTranslations', () => {
           },
         })
 
-      expect(props._nextI18Next.ns).toEqual([
+      expect(props._nextI18Next?.ns).toEqual([
         'common',
         'namespace-of-de-CH',
         'namespace-of-en-US',
@@ -279,7 +279,7 @@ describe('serverSideTranslations', () => {
       },
     } as UserConfig, false)
 
-    expect(props._nextI18Next.initialI18nStore)
+    expect(props._nextI18Next?.initialI18nStore)
       .toEqual({
         de: {
           common: {},
@@ -289,7 +289,7 @@ describe('serverSideTranslations', () => {
         },
       })
 
-    expect(props._nextI18Next.ns).toEqual([
+    expect(props._nextI18Next?.ns).toEqual([
       'common',
     ])
   })
@@ -303,7 +303,7 @@ describe('serverSideTranslations', () => {
       },
     } as UserConfig, false)
 
-    expect(props._nextI18Next.initialI18nStore)
+    expect(props._nextI18Next?.initialI18nStore)
       .toEqual({
         en: {
           common: {},
@@ -313,7 +313,7 @@ describe('serverSideTranslations', () => {
         },
       })
 
-    expect(props._nextI18Next.ns).toEqual([
+    expect(props._nextI18Next?.ns).toEqual([
       'common',
     ])
   })
@@ -327,7 +327,7 @@ describe('serverSideTranslations', () => {
       },
     } as UserConfig, false)
 
-    expect(props._nextI18Next.initialI18nStore)
+    expect(props._nextI18Next?.initialI18nStore)
       .toEqual({
         en: {
           common: {},
@@ -337,7 +337,7 @@ describe('serverSideTranslations', () => {
         },
       })
 
-    expect(props._nextI18Next.ns).toEqual([
+    expect(props._nextI18Next?.ns).toEqual([
       'common',
     ])
   })
@@ -353,7 +353,7 @@ describe('serverSideTranslations', () => {
         nonExplicitSupportedLngs: true,
       } as UserConfig, false)
 
-      expect(props._nextI18Next.initialI18nStore)
+      expect(props._nextI18Next?.initialI18nStore)
         .toEqual({
           de: {
             common: {},
@@ -377,7 +377,7 @@ describe('serverSideTranslations', () => {
         nonExplicitSupportedLngs: true,
       } as UserConfig, false)
 
-      expect(props._nextI18Next.initialI18nStore)
+      expect(props._nextI18Next?.initialI18nStore)
         .toEqual({
           en: {
             common: {},
@@ -404,7 +404,7 @@ describe('serverSideTranslations', () => {
         nonExplicitSupportedLngs: true,
       } as UserConfig, false)
 
-      expect(props._nextI18Next.initialI18nStore)
+      expect(props._nextI18Next?.initialI18nStore)
         .toEqual({
           de: {
             common: {},

diff --git a/src/types.ts b/src/types.ts
@@ -21,7 +21,7 @@ export type UserConfig = {
   i18n: NextJsI18NConfig
   localeExtension?: string
   localePath?:
-    string | ((locale: string, namespace: string, missing: boolean) => string)
+  string | ((locale: string, namespace: string, missing: boolean) => string)
   localeStructure?: string
   onPreInitI18next?: (i18n: I18n) => void
   reloadOnPrerender?: boolean
@@ -48,7 +48,7 @@ export type CreateClientReturn = {
 }
 
 export type SSRConfig = {
-  _nextI18Next: {
+  _nextI18Next?: {
     initialI18nStore: any
     initialLocale: string
     ns: string[]