Setting RequireJS i18n locale dynamically

Question

I am using the RequireJS i18n plugin to load translations into my application. I'm struggling with the concept of runtime determination of a user's preferred language.

The plugin works well if you're using navigator.language to determine the user's preferred language, but in my app, the user's language is held in a database on the server. So I need to set the locale at runtime:

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

So what I need is a clever way of setting userLocale before RequireJS has loaded my application. Does anyone know what would be the best way to achieve this? Possibilities include:

1) Setting userLocale outside of my application, in a non-AMD way:

//run Ajax call to determine user's localization preferencess
var Localization = Localization || getUserLocalization(); 

//and then...
require.config({
    config: {
        i18n: {
            locale: Localization.userLocale
        }
    }
});

require(['app']);

This makes me a little bit sad as it means some of my application will be outside of RequireJS, and thus untidy. It also means all the user's localization settings (language timezone, date format, numeric format) will be held in the global namespace.

2) Having a separate require call to retrieve localization settings

I'm not sure how this work, but perhaps:

var Localization = require(['localization']);

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

require(['app']);

Perhaps this wouldn't work due to asynchronousness? Also the app would not have access to the Localization object, so it would 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 similar?

Answer 1

It seems after a lot of research, the best approach for solving this problem is to check localStorage for a locale value. If this hasn't been set yet, I load the application using a dummy language:

var locale = localStorage.getItem('locale') || 'dummy';

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

require(['app']);

I use a language called dummy, set to an empty object in my nls file. Using a dummy, rather than a default, means I don't have to guess what the user's language might be, and potentially force them to download a whole 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 app has loaded and the user has been logged in, I query the database using a service call, set the language in localStorage and reload the app 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 old version of IE so I have also included fallbacks using userData, but this is the gist of the solution.

This approach is partially taken from how the guys at RESThub do it.

Answer 2

Another option, if your page is dynamically generated with a template system, is to have the require.config({config {..} }) inlined into the generated HTML... say like this:

<!-- 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's preferred locale
  require.config({
    config : { 
      i18n: {
        locale: '<% user.locale %>' // i.e. use PHP to insert user's preferred language
      }
    }
  });
  require(['app']); // Call your main app here
</script>

require.config(..) can be called multiple times, but should be done before your app is loaded.