The Flask-Babel tool we are using does not supply any native way to access translations via JavaScript, so would require hacky solutions like adding data attributes or hidden elements to the HTML.
We have several areas of the application where we must use text in JavaScript. The DataTables plugin for example allows you to provide strings to use for the buttons it generates, but they must be defined in JS.
This library seems to be a good solution: https://github.com/guillaumepotier/gettext.jse main [[https://www.gnu.org/software/gettext/|GNU gettext library]] allows extraction from JavaScript (and all other main languages)
NOTE: The API does **not** extract from HTML, or any HTML template format. Hence it's best to leave the existing Flask-Babel extraction to deal with the Python and HTML, and //only// use GNU gettext API for JavaScript.
But another library needed to do string extraction to create .pot files - see https://www.npmjs.com/package/gettext-extractor==== Implementation ====
=====1. Access translations in JavaScript=====
Tool: https://github.com/guillaumepotier/gettext.js
- Use built in po2json library to convert .po files to JSON files. These must be stored in the public /static folder.
- Use i18n.gettext('Translatable string') to mark strings within JavaScript files. This uses the current locale setting to select correct JSON translation file and return the correct string.
NOTE: Ideally only extractions from src/*.js files should be included in the JSON file, the rest of the strings will not be needed in JSON format.
IMPORTANT: When extracting strings from JavaScript files separately to the Python and HTML extraction, we end up with a **separate **.pot file.
This is not ideal as it means that duplicate strings will not be merged. If we do use a separate extractor for JS strings then we need to **merge** the .pot files afterwards=====2. A better solution might be to use the main default [[https://www.gnu.org/software/gettext/|GNU gettext library]] - see [[https://www.gnu.org/software/gettext/manual/html_node/xgettext-Invocation.html| xgettext function invocation section]].Extract strings from JavaScript files and merge with existing .pot file=====
This is capable of extracting from Python,ool: [[https://www.gnu.org/software/gettext/|GNU gettext library]] - see [[https://www.gnu.org/software/gettext/manual/html_node/xgettext-Invocation.html| xgettext function invocation section]]
- Use command line to extract from all src/*.js files
- Use the -j flag to join with the existing messages.pot file generated from Flask-Babel
IMPORTANT: make sure the messages.pot file is up to date with all Python and HTML strings first. HTML and JavaScript (along with all other main languages)
Note: Webpack loader which could be useful: https://github.com/mrblueblue/gettext-loader but unlikely to be needed in our caseThis process will extract from JS files and merge immediately into the messages.pot file
NOTE: -o flag allows us to name the output **messages.pot** file to merge with, instead of default messages.po