Support multiple compiler & preprocess options

This is a reiteration of https://github.com/sveltejs/language-tools/issues/410 but in the context of svelte-kit.

Is your feature request related to a problem? Please describe. Currently, the svelte.config.js assumes one config for your entire directory. However, it’s not uncommon to want to compile some components to web component and others to vanilla Svelte. Some components may need one CSS, Markdown, Language (TS)…etc. preprocess and others another one, especially when using an external Svelte library.

Describe the solution you’d like When using Rollup, I solve this using the exclude/include options and multiple instances of the Svelte plugin. (Not very elegant)

// rollup.config.js
import svelte from "rollup-plugin-svelte";


const WEB_COMPONENT_POSTFIX = `**/*.wc.svelte`
// Omitted for brevity
// const TS_COMPONENT_POSTFIX = "**/*.ts.svelte";
// const DOC_COMPONENT_POSTFIX = "**/*.doc.svelte"; // preprocessed for MdSvex etc.

export default {
    ...
    svelte({
        preprocess: regularSveltePreprocess,
        exclude: WEB_COMPONENT_POSTFIX,
    }),
    svelte({
        customElement: true,
        preprocess: webComponentPreprocess,
        include: WEB_COMPONENT_POSTFIX,
    }),
    ...
}

My current suggestion is to accept an array of compilerOptions and preprocessOptions.

// svelte.config.cjs

// set up `webComponentsPreprocess` && `vanillaPreprocess`
module.exports = {
	  preprocess: [
		    {
		       preprocess: webComponentsPreprocess,
		       include: "**/*.wc.svelte",
		    },
		    {
		       preprocess: vanillaPreprocess,
		       include: "**/*.svelte",
		       exclude: ["**/*.wc.svelte", "**/*.ts.svelte"],
		    }
	  ],
	  compilerOptions: [
		{...},
		{...}
	 ]
},

Describe alternatives you’ve considered I haven’t found an alternative in the context of the svelte-kit. Suggestion for workarounds are welcome.

How important is this feature to you? This is critical to different projects I work on, (particularly those using some web components and an external Svelte component library). It’s a blocker to migrating from Rollup.

Additional context The solution implementation for this issue would be far-reaching. It may need some consensus from several Svelte tools using svelte.config.cjs.

[dominikg]

vite-plugin-svelte supports the same include/exclude options as rollup-plugin-svelte https://github.com/sveltejs/vite-plugin-svelte/blob/b229a8c412db713663021cf9d20bb179f0d42cbd/packages/vite-plugin-svelte/src/utils/options.ts#L140.

If you pass preprocessors as inline options you should be able to recreate the rollup config in the original post.

[Rich-Harris]

I suppose it’s straight forward to write a preprocessor for such use cases, but with the added inconvenience of separately maintaining some functionality included out of the box in svelte-preprocess.

I’m not sure I understand — svelte-preprocess already does this. What functionality needs to be maintained separately?

is there a canonical way to preprocess, but not compile svelte components for distribution?

There will be! It will be a part of SvelteKit (the component-template repo will almost certainly be archived). In the meantime it’s possible to do it yourself just by using the preprocess API manually.