@graphcommerce/framer-utils 3.1.2 → 3.1.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## 3.1.5
+
+### Patch Changes
+
+- [#1598](https://github.com/graphcommerce-org/graphcommerce/pull/1598) [`707dbc73d`](https://github.com/graphcommerce-org/graphcommerce/commit/707dbc73d181204d88fdbbd2e09340e25b2b5f7b) Thanks [@paales](https://github.com/paales)! - Upgraded dependencies
+
+* [#1600](https://github.com/graphcommerce-org/graphcommerce/pull/1600) [`5c5645e6e`](https://github.com/graphcommerce-org/graphcommerce/commit/5c5645e6eaf5314c063f05547707fcd4b34a8717) Thanks [@paales](https://github.com/paales)! - Reduce the required properties for useMotionValueValue
+
+## 3.1.4
+
+### Patch Changes
+
+- [#1490](https://github.com/graphcommerce-org/graphcommerce/pull/1490) [`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb) Thanks [@paales](https://github.com/paales)! - upgraded packages
+
+## 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
 
 ### Patch Changes

package/hooks/useClientSize.ts

@@ -45,6 +45,8 @@ export function useClientSizeCssVar() {
  *   return <motion.div style={{ height: y }}>bla</motion.div>
  * }
  * ```
+ *
+ * @deprecated Use `var(--client-size-y)` or `var(--client-size-x)` instead
  */
 export function useClientSize(options?: UseClientSizeOptions): UseClientSizeReturn {
   const ret = useConstant<UseClientSizeReturn>(() => ({

package/hooks/useElementScroll.ts

@@ -1,9 +1,10 @@
-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 {
   x: MotionValue<number>
   y: MotionValue<number>
@@ -11,41 +12,62 @@ interface ScrollMotionValues {
   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({ 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>,
-  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),
-  }))
+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(() => {
     const element = ref?.current
     if (!element) return () => {}
 
     const updater = () => {
-      sync.read(() => {
-        const { scrollLeft, scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } =
-          element
-
-        const xMax = Math.max(0, scrollWidth - offsetWidth)
-        const yMax = Math.max(0, scrollHeight - offsetHeight)
+      if (scroll.isAnimating()) return
 
-        values.x.set(scrollLeft)
-        values.y.set(scrollTop)
-        values.xMax.set(xMax)
-        values.yMax.set(yMax)
+      sync.read(() => {
+        const scrollnew = {
+          x: element.scrollLeft,
+          y: element.scrollTop,
+          xMax: Math.max(0, element.scrollWidth - element.offsetWidth),
+          yMax: Math.max(0, element.scrollHeight - element.offsetHeight),
+        }
 
-        // 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),
+          })
+        }
       })
     }
 
@@ -58,7 +80,10 @@ export function useElementScroll(
       element.removeEventListener('scroll', updater)
       ro.disconnect()
     }
-  }, [noScroll, ref, values])
+  }, [ref, scroll])
 
-  return values
+  return useMemo(
+    () => ({ x, y, xProgress, yProgress, xMax, yMax, scroll }),
+    [x, xMax, xProgress, y, yMax, yProgress, scroll],
+  )
 }

package/hooks/useMotionValueValue.ts

@@ -1,14 +1,17 @@
 import { MotionValue } from 'framer-motion'
-import { useState } from 'react'
+import { startTransition, useState } from 'react'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 
 /** Get the MotionValue's value and return the value as a state update. */
-export function useMotionValueValue<T, R>(motionValue: MotionValue<T>, effect: (v: T) => R) {
+export function useMotionValueValue<T, R>(
+  motionValue: Pick<MotionValue<T>, 'onChange' | 'get'>,
+  effect: (v: T) => R,
+) {
   const [result, setResult] = useState<R>(effect(motionValue.get()))
 
   useIsomorphicLayoutEffect(() => {
-    const set = (v: T) => setResult(effect(v))
-    set(motionValue.get())
+    const set = (v: T) => startTransition(() => setResult(effect(v)))
+    setResult(effect(motionValue.get()))
     return motionValue.onChange(set)
     // we're not recalculating
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-utils",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.1.2",
+  "version": "3.1.5",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,17 +15,17 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.10",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
     "@playwright/test": "^1.21.1"
   },
   "peerDependencies": {
     "framer-motion": "^6.2.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "framesync": "^6.1.0"
+    "framesync": "^6.1.1"
   }
 }