fix: only optimize configured locale files (#3433)

Author: BobbieGoede

specs/fixtures/issues/3404/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <NuxtRouteAnnouncer />
+    <NuxtPage />
+  </div>
+</template>

specs/fixtures/issues/3404/i18n/i18n.config.ts

@@ -0,0 +1,9 @@
+import en from './locales/en'
+import nl from './locales/nl'
+
+export default defineI18nConfig(() => ({
+  messages: {
+    en,
+    nl
+  }
+}))

specs/fixtures/issues/3404/i18n/locales/en/greeting.js

@@ -0,0 +1,3 @@
+export default {
+  hello: 'Hello!'
+}

specs/fixtures/issues/3404/i18n/locales/en/index.js

@@ -0,0 +1,5 @@
+import greeting from './greeting'
+
+export default {
+  greeting
+}

specs/fixtures/issues/3404/i18n/locales/nl/greeting.js

@@ -0,0 +1,3 @@
+export default {
+  hello: 'Hallo!'
+}

specs/fixtures/issues/3404/i18n/locales/nl/index.js

@@ -0,0 +1,5 @@
+import greeting from './greeting'
+
+export default {
+  greeting
+}

specs/fixtures/issues/3404/nuxt.config.ts

@@ -0,0 +1,7 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/i18n'],
+  i18n: {
+    locales: ['en', 'nl']
+  }
+})

specs/fixtures/issues/3404/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "fixture-3404",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@nuxtjs/i18n": "latest",
+    "nuxt": "latest"
+  }
+}

specs/fixtures/issues/3404/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1 id="translated-heading">{{ $t('greeting.hello') }}</h1>
+  </div>
+</template>

specs/issues/3404.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect, describe } from 'vitest'
+import { fileURLToPath } from 'node:url'
+import { createPage, setup, url } from '../utils'
+import { getText } from '../helper'
+
+describe('#3404', async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL(`../fixtures/issues/3404`, import.meta.url)),
+    browser: true
+  })
+
+  test('resource optimization excludes files not configured in `i18n.locales.*.files`', async () => {
+    const page = await createPage('/en')
+    const heading = await getText(page, '#translated-heading')
+    expect(heading).toEqual(`Hello!`)
+
+    await page.goto(url('/nl'))
+    const heading2 = await getText(page, '#translated-heading')
+    expect(heading2).toEqual(`Hallo!`)
+  })
+})

src/bundler.ts

@@ -1,14 +1,12 @@
 /* eslint-disable @typescript-eslint/no-floating-promises */
 import createDebug from 'debug'
-import { resolve } from 'pathe'
 import { extendViteConfig, addWebpackPlugin, addBuildPlugin, addTemplate, addRspackPlugin } from '@nuxt/kit'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n'
 import { toArray } from './utils'
 import { TransformMacroPlugin } from './transform/macros'
 import { ResourcePlugin } from './transform/resource'
 import { TransformI18nFunctionPlugin } from './transform/i18n-function-injection'
 import { asI18nVirtual } from './transform/utils'
-import { getLayerLangPaths } from './layers'
 
 import type { Nuxt } from '@nuxt/schema'
 import type { PluginOptions } from '@intlify/unplugin-vue-i18n'
@@ -19,13 +17,8 @@ const debug = createDebug('@nuxtjs/i18n:bundler')
 
 export async function extendBundler(ctx: I18nNuxtContext, nuxt: Nuxt) {
   const { options: nuxtOptions } = ctx
-  const langPaths = getLayerLangPaths(nuxt)
-  debug('langPaths -', langPaths)
-  const i18nModulePaths =
-    nuxtOptions?.i18nModules?.map(module => resolve(nuxt.options._layers[0].config.rootDir, module.langDir ?? '')) ?? []
-  debug('i18nModulePaths -', i18nModulePaths)
-  const localePaths = [...langPaths, ...i18nModulePaths]
-  const localeIncludePaths = localePaths.length ? localePaths.map(x => resolve(x, './**')) : undefined
+  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

src/layers.ts

@@ -145,22 +145,6 @@ const mergeLayerLocales = (options: NuxtI18nOptions, nuxt: Nuxt) => {
   return mergeConfigLocales(configs)
 }
 
-/**
- * Returns an array of absolute paths to each layers `langDir`
- */
-export const getLayerLangPaths = (nuxt: Nuxt) => {
-  const langPaths: string[] = []
-
-  for (const layer of nuxt.options._layers) {
-    const i18n = getLayerI18n(layer)
-    if (i18n?.restructureDir === false && i18n?.langDir == null) continue
-
-    langPaths.push(resolveLayerLangDir(layer, i18n || {}))
-  }
-
-  return langPaths
-}
-
 export async function resolveLayerVueI18nConfigInfo(options: NuxtI18nOptions) {
   const logger = useLogger(NUXT_I18N_MODULE_ID)
   const nuxt = useNuxt()

src/transform/resource.ts

@@ -9,7 +9,7 @@ import {
   NUXT_I18N_VIRTUAL_PREFIX
 } from '../constants'
 import { resolve, dirname } from 'pathe'
-import { parseSync } from '../utils/parse'
+import { findStaticImports } from 'mlly'
 import { resolvePath, tryUseNuxt } from '@nuxt/kit'
 import { transform as esbuildTransform } from 'esbuild'
 import type { SameShape, TransformOptions, TransformResult } from 'esbuild'
@@ -77,10 +77,10 @@ export const ResourcePlugin = (options: BundlerPluginOptions, ctx: I18nNuxtConte
         debug('transform', id)
         let code = _code
 
-        const parsed = parseSync(id, _code)
         // ensure imported resources are transformed as well
-        for (const x of parsed.module.staticImports) {
-          i18nPathSet.add(await resolvePath(resolve(dirname(id), x.moduleRequest.value)))
+        const staticImports = findStaticImports(_code)
+        for (const x of staticImports) {
+          i18nPathSet.add(await resolvePath(resolve(dirname(id), x.specifier)))
         }
 
         // transform typescript