External approach

The internal approach suffers from one important problem, that is, it mixes the source code and the translations. The remedy for this problem is the external approach. Using it, we can separate the program code and the translations.

To use external translations, we use the same @i18n directive, but we provide it with a key string instead of a function. Thus, @i18n(hello) can be replaced by:

@i18n("hello")

Here is an example of an external approach:

//802.opa
function page(){
  <div onready={function(_) { I18n.set_lang("fr") }}>
    <h1>{@i18n("hello")}</h1>
  </div>
}
Server.start(Server.http, {title:"Opa Packt", ~page})

Save the file as 802.opa. If we do not provide any translation, @i18n("hello") will be replaced by the string "hello". How do we add the translation? The solution is to compile our source code with the translation switch --i18n-template-opa:

opa 802.opa --i18n-template-opa --i18n-pkg trans --i18n-dir langs

Make a directory named langs and...