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/SvelteUIElement.ts

@@ -11,7 +11,7 @@ export default class SvelteUIElement<
     Events extends Record<string, any> = any,
     Slots extends Record<string, any> = any
 > extends BaseUIElement {
-    private readonly _svelteComponent: {
+    public readonly _svelteComponent: {
         new (args: {
             target: HTMLElement
             props: Props
@@ -19,10 +19,11 @@ export default class SvelteUIElement<
             slots?: Slots
         }): SvelteComponentTyped<Props, Events, Slots>
     }
-    private readonly _props: Props
-    private readonly _events: Events
-    private readonly _slots: Slots
+    public readonly _props: Props
+    public readonly _events: Events
+    public readonly _slots: Slots
     private tag: "div" | "span" = "div"
+    public readonly isSvelte = true
 
     constructor(svelteElement, props?: Props, events?: Events, slots?: Slots) {
         super()
@@ -47,4 +48,18 @@ export default class SvelteUIElement<
         })
         return el
     }
+
+    public getClass(){
+        if(this.clss.size === 0){
+            return undefined
+        }
+        return this.clss
+    }
+
+    public getStyle(){
+        if(this.style === ""){
+            return undefined
+        }
+        return this.style
+    }
 }

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}