fix: queues and events propagation

Author: stafyniaksacha

src/runtime/components/NinjaToaster.ts

@@ -11,12 +11,12 @@ import {
   withDirectives
 } from 'vue'
 
+import type { NinjaToastEventBus } from '../events'
 import type { NinjaToasterProps } from '../../props'
 import { usePausableTimeout } from '../composables/usePausableTimeout'
 import { useNinjaToasterContainer } from '../composables/useNinjaToasterContainer'
 import { createNinjaToasterState } from '../composables/useNinjaToasterState'
 import { type NinjaToasterRenderQueue, createRenderQueue } from '../queue'
-import { useNuxtApp } from '#app'
 
 export default defineComponent({
   name: 'NinjaToaster',
@@ -28,7 +28,7 @@ export default defineComponent({
       required: true
     },
     duration: {
-      type: Number as PropType<NinjaToasterProps['duration']>,
+      type: Number,
       default: 5000
     },
     transition: {
@@ -40,16 +40,24 @@ export default defineComponent({
       default: () => ({} as NinjaToasterProps['theme'])
     },
     dismissible: {
-      type: Boolean as PropType<NinjaToasterProps['dismissible']>,
+      type: Boolean,
       default: true
     },
     pauseOnHover: {
-      type: Boolean as PropType<NinjaToasterProps['pauseOnHover']>,
+      type: Boolean,
       default: true
     },
     maxToasts: {
-      type: Number as PropType<NinjaToasterProps['maxToasts']>,
+      type: Number,
       default: Infinity
+    },
+    queues: {
+      type: Map as PropType<Map<string, NinjaToasterRenderQueue>>,
+      default: () => new Map()
+    },
+    events: {
+      type: Object as PropType<NinjaToastEventBus>,
+      default: () => ({})
     }
   },
   emits: ['close', 'click', 'show'],
@@ -63,15 +71,13 @@ export default defineComponent({
     const isActive = ref(false)
     const unqueue = ref<() => void>()
     const rootElement = ref<HTMLElement>()
-    const nuxt = useNuxtApp()
-    const events = nuxt.$nt.events
     let queue: NinjaToasterRenderQueue
 
-    if (nuxt.$nt.queues.has(containerId)) {
-      queue = nuxt.$nt.queues.get(containerId)
+    if (props.queues.has(containerId)) {
+      queue = props.queues.get(containerId)!
     } else {
       queue = createRenderQueue()
-      nuxt.$nt.queues.set(containerId, queue)
+      props.queues.set(containerId, queue)
     }
 
     const content = computed(() => {
@@ -81,6 +87,10 @@ export default defineComponent({
     })
 
     const shouldQueue = () => {
+      if (!container.value) {
+        return false
+      }
+
       if (props.maxToasts <= 0 || props.maxToasts === Infinity) {
         return false
       }
@@ -116,6 +126,10 @@ export default defineComponent({
         return
       }
 
+      if (!container.value || !rootElement.value) {
+        return
+      }
+
       container.value.insertAdjacentElement('afterbegin', rootElement.value)
       isActive.value = true
 
@@ -175,19 +189,19 @@ export default defineComponent({
       if (typeof rootElement.value?.remove !== 'undefined') {
         rootElement.value?.remove()
       } else {
-        rootElement.value?.parentNode.removeChild(rootElement.value)
+        rootElement.value?.parentNode?.removeChild(rootElement.value)
       }
     }
 
     onMounted(() => {
       show()
 
-      events.on('clear', close)
-      events.on(`clear-${containerId}`, close)
+      props.events.on('clear', close)
+      props.events.on(`clear-${containerId}`, close)
     })
     onBeforeUnmount(() => {
-      events.off('clear', close)
-      events.off(`clear-${containerId}`, close)
+      props.events.off('clear', close)
+      props.events.off(`clear-${containerId}`, close)
     })
 
     createNinjaToasterState({
@@ -206,7 +220,7 @@ export default defineComponent({
           {
             role: 'alert',
             tabindex: 0,
-            class: props.theme.wrapperClass,
+            class: props.theme?.wrapperClass,
             onMouseover,
             onMouseleave,
             onFocus,

src/runtime/composables/usePausableTimeout.ts

@@ -1,12 +1,12 @@
 import { ref } from 'vue'
 import { tryOnBeforeUnmount } from '@vueuse/core'
 
-export function usePausableTimeout(callback: Function, timeout: number) {
+export function usePausableTimeout(callback: Function, timeout?: number) {
   const pausedAt = ref(0)
   const startedAt = ref(0)
   const remaining = ref(0)
 
-  let timer
+  let timer: number | undefined
 
   function stop() {
     if (!timer) {
@@ -20,7 +20,7 @@ export function usePausableTimeout(callback: Function, timeout: number) {
   function start() {
     pausedAt.value = 0
     startedAt.value = Date.now()
-    remaining.value = timeout
+    remaining.value = timeout ?? 0
 
     stop()
     timer = setTimeout(callback, remaining.value)

src/runtime/create.ts

@@ -4,19 +4,29 @@ import { defu } from 'defu'
 import type { NinjaToasterTheme } from '../theme'
 import type { NinjaToasterProps } from '../props'
 import type { NinjaToasterRenderQueue } from './queue'
-import { createEventBus } from './events'
+import { type NinjaToastEventBus, createEventBus } from './events'
 import NinjaToaster from './components/NinjaToaster'
+
+// @ts-expect-error - Nuxt 3 auto-imports
 import { useNuxtApp, useRuntimeConfig } from '#app'
 
 function createElement() {
+  // @ts-expect-error - Nuxt 3 context
   if (process.server) {
     return null
   }
 
   return document.createElement('div')
 }
 
-function mountWithContext(app: App, component: any, props: NinjaToasterProps) {
+function mountWithContext(
+  app: App,
+  component: any,
+  props: NinjaToasterProps & {
+    events: NinjaToastEventBus
+    queues: Map<string, NinjaToasterRenderQueue>
+  }
+) {
   const el = createElement()
 
   if (el) {
@@ -58,6 +68,8 @@ export function createNinjaToaster(
     return new Promise<NinjaToasterShow>((resolve) => {
       mountWithContext(app, NinjaToaster, {
         ...props,
+        events,
+        queues,
         onShow: (toast: NinjaToasterShow) => {
           resolve(toast)
 
@@ -67,6 +79,7 @@ export function createNinjaToaster(
         }
       })
 
+      // @ts-expect-error - Nuxt 3 context
       if (process.server) {
         resolve({
           el: null,
@@ -77,8 +90,6 @@ export function createNinjaToaster(
   }
 
   function clearAll() {
-    console.log('clear all')
-
     events.emit('clear')
     queues.forEach((queue) => {
       queue.clear()
@@ -89,17 +100,13 @@ export function createNinjaToaster(
   function clear(theme: NinjaToasterTheme | string) {
     const containerId = typeof theme === 'string' ? theme : theme.containerId
 
-    console.log('clear', containerId)
-
     events.emit(`clear-${containerId}`)
     if (queues.has(containerId)) {
       queues.get(containerId)?.clear()
     }
   }
 
   return {
-    events,
-    queues,
     show,
     clearAll,
     clear

src/runtime/events.ts

@@ -8,7 +8,7 @@ export function createEventBus() {
     queue[name].push(callback)
   }
 
-  function off(name: string, callback) {
+  function off(name: string, callback: NinjaToasterEventCallback) {
     if (queue[name]) {
       for (let i = 0; i < queue[name].length; i++) {
         if (queue[name][i] === callback) {

src/runtime/plugin.ts

@@ -1,4 +1,6 @@
 import { createNinjaToaster } from './create'
+
+// @ts-expect-error - Nuxt 3 auto-imports
 import { defineNuxtPlugin } from '#app'
 
 export default defineNuxtPlugin(() => {

src/runtime/queue.ts

@@ -6,7 +6,7 @@ export interface NinjaToasterQueue {
 export function createRenderQueue() {
   // last in last out queue
   const queue: NinjaToasterQueue[] = []
-  let timer: ReturnType<typeof setTimeout> | null = null
+  let timer: ReturnType<typeof setTimeout> | undefined
 
   function add(item: NinjaToasterQueue) {
     queue.push(item)
@@ -32,7 +32,7 @@ export function createRenderQueue() {
     queue.length = 0
     if (timer) {
       clearTimeout(timer)
-      timer = null
+      timer = undefined
     }
   }
 

src/theme.d.ts

@@ -1,5 +1,5 @@
 export interface NinjaToasterTheme {
-  containerId?: string;
+  containerId: string;
   containerClass?: string;
   wrapperClass?: string;
 }