How to translate text in an external javascript file? (Django)

Question

I have a JavaScript file that appends elements to the body according to the user interaction.

Right now in my index.html template I'm declaring global variables with the translated text:

 {% block main %}
      <script>
           let TRANSLATION = {% trans "my text" %}
      </script>
 {% endblock %}

So after Django translates the text in my index template, my JavaScript file can take the translated text and append it using something like:

element.innerHTML = TRANSLATION;

I know this is a very dirty way of translating the text that JavaScript will use because some users won't need that text and in those cases I'll be wasting resources with variables that I won't be using.

So the question is: What is the clean and correct way to translate text for external JavaScript files?

Answer 1

Most of the work will be done by django. Follow their documentation: https://docs.djangoproject.com/en/4.0/topics/i18n/translation/#internationalization-in-javascript-code

A little further down on the page is also documented how to generate the language file for your javascript code. You will have two language files later, one for your django application and one for your javascript code.

https://docs.djangoproject.com/en/4.0/topics/i18n/translation/#creating-message-files-from-javascript-source-code