@graphcommerce/framer-utils 6.0.0-canary.29 → 6.0.0-canary.30

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 6.0.0-canary.30
+
+### Patch Changes
+
+- [#1829](https://github.com/graphcommerce-org/graphcommerce/pull/1829) [`52ecfc2ad`](https://github.com/graphcommerce-org/graphcommerce/commit/52ecfc2ad25fc6ef92465862fb94c1829bdd7c52) - Dynamic viewport height when supported ([@bramvanderholst](https://github.com/bramvanderholst))
+
 ## 6.0.0-canary.29
 
 ## 6.0.0-canary.28

package/hooks/useMeasureDynamicViewportSize.ts

@@ -2,6 +2,7 @@ import { motionValue, MotionValue } from 'framer-motion'
 import { useEffect } from 'react'
 import { clientSize } from '../utils/clientSize'
 import { useConstant } from './useConstant'
+import sync from 'framesync'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 
 export type UseClientSizeReturn = { x: MotionValue<string>; y: MotionValue<string> }
@@ -9,17 +10,17 @@ export type UseClientSizeOptions = { x?: string; y?: string }
 
 /** @deprecated Please use dvh() or dvw() instead */
 export const clientSizeCssVar = {
-  y: `var(--client-size-y, 100vh)`,
-  x: `var(--client-size-x, 100vw)`,
+  y: `var(--client-size-y)`,
+  x: `var(--client-size-x)`,
 }
 
 export const dvh = (p = 100) => {
-  if (p === 100) return 'var(--client-size-y, 100vh)'
-  return `calc(var(--client-size-y, 100vh) * ${p / 100})`
+  if (p === 100) return 'var(--client-size-y)'
+  return `calc(var(--client-size-y) * ${p / 100})`
 }
 export const dvw = (p = 100) => {
-  if (p === 100) return 'var(--client-size-x, 100vw)'
-  return `calc(var(--client-size-x, 100vw) * ${p / 100})`
+  if (p === 100) return 'var(--client-size-x)'
+  return `calc(var(--client-size-x) * ${p / 100})`
 }
 
 let watching = false
@@ -32,19 +33,24 @@ export function useMeasureDynamicViewportSize() {
   useIsomorphicLayoutEffect(() => {
     if (watching === true) return () => {}
 
+    const hasSupport = globalThis.CSS?.supports?.('height: 100dvh') ?? false
+
+    if (hasSupport) return () => {}
+
     const recalc = () => {
       document.body.style.setProperty('--client-size-x', `${global.window?.innerWidth ?? 0}px`)
       document.body.style.setProperty('--client-size-y', `${global.window?.innerHeight ?? 0}px`)
     }
+    const recalcSynced = () => sync.read(recalc)
 
-    window.addEventListener('resize', recalc)
+    window.addEventListener('resize', recalcSynced)
 
-    recalc()
+    recalcSynced()
     watching = true
 
     return () => {
       watching = false
-      window.removeEventListener('resize', recalc)
+      window.removeEventListener('resize', recalcSynced)
     }
   }, [])
 }

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-canary.29",
+  "version": "6.0.0-canary.30",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,9 +15,9 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.29",
-    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.29",
-    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.29"
+    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.30",
+    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.30",
+    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.30"
   },
   "peerDependencies": {
     "framer-motion": "^7.0.0",