fix: transform ts locale files with esbuild (#3428)

* fix: transform ts locale files including their imports using `esbuild`

* test: add ts locale file with type annotation

Author: BobbieGoede

build.config.ts

@@ -7,6 +7,7 @@ export default defineBuildConfig({
     'node:url',
     'webpack',
     '@rspack/core',
+    'oxc-parser',
     '@babel/parser',
     'unplugin-vue-router',
     'unplugin-vue-router/options'

package.json

@@ -108,12 +108,13 @@
     "@vue/compiler-sfc": "^3.5.13",
     "debug": "^4.3.5",
     "defu": "^6.1.4",
+    "esbuild": "^0.25.1",
     "estree-walker": "^3.0.3",
     "is-https": "^4.0.0",
     "knitwork": "^1.2.0",
     "magic-string": "^0.30.17",
     "mlly": "^1.7.4",
-    "oxc-parser": "^0.53.0",
+    "oxc-parser": "^0.61.0",
     "pathe": "^2.0.3",
     "ufo": "^1.5.4",
     "unplugin": "^2.2.1",

pnpm-lock.yaml

@@ -0,0 +1,6 @@
+export default defineI18nLocale(
+  () =>
+    ({
+      'server-key': 'Hello!'
+    }) as Record<string, string> // types should be stripped during transformation
+)

specs/fixtures/layers/layer-server/locales/nl.ts

@@ -18,6 +18,12 @@ export default defineNuxtConfig({
         language: 'ja-JP',
         file: 'ja.yaml',
         name: 'Japanese'
+      },
+      {
+        code: 'nl',
+        language: 'nl-NL',
+        file: 'nl.ts',
+        name: 'Nederlands'
       }
     ]
   }

specs/fixtures/layers/layer-server/nuxt.config.ts

@@ -8,10 +8,22 @@ import {
   NUXT_I18N_COMPOSABLE_DEFINE_CONFIG,
   NUXT_I18N_VIRTUAL_PREFIX
 } from '../constants'
+import { resolve, dirname } from 'pathe'
+import { parseSync } from '../utils/parse'
+import { resolvePath, tryUseNuxt } from '@nuxt/kit'
+import { transform as esbuildTransform } from 'esbuild'
+import type { SameShape, TransformOptions, TransformResult } from 'esbuild'
 
 import type { BundlerPluginOptions } from './utils'
 import type { I18nNuxtContext } from '../context'
 
+async function transform<T extends TransformOptions>(
+  input: string | Uint8Array,
+  options?: SameShape<TransformOptions, T>
+): Promise<TransformResult<T>> {
+  return await esbuildTransform(input, { ...tryUseNuxt()?.options.esbuild.options, ...options })
+}
+
 const debug = createDebug('@nuxtjs/i18n:transform:resource')
 
 export const ResourcePlugin = (options: BundlerPluginOptions, ctx: I18nNuxtContext) =>
@@ -61,8 +73,20 @@ export const ResourcePlugin = (options: BundlerPluginOptions, ctx: I18nNuxtConte
       /**
        * Match and replace `defineI18nX(<content>)` with its `<content>`
        */
-      transform(code, id) {
+      async transform(_code, id) {
         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)))
+        }
+
+        // transform typescript
+        if (/(c|m)?ts$/.test(id)) {
+          code = (await transform(_code, { loader: 'ts' })).code
+        }
 
         const s = new MagicString(code)
         const matches = code.matchAll(DEFINE_I18N_FN_RE)