feat(runtime-vapor): template ref on component

packages/runtime-vapor/__tests__/dom/templateRef.spec.ts

@@ -0,0 +1,54 @@
+import { createComponent, ref, setRef, template } from '../../src'
+import { makeRender } from '../_utils'
+
+const define = makeRender()
+
+describe('api: template ref', () => {
+  test('ref on element', () => {
+    const t0 = template('<div ref="foo">hello</div>')
+    const { render } = define({
+      setup() {
+        return {
+          foo: ref(null),
+        }
+      },
+      render() {
+        const n0 = t0()
+        setRef(n0 as any, 'foo')
+        return n0
+      },
+    })
+
+    const { host, instance } = render()
+    expect(instance.refs.foo).toBe(host.firstChild)
+  })
+
+  test('ref on component', () => {
+    const exposeRef = ref<Record<string, string> | undefined>()
+    const { component: Child } = define({
+      setup(_, { expose }) {
+        expose(exposeRef.value)
+      },
+    })
+    const compRef = ref()
+    const { render } = define({
+      setup() {
+        return {
+          compRef,
+        }
+      },
+      render: () => {
+        const n0 = createComponent(Child)
+        setRef(n0, 'compRef')
+        return n0
+      },
+    })
+
+    expect(render().instance.refs.compRef).toBeDefined()
+
+    const exposeValue = { foo: 'bar' }
+    exposeRef.value = exposeValue
+
+    expect(render().instance.refs.compRef).toEqual(exposeValue)
+  })
+})

packages/runtime-vapor/src/component.ts

@@ -327,6 +327,12 @@ export function createComponentInstance(
   return instance
 }
 
+export const isVaporComponent = (
+  val: any,
+): val is ComponentInternalInstance => {
+  return val && componentKey in val
+}
+
 function getAttrsProxy(instance: ComponentInternalInstance): Data {
   return (
     instance.attrsProxy ||

packages/runtime-vapor/src/dom/templateRef.ts

@@ -4,7 +4,11 @@ import {
   isRef,
   onScopeDispose,
 } from '@vue/reactivity'
-import { currentInstance } from '../component'
+import {
+  type ComponentInternalInstance,
+  currentInstance,
+  isVaporComponent,
+} from '../component'
 import { VaporErrorCodes, callWithErrorHandling } from '../errorHandling'
 import {
   EMPTY_OBJ,
@@ -18,25 +22,30 @@ import { warn } from '../warning'
 import { queuePostFlushCb } from '../scheduler'
 
 export type NodeRef = string | Ref | ((ref: Element) => void)
+export type RefEl = Element | ComponentInternalInstance
 
 /**
  * Function for handling a template ref
  */
-export function setRef(el: Element, ref: NodeRef, refFor = false) {
+export function setRef(el: RefEl, ref: NodeRef, refFor = false) {
   if (!currentInstance) return
   const { setupState, isUnmounted } = currentInstance
 
   if (isUnmounted) {
     return
   }
 
+  const refValue = isVaporComponent(el) ? el.exposed || currentInstance : el
+
   const refs =
     currentInstance.refs === EMPTY_OBJ
       ? (currentInstance.refs = {})
       : currentInstance.refs
 
   if (isFunction(ref)) {
-    const invokeRefSetter = (value: Element | null) => {
+    const invokeRefSetter = (
+      value: Element | ComponentInternalInstance['exposed'] | null,
+    ) => {
       callWithErrorHandling(
         ref,
         currentInstance,
@@ -45,7 +54,7 @@ export function setRef(el: Element, ref: NodeRef, refFor = false) {
       )
     }
 
-    invokeRefSetter(el)
+    invokeRefSetter(refValue)
     onScopeDispose(() => invokeRefSetter(null))
   } else {
     const _isString = isString(ref)
@@ -62,7 +71,7 @@ export function setRef(el: Element, ref: NodeRef, refFor = false) {
             : ref.value
 
           if (!isArray(existing)) {
-            existing = [el]
+            existing = [refValue]
             if (_isString) {
               refs[ref] = existing
               if (hasOwn(setupState, ref)) {
@@ -75,16 +84,16 @@ export function setRef(el: Element, ref: NodeRef, refFor = false) {
             } else {
               ref.value = existing
             }
-          } else if (!existing.includes(el)) {
-            existing.push(el)
+          } else if (!existing.includes(refValue)) {
+            existing.push(refValue)
           }
         } else if (_isString) {
-          refs[ref] = el
+          refs[ref] = refValue
           if (hasOwn(setupState, ref)) {
-            setupState[ref] = el
+            setupState[ref] = refValue
           }
         } else if (_isRef) {
-          ref.value = el
+          ref.value = refValue
         } else if (__DEV__) {
           warn('Invalid template ref type:', ref, `(${typeof ref})`)
         }
@@ -95,7 +104,7 @@ export function setRef(el: Element, ref: NodeRef, refFor = false) {
       onScopeDispose(() => {
         queuePostFlushCb(() => {
           if (isArray(existing)) {
-            remove(existing, el)
+            remove(existing, refValue)
           } else if (_isString) {
             refs[ref] = null
             if (hasOwn(setupState, ref)) {