feat: add a new option fallbackRootWithEmptyString

decls/i18n.js

@@ -89,6 +89,7 @@ declare type I18nOptions = {
   modifiers?: Modifiers,
   root?: I18n, // for internal
   fallbackRoot?: boolean,
+  fallbackRootWithEmptyString?: boolean,
   formatFallbackMessages?: boolean,
   sync?: boolean,
   silentTranslationWarn?: boolean | RegExp,

src/index.js

@@ -48,6 +48,7 @@ export default class VueI18n {
   _root: any
   _sync: boolean
   _fallbackRoot: boolean
+  _fallbackRootWithEmptyString: boolean
   _localeChainCache: { [key: string]: Array<Locale>; }
   _missing: ?MissingHandler
   _exist: Function
@@ -95,6 +96,9 @@ export default class VueI18n {
     this._fallbackRoot = options.fallbackRoot === undefined
       ? true
       : !!options.fallbackRoot
+    this._fallbackRootWithEmptyString = options.fallbackRootWithEmptyString === undefined
+      ? true
+      : !!options.fallbackRootWithEmptyString
     this._formatFallbackMessages = options.formatFallbackMessages === undefined
       ? false
       : !!options.formatFallbackMessages
@@ -379,7 +383,7 @@ export default class VueI18n {
   }
 
   _isFallbackRoot (val: any): boolean {
-    return !val && !isNull(this._root) && this._fallbackRoot
+    return (this._fallbackRootWithEmptyString? !val : isNull(val)) && !isNull(this._root) && this._fallbackRoot
   }
 
   _isSilentFallbackWarn (key: Path): boolean {
@@ -461,7 +465,7 @@ export default class VueI18n {
     // We are going to replace each of
     // them with its translation
     const matches: any = ret.match(linkKeyMatcher)
-    
+
     // eslint-disable-next-line no-autofix/prefer-const
     for (let idx in matches) {
       // ie compatible: filter custom array

test/unit/component.test.js

@@ -137,4 +137,131 @@ describe('component translation', () => {
       vm.$destroy()
     }).then(done)
   })
+
+  it('fallbackRootWithEmptyString default to be true', done => {
+    const el = document.createElement('div')
+    let vm = new Vue({
+      i18n,
+      components: {
+        child: { // translation with component
+          i18n: {
+            locale: 'en-US',
+            sync: false,
+            messages: {
+              'en-US': {
+                who: 'child'
+              },
+              'ja-JP': {
+                who: '子',
+              }
+            },
+          },
+          components: {
+            'sub-child': { // translation with root
+              i18n: {
+                locale: 'ja-JP',
+                sync: false,
+                messages: {
+                  'en-US': {
+                    who: 'sub-child'
+                  },
+                  'ja-JP': {
+                    who: ''
+                  }
+                },
+                sharedMessages: { // shared messages for child1 component
+                  'en-US': { foo: { bar: 'bar' } },
+                  'ja-JP': { foo: { bar: 'バー' } }
+                }
+              },
+              render (h) {
+                return h('div', {}, [
+                  h('p', { ref: 'who' }, [this.$t('who')])
+                ])
+              }
+            }
+          },
+          render (h) {
+            return h('div', {}, [
+              h('p', { ref: 'who' }, [this.$t('who')]),
+              h('sub-child', { ref: 'sub-child' })
+            ])
+          }
+        },
+      },
+      render (h) {
+        return h('div', {}, [
+          h('p', { ref: 'who' }, [this.$t('who')]),
+          h('child', { ref: 'child' }),
+        ])
+      }
+    }).$mount(el)
+    Vue.nextTick().then(() => {
+      assert.strictEqual(vm.$refs.child.$refs['sub-child'].$refs.who.textContent, 'ルート')
+    }).then(done)
+  })
+
+  it('fallbackRootWithEmptyString should work when set to false', done => {
+    const el = document.createElement('div')
+    let vm = new Vue({
+      i18n,
+      components: {
+        child: { // translation with component
+          i18n: {
+            locale: 'en-US',
+            sync: false,
+            messages: {
+              'en-US': {
+                who: 'child'
+              },
+              'ja-JP': {
+                who: '子',
+              }
+            },
+          },
+          components: {
+            'sub-child': { // translation with root
+              i18n: {
+                locale: 'ja-JP',
+                sync: false,
+                fallbackRootWithEmptyString: false,
+                messages: {
+                  'en-US': {
+                    who: 'sub-child'
+                  },
+                  'ja-JP': {
+                    who: ''
+                  }
+                },
+                sharedMessages: { // shared messages for child1 component
+                  'en-US': { foo: { bar: 'bar' } },
+                  'ja-JP': { foo: { bar: 'バー' } }
+                }
+              },
+              render (h) {
+                return h('div', {}, [
+                  h('p', { ref: 'who' }, [this.$t('who')])
+                ])
+              }
+            }
+          },
+          render (h) {
+            return h('div', {}, [
+              h('p', { ref: 'who' }, [this.$t('who')]),
+              h('sub-child', { ref: 'sub-child' })
+            ])
+          }
+        },
+      },
+      render (h) {
+        return h('div', {}, [
+          h('p', { ref: 'who' }, [this.$t('who')]),
+          h('child', { ref: 'child' }),
+        ])
+      }
+    }).$mount(el)
+    Vue.nextTick().then(() => {
+      assert.strictEqual(vm.$refs.child.$refs['sub-child'].$refs.who.textContent, '')
+    }).then(done)
+  })
 })