Allow forwarding of toastId to component-message

Author: zerodevx

cypress/integration/test.spec.js

@@ -167,10 +167,12 @@ describe('Integration Tests', () => {
   })
 
   it('Uses component', () => {
-    cy.get('[data-btn=sendComponentAsAMessage]')
-      .click()
-      .get('._toastItem h1')
-      .should('have.text', 'A Dummy Cookie Component')
-      .window().invoke('toast.pop')
+    cy.get('[data-btn=sendComponentAsAMessage]').click()
+      .get('._toastItem').contains('A Dummy Cookie Component')
+      .get('[data-btn=default]').click()
+      .get('[data-btn=dummyAccept').click()
+      .get('._toastItem h1').should('not.exist')
+      .get('._toastBtn').click()
+      .get('._toastItem').should('not.exist')
   })
 })

docs/App.svelte

@@ -234,7 +234,8 @@ toast.pop(0)`,
     src: DummyComponent,
     props: {
       title: 'A Dummy Cookie Component'
-    }
+    },
+    sendIdTo: 'toastId'
   },
   dismissable: false,
   initial: 0,
@@ -244,7 +245,7 @@ toast.pop(0)`,
 })`,
     run: () => {
       toast.push({
-        component: { src: DummyComponent, props: { title: 'A Dummy Cookie Component' } },
+        component: { src: DummyComponent, props: { title: 'A Dummy Cookie Component' }, sendIdTo: 'toastId' },
         dismissable: false,
         initial: 0,
         theme: { '--toastMsgPadding': '0' }

docs/Dummy.svelte

@@ -12,6 +12,6 @@ const clicked = () => toast.pop(toastId)
   <p class="text-sm mx-2 mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   <div class="flex-1 flex flex-row justify-between">
     <button class="w-28" on:click={clicked}>DECLINE</button>
-    <button class="w-28"  on:click={clicked}>ACCEPT</button>
+    <button class="w-28" on:click={clicked} data-btn="dummyAccept">ACCEPT</button>
   </div>
 </div>

src/ToastItem.svelte

@@ -17,6 +17,14 @@ $: if (prev !== item.next) {
   prev = item.next
 }
 
+const getProps = () => {
+  const { props, sendIdTo } = item.component
+  if (sendIdTo) {
+    props[sendIdTo] = item.id
+  }
+  return props
+}
+
 // `progress` has been renamed to `next`; shim included for backward compatibility, to remove in next major
 $: if (typeof item.progress !== 'undefined') {
   item.next = item.progress
@@ -83,7 +91,7 @@ $: if (typeof item.progress !== 'undefined') {
 <div class="_toastItem">
   <div class="_toastMsg" class:pe={item.component}>
     {#if item.component}
-    <svelte:component this={item.component.src} {...item.component.props} toastId={item.id}  />
+    <svelte:component this={item.component.src} {...getProps()} />
     {:else}
     {@html item.msg}
     {/if}

src/index.d.ts

@@ -8,7 +8,7 @@ declare module '@zerodevx/svelte-toast'
  * Default Toast Options
  * ```typescript
  * {
- *  duration: 4000,       // duration of progress bar tween from previous to `next`
+ *  duration: 4000,       // duration of progress bar tween to the `next` value
  *  initial: 1,           // initial progress bar value
  *  next: 0,              // next progress value
  *  dismissable: true,    // allow dismiss with close button
@@ -33,6 +33,7 @@ export interface SvelteToastOptions {
   component?: {
     src: object
     props?: { [key: string]: any }
+    sendIdTo?: string
   }
 }