ToSvelte will now bind directly to svelte in the case that a SvelteUIElement is passed. This helps with cleaning up MapLibre maps, which should help with #2024

src/UI/Base/ToSvelte.svelte

@@ -1,13 +1,24 @@
 <script lang="ts">
   import BaseUIElement from "../BaseUIElement.js"
   import { onDestroy, onMount } from "svelte"
+  import SvelteUIElement from "./SvelteUIElement"
 
   export let construct: BaseUIElement | (() => BaseUIElement)
   let elem: HTMLElement
   let html: HTMLElement
+  let isSvelte = false
+  let uiElement : BaseUIElement | SvelteUIElement | undefined
+  let svelteElem: SvelteUIElement
   onMount(() => {
-    const uiElem = typeof construct === "function" ? construct() : construct
-    html = uiElem?.ConstructElement()
+    uiElement = typeof construct === "function" ? construct() : construct
+
+    if (uiElement?.["isSvelte"]) {
+      isSvelte = true
+      svelteElem = <SvelteUIElement> uiElement
+      return
+    }
+
+    html = uiElement?.ConstructElement()
 
     if (html !== undefined) {
       elem?.replaceWith(html)
@@ -16,7 +27,12 @@
 
   onDestroy(() => {
     html?.remove()
+    uiElement?.Destroy()
   })
 </script>
 
-<span bind:this={elem} />
+{#if isSvelte}
+  <svelte:component this={svelteElem?._svelteComponent} {...svelteElem._props} class={svelteElem.getClass()} style={svelteElem.getStyle()}/>
+{:else}
+  <span bind:this={elem} />
+{/if}