fix: auto declare typescript regression (#3777)

Author: BobbieGoede

src/transform/i18n-function-injection.ts

@@ -22,6 +22,12 @@ const TRANSLATION_FUNCTIONS_MAP: Record<(typeof TRANSLATION_FUNCTIONS)[number],
   $te: 'te: $te'
 }
 
+const QUERY_RE = /\?.*$/
+
+function withoutQuery(id: string) {
+  return id.replace(QUERY_RE, '')
+}
+
 export const TransformI18nFunctionPlugin = (options: BundlerPluginOptions) =>
   createUnplugin(() => {
     return {
@@ -37,11 +43,12 @@ export const TransformI18nFunctionPlugin = (options: BundlerPluginOptions) =>
           code: { include: TRANSLATION_FUNCTIONS_RE }
         },
         handler(code, id) {
-          const scriptContent = extractScriptSetupContent(code)
-          if (!scriptContent) return
+          const script = extractScriptSetupContent(code)
+          if (!script) return
 
-          const s = new MagicString(code)
-          const missing = collectMissingI18nFunctions(scriptContent.code, id)
+          // replace .vue extension with .ts or .tsx
+          const filepath = withoutQuery(id).replace(/\.\w+$/, '.' + script.loader)
+          const missing = collectMissingI18nFunctions(script.code, filepath)
           if (!missing.size) return
 
           // only add variables when used without having been declared
@@ -51,7 +58,8 @@ export const TransformI18nFunctionPlugin = (options: BundlerPluginOptions) =>
           }
 
           // add variable declaration at the start of <script>, `autoImports` does the rest
-          s.appendLeft(scriptContent.start, `\nconst { ${assignments.join(', ')} } = useI18n()\n`)
+          const s = new MagicString(code)
+          s.appendLeft(script.start, `\nconst { ${assignments.join(', ')} } = useI18n()\n`)
 
           return {
             code: s.toString(),
@@ -88,6 +96,10 @@ const SFC_SCRIPT_COMPLEX_RE = /<script(?<attrs>[^>]*)>(?<content>[\s\S]*?)<\/scr
 function extractScriptSetupContent(sfc: string) {
   const match = sfc.match(SFC_SCRIPT_COMPLEX_RE)
   if (match?.groups?.content && match.groups.attrs && match.groups.attrs.indexOf('setup') !== -1) {
-    return { code: match.groups.content.trim(), start: sfc.indexOf(match.groups.content) }
+    return {
+      code: match.groups.content.trim(),
+      loader: match.groups.attrs && /[tj]sx/.test(match.groups.attrs) ? 'tsx' : 'ts',
+      start: sfc.indexOf(match.groups.content)
+    }
   }
 }

test/fn-injection.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { collectMissingI18nFunctions } from '../src/transform/i18n-function-injection'
 
 describe('collectMissingI18nFunctions', () => {
-  const id = 'test.vue'
+  const id = 'test.ts'
 
   it('collects undeclared i18n function calls', () => {
     const script = `
@@ -28,4 +28,15 @@ describe('collectMissingI18nFunctions', () => {
       `
     expect(collectMissingI18nFunctions(script, id)).toEqual(new Set(['$d']))
   })
+
+  it('collects i18n function calls from typescript', () => {
+    const script = `
+        const helloText = $t('hello')
+
+        function myFn(val: string) {
+          return val
+        }
+      `
+    expect(collectMissingI18nFunctions(script, id)).toEqual(new Set(['$t']))
+  })
 })