feat: improve svelte-preprocess api for plugins (#98)

Author: dominikg

.changeset/eleven-windows-roll.md

@@ -0,0 +1,8 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Add option to ignore svelte preprocessors of other vite plugins
+
+- ignore them all: `ignorePluginPreprocessors: true`
+- ignore by name: `ignorePluginPreprocessors: ['<name of plugin>',...]`

.changeset/flat-mayflies-smell.md

@@ -0,0 +1,7 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Move plugin preprocessor definition to api namespace
+
+Plugins that provide `myplugin.sveltePreprocess`, should move it to `myplugin.api.sveltePreprocess`, as suggested by [rollup](https://rollupjs.org/guide/en/#direct-plugin-communication)

packages/vite-plugin-svelte/README.md

@@ -72,13 +72,15 @@ If you're unsure whether a library uses the lifecycle API, place it in `optimize
 ### Add an extra preprocessor
 
 vite-plugin-svelte uses the svelte compiler to split `.svelte` files into js and css and the svelte compiler requires that the css passed to it is already plain css.
-If you are building a plugin for vite that transforms css and want it to work out of the box with vite-plugin-svelte, you can add a `sveltePreprocess: PreprocessorGroup` to your vite plugin definition and vite-plugin-svelte will pick it up and add it to the list of svelte preprocessors used at runtime.
+If you are building a plugin for vite that transforms css and want it to work out of the box with vite-plugin-svelte, you can add a `api.sveltePreprocess: PreprocessorGroup` to your vite plugin definition and vite-plugin-svelte will pick it up and add it to the list of svelte preprocessors used at runtime.
 
 ```js
 const vitePluginCoolCss = {
 	name: 'vite-plugin-coolcss',
-	sveltePreprocess: {
-		/* your PreprocessorGroup here */
+	api: {
+		sveltePreprocess: {
+			/* your PreprocessorGroup here */
+		}
 	}
 	/*... your cool css plugin implementation here .. */
 };

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

@@ -9,8 +9,7 @@ import {
 	validateInlineOptions,
 	Options,
 	ResolvedOptions,
-	resolveOptions,
-	PreprocessorGroup
+	resolveOptions
 } from './utils/options';
 import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache';
 
@@ -19,14 +18,6 @@ import { resolveViaPackageJsonSvelte } from './utils/resolve';
 import { addExtraPreprocessors } from './utils/preprocess';
 import { PartialResolvedId } from 'rollup';
 
-// extend the Vite plugin interface to be able to have `sveltePreprocess` injection
-declare module 'vite' {
-	// eslint-disable-next-line no-unused-vars
-	interface Plugin {
-		sveltePreprocess?: PreprocessorGroup;
-	}
-}
-
 export function svelte(inlineOptions?: Partial<Options>): Plugin {
 	if (process.env.DEBUG != null) {
 		log.setLevel('debug');

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

@@ -15,7 +15,8 @@ const knownOptions = new Set([
 	'preprocess',
 	'hot',
 	'disableCssHmr',
-	'useVitePreprocess'
+	'useVitePreprocess',
+	'ignorePluginPreprocessors'
 ]);
 
 function buildDefaultOptions(isProduction: boolean, options: Partial<Options>): Partial<Options> {
@@ -380,6 +381,14 @@ export interface Options {
 	 */
 	disableCssHmr?: boolean;
 
+	/**
+	 * vite plugins can contribute additional preprocessors by defining api.sveltePreprocess.
+	 * If you don't want to use them, set this to true to ignore them all or use an array of strings with plugin names to specify which
+	 *
+	 * @default false
+	 */
+	ignorePluginPreprocessors?: boolean | string[];
+
 	/**
 	 * use vite as extra css preprocessor EXPERIMENTAL!
 	 * @default false

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

@@ -1,4 +1,4 @@
-import { ResolvedConfig, TransformResult } from 'vite';
+import { ResolvedConfig, TransformResult, Plugin } from 'vite';
 import MagicString from 'magic-string';
 import { Preprocessor, PreprocessorGroup, ResolvedOptions } from './options';
 import { TransformPluginContext } from 'rollup';
@@ -86,16 +86,58 @@ function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfi
 		extraPreprocessors.push(createVitePreprocessorGroup(config, options));
 	}
 
-	const pluginsWithPreprocessors = config.plugins.filter((p) => p?.sveltePreprocess);
-	if (pluginsWithPreprocessors.length > 0) {
+	// @ts-ignore
+	const pluginsWithPreprocessorsDeprecated = config.plugins.filter((p) => p?.sveltePreprocess);
+	if (pluginsWithPreprocessorsDeprecated.length > 0) {
+		log.warn(
+			`The following plugins use the deprecated 'plugin.sveltePreprocess' field. Please contact their maintainers and ask them to move it to 'plugin.api.sveltePreprocess': ${pluginsWithPreprocessorsDeprecated
+				.map((p) => p.name)
+				.join(', ')}`
+		);
+		// patch plugin to avoid breaking
+		pluginsWithPreprocessorsDeprecated.forEach((p) => {
+			if (!p.api) {
+				p.api = {};
+			}
+			if (p.api.sveltePreprocess === undefined) {
+				// @ts-ignore
+				p.api.sveltePreprocess = p.sveltePreprocess;
+			} else {
+				log.error(
+					`ignoring plugin.sveltePreprocess of ${p.name} because it already defined plugin.api.sveltePreprocess.`
+				);
+			}
+		});
+	}
+
+	const pluginsWithPreprocessors: Plugin[] = config.plugins.filter((p) => p?.api?.sveltePreprocess);
+	const ignored: Plugin[] = [],
+		included: Plugin[] = [];
+	for (const p of pluginsWithPreprocessors) {
+		if (
+			options.ignorePluginPreprocessors === true ||
+			(Array.isArray(options.ignorePluginPreprocessors) &&
+				options.ignorePluginPreprocessors?.includes(p.name))
+		) {
+			ignored.push(p);
+		} else {
+			included.push(p);
+		}
+	}
+	if (ignored.length > 0) {
 		log.debug(
-			`adding preprocessors from other vite plugins: ${pluginsWithPreprocessors
+			`Ignoring svelte preprocessors defined by these vite plugins: ${ignored
 				.map((p) => p.name)
 				.join(', ')}`
 		);
-		extraPreprocessors.push(
-			...pluginsWithPreprocessors.map((p) => p.sveltePreprocess as PreprocessorGroup)
+	}
+	if (included.length > 0) {
+		log.debug(
+			`Adding svelte preprocessors defined by these vite plugins: ${included
+				.map((p) => p.name)
+				.join(', ')}`
 		);
+		extraPreprocessors.push(...pluginsWithPreprocessors.map((p) => p.api.sveltePreprocess));
 	}
 
 	if (options.hot && !options.disableCssHmr) {