feat: generate Locale type based on configuration (#3025)

* feat: generate `Locale` type based on configuration

* feat: use `Locale` type where relevant

* fix: use `ComposerGeneratedTypeConfig`

* fix: use `IntlifyGeneratedTypeConfig` interface for augmentation

* fix: rename augment interface

* chore(deps): update `vue-i18n` to `10.0.0-beta.4`

package.json

@@ -97,7 +97,7 @@
  "sucrase": "^3.35.0",
  "ufo": "^1.3.1",
  "unplugin": "^1.10.1",
- "vue-i18n": "^10.0.0-beta.1",
+ "vue-i18n": "^10.0.0-beta.4",
  "vue-router": "^4.4.0"
  },
  "devDependencies": {

src/gen.ts

@@ -4,11 +4,12 @@ import { genImport, genDynamicImport } from 'knitwork'
 import { withQuery } from 'ufo'
 import { resolve, relative, join } from 'pathe'
 import { distDir, runtimeDir } from './dirs'
-import { getLayerI18n, getLocalePaths, toCode } from './utils'
+import { getLayerI18n, getLocalePaths, getNormalizedLocales, toCode } from './utils'
 
 import type { Nuxt } from '@nuxt/schema'
 import type { PrerenderTarget } from './utils'
 import type { NuxtI18nOptions, LocaleInfo, VueI18nConfigPathInfo, FileMeta, LocaleObject } from './types'
+import type { Locale } from 'vue-i18n'
 
 export type LoaderOptions = {
  vueI18nConfigPaths: Required<VueI18nConfigPathInfo>[]
@@ -31,7 +32,7 @@ const generateVueI18nConfiguration = (config: Required<VueI18nConfigPathInfo>, i
 }
 
 export function simplifyLocaleOptions(nuxt: Nuxt, options: NuxtI18nOptions) {
- const isLocaleObjectsArray = (locales?: string[] | LocaleObject[]) => locales?.some(x => typeof x !== 'string')
+ const isLocaleObjectsArray = (locales?: Locale[] | LocaleObject[]) => locales?.some(x => typeof x !== 'string')
 
  const hasLocaleObjects =
  nuxt.options._layers.some(layer => isLocaleObjectsArray(getLayerI18n(layer)?.locales)) ||
@@ -64,7 +65,7 @@ export function generateLoaderOptions(
  const importMapper = new Map<string, { key: string; load: string; cache: string }>()
  const importStrings: string[] = []
 
- function generateLocaleImports(locale: string, meta: NonNullable<LocaleInfo['meta']>[number], isServer = false) {
+ function generateLocaleImports(locale: Locale, meta: NonNullable<LocaleInfo['meta']>[number], isServer = false) {
  if (importMapper.has(meta.key)) return
  const importSpecifier = genImportSpecifier({ ...meta, isServer }, 'locale', { locale })
  const importer = { code: locale, key: meta.loadPath, load: '', cache: meta.file.cache ?? true }
@@ -165,7 +166,8 @@ export {}`
 export function generateI18nTypes(nuxt: Nuxt, options: NuxtI18nOptions) {
  const vueI18nTypes = options.types === 'legacy' ? ['VueI18n'] : ['ExportedGlobalComposer', 'Composer']
  const generatedLocales = simplifyLocaleOptions(nuxt, options)
- const resolvedLocaleType = typeof generatedLocales === 'string' ? 'string[]' : 'LocaleObject[]'
+ const resolvedLocaleType = typeof generatedLocales === 'string' ? 'Locale[]' : 'LocaleObject[]'
+ const localeCodeStrings = getNormalizedLocales(options.locales).map(x => x.code)
 
  const i18nType = `${vueI18nTypes.join(' & ')} & NuxtI18nRoutingCustomProperties<${resolvedLocaleType}>`
 
@@ -197,13 +199,21 @@ declare module 'vue-i18n' {
  interface VueI18n extends NuxtI18nRoutingCustomProperties<${resolvedLocaleType}> {}
 }
 
+declare module '@intlify/core' {
+ // generated based on configured locales
+ interface GeneratedTypeConfig { 
+ locale: ${localeCodeStrings.map(x => JSON.stringify(x)).join(' | ')}
+ }
+}
+
+
 declare module '#app' {
  interface NuxtApp {
  $i18n: ${i18nType}
  }
 }
 
-${options.experimental?.autoImportTranslationFunctions && globalTranslationTypes || ''}
+${(options.experimental?.autoImportTranslationFunctions && globalTranslationTypes) || ''}
 
 export {}`
 }

src/module.ts

@@ -41,7 +41,8 @@ import { applyLayerOptions, checkLayerOptions, resolveLayerVueI18nConfigInfo } f
 import { generateTemplateNuxtI18nOptions } from './template'
 
 import type { HookResult } from '@nuxt/schema'
-import type { NuxtI18nOptions } from './types'
+import type { LocaleObject, NuxtI18nOptions } from './types'
+import type { Locale } from 'vue-i18n'
 
 export * from './types'
 
@@ -362,8 +363,11 @@ export default defineNuxtModule<NuxtI18nOptions>({
  }
 })
 
+// Prevent type errors while configuring locale codes, as generated types will conflict with changes
+type UserNuxtI18nOptions = Omit<NuxtI18nOptions, 'locales'> & { locales?: string[] | LocaleObject<string>[] }
+
 // Used by nuxt/module-builder for `types.d.ts` generation
-export interface ModuleOptions extends NuxtI18nOptions {}
+export interface ModuleOptions extends UserNuxtI18nOptions {}
 
 export interface ModulePublicRuntimeConfig {
  i18n: {
@@ -454,13 +458,13 @@ export interface ModuleRuntimeHooks {
  // NOTE: To make type inference work the function signature returns `HookResult`
  // Should return `string | void`
  'i18n:beforeLocaleSwitch': <Context = unknown>(params: {
- oldLocale: string
- newLocale: string
+ oldLocale: Locale
+ newLocale: Locale
  initialSetup: boolean
  context: Context
  }) => HookResult
 
- 'i18n:localeSwitched': (params: { oldLocale: string; newLocale: string }) => HookResult
+ 'i18n:localeSwitched': (params: { oldLocale: Locale; newLocale: Locale }) => HookResult
 }
 
 // Used by module for type inference in source code
@@ -470,10 +474,10 @@ declare module '#app' {
 
 declare module '@nuxt/schema' {
  interface NuxtConfig {
- ['i18n']?: Partial<ModuleOptions>
+ ['i18n']?: Partial<UserNuxtI18nOptions>
  }
  interface NuxtOptions {
- ['i18n']?: ModuleOptions
+ ['i18n']?: UserNuxtI18nOptions
  }
  interface NuxtHooks extends ModuleHooks {}
  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}

src/runtime/compatibility.ts

@@ -70,11 +70,11 @@ export function getLocale(i18n: I18n): Locale {
  return getI18nProperty(i18n, 'locale')
 }
 
-export function getLocales(i18n: I18n): string[] | LocaleObject[] {
+export function getLocales(i18n: I18n): Locale[] | LocaleObject[] {
  return getI18nProperty(i18n, 'locales')
 }
 
-export function getLocaleCodes(i18n: I18n): string[] {
+export function getLocaleCodes(i18n: I18n): Locale[] {
  return getI18nProperty(i18n, 'localeCodes')
 }
 
@@ -93,15 +93,15 @@ export function mergeLocaleMessage(i18n: I18n, locale: Locale, messages: Record<
 
 export async function onBeforeLanguageSwitch(
  i18n: I18n,
- oldLocale: string,
- newLocale: string,
+ oldLocale: Locale,
+ newLocale: Locale,
  initial: boolean,
  context: NuxtApp
 ) {
  return getI18nTarget(i18n).onBeforeLanguageSwitch(oldLocale, newLocale, initial, context)
 }
 
-export function onLanguageSwitched(i18n: I18n, oldLocale: string, newLocale: string) {
+export function onLanguageSwitched(i18n: I18n, oldLocale: Locale, newLocale: Locale) {
  return getI18nTarget(i18n).onLanguageSwitched(oldLocale, newLocale)
 }
 

src/runtime/components/NuxtLinkLocale.ts

@@ -1,4 +1,4 @@
-import { useLocalePath } from '#i18n'
+import { useLocalePath, type Locale } from '#i18n'
 import { defineComponent, computed, h } from 'vue'
 import { defineNuxtLink } from '#imports'
 import { hasProtocol } from 'ufo'
@@ -8,13 +8,13 @@ import type { NuxtLinkProps } from 'nuxt/app'
 
 const NuxtLinkLocale = defineNuxtLink({ componentName: 'NuxtLinkLocale' })
 
-export default defineComponent<NuxtLinkProps & { locale?: string }>({
+export default defineComponent<NuxtLinkProps & { locale?: Locale }>({
  name: 'NuxtLinkLocale',
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- FIXME
  props: {
  ...NuxtLinkLocale.props,
  locale: {
- type: String as PropType<string>,
+ type: String as PropType<Locale>,
  default: undefined,
  required: false
  }

src/runtime/components/SwitchLocalePathLink.ts

@@ -1,5 +1,5 @@
 import { SWITCH_LOCALE_PATH_LINK_IDENTIFIER } from '#build/i18n.options.mjs'
-import { useSwitchLocalePath } from '#i18n'
+import { useSwitchLocalePath, type Locale } from '#i18n'
 import { defineNuxtLink } from '#imports'
 import { Comment, defineComponent, h } from 'vue'
 
@@ -11,7 +11,7 @@ export default defineComponent({
  name: 'SwitchLocalePathLink',
  props: {
  locale: {
- type: String as PropType<string>,
+ type: String as PropType<Locale>,
  required: true
  }
  },