feat(katzencore): Updated Version Check, New Animation Strategy for m…

…ounting

playground/pages/animation_test.vue

@@ -9,6 +9,12 @@ const screenScroll = useScrollAnimation({ screenHeight: true })
 <template>
   <div>
     <h1>Animation Test Page</h1>
+    <NuxtLink
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      to="/animation_test_2"
+    >
+      Animation Test Page 2
+    </NuxtLink>
     <div class="flex flex-col">
       <div class="flex flex-row">
         <p>On this page the useAnimation Composables are tested</p>

playground/pages/animation_test_2.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const section1 = ref<HTMLElement | null>(null)
+const animation = useScrollAnimation({ element: section1 })
+
+const globalScroll = useScrollAnimation({ global: true })
+const screenScroll = useScrollAnimation({ screenHeight: true })
+</script>
+
+<template>
+  <div>
+    <h1>Animation Test Page 2</h1>
+    <NuxtLink
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      to="/animation_test"
+    >
+      Animation Test Page
+    </NuxtLink>
+    <div class="flex flex-col">
+      <div class="flex flex-row">
+        <p>On this page the useAnimation Composables are tested</p>
+      </div>
+    </div>
+
+    <div class="fixed bottom-0 left-0 font-bold text-2xl text-black bg-white p-4 border border-black rounded-lg">
+      <span>GlobalScroll: {{ globalScroll }}</span>
+
+      <br>
+
+      <span>ScreenScroll: {{ screenScroll }}</span>
+    </div>
+
+    <div
+      ref="section1"
+      class="h-screen w-full bg-gray-100 flex flex-col items-center justify-between"
+    >
+      <h2>SECTION 1</h2>
+      <p>{{ animation }}</p>
+    </div>
+    <div class="h-screen w-full bg-red-100 flex flex-col items-center justify-center">
+      <h2>SECTION 2</h2>
+    </div>
+
+    <div class="h-screen w-full bg-red-100 flex flex-col items-center justify-center">
+      <h2>SECTION 3</h2>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/runtime/composables/useAnimation.ts

@@ -6,7 +6,7 @@
  */
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { onMounted, onUnmounted } from '#imports'
+import { nextTick, onBeforeUnmount, onMounted } from '#imports'
 
 interface ScrollAnimationOptions {
   global?: boolean
@@ -23,7 +23,7 @@ interface ScrollAnimationValues {
   full: number
 }
 
-const watchingElements: Map<HTMLElement, UpdateFunction> = new Map()
+const watchingElements = ref<Map<HTMLElement, UpdateFunction>>(new Map())
 const globalScrollPercentage = ref<ScrollAnimationValues>({ capped: 0, full: 0 })
 const screenHeightPercentage = ref<ScrollAnimationValues>({ capped: 0, full: 0 })
 
@@ -37,22 +37,27 @@ export const useScrollAnimation = (options: ScrollAnimationOptions) => {
   }
   else if (options.element) {
     // wait for element to be mounted
-    onMounted(() => {
+    onMounted(async () => {
+      await nextTick()
       const updateFunction = (values: ScrollAnimationValues) => {
         reactiveScrollProperty.value = values
       }
-      watchingElements.set(<HTMLElement>options.element?.value, updateFunction)
+      watchingElements.value.set(<HTMLElement>options.element?.value, updateFunction)
     })
   }
   else {
     throw new Error('Please provide an element or set global or screenHeight to true in the options')
   }
 
-  onMounted(() => {
-    window.removeEventListener('scroll', globalScrollListener)
+  onMounted(async () => {
+    await nextTick()
+    globalScrollListener()
     window.addEventListener('scroll', globalScrollListener)
   })
-  onUnmounted(() => window.removeEventListener('scroll', globalScrollListener))
+  onBeforeUnmount(() => {
+    window.removeEventListener('scroll', globalScrollListener)
+    watchingElements.value = new Map()
+  })
 
   return reactiveScrollProperty
 }
@@ -66,7 +71,7 @@ const globalScrollListener = () => {
   const screenHeightPercent = scrollY / window.innerHeight
   screenHeightPercentage.value = { capped: Math.min(1, screenHeightPercent), full: screenHeightPercent }
 
-  watchingElements.forEach((updateFunction, element) => {
+  watchingElements.value.forEach((updateFunction, element) => {
     const elementTop = element.getBoundingClientRect().top
     const elementHeight = element.getBoundingClientRect().height
     const cappedValue = Math.max(0, Math.min(1, (elementTop + elementHeight) / window.innerHeight))

src/runtime/update.ts

@@ -1,11 +1,10 @@
-import pkg from '../../package.json' assert { type: 'json' }
-
 export interface UpdateResult {
   currentVersion: string
   latestVersion: string
 }
 
 export const updateCheck = async () => {
+  const pkg = (await import('../../package.json')).default
   const version = pkg.version
   const https = await import('node:https')
   return new Promise<UpdateResult>((resolve) => {