Webpack encore - Githubissues

kl3sk commented 4 years ago

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 ?

maxhelias commented 4 years ago

Feel free to submit a PR, it is an open source project all contributions are welcome

kl3sk commented 4 years ago

I would like but, I didn't achieve to make it working. At least some help and I will submit a PR if needed.

drjele commented 4 years ago

you can try my sugestion https://github.com/willdurand/BazingaJsTranslationBundle/issues/254#issuecomment-582000147

kl3sk commented 4 years ago

Thanks @DrJele for your proposition, I'll try but the solution seem weird

wumke commented 4 years ago

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...)

drjele commented 4 years ago

@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.

matteorossi-thespacesm commented 3 years ago

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.

pouetman87 commented 3 years ago

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 :
```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 !!!

willdurand / BazingaJsTranslationBundle

Webpack encore #276