fix: merge global resources of i18n custom block (#806)

closes #805

Author: kazupon

packages/vue-i18n-core/src/i18n.ts

@@ -33,8 +33,8 @@ import { defineMixin as defineMixinBridge } from './mixins/bridge'
 import { enableDevTools, addTimelineEvent } from './devtools'
 import {
   isLegacyVueI18n,
-  getLocaleMessages,
-  getComponentOptions
+  getComponentOptions,
+  adjustI18nResources
 } from './utils'
 
 import type { ComponentInternalInstance, App } from 'vue'
@@ -867,47 +867,6 @@ function getGlobalComposer(i18n: I18n): Composer {
     : (i18n.global as unknown as Composer)
 }
 
-function adjustI18nResources(
-  global: Composer,
-  options: UseI18nOptions,
-  componentOptions: any // eslint-disable-line @typescript-eslint/no-explicit-any
-): void {
-  let messages = isObject(options.messages) ? options.messages : {}
-  if ('__i18nGlobal' in componentOptions) {
-    messages = getLocaleMessages(global.locale.value as Locale, {
-      messages,
-      __i18n: componentOptions.__i18nGlobal
-    })
-  }
-  // merge locale messages
-  const locales = Object.keys(messages)
-  if (locales.length) {
-    locales.forEach(locale => {
-      global.mergeLocaleMessage(locale, messages[locale])
-    })
-  }
-  if (!__LITE__) {
-    // merge datetime formats
-    if (isObject(options.datetimeFormats)) {
-      const locales = Object.keys(options.datetimeFormats)
-      if (locales.length) {
-        locales.forEach(locale => {
-          global.mergeDateTimeFormat(locale, options.datetimeFormats![locale])
-        })
-      }
-    }
-    // merge number formats
-    if (isObject(options.numberFormats)) {
-      const locales = Object.keys(options.numberFormats)
-      if (locales.length) {
-        locales.forEach(locale => {
-          global.mergeNumberFormat(locale, options.numberFormats![locale])
-        })
-      }
-    }
-  }
-}
-
 function getComposer(
   i18n: I18n,
   target: ComponentInternalInstance,

packages/vue-i18n-core/src/mixins/next.ts

@@ -3,7 +3,7 @@ import { createVueI18n } from '../legacy'
 import { createI18nError, I18nErrorCodes } from '../errors'
 import { SetPluralRulesSymbol } from '../symbols'
 import { addTimelineEvent } from '../devtools'
-import { getLocaleMessages } from '../utils'
+import { getLocaleMessages, adjustI18nResources } from '../utils'
 import { createEmitter } from '@intlify/shared'
 
 import type { ComponentOptions } from 'vue'
@@ -16,6 +16,7 @@ import type {
 import type {
   Composer,
   ComposerInternalOptions,
+  ComposerOptions,
   VueMessageType
 } from '../composer'
 import type {
@@ -75,6 +76,10 @@ export function defineMixin(
         this.$i18n = vuei18n
       }
 
+      if (options.__i18nGlobal) {
+        adjustI18nResources(composer, options as ComposerOptions, options)
+      }
+
       ;(vuei18n as unknown as VueI18nInternal).__onComponentInstanceCreated(
         this.$i18n
       )

packages/vue-i18n-core/src/utils.ts

@@ -9,7 +9,12 @@ import {
 import { I18nErrorCodes, createI18nError } from './errors'
 
 import type { Locale, MessageResolver } from '@intlify/core-base'
-import type { CustomBlocks, VueMessageType } from './composer'
+import type {
+  Composer,
+  ComposerOptions,
+  CustomBlocks,
+  VueMessageType
+} from './composer'
 import type { ComponentInternalInstance } from 'vue'
 
 type GetLocaleMessagesOptions<Messages = {}> = {
@@ -144,4 +149,44 @@ export function getComponentOptions(instance: ComponentInternalInstance): any {
   return !__BRIDGE__ ? instance.type : instance.proxy!.$options
 }
 
+export function adjustI18nResources(
+  global: Composer,
+  options: ComposerOptions,
+  componentOptions: any // eslint-disable-line @typescript-eslint/no-explicit-any
+): void {
+  let messages = isObject(options.messages) ? options.messages : {}
+  if ('__i18nGlobal' in componentOptions) {
+    messages = getLocaleMessages(global.locale.value as Locale, {
+      messages,
+      __i18n: componentOptions.__i18nGlobal
+    })
+  }
+  // merge locale messages
+  const locales = Object.keys(messages)
+  if (locales.length) {
+    locales.forEach(locale => {
+      global.mergeLocaleMessage(locale, messages[locale])
+    })
+  }
+  if (!__LITE__) {
+    // merge datetime formats
+    if (isObject(options.datetimeFormats)) {
+      const locales = Object.keys(options.datetimeFormats)
+      if (locales.length) {
+        locales.forEach(locale => {
+          global.mergeDateTimeFormat(locale, options.datetimeFormats![locale])
+        })
+      }
+    }
+    // merge number formats
+    if (isObject(options.numberFormats)) {
+      const locales = Object.keys(options.numberFormats)
+      if (locales.length) {
+        locales.forEach(locale => {
+          global.mergeNumberFormat(locale, options.numberFormats![locale])
+        })
+      }
+    }
+  }
+}
 /* eslint-enable @typescript-eslint/no-explicit-any */

packages/vue-i18n-core/test/i18n.test.ts

@@ -718,25 +718,81 @@ test('merge useI18n resources to global scope', async () => {
   })
 })
 
-test('merge i18n custom blocks to global scope', async () => {
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'ja',
-    messages: {
-      en: {
-        hi: { hello: 'hello!' }
+describe('merge i18n custom blocks to global scope', () => {
+  test('composition mode', async () => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'ja',
+      messages: {
+        en: {
+          hi: { hello: 'hello!' }
+        }
       }
-    }
+    })
+
+    const App = defineComponent({
+      setup() {
+        const instance = getCurrentInstance()
+        if (instance == null) {
+          throw new Error()
+        }
+        const options = instance.type as ComponentOptions
+        options.__i18nGlobal = [
+          {
+            locale: 'en',
+            resource: {
+              hi: { hi: 'hi!' },
+              foo: 'foo!'
+            }
+          },
+          {
+            locale: 'ja',
+            resource: { foo: 'ふー！' }
+          }
+        ]
+        useI18n({
+          useScope: 'global',
+          messages: {
+            ja: {
+              hello: 'こんにちは！'
+            }
+          }
+        })
+        return {}
+      },
+      template: `<p>foo</p>`
+    })
+    await mount(App, i18n)
+
+    expect(i18n.global.getLocaleMessage('en')).toEqual({
+      hi: {
+        hi: 'hi!',
+        hello: 'hello!'
+      },
+      foo: 'foo!'
+    })
+    expect(i18n.global.getLocaleMessage('ja')).toEqual({
+      hello: 'こんにちは！',
+      foo: 'ふー！'
+    })
   })
 
-  const App = defineComponent({
-    setup() {
-      const instance = getCurrentInstance()
-      if (instance == null) {
-        throw new Error()
+  test('legacy mode', async () => {
+    const i18n = createI18n({
+      legacy: true,
+      locale: 'ja',
+      messages: {
+        en: {
+          hi: { hello: 'hello!' }
+        },
+        ja: {
+          hello: 'こんにちは！'
+        }
       }
-      const options = instance.type as ComponentOptions
-      options.__i18nGlobal = [
+    })
+
+    const App = defineComponent({
+      __i18nGlobal: [
         {
           locale: 'en',
           resource: {
@@ -748,31 +804,22 @@ test('merge i18n custom blocks to global scope', async () => {
           locale: 'ja',
           resource: { foo: 'ふー！' }
         }
-      ]
-      useI18n({
-        useScope: 'global',
-        messages: {
-          ja: {
-            hello: 'こんにちは！'
-          }
-        }
-      })
-      return {}
-    },
-    template: `<p>foo</p>`
-  })
-  await mount(App, i18n)
+      ],
+      template: `<p>foo</p>`
+    })
+    await mount(App, i18n)
 
-  expect(i18n.global.getLocaleMessage('en')).toEqual({
-    hi: {
-      hi: 'hi!',
-      hello: 'hello!'
-    },
-    foo: 'foo!'
-  })
-  expect(i18n.global.getLocaleMessage('ja')).toEqual({
-    hello: 'こんにちは！',
-    foo: 'ふー！'
+    expect(i18n.global.getLocaleMessage('en')).toEqual({
+      hi: {
+        hi: 'hi!',
+        hello: 'hello!'
+      },
+      foo: 'foo!'
+    })
+    expect(i18n.global.getLocaleMessage('ja')).toEqual({
+      hello: 'こんにちは！',
+      foo: 'ふー！'
+    })
   })
 })