fix(src/index.js): improve formatFallbackMessages code (#779)

kazupon · Feb 25, 2020 · 7c8f628 · 7c8f628
1 parent 8c0b4ff
commit 7c8f628
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 6 deletions.
diff --git a/src/index.js b/src/index.js
@@ -268,7 +268,7 @@ export default class VueI18n {
   _getDateTimeFormats (): DateTimeFormats { return this._vm.dateTimeFormats }
   _getNumberFormats (): NumberFormats { return this._vm.numberFormats }
 
-  _warnDefault (locale: Locale, key: Path, result: ?any, vm: ?any, values: any): ?string {
+  _warnDefault (locale: Locale, key: Path, result: ?any, vm: ?any, values: any, interpolateMode: string): ?string {
     if (!isNull(result)) { return result }
     if (this._missing) {
       const missingRet = this._missing.apply(null, [locale, key, vm, values])
@@ -286,7 +286,7 @@ export default class VueI18n {
 
     if (this._formatFallbackMessages) {
       const parsedArgs = parseArgs(...values)
-      return this._render(key, 'string', parsedArgs.params, key)
+      return this._render(key, interpolateMode, parsedArgs.params, key)
     } else {
       return key
     }
@@ -418,7 +418,8 @@ export default class VueI18n {
       }
       translated = this._warnDefault(
         locale, linkPlaceholder, translated, host,
-        Array.isArray(values) ? values : [values]
+        Array.isArray(values) ? values : [values],
+        interpolateMode
       )
 
       if (this._modifiers.hasOwnProperty(formatterName)) {
@@ -491,7 +492,7 @@ export default class VueI18n {
       if (!this._root) { throw Error('unexpected error') }
       return this._root.$t(key, ...values)
     } else {
-      return this._warnDefault(locale, key, ret, host, values)
+      return this._warnDefault(locale, key, ret, host, values, 'string')
     }
   }
 
@@ -509,7 +510,7 @@ export default class VueI18n {
       if (!this._root) { throw Error('unexpected error') }
       return this._root.$i18n.i(key, locale, values)
     } else {
-      return this._warnDefault(locale, key, ret, host, [values])
+      return this._warnDefault(locale, key, ret, host, [values], 'raw')
     }
   }
 

diff --git a/test/unit/interpolation.test.js b/test/unit/interpolation.test.js
@@ -13,7 +13,8 @@ const messages = {
     fallback: 'fallback from {0}'
   },
   ja: {
-    text: '一: {0}'
+    text: '一: {0}',
+    'I am {0}': '一: {0}'
   }
 }
 const components = {
@@ -404,6 +405,86 @@ describe('component interpolation', () => {
         }).then(done)
       })
     })
+
+    describe('formatFallbackMessages', () => {
+      let i18n
+      beforeEach(() => {
+        i18n = new VueI18n({
+          locale: 'en',
+          messages,
+          formatFallbackMessages: true
+        })
+      })
+
+      it('should be interpolated', done => {
+        const el = document.createElement('div')
+        const vm = new Vue({
+          i18n,
+          render (h) {
+            return h('i18n', { props: { path: 'I am {0}' } }, [
+              h('template', { slot: '0' }, [
+                h('a', { domProps: { href: '/term', textContent: this.$t('tos') } })
+              ])
+            ])
+          }
+        }).$mount(el)
+
+        nextTick(() => {
+          assert.strictEqual(
+            vm.$el.innerHTML,
+            'I am <a href=\"/term\">Term of service</a>'
+          )
+        }).then(done)
+      })
+
+      it('use ja message', done => {
+        i18n.locale = 'ja'
+        const el = document.createElement('div')
+        const vm = new Vue({
+          i18n,
+          render (h) {
+            return h('i18n', { props: { path: 'I am {0}' } }, [
+              h('template', { slot: '0' }, [
+                h('a', { domProps: { href: '/term', textContent: this.$t('tos') } })
+              ])
+            ])
+          }
+        }).$mount(el)
+        nextTick().then(() => {
+          assert.strictEqual(
+            vm.$el.innerHTML,
+            '一: <a href=\"/term\">tos</a>'
+          )
+        }).then(done)
+      })
+
+      it('fallbackRoot has higher priority than formatFallbackMessages', done => {
+        i18n = new VueI18n({
+          locale: 'ja',
+          messages,
+          fallbackLocale: 'en',
+          formatFallbackMessages: true,
+          fallbackRoot: true
+        })
+        const el = document.createElement('div')
+        const vm = new Vue({
+          i18n,
+          render (h) {
+            return h('i18n', { props: { path: 'I am {0}' } }, [
+              h('template', { slot: '0' }, [
+                h('a', { domProps: { href: '/term', textContent: this.$t('tos') } })
+              ])
+            ])
+          }
+        }).$mount(el)
+        nextTick().then(() => {
+          assert.strictEqual(
+            vm.$el.innerHTML,
+            '一: <a href=\"/term\">Term of service</a>'
+          )
+        }).then(done)
+      })
+    })
   })
 
   describe('warnning in render', () => {