@graphcommerce/framer-utils - npm Package Compare versions

Comparing version 3.1.2 to 3.1.3

CHANGELOG.md

 # Change Log
 
+## 3.1.3
+
+### Patch Changes
+
+- [#1477](https://github.com/graphcommerce-org/graphcommerce/pull/1477) [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494) Thanks [@paales](https://github.com/paales)! - LayoutOverlay performance improvements
+
 ## 3.1.2
@@ -4,0 +10,0 @@

hooks/useElementScroll.ts

@@ -1,7 +0,8 @@
-import { motionValue, MotionValue } from 'framer-motion'
+import { motionValue, MotionValue, useTransform } from 'framer-motion'
 import sync from 'framesync'
-import { RefObject } from 'react'
-import { useConstant } from './useConstant'
+import { RefObject, useMemo } from 'react'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 
+type ScrollMotionValue = { x: number; y: number; xMax: number; yMax: number }
+
 interface ScrollMotionValues {
@@ -14,17 +15,35 @@ x: MotionValue<number>
   yMax: MotionValue<number>
+  scroll: MotionValue<ScrollMotionValue>
 }
 
-export function useElementScroll(
-  ref?: RefObject<HTMLElement | undefined>,
-  noScroll = 0,
-): ScrollMotionValues {
-  const values = useConstant<ScrollMotionValues>(() => ({
-    x: motionValue(0),
-    y: motionValue(0),
-    xProgress: motionValue(0),
-    yProgress: motionValue(0),
-    xMax: motionValue(0),
-    yMax: motionValue(0),
-  }))
+const refScrollMap = new Map<
+  RefObject<HTMLElement | undefined> | string,
+  MotionValue<ScrollMotionValue>
+>()
 
+const initval = () => motionValue({ x: 0, y: 0, xMax: 0, yMax: 0 })
+
+const getScrollMotion = (ref?: RefObject<HTMLElement | undefined>, sharedKey?: string) => {
+  if (!ref) return initval()
+
+  const key = sharedKey || ref
+
+  if (!refScrollMap.has(key)) {
+    const scroll = initval()
+    refScrollMap.set(key, scroll)
+  }
+
+  return refScrollMap.get(key) as MotionValue<ScrollMotionValue>
+}
+
+export function useElementScroll(ref?: RefObject<HTMLElement | undefined>): ScrollMotionValues {
+  const scroll = getScrollMotion(ref)
+
+  const x = useTransform(scroll, (v) => v.x)
+  const y = useTransform(scroll, (v) => v.y)
+  const xProgress = useTransform(scroll, (v) => (!v.x && !v.xMax ? 0 : v.x / v.xMax))
+  const yProgress = useTransform(scroll, (v) => (!v.y && !v.yMax ? 0 : v.y / v.yMax))
+  const xMax = useTransform(scroll, (v) => v.xMax)
+  const yMax = useTransform(scroll, (v) => v.yMax)
+
   useIsomorphicLayoutEffect(() => {
@@ -35,17 +54,20 @@ const element = ref?.current
     const updater = () => {
+      if (scroll.isAnimating()) return
+
       sync.read(() => {
-        const { scrollLeft, scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } =
-          element
+        const scrollnew = {
+          x: element.scrollLeft,
+          y: element.scrollTop,
+          xMax: Math.max(0, element.scrollWidth - element.offsetWidth),
+          yMax: Math.max(0, element.scrollHeight - element.offsetHeight),
+        }
 
-        const xMax = Math.max(0, scrollWidth - offsetWidth)
-        const yMax = Math.max(0, scrollHeight - offsetHeight)
-
-        values.x.set(scrollLeft)
-        values.y.set(scrollTop)
-        values.xMax.set(xMax)
-        values.yMax.set(yMax)
-
-        // Set 0-1 progress
-        values.xProgress.set(!scrollLeft && !xMax ? noScroll : scrollLeft / xMax)
-        values.yProgress.set(!scrollTop && !yMax ? noScroll : scrollTop / yMax)
+        if (JSON.stringify(scrollnew) !== JSON.stringify(scroll.get())) {
+          scroll.set({
+            x: element.scrollLeft,
+            y: element.scrollTop,
+            xMax: Math.max(0, element.scrollWidth - element.offsetWidth),
+            yMax: Math.max(0, element.scrollHeight - element.offsetHeight),
+          })
+        }
       })
@@ -63,5 +85,8 @@ }
     }
-  }, [noScroll, ref, values])
+  }, [ref, scroll])
 
-  return values
+  return useMemo(
+    () => ({ x, y, xProgress, yProgress, xMax, yMax, scroll }),
+    [x, xMax, xProgress, y, yMax, yProgress, scroll],
+  )
 }

package.json

@@ -5,3 +5,3 @@ {
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "sideEffects": false,
@@ -8,0 +8,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

15997

increased by8.51%

Lines of code

197

increased by10.06%

No dependency changes