2.4.2 (#52)

* Core - Rename eventCount * Core - Fine-tune syncTransitionStyles * Demo - Edit NavActions * Pkg - Bump 2.4.2 * Core - Edit comments * Pkg - Disable output minification
smastrom · Apr 15, 2024 · 6b29277 · 6b29277
1 parent b7c2705
commit 6b29277
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 52 deletions.
diff --git a/demo/components/nav/NavActions.vue b/demo/components/nav/NavActions.vue
@@ -1,24 +1,12 @@
 <script setup lang="ts">
-const { entries } = useNotifications()
-
 const { isRunning, startInstance, stopInstance } = useNotivueInstance()
 </script>
 
 <template>
-   <SharedButton
-      @click="push.clearAll()"
-      text="Dismiss All"
-      :isDisabled="entries.length === 0"
-      :key="entries.length"
-   >
+   <SharedButton @click="push.clearAll" text="Dismiss All">
       <IconsDismissIcon />
    </SharedButton>
-   <SharedButton
-      @click="push.destroyAll()"
-      text="Destroy All"
-      :isDisabled="entries.length === 0"
-      :key="entries.length"
-   >
+   <SharedButton @click="push.destroyAll" text="Destroy All">
       <IconsDestroyIcon />
    </SharedButton>
 

diff --git a/packages/notivue/core/createNotivue.ts b/packages/notivue/core/createNotivue.ts
@@ -79,7 +79,7 @@ function createInstance(startOnCreation: boolean) {
 
             store.items.clear()
             store.queue.clear()
-            store.items.clearEffects()
+            store.items.clearLifecycleEvents()
             store.animations.resetTransitionStyles()
 
             setPush(createPushMock())

diff --git a/packages/notivue/core/createStore.ts b/packages/notivue/core/createStore.ts
@@ -1,4 +1,4 @@
-import { ref, shallowRef, triggerRef, unref, isRef, type Ref } from 'vue'
+import { ref, shallowRef, triggerRef, unref, isRef, type Ref, type CSSProperties } from 'vue'
 
 import {
    createConfigRefs,
@@ -88,17 +88,17 @@ export function createItems(config: ConfigSlice, queue: QueueSlice) {
       get length() {
          return this.entries.value.length
       },
-      effectsCount: ref(0),
-      addEffect() {
-         this.effectsCount.value++
+      lifecycleEventsCount: ref(0),
+      addLifecycleEvent() {
+         this.lifecycleEventsCount.value++
       },
-      clearEffects() {
-         this.effectsCount.value = 0
+      clearLifecycleEvents() {
+         this.lifecycleEventsCount.value = 0
       },
       add(item: StoreItem) {
          this.entries.value.unshift(item)
          this.triggerRef()
-         this.addEffect()
+         this.addLifecycleEvent()
       },
       addFromQueue() {
          const next = {
@@ -167,40 +167,36 @@ export function createAnimations(
    queue: QueueSlice,
    elements: ElementsSlice
 ) {
-   type TransitionStyles = { transitionDuration: string; transitionTimingFunction: string }
+   let tStyles = ['0.35s', 'cubic-bezier(0.5, 1, 0.25, 1)']
 
    return {
       isReducedMotion: ref(false),
-      transitionStyles: null as null | TransitionStyles,
+      transitionStyles: null as null | Pick<CSSProperties, 'transitionDuration' | 'transitionTimingFunction'>, // prettier-ignore
       setReducedMotion(newVal: boolean) {
          this.isReducedMotion.value = newVal
       },
-      getTransitionStyles() {
-         if (!this.transitionStyles) this.syncTransitionStyles()
-         return this.transitionStyles
-      },
       resetTransitionStyles() {
          this.transitionStyles = null
       },
       syncTransitionStyles() {
-         const mountedRoot = elements.root.value
-         if (!mountedRoot) return // If the root is not yet queryable, try to sync the next push
-
-         const enterClass = config.animations.value.enter
-         const animEl = enterClass ? mountedRoot.querySelector(`.${enterClass}`) : null
-
-         console.log('Syncing transition styles')
+         const { enter } = config.animations.value
 
-         if (!animEl) {
-            this.transitionStyles = { transitionDuration: '0s', transitionTimingFunction: 'ease' }
+         if (!enter) {
+            tStyles = ['0s', 'ease']
          } else {
-            const styles = window.getComputedStyle(animEl)
+            const animEl = elements.root.value?.querySelector(`.${enter}`)
+            if (animEl) {
+               console.log('Syncing transition styles')
 
-            this.transitionStyles = {
-               transitionDuration: styles.animationDuration,
-               transitionTimingFunction: styles.animationTimingFunction,
+               const style = window.getComputedStyle(animEl)
+               tStyles = [style.animationDuration, style.animationTimingFunction]
             }
          }
+
+         this.transitionStyles = {
+            transitionDuration: tStyles[0],
+            transitionTimingFunction: tStyles[1],
+         }
       },
       playLeave(id: string, { isDestroy = false, isUserTriggered = false } = {}) {
          const { leave = '' } = config.animations.value
@@ -216,7 +212,7 @@ export function createAnimations(
          }
 
          if (!item || !leave || isDestroy || this.isReducedMotion.value) {
-            items.addEffect()
+            items.addLifecycleEvent()
             return onAnimationend()
          }
 
@@ -231,7 +227,7 @@ export function createAnimations(
             },
          })
 
-         items.addEffect()
+         items.addLifecycleEvent()
       },
       playClearAll() {
          items.entries.value.forEach((e) => window.clearTimeout(e.timeout as number))
@@ -251,9 +247,19 @@ export function createAnimations(
          })
       },
       updatePositions({ isImmediate = false } = {}) {
-         const transitionStyles = this.getTransitionStyles()
-         if (!transitionStyles) return
-
+         if (!this.transitionStyles) {
+            // Runs the first time a notification is rendered
+            window.requestAnimationFrame(() => {
+               this.syncTransitionStyles()
+               window.requestAnimationFrame(() => {
+                  this.updatePositionsImpl(isImmediate)
+               })
+            })
+         } else {
+            this.updatePositionsImpl(isImmediate)
+         }
+      },
+      updatePositionsImpl(isImmediate: boolean) {
          console.log('Updating positions')
 
          const isReduced = this.isReducedMotion.value || isImmediate
@@ -272,7 +278,7 @@ export function createAnimations(
                positionStyles: {
                   willChange: 'transform',
                   transform: `translate3d(0, ${accPrevHeights}px, 0)`,
-                  ...(isReduced ? { transition: 'none' } : transitionStyles),
+                  ...(isReduced ? { transition: 'none' } : this.transitionStyles),
                },
             })
 

diff --git a/packages/notivue/core/createStoreWatchers.ts b/packages/notivue/core/createStoreWatchers.ts
@@ -5,7 +5,7 @@ import type { NotivueStore } from 'notivue'
 export function createStoreWatchers(store: NotivueStore) {
    return [
       watch(
-         store.items.effectsCount,
+         store.items.lifecycleEventsCount,
          () => {
             store.animations.updatePositions()
          },

diff --git a/packages/notivue/nuxt/module.json b/packages/notivue/nuxt/module.json
@@ -1,5 +1,5 @@
 {
    "name": "notivue/nuxt",
    "configKey": "notivue",
-   "version": "2.4.1"
+   "version": "2.4.2"
 }
diff --git a/packages/notivue/package.json b/packages/notivue/package.json
@@ -1,6 +1,6 @@
 {
    "name": "notivue",
-   "version": "2.4.1",
+   "version": "2.4.2",
    "private": false,
    "description": "Powerful toast notification system for Vue and Nuxt",
    "keywords": [

diff --git a/packages/notivue/vite.config.ts b/packages/notivue/vite.config.ts
@@ -27,12 +27,13 @@ export default defineConfig({
    },
    esbuild: {
       drop: isFinalBundle ? ['console'] : [],
-      ...(!isFinalBundle ? { minifyIdentifiers: false, minifySyntax: false } : {}),
+      minifyIdentifiers: false,
+      minifySyntax: false,
    },
    build: {
       emptyOutDir: isFinalBundle,
       target: 'es2015',
-      minify: isFinalBundle ? 'esbuild' : false,
+      minify: false,
       lib: {
          entry: 'index.ts',
          fileName: 'index',