feat: support rolldown-vite in vitePreprocess

Author: dominikg

.changeset/heavy-dots-repeat.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+add support for rolldown-vite in vitePreprocess. Using the typescript preprocessor requires a tsconfig.json with verbatimModuleSyntax enabled, eg @tsconfig/svelte

packages/e2e-tests/preprocess-with-vite/__tests__/preprocess-with-vite.spec.ts

@@ -7,6 +7,7 @@ test('should render App', async () => {
 	expect(await getText('#foo-title')).toBe('Styles with stylus blub');
 	expect(await getColor('#foo-title')).toBe('magenta');
 	expect(await getColor('p.note')).toBe('rgb(255, 62, 0)');
+	expect(await getText('#enum')).toBe('qoox');
 });
 
 test('should not mangle code from esbuild pure annotations', async () => {

packages/e2e-tests/preprocess-with-vite/package.json

@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:^",
+    "@tsconfig/svelte": "^5.0.4",
     "sass": "^1.89.1",
     "stylus": "^0.64.0",
     "svelte": "^5.33.18",

packages/e2e-tests/preprocess-with-vite/src/App.svelte

@@ -3,12 +3,17 @@
 	import Bar from './Bar.svelte';
 	export let hello: string;
 	const world: string = 'world'; // edit world and save to see hmr update
+	enum Baz {
+		Qoox = 'qoox'
+	}
+	let qoox = Baz.Qoox;
 </script>
 
 <h1 class="foo">{hello} {world}</h1>
 <p id="app-scss">This is styled with scss using darken fn</p>
 <Foo />
 <Bar />
+<p id="enum">{qoox}</p>
 
 <style lang="scss">
 	@use 'sass:color';

packages/e2e-tests/preprocess-with-vite/src/index.ts

@@ -1,5 +1,5 @@
 import App from './App.svelte';
-import { Hello } from './types.js';
+import { type Hello } from './types.ts';
 import { mount } from 'svelte';
 
 const hello: Hello = 'Hello';

packages/e2e-tests/preprocess-with-vite/src/tsconfig.json

@@ -0,0 +1,3 @@
+{
+	"extends": "@tsconfig/svelte"
+}

packages/e2e-tests/preprocess-with-vite/svelte.config.js

@@ -1,5 +1,5 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 export default {
-	preprocess: [vitePreprocess()]
+	preprocess: [vitePreprocess({ script: true })]
 };

packages/vite-plugin-svelte/src/preprocess.js

@@ -1,7 +1,15 @@
 import process from 'node:process';
-import { isCSSRequest, preprocessCSS, resolveConfig, transformWithEsbuild } from 'vite';
+import * as vite from 'vite';
 import { mapToRelative, removeLangSuffix } from './utils/sourcemaps.js';
-
+//@ts-expect-error rolldown types don't exist
+const {
+	isCSSRequest,
+	preprocessCSS,
+	resolveConfig,
+	transformWithEsbuild,
+	rolldownVersion,
+	transformWithOxc
+} = vite;
 /**
  * @typedef {(code: string, filename: string) => Promise<{ code: string; map?: any; deps?: Set<string> }>} CssTransform
  */
@@ -18,7 +26,7 @@ export function vitePreprocess(opts) {
 	/** @type {import('svelte/compiler').PreprocessorGroup} */
 	const preprocessor = { name: 'vite-preprocess' };
 	if (opts?.script === true) {
-		preprocessor.script = viteScript().script;
+		preprocessor.script = rolldownVersion ? viteScriptOxc().script : viteScript().script;
 	}
 	if (opts?.style !== false) {
 		const styleOpts = typeof opts?.style == 'object' ? opts?.style : undefined;
@@ -57,6 +65,37 @@ function viteScript() {
 	};
 }
 
+/**
+ * @returns {{ script: import('svelte/compiler').Preprocessor }}
+ */
+function viteScriptOxc() {
+	return {
+		async script({ attributes, content, filename = '' }) {
+			const lang = /** @type {string} */ (attributes.lang);
+			if (!supportedScriptLangs.includes(lang)) return;
+			const { code, map } = await transformWithOxc(content, filename, {
+				lang,
+				target: 'esnext'
+				// TODO, how to pass tsconfig compilerOptions (or not needed as config is loaded for file
+				/*tsconfigRaw: {
+					compilerOptions: {
+						// svelte typescript needs this flag to work with type imports
+						importsNotUsedAsValues: 'preserve',
+						preserveValueImports: true
+					}
+				}*/
+			});
+
+			mapToRelative(map, filename);
+
+			return {
+				code,
+				map
+			};
+		}
+	};
+}
+
 /**
  * @param {import('vite').ResolvedConfig | import('vite').InlineConfig} config
  * @returns {{ style: import('svelte/compiler').Preprocessor }}

packages/vite-plugin-svelte/types/index.d.ts.map

@@ -26,6 +26,6 @@
 		null,
 		null
 	],
-	"mappings": ";;;;aAIYA,OAAOA;;WAETC,mBAAmBA;;;;;;;;;;;kBAWZC,aAAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAgGbC,YAAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAiDnBC,mBAAmBA;;;;;;;;;;;;;;;;WAgBnBC,oBAAoBA;;;;;;;;;;;;;;;MAezBC,SAASA;;kBAEGC,qBAAqBA;;;;;;;;;;;;;iBClKtBC,MAAMA;iBCjBNC,cAAcA;iBCgBRC,gBAAgBA",
+	"mappings": ";;;;aAIYA,OAAOA;;WAETC,mBAAmBA;;;;;;;;;;;kBAWZC,aAAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAgGbC,YAAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAiDnBC,mBAAmBA;;;;;;;;;;;;;;;;WAgBnBC,oBAAoBA;;;;;;;;;;;;;;;MAezBC,SAASA;;kBAEGC,qBAAqBA;;;;;;;;;;;;;iBClKtBC,MAAMA;iBCTNC,cAAcA;iBCQRC,gBAAgBA",
 	"ignoreList": []
 }