Messages: Load languages asynchronously.

Reduces the size of the initial app bundle by about half.
This commit is contained in:
lain 2020-06-08 17:22:07 +02:00
parent acbef1ebdc
commit 99eaec8547
5 changed files with 80 additions and 32 deletions

View file

@ -47,7 +47,8 @@ export default {
}),
created () {
// Load the locale from the storage
this.$i18n.locale = this.$store.getters.mergedConfig.interfaceLanguage
const val = this.$store.getters.mergedConfig.interfaceLanguage
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
window.addEventListener('resize', this.updateMobileState)
},
destroyed () {

View file

@ -32,7 +32,7 @@ import _ from 'lodash'
export default {
computed: {
languageCodes () {
return Object.keys(languagesObject)
return languagesObject.languages
},
languageNames () {
@ -43,7 +43,6 @@ export default {
get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
set: function (val) {
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
this.$i18n.locale = val
}
}
},

View file

@ -7,34 +7,75 @@
// sed -i -e "s/'//gm" -e 's/"/\\"/gm' -re 's/^( +)(.+?): ((.+?))?(,?)(\{?)$/\1"\2": "\4"/gm' -e 's/\"\{\"/{/g' -e 's/,"$/",/g' file.json
// There's only problem that apostrophe character ' gets replaced by \\ so you have to fix it manually, sorry.
const loaders = {
ar: () => import('./ar.json'),
ca: () => import('./ca.json'),
cs: () => import('./cs.json'),
de: () => import('./de.json'),
eo: () => import('./eo.json'),
es: () => import('./es.json'),
et: () => import('./et.json'),
eu: () => import('./eu.json'),
fi: () => import('./fi.json'),
fr: () => import('./fr.json'),
ga: () => import('./ga.json'),
he: () => import('./he.json'),
hu: () => import('./hu.json'),
it: () => import('./it.json'),
ja: () => import('./ja_pedantic.json'),
ja_easy: () => import('./ja_easy.json'),
ko: () => import('./ko.json'),
nb: () => import('./nb.json'),
nl: () => import('./nl.json'),
oc: () => import('./oc.json'),
pl: () => import('./pl.json'),
pt: () => import('./pt.json'),
ro: () => import('./ro.json'),
ru: () => import('./ru.json'),
te: () => import('./te.json'),
zh: () => import('./zh.json')
}
const messages = {
ar: require('./ar.json'),
ca: require('./ca.json'),
cs: require('./cs.json'),
de: require('./de.json'),
en: require('./en.json'),
eo: require('./eo.json'),
es: require('./es.json'),
et: require('./et.json'),
eu: require('./eu.json'),
fi: require('./fi.json'),
fr: require('./fr.json'),
ga: require('./ga.json'),
he: require('./he.json'),
hu: require('./hu.json'),
it: require('./it.json'),
ja: require('./ja_pedantic.json'),
ja_easy: require('./ja_easy.json'),
ko: require('./ko.json'),
nb: require('./nb.json'),
nl: require('./nl.json'),
oc: require('./oc.json'),
pl: require('./pl.json'),
pt: require('./pt.json'),
ro: require('./ro.json'),
ru: require('./ru.json'),
te: require('./te.json'),
zh: require('./zh.json')
languages: [
'ar',
'ca',
'cs',
'de',
'en',
'eo',
'es',
'et',
'eu',
'fi',
'fr',
'ga',
'he',
'hu',
'it',
'ja',
'ja_easy',
'ko',
'nb',
'nl',
'oc',
'pl',
'pt',
'ro',
'ru',
'te',
'zh'
],
default: {
en: require('./en.json')
},
setLanguage: async (i18n, language) => {
if (loaders[language]) {
let messages = await loaders[language]()
i18n.setLocaleMessage(language, messages)
}
i18n.locale = language
}
}
export default messages

View file

@ -46,11 +46,13 @@ Vue.use(VBodyScrollLock)
const i18n = new VueI18n({
// By default, use the browser locale, we will update it if neccessary
locale: currentLocale,
locale: 'en',
fallbackLocale: 'en',
messages
messages: messages.default
})
messages.setLanguage(i18n, currentLocale)
const persistedStateOptions = {
paths: [
'config',

View file

@ -1,5 +1,6 @@
import { set, delete as del } from 'vue'
import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
import messages from '../i18n/messages'
const browserLocale = (window.navigator.language || 'en').split('-')[0]
@ -115,6 +116,10 @@ const config = {
case 'customTheme':
case 'customThemeSource':
applyTheme(value)
break
case 'interfaceLanguage':
messages.setLanguage(this.getters.i18n, value)
break
}
}
}