fix!: trigger i18n:localeSwitched when pending locale switches (#3649)

Author: BobbieGoede

docs/content/docs/02.guide/08.lang-switcher.md

@@ -92,8 +92,8 @@ export default defineNuxtConfig({
 <script setup lang="ts">
 const { finalizePendingLocaleChange } = useI18n()
 
-const onBeforeEnter = () => {
-  finalizePendingLocaleChange()
+const onBeforeEnter = async () => {
+  await finalizePendingLocaleChange()
 }
 </script>
 
@@ -160,8 +160,8 @@ definePageMeta({
   }
 })
 
-route.meta.pageTransition.onBeforeEnter = () => {
-  finalizePendingLocaleChange()
+route.meta.pageTransition.onBeforeEnter = async () => {
+  await finalizePendingLocaleChange()
 }
 </script>
 

docs/content/docs/02.guide/90.migrating.md

@@ -43,10 +43,6 @@ If this mode proves stable it will become the default in v11, please try it out
 ### Lazy loading
 The `lazy` option has been removed and lazy loading of locale messages is now the default behavior.
 
-### Signature changed for `finalizePendingLocaleChange()`{lang="ts"}
-The function signature for `finalizePendingLocaleChange()`{lang="ts"} has been corrected from `() => Promise<void>`{lang="ts-type"} to `() => void`{lang="ts-type"}.
-This change was made since the function does not rely on any async operations and should not be awaited, and should prevent unnecessary function coloring.
-
 ### Arguments changed `useLocaleHead()`{lang="ts"} and `$localeHead()`{lang="ts"}
 The `key` property has been removed and can no longer be configured, this is necessary for predictable and consistent localized head tag management.
 

docs/content/docs/04.api/04.vue-i18n.md

@@ -51,7 +51,7 @@ Returns browser locale code filtered against the ones defined in options.
 
 - **Arguments**:
   - no arguments
-- **Returns**: `void`{lang="ts-type"}
+- **Returns**: `Promise<void>`{lang="ts-type"}
 
 Switches locale to the pending locale, used when navigation locale switch is prevented by the [`skipSettingLocaleOnNavigate`](/docs/api/options#skipsettinglocaleonnavigate) option. See [Wait for page transition](/docs/guide/lang-switcher#wait-for-page-transition) for more information.
 

specs/basic-usage-tests.ts

@@ -1,5 +1,5 @@
 import { test, expect } from 'vitest'
-import { $fetch, url } from './utils'
+import { $fetch, url, useTestContext } from './utils'
 import {
   assertLocaleHeadWithDom,
   assetLocaleHead,
@@ -317,28 +317,40 @@ export function basicUsageTests() {
   test('<NuxtLink> triggers runtime hooks', async () => {
     const { page, consoleLogs } = await renderPage('/kr')
 
-    expect(consoleLogs.find(log => log.text.includes('onBeforeLanguageSwitch kr fr true'))).toBeTruthy()
-    expect(consoleLogs.find(log => log.text.includes('onLanguageSwitched kr fr'))).toBeTruthy()
-    expect(consoleLogs.find(log => log.text.includes('onBeforeLanguageSwitch fr fr false'))).toBeTruthy()
-
-    // current locale
-    expect(await page.locator('#lang-switcher-current-locale code').innerText()).toEqual('fr')
+    await page.waitForFunction(() => !window.useNuxtApp?.().isHydrating)
+    consoleLogs.length = 0
 
     // navigate to about page
     await page.locator('#link-about').clickNavigate()
     await page.waitForURL(url('/fr/about'))
 
-    // navigate to home page
-    await page.locator('#link-home').clickNavigate()
-    await page.waitForURL(url('/fr'))
+    expect(consoleLogs[0].text).toEqual('i18n:beforeLocaleSwitch fr fr false')
   })
 
   test('setLocale triggers runtime hooks', async () => {
+    let output: string[] = []
+    const ctx = useTestContext()
+    ctx.serverProcess?.process?.on(
+      'message',
+      (msg: any) => msg.type === 'i18n:test-log' && msg.id === ctx.url?.split(':')[2]! && output.push(msg.data)
+    )
+    await new Promise(resolve => setTimeout(resolve, 1)) // wait for process to be ready
+    output.length = 0
+
     const { page, consoleLogs } = await renderPage('/kr')
 
-    expect(consoleLogs.find(log => log.text.includes('onBeforeLanguageSwitch kr fr true'))).toBeTruthy()
-    expect(consoleLogs.find(log => log.text.includes('onLanguageSwitched kr fr'))).toBeTruthy()
-    expect(consoleLogs.find(log => log.text.includes('onBeforeLanguageSwitch fr fr false'))).toBeTruthy()
+    // overrides and redirects to `fr`
+    expect(output).toMatchInlineSnapshot(`
+      [
+        "i18n:beforeLocaleSwitch kr fr true",
+        "i18n:localeSwitched kr fr",
+        "i18n:beforeLocaleSwitch fr fr false",
+        "i18n:beforeLocaleSwitch fr fr true",
+      ]
+    `)
+
+    // client-side enters on `fr` locale
+    expect(consoleLogs.find(log => log.text.includes('i18n:beforeLocaleSwitch fr fr true'))).toBeTruthy()
 
     // current locale
     expect(await page.locator('#lang-switcher-current-locale code').innerText()).toEqual('fr')

specs/fixtures/basic_usage/app.vue

@@ -8,7 +8,7 @@ const skipSettingLocale = useRuntimeConfig().public.i18n.skipSettingLocaleOnNavi
 const pageTransition = {
   name: 'my',
   mode: 'out-in',
-  onBeforeEnter: () => finalizePendingLocaleChange()
+  onBeforeEnter: async () => await finalizePendingLocaleChange()
 }
 </script>
 

specs/fixtures/basic_usage_compat_4/app/app.vue

@@ -8,7 +8,7 @@ const skipSettingLocale = useRuntimeConfig().public.i18n.skipSettingLocaleOnNavi
 const pageTransition = {
   name: 'my',
   mode: 'out-in',
-  onBeforeEnter: () => finalizePendingLocaleChange()
+  onBeforeEnter: async () => await finalizePendingLocaleChange()
 }
 </script>
 

specs/fixtures/common/components/LangSwitcher.vue

@@ -42,7 +42,7 @@ const switchLocalePath = useSwitchLocalePath()
         :id="`set-locale-link-${locale.code}`"
         :key="`b-${index}`"
         href="javascript:void(0)"
-        @click.prevent="setLocale(locale.code)"
+        @click.prevent="async () => await setLocale(locale.code)"
         >{{ locale.name }}</a
       >
     </section>

specs/fixtures/issues/1888/app.vue

@@ -6,7 +6,7 @@
       v-for="locale in availableLocales"
       :id="locale.code"
       :key="locale.code"
-      @click="$i18n.setLocale(locale.code)"
+      @click="async () => await $i18n.setLocale(locale.code)"
     >
       {{ locale.name }}
     </button>

specs/fixtures/issues/2590/app.vue

@@ -5,34 +5,11 @@
 </template>
 
 <script setup lang="ts">
-const { locale, locales, setLocale } = useI18n()
+const _i18n = useI18n()
 
 const head = useLocaleHead()
 
 useHead(() => ({
   htmlAttrs: head.value.htmlAttrs
 }))
-
-const availableLocales = computed(() => {
-  return (locales.value as LocaleObject[])
-    .filter(item => {
-      return item.code !== locale.value
-    })
-    .map(item => {
-      return {
-        label: item.name,
-        key: item.code
-      }
-    })
-})
-
-const currentLocale = computed(() => {
-  return (locales.value as LocaleObject[]).filter(item => {
-    return item.code === locale.value
-  })
-})
-
-function changeLocal(code: any) {
-  setLocale(code)
-}
 </script>

specs/fixtures/plugins/i18nHooks.ts

@@ -1,21 +1,24 @@
 import { defineNuxtPlugin } from '#imports'
 
-export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.hook('i18n:beforeLocaleSwitch', ({ oldLocale, newLocale, initialSetup }) => {
-    let overrideLocale = newLocale
+function log(...args: any[]) {
+  if (import.meta.server && process.send) {
+    process.send({ type: 'i18n:test-log', id: process.env.PORT, data: Array.from(args).join(' ') })
+    // !import.meta.CI && console.log(...args)
+  } else {
+    console.log(...args)
+  }
+}
 
-    if (newLocale === 'kr') {
-      overrideLocale = 'fr'
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.hook('i18n:beforeLocaleSwitch', data => {
+    if (data.newLocale === 'kr') {
+      data.newLocale = 'fr'
     }
 
-    console.log('onBeforeLanguageSwitch', oldLocale, overrideLocale, initialSetup)
-
-    if (overrideLocale !== newLocale) {
-      return overrideLocale
-    }
+    log('i18n:beforeLocaleSwitch', data.oldLocale, data.newLocale, data.initialSetup)
   })
 
   nuxtApp.hook('i18n:localeSwitched', ({ oldLocale, newLocale }) => {
-    console.log('onLanguageSwitched', oldLocale, newLocale)
+    log('i18n:localeSwitched', oldLocale, newLocale)
   })
 })