Refactor and add annotations

src/lib/SvelteToast.svelte

@@ -1,18 +1,22 @@
 <script>
 import { fade, fly } from 'svelte/transition'
 import { flip } from 'svelte/animate'
-import { toast } from './stores.js'
+import { toast } from './stores'
 import ToastItem from './ToastItem.svelte'
 
+/** @type {import('./stores').SvelteToastOptions} */
 export let options = {}
 export let target = 'default'
 
+let items = []
+
+function getCss(theme) {
+  return Object.keys(theme).reduce((a, c) => `${a}${c}:${theme[c]};`, '')
+}
+
 $: toast._init(target, options)
 
-let items
 $: items = $toast.filter((i) => i.target === target)
-
-const getCss = (theme) => Object.keys(theme).reduce((a, c) => `${a}${c}:${theme[c]};`, '')
 </script>
 
 <ul class="_toastContainer">

src/lib/ToastItem.svelte

@@ -2,36 +2,35 @@
 import { onMount, onDestroy } from 'svelte'
 import { tweened } from 'svelte/motion'
 import { linear } from 'svelte/easing'
-import { toast } from './stores.js'
+import { toast } from './stores'
 
+/** @type {import('./stores').SvelteToastOptions} */
 export let item
 
-const progress = tweened(item.initial, { duration: item.duration, easing: linear })
-const close = () => toast.pop(item.id)
-const autoclose = () => {
-  if ($progress === 1 || $progress === 0) {
-    close()
-  }
-}
 let next = item.initial
 let prev = next
 let paused = false
+let cprops = {}
+let unlisten
 
-$: if (next !== item.next) {
-  next = item.next
-  prev = $progress
-  paused = false
-  progress.set(next).then(autoclose)
+const progress = tweened(item.initial, { duration: item.duration, easing: linear })
+
+function close() {
+  toast.pop(item.id)
+}
+
+function autoclose() {
+  if ($progress === 1 || $progress === 0) close()
 }
 
-const pause = () => {
+function pause() {
   if (!paused && $progress !== next) {
     progress.set($progress, { duration: 0 })
     paused = true
   }
 }
 
-const resume = () => {
+function resume() {
   if (paused) {
     const d = item.duration
     const duration = d - d * (($progress - prev) / (next - prev))
@@ -40,20 +39,11 @@ const resume = () => {
   }
 }
 
-let componentProps = {}
-$: if (item.component) {
-  const { props = {}, sendIdTo } = item.component
-  componentProps = { ...props, ...(sendIdTo && { [sendIdTo]: item.id }) }
-}
-
-const check = (prop, kind = 'undefined') => typeof prop === kind
-// `progress` has been renamed to `next`; shim included for backward compatibility, to remove in next major
-$: if (!check(item.progress)) {
-  item.next = item.progress
+function check(prop, kind = 'undefined') {
+  return typeof prop === kind
 }
 
-let unlisten
-const listen = (d = document) => {
+function listen(d = document) {
   if (check(d.hidden)) return
   const handler = () => (d.hidden ? pause() : resume())
   const name = 'visibilitychange'
@@ -62,7 +52,25 @@ const listen = (d = document) => {
   handler()
 }
 
+$: if (next !== item.next) {
+  next = item.next
+  prev = $progress
+  paused = false
+  progress.set(next).then(autoclose)
+}
+
+$: if (item.component) {
+  const { props = {}, sendIdTo } = item.component
+  cprops = { ...props, ...(sendIdTo && { [sendIdTo]: item.id }) }
+}
+
+// `progress` has been renamed to `next`; shim included for backward compatibility, to remove in next major
+$: if (!check(item.progress)) {
+  item.next = item.progress
+}
+
 onMount(listen)
+
 onDestroy(() => {
   if (check(item.onpop, 'function')) {
     item.onpop(item.id)
@@ -81,7 +89,7 @@ onDestroy(() => {
 >
   <div role="status" class="_toastMsg" class:pe={item.component}>
     {#if item.component}
-      <svelte:component this={item.component.src} {...componentProps} />
+      <svelte:component this={item.component.src} {...cprops} />
     {:else}
       {@html item.msg}
     {/if}