diff --git a/docs/building-blocks/i18n.md b/docs/building-blocks/i18n.md index 422c5b26..d0f5a6b7 100644 --- a/docs/building-blocks/i18n.md +++ b/docs/building-blocks/i18n.md @@ -42,7 +42,7 @@ export function MyComponent() { i18n.changeLanguage(language); }; // The nested objects are intellisense supported ✅ - return
{t(translations.HomePage.Features.someItem())}
; + return
{t(translations.HomePage.Features.someItem}
; } ``` diff --git a/internals/startingTemplate/src/locales/i18n.ts b/internals/startingTemplate/src/locales/i18n.ts index 045c25e0..b19a976c 100644 --- a/internals/startingTemplate/src/locales/i18n.ts +++ b/internals/startingTemplate/src/locales/i18n.ts @@ -4,7 +4,7 @@ import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import en from './en/translation.json'; -import { ConvertedToFunctionsType } from './types'; +import { ConvertedToObjectType } from './types'; const translationsJson = { en: { @@ -15,26 +15,25 @@ const translationsJson = { export type TranslationResource = typeof en; export type LanguageKey = keyof TranslationResource; -export const translations: ConvertedToFunctionsType = {} as any; +export const translations: ConvertedToObjectType = {} as any; /* - * Converts the static JSON file into object where keys are identical - * but values are functions that produces the same key as string. + * Converts the static JSON file into an object where keys are identical + * but values are strings concatenated according to syntax. * This is helpful when using the JSON file keys and still have the intellisense support * along with type-safety */ -const convertToFunctions = (obj: any, dict: {}, current?: string) => { +const convertLanguageJsonToObject = (obj: any, dict: {}, current?: string) => { Object.keys(obj).forEach(key => { const currentLookupKey = current ? `${current}.${key}` : key; if (typeof obj[key] === 'object') { dict[key] = {}; - convertToFunctions(obj[key], dict[key], currentLookupKey); + convertLanguageJsonToObject(obj[key], dict[key], currentLookupKey); } else { - dict[key] = () => currentLookupKey; + dict[key] = currentLookupKey; } }); }; - export const i18n = i18next // pass the i18n instance to react-i18next. .use(initReactI18next) @@ -56,5 +55,7 @@ export const i18n = i18next escapeValue: false, // not needed for react as it escapes by default }, }, - () => convertToFunctions(en, translations), + () => { + convertLanguageJsonToObject(en, translations); + }, ); diff --git a/internals/startingTemplate/src/locales/types.ts b/internals/startingTemplate/src/locales/types.ts index a71cebdf..fc1ff3a8 100644 --- a/internals/startingTemplate/src/locales/types.ts +++ b/internals/startingTemplate/src/locales/types.ts @@ -1,5 +1,3 @@ -export type ConvertedToFunctionsType = { - [P in keyof T]: T[P] extends string - ? () => string - : ConvertedToFunctionsType; +export type ConvertedToObjectType = { + [P in keyof T]: T[P] extends string ? string : ConvertedToObjectType; }; diff --git a/package.json b/package.json index 016abea9..d9e2689d 100755 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ }, "husky": { "hooks": { - "pre-commit": "npm run verify-startingTemplate-changes && npm run checkTs && lint-staged", + "pre-commit": "npm run checkTs && lint-staged && npm run verify-startingTemplate-changes", "prepare-commit-msg": "devmoji -e", "commit-msg": "if git-branch-is dev; then commitlint -E HUSKY_GIT_PARAMS; fi" } diff --git a/src/app/containers/HomePage/Features.tsx b/src/app/containers/HomePage/Features.tsx index 2c11cfac..c5bd2f51 100644 --- a/src/app/containers/HomePage/Features.tsx +++ b/src/app/containers/HomePage/Features.tsx @@ -82,9 +82,9 @@ export function Features() { - {t(translations.i18nFeature.title())} + {t(translations.i18nFeature.title)}

- {t(translations.i18nFeature.description())} + {t(translations.i18nFeature.description)}
(Only some of the features below are translated to demonstrate @@ -97,9 +97,9 @@ export function Features() { - {t(translations.routingFeature.title())} + {t(translations.routingFeature.title)}

- {t(translations.routingFeature.description())} + {t(translations.routingFeature.description)}
Go to our{' '} @@ -112,15 +112,15 @@ export function Features() { - {t(translations.feedbackFeature.title())} -

{t(translations.feedbackFeature.description())}

+ {t(translations.feedbackFeature.title)} +

{t(translations.feedbackFeature.description)}

- {t(translations.scaffoldingFeature.title())} -

{t(translations.scaffoldingFeature.description())}

+ {t(translations.scaffoldingFeature.title)} +

{t(translations.scaffoldingFeature.description)}

diff --git a/src/app/containers/LanguageSwitch/__tests__/index.test.tsx b/src/app/containers/LanguageSwitch/__tests__/index.test.tsx index d5029ce2..90600193 100644 --- a/src/app/containers/LanguageSwitch/__tests__/index.test.tsx +++ b/src/app/containers/LanguageSwitch/__tests__/index.test.tsx @@ -26,7 +26,7 @@ describe('', () => { let languageSwitch = renderLanguageSwitch(); let label = languageSwitch.queryByText( - t(translations.i18nFeature.selectLanguage()), + t(translations.i18nFeature.selectLanguage), ); expect(label).toBeInTheDocument(); @@ -35,7 +35,7 @@ describe('', () => { languageSwitch = renderLanguageSwitch(); label = languageSwitch.queryByText( - t(translations.i18nFeature.selectLanguage()), + t(translations.i18nFeature.selectLanguage), ); expect(label).toBeInTheDocument(); }); diff --git a/src/app/containers/LanguageSwitch/index.tsx b/src/app/containers/LanguageSwitch/index.tsx index 4d145ba3..17023200 100644 --- a/src/app/containers/LanguageSwitch/index.tsx +++ b/src/app/containers/LanguageSwitch/index.tsx @@ -14,7 +14,7 @@ export function LanguageSwitch() { return ( - {t(translations.i18nFeature.selectLanguage())} + {t(translations.i18nFeature.selectLanguage)} { it('should initate i18n with translations', async () => { const t = await i18n; - expect( - t(translations.feedbackFeature.description()).length, - ).toBeGreaterThan(0); + expect(t(translations.feedbackFeature.description).length).toBeGreaterThan( + 0, + ); }); }); diff --git a/src/locales/i18n.ts b/src/locales/i18n.ts index 46912c8f..cd3a8692 100644 --- a/src/locales/i18n.ts +++ b/src/locales/i18n.ts @@ -5,7 +5,7 @@ import LanguageDetector from 'i18next-browser-languagedetector'; import en from './en/translation.json'; import de from './de/translation.json'; -import { ConvertedToFunctionsType } from './types'; +import { ConvertedToObjectType } from './types'; const translationsJson = { en: { @@ -19,22 +19,22 @@ const translationsJson = { export type TranslationResource = typeof en; export type LanguageKey = keyof TranslationResource; -export const translations: ConvertedToFunctionsType = {} as any; +export const translations: ConvertedToObjectType = {} as any; /* - * Converts the static JSON file into object where keys are identical - * but values are functions that produces the same key as string. + * Converts the static JSON file into an object where keys are identical + * but values are strings concatenated according to syntax. * This is helpful when using the JSON file keys and still have the intellisense support * along with type-safety */ -const convertToFunctions = (obj: any, dict: {}, current?: string) => { +const convertLanguageJsonToObject = (obj: any, dict: {}, current?: string) => { Object.keys(obj).forEach(key => { const currentLookupKey = current ? `${current}.${key}` : key; if (typeof obj[key] === 'object') { dict[key] = {}; - convertToFunctions(obj[key], dict[key], currentLookupKey); + convertLanguageJsonToObject(obj[key], dict[key], currentLookupKey); } else { - dict[key] = () => currentLookupKey; + dict[key] = currentLookupKey; } }); }; @@ -59,5 +59,7 @@ export const i18n = i18next escapeValue: false, // not needed for react as it escapes by default }, }, - () => convertToFunctions(en, translations), + () => { + convertLanguageJsonToObject(en, translations); + }, ); diff --git a/src/locales/types.ts b/src/locales/types.ts index a71cebdf..fc1ff3a8 100644 --- a/src/locales/types.ts +++ b/src/locales/types.ts @@ -1,5 +1,3 @@ -export type ConvertedToFunctionsType = { - [P in keyof T]: T[P] extends string - ? () => string - : ConvertedToFunctionsType; +export type ConvertedToObjectType = { + [P in keyof T]: T[P] extends string ? string : ConvertedToObjectType; };