v2.0.0 (#36)

* Core - Rename createSlices functions, remove enter animation class on end

* Core - Add promise methods aliases, rename createPushSSR to createPushMock

* Core - Move store watchers to dedicated file, add push export

* Notivue, NotivueKeyboard - Rename imports to match new API

* Tests - Edit tests to match new push API

* Core - Deprecate `usePush`, remove `notivue` from v0, edit types

* Nuxt Module - Add `push` to auto-imported modules

* Astro - Add `notivue/astro` module

* Demo - Edit demo to match new `push` API

* Pkg - Edit README, up monorepo deps

* Pkg - Cleanup

* improve performance by directly accessing animationAttrs

* Core - Improve updatePositions performance

* Core - Depreacate `useNotivueConfig` alias, improve intellisense, improve astro module gen readability

* Pkg - Edit README

* Core - Fix add from queue bug

README.md

@@ -13,7 +13,8 @@
 ---
 
 **Examples:** [Custom Components](https://stackblitz.com/edit/vitejs-vite-9jkh73?file=src%2Fcomponents%2FPage.vue) -
-[Nuxt](https://stackblitz.com/edit/nuxt-starter-fnhcmx?file=pages%2Findex.vue)
+[Nuxt](https://stackblitz.com/edit/nuxt-starter-fnhcmx?file=pages%2Findex.vue) -
+[Astro](https://stackblitz.com/edit/withastro-astro-qyesvk?file=src%2Fcomponents%2FVueComponent.vue)
 
 <br />
 
@@ -35,6 +36,9 @@ _Use your own notifications while Notivue handles the rest_
 **🌀 Promise API**  
 _Update pending notifications with ease_
 
+**💫 Nuxt and Astro modules**  
+_Buit-in Nuxt and Astro modules_
+
 **🔰 Ready-made notifications with anything you need**  
 _Themes, icons, RTL support and much more_
 
@@ -61,7 +65,7 @@ pnpm add notivue
 
 <br />
 
-## Single-page app (Vite)
+## Vite
 
 > :bulb: See [↓ below](#nuxt) for **Nuxt**
 
@@ -76,23 +80,22 @@ import App from './App.vue'
 import 'notivue/notifications.css' // Only needed if using built-in notifications
 import 'notivue/animations.css' // Only needed if using built-in animations
 
+const notivue = createNotivue(/* Options */)
 const app = createApp(App)
 
-// Place it at THE END of the app.use() chain, just right before app.mount()
-export const push = createNotivue(app)
+app.use(notivue)
 app.mount('#app')
 ```
 
 **App.vue**
 
 ```vue
 <script setup>
-import { Notivue, Notifications } from 'notivue'
-import { push } from './main'
+import { Notivue, Notifications, push } from 'notivue'
 </script>
 
 <template>
-  <button @click="push.success('This is your first notification!')">Push</button>
+  <button @click="push.success('Hello from your first notification!')">Push</button>
 
   <Notivue v-slot="item">
     <Notifications :item="item" />
@@ -107,8 +110,7 @@ import { push } from './main'
 
 ```vue
 <script setup>
-import { Notivue } from 'notivue'
-import { push } from './main'
+import { Notivue, push } from 'notivue'
 </script>
 
 <template>
@@ -170,10 +172,6 @@ export default defineNuxtConfig({
 **app.vue**
 
 ```vue
-<script setup>
-const push = usePush()
-</script>
-
 <template>
   <button @click="push.success('This is your first notification!')">Push</button>
 

demo/app.vue

@@ -25,7 +25,6 @@ import type {
 const { state } = useStore()
 
 const config = useNotivue()
-const push = usePush()
 
 !isSSR &&
    watchEffect(() => document.documentElement.style.setProperty('--nv-root-width', state.maxWidth))

demo/components/nav/Nav.vue

@@ -9,8 +9,6 @@ import Button from '../shared/Button.vue'
 import DismissIcon from '../icons/DismissIcon.vue'
 import DestroyIcon from '../icons/DestroyIcon.vue'
 import NavNotificationsCustomization from './NavNotificationsCustomization.vue'
-
-const push = usePush()
 </script>
 
 <template>

demo/components/nav/NavNotificationsCustomization.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-const push = usePush()
-
 const { state, actions, computed } = useStore()
 
 function clearAllAndPushOne() {

demo/components/nav/NavNotivueConfig.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-const push = usePush()
 const config = useNotivue()
 const { queue } = useNotifications()
 

demo/components/nav/NavPushBuiltIn.vue

@@ -5,7 +5,6 @@ import PromiseIcon from '../icons/PromiseIcon.vue'
 import InfoIcon from '../icons/InfoIcon.vue'
 import WarnIcon from '../icons/WarnIcon.vue'
 
-const push = usePush()
 const store = useStore()
 
 const {

demo/components/nav/NavPushCustom.vue

@@ -4,8 +4,6 @@ import Button from '../shared/Button.vue'
 
 import profilePicture from '@/assets/profile-picture.jpg?url'
 
-const push = usePush()
-
 const { state, actions, computed } = useStore()
 
 export interface CustomActionProps {

demo/middleware/push.global.ts

@@ -1,5 +1,5 @@
-export default defineNuxtRouteMiddleware(() => {
-   const push = usePush()
+import { push } from 'notivue'
 
+export default defineNuxtRouteMiddleware(() => {
    push.info('Welcome to Notivue! Use the controls below to test it out.')
 })

demo/package.json

@@ -11,7 +11,7 @@
    "devDependencies": {
       "@nuxt/devtools": "1.0.0-beta.3",
       "@types/luxon": "^3.3.7",
-      "@types/node": "^20.10.4",
+      "@types/node": "^20.10.5",
       "lightningcss": "^1.22.1",
       "nuxt": "^3.8.2"
    },

package.json

@@ -17,7 +17,7 @@
       "concurrently": "^8.2.2",
       "husky": "^8.0.3",
       "lint-staged": "^15.2.0",
-      "prettier": "^3.1.0"
+      "prettier": "^3.1.1"
    },
    "lint-staged": {
       "*.{js,ts,vue,json,css,md}": "prettier --write"

packages/notivue/Notivue/NotivueImpl.vue

@@ -46,7 +46,7 @@ const dataAlign = computed(() => ({
    <Teleport :to="config.teleportTo.value">
       <!-- List Container -->
       <ol
-         v-if="items.getLength() > 0"
+         v-if="items.length > 0"
          v-bind="{ ...mouseEvents, ...touchEvents, ...elements.rootAttrs.value, ...dataAlign }"
          :aria-label="props.listAriaLabel"
          :ref="elements.root"
@@ -59,7 +59,7 @@ const dataAlign = computed(() => ({
             tabindex="-1"
             :key="item.id"
             :data-notivue-id="item.id"
-            :aria-setsize="items.getLength()"
+            :aria-setsize="items.length"
             :aria-posinset="index + 1"
             :ref="elements.items"
             :style="{

packages/notivue/NotivueKeyboard/NotivueKeyboardImpl.vue

@@ -12,6 +12,7 @@ import {
 } from 'vue'
 
 import { useNotivue, useStore } from '@/core/useStore'
+import { push } from '@/core/createPush'
 import { focusableEls, keyboardInjectionKey, DEFAULT_PROPS } from './constants'
 import { useKeyboard } from './useKeyboard'
 import { useLastFocused } from './useLastFocused'
@@ -59,7 +60,7 @@ const emptyPushOptions = computed<PushOptions>(() => ({
 
 // Store
 
-const { elements, timeouts, push, queue } = useStore()
+const { elements, timeouts, queue } = useStore()
 
 const config = useNotivue()
 
@@ -330,7 +331,7 @@ function onCandidatesKeydown(e: KeyboardEvent) {
           * If the queue has items, we simply do not perform any operation.
           * Once the new candidate is pushed, it will be focused automatically.
           */
-         if (queue.getLength() > 0) return
+         if (queue.length > 0) return
 
          const nextContainer = candidateContainers.value[currCandidateIndex + 1]
 

packages/notivue/astro/Notivue.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount } from 'vue'
+import { DEFAULT_PROPS } from '@/Notivue/constants'
+import { NotivueClientOnly } from '@/shared/ClientOnly'
+import { push } from '@/core/createPush'
+
+import NotivueImpl from '@/Notivue/NotivueImpl.vue'
+
+import type { NotivueComponentSlot, NotivueProps } from 'notivue'
+import type { PushAstroEvent } from './types'
+
+const props = withDefaults(defineProps<NotivueProps>(), DEFAULT_PROPS)
+
+defineSlots<NotivueComponentSlot>()
+
+function onPush(e: CustomEvent<PushAstroEvent>) {
+   // Create the notification as usual
+   const notification = push[e.detail.type](e.detail)
+
+   // Dispatch the push result
+   window.dispatchEvent(
+      new CustomEvent(e.detail.resultEventName, {
+         detail: notification,
+      })
+   )
+}
+
+const onClearAll = () => push.clearAll()
+const onDestroyAll = () => push.destroyAll()
+
+// Listen for custom events
+const events = [
+   ['notivue:push', onPush],
+   ['notivue:clear-all', onClearAll],
+   ['notivue:destroy-all', onDestroyAll],
+] as [keyof WindowEventMap, EventListener][]
+
+onMounted(() => {
+   events.forEach(([e, handler]) => window.addEventListener(e, handler))
+})
+
+onBeforeUnmount(() => {
+   events.forEach(([e, handler]) => window.removeEventListener(e, handler))
+})
+</script>
+
+<template>
+   <NotivueClientOnly>
+      <NotivueImpl v-bind="props" v-slot="item">
+         <slot v-bind="item" />
+      </NotivueImpl>
+   </NotivueClientOnly>
+</template>

packages/notivue/astro/push.ts

@@ -0,0 +1,51 @@
+import type { PushOptions } from 'notivue'
+import type { PushAstroEvent, MaybeAstroPushPromiseReturn } from './types'
+
+let eventId = 0
+
+export function pushEvent<T extends Omit<PushAstroEvent, 'resultEventName'>>(
+   detail: T
+): MaybeAstroPushPromiseReturn<T> {
+   eventId++
+
+   // Listen for the result of the notification that will be created by the Notivue...
+   let pushResult = {} as MaybeAstroPushPromiseReturn<T>
+   const resultEventName = `notivue:id:${eventId}`
+
+   // ...upon receival, save the result and remove the listener
+   window.addEventListener(resultEventName, saveResult as EventListener, {
+      once: true,
+   })
+
+   function saveResult(e: CustomEvent<MaybeAstroPushPromiseReturn<T>>) {
+      pushResult = e.detail
+   }
+
+   // Dispatch the incoming push options to the receiver to create the notification
+   window.dispatchEvent(
+      new CustomEvent('notivue:push', {
+         detail: {
+            ...detail,
+            type: detail.type,
+            resultEventName,
+         },
+      })
+   )
+
+   return pushResult
+}
+
+export const push = {
+   success: (options: PushOptions) => pushEvent({ ...options, type: 'success' }),
+   info: (options: PushOptions) => pushEvent({ ...options, type: 'info' }),
+   error: (options: PushOptions) => pushEvent({ ...options, type: 'error' }),
+   warning: (options: PushOptions) => pushEvent({ ...options, type: 'warning' }),
+   promise: (options: PushOptions) => pushEvent({ ...options, type: 'promise' }),
+   load: (options: PushOptions) => pushEvent({ ...options, type: 'promise' }),
+   clearAll() {
+      window.dispatchEvent(new CustomEvent('notivue:clear-all'))
+   },
+   destroyAll() {
+      window.dispatchEvent(new CustomEvent('notivue:destroy-all'))
+   },
+}

packages/notivue/astro/types.ts

@@ -0,0 +1,22 @@
+import type { ClearFunctions, PushPromiseReturn, NotificationType, PushOptions } from 'notivue'
+
+export type PushAstroEvent = PushOptions & {
+   type: Exclude<NotificationType, 'promise-resolve' | 'promise-reject'>
+   resultEventName: string
+}
+
+export type MaybeAstroPushPromiseReturn<T> = T extends PushOptions & { type: 'promise' }
+   ? PushPromiseReturn
+   : T extends PushOptions
+     ? ClearFunctions
+     : never
+
+interface CustomEventMap {
+   'notivue:push': CustomEvent<PushAstroEvent>
+   'notivue:clear-all': CustomEvent
+   'notivue:destroy-all': CustomEvent
+}
+
+declare global {
+   interface WindowEventMap extends CustomEventMap {}
+}