How to get translations on frontend side?

Hi!

I have a question regarding gettext translations, is there any way of how get extracted translations inside js files?

For example in ex files i have dgettext("common", "Save") how can I access this translation on frontend side?

For rails there is a gem that converted all yml file into json, is there something similar?

Thank you!

So a question: your front-end is something like React or Vue, that renders pages, or is the page a rendered HTML by Elixir (Phoenix or LiveView) and then you sprinkle JS on top of that?

If it’s the later then you should not have to do anything really, if it’s the former then it may be more complicated.

@hubertlepicki Actually it is the first option, to use translations in Vue and not to have duplicates.

Yesterday founded this lib - GitHub - change/linguist: Elixir Internationalization library for transaltions which is actually the standard i18n, so maybe I will use this one instead of gettext, because transforming yml to json is much easier than parsing .po, .pot files.

You can try, I never did, but I used i18next for JS files.

Honestly I think the easiest would be to keep these two systems separate.

Parsing .pot files is really easy. You can even use this library expo which is what gettext elixir library uses.

Expo.PO.parse_file!("./priv/gettext/default.pot")
|> Map.fetch!(:messages)
|> Enum.map(fn message -> %{message.msgid => message.msgstr} end)

@hubertlepicki Yes, but it might bring some duplication.

@Adzz Yes, but I need not only parsing but also format to consumable json format for any i18n js library.

What’s the format? That wont be hard either.

@Adzz To be honest I was thinking that there is already existing solution for this.

1 Like

From my pov there is no standardization for how those files are structured. Each library seems to bring their own. Also most js libraries seem to like the idea of identifying translations by arbitrary keys whereas gettext doesn’t use any keys.

Yes, looks like you are right. Thank you!