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

diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 1cde644290bc0018b52067e72cdcca399c15427f..9ae406e336341ef773bbf06298b3675b89f2d5df 100644 (file)
--- a/packages/runtime-core/src/component.ts
+++ b/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
 }
 

diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index 5ee630c49367d18019657c264a4428fec39714a8..206945fc65a4ae6fa76a3ce00b47176f80bc7ef6 100644 (file)
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/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 ------------------------------------------------------------------

diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts
index a83821b3b382ddf3e06e061adad39741c1cd820d..d63f804f61f0fd14aeee4c4a51547873fe008ddb 100644 (file)
--- a/packages/runtime-core/src/componentRenderUtils.ts
+++ b/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)

diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
index 865432ab10996fe1cd74635dc4d5c2aa83ca4d1a..1a92dffefd1b6611330861ae3638d619207d0a3e 100644 (file)
--- a/packages/runtime-core/src/components/BaseTransition.ts
+++ b/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,

diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts
index 865cf8d20da2f04f50dff4313fc4fdcdaad60066..ead43717483578806d04c0390bac99b400010a8b 100644 (file)
--- a/packages/runtime-core/src/components/KeepAlive.ts
+++ b/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],

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index f816459be87834f34e1657a1069732faa4ecb311..382cd379eeda829080246b4a2eb59f2bee80850b 100644 (file)
--- a/packages/runtime-core/src/renderer.ts
+++ b/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(

diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts
index 20e18f832e8c6f39f62e7b7304d399e2b3a7bfce..17fbf14ed3470407cd3aee8ae2e8d7d50fa4e44e 100644 (file)
--- a/packages/runtime-dom/src/components/Transition.ts
+++ b/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,