How to compile a Svelte app to a Web Component/Vanilla JS that can be used on external sites?

About a year ago, I created a Vue web component that could be included on any website to facilitate Open Banking payments in the UK. We've even got a WordPress, Magento & Shopify plugins that uses this web component.

You can check out how it workshere.

I've re-created the widget in Svelte and used Flowbite Svelte to style it.

I'm however stuck on how to export this out as web component or vanilla JS so that it could be used in exactly the same manner as the Vue version - A single JS file that contains all the functioning code, including Flowbite/CSS and the whole thing contained within a ShadowDOM.

I've seen conflicting guides online where compilerOptions: { customElement: true,} is either set in svelte.config.js, vite.config.js or rollup.config.js.

I was under the impression doing something like this in Svelte would be considerably easier compared to Vue, albeit this did massively help when doing it in Vue.

Someone kindly pointed me to this answer but I'm struggling getting it to work for the following reasons:

• dist/index.js doesn't exist
• When I run npm run build it generated 4 files in thedist/assets folder: index-DwmGsLQW.js,apexcharts.common.js& index-uK8bMt0h
• Changed the entry point to index-DwmGsLQW.js and ran vite -c vite.js.config.js build which generated components.js, components.umd.js& apexcharts.common.js in thethe dist-js folder
• Using this components.js on a plain HTML page is giving me the following errorin the console: Unexpected token 'export' (at app_2.js:113050:1)

I would really appreciate it if someone could point me in the right direction of how to achieve what it is I'm after.

Project Structure

SvelteKit Version of Project Structure