From f73b7a0bed2724ecc27a7c834afc37409fec5809 Mon Sep 17 00:00:00 2001
From: InventingWithMonster <mattgperry@gmail.com>
Date: Mon, 26 Nov 2018 16:12:19 +0000
Subject: [PATCH 1/2] update tests

---
 src/hooks/use-motion-value.ts           |  4 ++--
 src/hooks/use-posed-values.ts           | 23 +++++++++++------------
 src/motion/__tests__/component.test.tsx |  4 ++--
 src/motion/types.ts                     |  1 +
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/hooks/use-motion-value.ts b/src/hooks/use-motion-value.ts
index f8865d5aa5..4bede2a6a1 100644
--- a/src/hooks/use-motion-value.ts
+++ b/src/hooks/use-motion-value.ts
@@ -20,7 +20,7 @@ import { motionValue } from "../motion-value"
  * const x = useMotionValue(0)
  * ```
  *
- * This can be passed to a motion component via props:
+ * This can be passed to a motion component via the `motionValue` prop:
  *
  * ```javascript
  * const MotionComponent = motion.div()
@@ -28,7 +28,7 @@ import { motionValue } from "../motion-value"
  * export const () => {
  *   const x = useMotionValue(0)
  *
- *   return <MotionComponent x={x} />
+ *   return <MotionComponent motionValues={{ x }} />
  * }
  * ```
  *
diff --git a/src/hooks/use-posed-values.ts b/src/hooks/use-posed-values.ts
index b16fca95f1..8d1d330651 100644
--- a/src/hooks/use-posed-values.ts
+++ b/src/hooks/use-posed-values.ts
@@ -6,26 +6,25 @@ import { createValuesFromPose, bindValuesToRef } from "../utils/create-value"
 
 export const usePosedValues = (
     config: PoseConfig,
-    { onPoseComplete, pose = "default", ...props }: MotionProps,
+    { onPoseComplete, pose = "default", motionValues, ...props }: MotionProps,
     ref: RefObject<Element>
 ): [MotionValueMap, Partial<MotionProps>] => {
     const values: MotionValueMap = useRef(new Map()).current
-    const returnedProps = {}
 
     // In this function we want to find the right approach to ensure
     // we successfully remove MotionValues from the returned props
     // in a performant way over subsequent renders.
 
     // 1. Add provided motion values via props to value map
-    Object.keys(props).forEach(key => {
-        const prop = props[key]
-
-        if (prop instanceof MotionValue) {
-            values.set(key, prop)
-        } else if (key !== "pose") {
-            returnedProps[key] = prop
-        }
-    })
+    if (motionValues) {
+        Object.keys(motionValues).forEach(key => {
+            const motionValue = motionValues[key]
+
+            if (motionValue instanceof MotionValue) {
+                values.set(key, motionValue)
+            }
+        })
+    }
 
     // 2. Create values from poses
     const initialPoses = resolvePoses(pose)
@@ -45,5 +44,5 @@ export const usePosedValues = (
         return () => values.forEach(value => value.destroy())
     }, [])
 
-    return [values, returnedProps]
+    return [values, props]
 }
diff --git a/src/motion/__tests__/component.test.tsx b/src/motion/__tests__/component.test.tsx
index 6af1a350b8..40b39cef84 100644
--- a/src/motion/__tests__/component.test.tsx
+++ b/src/motion/__tests__/component.test.tsx
@@ -110,7 +110,7 @@ test("motion component accepts motion value", () => {
 
     const Component = () => {
         const x = useMotionValue(800)
-        return <Box x={x} />
+        return <Box motionValues={{ x }} />
     }
 
     const { container } = render(<Component />)
@@ -234,7 +234,7 @@ test("useTransform", async () => {
         const x = useMotionValue(75)
         const y = useTransform(x, [0, 100], [200, 100])
 
-        return <Box x={x} y={y} />
+        return <Box motionValues={{ x, y }} />
     }
 
     const { container } = render(<Component />)
diff --git a/src/motion/types.ts b/src/motion/types.ts
index 493dbc3941..826bde5c6f 100644
--- a/src/motion/types.ts
+++ b/src/motion/types.ts
@@ -23,6 +23,7 @@ export type MotionProps<Poses = string> = {
     [key: string]: any
     ref?: Ref<any>
     pose?: Poses | Poses[] | MotionValue
+    motionValues?: { [key: string]: MotionValue }
     style?: CSSProperties
     onPoseComplete?: (current: CurrentValues, velocity: VelocityValues) => void
 }

From d4daacb8b625c51613cf0219568c2985a3b14395 Mon Sep 17 00:00:00 2001
From: InventingWithMonster <mattgperry@gmail.com>
Date: Tue, 27 Nov 2018 09:25:50 +0000
Subject: [PATCH 2/2] adding motion value check

---
 src/hooks/use-posed-values.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/hooks/use-posed-values.ts b/src/hooks/use-posed-values.ts
index 8d1d330651..a3ad2955ef 100644
--- a/src/hooks/use-posed-values.ts
+++ b/src/hooks/use-posed-values.ts
@@ -4,12 +4,14 @@ import { PoseConfig, MotionProps, MotionValueMap } from "../motion/types"
 import { useRef, useEffect, RefObject } from "react"
 import { createValuesFromPose, bindValuesToRef } from "../utils/create-value"
 
+const isMotionValue = (value: any): value is MotionValue => value instanceof MotionValue
+
 export const usePosedValues = (
     config: PoseConfig,
     { onPoseComplete, pose = "default", motionValues, ...props }: MotionProps,
     ref: RefObject<Element>
 ): [MotionValueMap, Partial<MotionProps>] => {
-    const values: MotionValueMap = useRef(new Map()).current
+    const values: MotionValueMap = useRef(new Map<string, MotionValue>()).current
 
     // In this function we want to find the right approach to ensure
     // we successfully remove MotionValues from the returned props
@@ -20,7 +22,7 @@ export const usePosedValues = (
         Object.keys(motionValues).forEach(key => {
             const motionValue = motionValues[key]
 
-            if (motionValue instanceof MotionValue) {
+            if (isMotionValue(motionValue)) {
                 values.set(key, motionValue)
             }
         })