feat: clean up options interface (fixes #12) (#99)

Author: dominikg

.changeset/angry-penguins-jog.md

@@ -0,0 +1,14 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Add `experimental` section to options and move `useVitePreprocess` there
+
+Experimental options are not ready for production use and breaking changes to them can occur in any release
+
+If you already had `useVitePreprocess` enabled, update you config:
+
+```diff
+- svelte({useVitePreprocess: true})
++ svelte({experimental: {useVitePreprocess: true}})
+```

.changeset/dirty-boxes-sip.md

@@ -0,0 +1,7 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+removed redundant `disableCssHmr` option
+
+You can use `emitCss: false` or `emitCss: !!isProduction` instead

packages/playground/preprocess-with-vite/vite.config.js

@@ -6,7 +6,9 @@ module.exports = defineConfig(({ command, mode }) => {
 	return {
 		plugins: [
 			svelte({
-				useVitePreprocess: true
+				experimental: {
+					useVitePreprocess: true
+				}
 			})
 		],
 		build: {

packages/vite-plugin-svelte/src/index.ts

@@ -171,7 +171,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 		},
 
 		handleHotUpdate(ctx: HmrContext): void | Promise<Array<ModuleNode> | void> {
-			if (!options.emitCss || options.disableCssHmr) {
+			if (!options.hot || !options.emitCss) {
 				return;
 			}
 			const svelteRequest = requestParser(ctx.file, false, ctx.timestamp);

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

@@ -15,14 +15,13 @@ const knownOptions = new Set([
 	'preprocess',
 	'hot',
 	'disableCssHmr',
-	'useVitePreprocess',
-	'ignorePluginPreprocessors'
+	'ignorePluginPreprocessors',
+	'experimental'
 ]);
 
 function buildDefaultOptions(isProduction: boolean, options: Partial<Options>): Partial<Options> {
-	const disableCssHmr = !!options?.disableCssHmr;
 	// emit for prod, emit in dev unless css hmr is disabled
-	const emitCss = options?.emitCss != null ? options.emitCss : isProduction || !disableCssHmr;
+	const emitCss = options?.emitCss != null ? options.emitCss : true;
 	// no hmr in prod, only inject css in dev if emitCss is false
 	const hot = isProduction
 		? false
@@ -40,12 +39,7 @@ function buildDefaultOptions(isProduction: boolean, options: Partial<Options>):
 			hydratable: true
 		}
 	};
-	log.debug(
-		`default options for ${isProduction ? 'production' : 'development'} ${
-			!isProduction && disableCssHmr ? ' with css hmr disabled' : ''
-		}`,
-		defaultOptions
-	);
+	log.debug(`default options for ${isProduction ? 'production' : 'development'}`, defaultOptions);
 	return defaultOptions;
 }
 
@@ -125,6 +119,10 @@ function mergeOptions(
 			...(svelteConfig?.compilerOptions || {}),
 			...(inlineOptions?.compilerOptions || {})
 		},
+		experimental: {
+			...(svelteConfig?.experimental || {}),
+			...(inlineOptions?.experimental || {})
+		},
 		root: viteConfig.root || process.cwd(),
 		isProduction: viteEnv.mode === 'production',
 		isBuild: viteEnv.command === 'build',
@@ -195,7 +193,7 @@ export function buildExtraViteConfig(
 		}
 	}
 
-	if (options.useVitePreprocess) {
+	if (options.experimental?.useVitePreprocess) {
 		// needed to transform svelte files with component imports
 		// can cause issues with other typescript files, see https://github.com/sveltejs/vite-plugin-svelte/pull/20
 		extraViteConfig.esbuild = {
@@ -390,7 +388,20 @@ export interface Options {
 	ignorePluginPreprocessors?: boolean | string[];
 
 	/**
-	 * use vite as extra css preprocessor EXPERIMENTAL!
+	 * These options are considered experimental and breaking changes to them can occur in any release
+	 */
+	experimental?: ExperimentalOptions;
+}
+
+/**
+ * These options are considered experimental and breaking changes to them can occur in any release
+ */
+export interface ExperimentalOptions {
+	/**
+	 * use extra preprocessors that delegate style and typescript preproessing to native vite plugins
+	 *
+	 * do not use together with svelte-preprocess!
+	 *
 	 * @default false
 	 */
 	useVitePreprocess?: boolean;

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

@@ -81,7 +81,7 @@ function createInjectScopeEverythingRulePreprocessorGroup(): PreprocessorGroup {
 
 function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfig) {
 	const extraPreprocessors = [];
-	if (options.useVitePreprocess) {
+	if (options.experimental?.useVitePreprocess) {
 		log.debug('adding vite preprocessor');
 		extraPreprocessors.push(createVitePreprocessorGroup(config, options));
 	}
@@ -140,7 +140,7 @@ function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfi
 		extraPreprocessors.push(...pluginsWithPreprocessors.map((p) => p.api.sveltePreprocess));
 	}
 
-	if (options.hot && !options.disableCssHmr) {
+	if (options.hot && options.emitCss) {
 		extraPreprocessors.push(createInjectScopeEverythingRulePreprocessorGroup());
 	}