fix: global locale is not respected by useI18n (#1316)

Given the following config: - `allowComposition: true` - `legacy: true` Calling `useI18n()` always results in translations using the default language "en-US". (#1315) Co-authored-by: Szabolcs Csizmadia <Szabolcs.Csizmadia-ext@querplex.biz>
intlify · Jan 29, 2023 · e826508 · e826508
1 parent 64e5373
commit e826508
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 13 deletions.
diff --git a/e2e/composition.test.js b/e2e/composition.test.js
@@ -11,7 +11,7 @@
         text: 'こんにちは、世界！'
       })
       await expect(page).toMatchElement('#app div.child p', {
-        text: 'やあ！'
+        text: 'Hi there!'
       })
     })
 

diff --git a/packages/vue-i18n-core/src/i18n.ts b/packages/vue-i18n-core/src/i18n.ts
@@ -1151,11 +1151,11 @@ function useI18nForLegacy(
 ): Composer {
   type Message = VueMessageType
 
-  const isLocale = scope === 'local'
+  const isLocalScope = scope === 'local'
   const _composer = shallowRef<Composer | null>(null)
 
   if (
-    isLocale &&
+    isLocalScope &&
     instance.proxy &&
     !(instance.proxy.$options.i18n || instance.proxy.$options.__i18n)
   ) {
@@ -1166,11 +1166,11 @@ function useI18nForLegacy(
 
   const _inheritLocale = isBoolean(options.inheritLocale)
     ? options.inheritLocale
-    : true
+    : !isString(options.locale)
 
   const _locale = ref<Locale>(
     // prettier-ignore
-    isLocale && _inheritLocale
+    !isLocalScope || _inheritLocale
     ? root.locale.value
     : isString(options.locale)
       ? options.locale
@@ -1179,7 +1179,7 @@ function useI18nForLegacy(
 
   const _fallbackLocale = ref<FallbackLocale>(
     // prettier-ignore
-    isLocale && _inheritLocale
+    !isLocalScope || _inheritLocale
       ? root.fallbackLocale.value
       : isString(options.fallbackLocale) ||
         isArray(options.fallbackLocale) ||
@@ -1211,21 +1211,21 @@ function useI18nForLegacy(
   )
 
   // prettier-ignore
-  const _missingWarn = isLocale
+  const _missingWarn = isLocalScope
     ? root.missingWarn
     : isBoolean(options.missingWarn) || isRegExp(options.missingWarn)
       ? options.missingWarn
       : true
 
   // prettier-ignore
-  const _fallbackWarn = isLocale
+  const _fallbackWarn = isLocalScope
     ? root.fallbackWarn
     : isBoolean(options.fallbackWarn) || isRegExp(options.fallbackWarn)
       ? options.fallbackWarn
       : true
 
   // prettier-ignore
-  const _fallbackRoot = isLocale
+  const _fallbackRoot = isLocalScope
     ? root.fallbackRoot
     : isBoolean(options.fallbackRoot)
       ? options.fallbackRoot
@@ -1243,7 +1243,7 @@ function useI18nForLegacy(
     : null
 
   // prettier-ignore
-  const _warnHtmlMessage = isLocale
+  const _warnHtmlMessage = isLocalScope
     ? root.warnHtmlMessage
     : isBoolean(options.warnHtmlMessage)
       ? options.warnHtmlMessage
@@ -1252,14 +1252,14 @@ function useI18nForLegacy(
   const _escapeParameter = !!options.escapeParameter
 
   // prettier-ignore
-  const _modifiers = isLocale
+  const _modifiers = isLocalScope
     ? root.modifiers
     : isPlainObject(options.modifiers)
       ? options.modifiers
       : {}
 
   // pluralRules
-  const _pluralRules = options.pluralRules || (isLocale && root.pluralRules)
+  const _pluralRules = options.pluralRules || (isLocalScope && root.pluralRules)
 
   // track reactivity
   function trackReactivityValues() {
@@ -1581,7 +1581,7 @@ function useI18nForLegacy(
       _messages.value = composer.messages.value
       _datetimeFormats.value = composer.datetimeFormats.value
       _numberFormats.value = composer.numberFormats.value
-    } else if (isLocale) {
+    } else if (isLocalScope) {
       sync(composer)
     }
   })

diff --git a/packages/vue-i18n-core/test/i18n.test.ts b/packages/vue-i18n-core/test/i18n.test.ts
@@ -202,6 +202,32 @@ describe('useI18n', () => {
     expect((composer as Composer).locale.value).toEqual('ja')
   })
 
+  test('global scope with legacy mode', async () => {
+    const i18n = createI18n({
+      allowComposition: true,
+      legacy: true,
+      locale: 'en',
+      messages: {
+        en: {
+          hello: 'hello!'
+        }
+      }
+    })
+
+    const App = defineComponent({
+      setup() {
+        const { locale, t } = useI18n({
+          useScope: 'global'
+        })
+        return { locale, t }
+      },
+      i18n: {},
+      template: `<p>{{ locale }}:{{ t('hello') }}</p>`
+    })
+    const { html } = await mount(App, i18n)
+    expect(html()).toEqual('<p>en:hello!</p>')
+  })
+
   test('parent scope', async () => {
     const i18n = createI18n({
       legacy: false,