See this example that uses custom builder. Currently there is no way to load the language files dynamically. You still have to load them all at once even if you donβt need it.
I have made a plugin to overcome that, but never got into stable state. I still consider it buggy.
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
/**
* Retrieves translations from a given locale
* @param {string} locale
* @returns {Object}
*/constgetTranslations=(locale)=>{try{constavailableLanguages={en:dynamic(()=>import('/translations/en.js')),es:dynamic(()=>import('/translations/es.js')),};if(!availableLanguages.hasOwnProperty(locale)){console.error(`getTranslations error. Could not load translations for ${locale}`);returnavailableLanguages['en'];// DEFAULT}returnavailableLanguages[locale];}catch(error){console.error(`${error.message} in ${error.stack}`);}};
Here we are declaring the available langs so it will not fail in runtime trying to load a nonexistent file for any other error, and it will return the default language in case of such error.
You can use next/dynamic if working with Next JS like me in this last example (note that there's no dynamic function declared; if you are not using Next JS, it needs to be done but you can use the first or second example to create a dynamic implementation quickly).
i.e.
constdynamic=(path)=>import(`${path}`);
Here you can find a dynamic import explanation from javascript.info
Apart from those options, in most webapps is better to handle translations through the DB so you can build a dashboard and people that work as translators can do their thing on it instead. No more releases to fix a string π
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
See this example that uses custom builder. Currently there is no way to load the language files dynamically. You still have to load them all at once even if you donβt need it.
I have made a plugin to overcome that, but never got into stable state. I still consider it buggy.
You don't need to load them all.
Just use dynamic imports...
or async:
Another (more robust) example:
Here we are declaring the available langs so it will not fail in runtime trying to load a nonexistent file for any other error, and it will return the default language in case of such error.
You can use next/dynamic if working with Next JS like me in this last example (note that there's no dynamic function declared; if you are not using Next JS, it needs to be done but you can use the first or second example to create a
dynamic
implementation quickly).i.e.
Here you can find a dynamic import explanation from javascript.info
Apart from those options, in most webapps is better to handle translations through the DB so you can build a dashboard and people that work as translators can do their thing on it instead. No more releases to fix a string π
Best regards
A plugin like this one?
Why do you want a plugin when it's so easy to handle with vanilla JS?