Invoke onpop() cb in onDestroy hook instead (#29)

Author: zerodevx

cypress/integration/test.spec.js

@@ -261,4 +261,18 @@ describe('Integration Tests', () => {
       .get('._toastBtn')
       .click()
   })
+
+  it('Runs callback when toast is popped programatically', () => {
+    cy.get('[data-btn=runCallbackOnToastRemoval]')
+      .click()
+      .get('._toastItem')
+      .contains('Wait for it')
+      .window()
+      .invoke('toast.pop')
+      .wait(500)
+      .get('._toastItem')
+      .contains('callback has been executed')
+      .get('._toastBtn')
+      .click()
+  })
 })

docs/App.svelte

@@ -269,6 +269,7 @@ toast.pop(0)`,
         target: 'new',
         dismissable: false,
         initial: 0,
+        intro: { y: -192 },
         theme: {
           '--toastPadding': '0',
           '--toastMsgPadding': '0',

src/ToastItem.svelte

@@ -1,18 +1,13 @@
 <script>
+import { onDestroy } from 'svelte'
 import { tweened } from 'svelte/motion'
 import { linear } from 'svelte/easing'
 import { toast } from './stores.js'
 
 export let item
 
 const progress = tweened(item.initial, { duration: item.duration, easing: linear })
-const close = () => {
-  const { id, onpop } = item
-  toast.pop(id)
-  if (typeof onpop === 'function') {
-    onpop(id)
-  }
-}
+const close = () => toast.pop(item.id)
 const autoclose = () => {
   if ($progress === 1 || $progress === 0) {
     close()
@@ -57,6 +52,12 @@ const getProps = () => {
 $: if (typeof item.progress !== 'undefined') {
   item.next = item.progress
 }
+
+onDestroy(() => {
+  if (typeof item.onpop === 'function') {
+    item.onpop(item.id)
+  }
+})
 </script>
 
 <style>