feat: useScroll supports VueInstance for container/target

Author: rick-hup

.cursorignore

@@ -1,25 +1,35 @@
+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) {
+export function getMotionElement(el: HTMLElement | SVGElement) {
   if (el?.nodeType === 3 || el?.nodeType === 8)
     return getMotionElement(el.nextSibling as HTMLElement)
 
   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)

.cursorrules

@@ -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',

packages/motion/src/components/hooks/use-motion-elm.ts

@@ -1,21 +1,14 @@
-import type { Ref } from 'vue'
-import { onMounted, watch } from 'vue'
+import { watch } 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'
 
 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.`,
-  )
+  container?: MaybeComputedElementRef
+  target?: MaybeComputedElementRef
 }
 
 function createScrollMotionValues() {
@@ -34,14 +27,9 @@ export function useScroll({
 }: UseScrollOptions = {}) {
   const values = createScrollMotionValues()
 
-  onMounted(() => {
-    refWarning('target', target)
-    refWarning('container', container)
-  })
-
   watch(
-    [() => container?.value, () => target?.value, () => options.offset],
-    (n, o, onCleanup) => {
+    [() => getElement(container), () => getElement(target), () => options.offset],
+    ([newContainer, newTarget], _, onCleanup) => {
       if (isSSR) {
         return
       }
@@ -54,8 +42,8 @@ export function useScroll({
         },
         {
           ...options,
-          container: container?.value ?? undefined,
-          target: target?.value ?? undefined,
+          container: newContainer ?? undefined,
+          target: newTarget ?? undefined,
         },
       )
       onCleanup(() => {