Extract locales from *.vue files

[AdrienClairembault]

The .vue files are ignored by our extract-locales script.

We need to do the same thing we already do with .twig files, that mean compiling them into a language that xgettext understands.

Will probably require using https://www.npmjs.com/package/@vue/compiler-sfc.

[AdrienClairembault]

Apparently this has been known for 2 years, see glpi-project/tools#65.

[orthagh]

Another promising tool: https://jshmrtn.github.io/vue3-gettext/extraction.html
Currently testing it (without sucess so far)

[cconard96]

Apparently this has been known for 2 years, see glpi-project/tools#65.

Most of the strings are extracted properly from Vue SFC files when using the JavaScript language which makes sense since it is mostly just plain JS and gettext even supports JSX when specifying "JavaScript" as the language. I built the 0.26 version of gettext locally and tested it but it still misses a few strings and gives a lot of warnings about unterminated RegExp literals. I tried testing with the current master branch of gettext but I was blocked by a lot of connectivity issues with their Git server.

The issue with 0.26 seems to be the translations inside v-bind attributes like :title="__('Planned end date')".

One solution which seems to work as-is is extracting the strings from the built files since the Vue components all get built into chunks under public/build/vue/vue-sfc/. The usages listed in the POT would be a little confusing (Kanban-Card-vue-db731e2291d0a3601362.js instead of js/src/vue/Kanban/Card.vue) but it would at least ensure the strings are extracted. A script to copy the chunks to a temporary directory and convert the name back to the source name would improve the usability.

[orthagh]

Another promising tool: https://jshmrtn.github.io/vue3-gettext/extraction.html

With the following config:

module.exports = {
  input: {
    path: "./js",
    include: ["**/*.vue"],
    parserOptions: {
      overrideDefaultKeywords: true,
      mapping: {
        simple: ["__"], // Add any other simple keywords you use
        plural: ["_n"], // Add any other plural keywords you use
        ctxPlural: ["_nx"], // Add any other contextual plural keywords you use
        ctx: ["_x"] // Add any other contextual keywords you use
      }
    },
  },
  output: {
    path: "./",
    splitJson: false,
    linguas: false,
    flat: true
  },
};

I successfully ran an extraction of our locales in our .vue files
See the generated .pot file

vue.pot.txt

[trasher]

If gettext properly adds support in the future; we can switch back (I do not really want to compile getext on my side just to extract some locales form vue files).

@orthagh solution looks good to me, and would permit to extract translations quickly.