Localization of Elm app

Learn
5

We do something similar, we have JSON files that are named like en-us.json that contain the localization data.

"welcome-message": "Welcome %s, you have %d notifications",
"plain-message": "Hello"

At build time we have a webpack plugin that turns those into Elm code like

welcomeMessage: String -> Int -> String
welcomeMessage s1 d1 =
    "Welcome " ++ s1 ++ ", you have " ++ String.fromInt d1 ++ " notifications"

plainMessage: String
plainMessage =
    "Hello"

There are a few things I really like about that approach:

  • It works with dead code elimination, unused translations won’t show up in the optimized build
  • Plain string values get compiled away during the optimize step (meaning no function call overhead for strings like plainMessage.
  • Missing translations are a compile error

The downside is that you have to have separate builds for each language. In day to day use I like it a lot more than our previous solution of keeping a Dict String String on the Session object in our model, it becomes cumbersome to pass the session everywhere you need a translation in my opinion.

1 Like