@graphcommerce/framer-utils 6.0.0 → 6.0.1-canary.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 6.0.1-canary.1
+
+## 6.0.1-canary.0
+
+### Patch Changes
+
+- [#1854](https://github.com/graphcommerce-org/graphcommerce/pull/1854) [`9cdce5786`](https://github.com/graphcommerce-org/graphcommerce/commit/9cdce578693782733d7bb3f4b7bf364e1cf26124) - Simplify useElementScroll component to a better standard to debug stuff ([@paales](https://github.com/paales))
+
 ## 6.0.0
 
 ### Patch Changes

package/hooks/useElementScroll.ts

@@ -1,68 +1,48 @@
-import { motionValue, MotionValue, useTransform } from 'framer-motion'
-import { equal } from '@wry/equality'
+import { MotionValue, useMotionValue, useTransform } from 'framer-motion'
 import sync from 'framesync'
-import { RefObject, useMemo } from 'react'
+import { RefObject } from 'react'
+import { useConstant } from './useConstant'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 
-type ScrollMotionValue = { animating: boolean; x: number; y: number; xMax: number; yMax: number }
-
 export interface ScrollMotionValues {
+  animating: MotionValue<boolean>
   x: MotionValue<number>
   y: MotionValue<number>
   xProgress: MotionValue<number>
   yProgress: MotionValue<number>
   xMax: MotionValue<number>
   yMax: MotionValue<number>
-  scroll: MotionValue<ScrollMotionValue>
-}
-
-const refScrollMap = new Map<
-  RefObject<HTMLElement | undefined> | string,
-  MotionValue<ScrollMotionValue>
->()
-
-const initval = () => motionValue({ animating: false, 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)
+  const animating = useMotionValue(false)
+  const x = useMotionValue(0)
+  const y = useMotionValue(0)
+  const xMax = useMotionValue(0)
+  const yMax = useMotionValue(0)
+  const xProgress = useTransform([x, xMax], (v: number[]) => (!v[0] && !v[1] ? 0 : v[0] / v[1]))
+  const yProgress = useTransform([y, yMax], (v: number[]) => (!v[0] && !v[1] ? 0 : v[0] / v[1]))
+
+  const scroll = useConstant<ScrollMotionValues>(() => ({
+    animating,
+    x,
+    y,
+    xProgress,
+    yProgress,
+    xMax,
+    yMax,
+  }))
 
   useIsomorphicLayoutEffect(() => {
     const element = ref?.current
     if (!element) return () => {}
 
     const updater = () => {
-      const scrollValue: ScrollMotionValue = {
-        ...scroll.get(),
-        xMax: Math.max(0, element.scrollWidth - element.offsetWidth),
-        yMax: Math.max(0, element.scrollHeight - element.offsetHeight),
-      }
-
-      if (!scroll.get().animating) {
-        scrollValue.x = element.scrollLeft
-        scrollValue.y = element.scrollTop
-      }
+      xMax.set(Math.max(0, element.scrollWidth - element.offsetWidth))
+      yMax.set(Math.max(0, element.scrollHeight - element.offsetHeight))
 
-      if (!equal(scrollValue, scroll.get())) scroll.set(scrollValue)
+      if (!animating.get()) y.set(element.scrollTop)
+      if (!animating.get()) x.set(element.scrollLeft)
     }
     updater()
 
@@ -76,10 +56,7 @@ export function useElementScroll(ref?: RefObject<HTMLElement | undefined>): Scro
       element.removeEventListener('scroll', updaterTimed)
       ro.disconnect()
     }
-  }, [ref, scroll])
+  }, [animating, ref, x, xMax, y, yMax])
 
-  return useMemo(
-    () => ({ x, y, xProgress, yProgress, xMax, yMax, scroll }),
-    [x, xMax, xProgress, y, yMax, yProgress, scroll],
-  )
+  return scroll
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-utils",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.0",
+  "version": "6.0.1-canary.1",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,9 +15,9 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.0",
-    "@graphcommerce/prettier-config-pwa": "6.0.0",
-    "@graphcommerce/typescript-config-pwa": "6.0.0"
+    "@graphcommerce/eslint-config-pwa": "6.0.1-canary.1",
+    "@graphcommerce/prettier-config-pwa": "6.0.1-canary.1",
+    "@graphcommerce/typescript-config-pwa": "6.0.1-canary.1"
   },
   "peerDependencies": {
     "framer-motion": "^10.0.0",