Islands architecture with TYPO3+Rollup+Svelte

Main.js

import Test from './Test.svelte';

// Mount Svelte component
const test = new Test({
	target: document.querySelector('#test')
});

rollup.config.js

import svelte from 'rollup-plugin-svelte';
import css from 'rollup-plugin-css-only'
import { terser } from 'rollup-plugin-terser';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: {
    Main: 'packages/svelte_demo/Resources/Private/JavaScript/Main.js',
  },
  output: {
    dir: 'packages/svelte_demo/Resources/Public/JavaScript/',
    format: 'iife',
  },
  plugins: [
    nodeResolve(),
    css({ output: 'rollup.css' }),
    svelte({
      // Emit CSS as "files" for other plugins to process. default is true
      emitCss: true,
    }),
    terser(),
  ],
};

Test.svelte

<script>
	let promise = fetch('/api').then((x) => x.json());
</script>

<div>
	<h2>Hello Svelte Component</h2>

	{#await promise}
	<!-- show something while promise is pending -->
	<p>Loading...</p>
	{:then data}
	<!-- promise was fulfilled -->
	<p>
		{@html data.content.colPos0[0].content.bodytext}
	</p>
	{:catch error}
	<!-- show something while promise was rejected -->
	<p>Something went wrong.</p>
	{/await}
</div>

<style>
</style>