Use explicity onDestroy calls rather than an onMount return value to ensure callbacks are actually executed to fix data provider cleanup issues

packages/client/src/components/context/DeviceBindingsProvider.svelte

@@ -1,6 +1,6 @@
 <script>
   import Provider from "./Provider.svelte"
-  import { onMount } from "svelte"
+  import { onMount, onDestroy } from "svelte"
 
   let width = window.innerWidth
   let height = window.innerHeight
@@ -21,12 +21,11 @@
   }
 
   onMount(() => {
-    const doc = document.getElementById("app-root")
-    resizeObserver.observe(doc)
+    resizeObserver.observe(document.getElementById("app-root"))
+  })
 
-    return () => {
-      resizeObserver.unobserve(doc)
-    }
+  onDestroy(() => {
+    resizeObserver.unobserve(document.getElementById("app-root"))
   })
 </script>
 

packages/client/src/components/context/Provider.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getContext, setContext, onMount } from "svelte"
+  import { getContext, setContext, onDestroy } from "svelte"
   import { dataSourceStore, createContextStore } from "stores"
   import { ActionTypes } from "constants"
   import { generate } from "shortid"
@@ -56,9 +56,9 @@
     }
   }
 
-  onMount(() => {
+  onDestroy(() => {
     // Unregister all datasource instances when unmounting this provider
-    return () => dataSourceStore.actions.unregisterInstance(instanceId)
+    dataSourceStore.actions.unregisterInstance(instanceId)
   })
 </script>
 

packages/client/src/components/preview/DNDHandler.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <script>
-  import { onMount } from "svelte"
+  import { onMount, onDestroy } from "svelte"
   import { get } from "svelte/store"
   import IndicatorSet from "./IndicatorSet.svelte"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
@@ -209,18 +209,18 @@
     document.addEventListener("dragenter", onDragEnter, false)
     document.addEventListener("dragleave", onDragLeave, false)
     document.addEventListener("drop", onDrop, false)
+  })
 
-    return () => {
-      // Events fired on the draggable target
-      document.removeEventListener("dragstart", onDragStart, false)
-      document.removeEventListener("dragend", onDragEnd, false)
+  onDestroy(() => {
+    // Events fired on the draggable target
+    document.removeEventListener("dragstart", onDragStart, false)
+    document.removeEventListener("dragend", onDragEnd, false)
 
-      // Events fired on the drop targets
-      document.removeEventListener("dragover", onDragOver, false)
-      document.removeEventListener("dragenter", onDragEnter, false)
-      document.removeEventListener("dragleave", onDragLeave, false)
-      document.removeEventListener("drop", onDrop, false)
-    }
+    // Events fired on the drop targets
+    document.removeEventListener("dragover", onDragOver, false)
+    document.removeEventListener("dragenter", onDragEnter, false)
+    document.removeEventListener("dragleave", onDragLeave, false)
+    document.removeEventListener("drop", onDrop, false)
   })
 </script>
 

packages/client/src/stores/dataSource.js

@@ -1,6 +1,5 @@
 import { writable, get } from "svelte/store"
 import { fetchTableDefinition } from "../api"
-import { TableNames } from "../constants"
 
 export const createDataSourceStore = () => {
   const store = writable([])