feat: migrate to esbuild-loader

packages/bridge/package.json

@@ -25,7 +25,6 @@
   "dependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-transform-typescript": "^7.23.6",
     "@nuxt/bridge-schema": "3.0.0",
     "@nuxt/devalue": "^2.0.2",
     "@nuxt/kit": "3.9.1",
@@ -42,6 +41,7 @@
     "defu": "^6.1.4",
     "destr": "^2.0.2",
     "enhanced-resolve": "^5.15.0",
+    "esbuild-loader": "^4.0.2",
     "escape-string-regexp": "^5.0.0",
     "estree-walker": "^3.0.3",
     "externality": "^1.0.2",

packages/bridge/src/typescript.ts

@@ -1,5 +1,7 @@
 import { createRequire } from 'module'
 import { extendWebpackConfig, useNuxt } from '@nuxt/kit'
+import { transpile } from './vite/utils/transpile'
+import { esbuild } from './webpack/esbuild'
 
 const extensions = ['ts', 'tsx', 'cts', 'mts']
 const typescriptRE = /\.[cm]?tsx?$/
@@ -20,8 +22,7 @@ export function setupTypescript () {
   const _require = createRequire(import.meta.url)
   nuxt.options.build.babel.plugins.unshift(
     _require.resolve('@babel/plugin-proposal-optional-chaining'),
-    _require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
-    [_require.resolve('@babel/plugin-transform-typescript'), { isTSX: true }]
+    _require.resolve('@babel/plugin-proposal-nullish-coalescing-operator')
   )
 
   extendWebpackConfig((config) => {
@@ -31,5 +32,7 @@ export function setupTypescript () {
       ...babelRule,
       test: typescriptRE
     })
+
+    esbuild({ isServer: nuxt.options.ssr, nuxt, config, transpile: transpile({ isDev: nuxt.options.dev }) })
   })
 }

packages/bridge/src/vite/utils/transpile.ts

@@ -8,7 +8,7 @@ interface Envs {
   isServer?: boolean
 }
 
-export function transpile (envs: Envs): Array<string | RegExp> {
+export function transpile (envs: Envs): Array<RegExp> {
   const nuxt = useNuxt()
   const transpile = []
 

packages/bridge/src/webpack/esbuild.ts

@@ -0,0 +1,56 @@
+import { EsbuildPlugin } from 'esbuild-loader'
+import type { Configuration } from 'webpack'
+import type { Nuxt } from '@nuxt/schema'
+
+export interface WebpackConfigContext {
+  nuxt: Nuxt
+  config: Configuration
+  isServer: boolean
+  transpile: RegExp[]
+}
+
+export function esbuild (ctx: WebpackConfigContext) {
+  // https://esbuild.github.io/getting-started/#bundling-for-the-browser
+  // https://gs.statcounter.com/browser-version-market-share
+  // https://nodejs.org/en/
+  const target = ctx.isServer ? 'es2020' : 'chrome85'
+
+  // https://github.com/nuxt/nuxt/issues/13052
+  ctx.config.optimization.minimizer = ctx.config.optimization.minimizer || []
+  ctx.config.optimization.minimizer!.push(new EsbuildPlugin())
+
+  ctx.config.module!.rules!.push(
+    {
+      test: /\.m?[jt]s$/i,
+      loader: 'esbuild-loader',
+      exclude: (file) => {
+        // Not exclude files outside node_modules
+        file = file.split('node_modules', 2)[1]
+        if (!file) { return false }
+
+        return !ctx.transpile.some((module) => {
+          return module.test(file)
+        })
+      },
+
+      options: {
+        target,
+        ...ctx.nuxt.options.build.loaders.esbuild,
+        loader: 'ts',
+        tsconfigRaw: '{}'
+      }
+    },
+    {
+      test: /\.m?[jt]sx$/,
+      loader: 'esbuild-loader',
+      options: {
+        target,
+        ...ctx.nuxt.options.build.loaders.esbuild,
+        loader: 'tsx',
+        jsxFactory: 'h',
+        jsxFragment: 'Fragment',
+        tsconfigRaw: '{}'
+      }
+    }
+  )
+}