Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Webpack encore #276

Open
kl3sk opened this issue Jan 14, 2020 · 8 comments
Open

Webpack encore #276

kl3sk opened this issue Jan 14, 2020 · 8 comments

Comments

@kl3sk
Copy link
Contributor

kl3sk commented Jan 14, 2020

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
Copy link

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

@kl3sk
Copy link
Contributor Author

kl3sk commented Jan 15, 2020

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
Copy link

drjele commented Feb 6, 2020

you can try my sugestion #254 (comment)

@kl3sk
Copy link
Contributor Author

kl3sk commented Feb 6, 2020

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

@wumke
Copy link

wumke commented Mar 6, 2020

I've also implemented something inspired by @drjele:

  1. 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
Copy link

drjele commented Apr 9, 2020

@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
Copy link

matteorossi-thespacesm commented Jan 18, 2021 •
edited
Loading

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
Copy link

pouetman87 commented Mar 16, 2021 •
edited
Loading

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

@sanderdlm sanderdlm mentioned this issue Apr 27, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@kl3sk @drjele @maxhelias @wumke @pouetman87 @matteorossi-thespacesm