Dynamic definition of RequireJS i18n locale

Question

I am using the RequireJS i18n plugin to upload translations to my application. I struggle with the concept of determining the runtime of a preferred user language .

The plugin works well if you use navigator.language to determine your preferred user language, but in my application the user language is stored in the database on the server. Therefore, I need to set the locale at runtime:

 require.config({ config: { i18n: { locale: userLocale } } }); 

So, I need a smart way to install userLocale before RequireJS loaded my application. Does anyone know what would be the best way to achieve this? Features include:

1) Installing userLocale outside of my application in non-AMD mode:

 //run Ajax call to determine user localization preferencess var Localization = Localization || getUserLocalization(); //and then... require.config({ config: { i18n: { locale: Localization.userLocale } } }); require(['app']); 

This makes me a little sad, as it means that part of my application will be outside of RequireJS and therefore unkempt. It also means that in the global namespace all user localization parameters (language time zone, date format, number format) will be saved.

2) A separate call is required to call localization settings

I am not sure how this works, but it is possible:

 var Localization = require(['localization']); require.config({ config: { i18n: { locale: Localization.userLocale } } }); require(['app']); 

Perhaps this will not work due to asynchrony? In addition, the app will not have access to the Localization object, so it will still need to be stored as a global variable.

Can anyone see a good solution to this problem? Has anyone used the RequireJS i18n plugin to do something like this?

Answer 1

It seems that after many studies, the best approach to solve this problem is to check localStorage for the locale value. If this has not been installed yet, I download the application using a dummy language:

 var locale = localStorage.getItem('locale') || 'dummy'; require.config({ config: { i18n: { locale: locale } } }); require(['app']); 

I am using a language called dummy installed in an empty file in my nls file. Using a mannequin rather than the default means that I don’t need to guess what the user's language is and potentially force them to load the entire load of translations in the wrong language:

 define({ "root": false, "dummy": {}, //dummy language with no translations if user language is unknown "fr": true, "en": true, "en-uk": true, "fr-fr": true }); 

Then, when the application has loaded and the user has logged in, I query the database using a service call, set the language to localStorage and restart the application using location.reload() :

  //retrieve user object (including preferred locale) from service call user = getUserObject(userId); locale = localStorage.getItem('locale'); if (!locale || locale !== user.locale) { localStorage.setItem('locale', user.locale); //reload the app location.reload(); } 

Of course, I need to support the old version of IE, so I also included backups using userData , but this is the essence of the solution.

This approach is partly based on how the guys at RESThub do .

Answer 2

Another option, if your page is dynamically generated using a template system, is to require.config({config {..} }) embed it in the generated HTML ... for example:

 <!-- load require.js --> <script src="js/lib/require.js"></script> <!-- standard config options in this file --> <script src="js/config.js"></script> <!-- user specific config inlined in the Dynamic HTML --> <script> // now set the user preferred locale require.config({ config : { i18n: { locale: '<% user.locale %>' // ie use PHP to insert user preferred language } } }); require(['app']); // Call your main app here </script> 

require.config(..) can be called several times, but this must be done before your application is loaded.