feat(runtime-core): add inheritRef option + make <transition> & <keep-alive> inherit refs

packages/runtime-core/src/component.ts

@@ -81,6 +81,7 @@ export interface FunctionalComponent<
   props?: ComponentPropsOptions<P>
   emits?: E | (keyof E)[]
   inheritAttrs?: boolean
+  inheritRef?: boolean
   displayName?: string
 }
 

packages/runtime-core/src/componentOptions.ts

@@ -100,6 +100,7 @@ export interface ComponentOptionsBase<
   components?: Record<string, PublicAPIComponent>
   directives?: Record<string, Directive>
   inheritAttrs?: boolean
+  inheritRef?: boolean
   emits?: E | EE[]
 
   // Internal ------------------------------------------------------------------

packages/runtime-core/src/componentRenderUtils.ts

@@ -172,6 +172,10 @@ export function renderComponentRoot(
       }
       root.transition = vnode.transition
     }
+    // inherit ref
+    if (Component.inheritRef && vnode.ref != null) {
+      root.ref = vnode.ref
+    }
 
     if (__DEV__ && setRoot) {
       setRoot(root)

packages/runtime-core/src/components/BaseTransition.ts

@@ -100,6 +100,8 @@ export function useTransitionState(): TransitionState {
 const BaseTransitionImpl = {
   name: `BaseTransition`,
 
+  inheritRef: true,
+
   props: {
     mode: String,
     appear: Boolean,

packages/runtime-core/src/components/KeepAlive.ts

@@ -63,6 +63,8 @@ const KeepAliveImpl = {
   // would prevent it from being tree-shaken.
   __isKeepAlive: true,
 
+  inheritRef: true,
+
   props: {
     include: [String, RegExp, Array],
     exclude: [String, RegExp, Array],

packages/runtime-core/src/renderer.ts

@@ -17,7 +17,8 @@ import {
   ComponentInternalInstance,
   createComponentInstance,
   Data,
-  setupComponent
+  setupComponent,
+  Component
 } from './component'
 import {
   renderComponentRoot,
@@ -64,6 +65,7 @@ import {
 import { createHydrationFunctions, RootHydrateFunction } from './hydration'
 import { invokeDirectiveHook } from './directives'
 import { startMeasure, endMeasure } from './profiling'
+import { ComponentPublicInstance } from './componentProxy'
 
 export interface Renderer<HostElement = any> {
   render: RootRenderFunction<HostElement>
@@ -276,11 +278,21 @@ export const setRef = (
   parent: ComponentInternalInstance,
   vnode: VNode | null
 ) => {
-  const value = vnode
-    ? vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT
-      ? vnode.component!.proxy
-      : vnode.el
-    : null
+  let value: ComponentPublicInstance | RendererNode | null
+  if (!vnode) {
+    value = null
+  } else {
+    const { el, component, shapeFlag, type } = vnode
+    if (shapeFlag & ShapeFlags.COMPONENT && (type as Component).inheritRef) {
+      return
+    }
+    if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
+      value = component!.proxy
+    } else {
+      value = el
+    }
+  }
+
   const [owner, ref] = rawRef
   if (__DEV__ && !owner) {
     warn(

packages/runtime-dom/src/components/Transition.ts

@@ -37,6 +37,8 @@ export const Transition: FunctionalComponent<TransitionProps> = (
   { slots }
 ) => h(BaseTransition, resolveTransitionProps(props), slots)
 
+Transition.inheritRef = true
+
 export const TransitionPropsValidators = (Transition.props = {
   ...(BaseTransition as any).props,
   name: String,