refactor: introduce setAsyncRef on DynamicFragment for explicit async component ref assignment. (#14153)

Author: edison1105

packages/runtime-vapor/src/apiDefineAsyncComponent.ts

@@ -197,8 +197,7 @@ function createInnerComp(
   if ($transition) setTransitionHooks(instance, $transition)
 
   // set ref
-  // @ts-expect-error
-  frag && frag.setRef && frag.setRef(instance)
+  frag && frag.setAsyncRef && frag.setAsyncRef(instance)
 
   return instance
 }

packages/runtime-vapor/src/apiTemplateRef.ts

@@ -62,13 +62,12 @@ export function setRef(
     return
   }
 
-  const isVaporComp = isVaporComponent(el)
-  if (isVaporComp && isAsyncWrapper(el as VaporComponentInstance)) {
-    const i = el as VaporComponentInstance
-    const frag = i.block as DynamicFragment
-    // async component not resolved yet
-    if (!i.type.__asyncResolved) {
-      frag.setRef = i => setRef(instance, i, ref, oldRef, refFor)
+  if (isVaporComponent(el) && isAsyncWrapper(el)) {
+    const frag = el.block as DynamicFragment
+    // async component not resolved yet, register ref setter
+    // it will be called when the async component is resolved
+    if (!el.type.__asyncResolved) {
+      frag.setAsyncRef = i => setRef(instance, i, ref, oldRef, refFor)
       return
     }
 

packages/runtime-vapor/src/fragment.ts

@@ -83,6 +83,9 @@ export class DynamicFragment extends VaporFragment {
   // fallthrough attrs
   attrs?: Record<string, any>
 
+  // set ref for async wrapper
+  setAsyncRef?: (instance: VaporComponentInstance) => void
+
   // get the kept-alive scope when used in keep-alive
   getScope?: (key: any) => EffectScope | undefined