Avoid extending the VueI18n class as it won't exist in Vue 3 (#4046)

src/renderer/components/general-settings/general-settings.js

@@ -8,6 +8,7 @@ import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtButton from '../ft-button/ft-button.vue'
 
 import debounce from 'lodash.debounce'
+import allLocales from '../../../../static/locales/activeLocales.json'
 import { showToast } from '../../helpers/utils'
 
 export default defineComponent({
@@ -108,7 +109,7 @@ export default defineComponent({
     localeOptions: function () {
       return [
         'system',
-        ...this.$i18n.allLocales
+        ...allLocales
       ]
     },
 

src/renderer/i18n/index.js

@@ -4,54 +4,47 @@ import { createWebURL } from '../helpers/utils'
 // List of locales approved for use
 import activeLocales from '../../../static/locales/activeLocales.json'
 
-class CustomVueI18n extends VueI18n {
-  constructor(options) {
-    super(options)
-    this.allLocales = activeLocales
-  }
+Vue.use(VueI18n)
 
-  async loadLocale(locale) {
-    // don't need to load it if it's already loaded
-    if (this.availableLocales.includes(locale)) {
-      return
-    }
-    if (!this.allLocales.includes(locale)) {
-      console.error(`Unable to load unknown locale: "${locale}"`)
-    }
-
-    if (process.env.IS_ELECTRON && process.env.NODE_ENV !== 'development') {
-      const { readFile } = require('fs/promises')
-      const { promisify } = require('util')
-      const { brotliDecompress } = require('zlib')
-      const brotliDecompressAsync = promisify(brotliDecompress)
-      // locales are only compressed in our production Electron builds
-      try {
-        // decompress brotli compressed json file and then load it
-        // eslint-disable-next-line n/no-path-concat
-        const compressed = await readFile(`${__dirname}/static/locales/${locale}.json.br`)
-        const decompressed = await brotliDecompressAsync(compressed)
-        const data = JSON.parse(decompressed.toString())
-        this.setLocaleMessage(locale, data)
-      } catch (err) {
-        console.error(locale, err)
-      }
-    } else {
-      const url = createWebURL(`/static/locales/${locale}.json`)
-
-      const response = await fetch(url)
-      const data = await response.json()
-      this.setLocaleMessage(locale, data)
-    }
-  }
-}
-
-Vue.use(CustomVueI18n)
-
-const i18n = new CustomVueI18n({
+const i18n = new VueI18n({
   locale: 'en-US',
   fallbackLocale: { default: 'en-US' }
 })
 
-i18n.loadLocale('en-US')
+export async function loadLocale(locale) {
+  // don't need to load it if it's already loaded
+  if (i18n.availableLocales.includes(locale)) {
+    return
+  }
+  if (!activeLocales.includes(locale)) {
+    console.error(`Unable to load unknown locale: "${locale}"`)
+  }
+
+  // locales are only compressed in our production Electron builds
+  if (process.env.IS_ELECTRON && process.env.NODE_ENV !== 'development') {
+    const { readFile } = require('fs/promises')
+    const { promisify } = require('util')
+    const { brotliDecompress } = require('zlib')
+    const brotliDecompressAsync = promisify(brotliDecompress)
+    try {
+      // decompress brotli compressed json file and then load it
+      // eslint-disable-next-line n/no-path-concat
+      const compressed = await readFile(`${__dirname}/static/locales/${locale}.json.br`)
+      const decompressed = await brotliDecompressAsync(compressed)
+      const data = JSON.parse(decompressed.toString())
+      i18n.setLocaleMessage(locale, data)
+    } catch (err) {
+      console.error(locale, err)
+    }
+  } else {
+    const url = createWebURL(`/static/locales/${locale}.json`)
+
+    const response = await fetch(url)
+    const data = await response.json()
+    i18n.setLocaleMessage(locale, data)
+  }
+}
+
+loadLocale('en-US')
 
 export default i18n

src/renderer/store/modules/settings.js

@@ -1,4 +1,5 @@
-import i18n from '../../i18n/index'
+import i18n, { loadLocale } from '../../i18n/index'
+import allLocales from '../../../../static/locales/activeLocales.json'
 import { MAIN_PROFILE_ID, IpcChannels, SyncEvents } from '../../../constants'
 import { DBSettingHandlers } from '../../../datastores/handlers/index'
 import { getSystemLocale, showToast } from '../../helpers/utils'
@@ -306,7 +307,7 @@ const stateWithSideEffects = {
       if (value === 'system') {
         const systemLocaleName = (await getSystemLocale()).replace('-', '_') // ex: en_US
         const systemLocaleLang = systemLocaleName.split('_')[0] // ex: en
-        const targetLocaleOptions = i18n.allLocales.filter((locale) => { // filter out other languages
+        const targetLocaleOptions = allLocales.filter((locale) => { // filter out other languages
           const localeLang = locale.replace('-', '_').split('_')[0]
           return localeLang.includes(systemLocaleLang)
         }).sort((a, b) => {
@@ -340,7 +341,7 @@ const stateWithSideEffects = {
         }
       }
 
-      await i18n.loadLocale(targetLocale)
+      await loadLocale(targetLocale)
 
       i18n.locale = targetLocale
       await dispatch('getRegionData', {