Support custom svelte compiler options in @astrojs/svelte (#3181)

* updating svelte integration to allow custom user config

* test: adding a test to verify that svelte options are piped through the integration

* updating the README with docs on overridding svelte options

* chore: adding changeset

* fix: copy/paste bug in test validation

* removing temporary debug scripts

1 files changed, 40 insertions, 16 deletions

diff --git a/packages/integrations/svelte/src/index.ts b/packages/integrations/svelte/src/index.ts
index f5a3dd945..d12b6d533 100644
--- a/packages/integrations/svelte/src/index.ts
+++ b/packages/integrations/svelte/src/index.ts
@@ -1,6 +1,7 @@
 import type { AstroIntegration, AstroRenderer } from 'astro';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import preprocess from 'svelte-preprocess';
+import type { Options } from '@sveltejs/vite-plugin-svelte';
 
 function getRenderer(): AstroRenderer {
 	return {
@@ -10,38 +11,61 @@ function getRenderer(): AstroRenderer {
 	};
 }
 
-function getViteConfiguration(isDev: boolean) {
+function getViteConfiguration(isDev: boolean, options?: Options | OptionsCallback) {
+	const defaultOptions = {
+		emitCss: true,
+		compilerOptions: { dev: isDev, hydratable: true },
+		preprocess: [
+			preprocess({
+				less: true,
+				sass: { renderSync: true },
+				scss: { renderSync: true },
+				stylus: true,
+				typescript: true,
+			}),
+		],
+	};
+
+	let resolvedOptions: Partial<Options>;
+
+	if (!options) {
+		resolvedOptions = defaultOptions;
+	} else if (typeof options === 'function') {
+		resolvedOptions = options(defaultOptions);
+	} else {
+		resolvedOptions = {
+			...options,
+			...defaultOptions,
+			compilerOptions: {
+				...options.compilerOptions,
+				// Always use dev and hydratable from defaults
+				...defaultOptions.compilerOptions,
+			},
+			// Ignore default preprocessor if the user provided their own
+			preprocess: options.preprocess ?? defaultOptions.preprocess,
+		};
+	}
+
 	return {
 		optimizeDeps: {
 			include: ['@astrojs/svelte/client.js', 'svelte', 'svelte/internal'],
 			exclude: ['@astrojs/svelte/server.js'],
 		},
 		plugins: [
-			svelte({
-				emitCss: true,
-				compilerOptions: { dev: isDev, hydratable: true },
-				preprocess: [
-					preprocess({
-						less: true,
-						sass: { renderSync: true },
-						scss: { renderSync: true },
-						stylus: true,
-						typescript: true,
-					}),
-				],
-			}),
+			svelte(resolvedOptions),
 		],
 	};
 }
 
-export default function (): AstroIntegration {
+type OptionsCallback = (defaultOptions: Options) => Options;
+export default function (options?: Options | OptionsCallback): AstroIntegration {
 	return {
 		name: '@astrojs/svelte',
 		hooks: {
 			// Anything that gets returned here is merged into Astro Config
 			'astro:config:setup': ({ command, updateConfig, addRenderer }) => {
 				addRenderer(getRenderer());
-				updateConfig({ vite: getViteConfiguration(command === 'dev') });
+				updateConfig({ vite: getViteConfiguration(command === 'dev', options) });
 			},
 		},
 	};