Svelte Components with Leaflet MarkerCluster

Question

I'm using declarative components for Leaflet in SveletKit - based on this architecture: https://github.com/ShipBit/sveltekit-leaflet/tree/master/src/lib

I'm wondering how to use a plugin like Leaflet.markercluster with this setup.

Context, components are defined as:

    <script>
    import { onMount, onDestroy, getContext, setContext } from 'svelte'

    export let width
    export let height
    export let latLng

    let marker
    let markerElement

    const { getMap } = getContext('map')
    const map = getMap()

    setContext('layer', {
        getLayer: () => marker,
    })

    onMount(() => {
        if (map) {
            let icon = L.divIcon({
                html: markerElement,
                className: 'map-marker',
                iconSize: L.point(width, height),
            })
            marker = L.marker(latLng, { icon }).addTo(map)
        }
    })

    onDestroy(() => {
        if (marker) {
            marker.remove()
            marker = undefined
        }
    })
</script>

<div bind:this={markerElement}>
    {#if marker}
        <slot />
    {/if}
</div>

More on the architecture here: https://www.youtube.com/watch?v=JFctWXEzFZw&ab_channel=ShipBit