fix: linked message fallbacking (#945)

Author: kazupon

packages/core-base/src/context.ts

@@ -169,6 +169,7 @@ export interface CoreOptions<
   messageCompiler?: MessageCompiler<Message>
   messageResolver?: MessageResolver
   localeFallbacker?: LocaleFallbacker
+  fallbackContext?: CoreContext<Message, MessagesLocales, DateTimeFormatsLocales, NumberFormatsLocales>
   onWarn?: (msg: string, err?: Error) => void
 }
 
@@ -228,7 +229,16 @@ export type CoreContext<
 > = CoreCommonContext<Message, Locales> &
   CoreTranslationContext<NonNullable<Messages>, Message> &
   CoreDateTimeContext<NonNullable<DateTimeFormats>> &
-  CoreNumberContext<NonNullable<NumberFormats>>
+  CoreNumberContext<NonNullable<NumberFormats>> & {
+    fallbackContext?: CoreContext<
+      Message,
+      Messages,
+      DateTimeFormats,
+      NumberFormats,
+      ResourceLocales,
+      Locales
+    >
+  }
 
 export interface CoreInternalContext {
   __datetimeFormatters: Map<string, Intl.DateTimeFormat>
@@ -312,6 +322,14 @@ export const setAdditionalMeta = /* #__PURE__*/ (
 export const getAdditionalMeta = /* #__PURE__*/ (): MetaInfo | null =>
   _additionalMeta
 
+let _fallbackContext: CoreContext | null = null
+
+export const setFallbackContext = (context: CoreContext | null): void => {
+  _fallbackContext = context
+}
+
+export const getFallbackContext = (): CoreContext | null => _fallbackContext
+
 // ID for CoreContext
 let _cid = 0
 
@@ -411,6 +429,9 @@ export function createCoreContext<Message = string>(options: any = {}): any {
   const localeFallbacker = isFunction(options.localeFallbacker)
     ? options.localeFallbacker
     : _fallbacker || fallbackWithSimple
+  const fallbackContext = isObject(options.fallbackContext)
+    ? options.fallbackContext
+    : undefined
   const onWarn = isFunction(options.onWarn) ? options.onWarn : warn
 
   // setup internal options
@@ -449,6 +470,7 @@ export function createCoreContext<Message = string>(options: any = {}): any {
     messageCompiler,
     messageResolver,
     localeFallbacker,
+    fallbackContext,
     onWarn,
     __meta
   }

packages/core-base/src/runtime.ts

@@ -178,7 +178,6 @@ export function createMessageContext<T = string, N = {}>(
   isNumber(options.pluralIndex) && normalizeNamed(pluralIndex, _named)
   const named = (key: string): unknown => _named[key]
 
-  // TODO: need to design resolve message function?
   function message(key: Path): MessageFunction<T> {
     // prettier-ignore
     const msg = isFunction(options.messages)
@@ -209,6 +208,11 @@ export function createMessageContext<T = string, N = {}>(
       ? options.processor.interpolate
       : (DEFAULT_INTERPOLATE as unknown as MessageInterpolate<T>)
 
+  const linked = (key: Path, modifier?: string): MessageType<T> => {
+    const msg = message(key)(ctx)
+    return isString(modifier) ? _modifier(modifier)(msg as T) : msg
+  }
+
   const type =
     isPlainObject(options.processor) && isString(options.processor.type)
       ? options.processor.type
@@ -218,11 +222,7 @@ export function createMessageContext<T = string, N = {}>(
     [HelperNameMap.LIST]: list,
     [HelperNameMap.NAMED]: named,
     [HelperNameMap.PLURAL]: plural,
-    [HelperNameMap.LINKED]: (key: Path, modifier?: string): MessageType<T> => {
-      // TODO: should check `key`
-      const msg = message(key)(ctx)
-      return isString(modifier) ? _modifier(modifier)(msg as T) : msg
-    },
+    [HelperNameMap.LINKED]: linked,
     [HelperNameMap.MESSAGE]: message,
     [HelperNameMap.TYPE]: type,
     [HelperNameMap.INTERPOLATE]: interpolate,

packages/core-base/src/translate.ts

@@ -819,10 +819,32 @@ function getMessageContextOptions<Messages, Message = string>(
   message: LocaleMessageValue<Message>,
   options: TranslateOptions
 ): MessageContextOptions<Message> {
-  const { modifiers, pluralRules, messageResolver: resolveValue } = context
+  const {
+    modifiers,
+    pluralRules,
+    messageResolver: resolveValue,
+    fallbackLocale,
+    fallbackWarn,
+    missingWarn,
+    fallbackContext
+  } = context
 
   const resolveMessage = (key: string): MessageFunction<Message> => {
-    const val = resolveValue(message, key)
+    let val = resolveValue(message, key)
+
+    // fallback to root context
+    if (val == null && fallbackContext) {
+      const [, , message] = resolveMessageFormat(
+        fallbackContext,
+        key,
+        locale,
+        fallbackLocale as FallbackLocale,
+        fallbackWarn,
+        missingWarn
+      )
+      val = resolveValue(message, key)
+    }
+
     if (isString(val)) {
       let occurred = false
       const errorDetector = () => {

packages/core-base/test/translate.test.ts

@@ -792,4 +792,22 @@ describe('edge cases', () => {
   })
 })
 
+test('fallback context', () => {
+  const parent = context({
+    locale: 'en',
+    messages: {
+      en: { hello: 'hello man!', hi: 'hi' }
+    }
+  })
+
+  const ctx = context({
+    locale: 'en',
+    messages: {
+      en: { hi: 'hi! @:hello' }
+    }
+  })
+  ctx.fallbackContext = parent
+
+  expect(translate(ctx, 'hi')).toEqual('hi! hello man!')
+})
 /* eslint-enable @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any */

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

@@ -31,6 +31,8 @@ import {
   NOT_REOSLVED,
   MessageFunction,
   setAdditionalMeta,
+  getFallbackContext,
+  setFallbackContext,
   DEFAULT_LOCALE
 } from '@intlify/core-base'
 import { VueDevToolsTimelineEvents } from '@intlify/vue-devtools'
@@ -1913,6 +1915,8 @@ export function createComposer(options: any = {}, VueI18nLegacy?: any): any {
   let _context: CoreContext
 
   function getCoreContext(): CoreContext {
+    _isGlobal && setFallbackContext(null)
+
     const ctxOptions = {
       version: VERSION,
       locale: _locale.value,
@@ -1931,6 +1935,7 @@ export function createComposer(options: any = {}, VueI18nLegacy?: any): any {
       messageResolver: options.messageResolver,
       __meta: { framework: 'vue' }
     }
+
     if (!__LITE__) {
       ;(ctxOptions as any).datetimeFormats = _datetimeFormats.value
       ;(ctxOptions as any).numberFormats = _numberFormats.value
@@ -1946,7 +1951,11 @@ export function createComposer(options: any = {}, VueI18nLegacy?: any): any {
         ? (_context as unknown as CoreInternalContext).__v_emitter
         : undefined
     }
-    return createCoreContext(ctxOptions as any)
+
+    const ctx = createCoreContext(ctxOptions as any)
+    _isGlobal && setFallbackContext(ctx)
+
+    return ctx
   }
 
   _context = getCoreContext()
@@ -2057,9 +2066,17 @@ export function createComposer(options: any = {}, VueI18nLegacy?: any): any {
     if (__DEV__ || __FEATURE_PROD_INTLIFY_DEVTOOLS__) {
       try {
         setAdditionalMeta(getMetaInfo())
+        if (!_isGlobal) {
+          _context.fallbackContext = __root
+            ? (getFallbackContext() as any)
+            : undefined
+        }
         ret = fn(_context)
       } finally {
         setAdditionalMeta(null)
+        if (!_isGlobal) {
+          _context.fallbackContext = undefined
+        }
       }
     } else {
       ret = fn(_context)

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

@@ -439,3 +439,34 @@ test('issue #854', async () => {
     `Fall back to translate 'hello' with root locale.`
   )
 })
+
+test('issue #933', async () => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: {
+      en: {
+        hello: 'hello man!'
+      }
+    }
+  })
+
+  const App = defineComponent({
+    setup() {
+      const { t } = useI18n({
+        messages: {
+          en: {
+            hi: 'hi! @:hello - @:local',
+            local: 'local!'
+          }
+        }
+      })
+      return { t }
+    },
+    template: `<div>{{ t('hi') }}</div>`
+  })
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html()).toEqual('<div>hi! hello man! - local!</div>')
+})