Merge pull request #170 from motiondivision/fix/use-transform

fix: useTransform not updating when reactive value changes

Author: rick-hup

packages/motion/src/value/__tests__/use-transform.test.tsx

@@ -0,0 +1,28 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { Motion } from '@/components'
+import { defineComponent, nextTick, onMounted, ref, watchEffect } from 'vue'
+import { useTransform } from '@/value/use-transform'
+import { delay } from '@/shared/test'
+
+describe('useTransform', () => {
+  it('should update when reactive value changes', async () => {
+    const Component = defineComponent({
+      setup() {
+        const x = ref(0)
+        const transform = useTransform(() => {
+          return x.value
+        })
+        onMounted(() => {
+          x.value = 100
+        })
+        return () => {
+          return <Motion style={{ x: transform }} />
+        }
+      },
+    })
+    const wrapper = mount(Component)
+    await delay(100)
+    expect(wrapper.html()).toContain('100')
+  })
+})

packages/motion/src/value/use-combine-values.ts

@@ -39,5 +39,6 @@ export function useCombineMotionValues<T>(
     subscribe,
     unsubscribe,
     value,
+    updateValue,
   }
 }

packages/motion/src/value/use-computed.ts

@@ -1,6 +1,6 @@
 import { useCombineMotionValues } from '@/value/use-combine-values'
 import { type MotionValue, collectMotionValues } from 'framer-motion/dom'
-import { onBeforeUpdate } from 'vue'
+import { watchEffect } from 'vue'
 
 export function useComputed<T>(computed: () => T): MotionValue<T> {
   /**
@@ -9,16 +9,16 @@ export function useComputed<T>(computed: () => T): MotionValue<T> {
    */
   collectMotionValues.current = []
 
-  const { value, subscribe, unsubscribe } = useCombineMotionValues<T>(computed)
+  const { value, subscribe, unsubscribe, updateValue } = useCombineMotionValues<T>(computed)
 
   subscribe(collectMotionValues.current)
 
   collectMotionValues.current = undefined
 
-  onBeforeUpdate(() => {
+  watchEffect(() => {
     unsubscribe()
     collectMotionValues.current = []
-    computed()
+    updateValue()
     subscribe(collectMotionValues.current)
     collectMotionValues.current = undefined
   })