BazingaJsTranslationBundle
BazingaJsTranslationBundle copied to clipboard
willdurand
Webpack encore
I know there is a lot of topic about this, but there is a lot of informations and not working for me.
The doc are not updated with Encore, so does maintainers could provide an "official" way to enable it ?
Feel free to submit a PR, it is an open source project all contributions are welcome
I would like but, I didn't achieve to make it working. At least some help and I will submit a PR if needed.
you can try my sugestion https://github.com/willdurand/BazingaJsTranslationBundle/issues/254#issuecomment-582000147
I've also implemented something inspired by @DrJele:
- Created a translations.js file:
var Translator = require('PUBLIC/bundles/bazingajstranslation/js/translator.min.js');
const en = require('ROOT/assets/js/bazinga/translations/javascript/en.json');
const nl = require('ROOT/assets/js/bazinga/translations/javascript/nl.json');
Translator.fromJSON(en);
Translator.fromJSON(nl);
module.exports = Translator;
Which I require via webpack where I need translations:
const Translator = require('MYAPP/Resources/protected/js/translations.js');
When deploying or updating: first: php bin/console bazinga:js-translation:dump --format=json assets/js/bazinga then: npm run dev (or the prod alternative...)
@willdurand and @kl3sk i have found a problem with my solution .. the async translation load might not happen fast enough and a pice of code might use the translator and still display the translation key and not the translation. for example for my jqgrids, sometimes the translations do not load.
Hello, I've just tested @wumke solution and made it work! I'm just wondering if I should also include generated config.js file. As far as I can see, Translator.trans is still working but I'd appreciate any suggestion about my question.
Below is another solution that I find more practical: The principle is to generate the translation script in the template, store the result in a global variable and use this variable in webpack to perform an 'eval()'.
- In your template (twig) :
...
<html lang="{{ app.request.locale|split('_')[0] }}">
...
{% block javascripts %}
{% set transScript = render(controller('bazinga.jstranslation.controller::getTranslationsAction',{"domain":"messages","_format":"js"}))|split('\n') %}
<script type="text/javascript">
var translationscript= ''; //this variable is in global scope
{% for transScriptLine in transScript %}
{% if transScriptLine|raw|trim|slice(0,2) != '//' %}
translationscript+= '{{ transScriptLine|replace({"'":"\\'","\\n":""})|raw }}';
{% endif %}
{% endfor %}
</script>
{{ encore_entry_script_tags('app') }}
{% endblock %}
- In your entrypoint app.js :
import Translator from 'bazinga-translator';
global.Translator = Translator; // this is needed to eval the script
eval(translationscript); //translationscript comes from global scope.
console.log(Translator.trans('your.translation.key',{},'messages')); //it works !!!
