Svelte 5

// src/main.ts
import '@stackone/hub/webcomponent';
import { mount } from 'svelte';
import App from './App.svelte';

const target = document.getElementById('app');
if (!target) {
  throw new Error('#app element not found');
}
mount(App, { target });

<script lang="ts">
    let token = $state('');
    let hubEl: HTMLElement | undefined = $state();

    $effect(() => {
        retrieveConnectSessionToken().then((t) => {
            token = t;
        });
    });

    $effect(() => {
        if (!hubEl) return;
        const onSuccess = (event: Event) => {
            const detail = (event as CustomEvent).detail;
            console.log('Connected:', detail.id, detail.provider);
        };
        const onClose = () => console.log('Closed');
        hubEl.addEventListener('success', onSuccess);
        hubEl.addEventListener('close', onClose);
        return () => {
            hubEl?.removeEventListener('success', onSuccess);
            hubEl?.removeEventListener('close', onClose);
        };
    });
</script>

<stackone-hub
    bind:this={hubEl}
    {token}
    mode="integration-picker"
    height="600px"
></stackone-hub>