i18next best practice

Question

I've successfully implemented i18next, which by the way is a great library! Though I'm still in search for the "best practice". This is the setup I have right now, which in general I like:

var userLanguage = 'en'; // set at runtime

i18n.init({
    lng                 : userLanguage,
    shortcutFunction    : 'defaultValue',
    fallbackLng         : false,
    load                : 'unspecific',
    resGetPath          : 'locales/__lng__/__ns__.json'
});

In the DOM I do stuff like this:

<span data-i18n="demo.myFirstExample">My first example</span>

And in JS I do stuff like this:

return i18n.t('demo.mySecondExample', 'My second example');

This means I maintain the English translation within the code itself. I do however maintain other languages using separate translation.json files, using i18next-parser:

gulp.task('i18next', function()
{
    gulp.src('app/**')
        .pipe(i18next({
            locales : ['nl','de'],
            output  : '../locales'
        }))
        .pipe(gulp.dest('locales'));
});

It all works great. The only problem is that when I've set 'en' as the userLanguage, i18next insists on fetching the /locales/en/translation.json file, even though it doesn't contain any translations. To prevent a 404, I currently serve an empty json object {} in that file.

Is there a way to prevent loading the empty .json file at all?

Answer 1

Maybe I'm missing something here but couldn't you simply do this:

if (userLanguage != 'en') {

    i18n.init({
        lng                 : userLanguage,
        shortcutFunction    : 'defaultValue',
        fallbackLng         : false,
        load                : 'unspecific',
        resGetPath          : 'locales/__lng__/__ns__.json'
    });
}

That way your script i18n wouldn't be initialized unless you actually needed the translation service.

Answer 2

i18next-parser author here, I will explain how I use i18next and hopefully it will help:

1/ I do not use defaultTranslation in the code. The reason is that it doesn't belong in the code. I understand the benefit of having the actual text but the code can get bloated quickly. The difficult part consists in defining intelligible translation keys. If you do that, you don't really need the defaultTranslation text anymore. The translation keys are self-explainatory.

2/ If you have a 404 on the /locales/en/translation.json, then probably that you don't have the file in your public directory or something similar. With gulp you can have multiple destination and do dest('locales').dest('public/locales') for instance.

3/ If there is no translation in the catalog, make sure you run the gulp task first. Regarding populating the catalog with the defaultTranslation you have, it is a tricky problem to solve with regexes. Think of this case <div data-i18n="key">Default <div>translation</div></div>. It needs to be able to parse the inner html and extract all the content. I just never took the time to implement it as I don't use it.