Refactor component-messages feature

Author: zerodevx

cypress/integration/test.spec.js

@@ -96,15 +96,6 @@ 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()
@@ -147,10 +138,7 @@ describe('Integration Tests', () => {
       .get('._toastItem')
       .should('have.css', 'top', '0px')
       .get('._toastBtn')
-      .should($e => {
-        expect($e).to.have.length(2)
-      })
-    cy.window().invoke('toast.pop', 2)
+      .click()
   })
 
   it('Removes all toasts from selected container target', () => {
@@ -165,4 +153,12 @@ describe('Integration Tests', () => {
       .should('not.contain', 'NEW:')
       .window().invoke('toast.pop', 0)
   })
+
+  it('Uses component', () => {
+    cy.get('[data-btn=sendComponentAsAMessage]')
+      .click()
+      .get('._toastItem h1')
+      .should('have.text', 'A Dummy Cookie Component')
+      .window().invoke('toast.pop')
+  })
 })

docs/App.svelte

@@ -18,7 +18,7 @@ const handleClick = btn => {
   selected = btn.name
   code = btn.code
   btn.run()
-  gtag('event', `toast:${camelCase(btn.name)}`)
+  gtag('event', 'toast', { event_label: btn.name })
 }
 
 const buttons = [
@@ -145,6 +145,7 @@ toast.set(id, { progress: 1 })`,
     --toastProgressBackground: aquamarine;
   }
 </style>
+
 <script>
   toast.push('Changed some colors')
 <\/script>`, // eslint-disable-line no-useless-escape
@@ -156,12 +157,12 @@ toast.set(id, { progress: 1 })`,
   {
     name: 'POSITION TO BOTTOM',
     code: `<style>
-:root {
-  --toastContainerTop: auto;
-  --toastContainerRight: auto;
-  --toastContainerBottom: 8rem;
-  --toastContainerLeft: calc(50vw - 8rem);
-}
+  :root {
+    --toastContainerTop: auto;
+    --toastContainerRight: auto;
+    --toastContainerBottom: 8rem;
+    --toastContainerLeft: calc(50vw - 8rem);
+  }
 </style>
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
@@ -176,28 +177,6 @@ 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!',
@@ -229,19 +208,12 @@ toast.set(id, { progress: 1 })`,
   <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' });
-  // Send toast to "default" container
-  toast.push('Default container toast')
+  toast.push('NEW: Multiple toast container support', { target: 'new' })
 <\/script>`, // eslint-disable-line no-useless-escape
     run: () => {
       toast.push('NEW: Multiple toast container support', { target: 'new' })
-      toast.push('Default container toast')
     }
   },
   {
@@ -254,6 +226,37 @@ toast.pop(0)`,
     run: () => {
       toast.pop(i => i.target !== 'new')
     }
+  },
+  {
+    name: 'SEND COMPONENT AS A MESSAGE',
+    code: `toast.push({
+  component: {
+    src: DummyComponent,
+    props: {
+      title: 'A Dummy Cookie Component'
+    }
+  },
+  dismissable: false,
+  initial: 0,
+  theme: {
+    '--toastMsgPadding': '0'
+  }
+})`,
+    run: () => {
+      toast.push({
+        component: {
+          src: DummyComponent,
+          props: {
+            title: 'A Dummy Cookie Component'
+          }
+        },
+        dismissable: false,
+        initial: 0,
+        theme: {
+          '--toastMsgPadding': '0'
+        }
+      })
+    }
   }
 ]
 </script>
@@ -282,32 +285,29 @@ 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>
-  
-    <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 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="top">
-    <SvelteToast options={{ initial: 0, intro: { y: -64 } }} target="new" />
+  <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 class:colors class:bottom>
-    <SvelteToast {options} />
-  </div>
+</div>
+
+<div class="top">
+  <SvelteToast options={{ initial: 0, intro: { y: -64 } }} target="new" />
+</div>
+
+<div class:colors class:bottom>
+  <SvelteToast {options} />
+</div>

docs/Dummy.svelte

@@ -1,5 +1,17 @@
 <script>
-    export let foo
-    export let toastId
+import { toast } from '../src'
+
+export let toastId
+export let title
+
+const clicked = () => toast.pop(toastId)
 </script>
-<span>I am a Dummy.svelte component with property foo={foo} (id: {toastId})</span>
+
+<div class="w-full h-48 bg-yellow-500 rounded-sm flex flex-col">
+  <h1 class="font-bold m-2">{title}</h1>
+  <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>
+  </div>
+</div>

src/SvelteToast.svelte

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

src/ToastItem.svelte

@@ -40,7 +40,7 @@ $: if (prevProgress !== item.progress) {
   padding: var(--toastMsgPadding,0.75rem 0.5rem);
   flex: 1 1 0%;
 }
-._toastMsg :global(a) {
+.pe, ._toastMsg :global(a) {
   pointer-events: auto;
 }
 ._toastBtn {
@@ -52,7 +52,6 @@ $: if (prevProgress !== item.progress) {
   justify-content: center;
   cursor: pointer;
   outline: none;
-  pointer-events: auto;
 }
 ._toastBar {
   display: block;
@@ -78,17 +77,15 @@ $: if (prevProgress !== item.progress) {
 </style>
 
 <div class="_toastItem">
-  <div class="_toastMsg">
+  <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}" {...item.component.props} toastId={item.id}  />
     {:else}
-      {@html item.msg}
+    {@html item.msg}
     {/if}
   </div>
-
   {#if item.dismissable}
-  <div class="_toastBtn" role="button" tabindex="-1" on:click={() => toast.pop(item.id)}>✕</div>
+  <div class="_toastBtn pe" role="button" tabindex="-1" on:click={() => toast.pop(item.id)}>✕</div>
   {/if}
-
   <progress class="_toastBar" value={$progress}></progress>
 </div>

src/index.d.ts

@@ -29,6 +29,10 @@ export interface SvelteToastOptions {
   reversed?: boolean
   intro?: FlyParams
   theme?: { [key: string]: string }
+  component?: {
+    src: object
+    props?: { [key: string]: any }
+  }
 }
 
 export class SvelteToast extends SvelteComponent {