Multilanguage site - How to handle dictionaries/labels

Hi.

Just started moving over to donejs from javascriptmvc and became puzzled when looking at the way I handle dictionaries now. They are now asked for when the app starts (an ajax-call to the server and then inserted into a can.Map) and then being made available in all templates through a custom helper.

My first thought was to make them available through a property in appMap since I should have all labels available serverside as well. Does anyone have examples of how you have solved a multilanguage solution or ideas about the best way to go about this?

best regards,

/H

Hi, we’ve implemented language packs loader for steal/steal-tools. It loads language dictionary as function that takes language (locale) and returns promise to fullfil with dictionary data.

Dictionaries are stored as separate CJS modules for every language usually per component:

my-component/dict/en.js:

module.exports = {
  name: 'name'
}

my-component/dict/es.js:

module.exports = {
  name: 'nombre'
}

Dictionary can be used without integration into UI framwork (canjs):

import dict from './dict!lp'

dict('es').then(esDictData => {
  console.log(esDictData.name) // -> nombre
})

In our workflow we use it with special components/helpers, that load dictionary data on demand :

my-component/my-component.js:

import dict from './dict!lp'

can.Component.extend({

  viewModel: {
    dict: dict
  },

  // In template I use translation component or helper:
  template: `
    <t-text key="name"/>
    {{tText "name"}}
  ` 
})

By default t-text knows what language is currently used thoughtout the applicaiton, as well it looks up for dict in upper scopes, otherwise you can submit custom dict or language to it:

<t-text key="name" {lang}="customLang" {dict}="customDict" />

Steal-tools create language-packs for every bundle. So particular language loads in development and production when it is really needed.

This is an approach.

can you share your language packs loader with us?

You may try https://github.com/whitecolor/steal-lp, not published on npm yet.

1 Like