Update mixin.js (#995)

* Update mixin.js This issue fixes a bug that happens when a SFC has a <i18n> block aswell as a i18n configuration in the Vue Component options. Previously, the i18n configuration from the Vue Component options would be overridden by the <i18n> block; Using this new behaviour, the <i18n> block and the i18n configuration from the Vue Component options are merged. This also helps to provide mixin support, since now a consumer of this library can have a SFC as a parent component, which uses a Vue mixin, and using a custom vue optionMergeStrategy, full mixin support can be achieved from consumer side. * Fix #996 for plain objects aswell * Implement test * Fix test for #996 Co-authored-by: kazuya kawaguchi <[email protected]>
kazupon · Sep 11, 2020 · 2b7eab7 · 2b7eab7
1 parent b4b0567
commit 2b7eab7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/mixin.js b/src/mixin.js
@@ -13,7 +13,7 @@ export default {
         // init locale messages via custom blocks
         if (options.__i18n) {
           try {
-            let localeMessages = {}
+            let localeMessages = options.i18n && options.i18n.messages ? options.i18n.messages : {}
             options.__i18n.forEach(resource => {
               localeMessages = merge(localeMessages, JSON.parse(resource))
             })
@@ -47,7 +47,7 @@ export default {
         // init locale messages via custom blocks
         if (options.__i18n) {
           try {
-            let localeMessages = {}
+            let localeMessages = options.i18n && options.i18n.messages ? options.i18n.messages : {}
             options.__i18n.forEach(resource => {
               localeMessages = merge(localeMessages, JSON.parse(resource))
             })

diff --git a/test/unit/issues.test.js b/test/unit/issues.test.js
@@ -770,4 +770,24 @@ describe('issues', () => {
       assert.strictEqual(componentInstanceCreatedListener.args[0][1], i18n)
     })
   })
+
+  describe('#996', () => {
+    it('should merge __i18n and i18n', done => {
+      const Component = Vue.extend({
+        __i18n: [JSON.stringify({ en: { custom: 'custom block!' } })],
+        render (h) {
+          return h('p')
+        }
+      })
+      const vm = new Component({
+        i18n: new VueI18n({ locale: 'en', messages: { en: { another: 'another block!' } } })
+      }).$mount()
+
+      Vue.nextTick().then(() => {
+        assert.strictEqual(vm.$t('another'), 'another block!')
+        assert.strictEqual(vm.$t('custom'), 'custom block!')
+      }).then(done)
+        .catch(console.error)
+    })
+  })
 })