[Recipe] Use Svelte and web components interchangeably in a codebase.

[milkbump]

Proposed Recipe

Using a combination of Rollup and file extensions.

Custom Element components get the extension .wc.svelte. Rollup then sets the customElement config depending on the file extension.

svelte({ customElement: true, include: /\.wc\.svelte$/ }),
svelte({ customElement: false, exclude: /\.wc\.svelte$/ }),

This works smoothly with local and NPM imported components.

Demo: https://jawish.github.io/svelte-customelement-rollup/

Originally posted by @jawish in sveltejs/svelte#3594 (comment)

This pattern is also pretty handy for creating other preprocessed files such as rich text markdown using something like MDsveX.

Eg:

svelte({ preprocess: markdown(), include: /\.md\.svelte$/ }),
svelte({ exclude: /\.md\.svelte$/ }),

[swyxio]

thanks! i see why you would want it for the first example, but the second example i dont quite get. does it make sense to create two separate bundles just for this? how would i combine both into one app?

[milkbump]

does it make sense to create two separate bundles just for this?

Even in the first example, they don't end up as separate bundles. Right?

For example, in this:

// Page.svelte
<script>
	import Markdown1 from "markdown1.md.svelte";
    import Markdown2 from "markdown2.md.svelte";
</script>

<Markdown1/>
<Markdown2/>

with example 2 Markdown1 and Markdown2 will be prepossessed for markdown, but Page not preprocessed, but they all end up in one JS bundle file and are consumed as the Page component.

However, I suppose you're right that this particular usecase might not need two svelte plugin instances. A possible reason you might separate them is to avoid unnecessarily preprocessing .svelte files for build perf reasons --or maybe you just want some markdown to be displayed as is without preprocessing.

I think the recipe is still in there though. I suppose my goal was to point out that the include-exclude plugin instance pattern (we should call it something less wordy :)) could be used for more than just web components.

It allows you to easily use some options (e.g preserveWhitespace, preserveComments, accessors, immutable, etc.) conditionally for some components and not others.

[swyxio]

alright - Im still having trouble seeing how I might use it. I'd probably want to see this in a demo app to really grasp what you're saying. but happy to take this in as a recipe in case it helps others as well (also helps you document this pattern so you can refer to it in future)