localizely/intl_utils

Formatting ICU syntax for easier reading

lloydrichards opened this issue · 10 comments

At the moment I'm fleshing out my error handling for a new app and using Localizely for my l10n. I'm finding it a bad developer experience at the moment to construct the ICU formats that the .arb files are so useful for. For example, I have a whole series of error codes that I pass into a select which allows me to generate a single key-value pair for all of my AuthValueFailures. and makes sure that all my translations are in order.

From my code, I get to just call String errorMessage = l10n.auth_error_authValueError(f.code) and it gives me each and every error message. But the issue I'm having is formating and writing all these error codes so that don't have mistakes that the code generator will skip.

In order to write the ICU format, I either need to rely on the .arb file which is just formated as a single string:

{
  "auth_error_authFailure": "{failure, select, auth_error_cancelledByUser{Cancelled by User.} auth_error_serverError{Server side error.} auth_error_emailAlreadyInUse{Email already in use.} auth_error_accountAlreadyExists{Account already exists.} auth_error_invalidEmailAndPassword{Invalid email and password combo.} auth_error_missingUserDoc{Missing User Document.} auth_error_missingUserSettings{Missing Settings.} auth_error_invalidUserDoc{Invalid User Document.} auth_error_invalidUserSettings{Invalid Settings.} auth_error_insufficientPermission{Insufficient Permissions.} other{Authentication error.}}",
}

or use the Localizely console:

image

Both are very hard to read and check that everything is correct. Worst on the console version as it would record any \n that I used to help separate the lines which resulted in the code generation failing and me having to use replaceAll after uploading new .arb files.

If anyone knows of a way to cleanly format the .arb (Prettier extension?) or knows when the dev team at Localizely will update their console, it would be much appreciated.

@devTeamOfLocalizely; This is such an important feature for my DX that I'm even willing to code the solution myself if you let me access the console code (provided it's in JS/TS)

@lloydrichards Thanks for sharing this.
Better ICU support is definitely planned for Localizely platform, but date is not yet defined.

Would using ICU message editor such as this one be useful for you?

image

It's not much better, though I do get a dropdown to select each. But it's still really hard to scan through and find errors. My ideal would be something similar to the formatting you have for Plurals in the console. Where I can see a list of keys and their translations as well as approve each string individually.

image

Otherwise, some kind of file formatting for the .arb files where it breaks the string up into multiple lines

image

Infact, the ICU editor already has a prettier format (button bottom right) which would be all I need in the console for now

Cool.
Hope given ICU editor will help you for the time being.

In the editor, i still need to select each string via the dropdown... what I'm asking is if its possible to use the prettier format from the editor in the console? It looks like you are already using the same syntax highlighting.

That is the plan, to support everything from given ICU editor, in the Localizely Console.

In the editor, i still need to select each string via the dropdown...

Do you mention that as a drawback or?

Drawback. As I would need to be able to see the whole table of values so I can scan across the rows to check values and down the columns to validate completeness.

If you need anything specific to help speed these plans along, I'm happy to do designs, mockups or development.

Will reach out to you directly regarding your needs for such editor.
Closing this ticket now since it goes out of the scope of intl_utils.

@lloydrichards
FYI pretty-print ICU message editing is available in Localizely https://twitter.com/localizely/status/1486315522719469569?s=20