fix(optimizer): enable experimentalDecorators by default (#13981)

Author: sapphi-red

packages/vite/src/node/optimizer/index.ts

@@ -27,7 +27,7 @@ import {
 import { transformWithEsbuild } from '../plugins/esbuild'
 import { ESBUILD_MODULES_TARGET } from '../constants'
 import { esbuildCjsExternalPlugin, esbuildDepPlugin } from './esbuildDepPlugin'
-import { scanImports } from './scan'
+import { resolveTsconfigRaw, scanImports } from './scan'
 import { createOptimizeDepsIncludeResolver, expandGlobIds } from './resolve'
 export {
   initDepsOptimizer,
@@ -713,8 +713,12 @@ async function prepareEsbuildOptimizerRun(
 
   const optimizeDeps = getDepOptimizationConfig(config, ssr)
 
-  const { plugins: pluginsFromConfig = [], ...esbuildOptions } =
-    optimizeDeps?.esbuildOptions ?? {}
+  const {
+    plugins: pluginsFromConfig = [],
+    tsconfig,
+    tsconfigRaw,
+    ...esbuildOptions
+  } = optimizeDeps?.esbuildOptions ?? {}
 
   await Promise.all(
     Object.keys(depsInfo).map(async (id) => {
@@ -806,6 +810,8 @@ async function prepareEsbuildOptimizerRun(
     metafile: true,
     plugins,
     charset: 'utf8',
+    tsconfig,
+    tsconfigRaw: resolveTsconfigRaw(tsconfig, tsconfigRaw),
     ...esbuildOptions,
     supported: {
       'dynamic-import': true,

packages/vite/src/node/optimizer/scan.ts

@@ -3,7 +3,13 @@ import fsp from 'node:fs/promises'
 import path from 'node:path'
 import { performance } from 'node:perf_hooks'
 import glob from 'fast-glob'
-import type { BuildContext, Loader, OnLoadResult, Plugin } from 'esbuild'
+import type {
+  BuildContext,
+  BuildOptions,
+  Loader,
+  OnLoadResult,
+  Plugin,
+} from 'esbuild'
 import esbuild, { formatMessages, transform } from 'esbuild'
 import colors from 'picocolors'
 import type { ResolvedConfig } from '..'
@@ -224,16 +230,7 @@ async function prepareEsbuildScanner(
     logLevel: 'silent',
     plugins: [...plugins, plugin],
     tsconfig,
-    tsconfigRaw:
-      tsconfig || typeof tsconfigRaw === 'string'
-        ? tsconfigRaw
-        : {
-            ...tsconfigRaw,
-            compilerOptions: {
-              experimentalDecorators: true,
-              ...tsconfigRaw?.compilerOptions,
-            },
-          },
+    tsconfigRaw: resolveTsconfigRaw(tsconfig, tsconfigRaw),
     ...esbuildOptions,
   })
 }
@@ -666,3 +663,22 @@ function shouldExternalizeDep(resolvedId: string, rawId: string): boolean {
 function isScannable(id: string): boolean {
   return JS_TYPES_RE.test(id) || htmlTypesRE.test(id)
 }
+
+// esbuild v0.18 only transforms decorators when `experimentalDecorators` is set to `true`.
+// To preserve compat with the esbuild breaking change, we set `experimentalDecorators` to
+// `true` by default if it's unset.
+// TODO: Remove this in Vite 5 and check https://github.com/vitejs/vite/pull/13805#issuecomment-1633612320
+export function resolveTsconfigRaw(
+  tsconfig: string | undefined,
+  tsconfigRaw: BuildOptions['tsconfigRaw'],
+): BuildOptions['tsconfigRaw'] {
+  return tsconfig || typeof tsconfigRaw === 'string'
+    ? tsconfigRaw
+    : {
+        ...tsconfigRaw,
+        compilerOptions: {
+          experimentalDecorators: true,
+          ...tsconfigRaw?.compilerOptions,
+        },
+      }
+}