fix: registerModule hook not working for js/ts format resources (#2188)

playground/module-experimental/index.ts

@@ -0,0 +1,36 @@
+import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+
+// Module options TypeScript interface definition
+export interface ModuleOptions {}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: 'module-experimental',
+    configKey: 'moduleExperimental'
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url)
+
+    // @ts-ignore
+    nuxt.hook('i18n:registerModule', (register: any) => {
+      register({
+        // langDir path needs to be resolved
+        langDir: resolver.resolve('./lang'),
+        locales: [
+          {
+            code: 'de',
+            iso: 'de-DE',
+            file: 'de.ts'
+          },
+          {
+            code: 'en',
+            iso: 'en-US',
+            file: 'en.ts'
+          }
+        ]
+      })
+    })
+  }
+})

playground/module-experimental/lang/de.ts

@@ -0,0 +1,5 @@
+export default defineI18nLocale(locale => {
+  return {
+    goodDay: 'Guten Tag'
+  }
+})

playground/module-experimental/lang/en.ts

@@ -0,0 +1,5 @@
+export default defineI18nLocale(locale => {
+  return {
+    goodDay: 'Good day'
+  }
+})

playground/nuxt.config.ts

@@ -1,5 +1,6 @@
 import Module1 from './module1'
 import LayerModule from './layer-module'
+import ModuleExperimental from './module-experimental'
 import type { NuxtApp } from 'nuxt/dist/app/index'
 
 // https://nuxt.com/docs/guide/directory-structure/nuxt.config
@@ -10,6 +11,7 @@ export default defineNuxtConfig({
       console.log(nuxt.options._installedModules)
     },
     Module1,
+    ModuleExperimental,
     LayerModule,
     /*
     [

playground/pages/index.vue

@@ -5,7 +5,18 @@ import { computed } from 'vue'
 import { LocaleObject } from '#i18n'
 
 const route = useRoute()
-const { t, rt, tm, strategy, locale, locales, localeProperties, setLocale, defaultLocale, finalizePendingLocaleChange } = useI18n()
+const {
+  t,
+  rt,
+  tm,
+  strategy,
+  locale,
+  locales,
+  localeProperties,
+  setLocale,
+  defaultLocale,
+  finalizePendingLocaleChange
+} = useI18n()
 const localePath = useLocalePath()
 const switchLocalePath = useSwitchLocalePath()
 const getRouteBaseName = useRouteBaseName()
@@ -20,6 +31,7 @@ console.log('localeProperties', localeProperties)
 console.log('foo', t('foo'))
 console.log('message if local layer merged:', t('layerText'))
 console.log('message if github layer merged:', t('layer-test-key'))
+console.log('experimental module', t('goodDay'))
 
 function getLocaleName(code: string) {
   const locale = (locales.value as LocaleObject[]).find(i => i.code === code)

specs/fixtures/basic_layer/layer-module/index.ts

@@ -22,7 +22,7 @@ export default defineNuxtModule({
           {
             code: 'nl',
             iso: 'nl-NL',
-            file: 'nl.json',
+            file: 'nl.ts',
             name: 'Nederlands'
           }
         ]

specs/fixtures/basic_layer/layer-module/locales/nl.ts

@@ -0,0 +1,3 @@
+export default defineI18nLocale(locale => ({
+  moduleLayerText: 'This is a merged module layer locale key in Dutch'
+}))

specs/fixtures/basic_layer/layer-module/nuxt.config.ts

@@ -25,7 +25,7 @@ export default defineNuxtConfig({
       {
         code: 'nl',
         iso: 'nl-NL',
-        file: 'nl.json',
+        file: 'nl.ts',
         // domain: 'localhost',
         name: 'Nederlands'
       }

specs/fixtures/basic_layer/nuxt.config.ts

@@ -30,6 +30,9 @@ export default defineNuxtConfig({
     lazy: true,
     langDir: 'lang',
     defaultLocale: 'en',
+    experimental: {
+      jsTsFormatResource: true
+    },
     locales: [
       {
         code: 'en',

specs/fixtures/basic_layer/pages/index.vue

@@ -64,6 +64,9 @@ function onClick() {
         <li class="switch-to-fr">
           <NuxtLink :to="switchLocalePath('fr')">Français</NuxtLink>
         </li>
+        <li class="switch-to-nl">
+          <NuxtLink :to="switchLocalePath('nl')">Nederlands</NuxtLink>
+        </li>
       </ul>
     </section>
     <section id="locale-route-usages">

specs/register_module.spec.ts

@@ -21,4 +21,10 @@ test('register module hook', async () => {
   await page.locator('.switch-to-fr a').click()
 
   expect(await getText(page, '#register-module')).toEqual('This is a merged module layer locale key in French')
+
+  // click `nl` lang switch link
+  await page.locator('.switch-to-nl a').click()
+  await page.waitForLoadState('networkidle')
+
+  expect(await getText(page, '#register-module')).toEqual('This is a merged module layer locale key in Dutch')
 })

src/utils.ts

@@ -59,7 +59,8 @@ export function getNormalizedLocales(locales: NuxtI18nOptions['locales']): Local
 }
 
 export async function resolveLocales(path: string, locales: LocaleObject[]): Promise<LocaleInfo[]> {
-  const files = await resolveFiles(path, '**/*{json,json5,yaml,yml,js,cjs,mjs,ts,cts,mts}')
+  const files = await Promise.all(locales.flatMap(x => (x.file ? [x.file] : x.files ?? [])).map(x => resolve(path, x)))
+
   const find = (f: string) => files.find(file => file === resolve(path, f))
   return (locales as LocaleInfo[]).map(locale => {
     if (locale.file) {