Integrating i18next framework. Translations and language detection covered

Docs How-to Guides
23

Hey @JonL

I have implemented your method for integrating the i18next framework, however I have found a small issue that is not working.

The first time a user tries to use my website which has i18next framework, the language is not being stored in the datastore therefore it is loading the default language, however after the user tries to change the language from the dropdown menu like this:
i18next.changeLanguage('es').then(updateDOM)
then the datastore saves the language and everything continues to work fine.

After investigating the issue I found out that the problem is in this line of code

lng: dmx.parse("i18n.data[0].language") ? dmx.parse("i18n.data[0].language") : dmx.parse('browser.language.substr(0, 2)'),

I have found that replacing the last part of the expression with this fixes the problem, so it becomes.

lng: dmx.parse("i18n.data[0].language") ? dmx.parse("i18n.data[0].language") : 
 dmx.app.data.browser1.language.substr(0, 2)

Hope this helps.

2 Likes
24

Glad you made it work.

I don’t have the problem you mention. The dmx.parse is being used because it will retrieve the value once app connect is loaded.

By reading directly dmx.app.data it could happen that the language is not set when the library needs it because app connect is not yet loaded into the browser.

But if it works for you I am glad :slight_smile:

Anyway, I am waiting for the App Connect extensibility features to be implemented to refactor all this into an App Connect proper library.

2 Likes
25

Oh ok, now I get it. so actually for me I need to have it as

dmx.parse('browser1.language.substr(0, 2)')

instead of

dmx.parse('browser.language.substr(0, 2)')

because my browser component is named browser1 by default, I didn’t know about this and thats how I missed it.

Thank you,

1 Like
27

Out of interest @George are we far from AC extensibility with UI support? I am refactoring this integration and I was wondering if I should wait a bit.

35

Hey Jon! Localisation is becoming a thing on my todo list.
I’ve read through your post - haven’t checked your code.

If I want to implement this in the coming weeks, should I just follow your OP? Or are you already doing things in a better way (for Node)?

36

Doing some research about the translation services, I also found out this self hosted open source software:

Looks pretty complete! Anyone tried it out? @JonL

37

@karh I refactored all that into a custom AC component. I haven’t released it yet as there is still no support in the UI for it, but let me know when you start and I’ll send you the code privately.

@George yeah I gave it a go a few months ago. It’s overkill though. Packed of features and options. Maybe too much for a standard project.

38

I thought so - looks way too complex than it needs to be.

How about:

Seems Electron is using it.

39

I haven’t tried crowdin as I believe you can’t selfhost it. It has a fremium model and it’s free for OS projects though.

I tried Pontoon as I favour Mozilla’s fluent project and it’s syntax over others.

I’m still using fluent, but I don’t use pontoon anymore. I tried weblate as they added support for fluent and that’s why I know it’s excesive for my needs. Finally I settled for fluent and plain text editors.

Are you guys researching for Wappler UI?

40

Yes we are researching for the Wappler UI but mostly for also managing all the help texts for all server connect actions and app connect components

41

I’m guessing handling all those hardcoded strings is cumbersome. I guess weblate is your best bet if you are planning on self-hosting. It might be too much at the beginning, but if Wappler evolves into a multilingual app you won’t be short of features.

42

Thanks! Will start in the next few weeks so will ping you, or you can already send it if you want of course :smiley:

Good opportunity to dive more into custom AC components with your code.

Appreciate it!

Sorry @George - just want to rudely bump this onto your radar again: we are still eagerly awaiting support for Custom App Connect components :smiley:

45

And it’s time to start :slight_smile: !
Could you send the code?
Thanks!!