⭐ new(fallback): add fallback translation feature

Closes #36
kazupon · Aug 12, 2016 · 1d1f0f2 · 1d1f0f2
1 parent 7ba0a99
commit 1d1f0f2
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 34 deletions.
diff --git a/src/config.js b/src/config.js
@@ -1,6 +1,8 @@
 import { getWatcher, getDep } from './observer'
 
-export default function (Vue, langVM) {
+let fallback // fallback lang
+
+export default function (Vue, langVM, lang) {
   const { bind } = Vue.util
   const Watcher = getWatcher(langVM)
   const Dep = getDep(langVM)
@@ -28,4 +30,13 @@ export default function (Vue, langVM) {
     get: makeComputedGetter(() => { return langVM.lang }, langVM),
     set: bind(val => { langVM.lang = val }, langVM)
   })
+
+  // define Vue.config.fallbackLang configration
+  fallback = lang
+  Object.defineProperty(Vue.config, 'fallbackLang', {
+    enumerable: true,
+    configurable: true,
+    get: () => { return fallback },
+    set: val => { fallback = val }
+  })
 }
diff --git a/src/extend.js b/src/extend.js
@@ -17,6 +17,8 @@ export default function (Vue) {
 
   function parseArgs (...args) {
     let lang = Vue.config.lang
+    let fallback = Vue.config.fallbackLang
+
     if (args.length === 1) {
       if (isObject(args[0]) || Array.isArray(args[0])) {
         args = args[0]
@@ -32,7 +34,7 @@ export default function (Vue) {
       }
     }
 
-    return { lang, params: args }
+    return { lang, fallback, params: args }
   }
 
   function translate (locale, key, args) {
@@ -64,8 +66,10 @@ export default function (Vue) {
   Vue.t = (key, ...args) => {
     if (!key) { return '' }
 
-    const { lang, params } = parseArgs(...args)
-    return translate(Vue.locale(lang), key, params) || warnDefault(key)
+    const { lang, fallback, params } = parseArgs(...args)
+    return translate(Vue.locale(lang), key, params) 
+      || translate(Vue.locale(fallback), key, params) 
+      || warnDefault(key)
   }
 
 
@@ -80,9 +84,11 @@ export default function (Vue) {
   Vue.prototype.$t = function (key, ...args) {
     if (!key) { return '' }
 
-    const { lang, params } = parseArgs(...args)
+    const { lang, fallback, params } = parseArgs(...args)
     return translate(this.$options.locales && this.$options.locales[lang], key, params) 
+      || translate(this.$options.locales && this.$options.locales[fallback], key, params) 
       || translate(Vue.locale(lang), key, params)
+      || translate(Vue.locale(fallback), key, params)
       || warnDefault(key)
   }
 

diff --git a/src/index.js b/src/index.js
@@ -32,11 +32,9 @@ function plugin (Vue, opts = {}) {
   const lang = 'en'
 
   setupLangVM(Vue, lang)
-
   Asset(Vue)
-
   Override(Vue, langVM)
-  Config(Vue, langVM)
+  Config(Vue, langVM, lang)
   Extend(Vue)
 }
 

diff --git a/test/specs/component.js b/test/specs/component.js
@@ -24,7 +24,10 @@ describe('component locales', () => {
             bar: {
               buz: 'hello world'
             }
-          }
+          },
+          fallback: 'this is fallback on component'
+        },
+        ja: {
         }
       }
     }
@@ -67,4 +70,11 @@ describe('component locales', () => {
       assert.equal(comp1.$t('message.hello'), 'the world')
     })
   })
+
+  describe('fallback', () => {
+    it('should be work', () => {
+      const comp1 = vm.$children[0] // component1
+      assert.equal(comp1.$t('fallback', 'ja'), 'this is fallback on component')
+    })
+  })
 })
diff --git a/test/specs/fixture/locales.js b/test/specs/fixture/locales.js
@@ -6,7 +6,8 @@ export default {
       format: {
         named: 'Hello {name}, how are you?',
         list: 'Hello {0}, how are you?'
-      }
+      },
+      fallback: 'this is fallback'
     },
     'hello world': 'Hello World',
     'Hello {0}': 'Hello {0}',
@@ -20,7 +21,8 @@ export default {
       format: {
         named: 'こんにちは {name}, ごきげんいかが？',
         list: 'こんにちは {0}, ごきげんいかが？'
-      }
+      },
+      fallback1: 'これはフォールバック'
     }
   }
 }
diff --git a/test/specs/i18n.js b/test/specs/i18n.js
@@ -98,6 +98,15 @@ describe('i18n', () => {
         )
       })
     })
+
+    describe('fallback', () => {
+      it('should return fallback string', () => {
+        assert.equal(
+          Vue.t('message.fallback', 'ja'),
+          locales.en.message.fallback
+        )
+      })
+    })
   })
 
 
@@ -197,6 +206,16 @@ describe('i18n', () => {
         )
       })
     })
+
+    describe('fallback', () => {
+      it('should return fallback string', () => {
+        const vm = new Vue()
+        assert.equal(
+          vm.$t('message.fallback', 'ja'),
+          locales.en.message.fallback
+        )
+      })
+    })
   })
 
 
@@ -282,36 +301,62 @@ describe('i18n', () => {
   })
 
 
-  describe('global lang config', () => {
-    let vm
-    beforeEach(done => {
-      vm = new Vue()
-      vm.$nextTick(done)
-    })
-
-    afterEach(done => {
-      vm.$destroy()
-      vm = null
-      Vue.nextTick(done)
-    })
+  describe('extend Vue.config', () => {
+    describe('lang', () => {
+      let vm
+      beforeEach(done => {
+        vm = new Vue()
+        vm.$nextTick(done)
+      })
 
-    context('ja', () => {
-      it('should translate with japanese', done => {
-        Vue.config.lang = 'ja'
-        Vue.nextTick(() => {
-          assert.equal(vm.$t('message.hello'), locales.ja.message.hello)
-          done()
-        })
+      afterEach(done => {
+        vm.$destroy()
+        vm = null
+        Vue.nextTick(done)
       })
 
-      context('en', () => {
-        it('should translate with english', done => {
-          Vue.config.lang = 'en'
+      context('ja', () => {
+        it('should translate with japanese', done => {
+          Vue.config.lang = 'ja'
           Vue.nextTick(() => {
-            assert.equal(vm.$t('message.hello'), locales.en.message.hello)
+            assert.equal(vm.$t('message.hello'), locales.ja.message.hello)
             done()
           })
         })
+
+        context('en', () => {
+          it('should translate with english', done => {
+            Vue.config.lang = 'en'
+            Vue.nextTick(() => {
+              assert.equal(vm.$t('message.hello'), locales.en.message.hello)
+              done()
+            })
+          })
+        })
+      })
+    })
+
+    describe('fallbackLang', () => {
+      let orgLang, orgFallbackLang
+      beforeEach(done => {
+        orgLang = Vue.config.lang
+        orgFallbackLang = Vue.config.fallbackLang
+        Vue.nextTick(done)
+      })
+
+      afterEach(done => {
+        Vue.config.fallbackLang = orgFallbackLang
+        Vue.config.lang = orgLang
+        Vue.nextTick(done)
+      })
+
+      it('should be changed', done => {
+        Vue.config.lang = 'ja'
+        Vue.nextTick(() => {
+          Vue.config.fallbackLang = 'ja'
+          assert.equal(Vue.t('message.fallback1'), locales.ja.message.fallback1)
+          done()
+        })
       })
     })
   })