elm-i18n
elm-i18n copied to clipboard
Localization for Elm apps as a pre-build phase with import and export between elm code and CSV/PO
i18n localization for Elm as a pre-build phase
elm-i18n provides tools and a concept for localizing elm apps. The idea is to treat localized text as constants (or functions). To achieve this, localized content is placed in separate modules. Each language can consist of multiple modules, but each module contains only one language.
The correct set of language modules is symlinked or copied into place before compiling the elm app. The result is a localized compiled version of your app. When repeating this process for multiple languages the compiler re-uses the cache and only the translation specific modules are cleared from the cache.
The elm-package is aimed at tool developers who want to parse elm-code into localized elements, read or write CSV or PO files. If you want to use this tool for your elm-project you only need the information in this README.
Features:
- Switch languages:
- Switch the language of your elm app before building
- Easily build multiple localized version of your app
-
CSV <-> ELM <-> PO
- Generate CSV and PO files from your localization module's elm code
- Generate your localization module's elm code from CSV and PO files
Suggested project file structure
Note that the language identifier is only included in the directory name and excluded from the Translation module names:
project
├── src/
│ ├── Main.elm (e.g. imports Translation.Main)
│ ├── View.elm (e.g. imports Translation.View)
│ └──>Translation (sym-linked to current directory, e.g. project/Translation/De/)
└── Translation/
├── De/
│ ├── Main.elm (module Translation.Main)
│ └── View.elm (module Translation.View)
└── En/
├── Main.elm (module Translation.Main)
└── View.elm (module Translation.View)
Installation:
The tool-set is available as a node package and is backed by elm code:
npm install elm-i18n -g
Switch language as a prebuild phase
In order to switch the language for compilation to En
, simply execute the
following command at the root of your elm app:
elm-i18n-switch -l En
To switch the language and compile a localized version of your app (to dist/en.js
):
elm-i18n-switch -l En --output dist
If your code is not stored in src
or your main app module is not Main.elm
:
elm-i18n-switch -l En --output dist --src myDir --elmFile MyMain.elm
If your root Translation
module is called MyTranslation
:
elm-i18n-switch -l En --rootModule MyTranslation
Codegen tools
This repository provides a few tools to extract string functions and constants from modules containing translations (where one language can consist of multiple modules, but each module only contains one language).
CSV
Export: Generate CSV from Elm source
elm-i18n-generator --format CSV --root example/Translation --language De --export
Result:
Module,Key,Comment,Supported Placeholders,Translation
"Translation.Main","greeting","A short greeting.","","Hi"
"Translation.Main","greetingWithName","A personalized greeting. Use placeholder name for the user's name.","name","Guten Tag, {{name}}"
Import: Generate Elm source code from CSV
elm-i18n-generator --format CSV -l De --import export.csv
Result in import/De/Translation/Main.elm
:
module Translation.Main exposing (..)
{-| -}
{-| A short greeting.
-}
greeting : String
greeting =
"Hi"
{-| A personalized greeting. Use placeholder name for the user's name.
-}
greetingWithName : String -> String
greetingWithName name =
"Guten Tag, "
++ name
PO
For more information about the PO file format visit: https://www.gnu.org/savannah-checkouts/gnu/gettext/manual/html_node/PO-Files.html
Export: Generate PO from Elm source:
elm-i18n-generator --format PO --root example/Translation --language De --export
Result:
#. A short greeting.
msgid "Translation.Main.greeting"
msgstr "Hi"
#. A personalized greeting. Use placeholder name for the user's name.
#. i18n: placeholders: name
msgid "Translation.Main.greetingWithName"
msgstr "Guten Tag, %(name)s"
Import: Generate Elm source code from PO
elm-i18n-generator --format PO --language De --import export.po
Results in the same import/De/Translation/Main.elm
as in the CSV example.
Advantages
- Each build of your app only contains one language.
- No need to handle the current language in your elm app's model or view functions.
- You can use any logic you like for the text snippets: constants, functions...
- Allows you to create sub modules for parts of your app.
- Full type safety
- Auto completion (if you run the script at least once before starting the IDE).
- For testing you can add a Translation
Test
and set your code base to use that before running tests. This way your tests do not change if you change the wording of your buttons, labels and fallbacks. - Compile-time errors for incomplete translations.
- Compile-time errors are limited to the incomplete language, so you can continue shipping updates and fixes for the other languages.
- Get started with a new language quickly by exporting all strings for
an existing language, replacing all value in the CSV with "TODO" and then
import the CSV for the new language, which will create all
Translation
modules.
Disadvantages
- Language is no longer part of your view model and cannot be changed dynamically from within the app. However, you can add a constant with the current language code and have different code paths if that is required.
- Language selection has to be handled outside of the elm-app (by loading the appropriate js artefact).
An issue has been created to address this disadvantage.
Building elm-i18n
The tool is built using node.js with an Elm-Core.
To build the elm backend of the node.js part (if developing locally):
make dist
.