Create multiple custom-elements with Svelte and Rollup in Visual Studio - visual-studio

Question

I'm trying to create multiple web-custom elements using Svelte and Rollup inside the one project.
The idea is to have a folder structure like this
web-components
component-1
index.svelte
component-2
index.svelte
This should the be "looped" by Rollup and create a set of JS files
publish
component-1.js
component-2.js
Each of the svelte components will be standalone/autonomous, and I might also create other components using other technologies as well. (React/Vanilla.js/lit.hmtl/stencil)
I'm working in Visual Studio, and the examples for doing these things is quite sparse.. Anyone that can direct me to a good example?

Answer 1

I do not have a current example for what you are trying to do, but having done something similar this seems to be an approach worth trying:
Your rollup.config.js file can, instead of a single object, return an array:
export default [
{ configuration for component 1 },
{ configuration for component 2 }
];
Since each configuration would have some duplication (plugins, format, ...) it's probably best to abstract those out:
const toRollupConfig = ({ src, dest }) = {
/// Rollup Configuration
};
export default [
toRollupConfig({
src: './web-components/component-1/index.svelte',
dest: './publish/component-1.js'
}),
toRollupConfig({
src: './web-components/component-2/index.svelte',
dest: './publish/component-2.js'
}),
];
Since this would require you make a line for each component, you could go a step further and fetch all your .svelte files using something like glob or similar and map the result with toRollupConfig given you the final code:
const GetComponents = (srcDir, destDir) => {
// Get the files and return for each an object of the form { src, dest }
};
const toRollupConfig = ({ src, dest }) = {
/// Rollup Configuration
};
export default GetComponents('./web-components/','./publish').map(toRollupConfig);