CODEWITHSUNDEEP
javascriptinternationalizationi18next
Jimmie Lin
Jimmie Lin

Reputation: 2215

Autoloading of Namespaces i18next

I'm using I18Next as a Javascript-based Translation Solution, and here's what needs to happen:

  1. A default namespace "Core" is loaded. It contains most keys I want, but not all of them.
  2. There is no fixed list of namespaces: hence I cannot just tell i18n.init the ns.namespaces I want.
  3. During the pageload, optionally some "Modules" are loaded into the Application and they also need to be translated. They should report their i18n namespace name somewhere, and then i18n shuold make that namespace's keys available.

Basically, is there a way for i18next to autoload namespaces as they are called? It is guaranteed that the namespaces that are called through t("[SomeNamespace]Key.Key2"); are valid and certainly exist. The issue is simply that i18next cannot "autoload" and I am unable to find a way to make i18n "manually" load a resource file after i18n.init has been called.

Here's my current code.

    $.i18n.init(
        {
            lng: "en",
            fallbackLng: "en",
            useCookie: false,
            resGetPath: "System/i18n/__ns__/__lng__.json",
            ns: "Core"
        },
        function(t) {
            System.I18N = t;

            alert(System.I18N("LoginUI:Messages.Name"));
        }
    );

As expected, it simply shows me LoginUI:Messages.Name instead of the translation in System/i18n/LoginUI/en.json:

{
    "Messages": {
        "Name": "Logon Interface"
    }
}

(Core/en.json is irrelevant in this case. All I currently need is "LoginUI/en.json" to be autoloaded or I can force a manual loading.)

Upvotes: 7

Views: 6074

Answers (2)

jamuhl
jamuhl

Reputation: 4498

i18next comes now with a function to load additional namespaces after initialization: https://www.i18next.com/principles/namespaces#sample

Upvotes: 3

Jimmie Lin
Jimmie Lin

Reputation: 2215

After some digging into the source code, I've created a solution that sort-of works, but certainly requires improving in the long term.

Within i18n.addjQueryFunct()'s definition, add this to access resStore (the translation storage variable):

$.i18n._getResStore = _getResStore;
$.i18n._writeResStore = _writeResStore;

function _getResStore() {
    return resStore;
}

function _writeResStore(r) {
    resStore = r;
}

When you want to load an extra namespace, simply do something like this:

// define options, run $.i18n.init, etc...
// suppose ns = "namespace_foobar_new"
options.ns.namespaces.push(ns);
$.i18n.sync._fetchOne(lang, ns, $.extend({}, $.i18n.options, options),
    function(err, data) {
    store = {};
        store[lang] = {}; store[lang][ns] = data;

            newResStore = $.extend(true, {}, $.i18n._getResStore(), store);
            $.i18n._writeResStore(newResStore);
    });

Phew.

Upvotes: 2

Related Questions