Order of execution?

StealJS
1

I’ve got this file ‘translations.js’. It should be loaded once to initialize i18next and jqueryI18next.
In my main I make sure this file is imported early, before any translations are needed.
This works fine in development mode, but when I build it into a single .js I get an error message that $.t is not defined (actually it’s '_jquery2.default.t is not a function)

The 'translations.js is included high in the production.js, but apparently the init() functions aren’t executed yet.

Do I need to import translations.js wherever I use a translation? I’d rather not. Is there a way to force the initialization to be executed?

translations.js:

import  i18next from 'i18next';
import jqueryI18next from 'jquery-i18next';
import en from './locale/en';

i18next.init({
    yada: 'yada'
});

jqueryI18next.init(i18next, $, {
    tName: 't', // --> appends $.t = i18next.t
    i18nName: 'i18n', // --> appends $.i18n = i18next
    handleName: 'localize', // --> appends $(selector).localize(opts);
    yada: 'yada'
});

export default $;

main.js:

import $ from 'jquery';
import i18next from 'i18next';
import './translations';
import config from './configuration';

configuration.js:

....
translated = $.t('key')
....
2

You have to import dependencies wherever they are used. This is a good thing for long term maintainabilty.

(This behavior is part of AMD and ES6 modules)

3

Is there no way around this? It’s quite impractical to include all jquery plugins every time? I’m especially weary of all the different relative paths to include the file?

4

@Arjen_Haayman If you want to create a module that represents a pack of jquery plugins, you can do that:

// common.js
require("./path/to/thing1");
require("./path/to/thing2");
require("./path/to/thing3");
require("./path/to/thing4");

Then everything just has to import this one module.

If you are on steal 1.0, you can use ~

5

Btw, about the impracticality … are you really in a situation where every module has “lots” of jQuery plugins? In my experience, there tends to be a few files (like a grid) with maybe 5-6, and the vast majority of other modules have just 1 at most.

Going through the process of making it so each module only depends on what it depends on is very helpful in long lived JS applications. It means that you aren’t relying on side effectual behavior that can be very hard for others working on the code to identify.

6

No, but quite a few files use translations. I’d like to be able to use $.t() freely and have the init-file loaded only once.

I know it’s possible, because I also use a jquery validator and I’ve used that in files without explicitly loading the validate plugin.

So I’m just puzzled how this loading works and why in one situation is extended and in the other it isn’t.

7

Also: my file is loaded in main.js before configuration.js. Why doesn’t it get executed?

8

The execution order of a modules dependencies is not deterministic. Sometimes it will work out in the order they are listed. That’s why it seemed to work this way.

9

I have to come back to this. How do you guys handle translations?
So I’m using i18next.js using a app-level initialization file.
Throughout all my modules I assume there’s a translation, but in some of my components there’s a reference to a translation while my i18next initialization hasn’t happened yet.

So in my modules I’m using

import i18next from 'i18next';
...
errorMsg = 18next.t('this is an error');

in main.js:
import './i18next_init.js'

I really don’t want to import i18next_init.js from all my modules, so how can I force it to be loaded first?