See #161: initial setup to collect/compile messages with vue-gettext

front/package.json

@@ -8,8 +8,8 @@
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",
     "build": "node build/build.js",
-    "i18n-extract": "find src/ -name '*.vue' | xargs vendor/vue-i18n-xgettext/index.js > ../po/en.po",
-    "i18n-compile": "node build/i18n.js",
+    "i18n-extract": "scripts/i18n-extract.sh",
+    "i18n-compile": "scripts/i18n-compile.sh",
     "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
     "unit-watch": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js",
     "e2e": "node test/e2e/runner.js",
@@ -34,6 +34,7 @@
     "semantic-ui-css": "^2.2.10",
     "showdown": "^1.8.6",
     "vue": "^2.5.16",
+    "vue-gettext": "^2.0.31",
     "vue-lazyload": "^1.1.4",
     "vue-masonry": "^0.10.16",
     "vue-router": "^2.3.1",
@@ -61,6 +62,7 @@
     "cross-env": "^4.0.0",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",
+    "easygettext": "^2.5.0",
     "es6-promise": "^4.2.2",
     "eslint": "^3.19.0",
     "eslint-config-standard": "^6.2.1",

front/scripts/i18n-compile.sh

+#!/bin/bash -eux
+locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | xargs echo)
+find locales -name '*.po' | xargs $(yarn bin gettext-extract)/gettext-compile --output src/translations.json

front/scripts/i18n-extract.sh

+#!/bin/bash -eux
+locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | xargs echo)
+locales_dir="locales"
+sources=$(find src -name '*.vue' -o -name '*.html' 2> /dev/null)
+js_sources=$(find src -name '*.vue' -o -name '*.js')
+touch $locales_dir/app.pot
+
+# Create a main .pot template, then generate .po files for each available language.
+# Extract gettext strings from templates files and create a POT dictionary template.
+$(yarn bin gettext-extract)/gettext-extract --attribute v-translate --quiet --output $locales_dir/app.pot $sources
+xgettext --language=JavaScript --keyword=npgettext:1c,2,3 \
+    --from-code=utf-8 --join-existing --no-wrap \
+    --package-name=$(node -e "console.log(require('./package.json').name);") \
+    --package-version=$(node -e "console.log(require('./package.json').version);") \
+    --output $locales_dir/app.pot $js_sources
+
+# Generate .po files for each available language.
+echo $locales
+for lang in $locales; do \
+    po_file=$locales_dir/$lang/LC_MESSAGES/app.po; \
+    echo "msgmerge --update $po_file "; \
+    mkdir -p $(dirname $po_file); \
+    [ -f $po_file ] && msgmerge --lang=$lang --update $po_file $locales_dir/app.pot || msginit --no-translator --locale=$lang --input=$locales_dir/app.pot --output-file=$po_file; \
+    msgattrib --no-wrap --no-obsolete -o $po_file $po_file; \
+done;

front/src/locales.js

+/* eslint-disable */
+export default {
+  "locales": [
+    {
+      "code": "en_US",
+      "label": "English (United-States)"
+    },
+    {
+      "code": "fr_FR",
+      "label": "Français"
+    }
+  ]
+}

front/src/main.js

@@ -15,7 +15,11 @@ import i18next from 'i18next'
 import i18nextFetch from 'i18next-fetch-backend'
 import VueI18Next from '@panter/vue-i18next'
 import store from './store'
+import GetTextPlugin from 'vue-gettext'
 import { sync } from 'vuex-router-sync'
+import translations from './translations.json'
+import locales from '@/locales'
+
 import filters from '@/filters' // eslint-disable-line
 import globals from '@/components/globals' // eslint-disable-line
 
@@ -29,6 +33,26 @@ window.$ = window.jQuery = require('jquery')
 require('semantic-ui-css/semantic.js')
 require('masonry-layout')
 
+Vue.use(GetTextPlugin, {
+  availableLanguages: (function () {
+    let l = {}
+    locales.locales.forEach(c => {
+      l[c.code] = c.label
+    })
+    return l
+  })(),
+  defaultLanguage: 'en_US',
+  languageVmMixin: {
+    computed: {
+      currentKebabCase: function () {
+        return this.current.toLowerCase().replace('_', '-')
+      }
+    }
+  },
+  translations: translations,
+  silent: true
+})
+
 Vue.use(VueI18Next)
 Vue.use(VueMasonryPlugin)
 Vue.use(VueLazyload)

front/src/translations.json

+{}