Improve translations - flatten translation objects #25846
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,50 @@ | ||
| import en from './en'; | ||
| import es from './es'; | ||
| import esES from './es-ES'; | ||
| import type {Translation, TranslationFlatObject} from './types'; | ||
|
|
||
| /** | ||
| * Converts an object to it's flattened version. | ||
| * | ||
| * Ex: | ||
| * Input: { common: { yes: "Yes", no: "No" }} | ||
| * Output: { "common.yes": "Yes", "common.no": "No" } | ||
| */ | ||
| // Necessary to export so that it is accessible to the unit tests | ||
| // eslint-disable-next-line rulesdir/no-inline-named-export | ||
| export function flattenObject(obj: Translation): TranslationFlatObject { | ||
| const result: Record<string, unknown> = {}; | ||
|
|
||
| const recursive = (data: Translation, key: string): void => { | ||
| // If the data is a function or not a object (eg. a string or array), | ||
| // it's the final value for the key being built and there is no need | ||
| // for more recursion | ||
| if (typeof data === 'function' || Array.isArray(data) || !(typeof data === 'object' && !!data)) { | ||
| result[key] = data; | ||
| } else { | ||
| let isEmpty = true; | ||
|
|
||
| // Recursive call to the keys and connect to the respective data | ||
| Object.keys(data).forEach((k) => { | ||
| isEmpty = false; | ||
| recursive(data[k] as Translation, key ? `${key}.${k}` : k); | ||
| }); | ||
|
|
||
| // Check for when the object is empty but a key exists, so that | ||
| // it defaults to an empty object | ||
| if (isEmpty && key) { | ||
| result[key] = ''; | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| recursive(obj, ''); | ||
| return result as TranslationFlatObject; | ||
| } | ||
|
|
||
| export default { | ||
| en: flattenObject(en), | ||
| es: flattenObject(es), | ||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| 'es-ES': esES, | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| import en from './en'; | ||
|
|
||
| type AddressLineParams = { | ||
| lineNumber: number; | ||
| }; | ||
|
|
@@ -190,7 +192,47 @@ type RemovedTheRequestParams = {valueName: string; oldValueToDisplay: string}; | |
|
|
||
| type UpdatedTheRequestParams = {valueName: string; newValueToDisplay: string; oldValueToDisplay: string}; | ||
|
|
||
| /* Translation Object types */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| type TranslationBaseValue = string | string[] | ((...args: any[]) => string); | ||
|
There was a problem hiding this comment. @blazejkustra We need |
||
|
|
||
| type Translation = {[key: string]: TranslationBaseValue | Translation}; | ||
|
|
||
| /* Flat Translation Object types */ | ||
| // Flattens an object and returns concatenations of all the keys of nested objects | ||
| type FlattenObject<TObject, TPrefix extends string = ''> = { | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| [TKey in keyof TObject]: TObject[TKey] extends (...args: any[]) => any | ||
| ? `${TPrefix}${TKey & string}` | ||
| : // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| TObject[TKey] extends any[] | ||
| ? `${TPrefix}${TKey & string}` | ||
| : // eslint-disable-next-line @typescript-eslint/ban-types | ||
| TObject[TKey] extends object | ||
| ? FlattenObject<TObject[TKey], `${TPrefix}${TKey & string}.`> | ||
| : `${TPrefix}${TKey & string}`; | ||
| }[keyof TObject]; | ||
|
|
||
| // Retrieves a type for a given key path (calculated from the type above) | ||
| type TranslateType<TObject, TPath extends string> = TPath extends keyof TObject | ||
| ? TObject[TPath] | ||
| : TPath extends `${infer TKey}.${infer TRest}` | ||
| ? TKey extends keyof TObject | ||
| ? TranslateType<TObject[TKey], TRest> | ||
| : never | ||
| : never; | ||
|
|
||
| type TranslationsType = typeof en; | ||
|
|
||
| type TranslationPaths = FlattenObject<TranslationsType>; | ||
|
|
||
| type TranslationFlatObject = { | ||
| [TKey in TranslationPaths]: TranslateType<TranslationsType, TKey>; | ||
| }; | ||
|
|
||
| export type { | ||
| Translation, | ||
| TranslationFlatObject, | ||
| AddressLineParams, | ||
| CharacterLimitParams, | ||
| MaxParticipantsReachedParams, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TranslationFlatObjectis way too generic (along withTranslation&TranslationBaseValuetypes). The problem is that we lose type safety usingflattenObjectfunction:This is a big problem as we should infer what keys are available to stay type safe when using Localize inside of components.
What we should do is to flatten the object in Typescript. Something like this (link):
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
However this will be quite irritating to use inside of components as the value is not inferred and it's too generic:
string | string[] | Function. So we would have to always check the types inside of components 😒There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually I had a similar problem in my side project, something like this could work here but the type is quite complicated ngl 😅 (this would have to be tested as I used it a little bit differentl in my project)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also cc @fabioh8010 as this is quite important to get right 😅