Split translations

Makefile

@@ -31,11 +31,15 @@ all:
 	@echo choose a target from: clean makemessages translations
 
 clean:
-	rm -f $(TEMPLATE_POT) $(OUTPUT_DIR)/translations.json
+	rm -rf $(TEMPLATE_POT)
 
 makemessages: $(TEMPLATE_POT)
 
-translations: ./$(OUTPUT_DIR)/translations.json
+translations: $(LOCALE_FILES)
+	mkdir -p $(OUTPUT_DIR)/translations
+	@for lang in $(LOCALES); do \
+		gettext-compile --output $(OUTPUT_DIR)/translations/$$lang.json $(OUTPUT_DIR)/locale/$$lang/LC_MESSAGES/app.po; \
+	done;
 
 # Create a main .pot template, then generate .po files for each available language.
 # Thanx to Systematic: https://github.com/Polyconseil/systematic/blob/866d5a/mk/main.mk#L167-L183
@@ -58,7 +62,3 @@ $(TEMPLATE_POT): $(GETTEXT_SOURCES)
 			msgattrib --no-wrap --no-obsolete -o $$PO_FILE $$PO_FILE || break; \
 		fi; \
 	done;
-
-$(OUTPUT_DIR)/translations.json: $(LOCALE_FILES)
-	mkdir -p $(OUTPUT_DIR)
-	gettext-compile --output $@ $(LOCALE_FILES)

src/main.js

@@ -7,17 +7,13 @@ import VueMeta from 'vue-meta'
 import App from './App.vue'
 import Home from './views/Home.vue'
 import Help from './views/Help'
-import News from './views/News'
 import Instances from './views/Instances'
-import HallOfFame from './views/Hall-Of-Fame'
 import FAQ from './views/FAQ'
 import AllContentSelections from './views/All-Content-Selections'
 
 import './scss/main.scss'
 import CommonMixins from './mixins/CommonMixins'
 
-const translations = require('./translations.json')
-
 Vue.use(VueRouter)
 
 // ############# I18N ##############
@@ -32,12 +28,8 @@ const aliasesLanguages = {
 }
 const allLocales = Object.keys(availableLanguages).concat(Object.keys(aliasesLanguages))
 
-Vue.use(GetTextPlugin, {
-  translations,
-  availableLanguages,
-  defaultLanguage: 'en_US',
-  silent: false
-})
+const defaultLanguage = 'en_US'
+let currentLanguage = defaultLanguage
 
 const localePath = window.location.pathname
   .replace(/^\//, '')
@@ -46,27 +38,47 @@ const localePath = window.location.pathname
 const languageFromLocalStorage = localStorage.getItem('language')
 
 if (allLocales.includes(localePath)) {
-  Vue.config.language = aliasesLanguages[localePath] ? aliasesLanguages[localePath] : localePath
-  localStorage.setItem('language', Vue.config.language)
+  currentLanguage = aliasesLanguages[localePath] ? aliasesLanguages[localePath] : localePath
+  localStorage.setItem('language', currentLanguage)
 } else if (languageFromLocalStorage) {
-  Vue.config.language = languageFromLocalStorage
+  currentLanguage = languageFromLocalStorage
 } else {
   const navigatorLanguage = window.navigator.userLanguage || window.navigator.language
   const snakeCaseLanguage = navigatorLanguage.replace('-', '_')
-  Vue.config.language = aliasesLanguages[snakeCaseLanguage] ? aliasesLanguages[snakeCaseLanguage] : snakeCaseLanguage
+  currentLanguage = aliasesLanguages[snakeCaseLanguage] ? aliasesLanguages[snakeCaseLanguage] : snakeCaseLanguage
 }
 
 Vue.filter('translate', value => {
   return value ? Vue.prototype.$gettext(value.toString()) : ''
 })
 
-// ###########################
+const p = currentLanguage === defaultLanguage
+  ? Promise.resolve({ default: {} })
+  : import('../public/translations/' + currentLanguage + '.json')
 
-Vue.use(VueMeta)
+p.catch(err => {
+  console.error('Cannot load translations.', err)
+  return { default: {} }
+}).then(module => {
+  Vue.use(GetTextPlugin, {
+    translations: module.default,
+    availableLanguages,
+    defaultLanguage: 'en_US',
+    silent: process.env.NODE_ENV === 'development'
+  })
 
-Vue.mixin(CommonMixins)
+  Vue.config.language = currentLanguage
 
-const routes = [
+  // ###########################
+
+  Vue.use(VueMeta)
+
+  Vue.mixin(CommonMixins)
+
+  const HallOfFame = () => import('./views/Hall-Of-Fame')
+  const News = () => import('./views/News')
+
+  const routes = [
     {
       path: '/',
       component: Home
@@ -95,16 +107,16 @@ const routes = [
       path: '/content-selections',
       component: AllContentSelections
     }
-]
+  ]
 
-for (const locale of allLocales) {
+  for (const locale of allLocales) {
     routes.push({
       path: '/' + locale,
       component: Home
     })
-}
+  }
 
-const router = new VueRouter({
+  const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes,
@@ -115,14 +127,14 @@ const router = new VueRouter({
         return { x: 0, y: 0 }
       }
     }
-})
+  })
 
-// Stats Matomo
-if (!(navigator.doNotTrack === 'yes' ||
+  // Stats Matomo
+  if (!(navigator.doNotTrack === 'yes' ||
     navigator.doNotTrack === '1' ||
     navigator.msDoNotTrack === '1' ||
     window.doNotTrack === '1')
-) {
+  ) {
     Vue.use(VueMatomo, {
       // Configure your matomo server and site
       host: 'https://stats.framasoft.org/',
@@ -163,9 +175,9 @@ if (!(navigator.doNotTrack === 'yes' ||
 
       this.setVisitorCookieTimeout(getOriginalVisitorCookieTimeout())
     }])
-}
+  }
 
-new Vue({ // eslint-disable-line no-new
+  new Vue({ // eslint-disable-line no-new
     el: '#app',
     router,
     mounted () {
@@ -173,4 +185,5 @@ new Vue({ // eslint-disable-line no-new
       document.dispatchEvent(new Event('render-event'))
     },
     render: h => h(App)
+  })
 })