i'm trying to build a library with Svelte and rollup using Sveltekit. But in my case i need to instance my widget in any static page and to pass the component props. But I'm not able to do this
this is my index.js in the Svelte project
import Accordion from './SpecialCancelation.svelte';
import Tag from './TagCancelation.svelte';
export default {Tag, Accordion}
This is my index.html. I can create the instance of the Widget, but the props don't change.
<div id="special-cancellation"></div>
<div id="tag-cancellation"></div>
<script>
const tagTest = new specialCancelation.Tag({
target: document.querySelector('#tag-cancellation'),
props: {
title: 'Other Title'
}
})
const accordionTest = new specialCancelation.Accordion({
target: document.querySelector('#special-cancellation'),
title: 'Other Title',
subtitle: 'Other SubTitle',
})
</script>
And my rollup.config.js is like this:
export default {
input: 'src/modules/special-cancellation/index.js',
output: [
{
sourcemap: true,
file: 'public/build/special-cancellation.js',
format: 'iife',
name: 'specialCancelation',
},
{
sourcemap: true,
file: 'public/build/special-cancellation.min.js',
format: 'iife',
name: 'specialCancelation',
plugins: [terser(), commonjs()]
}
],
}