From 6b69ce4eb9a74d1d384d32c6981a6aaad9e78bc2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 27 Oct 2021 14:24:36 +0100
Subject: [PATCH] Use explicity onDestroy calls rather than an onMount return
 value to ensure callbacks are actually executed to fix data provider cleanup
 issues

---
 .../context/DeviceBindingsProvider.svelte     | 11 +++++-----
 .../src/components/context/Provider.svelte    |  6 ++---
 .../src/components/preview/DNDHandler.svelte  | 22 +++++++++----------
 packages/client/src/stores/dataSource.js      |  1 -
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/packages/client/src/components/context/DeviceBindingsProvider.svelte b/packages/client/src/components/context/DeviceBindingsProvider.svelte
index a6dc64fe74..cdc19c74c2 100644
--- a/packages/client/src/components/context/DeviceBindingsProvider.svelte
+++ b/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>
 
diff --git a/packages/client/src/components/context/Provider.svelte b/packages/client/src/components/context/Provider.svelte
index 77efb707d8..19a5c3a462 100644
--- a/packages/client/src/components/context/Provider.svelte
+++ b/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>
 
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 8a824f6131..474df4a674 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/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>
 
diff --git a/packages/client/src/stores/dataSource.js b/packages/client/src/stores/dataSource.js
index 8fb9614a88..c60039aa8a 100644
--- a/packages/client/src/stores/dataSource.js
+++ b/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([])