2.4.1 (#51)

* Core - Allow passing a string ref as push parameter

* Core - Streamline repositioning counters and store watchers

* Demo - Improve nav controls and instance notices

* Pkg - Bump 2.4.1

* Pkg - Edit nuxt/README

* Pkg - Use `powerful` instead of `fully-featured` in any description

* Pkg - Edit docs website url

* Pkg - Fix crazy link in README

* Pkg - Fix crazy link

* Core - Edit comments

README.md

@@ -8,7 +8,7 @@
 
 ### Powerful toast notification system for Vue and Nuxt
 
-[Live Demo](https://notivue.smastrom.io) - [Documentation](https://notivuedocs.netlify.app)
+[Live Demo](https://notivue.smastrom.io) - [Documentation](https://docs.notivue.smastrom.io)
 
 ---
 

demo/components/nav/Nav.vue

@@ -30,11 +30,9 @@ watch(isRunning, (newVal) => {
       dir="ltr"
    >
       <template v-if="isRunning">
-         Notivue is now running again. This will be dismissed shortly.</template
+         Notivue is now running again. This notice will be dismissed shortly.</template
       >
-      <template v-else>
-         Notivue instance has been stopped. Restart it to create notifications.
-      </template>
+      <template v-else> Notivue has been stopped. Restart it to create notifications. </template>
    </div>
 
    <nav dir="ltr">

demo/components/nav/NavNotivueConfig.vue

@@ -138,8 +138,8 @@ const btnProps = {
 .Select {
    text-align: center;
    display: flex;
-   justify-items: center;
    padding-right: 1rem;
+   cursor: pointer;
 
    -webkit-appearance: none;
    appearance: none;

demo/components/nav/NavPushBuiltIn.vue

@@ -3,7 +3,7 @@ const { state, messages } = useStore()
 
 async function asyncRefMessagePush() {
    const initialMessage = ref(state.rtl ? 'جاري تحميل الملفات...' : 'Preparing to upload files...')
-   const notification = push.promise({ message: initialMessage })
+   const notification = push.promise(initialMessage)
 
    for (let n = 1; n < 4; n++) {
       await new Promise((resolve) => setTimeout(resolve, getRandomInt(1000, 2000)))

demo/components/shared/Background.server.vue

@@ -41,7 +41,7 @@
          <nav>
             <a href="https://github.com/smastrom/notivue" target="_blank">GitHub</a>
             <span>—</span>
-            <a href="https://notivuedocs.netlify.app/" target="_blank">Docs</a>
+            <a href="https://docs.notivue.smastrom.io/" target="_blank">Docs</a>
          </nav>
       </div>
    </div>

demo/utils/head.ts

@@ -1,8 +1,8 @@
-const description = 'Notivue is a fully-featured toast notification system for Vue and Nuxt.'
+const description = 'Notivue is a powerful toast notification system for Vue and Nuxt.'
 
 export function getHead() {
    return {
-      title: 'Notivue - Fully-featured toast notification system for Vue and Nuxt',
+      title: 'Notivue - Powerful toast notification system for Vue and Nuxt',
       link: [
          {
             rel: 'icon',

packages/notivue/core/createNotivue.ts

@@ -62,15 +62,15 @@ function createInstance(startOnCreation: boolean) {
 
       if (startOnCreation) setPush(push)
 
-      let unwatchStore = startOnCreation ? watchStore() : () => {}
+      let unwatchStore = startOnCreation ? watchStore() : [() => {}]
 
       const instance = {
          isRunning: isRunningReadonly,
          startInstance() {
             if (isRunning.value) return
 
-            unwatchStore = watchStore()
             setPush(push)
+            unwatchStore = watchStore()
 
             isRunning.value = true
          },
@@ -79,11 +79,11 @@ function createInstance(startOnCreation: boolean) {
 
             store.items.clear()
             store.queue.clear()
-            store.items.resetCount()
+            store.items.clearEffects()
             store.animations.resetTransitionStyles()
 
             setPush(createPushMock())
-            unwatchStore()
+            unwatchStore.forEach((unwatch) => unwatch())
 
             isRunning.value = false
          },

packages/notivue/core/createPush.ts

@@ -1,7 +1,9 @@
+import { unref } from 'vue'
+
 import { NotificationTypeKeys as NType } from './constants'
 import { createPushProxies } from './createStore'
 
-import type { NotificationType, Push, PushParameter } from 'notivue'
+import type { NotificationType, Push, PushOptions, PushParameter } from 'notivue'
 
 export const push = createPushMock()
 
@@ -13,9 +15,11 @@ export function createPush(proxies: ReturnType<typeof createPushProxies>): Push
    let createCount = 0
 
    function push(options: PushParameter, type: NotificationType, id = `${createCount++}`) {
-      if (typeof options === 'string') options = { message: options }
+      if (typeof unref(options) === 'string') {
+         options = { message: options } as PushOptions
+      }
 
-      proxies.push({ ...options, id, type })
+      proxies.push({ ...(options as PushOptions), id, type })
 
       return {
          id,

packages/notivue/core/createStore.ts

@@ -84,31 +84,21 @@ export function createQueue() {
 
 export function createItems(config: ConfigSlice, queue: QueueSlice) {
    return {
-      createdCount: ref(0),
-      addCreated() {
-         this.createdCount.value++
-      },
-      clearedCount: ref(0),
-      addCleared() {
-         this.clearedCount.value++
-      },
-      destroyedCount: ref(0),
-      addDestroyed() {
-         this.destroyedCount.value++
-      },
-      resetCount() {
-         this.createdCount.value = 0
-         this.clearedCount.value = 0
-         this.destroyedCount.value = 0
-      },
       entries: shallowRef<StoreItem[]>([]),
       get length() {
          return this.entries.value.length
       },
+      effectsCount: ref(0),
+      addEffect() {
+         this.effectsCount.value++
+      },
+      clearEffects() {
+         this.effectsCount.value = 0
+      },
       add(item: StoreItem) {
          this.entries.value.unshift(item)
-         this.addCreated()
          this.triggerRef()
+         this.addEffect()
       },
       addFromQueue() {
          const next = {
@@ -226,7 +216,7 @@ export function createAnimations(
          }
 
          if (!item || !leave || isDestroy || this.isReducedMotion.value) {
-            items.addDestroyed()
+            items.addEffect()
             return onAnimationend()
          }
 
@@ -241,7 +231,7 @@ export function createAnimations(
             },
          })
 
-         items.addCleared()
+         items.addEffect()
       },
       playClearAll() {
          items.entries.value.forEach((e) => window.clearTimeout(e.timeout as number))
@@ -438,7 +428,7 @@ export function createPushProxies({
                   duplicateCount: queueDupe.duplicateCount + 1,
                })
 
-               queue.triggerRef() // This is actually not needed...
+               queue.triggerRef() // This is actually not needed in this context...
             }
 
             if (queueDupe || dupe) return
@@ -449,7 +439,7 @@ export function createPushProxies({
          if (options.type === NType.PROMISE_RESOLVE || options.type === NType.PROMISE_REJECT) {
             if (queue.get(entry.id)) {
                queue.update(entry.id, { ...entry, createdAt, timeout: createTimeout })
-               queue.triggerRef() // ...but we're exposing the queue `useNotifications` so this is needed
+               queue.triggerRef() // ...but we're exposing the queue via `useNotifications` so consumers may need this
             } else {
                items.update(entry.id, { ...entry, createdAt, timeout: createTimeout() })
                items.triggerRef()

packages/notivue/core/createStoreWatchers.ts

@@ -3,50 +3,41 @@ import { watch } from 'vue'
 import type { NotivueStore } from 'notivue'
 
 export function createStoreWatchers(store: NotivueStore) {
-   const unwatchCount = watch(
-      () => [
-         store.items.createdCount.value,
-         store.items.clearedCount.value,
-         store.items.destroyedCount.value,
-      ],
-      () => {
-         store.animations.updatePositions()
-      },
-      { flush: 'post' }
-   )
+   return [
+      watch(
+         store.items.effectsCount,
+         () => {
+            store.animations.updatePositions()
+         },
+         { flush: 'post' }
+      ),
 
-   const unwatchPosition = watch(
-      store.config.position,
-      () => {
-         store.animations.updatePositions({ isImmediate: true })
-      },
-      { flush: 'post' }
-   )
+      watch(
+         store.config.position,
+         () => {
+            store.animations.updatePositions({ isImmediate: true })
+         },
+         { flush: 'post' }
+      ),
 
-   const unwatchRoot = watch(
-      () => store.items.length === 0 && store.queue.length === 0,
-      (isReset) => {
-         if (isReset) {
-            store.timeouts.reset()
-            store.elements.setRootAttrs({})
-         }
-      },
-      { flush: 'post' }
-   )
+      watch(
+         () => store.items.length === 0 && store.queue.length === 0,
+         (isReset) => {
+            if (isReset) {
+               store.timeouts.reset()
+               store.elements.setRootAttrs({})
+            }
+         },
+         { flush: 'post' }
+      ),
 
-   const unwatchAnimations = watch(
-      () => store.config.animations.value.enter,
-      (newEnter, prevEnter) => {
-         if (newEnter !== prevEnter) {
-            store.animations.resetTransitionStyles()
+      watch(
+         () => store.config.animations.value.enter,
+         (newEnter, prevEnter) => {
+            if (newEnter !== prevEnter) {
+               store.animations.resetTransitionStyles()
+            }
          }
-      }
-   )
-
-   return () => {
-      unwatchCount()
-      unwatchPosition()
-      unwatchRoot()
-      unwatchAnimations()
-   }
+      ),
+   ]
 }

packages/notivue/core/types.ts

@@ -150,7 +150,9 @@ export type StoreItem<T extends Obj = Obj> = DeepRequired<NotificationOptions> &
 /** Portion of the store item exposed to slot */
 export type NotivueItem<T extends Obj = Obj> = Omit<StoreItem<T>, keyof HiddenInternalItemData>
 
-export type PushParameter<T extends Obj = Obj> = PushOptions<T> | NotificationOptions['message']
+export type PushParameter<T extends Obj = Obj> =
+   | PushOptions<T>
+   | Exclude<NotificationOptions['message'], undefined> // NonNullable doesn't work?
 
 export type PushStatic = <T extends Obj = Obj>(
    options: PushParameter<T>

packages/notivue/core/useStore.ts

@@ -25,7 +25,7 @@ export function useStore() {
  * - `stopInstance` - Stops the Notivue instance.
  * - `isRunning` - Readonly ref to check if the Notivue instance is running.
  *
- * @docs https://notivuedocs.netlify.app/api/use-notivue-instance
+ * @docs https://docs.notivue.smastrom.io/api/use-notivue-instance
  */
 export function useNotivueInstance(): NotivueInstance {
    if (isSSR) {
@@ -44,11 +44,11 @@ export function useNotivueInstance(): NotivueInstance {
  *
  * @returns
  *
- * The current [configuration](https://notivuedocs.netlify.app/customization/configuration)
+ * The current [configuration](https://docs.notivue.smastrom.io/customization/configuration)
  * where each property is a [ref](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref)
  * that allows for reactive updates and side effects watching.
  *
- * @docs https://notivuedocs.netlify.app/api/use-notivue
+ * @docs https://docs.notivue.smastrom.io/api/use-notivue
  */
 export function useNotivue(): UseNotivueReturn {
    if (isSSR) {
@@ -92,7 +92,7 @@ export function usePush() {
  * - `entries` - read-only reactive array of all the current displayed notifications
  * - `queue` - read-only reactive array of all the notifications waiting to be displayed
  *
- * @docs https://notivuedocs.netlify.app/api/use-notifications
+ * @docs https://docs.notivue.smastrom.io/api/use-notifications
  */
 export function useNotifications(): NotivueComputedEntries {
    if (isSSR) {

packages/notivue/nuxt/README.md

@@ -8,7 +8,7 @@
 
 ### Powerful toast notification system for Vue and Nuxt
 
-[Live Demo](https://notivue.smastrom.io) - [Documentation](https://notivuedocs.netlify.app)
+[Live Demo](https://notivue.smastrom.io) - [Documentation](https://docs.notivue.smastrom.io)
 
 ---
 
@@ -67,8 +67,8 @@ pnpm add notivue
 export default defineNuxtConfig({
   modules: ['notivue/nuxt'],
   css: [
-    'notivue/notification.css', // Only needed if using built-in notifications
-    'notivue/animations.css' // Only needed if using built-in animations
+    'notivue/notification.css', // Only needed if using built-in <Notification />
+    'notivue/animations.css' // Only needed if using default animations
   ],
   notivue: {
     // Options
@@ -78,7 +78,7 @@ export default defineNuxtConfig({
 
 <blockquote>
 
-:bulb: After installing the module, any function, object and component mentioned in the [documentation](https://notivuedocs.netlify.app) can be auto-imported except for types which must be imported manually if needed.
+:bulb: After installing the module, any function, object and component mentioned in the [documentation](https://docs.notivue.smastrom.io) can be auto-imported except for types which must be imported manually if needed.
 
 ```ts
 import type { NotivueConfig, NotivueItem /*, ... */ } from 'notivue'
@@ -135,7 +135,7 @@ import type { NotivueConfig, NotivueItem /*, ... */ } from 'notivue'
     </div>
   </Notivue>
 
-  <!-- RouterView, etc. -->
+  <!-- NuxtLayout, NuxtPage, etc. -->
 </template>
 ```
 

packages/notivue/nuxt/module.json

@@ -1,5 +1,5 @@
 {
    "name": "notivue/nuxt",
    "configKey": "notivue",
-   "version": "2.4.0"
+   "version": "2.4.1"
 }

packages/notivue/package.json

@@ -1,8 +1,8 @@
 {
    "name": "notivue",
-   "version": "2.4.0",
+   "version": "2.4.1",
    "private": false,
-   "description": "Fully-featured toast notification system for Vue and Nuxt",
+   "description": "Powerful toast notification system for Vue and Nuxt",
    "keywords": [
       "vue",
       "vuejs",