@graphcommerce/framer-utils 3.1.3 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/hooks/useClientSize.ts +2 -0
  3. package/hooks/useMotionSelector.ts +27 -0
  4. package/hooks/useMotionValueValue.ts +7 -4
  5. package/index.ts +1 -0
  6. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # Change Log
2
2
 
3
+ ## 3.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1601](https://github.com/graphcommerce-org/graphcommerce/pull/1601) [`01372b918`](https://github.com/graphcommerce-org/graphcommerce/commit/01372b918a291e01cbf5db40edcb40fb1c2af313) Thanks [@paales](https://github.com/paales)! - Added a useMotionSelector which acceps an array of motion values
8
+
9
+ ## 3.1.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [#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
14
+
15
+ * [#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
16
+
17
+ ## 3.1.4
18
+
19
+ ### Patch Changes
20
+
21
+ - [#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
22
+
3
23
  ## 3.1.3
4
24
 
5
25
  ### Patch Changes
package/hooks/useClientSize.ts CHANGED
@@ -45,6 +45,8 @@ export function useClientSizeCssVar() {
45
45
  * return <motion.div style={{ height: y }}>bla</motion.div>
46
46
  * }
47
47
  * ```
48
+ *
49
+ * @deprecated Use `var(--client-size-y)` or `var(--client-size-x)` instead
48
50
  */
49
51
  export function useClientSize(options?: UseClientSizeOptions): UseClientSizeReturn {
50
52
  const ret = useConstant<UseClientSizeReturn>(() => ({
package/hooks/useMotionSelector.ts ADDED
@@ -0,0 +1,27 @@
1
+ import { MotionValue } from 'framer-motion'
2
+ import { startTransition, useState } from 'react'
3
+ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
4
+
5
+ type UnwrapMotionValue<T> = T extends MotionValue<infer U> ? U : T
6
+ type UnwrapMotionValues<T extends [...any[]]> = T extends [infer Head, ...infer Tail]
7
+ ? [UnwrapMotionValue<Head>, ...UnwrapMotionValues<Tail>]
8
+ : []
9
+
10
+ export function useMotionSelector<T extends [...any[]], R>(
11
+ motionValues: readonly [...T],
12
+ effect: (v: UnwrapMotionValues<T>) => R,
13
+ ) {
14
+ const calcEffect = () => effect(motionValues.map((v) => v.get()) as UnwrapMotionValues<T>)
15
+ const [result, setResult] = useState<R>(calcEffect)
16
+
17
+ useIsomorphicLayoutEffect(() => {
18
+ const set = () => startTransition(() => setResult(calcEffect))
19
+ setResult(calcEffect)
20
+
21
+ const unsubscribers = motionValues.map((motionValue) => motionValue.onChange(set))
22
+ return () => unsubscribers.forEach((unsubscribe) => unsubscribe())
23
+ // eslint-disable-next-line react-hooks/exhaustive-deps
24
+ }, [motionValues])
25
+
26
+ return result
27
+ }
package/hooks/useMotionValueValue.ts CHANGED
@@ -1,14 +1,17 @@
1
1
  import { MotionValue } from 'framer-motion'
2
- import { useState } from 'react'
2
+ import { startTransition, useState } from 'react'
3
3
  import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
4
4
 
5
5
  /** Get the MotionValue's value and return the value as a state update. */
6
- export function useMotionValueValue<T, R>(motionValue: MotionValue<T>, effect: (v: T) => R) {
6
+ export function useMotionValueValue<T, R>(
7
+ motionValue: Pick<MotionValue<T>, 'onChange' | 'get'>,
8
+ effect: (v: T) => R,
9
+ ) {
7
10
  const [result, setResult] = useState<R>(effect(motionValue.get()))
8
11
 
9
12
  useIsomorphicLayoutEffect(() => {
10
- const set = (v: T) => setResult(effect(v))
11
- set(motionValue.get())
13
+ const set = (v: T) => startTransition(() => setResult(effect(v)))
14
+ setResult(effect(motionValue.get()))
12
15
  return motionValue.onChange(set)
13
16
  // we're not recalculating
14
17
  // eslint-disable-next-line react-hooks/exhaustive-deps
package/index.ts CHANGED
@@ -7,3 +7,4 @@ export * from './hooks/useConstant'
7
7
  export * from './hooks/useElementScroll'
8
8
  export * from './hooks/useIsomorphicLayoutEffect'
9
9
  export * from './hooks/useMotionValueValue'
10
+ export * from './hooks/useMotionSelector'
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/framer-utils",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "3.1.3",
5
+ "version": "3.2.0",
6
6
  "sideEffects": false,
7
7
  "scripts": {
8
8
  "dev": "tsc -W"
@@ -15,17 +15,17 @@
15
15
  }
16
16
  },
17
17
  "devDependencies": {
18
- "@graphcommerce/eslint-config-pwa": "^4.1.5",
18
+ "@graphcommerce/eslint-config-pwa": "^4.1.10",
19
19
  "@graphcommerce/prettier-config-pwa": "^4.0.6",
20
20
  "@graphcommerce/typescript-config-pwa": "^4.0.2",
21
21
  "@playwright/test": "^1.21.1"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "framer-motion": "^6.2.4",
25
- "react": "^17.0.2",
26
- "react-dom": "^17.0.2"
25
+ "react": "^18.0.0",
26
+ "react-dom": "^18.0.0"
27
27
  },
28
28
  "dependencies": {
29
- "framesync": "^6.1.0"
29
+ "framesync": "^6.1.1"
30
30
  }
31
31
  }