From d28ef9f5e3d8319476ef3541f43457bfa654e395 Mon Sep 17 00:00:00 2001
From: Christian Mayer <chris@meggsimum.de>
Date: Thu, 2 May 2024 13:40:26 +0200
Subject: [PATCH] Refactor VueI18n creation to own module

This refactors the creation of the VueI18n
instance by encapsulating in an own ES module.
So the i18n instance can be imported to other pure
ES modules and will allow internationalization.
---
 src/locales/wgu-i18n.js              | 18 ++++++++++++++++++
 src/main.js                          | 25 ++++++-------------------
 tests/unit/specs/util/Locale.spec.js |  3 +++
 3 files changed, 27 insertions(+), 19 deletions(-)
 create mode 100644 src/locales/wgu-i18n.js

diff --git a/src/locales/wgu-i18n.js b/src/locales/wgu-i18n.js
new file mode 100644
index 00000000..f5883ec1
--- /dev/null
+++ b/src/locales/wgu-i18n.js
@@ -0,0 +1,18 @@
+/**
+ * Creates the VueI18n object used for internationalization.
+ */
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import LocaleUtil from '@/util/Locale';
+
+Vue.use(VueI18n);
+
+const appConfig = Vue.prototype.$appConfig;
+
+const preset = {
+  locale: LocaleUtil.getPreferredLanguage(appConfig),
+  fallbackLocale: LocaleUtil.getFallbackLanguage(appConfig),
+  messages: LocaleUtil.importVueI18nLocales()
+};
+
+export const i18n = new VueI18n(preset);
diff --git a/src/main.js b/src/main.js
index 29e696cf..11f7ddda 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,7 +3,6 @@
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib/framework';
 import PortalVue from 'portal-vue'
-import VueI18n from 'vue-i18n';
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import '@mdi/font/css/materialdesignicons.css'
 import 'material-icons/iconfont/material-icons.css'
@@ -17,7 +16,6 @@ import axios from 'axios';
 
 Vue.use(Vuetify);
 Vue.use(PortalVue);
-Vue.use(VueI18n);
 
 require('./assets/css/wegue.css');
 
@@ -62,21 +60,6 @@ const createVuetify = function (appConfig) {
   return new Vuetify(preset);
 }
 
-/**
- * Creates the VueI18n object used for internationalization.
- *
- * @param {Object} appConfig Global application context.
- * @returns The active I18n instance.
- */
-const createVueI18n = function (appConfig) {
-  const preset = {
-    locale: LocaleUtil.getPreferredLanguage(appConfig),
-    fallbackLocale: LocaleUtil.getFallbackLanguage(appConfig),
-    messages: LocaleUtil.importVueI18nLocales()
-  };
-  return new VueI18n(preset);
-}
-
 /**
  * Backwards compatibility layer for legacy features in app-conf.json.
  *
@@ -181,13 +164,17 @@ const migrateAppConfig = function (appConfig) {
  *
  * @param {Object} appConfig Global application context.
  */
-const createApp = function (appConfig) {
+const createApp = async function (appConfig) {
   // make app config accessible for all components
   Vue.prototype.$appConfig = migrateAppConfig(appConfig);
 
+  // dynamic import, otherwise Vue.prototype.$appConfig won't be set yet on
+  // static import
+  const { i18n } = await import('./locales/wgu-i18n.js');
+
   new Vue({
     vuetify: createVuetify(appConfig),
-    i18n: createVueI18n(appConfig),
+    i18n,
     render: h => h(WguApp)
   }).$mount('#app');
 };
diff --git a/tests/unit/specs/util/Locale.spec.js b/tests/unit/specs/util/Locale.spec.js
index b557a173..e9cd931c 100644
--- a/tests/unit/specs/util/Locale.spec.js
+++ b/tests/unit/specs/util/Locale.spec.js
@@ -1,4 +1,5 @@
 import LocaleUtil from '@/util/Locale'
+import Vue from 'vue';
 
 const appConfig = {
   lang: {
@@ -11,6 +12,8 @@ const appConfig = {
   }
 };
 
+Vue.prototype.$appConfig = appConfig;
+
 describe('LocaleUtil', () => {
   it('is defined', () => {
     expect(typeof LocaleUtil).to.not.equal(undefined);