feat: use suspense to display content

Author: stafyniaksacha

src/runtime/components/NinjaToaster.ts

@@ -1,5 +1,6 @@
 import type { PropType } from 'vue'
 import {
+  Suspense,
   Transition,
   computed,
   defineComponent,
@@ -14,7 +15,7 @@ import { defu } from 'defu'
 
 import type { NinjaToastEventBus } from '../events'
 import type { NinjaToasterProps } from '../../types'
-import { usePausableTimeout } from '../composables/usePausableTimeout'
+import { useNinjaPausableTimeout } from '../composables/useNinjaPausableTimeout'
 import { useNinjaToasterContainer } from '../composables/useNinjaToasterContainer'
 import { createNinjaToasterState } from '../composables/useNinjaToasterState'
 import { type NinjaToasterRenderQueue, createRenderQueue } from '../queue'
@@ -66,7 +67,7 @@ export default defineComponent({
     })
 
     const { container, containerId } = useNinjaToasterContainer(theme)
-    const timer = usePausableTimeout(() => {
+    const timer = useNinjaPausableTimeout(() => {
       close()
     }, props.duration)
 
@@ -218,6 +219,7 @@ export default defineComponent({
     })
 
     return () => {
+      const contentSuspense = () => h(Suspense, null, [content.value])
       const wrapper = withDirectives(
         h(
           'div',
@@ -235,7 +237,7 @@ export default defineComponent({
             onKeydown,
             onClick
           },
-          content.value
+          contentSuspense
         ),
         [[vShow, isActive.value]]
       )

src/runtime/composables/usePausableTimeout.ts renamed to src/runtime/composables/useNinjaPausableTimeout.ts

@@ -1,7 +1,9 @@
 import { ref } from 'vue'
 import { tryOnBeforeUnmount } from '@vueuse/core'
+import { NinjaPausableTimeout } from '../../types'
 
-export function usePausableTimeout(callback: Function, timeout?: number) {
+
+export function useNinjaPausableTimeout(callback: Function, timeout?: number): NinjaPausableTimeout {
   const pausedAt = ref(0)
   const startedAt = ref(0)
   const remaining = ref(0)

src/runtime/composables/useNinjaToasterState.ts

@@ -1,17 +1,8 @@
-import type { InjectionKey, Ref } from 'vue'
+import type { InjectionKey } from 'vue'
 import { computed, inject, provide, ref } from 'vue'
 import { tryOnBeforeUnmount, tryOnMounted } from '@vueuse/core'
 
-import type { usePausableTimeout } from './usePausableTimeout'
-
-export interface NinjaToasterState {
-  isHovered: Ref<boolean>
-  isActive: Ref<boolean>
-  timer: ReturnType<typeof usePausableTimeout>
-  duration: number
-  click: (event: Event) => void | Promise<void>
-  close: () => void | Promise<void>
-}
+import { NinjaToasterState } from '../../types'
 
 export const NinjaToasterStateKey = Symbol.for(
   'NinjaToasterState'

src/runtime/create.ts

@@ -1,4 +1,4 @@
-import { type App, type VNode, h, render } from 'vue'
+import { type DefineComponent, type App, type VNode, h, render } from 'vue'
 import { defu } from 'defu'
 
 import type { NinjaToasterTheme, NinjaToasterBaseProps, NinjaToasterProps, NinjaToasterShow } from '../types'
@@ -9,8 +9,10 @@ import NinjaToaster from './components/NinjaToaster'
 import { resolveComponent, useAppConfig, useNuxtApp } from '#imports'
 import type * as _AllComponents from '#components'
 
+type DefaultProps = InstanceType<DefineComponent>['$props']
+
 type ComponentProps<T> = T extends keyof typeof _AllComponents
-  ? InstanceType<(typeof _AllComponents)[T]>['$props']
+  ? Omit<InstanceType<(typeof _AllComponents)[T]>['$props'], keyof DefaultProps>
   : undefined
 
 function createElement() {

src/types.ts

@@ -1,6 +1,5 @@
 import type { Component, TransitionProps } from 'vue'
 
-
 export interface ModuleOptions {
   installPlugin?: boolean
 }
@@ -31,3 +30,22 @@ export interface NinjaToasterTheme {
   transition?: TransitionProps
   maxToasts?: number
 }
+
+export interface NinjaPausableTimeout {
+  pausedAt: Ref<number>
+  startedAt: Ref<number>
+  remaining: Ref<number>
+  start: () => void
+  stop: () => void
+  pause: () => void
+  resume: () => void
+}
+
+export interface NinjaToasterState {
+  isHovered: Ref<boolean>
+  isActive: Ref<boolean>
+  timer: NinjaPausableTimeout
+  duration: number
+  click: (event: Event) => void | Promise<void>
+  close: () => void | Promise<void>
+}