From 50593f3edf7a86688bc2b1ba0a57c1589db21980 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Fri, 26 Nov 2021 16:31:19 +0800
Subject: [PATCH] [wip] lazy load language file
---
src/components/settings/Appearance.vue | 10 +--
src/i18n.js | 91 +++++++++++---------------
src/main.js | 2 +
src/mixins/lang.js | 27 ++++++++
4 files changed, 68 insertions(+), 62 deletions(-)
create mode 100644 src/mixins/lang.js
diff --git a/src/components/settings/Appearance.vue b/src/components/settings/Appearance.vue
index e0a3d643..63fbd40b 100644
--- a/src/components/settings/Appearance.vue
+++ b/src/components/settings/Appearance.vue
@@ -4,7 +4,7 @@
<label for="language" class="form-label">
{{ $t("Language") }}
</label>
- <select id="language" v-model="$i18n.locale" class="form-select">
+ <select id="language" v-model="$root.language" class="form-select">
<option
v-for="(lang, i) in $i18n.availableLocales"
:key="`Lang${i}`"
@@ -116,14 +116,8 @@
</template>
<script>
-import { setPageLocale } from "../../util-frontend";
export default {
- watch: {
- "$i18n.locale"() {
- localStorage.locale = this.$i18n.locale;
- setPageLocale();
- },
- },
+
};
</script>
diff --git a/src/i18n.js b/src/i18n.js
index deeeac91..22949393 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -1,62 +1,45 @@
import { createI18n } from "vue-i18n/index";
-import daDK from "./languages/da-DK";
-import deDE from "./languages/de-DE";
import en from "./languages/en";
-import esEs from "./languages/es-ES";
-import etEE from "./languages/et-EE";
-import fa from "./languages/fa";
-import frFR from "./languages/fr-FR";
-import hu from "./languages/hu";
-import hrHR from "./languages/hr-HR";
-import itIT from "./languages/it-IT";
-import idID from "./languages/id-ID";
-import ja from "./languages/ja";
-import koKR from "./languages/ko-KR";
-import nlNL from "./languages/nl-NL";
-import nbNO from "./languages/nb-NO";
-import pl from "./languages/pl";
-import ptBR from "./languages/pt-BR";
-import bgBG from "./languages/bg-BG";
-import ruRU from "./languages/ru-RU";
-import sr from "./languages/sr";
-import srLatn from "./languages/sr-latn";
-import svSE from "./languages/sv-SE";
-import trTR from "./languages/tr-TR";
-import vi from "./languages/vi";
-import zhCN from "./languages/zh-CN";
-import zhHK from "./languages/zh-HK";
-import zhTW from "./languages/zh-TW";
const languageList = {
- en,
- "zh-HK": zhHK,
- "bg-BG": bgBG,
- "de-DE": deDE,
- "nl-NL": nlNL,
- "nb-NO": nbNO,
- "es-ES": esEs,
- "fa": fa,
- "pt-BR": ptBR,
- "fr-FR": frFR,
- "hu": hu,
- "hr-HR": hrHR,
- "it-IT": itIT,
- "id-ID" : idID,
- "ja": ja,
- "da-DK": daDK,
- "sr": sr,
- "sr-latn": srLatn,
- "sv-SE": svSE,
- "tr-TR": trTR,
- "ko-KR": koKR,
- "ru-RU": ruRU,
- "zh-CN": zhCN,
- "pl": pl,
- "et-EE": etEE,
- "vi": vi,
- "zh-TW": zhTW
+ "zh-HK": "繁體中文 (香港)",
+ "bg-BG": "Български",
+ "de-DE": "Deutsch (Deutschland)",
+ "nl-NL": "Nederlands",
+ "nb-NO": "Norsk",
+ "es-ES": "Español",
+ "fa": "Farsi",
+ "pt-BR": "Português (Brasileiro)",
+ "fr-FR": "Français (France)",
+ "hu": "Magyar",
+ "hr-HR": "Hrvatski",
+ "it-IT": "Italiano (Italian)",
+ "id-ID": "Bahasa Indonesia (Indonesian)",
+ "ja": "日本語",
+ "da-DK": "Danish (Danmark)",
+ "sr": "Српски",
+ "sr-latn": "Srpski",
+ "sv-SE": "Svenska",
+ "tr-TR": "Türkçe",
+ "ko-KR": "한국어",
+ "ru-RU": "Русский",
+ "zh-CN": "简体中文",
+ "pl": "Polski",
+ "et-EE": "eesti",
+ "vi": "Vietnamese",
+ "zh-TW": "繁體中文 (台灣)"
};
+let messages = {
+ en,
+};
+
+for (let lang in languageList) {
+ messages[lang] = {
+ languageName: languageList[lang]
+ };
+}
+
const rtlLangs = ["fa"];
export const currentLocale = () => localStorage.locale
@@ -73,5 +56,5 @@ export const i18n = createI18n({
fallbackLocale: "en",
silentFallbackWarn: true,
silentTranslationWarn: true,
- messages: languageList,
+ messages: messages,
});
diff --git a/src/main.js b/src/main.js
index 14b87f49..18490908 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ import mobile from "./mixins/mobile";
import publicMixin from "./mixins/public";
import socket from "./mixins/socket";
import theme from "./mixins/theme";
+import lang from "./mixins/lang";
import { router } from "./router";
import { appName } from "./util.ts";
@@ -22,6 +23,7 @@ const app = createApp({
mobile,
datetime,
publicMixin,
+ lang,
],
data() {
return {
diff --git a/src/mixins/lang.js b/src/mixins/lang.js
new file mode 100644
index 00000000..2a13fec2
--- /dev/null
+++ b/src/mixins/lang.js
@@ -0,0 +1,27 @@
+import { currentLocale } from "../i18n";
+import { setPageLocale } from "../util-frontend";
+const langModules = import.meta.glob("../languages/*.js");
+
+export default {
+ data() {
+ return {
+ language: currentLocale(),
+ };
+ },
+
+ watch: {
+ async language(lang) {
+ await this.changeLang(lang);
+ },
+ },
+
+ methods: {
+ async changeLang(lang) {
+ let message = (await langModules["../languages/" + lang + ".js"]()).default;
+ this.$i18n.setLocaleMessage(lang, message);
+ this.$i18n.locale = lang;
+ localStorage.locale = lang;
+ setPageLocale();
+ }
+ }
+};