feat: use OXC for transform

Co-authored-by: underfin <[email protected]>
Co-authored-by: IWANABETHATGUY <[email protected]>

Author: 3 people

packages/vite/index.cjs

@@ -15,6 +15,7 @@ const asyncFunctions = [
   'createServer',
   'preview',
   'transformWithEsbuild',
+  'transformWithOxc',
   'resolveConfig',
   'optimizeDeps',
   'formatPostcssSourceMap',

packages/vite/package.json

@@ -85,6 +85,7 @@
   },
   "//": "READ CONTRIBUTING.md to understand what to put under deps vs. devDeps!",
   "dependencies": {
+    "@oxc-project/runtime": "^0.53.0",
     "esbuild": "^0.25.0",
     "postcss": "^8.5.3",
     "rolldown": "1.0.0-beta.3-commit.62fba31"

packages/vite/rollup.dts.config.ts

@@ -54,6 +54,10 @@ const identifierReplacements: Record<string, Record<string, string>> = {
     TransformPluginContext$1: 'rolldown.TransformPluginContext',
     TransformResult$1: 'rolldown.TransformResult',
   },
+  'rolldown/experimental': {
+    TransformOptions$2: 'rolldown_experimental_TransformOptions',
+    TransformResult$3: 'rolldown_experimental_TransformResult',
+  },
   esbuild: {
     TransformResult$2: 'esbuild_TransformResult',
     TransformOptions$1: 'esbuild_TransformOptions',

packages/vite/src/node/__tests__/plugins/import.spec.ts

@@ -75,7 +75,10 @@ describe('transformCjsImport', () => {
       ),
     ).toBe(
       'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
-        `const react = ((m) => m?.__esModule ? m : { ...typeof m === "object" && !Array.isArray(m) || typeof m === "function" ? m : {}, default: m })(__vite__cjsImport0_react)`,
+        'const react = ((m) => m?.__esModule ? m : {\n' +
+        '\t...typeof m === "object" && !Array.isArray(m) || typeof m === "function" ? m : {},\n' +
+        '\tdefault: m\n' +
+        '})(__vite__cjsImport0_react)',
     )
   })
 

packages/vite/src/node/build.ts

@@ -55,6 +55,7 @@ import {
   mergeWithDefaults,
   normalizePath,
   partialEncodeURIPath,
+  unique,
 } from './utils'
 import { perEnvironmentPlugin, resolveEnvironmentPlugins } from './plugin'
 import { manifestPlugin } from './plugins/manifest'
@@ -84,6 +85,7 @@ import {
   createFilterForTransform,
   createIdFilter,
 } from './plugins/pluginFilter'
+import { buildOxcPlugin } from './plugins/oxc'
 
 export interface BuildEnvironmentOptions {
   /**
@@ -434,6 +436,11 @@ export function resolveBuildEnvironmentOptions(
   if (merged.target === 'modules') {
     merged.target = ESBUILD_MODULES_TARGET
   }
+  // dedupe target
+  if (Array.isArray(merged.target)) {
+    // esbuild allowed duplicate targets but oxc does not
+    merged.target = unique(merged.target)
+  }
 
   // normalize false string into actual false
   if ((merged.minify as string) === 'false') {
@@ -487,7 +494,8 @@ export async function resolveBuildPlugins(config: ResolvedConfig): Promise<{
     ],
     post: [
       buildImportAnalysisPlugin(config),
-      buildEsbuildPlugin(),
+      buildOxcPlugin(),
+      ...(config.build.minify === 'esbuild' ? [buildEsbuildPlugin()] : []),
       terserPlugin(config),
       ...(!config.isWorker
         ? [manifestPlugin(), ssrManifestPlugin(), buildReporterPlugin(config)]

packages/vite/src/node/config.ts

@@ -103,6 +103,7 @@ import { createIdResolver } from './idResolver'
 import { runnerImport } from './ssr/runnerImport'
 import { getAdditionalAllowedHosts } from './server/middlewares/hostCheck'
 import { convertEsbuildPluginToRolldownPlugin } from './optimizer/pluginConverter'
+import { type OxcOptions, convertEsbuildConfigToOxcConfig } from './plugins/oxc'
 
 const debug = createDebugger('vite:config', { depth: 10 })
 const promisifiedRealpath = promisify(fs.realpath)
@@ -354,6 +355,11 @@ export interface UserConfig extends DefaultEnvironmentOptions {
    * Or set to `false` to disable esbuild.
    */
   esbuild?: ESBuildOptions | false
+  /**
+   * Transform options to pass to esbuild.
+   * Or set to `false` to disable OXC.
+   */
+  oxc?: OxcOptions | false
   /**
    * Specify additional picomatch patterns to be treated as static assets.
    */
@@ -596,6 +602,7 @@ export interface ResolvedConfig
       css: ResolvedCSSOptions
       json: Required<JsonOptions>
       esbuild: ESBuildOptions | false
+      oxc: OxcOptions | false
       server: ResolvedServerOptions
       dev: ResolvedDevEnvironmentOptions
       /** @experimental */
@@ -1553,6 +1560,17 @@ export async function resolveConfig(
 
   const preview = resolvePreviewOptions(config.preview, server)
 
+  let oxc: OxcOptions | false | undefined = config.oxc
+  if (config.esbuild) {
+    if (config.oxc) {
+      logger.warn(
+        `Found esbuild and oxc options, will use oxc and ignore esbuild at transformer.`,
+      )
+    } else {
+      oxc = convertEsbuildConfigToOxcConfig(config.esbuild, logger)
+    }
+  }
+
   resolved = {
     configFile: configFile ? normalizePath(configFile) : undefined,
     configFileDependencies: configFileDependencies.map((name) =>
@@ -1574,13 +1592,27 @@ export async function resolveConfig(
     plugins: userPlugins, // placeholder to be replaced
     css: resolveCSSOptions(config.css),
     json: mergeWithDefaults(configDefaults.json, config.json ?? {}),
+    // preserve esbuild for buildEsbuildPlugin
     esbuild:
       config.esbuild === false
         ? false
         : {
             jsxDev: !isProduction,
             ...config.esbuild,
           },
+    oxc:
+      oxc === false
+        ? false
+        : {
+            ...oxc,
+            jsx:
+              typeof oxc?.jsx === 'string'
+                ? oxc.jsx
+                : {
+                    development: oxc?.jsx?.development ?? !isProduction,
+                    ...oxc?.jsx,
+                  },
+          },
     server,
     builder,
     preview,

packages/vite/src/node/index.ts

@@ -19,6 +19,7 @@ export { createIdResolver } from './idResolver'
 
 export { formatPostcssSourceMap, preprocessCSS } from './plugins/css'
 export { transformWithEsbuild } from './plugins/esbuild'
+export { transformWithOxc } from './plugins/oxc'
 export { buildErrorMessage } from './server/middlewares/error'
 
 export {
@@ -139,6 +140,7 @@ export type {
 export type { JsonOptions } from './plugins/json'
 export type { TransformOptions as EsbuildTransformOptions } from 'esbuild'
 export type { ESBuildOptions, ESBuildTransformResult } from './plugins/esbuild'
+export type { OxcOptions } from './plugins/oxc'
 export type { Manifest, ManifestChunk } from './plugins/manifest'
 export type { ResolveOptions, InternalResolveOptions } from './plugins/resolve'
 export type { SplitVendorChunkCache } from './plugins/splitVendorChunk'

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

@@ -28,10 +28,10 @@ import {
   tryStatSync,
   unique,
 } from '../utils'
-import { transformWithEsbuild } from '../plugins/esbuild'
 import { METADATA_FILENAME } from '../constants'
 import { isWindows } from '../../shared/utils'
 import type { Environment } from '../environment'
+import { transformWithOxc } from '../plugins/oxc'
 import { ScanEnvironment, scanImports } from './scan'
 import { createOptimizeDepsIncludeResolver, expandGlobIds } from './resolve'
 import {
@@ -1126,10 +1126,10 @@ export async function extractExportsData(
     if (lang !== 'jsx' && lang !== 'tsx' && lang !== 'ts') {
       throw new Error(`Unable to parse : ${filePath}.`)
     }
-    const transformed = await transformWithEsbuild(
+    const transformed = await transformWithOxc(
       entryContent,
       filePath,
-      { loader: lang },
+      { lang },
       undefined,
       environment.config,
     )

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

@@ -6,7 +6,6 @@ import { watchPackageDataPlugin } from '../packages'
 import { jsonPlugin } from './json'
 import { resolvePlugin } from './resolve'
 import { optimizedDepsPlugin } from './optimizedDeps'
-import { esbuildPlugin } from './esbuild'
 import { importAnalysisPlugin } from './importAnalysis'
 import { cssAnalysisPlugin, cssPlugin, cssPostPlugin } from './css'
 import { assetPlugin } from './asset'
@@ -27,6 +26,7 @@ import {
   createFilterForTransform,
   createIdFilter,
 } from './pluginFilter'
+import { oxcPlugin } from './oxc'
 
 export async function resolvePlugins(
   config: ResolvedConfig,
@@ -67,7 +67,7 @@ export async function resolvePlugins(
     }),
     htmlInlineProxyPlugin(config),
     cssPlugin(config),
-    config.esbuild !== false ? esbuildPlugin(config) : null,
+    config.oxc !== false ? oxcPlugin(config) : null,
     jsonPlugin(config.json, isBuild),
     wasmHelperPlugin(),
     webWorkerPlugin(config),