Add support for component-messages (#24)

Author: AlexRevin

cypress/integration/test.spec.js

@@ -96,6 +96,15 @@ describe('Integration Tests', () => {
       .click()
   })
 
+  it('Uses component', () => {
+    cy.get('[data-btn=useComponent]')
+      .click()
+      .get('._toastItem span')
+      .should('have.text', 'I am a Dummy.svelte component with property foo=bar (id: 10)')
+      .get('._toastBtn')
+      .click()
+  })
+
   it('Restores defaults', () => {
     cy.get('[data-btn=restoreDefaults]')
       .click()
@@ -138,7 +147,10 @@ describe('Integration Tests', () => {
       .get('._toastItem')
       .should('have.css', 'top', '0px')
       .get('._toastBtn')
-      .click()
+      .should($e => {
+        expect($e).to.have.length(2)
+      })
+    cy.window().invoke('toast.pop', 2)
   })
 
   it('Removes all toasts from selected container target', () => {

docs/App.svelte

@@ -2,6 +2,7 @@
 import { tick } from 'svelte'
 import { SvelteToast, toast } from '../src'
 import Prism from './Prism.svelte'
+import DummyComponent from './Dummy.svelte'
 import camelCase from 'camelcase'
 
 // Hoist to `window` for debug
@@ -175,6 +176,28 @@ toast.set(id, { progress: 1 })`,
       toast.push('Bottoms up!')
     }
   },
+  {
+    name: 'USE COMPONENT',
+    code: `
+    toast.push({
+        component: {
+          src: DummyComponent, 
+          props: {
+            foo: 'bar'
+          }
+        }
+      })`,
+    run: async () => {
+      toast.push({
+        component: {
+          src: DummyComponent,
+          props: {
+            foo: 'bar'
+          }
+        }
+      })
+    }
+  },
   {
     name: 'RESTORE DEFAULTS',
     code: '// All default settings restored!',
@@ -189,29 +212,36 @@ toast.set(id, { progress: 1 })`,
   {
     name: 'CREATE NEW TOAST CONTAINER',
     code: `<style>
-.wrap {
-  --toastContainerTop: 0.5rem;
-  --toastContainerRight: 2rem;
-  --toastContainerBottom: auto;
-  --toastContainerLeft: 2rem;
-  --toastWidth: 100%;
-  --toastMinHeight: 1.5rem;
-  --toastBackground: rgba(59,130,246,0.95);
-  --toastMsgPadding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
-}
+  .wrap {
+    --toastContainerTop: 0.5rem;
+    --toastContainerRight: 2rem;
+    --toastContainerBottom: auto;
+    --toastContainerLeft: 2rem;
+    --toastWidth: 100%;
+    --toastMinHeight: 1.5rem;
+    --toastBackground: rgba(59,130,246,0.95);
+    --toastMsgPadding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+  }
 </style>
 
 <div class="wrap">
   <SvelteToast target="new" options={{ initial: 0, intro: { y: -64 } }} />
 </div>
 
+<div>
+  <SvelteToast options={{ initial: 0, intro: { y: -64 } }} />
+</div>
+
 <script>
   // Send toast to "new" container
-  toast.push('NEW: Multiple toast container support', { target: 'new' })
+  toast.push('NEW: Multiple toast container support', { target: 'new' });
+  // Send toast to "default" container
+  toast.push('Default container toast')
 <\/script>`, // eslint-disable-line no-useless-escape
     run: () => {
       toast.push('NEW: Multiple toast container support', { target: 'new' })
+      toast.push('Default container toast')
     }
   },
   {
@@ -252,32 +282,32 @@ toast.pop(0)`,
   font-size: 0.875rem;
 }
 </style>
-
-<div class="container">
-  <div class="w-full h-64 px-2 mt-4 mb-8">
-    <Prism classes="w-full h-full bg-gray-700 text-gray-200 font-mono shadow rounded-sm overflow-scroll p-4">
-      {code}
-    </Prism>
+  
+  <div class="container">
+    <div class="w-full h-64 px-2 mt-4 mb-8">
+      <Prism classes="w-full h-full bg-gray-700 text-gray-200 font-mono shadow rounded-sm overflow-scroll p-4">
+        {code}
+      </Prism>
+    </div>
+  
+    <div class="flex flex-row flex-wrap items-center justify-center">
+  
+      {#each buttons as btn}
+      <button
+        class:selected={selected === btn.name}
+        on:click={() => { handleClick(btn) }}
+        data-btn={camelCase(btn.name)}>
+        {btn.name}
+      </button>
+      {/each}
+  
+    </div>
   </div>
-
-  <div class="flex flex-row flex-wrap items-center justify-center">
-
-    {#each buttons as btn}
-    <button
-      class:selected={selected === btn.name}
-      on:click={() => { handleClick(btn) }}
-      data-btn={camelCase(btn.name)}>
-      {btn.name}
-    </button>
-    {/each}
-
+  
+  <div class="top">
+    <SvelteToast options={{ initial: 0, intro: { y: -64 } }} target="new" />
   </div>
-</div>
-
-<div class="top">
-  <SvelteToast options={{ initial: 0, intro: { y: -64 } }} target="new" />
-</div>
-
-<div class:colors class:bottom>
-  <SvelteToast {options} />
-</div>
+  
+  <div class:colors class:bottom>
+    <SvelteToast {options} />
+  </div>

docs/Dummy.svelte

@@ -0,0 +1,5 @@
+<script>
+    export let foo
+    export let toastId
+</script>
+<span>I am a Dummy.svelte component with property foo={foo} (id: {toastId})</span>

src/SvelteToast.svelte

@@ -25,7 +25,7 @@ ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
-  pointer-events: none;
+  pointer-events: var(--toastContainerPointerEvents, auto);
   z-index: 9999;
 }
 </style>

src/ToastItem.svelte

@@ -79,7 +79,11 @@ $: if (prevProgress !== item.progress) {
 
 <div class="_toastItem">
   <div class="_toastMsg">
-    {@html item.msg}
+    {#if item.component}
+      <svelte:component this="{item.component.src}" { ...item.component.props} toastId={item.id}  />
+    {:else}
+      {@html item.msg}
+    {/if}
   </div>
 
   {#if item.dismissable}