What is the best way to translate JavaScript literal strings in Assetic assets?

I'm using Symfony2 to develop a application that is to be translatable. The application has Assetic enabled to minify and combine *.js and *.css files. However, I have a jQuery plugin I wrote, that has literal strings in it. For example, consider the following code:

       $('<p>Are you sure you want to proceed?</p>').dialog({
            buttons: {
                "Yes" : function() {
                    // ...
                },
                "No" : function() {开发者_如何学编程
                    // ...
                }
            }
        });

In the above snippet, "Are you sure...", "Yes" and "No" will always be English, and I can't use Twig templating in the .js file to translate it using something like: {{ "yes"|trans }}

What I want to know is, what would be the best way to use Twig to leverage the built in Symfony2 translation mechanism, to translate the literal strings in my JS scripts.

Is there a way to create for example: myscript.js.twig files?

Is there a way to create for example: myscript.js.twig files?

It seems a bad idea.

You can check https://github.com/willdurand/BazingaExposeTranslationBundle

or create it yourself, for example include this in your template:

<script type="text/javascript">
    var translations = {
       // ... 
       'yes' : {{ 'yes' | trans }},
       // ...
    }
</script>

then if your javascript file is included just before </body> you can use translations variable in it.

Here is my solution (Tested on Symfony 4 and 5):

First, we create a controller that will create JS file with all translations according to the current variable locale:

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Yaml\Yaml;

/**
 * Translation controller.
 */
class TranslationController extends AbstractController
{
    /**
     * @Route("/translation.js", name="translation")
     */
    public function index(Request $request)
    {

        $locale = $request->getLocale();
        $file   = __DIR__.'/../../translations/messages.'.$locale.'.yaml';
        $parsed = Yaml::parse(file_get_contents($file));

        $translations = $this->renderView(
            'translation/translation.js.twig', 
            array(
                'json' => json_encode($parsed)
            )
        );

        return new Response($translations, 200,
            array('Content-Type' => 'text/javascript')
        );
    }
}

Then we create a TWIG template to render (/templates/translation/translation.js.twig):

var trans = JSON.parse('{{ json|raw }}');

We place our dynamic translation file in the template before other assets:

<script src="{{ path('translation') }}"></script>

For sample translation file /translations/messages.pl.yaml:

projects: Projekty
medium: Średnio
month:
  january: Styczeń
  february: Luty

We can display our translation in any JS file:

console.log(trans['month']['january']);
console.log(trans['medium']);

I hope it will be useful to someone

I was searching something to make twig.js work with translations which seems to me like the best solution. Still searching though.

In the meantime, I'm using this jsgettext which is a gettext implementation in Javascript, by Joshua I. Miller. I've uploaded back to github since the original repo is down.

<script language="javascript" src="/path/LC_MESSAGES/myDomain.json"></script>
<script language="javascript" src="/path/Gettext.js"></script>

You load your translation files into your DOM and jsgettext can parse it:

function _(msgid) { return gt.gettext(msgid); }

alert(_("some string"));

To get the path of your translation files from Symfony, you'll have to make some php/twig extension around the Translator service but it works great without duplicating your translation resources.