I am using Ionic in a Svelte project using the cdn. All is working fine, except for popovers. I use a HTML tag for the ion-loader-controller, ion-modal-controller, ion-popover-controller and ion-toast-controller. For example, to create a new toast, I do this:
export async function onError(message, options) {
const toastOptions = {
duration: null,
color: 'danger',
position: 'bottom',
showCloseButton: true,
delay: 0,
message,
...options
};
setTimeout(async () => {
const toastCtrl = document.querySelector('ion-toast-controller');
const toast = await toastCtrl.create(toastOptions);
toast.present();
}, toastOptions.delay);
}
But when I try this same trick with a popover or modal, it says: “Error: framework delegate is missing”:
import ActionsPopover from '../components/ActionsPopover.svelte';
async function openContextMenu(event) {
const popoverCtrl = document.querySelector('ion-modal-controller');
const popover = await popoverCtrl.create({
component: ActionsPopover,
componentProps: {
actions: [
{
label: 'OK',
handler: handleOk()
}
]
}
});
await popover.present();
const {data} = await popover.onDidDismiss();
console.log(data);
}
ActionsPopover.svelte is a svelte component, which gets compiled to HTMLElement by Svelte:
<ion-list>
{#each actions as action}
<ion-item on:click={handleAction(action)}>
<ion-label>{action.label}</ion-label>
</ion-item>
{/each}
</ion-list>
<script>
export let actions;
function handleAction(action) {
if (action.handler) {
action.handler();
}
}
</script>
Can I not reference Svelte components directly in the popover controller? How can I use Svelte components with the popover or modal controllers? Or should I manually create custom elements?