Merge pull request #190 from motiondivision/feat/hook-comp

rick-hup · web-flow · commit 9096c4f7ffeb · 2025-07-21T16:44:24.000+08:00
feat: useScroll supports VueInstance for container/target
diff --git a/.cursorignore b/.cursorignore
diff --git a/.cursorrules b/.cursorrules
diff --git a/package.json b/package.json
@@ -34,8 +34,9 @@
     "test:e2e:report": "playwright show-report"
   },
   "dependencies": {
+    "@vueuse/core": "^13.5.0",
     "vite": "^5.4.8",
-    "vue": "^3.4.38"
+    "vue": "^3.5.17"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.27.3",
diff --git a/packages/motion/package.json b/packages/motion/package.json
@@ -70,15 +70,12 @@
     "pub:release": "pnpm publish --access public"
   },
   "peerDependencies": {
+    "@vueuse/core": "^10.0.0",
     "vue": ">=3.0.0"
   },
   "dependencies": {
-    "@vueuse/core": "^10.0.0",
     "framer-motion": "12.22.0",
     "hey-listen": "^1.0.8",
     "motion-dom": "12.22.0"
-  },
-  "devDependencies": {
-    "vue": "3.4.38"
   }
 }
diff --git a/packages/motion/src/components/animate-presence/use-pop-layout.ts b/packages/motion/src/components/animate-presence/use-pop-layout.ts
@@ -9,14 +9,15 @@ export function usePopLayout(props: AnimatePresenceProps) {
   function addPopStyle(state: MotionState) {
     if (props.mode !== 'popLayout')
       return
-    const parent = state.element.offsetParent
+    const element = state.element as HTMLElement
+    const parent = element.offsetParent
     const parentWidth
                 = parent instanceof HTMLElement ? parent.offsetWidth || 0 : 0
     const size = {
-      height: state.element.offsetHeight || 0,
-      width: state.element.offsetWidth || 0,
-      top: state.element.offsetTop,
-      left: state.element.offsetLeft,
+      height: element.offsetHeight || 0,
+      width: element.offsetWidth || 0,
+      top: element.offsetTop,
+      left: element.offsetLeft,
       right: 0,
     }
     size.right = parentWidth - size.width - size.left
diff --git a/packages/motion/src/components/animate-presence/use-presence.ts b/packages/motion/src/components/animate-presence/use-presence.ts
@@ -1,7 +1,7 @@
 import { onMounted } from 'vue'
 import { useMotionElm } from '@/components/hooks/use-motion-elm'
 
-export const presenceMeasure = new Map<HTMLElement, boolean>()
+export const presenceMeasure = new Map<HTMLElement | SVGElement, boolean>()
 export function usePresence() {
   const motionElement = useMotionElm()
   onMounted(() => {
diff --git a/packages/motion/src/components/hooks/use-motion-elm.ts b/packages/motion/src/components/hooks/use-motion-elm.ts
@@ -1,25 +1,39 @@
+import { type MaybeComputedElementRef, unrefElement } from '@vueuse/core'
 import { getCurrentInstance, onMounted } from 'vue'
 
 /**
  * Get the actual motion element, skipping text and comment nodes
  * @param el - The HTML element to check
  * @returns The first non-text/comment element
  */
-export function getMotionElement(el: HTMLElement) {
-  if (el?.nodeType === 3 || el?.nodeType === 8)
-    return getMotionElement(el.nextSibling as HTMLElement)
+export function getMotionElement(el: HTMLElement | SVGElement | null): HTMLElement | SVGElement | undefined {
+  if (!el)
+    return undefined
+
+  if (el.nodeType === 3 || el.nodeType === 8) {
+    return getMotionElement(el.nextSibling as HTMLElement | SVGElement | null)
+  }
 
   return el
 }
 
+/**
+ * Get the actual element, skipping text and comment nodes
+ * @param target - The element to check
+ * @returns The first non-text/comment element
+ */
+export function getElement(target: MaybeComputedElementRef) {
+  return getMotionElement(unrefElement(target))
+}
+
 /**
  * Hook to get the motion element of current component instance
  * @returns Function that returns the motion element
  */
 export function useMotionElm() {
   const instance = getCurrentInstance().proxy
   const motionElement = {
-    value: null as HTMLElement | null,
+    value: null as HTMLElement | SVGElement | null,
   }
   onMounted(() => {
     motionElement.value = getMotionElement(instance.$el)
diff --git a/packages/motion/src/state/motion-state.ts b/packages/motion/src/state/motion-state.ts
@@ -25,7 +25,7 @@ const mountedLayoutIds = new Set<string>()
 export class MotionState {
   public readonly id: string
   public type: 'html' | 'svg'
-  public element: HTMLElement | null = null
+  public element: HTMLElement | SVGElement | null = null
   // Parent reference for handling component tree relationships
   public parent?: MotionState
   public options: Options & {
@@ -130,7 +130,7 @@ export class MotionState {
   }
 
   // Mount motion state to DOM element, handles parent-child relationships
-  mount(element: HTMLElement, options: Options, notAnimate = false) {
+  mount(element: HTMLElement | SVGElement, options: Options, notAnimate = false) {
     invariant(
       Boolean(element),
       'Animation state must be mounted with valid Element',
diff --git a/packages/motion/src/types/common.ts b/packages/motion/src/types/common.ts
@@ -1,4 +1,4 @@
-import type { Component, DefineComponent, ExtractPropTypes, ExtractPublicPropTypes, IntrinsicElementAttributes } from 'vue'
+import type { Component, DefineComponent, ExtractPropTypes, ExtractPublicPropTypes, IntrinsicElementAttributes, MaybeRef } from 'vue'
 
 export type ComponentProps<T> = T extends DefineComponent<
   ExtractPropTypes<infer Props>,
@@ -10,3 +10,7 @@ export type ComponentProps<T> = T extends DefineComponent<
 
 export type ElementType = keyof IntrinsicElementAttributes
 export type AsTag = keyof IntrinsicElementAttributes | ({} & string) | Component // any other string
+
+export type ToRefs<T> = {
+  [K in keyof T]: MaybeRef<T[K]>
+}
diff --git a/packages/motion/src/utils/use-in-view.ts b/packages/motion/src/utils/use-in-view.ts
@@ -1,15 +1,16 @@
 import type { Ref } from 'vue'
-import { isRef, ref, unref, watch } from 'vue'
+import { ref, unref, watchEffect } from 'vue'
 import type { Options } from '@/types/state'
 import { inView } from 'framer-motion/dom'
+import type { MaybeRef } from '@vueuse/core'
 
 export function useInView<T extends Element = any>(
   domRef: Ref<T | null>,
-  options?: Options['inViewOptions'] | Ref<Options['inViewOptions']>,
+  options?: MaybeRef<Options['inViewOptions']>,
 ) {
   const isInView = ref(false)
 
-  watch([domRef, () => isRef(options) ? options.value : options], (_v1, _v2, onCleanup) => {
+  watchEffect((onCleanup) => {
     const realOptions = unref(options) || {}
     const { once } = realOptions
     if (!domRef.value || (once && isInView.value)) {
@@ -28,7 +29,7 @@ export function useInView<T extends Element = any>(
       cleanup()
     })
   }, {
-    immediate: true,
+    flush: 'post',
   })
 
   return isInView
diff --git a/packages/motion/src/value/use-scroll.ts b/packages/motion/src/value/use-scroll.ts
@@ -1,21 +1,14 @@
-import type { Ref } from 'vue'
-import { onMounted, watch } from 'vue'
+import { unref, watchEffect } from 'vue'
 import { motionValue, scroll } from 'framer-motion/dom'
 import type { ScrollInfoOptions } from '@/types'
-import { warning } from 'hey-listen'
 import { isSSR } from '@/utils/is'
+import type { MaybeComputedElementRef } from '@vueuse/core'
+import { getElement } from '@/components/hooks/use-motion-elm'
+import type { ToRefs } from '@/types/common'
 
-export interface UseScrollOptions
-  extends Omit<ScrollInfoOptions, 'container' | 'target'> {
-  container?: Ref<HTMLElement | null>
-  target?: Ref<HTMLElement | null>
-}
-
-function refWarning(name: string, ref?: Ref<HTMLElement | null>) {
-  warning(
-    Boolean(!ref || ref.value),
-    `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref.`,
-  )
+export interface UseScrollOptions extends Omit<ToRefs<ScrollInfoOptions>, 'container' | 'target'> {
+  container?: MaybeComputedElementRef
+  target?: MaybeComputedElementRef
 }
 
 function createScrollMotionValues() {
@@ -26,47 +19,33 @@ function createScrollMotionValues() {
     scrollYProgress: motionValue(0),
   }
 }
-
-export function useScroll({
-  container,
-  target,
-  ...options
-}: UseScrollOptions = {}) {
+export function useScroll(scrollOptions: UseScrollOptions = {}) {
   const values = createScrollMotionValues()
 
-  onMounted(() => {
-    refWarning('target', target)
-    refWarning('container', container)
+  watchEffect((onCleanup) => {
+    if (isSSR) {
+      return
+    }
+    const cleanup = scroll(
+      (_progress, { x, y }) => {
+        values.scrollX.set(x.current)
+        values.scrollXProgress.set(x.progress)
+        values.scrollY.set(y.current)
+        values.scrollYProgress.set(y.progress)
+      },
+      {
+        offset: unref(scrollOptions.offset),
+        axis: unref(scrollOptions.axis),
+        container: getElement(scrollOptions.container),
+        target: getElement(scrollOptions.target),
+      },
+    )
+    onCleanup(() => {
+      cleanup()
+    })
+  }, {
+    flush: 'post',
   })
 
-  watch(
-    [() => container?.value, () => target?.value, () => options.offset],
-    (n, o, onCleanup) => {
-      if (isSSR) {
-        return
-      }
-      const cleanup = scroll(
-        (_progress, { x, y }) => {
-          values.scrollX.set(x.current)
-          values.scrollXProgress.set(x.progress)
-          values.scrollY.set(y.current)
-          values.scrollYProgress.set(y.progress)
-        },
-        {
-          ...options,
-          container: container?.value ?? undefined,
-          target: target?.value ?? undefined,
-        },
-      )
-      onCleanup(() => {
-        cleanup()
-      })
-    },
-    {
-      immediate: true,
-      flush: 'post',
-    },
-  )
-
   return values
 }
diff --git a/playground/nuxt/package.json b/playground/nuxt/package.json
@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@number-flow/vue": "^0.3.2",
-    "@vueuse/core": "^12.0.0",
     "motion-number-vue": "latest",
     "motion-plus-vue": "0.1.0",
     "motion-v": "workspace:*",
diff --git a/playground/vite/src/router/index.ts b/playground/vite/src/router/index.ts
@@ -38,5 +38,11 @@ routes.push({
 
 export const router = createRouter({
   history: createWebHistory(),
-  routes,
+  routes: [
+    ...routes,
+    {
+      path: '/scroll-test',
+      component: () => import('../views/scroll-test/index.vue'),
+    },
+  ],
 })
diff --git a/playground/vite/src/views/scroll-test/index.vue b/playground/vite/src/views/scroll-test/index.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Motion, RowValue, useScroll } from 'motion-v'
+
+const containerRef = ref<HTMLElement>()
+const targetRef = ref<HTMLElement | null>(null)
+
+const { scrollY, scrollYProgress } = useScroll({
+  container: containerRef as any,
+  target: targetRef as any,
+})
+</script>
+
+<template>
+  <div class="p-4">
+    <div class="mb-4">
+      <div>Scroll Y: <span class="scroll-y-value"><RowValue :value="scrollY" /></span></div>
+      <div>Progress: <span class="scroll-progress-value"><RowValue :value="scrollYProgress" /></span></div>
+    </div>
+
+    <Motion
+      ref="containerRef"
+      class="scroll-container"
+      style="height: 300px; overflow: auto; border: 1px solid #ccc;"
+    >
+      <div style="height: 100px;">
+        Above Target
+      </div>
+
+      <Motion
+        ref="targetRef"
+        class="scroll-target"
+        style="height: 150px; background-color: #f0f0f0;"
+      >
+        Target Content
+      </Motion>
+
+      <div style="height: 200px;">
+        Below Target
+      </div>
+    </Motion>
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/animate-presence.spec.ts b/tests/animate-presence.spec.ts
diff --git a/tests/useScroll.spec.ts b/tests/useScroll.spec.ts
