improvmeent: global injection for vue-i18n-bridge (#764)

Author: kazupon

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

@@ -1952,7 +1952,7 @@ export function createComposer(options: any = {}, VueI18nLegacy?: any): any {
     set: val => {
       _locale.value = val
       if (__BRIDGE__) {
-        if (__legacy) {
+        if (__legacy && !_isGlobal) {
           __legacy.locale = val
         }
       }
@@ -1966,7 +1966,7 @@ export function createComposer(options: any = {}, VueI18nLegacy?: any): any {
     set: val => {
       _fallbackLocale.value = val
       if (__BRIDGE__) {
-        if (__legacy) {
+        if (__legacy && !_isGlobal) {
           __legacy.fallbackLocale = val
         }
       }
@@ -2337,7 +2337,7 @@ export function createComposer(options: any = {}, VueI18nLegacy?: any): any {
       if (_inheritLocale) {
         _locale.value = val
         if (__BRIDGE__) {
-          if (__legacy) {
+          if (__legacy && !_isGlobal) {
             __legacy.locale = val
           }
         }
@@ -2349,7 +2349,7 @@ export function createComposer(options: any = {}, VueI18nLegacy?: any): any {
       if (_inheritLocale) {
         _fallbackLocale.value = val
         if (__BRIDGE__) {
-          if (__legacy) {
+          if (__legacy && !_isGlobal) {
             __legacy.fallbackLocale = val
           }
         }

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

@@ -431,7 +431,12 @@ export function createI18n(options: any = {}, VueI18nLegacy?: any): any {
     :  __FEATURE_LEGACY_API__ && isBoolean(options.legacy)
       ? options.legacy
       : __FEATURE_LEGACY_API__
-  const __globalInjection = /* #__PURE__*/ !!options.globalInjection
+  // prettier-ignore
+  const __globalInjection = /* #__PURE__*/ !__BRIDGE__
+    ? !!options.globalInjection
+    : isBoolean(options.globalInjection)
+      ? options.globalInjection
+      : true
   const __instances = new Map<ComponentInternalInstance, VueI18n | Composer>()
   const __global = createGlobal(options, __legacyMode, VueI18nLegacy)
   const symbol: InjectionKey<I18n> | string = /* #__PURE__*/ makeSymbol(
@@ -570,6 +575,9 @@ export function createI18n(options: any = {}, VueI18nLegacy?: any): any {
           throw createI18nError(I18nErrorCodes.BRIDGE_SUPPORT_VUE_2_ONLY)
         }
 
+        if (!__legacyMode && __globalInjection) {
+          injectGlobalFieldsForBridge(Vue, i18n, __global as Composer)
+        }
         Vue.mixin(defineMixinBridge(i18n, _legacyVueI18n))
       }
     })
@@ -1091,3 +1099,27 @@ function injectGlobalFields(app: App, composer: Composer): void {
     Object.defineProperty(app.config.globalProperties, `$${method}`, desc)
   })
 }
+
+function injectGlobalFieldsForBridge(
+  Vue: any, // eslint-disable-line @typescript-eslint/no-explicit-any
+  i18n: any, // eslint-disable-line @typescript-eslint/no-explicit-any
+  composer: Composer
+): void {
+  // The composition mode in vue-i18n-bridge is `$18n` is the VueI18n instance.
+  // so we need to tell composer to change the locale.
+  // If we don't do, things like `$t` that are injected will not be reacted.
+  i18n.watchLocale(composer)
+
+  // define fowardcompatible vue-i18n-next inject fields with `globalInjection`
+  Vue.prototype.$t = function (...args: unknown[]) {
+    return Reflect.apply(composer.t, composer, [...args])
+  }
+
+  Vue.prototype.$d = function (...args: unknown[]) {
+    return Reflect.apply(composer.d, composer, [...args])
+  }
+
+  Vue.prototype.$n = function (...args: unknown[]) {
+    return Reflect.apply(composer.n, composer, [...args])
+  }
+}