refactor: simplify runtime logic (#3496)

Author: BobbieGoede

src/bundler.ts

@@ -16,14 +16,6 @@ import type { I18nNuxtContext } from './context'
 const debug = createDebug('@nuxtjs/i18n:bundler')
 
 export async function extendBundler(ctx: I18nNuxtContext, nuxt: Nuxt) {
-  const { options: nuxtOptions } = ctx
-  const localePaths = [...new Set([...ctx.localeInfo.flatMap(x => x.meta.map(m => m.path))])]
-  const localeIncludePaths = localePaths.length ? localePaths : undefined
-
-  const sourceMapOptions: BundlerPluginOptions = {
-    sourcemap: !!nuxt.options.sourcemap.server || !!nuxt.options.sourcemap.client
-  }
-
   addTemplate({
     write: true,
     filename: 'nuxt-i18n-logger.mjs',
@@ -34,9 +26,7 @@ export async function extendBundler(ctx: I18nNuxtContext, nuxt: Nuxt) {
 
       return `
 import { createConsola } from 'consola'
-
 const debugLogger = createConsola({ level: ${ctx.options.debug === 'verbose' ? 999 : 4} }).withTag('i18n')
-
 export function createLogger(label) {
   return debugLogger.withTag(label)
 }`
@@ -48,47 +38,50 @@ export function createLogger(label) {
   /**
    * shared plugins (nuxt/nitro)
    */
-  const resourcePlugin = ResourcePlugin(sourceMapOptions, ctx)
+  const pluginOptions: BundlerPluginOptions = {
+    sourcemap: !!nuxt.options.sourcemap.server || !!nuxt.options.sourcemap.client
+  }
+  const resourcePlugin = ResourcePlugin(pluginOptions, ctx)
 
   addBuildPlugin(resourcePlugin)
-
   nuxt.hook('nitro:config', async cfg => {
     cfg.rollupConfig!.plugins = (await cfg.rollupConfig!.plugins) || []
     cfg.rollupConfig!.plugins = toArray(cfg.rollupConfig!.plugins)
-
     cfg.rollupConfig!.plugins.push(resourcePlugin.rollup())
   })
 
   /**
-   * shared plugins (webpack/vite)
+   * shared plugins (vite/webpack/rspack)
    */
+  const { options } = ctx
+  const localePaths = [...new Set([...ctx.localeInfo.flatMap(x => x.meta.map(m => m.path))])]
   const vueI18nPluginOptions: PluginOptions = {
     allowDynamic: true,
-    include: localeIncludePaths,
-    runtimeOnly: nuxtOptions.bundle.runtimeOnly,
-    fullInstall: nuxtOptions.bundle.fullInstall,
-    onlyLocales: nuxtOptions.bundle.onlyLocales,
-    escapeHtml: nuxtOptions.compilation.escapeHtml,
-    compositionOnly: nuxtOptions.bundle.compositionOnly,
-    strictMessage: nuxtOptions.compilation.strictMessage,
-    defaultSFCLang: nuxtOptions.customBlocks.defaultSFCLang,
-    globalSFCScope: nuxtOptions.customBlocks.globalSFCScope,
-    dropMessageCompiler: nuxtOptions.bundle.dropMessageCompiler,
-    optimizeTranslationDirective: nuxtOptions.bundle.optimizeTranslationDirective
+    include: localePaths.length ? localePaths : undefined,
+    runtimeOnly: options.bundle.runtimeOnly,
+    fullInstall: options.bundle.fullInstall,
+    onlyLocales: options.bundle.onlyLocales,
+    escapeHtml: options.compilation.escapeHtml,
+    compositionOnly: options.bundle.compositionOnly,
+    strictMessage: options.compilation.strictMessage,
+    defaultSFCLang: options.customBlocks.defaultSFCLang,
+    globalSFCScope: options.customBlocks.globalSFCScope,
+    dropMessageCompiler: options.bundle.dropMessageCompiler,
+    optimizeTranslationDirective: options.bundle.optimizeTranslationDirective
   }
   addBuildPlugin({
     vite: () => VueI18nPlugin.vite(vueI18nPluginOptions),
     webpack: () => VueI18nPlugin.webpack(vueI18nPluginOptions)
   })
-  addBuildPlugin(TransformMacroPlugin(sourceMapOptions))
-  if (nuxtOptions.experimental.autoImportTranslationFunctions) {
-    addBuildPlugin(TransformI18nFunctionPlugin(sourceMapOptions))
+  addBuildPlugin(TransformMacroPlugin(pluginOptions))
+  if (options.experimental.autoImportTranslationFunctions) {
+    addBuildPlugin(TransformI18nFunctionPlugin(pluginOptions))
   }
 
   const defineConfig = {
-    ...getFeatureFlags(nuxtOptions.bundle),
-    __DEBUG__: String(!!nuxtOptions.debug),
-    __TEST__: String(!!nuxtOptions.debug || nuxt.options._i18nTest)
+    ...getFeatureFlags(options.bundle),
+    __DEBUG__: String(!!options.debug),
+    __TEST__: String(!!options.debug || nuxt.options._i18nTest)
   }
   /**
    * webpack plugin
@@ -105,7 +98,7 @@ export function createLogger(label) {
   /**
    * rspack plugin
    */
-  if (nuxt.options.builder == '@nuxt/rspack-builder') {
+  if (nuxt.options.builder === '@nuxt/rspack-builder') {
     try {
       const { rspack } = await import('@rspack/core')
       addRspackPlugin(new rspack.DefinePlugin(defineConfig))

src/runtime/composables/index.ts

@@ -1,4 +1,4 @@
-import { useNuxtApp, useCookie as useNuxtCookie } from '#imports'
+import { useNuxtApp, useCookie } from '#imports'
 import { ref } from 'vue'
 import { runtimeDetectBrowserLanguage, wrapComposable } from '../internal'
 import { localeCodes } from '#build/i18n.options.mjs'
@@ -208,7 +208,7 @@ export function useCookieLocale(): Ref<string> {
     return locale
   }
 
-  const code: string | null = useNuxtCookie<string>(detect.cookieKey!).value
+  const code = useCookie(detect.cookieKey!).value
   if (code && localeCodes.includes(code)) {
     locale.value = code
   }

src/runtime/domain.ts

@@ -1,4 +1,4 @@
-import { isString, isObject, isArray } from '@intlify/shared'
+import { isArray, isString } from '@intlify/shared'
 import { hasProtocol } from 'ufo'
 import { getRequestProtocol } from 'h3'
 import { useRequestEvent, useRuntimeConfig, useRouter, useRequestHeaders, useNuxtApp } from '#imports'
@@ -24,21 +24,20 @@ export function getHost() {
 export function getLocaleDomain(locales: LocaleObject[], strategy: string, route: string | CompatRoute): string {
   const logger = /*#__PURE__*/ createLogger(`getLocaleDomain`)
   const host = getHost()
-  const routePath = isObject(route) ? route.path : isString(route) ? route : ''
-
   if (!host) {
     return host
   }
 
-  __DEBUG__ && logger.log(`locating domain for host`, { host, strategy, path: routePath })
-
+  const routePath = isString(route) ? route : route.path
   const matchingLocales = locales.filter(locale => {
     if (locale.domain) {
       return (hasProtocol(locale.domain) ? locale.domain.replace(/(http|https):\/\//, '') : locale.domain) === host
     }
     return isArray(locale?.domains) ? locale.domains.includes(host) : false
   })
 
+  __DEBUG__ && logger.log(`locating domain for host`, { host, strategy, path: routePath })
+
   if (matchingLocales.length === 0) {
     return ''
   }
@@ -59,16 +58,14 @@ export function getLocaleDomain(locales: LocaleObject[], strategy: string, route
   }
 
   // get prefix from route
-  if (route) {
+  if (route && routePath) {
     __DEBUG__ && logger.log(`check matched domain for locale match`, { path: routePath, host })
 
-    if (routePath && routePath !== '') {
-      const matched = routePath.match(getLocalesRegex(matchingLocales.map(l => l.code)))?.at(1)
-      if (matched) {
-        const matchingLocale = matchingLocales.find(l => l.code === matched)
-        __DEBUG__ && logger.log(`matched locale from path`, { matchedLocale: matchingLocale?.code })
-        return matchingLocale?.code ?? ''
-      }
+    const matched = routePath.match(getLocalesRegex(matchingLocales.map(l => l.code)))?.at(1)
+    if (matched) {
+      const matchingLocale = matchingLocales.find(l => l.code === matched)
+      __DEBUG__ && logger.log(`matched locale from path`, { matchedLocale: matchingLocale?.code })
+      return matchingLocale?.code ?? ''
     }
   }
 
@@ -82,11 +79,10 @@ export function getLocaleDomain(locales: LocaleObject[], strategy: string, route
 export function getDomainFromLocale(localeCode: Locale): string | undefined {
   const nuxt = useNuxtApp()
   const host = getHost()
-  const runtimeI18n = useRuntimeConfig().public.i18n as I18nPublicRuntimeConfig
+  const { domainLocales } = useRuntimeConfig().public.i18n as I18nPublicRuntimeConfig
   const lang = normalizedLocales.find(locale => locale.code === localeCode)
   // lookup the `differentDomain` origin associated with given locale.
-  const domain =
-    runtimeI18n?.domainLocales?.[localeCode]?.domain || lang?.domain || lang?.domains?.find(v => v === host)
+  const domain = domainLocales?.[localeCode]?.domain || lang?.domain || lang?.domains?.find(v => v === host)
 
   if (!domain) {
     console.warn(formatMessage('Could not find domain name for locale ' + localeCode))

src/runtime/internal.ts

@@ -1,14 +1,13 @@
 import { isString } from '@intlify/shared'
-import { useCookie as useNuxtCookie, useRuntimeConfig, useNuxtApp, useRequestHeader } from '#imports'
+import { useCookie, useNuxtApp, useRequestHeader, useRuntimeConfig } from '#imports'
 import { DEFAULT_COOKIE_KEY, isSSG, localeCodes, normalizedLocales } from '#build/i18n.options.mjs'
 import { findBrowserLocale, regexpPath } from './routing/utils'
 import { initCommonComposableOptions } from './utils'
 import { createLogger } from '#nuxt-i18n/logger'
 
 import type { Locale } from 'vue-i18n'
-import type { DetectBrowserLanguageOptions } from '#internal-i18n-types'
-import type { CookieRef } from 'nuxt/app'
-import type { I18nPublicRuntimeConfig } from '#internal-i18n-types'
+import type { DetectBrowserLanguageOptions, I18nPublicRuntimeConfig } from '#internal-i18n-types'
+import type { CookieOptions, CookieRef } from 'nuxt/app'
 import type { CompatRoute } from './types'
 import type { CommonComposableOptions } from './utils'
 
@@ -44,27 +43,24 @@ export function getBrowserLocale(): string | undefined {
   return findBrowserLocale(normalizedLocales, browserLocales) || undefined
 }
 
-export function getI18nCookie() {
+export function createI18nCookie() {
   const detect = runtimeDetectBrowserLanguage()
   const cookieKey = (detect && detect.cookieKey) || DEFAULT_COOKIE_KEY
   const date = new Date()
-  const cookieOptions: Record<string, unknown> = {
-    expires: new Date(date.setDate(date.getDate() + 365)),
+  const cookieOptions: CookieOptions<string | null | undefined> & { readonly: false } = {
     path: '/',
+    readonly: false,
+    expires: new Date(date.setDate(date.getDate() + 365)),
     sameSite: detect && detect.cookieCrossOrigin ? 'none' : 'lax',
+    domain: (detect && detect.cookieDomain) || undefined,
     secure: (detect && detect.cookieCrossOrigin) || (detect && detect.cookieSecure)
   }
-
-  if (detect && detect.cookieDomain) {
-    cookieOptions.domain = detect.cookieDomain
-  }
-
-  return useNuxtCookie<string | undefined>(cookieKey, cookieOptions)
+  return useCookie(cookieKey, cookieOptions)
 }
 
 // TODO: remove side-effects
 export function getLocaleCookie(
-  cookieRef: CookieRef<string | undefined>,
+  cookieRef: CookieRef<string | null | undefined>,
   detect: false | DetectBrowserLanguageOptions,
   defaultLocale: string
 ): string | undefined {
@@ -101,18 +97,6 @@ export function getLocaleCookie(
   cookieRef.value = undefined
 }
 
-export function setLocaleCookie(
-  cookieRef: CookieRef<string | undefined>,
-  locale: string,
-  detect: false | DetectBrowserLanguageOptions
-) {
-  if (detect === false || !detect.useCookie) {
-    return
-  }
-
-  cookieRef.value = locale
-}
-
 type DetectFailureStates =
   | 'not_found_match'
   | 'first_access_only'
@@ -194,6 +178,5 @@ export function runtimeDetectBrowserLanguage(
   opts: I18nPublicRuntimeConfig = useRuntimeConfig().public.i18n as I18nPublicRuntimeConfig
 ) {
   if (opts?.detectBrowserLanguage === false) return false
-
   return opts?.detectBrowserLanguage
 }

src/runtime/plugins/i18n.ts

@@ -13,13 +13,12 @@ import { loadVueI18nOptions, loadLocale } from '../messages'
 import { loadAndSetLocale, detectRedirect, navigate, extendBaseUrl, createNuxtI18nDev } from '../utils'
 import {
   getLocaleCookie,
-  getI18nCookie,
+  createI18nCookie,
   runtimeDetectBrowserLanguage,
   wrapComposable,
-  getBrowserLocale,
-  setLocaleCookie
+  getBrowserLocale
 } from '../internal'
-import { createLocaleFromRouteGetter, resolveBaseUrl } from '../routing/utils'
+import { createLocaleFromRouteGetter } from '../routing/utils'
 import { extendI18n } from '../routing/i18n'
 import { createLogger } from '#nuxt-i18n/logger'
 import { getI18nTarget } from '../compatibility'
@@ -30,8 +29,7 @@ import { getDefaultLocaleForDomain, setupMultiDomainLocales } from '../domain'
 
 import type { Locale, I18nOptions, Composer } from 'vue-i18n'
 import type { NuxtApp } from '#app'
-import type { LocaleObject } from '#internal-i18n-types'
-import type { I18nPublicRuntimeConfig } from '#internal-i18n-types'
+import type { LocaleObject, I18nPublicRuntimeConfig } from '#internal-i18n-types'
 import type { LocaleHeadFunction, ResolveRouteFunction } from '../composables'
 
 export default defineNuxtPlugin({
@@ -87,7 +85,7 @@ export default defineNuxtPlugin({
       nuxt._nuxtI18nDev = createNuxtI18nDev()
     }
 
-    const localeCookie = getI18nCookie()
+    const localeCookie = createI18nCookie()
     const detectBrowserOptions = runtimeDetectBrowserLanguage()
     // extend i18n instance
     extendI18n(i18n, {
@@ -98,11 +96,11 @@ export default defineNuxtPlugin({
         const _localeCodes = ref<Locale[]>(localeCodes)
         composer.localeCodes = computed(() => _localeCodes.value)
 
-        const _baseUrl = ref<string>(resolveBaseUrl(runtimeI18n.baseUrl, nuxt))
+        const _baseUrl = ref(runtimeI18n.baseUrl())
         composer.baseUrl = computed(() => _baseUrl.value)
 
         if (import.meta.client) {
-          watch(composer.locale, () => (_baseUrl.value = resolveBaseUrl(runtimeI18n.baseUrl, nuxt)))
+          watch(composer.locale, () => (_baseUrl.value = runtimeI18n.baseUrl()))
         }
 
         composer.strategy = runtimeI18n.strategy
@@ -133,7 +131,10 @@ export default defineNuxtPlugin({
         composer.defaultLocale = runtimeI18n.defaultLocale
         composer.getBrowserLocale = () => getBrowserLocale()
         composer.getLocaleCookie = () => getLocaleCookie(localeCookie, detectBrowserOptions, composer.defaultLocale)
-        composer.setLocaleCookie = (locale: string) => setLocaleCookie(localeCookie, locale, detectBrowserOptions)
+        composer.setLocaleCookie = (locale: string) => {
+          if (!detectBrowserOptions || !detectBrowserOptions.useCookie) return
+          localeCookie.value = locale
+        }
 
         composer.onBeforeLanguageSwitch = (oldLocale, newLocale, initialSetup, context) =>
           nuxt.callHook('i18n:beforeLocaleSwitch', {