Fix fallback locale (#103)

* complete fallback locale

* refactor + fallbackMissingTranslations option

* refactor and update tests

Author: lenssoft

src/index.ts

@@ -21,6 +21,7 @@ let sharedInstance: I18n = null
 const DEFAULT_OPTIONS: OptionsInterface = {
   lang: !isServer && document.documentElement.lang ? document.documentElement.lang.replace('-', '_') : null,
   fallbackLang: 'en',
+  fallbackMissingTranslations: false,
   resolve: (lang: string) => new Promise((resolve) => resolve({ default: {} })),
   onLoad: (lang: string) => {}
 }
@@ -129,6 +130,9 @@ export class I18n {
   // Stores messages for the currently active language
   private activeMessages: object = reactive({})
 
+  // Stores messages for fallback language
+  private fallbackMessages: object = reactive({})
+
   // Stores the abort controller for the load promises.
   private abortController: AbortController
 
@@ -137,8 +141,11 @@ export class I18n {
    */
   constructor(options: OptionsInterface = {}) {
     this.options = { ...DEFAULT_OPTIONS, ...options }
-
-    this.load()
+    if (this.options.fallbackMissingTranslations) {
+      this.loadFallbackLanguage()
+    } else {
+      this.load()
+    }
   }
 
   /**
@@ -161,6 +168,32 @@ export class I18n {
     this[isServer ? 'loadLanguage' : 'loadLanguageAsync'](this.getActiveLanguage())
   }
 
+  /**
+   * Load fallback language
+   */
+  loadFallbackLanguage(): void {
+    if (!isServer) {
+      this.resolveLangAsync(this.options.resolve, this.options.fallbackLang).then(({ default: messages }) => {
+        for (const [key, value] of Object.entries(messages)) {
+          this.fallbackMessages[key] = value
+        }
+        const lang = this.options.fallbackLang
+        const data: LanguageInterface = { lang, messages }
+        I18n.loaded.push(data)
+        this.load()
+      })
+    } else {
+      const { default: messages } = this.resolveLang(this.options.resolve, this.options.fallbackLang)
+      for (const [key, value] of Object.entries(messages)) {
+        this.fallbackMessages[key] = value
+      }
+      const lang = this.options.fallbackLang
+      const data: LanguageInterface = { lang, messages }
+      I18n.loaded.push(data)
+      this.loadLanguage(this.getActiveLanguage())
+    }
+  }
+
   /**
    * Loads the language async.
    */
@@ -300,8 +333,14 @@ export class I18n {
       this.activeMessages[key] = value
     }
 
+    for (const [key, value] of Object.entries(this.fallbackMessages)) {
+      if (!this.activeMessages[key] || this.activeMessages[key] === key) {
+        this.activeMessages[key] = value
+      }
+    }
+
     for (const [key] of Object.entries(this.activeMessages)) {
-      if (!messages[key]) {
+      if (!messages[key] && !this.fallbackMessages[key]) {
         this.activeMessages[key] = null
       }
     }

src/interfaces/options.ts

@@ -6,6 +6,7 @@ import { LanguageJsonFileInterface } from './language-json-file'
 export interface OptionsInterface {
   lang?: string
   fallbackLang?: string
+  fallbackMissingTranslations?: boolean
   resolve?(lang: string): Promise<LanguageJsonFileInterface>
   onLoad?: (lang: string) => void
 }

test/class.test.ts

@@ -84,3 +84,21 @@ it('calls onLoad when loaded', async () => {
     expect(onLoadFunction).toHaveBeenCalledWith('en')
     expect(onLoadFunction).toHaveBeenCalledWith('pt')
 })
+
+it('can override missing translations with fallback language translations', async () => {
+    const onLoadFunction = jest.fn()
+    const i18n = new I18n({
+        fallbackLang: 'en',
+        fallbackMissingTranslations: true,
+        resolve: lang => import(`./fixtures/lang/${lang}.json`),
+        onLoad: onLoadFunction
+    })
+    await i18n.loadLanguageAsync('pt')
+
+    expect(onLoadFunction).toHaveBeenCalledTimes(1)
+
+    expect(i18n.getActiveLanguage()).toBe('pt')
+    expect(i18n.trans('Welcome!')).toBe('Bem-vindo!')
+
+    expect(i18n.trans('English only.')).toBe('English only.')
+})

test/fixtures/lang/en.json

@@ -4,5 +4,6 @@
     "Only Available on EN": "Only Available on EN",
     "{1} :count minute ago|[2,*] :count minutes ago": "{1} :count minute ago|[2,*] :count minutes ago",
     "Start/end": "Start/End",
-    "Get started.": "Get started."
+    "Get started.": "Get started.",
+    "English only.": "English only."
 }

test/setup.ts

@@ -2,12 +2,13 @@ import { mount } from '@vue/test-utils'
 import { i18nVue } from '../src'
 import { parseAll } from '../src/loader'
 
-global.mountPlugin = async (template = '<div />', lang = 'pt', fallbackLang = 'pt') => {
+global.mountPlugin = async (template = '<div />', lang = 'pt', fallbackLang = 'pt', fallbackMissingTranslations = false) => {
   const wrapper = mount({ template }, {
     global: {
       plugins: [[i18nVue, {
         lang,
         fallbackLang,
+        fallbackMissingTranslations,
         resolve: lang => import(`./fixtures/lang/${lang}.json`),
       }]]
     }

test/translate.test.ts

@@ -47,6 +47,13 @@ it('fallback to the `fallbackLang` if the `lang` was not found', async () => {
   expect(trans('Welcome!')).toBe('Bem-vindo!');
 });
 
+it('fallback individual translation entries to the `fallbackLang` if translation was not found in the active language', async () => {
+  await global.mountPlugin(`<div />`, 'pt', 'en', 'true');
+
+  expect(trans('Welcome!')).toBe('Bem-vindo!');
+  expect(trans('English only.')).toBe('English only.');
+});
+
 it('returns the given key if the key is not available on the lang', async () => {
   await global.mountPlugin(`<div />`, 'en');
   expect(trans('Only Available on EN')).toBe('Only Available on EN');