fix: vue-i18n components scope resolving in Legacy API mode (#715)

closes #708

Author: kazupon

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

@@ -94,7 +94,8 @@ export const DatetimeFormat = /* #__PURE__*/ defineComponent({
   setup(props, context): RenderFunction {
     const i18n =
       props.i18n ||
-      (useI18n({ useScope: 'parent' }) as Composer & ComposerInternal)
+      (useI18n({ useScope: 'parent', __useComponent: true }) as Composer &
+        ComposerInternal)
 
     return renderFormatter<
       FormattableProps<number | Date, Intl.DateTimeFormatOptions>,

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

@@ -89,7 +89,8 @@ export const NumberFormat = /* #__PURE__*/ defineComponent({
   setup(props, context): RenderFunction {
     const i18n =
       props.i18n ||
-      (useI18n({ useScope: 'parent' }) as Composer & ComposerInternal)
+      (useI18n({ useScope: 'parent', __useComponent: true }) as Composer &
+        ComposerInternal)
 
     return renderFormatter<
       FormattableProps<number, Intl.NumberFormatOptions>,

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

@@ -116,8 +116,10 @@ export const Translation = /* #__PURE__*/ defineComponent({
     // NOTE: avoid https://github.com/microsoft/rushstack/issues/1050
     const i18n =
       props.i18n ||
-      (useI18n({ useScope: props.scope as 'global' | 'parent' }) as Composer &
-        ComposerInternal)
+      (useI18n({
+        useScope: props.scope as 'global' | 'parent',
+        __useComponent: true
+      }) as Composer & ComposerInternal)
     const keys = Object.keys(slots).filter(key => key !== '_')
 
     return (): VNodeChild => {

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

@@ -49,6 +49,7 @@ import {
   EnableEmitter,
   DisableEmitter,
   SetPluralRulesSymbol,
+  InejctWithOption,
   LegacyInstanceSymbol,
   __VUE_I18N_BRIDGE__
 } from './symbols'
@@ -565,6 +566,7 @@ export interface ComposerInternalOptions<
   __i18n?: CustomBlocks<VueMessageType>
   __i18nGlobal?: CustomBlocks<VueMessageType>
   __root?: Composer<Messages, DateTimeFormats, NumberFormats>
+  __injectWithOption?: boolean
 }
 
 /**
@@ -2488,6 +2490,7 @@ export function createComposer(options: any = {}, VueI18nLegacy?: any): any {
     ;(composer as any).getNumberFormat = getNumberFormat
     ;(composer as any).setNumberFormat = setNumberFormat
     ;(composer as any).mergeNumberFormat = mergeNumberFormat
+    ;(composer as any)[InejctWithOption] = options.__injectWithOption
     if (!__BRIDGE__) {
       ;(composer as any)[TransrateVNodeSymbol] = transrateVNode
       ;(composer as any)[NumberPartsSymbol] = numberParts

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

@@ -23,6 +23,7 @@ import { I18nErrorCodes, createI18nError } from './errors'
 import {
   EnableEmitter,
   DisableEmitter,
+  InejctWithOption,
   LegacyInstanceSymbol,
   __VUE_I18N_BRIDGE__
 } from './symbols'
@@ -710,7 +711,8 @@ export function useI18n<
   }
 
   if (scope === 'parent') {
-    let composer = getComposer(i18n, instance)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let composer = getComposer(i18n, instance, (options as any).__useComponent)
     if (composer == null) {
       if (__DEV__) {
         warn(getWarnMessage(I18nWarnCodes.NOT_FOUND_PARENT_SCOPE))
@@ -893,7 +895,8 @@ function adjustI18nResources(
 
 function getComposer(
   i18n: I18n,
-  target: ComponentInternalInstance
+  target: ComponentInternalInstance,
+  useComponent = false
 ): Composer | null {
   let composer: Composer | null = null
   const root = target.root
@@ -908,6 +911,10 @@ function getComposer(
         if (vueI18n != null) {
           composer = (vueI18n as VueI18n & VueI18nInternal)
             .__composer as Composer
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          if (useComponent && !(composer as any)[InejctWithOption]) {
+            composer = null
+          }
         }
       }
     }

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

@@ -1387,7 +1387,7 @@ function convertComposerOptions<
       return messages
     }, (messages || {}) as LocaleMessages<LocaleMessage<VueMessageType>>)
   }
-  const { __i18n, __root } = options
+  const { __i18n, __root, __injectWithOption } = options
 
   const datetimeFormats = options.datetimeFormats
   const numberFormats = options.numberFormats
@@ -1413,7 +1413,8 @@ function convertComposerOptions<
     messageResolver: options.messageResolver,
     inheritLocale,
     __i18n,
-    __root
+    __root,
+    __injectWithOption
   }
 }
 

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

@@ -57,6 +57,7 @@ export function defineMixin(
         if (this === this.$root) {
           this.$i18n = mergeToRoot(vuei18n, optionsI18n)
         } else {
+          optionsI18n.__injectWithOption = true
           this.$i18n = createVueI18n(optionsI18n)
         }
       } else if (options.__i18n) {
@@ -65,6 +66,7 @@ export function defineMixin(
         } else {
           this.$i18n = createVueI18n({
             __i18n: (options as ComposerInternalOptions).__i18n,
+            __injectWithOption: true,
             __root: composer
           } as VueI18nOptions)
         }

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

@@ -9,5 +9,6 @@ export const DisableEmitter = /* #__PURE__*/ makeSymbol('__disableEmitter')
 export const SetPluralRulesSymbol = makeSymbol('__setPluralRules')
 export const DevToolsMetaSymbol = makeSymbol('__intlifyMeta')
 export const LegacyInstanceSymbol = /* #__PURE__*/ makeSymbol('__legacyVueI18n')
+export const InejctWithOption = /* #__PURE__*/ makeSymbol('__injectWithOption')
 
 export const __VUE_I18N_BRIDGE__ = /* #__PURE__*/ '__VUE_I18N_BRIDGE__'

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

@@ -276,3 +276,61 @@ test('message resolver', async () => {
   expect(mockMessageResolver.mock.calls[0][0]).toEqual(en)
   expect(mockMessageResolver.mock.calls[0][1]).toEqual('message.named')
 })
+
+test('issue #708', async () => {
+  const i18n = createI18n({
+    legacy: true,
+    locale: 'en',
+    messages
+  })
+
+  const C2 = defineComponent({
+    template: `<div>C2 slot: <slot></slot></div>`
+  })
+
+  const C1 = defineComponent({
+    components: {
+      C2
+    },
+    template: `<div>
+  C1:
+  <div>{{ $t("hello", { world: $t("world") }) }}</div>
+  <i18n-t keypath="hello" tag="div">
+    <template #world>
+      <strong>{{ $t("world") }}</strong>
+    </template>
+  </i18n-t>
+
+  <br />
+
+  <C2>
+    <div>{{ $t("hello", { world: $t("world") }) }}</div>
+    <i18n-t keypath="hello" tag="div">
+      <template #world>
+        <strong>{{ $t("world") }}</strong>
+      </template>
+    </i18n-t>
+  </C2>
+</div>`,
+    i18n: {
+      messages: {
+        en: {
+          hello: 'Hello {world}',
+          world: 'world!'
+        }
+      }
+    }
+  })
+
+  const App = defineComponent({
+    components: {
+      C1
+    },
+    template: `<C1 />`
+  })
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html()).toEqual(
+    `<div> C1: <div>Hello world!</div><div>Hello <strong>world!</strong></div><br><div>C2 slot: <div>Hello world!</div><div>Hello <strong>world!</strong></div></div></div>`
+  )
+})