feat: Add fallbackLang option (#38)

xiCO2k · web-flow · commit 4483c1f0435b · 2022-07-06T15:49:25.000+01:00
* feat: Add `fallbackLang` option.

* docs: Add `fallbackLang` to the documentation.

* style: fixes.
diff --git a/README.md b/README.md
@@ -147,7 +147,8 @@ mix.i18n();
 
 ### Plugin Options
 
-- `lang` *(optional)*: if not provided it will try to find from the `<html lang="pt">` tag, if is not available it will default to `en`.
+- `lang` *(optional)*: If not provided it will try to find from the `<html lang="pt">` tag.
+- `fallbackLang` *(optional): If the `lang` was not provided or is invalid, it will try reach for this `fallbackLang` instead, default is: `en`.
 - `resolve` *(required)*: The way to reach your language files.
 
 ```js
diff --git a/src/index.ts b/src/index.ts
@@ -12,7 +12,8 @@ const isServer = typeof window === 'undefined'
  * The default options, for the plugin.
  */
 const DEFAULT_OPTIONS: OptionsInterface = {
-  lang: !isServer && document.documentElement.lang ? document.documentElement.lang.replace('-', '_') : 'en',
+  lang: !isServer && document.documentElement.lang ? document.documentElement.lang.replace('-', '_') : null,
+  fallbackLang: 'en',
   resolve: (lang: string) => new Promise((resolve) => resolve({ default: {} }))
 }
 
@@ -36,24 +37,33 @@ const activeMessages: object = reactive({})
  */
 export function isLoaded(lang?: string): boolean {
   lang ??= getActiveLanguage()
-  lang = lang.replace('-', '_')
 
-  return loaded.some((row) => row.lang === lang)
+  return loaded.some((row) => row.lang.replace(/[-_]/g, '-') === lang.replace(/[-_]/g, '-'))
 }
 
 /**
  * Loads the language file.
  */
-export function loadLanguageAsync(lang: string): Promise<string | void> {
-  lang = lang.replace('-', '_')
-
+export function loadLanguageAsync(lang: string, dashLangTry = false): Promise<string | void> {
   const loadedLang: LanguageInterface = loaded.find((row) => row.lang === lang)
 
   if (loadedLang) {
     return Promise.resolve(setLanguage(loadedLang))
   }
 
   return resolveLang(options.resolve, lang).then(({ default: messages }) => {
+    if (Object.keys(messages).length < 1) {
+      if (/[-_]/g.test(lang) && !dashLangTry) {
+        return loadLanguageAsync(
+          lang.replace(/[-_]/g, (char) => (char === '-' ? '_' : '-')),
+          true
+        )
+      }
+      if (lang !== options.fallbackLang) {
+        return loadLanguageAsync(options.fallbackLang)
+      }
+    }
+
     const data: LanguageInterface = { lang, messages }
     loaded.push(data)
     return setLanguage(data)
@@ -104,7 +114,7 @@ export function wTransChoice(
  * Returns the current active language.
  */
 export function getActiveLanguage(): string {
-  return options.lang
+  return options.lang || options.fallbackLang
 }
 
 /**
@@ -225,6 +235,6 @@ export const i18nVue: Plugin = {
     app.config.globalProperties.$t = (key: string, replacements: ReplacementsInterface) => trans(key, replacements)
     app.config.globalProperties.$tChoice = (key: string, number: number, replacements: ReplacementsInterface) =>
       transChoice(key, number, replacements)
-    loadLanguageAsync(options.lang)
+    loadLanguageAsync(options.lang || options.fallbackLang)
   }
 }
diff --git a/src/interfaces/options.ts b/src/interfaces/options.ts
@@ -5,5 +5,6 @@ import { LanguageJsonFileInterface } from './language-json-file'
  */
 export interface OptionsInterface {
   lang?: string
+  fallbackLang?: string
   resolve?(lang: string): Promise<LanguageJsonFileInterface>
 }
diff --git a/test/setup.ts b/test/setup.ts
@@ -2,11 +2,12 @@ import { mount } from '@vue/test-utils'
 import { i18nVue } from '../src'
 import { parseAll } from '../src/loader'
 
-global.mountPlugin = async (template = '<div />', lang = 'pt') => {
+global.mountPlugin = async (template = '<div />', lang = 'pt', fallbackLang = 'pt') => {
   const wrapper = mount({ template }, {
     global: {
       plugins: [[i18nVue, {
         lang,
+        fallbackLang,
         resolve: lang => import(`./fixtures/lang/${lang}.json`),
       }]]
     }
@@ -17,11 +18,12 @@ global.mountPlugin = async (template = '<div />', lang = 'pt') => {
   return wrapper;
 }
 
-global.mountPluginWithRequire = async (template = '<div />', lang = 'pt') => {
+global.mountPluginWithRequire = async (template = '<div />', lang = 'pt', fallbackLang = 'pt') => {
   const wrapper = mount({ template }, {
     global: {
       plugins: [[i18nVue, {
         lang,
+        fallbackLang,
         resolve: (lang) => require(`./fixtures/lang/${lang}.json`),
       }]]
     }
diff --git a/test/translate.test.ts b/test/translate.test.ts
@@ -36,6 +36,17 @@ it('returns the same string given if it is not found on the lang file', async ()
   expect(wrapper.html()).toBe('<h1>This has no translation</h1>')
 })
 
+it('fallback to the `fallbackLang` if the `lang` was not provided', async () => {
+  await global.mountPlugin(`<div />`, null, 'pt');
+  expect(trans('Welcome!')).toBe('Bem-vindo!');
+})
+
+it('fallback to the `fallbackLang` if the `lang` was not found', async () => {
+  await global.mountPlugin(`<div />`, 'ch', 'pt');
+
+  expect(trans('Welcome!')).toBe('Bem-vindo!');
+});
+
 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');

Original file line number	Diff line number	Diff line change
`@@ -5,5 +5,6 @@ import { LanguageJsonFileInterface } from './language-json-file'`
`5`	`5`	`*/`
`6`	`6`	`export interface OptionsInterface {`
`7`	`7`	`lang?: string`
	`8`	`+ fallbackLang?: string`
`8`	`9`	`resolve?(lang: string): Promise<LanguageJsonFileInterface>`
`9`	`10`	`}`