Refactor onDestroy to use onMount return function (#914)

* refactor(select-item): replace onDestroy with onMount return function

* refactor(date-picker): replace onDestroy with onMount return function

* refactor(switch): replace onDestroy with onMount return function

* refactor(composed-modal): replace onDestroy with onMount return function

src/ComposedModal/ComposedModal.svelte

@@ -36,7 +36,6 @@
     setContext,
     onMount,
     afterUpdate,
-    onDestroy,
   } from "svelte";
   import { writable } from "svelte/store";
 
@@ -73,13 +72,14 @@
   let opened = false;
   $: didOpen = open;
 
-  onMount(async () => {
+  onMount(() => {
-    await tick();
+    tick().then(() => {
-    focus();
+      focus();
-  });
+    });
 
-  onDestroy(() => {
+    return () => {
-    document.body.classList.remove("bx--body--with-modal-open");
+      document.body.classList.remove("bx--body--with-modal-open");
+    };
   });
 
   afterUpdate(() => {

src/ContentSwitcher/Switch.svelte

@@ -17,7 +17,7 @@
   /** Obtain a reference to the button HTML element */
   export let ref = null;
 
-  import { afterUpdate, getContext, onDestroy } from "svelte";
+  import { afterUpdate, getContext, onMount } from "svelte";
 
   const ctx = getContext("ContentSwitcher");
 
@@ -33,8 +33,8 @@
     }
   });
 
-  onDestroy(() => {
+  onMount(() => {
-    unsubscribe();
+    return () => unsubscribe();
   });
 </script>
 

src/DatePicker/DatePicker.svelte

@@ -70,7 +70,7 @@
     createEventDispatcher,
     setContext,
     afterUpdate,
-    onDestroy,
+    onMount,
   } from "svelte";
   import { writable, derived } from "svelte/store";
   import { createCalendar } from "./createCalendar";
@@ -175,6 +175,15 @@
     });
   }
 
+  onMount(() => {
+    return () => {
+      if (calendar) {
+        calendar.destroy();
+        calendar = null;
+      }
+    };
+  });
+
   afterUpdate(() => {
     if (calendar) {
       if ($range) {
@@ -188,13 +197,6 @@
     }
   });
 
-  onDestroy(() => {
-    if (calendar) {
-      calendar.destroy();
-      calendar = null;
-    }
-  });
-
   $: inputValue.set(value);
   $: value = $inputValue;
   $: inputValueFrom.set(valueFrom);

src/Select/SelectItem.svelte

@@ -11,7 +11,7 @@
   /** Set to `true` to disable the option */
   export let disabled = false;
 
-  import { getContext, onDestroy } from "svelte";
+  import { getContext, onMount } from "svelte";
 
   const ctx = getContext("Select") || getContext("TimePickerSelect");
 
@@ -21,8 +21,8 @@
     selected = currentValue === value;
   });
 
-  onDestroy(() => {
+  onMount(() => {
-    unsubscribe();
+    return () => unsubscribe();
   });
 </script>