Rename option progress to next (sorry)

Author: zerodevx

cypress/integration/test.spec.js

@@ -65,12 +65,24 @@ describe('Integration Tests', () => {
   })
 
   it('Dynamically update progress bar', () => {
-    cy.window()
-      .invoke('toast.push', 'Test', { duration: 1, initial: 0, progress: 0 })
-      .then(id => {
+    cy.window().invoke('toast.push', 'Test', { duration: 1, initial: 0, next: 0 })
+      .then($id => {
+        cy.get('._toastBar').then($bar => {
+          expect($bar.val()).to.equal(0)
+          cy.window().invoke('toast.set', $id, { next: 0.2 }).wait(50).then(() => {
+            expect(parseFloat($bar.val())).to.equal(0.2)
+            cy.get('._toastBtn').click()
+          })
+        })
+      })
+  })
+
+  it('Allows backward compatibility for `progress` key', () => {
+    cy.window().invoke('toast.push', 'Test', { duration: 1, initial: 0, progress: 0 })
+      .then($id => {
         cy.get('._toastBar').then($bar => {
           expect($bar.val()).to.equal(0)
-          cy.window().invoke('toast.set', id, { progress: 0.2 }).wait(50).then(() => {
+          cy.window().invoke('toast.set', $id, { progress: 0.2 }).wait(50).then(() => {
             expect(parseFloat($bar.val())).to.equal(0.2)
             cy.get('._toastBtn').click()
           })

docs/App.svelte

@@ -72,11 +72,11 @@ const buttons = [
     name: 'NON-DISMISSABLE',
     code: `toast.push('Where the close btn?!?', {
   initial: 0,
-  progress: 0,
+  next: 0,
   dismissable: false
 })`,
     run: () => {
-      toast.push('Where the close btn?!?', { initial: 0, progress: 0, dismissable: false })
+      toast.push('Where the close btn?!?', { initial: 0, dismissable: false })
     }
   },
   {
@@ -95,10 +95,10 @@ toast.pop(id)`,
     name: 'FLIP PROGRESS BAR',
     code: `toast.push('Progress bar is flipped', {
   initial: 0,
-  progress: 1
+  next: 1
 })`,
     run: () => {
-      toast.push('Progress bar is flipped', { initial: 0, progress: 1 })
+      toast.push('Progress bar is flipped', { initial: 0, next: 1 })
     }
   },
   {
@@ -108,32 +108,32 @@ toast.pop(id)`,
 const id = toast.push('Loading, please wait...', {
   duration: 300,
   initial: 0,
-  progress: 0,
+  next: 0,
   dismissable: false
 })
 
 await sleep(500)
-toast.set(id, { progress: 0.1 })
+toast.set(id, { next: 0.1 })
 
 await sleep(3000)
-toast.set(id, { progress: 0.7 })
+toast.set(id, { next: 0.7 })
 
 await sleep(1000)
-toast.set(id, { msg: 'Just a bit more', progress: 0.8 })
+toast.set(id, { msg: 'Just a bit more', next: 0.8 })
 
 await sleep(2000)
-toast.set(id, { progress: 1 })`,
+toast.set(id, { next: 1 })`,
     run: async () => {
       const sleep = t => new Promise(resolve => setTimeout(resolve, t))
-      const id = toast.push('Loading, please wait...', { duration: 300, initial: 0, progress: 0, dismissable: false })
+      const id = toast.push('Loading, please wait...', { duration: 300, initial: 0, dismissable: false })
       await sleep(500)
-      toast.set(id, { progress: 0.1 })
+      toast.set(id, { next: 0.1 })
       await sleep(3000)
-      toast.set(id, { progress: 0.7 })
+      toast.set(id, { next: 0.7 })
       await sleep(1000)
-      toast.set(id, { msg: 'Just a bit more', progress: 0.8 })
+      toast.set(id, { msg: 'Just a bit more', next: 0.8 })
       await sleep(2000)
-      toast.set(id, { progress: 1 })
+      toast.set(id, { next: 1 })
     }
   },
   {
@@ -244,17 +244,10 @@ toast.pop(0)`,
 })`,
     run: () => {
       toast.push({
-        component: {
-          src: DummyComponent,
-          props: {
-            title: 'A Dummy Cookie Component'
-          }
-        },
+        component: { src: DummyComponent, props: { title: 'A Dummy Cookie Component' } },
         dismissable: false,
         initial: 0,
-        theme: {
-          '--toastMsgPadding': '0'
-        }
+        theme: { '--toastMsgPadding': '0' }
       })
     }
   }

src/ToastItem.svelte

@@ -6,16 +6,20 @@ import { toast } from './stores.js'
 export let item
 
 const progress = tweened(item.initial, { duration: item.duration, easing: linear })
+let prev = item.initial
 
-let prevProgress = item.initial
-
-$: if (prevProgress !== item.progress) {
-  if (item.progress === 1 || item.progress === 0) {
-    progress.set(item.progress).then(() => toast.pop(item.id))
+$: if (prev !== item.next) {
+  if (item.next === 1 || item.next === 0) {
+    progress.set(item.next).then(() => toast.pop(item.id))
   } else {
-    progress.set(item.progress)
+    progress.set(item.next)
   }
-  prevProgress = item.progress
+  prev = item.next
+}
+
+// `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
 }
 </script>
 
@@ -79,7 +83,7 @@ $: if (prevProgress !== item.progress) {
 <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} {...item.component.props} toastId={item.id}  />
     {:else}
     {@html item.msg}
     {/if}

src/index.d.ts

@@ -8,10 +8,10 @@ declare module '@zerodevx/svelte-toast'
  * Default Toast Options
  * ```typescript
  * {
- *  duration: 4000,       // duration of progress bar tween
- *  dismissable: true,    // allow dismiss with close button
+ *  duration: 4000,       // duration of progress bar tween from previous to `next`
  *  initial: 1,           // initial progress bar value
- *  progress: 0,          // current progress
+ *  next: 0,              // next progress value
+ *  dismissable: true,    // allow dismiss with close button
  *  reversed: false,      // insert new toast to bottom of stack
  *  intro: { x: 256 },    // toast intro fly animation settings
  *  theme: {}             // css var overrides
@@ -23,9 +23,10 @@ export interface SvelteToastOptions {
   target?: string
   msg?: string
   duration?: number
-  dismissable?: boolean
   initial?: number
+  next?: number
   progress?: number
+  dismissable?: boolean
   reversed?: boolean
   intro?: FlyParams
   theme?: { [key: string]: string }

src/stores.js

@@ -2,9 +2,9 @@ import { writable } from 'svelte/store'
 
 const defaults = {
   duration: 4000,
-  dismissable: true,
   initial: 1,
-  progress: 0,
+  next: 0,
+  dismissable: true,
   reversed: false,
   intro: { x: 256 },
   theme: {}