fix: Remove user-specified values for essential compilerOptions and log a warning (#346)

* fix: Remove user-set values for essential compilerOptions and log a warning

* chore: improve language

Co-authored-by: Conduitry <[email protected]>

* chore: more language updates

Co-authored-by: Bjorn Lu <[email protected]>

* fix: ignore cssHash in dev only

* docs: update config

Co-authored-by: Conduitry <[email protected]>
Co-authored-by: Bjorn Lu <[email protected]>

Author: 3 people

.changeset/three-icons-behave.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+Remove user-specified values for essential compilerOptions generate, format, cssHash and filename and log a warning

docs/config.md

@@ -42,6 +42,8 @@ A basic Svelte config looks like this:
 // svelte.config.js
 export default {
   // config options
+  compilerOptions: {},
+  preprocess: []
 };
 ```
 
@@ -77,13 +79,11 @@ export default defineConfig({
 
 These options are specific to the Svelte compiler and are generally shared across many bundler integrations.
 
-<!-- TODO: Also note where these options can be placed in svelte.config.js -->
-
 ### compilerOptions
 
 - **Type:** `CompileOptions` - See [svelte.compile](https://svelte.dev/docs#svelte_compile)
 
-  The options to be passed to the Svelte compiler. A few options are set by default, including `dev`, `format` and `css`. However, some options are non-configurable, like `filename`, `generate`, and `cssHash`.
+  The options to be passed to the Svelte compiler. A few options are set by default, including `dev` and `css`. However, some options are non-configurable, like `filename`, `format`, `generate`, and `cssHash` (in dev).
 
 ### preprocess
 

packages/vite-plugin-svelte/src/utils/compile.ts

@@ -21,7 +21,8 @@ const _createCompileSvelte = (makeHot: Function) =>
 		const compileOptions: CompileOptions = {
 			...options.compilerOptions,
 			filename,
-			generate: ssr ? 'ssr' : 'dom'
+			generate: ssr ? 'ssr' : 'dom',
+			format: 'esm'
 		};
 		if (options.hot && options.emitCss) {
 			const hash = `s-${safeBase64Hash(normalizedFilename)}`;

packages/vite-plugin-svelte/src/utils/options.ts

@@ -61,10 +61,7 @@ export async function preResolveOptions(
 	};
 	const defaultOptions: Partial<Options> = {
 		extensions: ['.svelte'],
-		emitCss: true,
-		compilerOptions: {
-			format: 'esm'
-		}
+		emitCss: true
 	};
 	const svelteConfig = await loadSvelteConfig(viteConfigWithResolvedRoot, inlineOptions);
 	const extraOptions: Partial<PreResolvedOptions> = {
@@ -118,6 +115,7 @@ export function resolveOptions(
 	};
 	const merged: ResolvedOptions = mergeConfigs(defaultOptions, preResolveOptions, extraOptions);
 
+	removeIgnoredOptions(merged);
 	addExtraPreprocessors(merged, viteConfig);
 	enforceOptionsForHmr(merged);
 	enforceOptionsForProduction(merged);
@@ -177,6 +175,26 @@ function enforceOptionsForProduction(options: ResolvedOptions) {
 	}
 }
 
+function removeIgnoredOptions(options: ResolvedOptions) {
+	const ignoredCompilerOptions = ['generate', 'format', 'filename'];
+	if (options.hot && options.emitCss) {
+		ignoredCompilerOptions.push('cssHash');
+	}
+	const passedCompilerOptions = Object.keys(options.compilerOptions || {});
+	const passedIgnored = passedCompilerOptions.filter((o) => ignoredCompilerOptions.includes(o));
+	if (passedIgnored.length) {
+		log.warn(
+			`The following Svelte compilerOptions are controlled by vite-plugin-svelte and essential to its functionality. User-specified values are ignored. Please remove them from your configuration: ${passedIgnored.join(
+				', '
+			)}`
+		);
+		passedIgnored.forEach((ignored) => {
+			// @ts-expect-error string access
+			delete options.compilerOptions[ignored];
+		});
+	}
+}
+
 // vite passes unresolved `root`option to config hook but we need the resolved value, so do it here
 // https://github.com/sveltejs/vite-plugin-svelte/issues/113
 // https://github.com/vitejs/vite/blob/43c957de8a99bb326afd732c962f42127b0a4d1e/packages/vite/src/node/config.ts#L293
@@ -401,11 +419,13 @@ export interface Options {
 	emitCss?: boolean;
 
 	/**
-	 * The options to be passed to the Svelte compiler
+	 * The options to be passed to the Svelte compiler. A few options are set by default,
+	 * including `dev` and `css`. However, some options are non-configurable, like
+	 * `filename`, `format`, `generate`, and `cssHash` (in dev).
 	 *
 	 * @see https://svelte.dev/docs#svelte_compile
 	 */
-	compilerOptions?: CompileOptions;
+	compilerOptions?: Omit<CompileOptions, 'filename' | 'format' | 'generate'>;
 
 	/**
 	 * Handles warning emitted from the Svelte compiler