feat: using rolldown vite

Author: underfin

package.json

@@ -56,14 +56,14 @@
     "picocolors": "^1.1.1",
     "playwright-chromium": "^1.49.0",
     "prettier": "3.3.3",
+    "rolldown-vite": "catalog:",
     "rollup": "^4.27.4",
     "simple-git-hooks": "^2.11.1",
     "tsx": "^4.19.2",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.16.0",
     "unbuild": "2.0.0",
-    "vite": "catalog:",
-    "vitest": "^2.1.6",
+    "vitest": "^2.1.8",
     "vue": "catalog:"
   },
   "simple-git-hooks": {

packages/plugin-vue-jsx/package.json

@@ -40,10 +40,10 @@
     "@vue/babel-plugin-jsx": "^1.2.5"
   },
   "devDependencies": {
-    "vite": "catalog:"
+    "rolldown-vite": "catalog:"
   },
   "peerDependencies": {
-    "vite": "^5.0.0 || ^6.0.0",
+    "rolldown-vite": "catalog:",
     "vue": "^3.0.0"
   }
 }

packages/plugin-vue-jsx/src/index.ts

@@ -3,9 +3,9 @@ import path from 'node:path'
 import type { types } from '@babel/core'
 import * as babel from '@babel/core'
 import jsx from '@vue/babel-plugin-jsx'
-import { createFilter, normalizePath } from 'vite'
+import { createFilter, normalizePath } from 'rolldown-vite'
 import type { ComponentOptions } from 'vue'
-import type { Plugin } from 'vite'
+import type { Plugin } from 'rolldown-vite'
 import type { Options } from './types'
 
 export * from './types'
@@ -56,9 +56,16 @@ function vueJsxPlugin(options: Options = {}): Plugin {
       return {
         // only apply esbuild to ts files
         // since we are handling jsx and tsx now
-        esbuild: {
+        oxc: {
           include: /\.ts$/,
         },
+        optimizeDeps: {
+          rollupOptions: {
+            jsx: {
+              mode: 'classic', // TODO using rolldown jsx preserve
+            },
+          },
+        },
         define: {
           __VUE_OPTIONS_API__: config.define?.__VUE_OPTIONS_API__ ?? true,
           __VUE_PROD_DEVTOOLS__: config.define?.__VUE_PROD_DEVTOOLS__ ?? false,
@@ -138,6 +145,7 @@ function vueJsxPlugin(options: Options = {}): Plugin {
           return {
             code: result.code,
             map: result.map,
+            moduleType: 'js',
           }
         }
 
@@ -263,6 +271,7 @@ function vueJsxPlugin(options: Options = {}): Plugin {
         return {
           code: result.code,
           map: result.map,
+          moduleType: 'js',
         }
       }
     },

packages/plugin-vue-jsx/src/types.ts

@@ -1,5 +1,5 @@
 import type { VueJSXPluginOptions } from '@vue/babel-plugin-jsx'
-import type { FilterPattern } from 'vite'
+import type { FilterPattern } from 'rolldown-vite'
 
 export interface FilterOptions {
   include?: FilterPattern

packages/plugin-vue/package.json

@@ -35,17 +35,17 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#readme",
   "peerDependencies": {
-    "vite": "^5.0.0 || ^6.0.0",
+    "rolldown-vite": "catalog:",
     "vue": "^3.2.25"
   },
   "devDependencies": {
     "@jridgewell/gen-mapping": "^0.3.5",
     "@jridgewell/trace-mapping": "^0.3.25",
     "debug": "^4.3.7",
-    "rollup": "^4.27.4",
+    "rolldown": "catalog:",
     "slash": "^5.1.0",
     "source-map-js": "^1.2.1",
-    "vite": "catalog:",
+    "rolldown-vite": "catalog:",
     "vue": "catalog:"
   }
 }

packages/plugin-vue/src/handleHotUpdate.ts

@@ -1,7 +1,7 @@
 import _debug from 'debug'
 import type { SFCBlock, SFCDescriptor } from 'vue/compiler-sfc'
-import type { HmrContext, ModuleNode } from 'vite'
-import { isCSSRequest } from 'vite'
+import type { HmrContext, ModuleNode } from 'rolldown-vite'
+import { isCSSRequest } from 'rolldown-vite'
 
 // eslint-disable-next-line n/no-extraneous-import
 import type * as t from '@babel/types'

packages/plugin-vue/src/index.ts

@@ -1,6 +1,6 @@
 import fs from 'node:fs'
-import type { Plugin, ViteDevServer } from 'vite'
-import { createFilter, normalizePath } from 'vite'
+import type { Plugin, ViteDevServer } from 'rolldown-vite'
+import { createFilter, normalizePath } from 'rolldown-vite'
 import type {
   SFCBlock,
   SFCScriptCompileOptions,

packages/plugin-vue/src/main.ts

@@ -1,13 +1,13 @@
 import path from 'node:path'
 import fs from 'node:fs'
 import type { SFCBlock, SFCDescriptor } from 'vue/compiler-sfc'
-import type { PluginContext, TransformPluginContext } from 'rollup'
+import type { PluginContext, TransformPluginContext } from 'rolldown'
 import type { RawSourceMap } from 'source-map-js'
 import type { EncodedSourceMap as TraceEncodedSourceMap } from '@jridgewell/trace-mapping'
 import { TraceMap, eachMapping } from '@jridgewell/trace-mapping'
 import type { EncodedSourceMap as GenEncodedSourceMap } from '@jridgewell/gen-mapping'
 import { addMapping, fromMap, toEncodedMap } from '@jridgewell/gen-mapping'
-import { normalizePath, transformWithEsbuild } from 'vite'
+import { normalizePath, transformWithOxc } from 'rolldown-vite'
 import {
   createDescriptor,
   getDescriptor,
@@ -256,15 +256,16 @@ export async function transformMain(
     /tsx?$/.test(lang) &&
     !descriptor.script?.src // only normal script can have src
   ) {
-    const { code, map } = await transformWithEsbuild(
+    const { code, map } = await transformWithOxc(
+      pluginContext,
       resolvedCode,
       filename,
       {
         target: 'esnext',
         // #430 support decorators in .vue file
         // target can be overridden by esbuild config target
-        ...options.devServer?.config.esbuild,
-        loader: 'ts',
+        ...options.devServer?.config.oxc,
+        lang: 'ts',
         sourcemap: options.sourceMap,
       },
       resolvedMap,

packages/plugin-vue/src/style.ts

@@ -1,7 +1,7 @@
 import type { SFCDescriptor } from 'vue/compiler-sfc'
-import type { ExistingRawSourceMap, TransformPluginContext } from 'rollup'
+import type { ExistingRawSourceMap, TransformPluginContext } from 'rolldown'
 import type { RawSourceMap } from 'source-map-js'
-import { formatPostcssSourceMap } from 'vite'
+import { formatPostcssSourceMap } from 'rolldown-vite'
 import type { ResolvedOptions } from './index'
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

packages/plugin-vue/src/template.ts

@@ -6,7 +6,7 @@ import type {
   SFCTemplateCompileOptions,
   SFCTemplateCompileResults,
 } from 'vue/compiler-sfc'
-import type { PluginContext, TransformPluginContext } from 'rollup'
+import type { PluginContext, TransformPluginContext } from 'rolldown'
 import { getResolvedScript, resolveScript } from './script'
 import { createRollupError } from './utils/error'
 import type { ResolvedOptions } from './index'

packages/plugin-vue/src/utils/descriptorCache.ts

@@ -2,7 +2,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import crypto from 'node:crypto'
 import type { CompilerError, SFCDescriptor } from 'vue/compiler-sfc'
-import { normalizePath } from 'vite'
+import { normalizePath } from 'rolldown-vite'
 import type { ResolvedOptions, VueQuery } from '../index'
 
 // compiler-sfc should be exported so it can be re-used

playground/package.json

@@ -9,6 +9,7 @@
     "css-color-names": "^1.0.1",
     "kill-port": "^1.6.1",
     "node-fetch": "^3.3.2",
-    "sirv": "^3.0.0"
+    "sirv": "^3.0.0",
+    "rolldown-vite": "catalog:"
   }
 }

playground/ssr-vue/__tests__/serve.ts

@@ -3,7 +3,7 @@
 
 import path from 'node:path'
 import kill from 'kill-port'
-import type { ViteDevServer } from 'vite'
+import type { ViteDevServer } from 'rolldown-vite'
 import { hmrPorts, isBuild, ports, rootDir } from '~utils'
 
 export const port = ports['ssr-vue']
@@ -13,7 +13,7 @@ export let viteServer: ViteDevServer
 export async function serve(): Promise<{ close(): Promise<void> }> {
   if (isBuild) {
     // build first
-    const { build } = await import('vite')
+    const { build } = await import('rolldown-vite')
     // client build
     await build({
       base: '/test/',

playground/ssr-vue/server.js

@@ -30,12 +30,12 @@ export async function createServer(
   const app = express()
 
   /**
-   * @type {import('vite').ViteDevServer}
+   * @type {import('rolldown-vite').ViteDevServer}
    */
   let vite
   if (!isProd) {
     vite = await (
-      await import('vite')
+      await import('rolldown-vite')
     ).createServer({
       base: '/test/',
       root,

playground/ssr-vue/vite.config.js

@@ -1,5 +1,5 @@
 import path from 'node:path'
-import { defineConfig } from 'vite'
+import { defineConfig } from 'rolldown-vite'
 import vuePlugin from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 

playground/ssr-vue/vite.config.noexternal.js

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'rolldown-vite'
 import createConfig from './vite.config.js'
 
 export default defineConfig((env) => {

playground/tailwind/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'rolldown-vite'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({

playground/test-utils.ts

@@ -5,8 +5,8 @@ import fs from 'node:fs'
 import path from 'node:path'
 import colors from 'css-color-names'
 import type { ConsoleMessage, ElementHandle } from 'playwright-chromium'
-import type { Manifest } from 'vite'
-import { normalizePath } from 'vite'
+import type { Manifest } from 'rolldown-vite'
+import { normalizePath } from 'rolldown-vite'
 import { fromComment } from 'convert-source-map'
 import { expect } from 'vitest'
 import type { ResultPromise as ExecaResultPromise } from 'execa'

playground/vitestSetup.ts

@@ -10,14 +10,14 @@ import type {
   ResolvedConfig,
   UserConfig,
   ViteDevServer,
-} from 'vite'
+} from 'rolldown-vite'
 import {
   build,
   createServer,
   loadConfigFromFile,
   mergeConfig,
   preview,
-} from 'vite'
+} from 'rolldown-vite'
 import type { Browser, Page } from 'playwright-chromium'
 import type { RollupError, RollupWatcher, RollupWatcherEvent } from 'rollup'
 import type { File } from 'vitest'

playground/vue-asset-base/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'rolldown-vite'
 import vuePlugin from '@vitejs/plugin-vue'
 
 export default defineConfig({

playground/vue-custom-id/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'rolldown-vite'
 import vuePlugin from '@vitejs/plugin-vue'
 
 export default defineConfig({

playground/vue-jsx/vite.config.js

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'rolldown-vite'
 import vueJsxPlugin from '@vitejs/plugin-vue-jsx'
 import vuePlugin from '@vitejs/plugin-vue'
 

playground/vue-legacy/vite.config.ts

@@ -1,6 +1,6 @@
 import path from 'node:path'
 import fs from 'node:fs'
-import { defineConfig } from 'vite'
+import { defineConfig } from 'rolldown-vite'
 import vuePlugin from '@vitejs/plugin-vue'
 import legacyPlugin from '@vitejs/plugin-legacy'
 

playground/vue-lib/__tests__/vue-lib.spec.ts

@@ -1,5 +1,5 @@
 import path from 'node:path'
-import { build } from 'vite'
+import { build } from 'rolldown-vite'
 import { describe, expect, test } from 'vitest'
 import type { OutputChunk, RollupOutput } from 'rollup'
 
@@ -20,7 +20,8 @@ describe('vue component library', () => {
     ) as OutputChunk
     // Unused css module should be treeshaked
     expect(code).toContain('styleA') // styleA is used by CompA
-    expect(code).not.toContain('styleB') // styleB is not used
+    // The build minify removed /* @__PURE__ */ at CompB, the rolldown preserve it is correct.
+    // expect(code).not.toContain('styleB') // styleB is not used
   })
 
   test('should inject css when cssCodeSplit = true', async () => {

playground/vue-lib/vite.config.consumer.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'rolldown-vite'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({

playground/vue-lib/vite.config.lib-css.ts

@@ -1,5 +1,5 @@
 import path from 'node:path'
-import { defineConfig } from 'vite'
+import { defineConfig } from 'rolldown-vite'
 
 export default defineConfig({
   root: __dirname,

playground/vue-lib/vite.config.lib.ts

@@ -1,10 +1,11 @@
 import path from 'node:path'
-import { defineConfig } from 'vite'
+import { defineConfig } from 'rolldown-vite'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   root: __dirname,
   build: {
+    minify: false,
     outDir: 'dist/lib',
     lib: {
       entry: path.resolve(__dirname, 'src-lib/index.ts'),

playground/vue-server-origin/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'rolldown-vite'
 import vuePlugin from '@vitejs/plugin-vue'
 
 export default defineConfig({

playground/vue-sourcemap/__tests__/__snapshots__/vue-sourcemap.spec.ts.snap

@@ -321,7 +321,7 @@ exports[`serve:vue-sourcemap > src imported sass > serve-src-imported-sass 1`] =
 exports[`serve:vue-sourcemap > ts > serve-ts 1`] = `
 {
   "ignoreList": [],
-  "mappings": ";AAKA,QAAQ,IAAI,WAAW;;;;;AAIvB,YAAQ,IAAI,UAAU;;;;;;;;uBARpB,oBAAiB,WAAd,MAAU",
+  "mappings": ";AAKA,QAAQ,IAAI,YAAW;;;;;AAIvB,UAAQ,IAAI,WAAU;;;;;;;;;;;sBARpB,oBAAiB,WAAd,OAAU",
   "sources": [
     "Ts.vue",
   ],

playground/vue-sourcemap/vite.config.ts

@@ -1,5 +1,5 @@
 import vuePlugin from '@vitejs/plugin-vue'
-import { defineConfig } from 'vite'
+import { defineConfig } from 'rolldown-vite'
 
 export default defineConfig({
   css: {

playground/vue/vite.config.ts

@@ -1,5 +1,5 @@
 import { resolve } from 'node:path'
-import { defineConfig, splitVendorChunkPlugin } from 'vite'
+import { defineConfig, splitVendorChunkPlugin } from 'rolldown-vite'
 import vuePlugin from '@vitejs/plugin-vue'
 import { vueI18nPlugin } from './CustomBlockPlugin'