feat!: transform using esbuild and separate ts generator (#478)

* feat!: transform using `esbuild` and separate ts generator

* fix: update lockfile

* fix: remove unused dependency

* fix: remove unused ignore entry

Author: BobbieGoede

knip.config.ts

@@ -6,6 +6,6 @@ export default {
     'examples/rspack/rspack.config.mjs' // cannot resolve rspack plugin ...
   ],
   ignore: ['**/fixtures/**', '.unmaintained/**'],
-  ignoreDependencies: ['@babel/preset-typescript', 'ts-loader', 'lint-staged'],
+  ignoreDependencies: ['ts-loader', 'lint-staged'],
   ignoreBinaries: ['dev']
 } satisfies KnipConfig

packages/bundle-utils/package.json

@@ -18,19 +18,17 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-typescript": "^7.26.0",
     "@intlify/message-compiler": "next",
     "@intlify/shared": "catalog:intlify",
     "acorn": "^8.8.2",
+    "esbuild": "^0.25.1",
     "escodegen": "^2.1.0",
     "estree-walker": "^2.0.2",
     "jsonc-eslint-parser": "^2.3.0",
     "source-map-js": "^1.0.1",
     "yaml-eslint-parser": "^1.2.2"
   },
   "devDependencies": {
-    "@types/babel__core": "^7.20.5",
     "@types/escodegen": "^0.0.10",
     "@types/estree": "^1.0.0",
     "unbuild": "catalog:"

packages/bundle-utils/src/index.ts

@@ -3,4 +3,5 @@ export { checkInstallPackage, getVueI18nVersion } from './deps'
 export type { InstalledPackage } from './deps'
 export { DynamicResourceError, generate as generateJavaScript } from './js'
 export { generate as generateJSON } from './json'
+export { generate as generateTypescript } from './ts'
 export { generate as generateYAML } from './yaml'

packages/bundle-utils/src/js.ts

@@ -2,7 +2,6 @@
  * Code generator for i18n js resource
  */
 
-import { transform } from '@babel/core'
 import { isBoolean, isNumber, isString } from '@intlify/shared'
 import { parse as parseJavaScript } from 'acorn'
 import { generate as generateJavaScript } from 'escodegen'
@@ -42,8 +41,7 @@ export function generate(
     jit = false
   }: CodeGenOptions
 ): CodeGenResult<Node> {
-  const target = Buffer.isBuffer(targetSource) ? targetSource.toString() : targetSource
-  let value = target
+  const value = Buffer.isBuffer(targetSource) ? targetSource.toString() : targetSource
 
   const options = {
     type,
@@ -63,24 +61,6 @@ export function generate(
   } as CodeGenOptions
   const generator = createCodeGenerator(options)
 
-  if (options.filename && /.[c|m]?ts$/.test(options.filename)) {
-    const transformed = transform(value, {
-      filename: options.filename,
-      sourceMaps: options.sourceMap,
-      babelrc: false,
-      configFile: false,
-      browserslistConfigFile: false,
-      comments: false,
-      envName: 'development',
-      presets: ['@babel/preset-typescript']
-    })
-
-    if (transformed && transformed.code) {
-      value = transformed.code
-      options.source = transformed.code
-    }
-  }
-
   const ast = parseJavaScript(value, {
     ecmaVersion: 'latest',
     sourceType: 'module',

packages/bundle-utils/src/ts.ts

@@ -0,0 +1,64 @@
+/**
+ * Code generator for i18n ts resource
+ *
+ * An async wrapper for the js generator which transforms ts to js before generating
+ */
+
+import { transform } from 'esbuild'
+import { Node } from 'estree'
+import { CodeGenOptions, CodeGenResult } from './codegen'
+import { generate as generateJavaScript } from './js'
+
+/**
+ * @internal
+ */
+export async function generate(
+  targetSource: string | Buffer,
+  {
+    type = 'plain',
+    filename = 'vue-i18n-loader.js',
+    inSourceMap = undefined,
+    locale = '',
+    isGlobal = false,
+    sourceMap = false,
+    env = 'development',
+    forceStringify = false,
+    onError = undefined,
+    onWarn = undefined,
+    strictMessage = true,
+    escapeHtml = false,
+    allowDynamic = false,
+    jit = false
+  }: CodeGenOptions
+): Promise<CodeGenResult<Node>> {
+  let value = Buffer.isBuffer(targetSource) ? targetSource.toString() : targetSource
+
+  const options = {
+    type,
+    source: value,
+    sourceMap,
+    locale,
+    isGlobal,
+    inSourceMap,
+    env,
+    filename,
+    forceStringify,
+    onError,
+    onWarn,
+    strictMessage,
+    escapeHtml,
+    allowDynamic,
+    jit
+  } as CodeGenOptions
+
+  if (options.filename && /.[c|m]?ts$/.test(options.filename)) {
+    const transformed = await transform(value, { loader: 'ts' })
+
+    if (transformed && transformed.code) {
+      value = transformed.code
+      options.source = transformed.code
+    }
+  }
+
+  return generateJavaScript(value, options)
+}

packages/unplugin-vue-i18n/src/core/resource.ts

@@ -2,6 +2,7 @@ import {
   DynamicResourceError,
   generateJavaScript,
   generateJSON,
+  generateTypescript,
   generateYAML
 } from '@intlify/bundle-utils'
 import { assign, generateCodeFrame, isEmptyObject } from '@intlify/shared'
@@ -17,7 +18,7 @@ import { parse } from 'vue/compiler-sfc'
 import { checkVuePlugin, error, getVitePlugin, raiseError, resolveNamespace, warn } from '../utils'
 import { getVueCompiler, parseVueRequest } from '../vue'
 
-import type { CodeGenOptions } from '@intlify/bundle-utils'
+import type { CodeGenOptions, CodeGenResult } from '@intlify/bundle-utils'
 import type { RollupPlugin, UnpluginContextMeta, UnpluginOptions } from 'unplugin'
 import type { ResolvedOptions } from '../core/options'
 import type { SFCLangFormat } from '../types'
@@ -274,7 +275,7 @@ export function resourcePlugin(opts: ResolvedOptions, meta: UnpluginContextMeta)
         debug('parseOptions', parseOptions)
 
         try {
-          const { code: generatedCode, map } = generate(code, parseOptions)
+          const { code: generatedCode, map } = await generate(code, parseOptions)
 
           debug('generated code', generatedCode)
           debug('sourcemap', map, ctx.sourceMap)
@@ -323,7 +324,7 @@ export function resourcePlugin(opts: ResolvedOptions, meta: UnpluginContextMeta)
         }
 
         const generate = getGenerator(langInfo, generateYAML)
-        const { code: generatedCode, map } = generate(source, parseOptions)
+        const { code: generatedCode, map } = await generate(source, parseOptions)
         debug('generated code', generatedCode)
         debug('sourcemap', map, ctx.sourceMap)
 
@@ -334,9 +335,11 @@ export function resourcePlugin(opts: ResolvedOptions, meta: UnpluginContextMeta)
     }
   } as UnpluginOptions
 }
-
-type GeneratorFn = typeof generateJSON | typeof generateJavaScript | typeof generateYAML
-function getGenerator(ext: string, fallback: GeneratorFn = generateJSON) {
+type GeneratorLike = (
+  source: string | Buffer,
+  options: CodeGenOptions
+) => Promise<CodeGenResult<unknown>> | CodeGenResult<unknown>
+function getGenerator(ext: string, fallback: GeneratorLike = generateJSON) {
   if (/\.?json5?$/.test(ext)) {
     return generateJSON
   }
@@ -345,10 +348,14 @@ function getGenerator(ext: string, fallback: GeneratorFn = generateJSON) {
     return generateYAML
   }
 
-  if (/\.[c|m]?[j|t]s$/.test(ext)) {
+  if (/\.[c|m]?js$/.test(ext)) {
     return generateJavaScript
   }
 
+  if (/\.[c|m]?ts$/.test(ext)) {
+    return generateTypescript
+  }
+
   return fallback
 }