feat(vapor): setRef vdom interop

Author: edison1105

packages/runtime-core/src/index.ts

@@ -557,3 +557,11 @@ export { startMeasure, endMeasure } from './profiling'
  * @internal
  */
 export { initFeatureFlags } from './featureFlags'
+/**
+ * @internal
+ */
+export { setRef } from './rendererTemplateRef'
+/**
+ * @internal
+ */
+export type { VNodeNormalizedRef } from './vnode'

packages/runtime-core/src/rendererTemplateRef.ts

@@ -76,7 +76,7 @@ export function setRef(
   const setupState = owner.setupState
   const rawSetupState = toRaw(setupState)
   const canSetSetupRef =
-    setupState === EMPTY_OBJ
+    setupState === undefined || setupState === EMPTY_OBJ
       ? () => false
       : (key: string) => {
           if (__DEV__) {

packages/runtime-vapor/src/apiTemplateRef.ts

@@ -20,6 +20,7 @@ import {
   isString,
   remove,
 } from '@vue/shared'
+import { isFragment } from './block'
 
 export type NodeRef = string | Ref | ((ref: Element) => void)
 export type RefEl = Element | VaporComponentInstance
@@ -47,7 +48,10 @@ export function setRef(
   refFor = false,
 ): NodeRef | undefined {
   if (!instance || instance.isUnmounted) return
-
+  if (isFragment(el) && el.setRef) {
+    el.setRef(instance, ref, refFor)
+    return
+  }
   const setupState: any = __DEV__ ? instance.setupState || {} : null
   const refValue = isVaporComponent(el) ? getExposed(el) || el : el
 

packages/runtime-vapor/src/block.ts

@@ -8,6 +8,7 @@ import {
 import { createComment, createTextNode } from './dom/node'
 import { EffectScope, pauseTracking, resetTracking } from '@vue/reactivity'
 import { isHydrating } from './dom/hydration'
+import type { NodeRef } from './apiTemplateRef'
 
 export type Block =
   | Node
@@ -23,6 +24,11 @@ export class VaporFragment {
   anchor?: Node
   insert?: (parent: ParentNode, anchor: Node | null) => void
   remove?: (parent?: ParentNode) => void
+  setRef?: (
+    instance: VaporComponentInstance,
+    ref: NodeRef,
+    refFor: boolean,
+  ) => void
 
   constructor(nodes: Block) {
     this.nodes = nodes

packages/runtime-vapor/src/vdomInterop.ts

@@ -8,6 +8,7 @@ import {
   type ShallowRef,
   type Slots,
   type VNode,
+  type VNodeNormalizedRef,
   type VaporInteropInterface,
   createVNode,
   currentInstance,
@@ -16,6 +17,7 @@ import {
   renderSlot,
   shallowRef,
   simpleSetCurrentInstance,
+  setRef as vdomSetRef,
 } from '@vue/runtime-dom'
 import {
   type LooseRawProps,
@@ -33,6 +35,7 @@ import type { RawSlots, VaporSlot } from './componentSlots'
 import { renderEffect } from './renderEffect'
 import { createTextNode } from './dom/node'
 import { optimizePropertyLookup } from './dom/prop'
+import type { NodeRef } from './apiTemplateRef'
 
 // mounting vapor components and slots in vdom
 const vaporInteropImpl: Omit<
@@ -169,9 +172,12 @@ function createVDOMComponent(
         : new Proxy(wrapper.slots, vaporSlotsProxyHandler)
   }
 
+  let rawRef: VNodeNormalizedRef | undefined
   let isMounted = false
   const parentInstance = currentInstance as VaporComponentInstance
   const unmount = (parentNode?: ParentNode) => {
+    // unset ref
+    if (rawRef) vdomSetRef(rawRef, null, null, vnode, true)
     internals.umt(vnode.component!, null, !!parentNode)
   }
 
@@ -186,6 +192,8 @@ function createVDOMComponent(
         undefined,
         false,
       )
+      // set ref
+      if (rawRef) vdomSetRef(rawRef, null, null, vnode)
       onScopeDispose(unmount, true)
       isMounted = true
     } else {
@@ -202,6 +210,14 @@ function createVDOMComponent(
 
   frag.remove = unmount
 
+  frag.setRef = (
+    instance: VaporComponentInstance,
+    ref: NodeRef,
+    refFor: boolean,
+  ): void => {
+    rawRef = { i: instance as any, r: ref as any, k: undefined, f: refFor }
+  }
+
   return frag
 }