refactor: move async component resolution rendering logic from Suspense to renderer-specific registerDep callbacks.

Author: edison1105

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

@@ -11,25 +11,19 @@ import {
   openBlock,
 } from '../vnode'
 import { ShapeFlags, isArray, isFunction, toNumber } from '@vue/shared'
-import { type ComponentInternalInstance, handleSetupResult } from '../component'
+import type { ComponentInternalInstance } from '../component'
 import type { Slots } from '../componentSlots'
 import {
   type ElementNamespace,
   MoveType,
   type RendererElement,
   type RendererInternals,
   type RendererNode,
-  type SetupRenderEffectFn,
   queuePostRenderEffect,
 } from '../renderer'
 import { queuePostFlushCb } from '../scheduler'
 import { filterSingleRoot, updateHOCHostEl } from '../componentRenderUtils'
-import {
-  assertNumber,
-  popWarningContext,
-  pushWarningContext,
-  warn,
-} from '../warning'
+import { assertNumber, warn } from '../warning'
 import { ErrorCodes, handleError } from '../errorHandling'
 import { NULL_DYNAMIC_COMPONENT } from '../helpers/resolveAssets'
 
@@ -437,8 +431,7 @@ export interface SuspenseBoundary {
   next(): RendererNode | null
   registerDep(
     instance: ComponentInternalInstance,
-    setupRenderEffect: SetupRenderEffectFn,
-    optimized: boolean,
+    onResolve: (setupResult: unknown) => void,
   ): void
   unmount(parentSuspense: SuspenseBoundary | null, doRemove?: boolean): void
 }
@@ -474,7 +467,7 @@ function createSuspenseBoundary(
     m: move,
     um: unmount,
     n: next,
-    o: { parentNode, remove },
+    o: { parentNode },
   } = rendererInternals
 
   // if set `suspensible: true`, set the current suspense as a dep of parent suspense
@@ -701,12 +694,12 @@ function createSuspenseBoundary(
       return suspense.activeBranch && next(suspense.activeBranch)
     },
 
-    registerDep(instance, setupRenderEffect, optimized) {
+    registerDep(instance, onResolve) {
       const isInPendingSuspense = !!suspense.pendingBranch
       if (isInPendingSuspense) {
         suspense.deps++
       }
-      const hydratedEl = instance.vapor ? null : instance.vnode.el
+
       instance
         .asyncDep!.catch(err => {
           handleError(err, instance, ErrorCodes.SETUP_FUNCTION)
@@ -723,46 +716,8 @@ function createSuspenseBoundary(
           }
           // retry from this component
           instance.asyncResolved = true
-          // vapor component
-          if (instance.vapor) {
-            // @ts-expect-error
-            setupRenderEffect(asyncSetupResult)
-          } else {
-            const { vnode } = instance
-            if (__DEV__) {
-              pushWarningContext(vnode)
-            }
-            handleSetupResult(instance, asyncSetupResult, false)
-            if (hydratedEl) {
-              // vnode may have been replaced if an update happened before the
-              // async dep is resolved.
-              vnode.el = hydratedEl
-            }
-            const placeholder = !hydratedEl && instance.subTree.el
-            setupRenderEffect(
-              instance,
-              vnode,
-              // component may have been moved before resolve.
-              // if this is not a hydration, instance.subTree will be the comment
-              // placeholder.
-              parentNode(hydratedEl || instance.subTree.el!)!,
-              // anchor will not be used if this is hydration, so only need to
-              // consider the comment placeholder case.
-              hydratedEl ? null : next(instance.subTree),
-              suspense,
-              namespace,
-              optimized,
-            )
-            if (placeholder) {
-              // clean up placeholder reference
-              vnode.placeholder = null
-              remove(placeholder)
-            }
-            updateHOCHostEl(instance, vnode.el)
-            if (__DEV__) {
-              popWarningContext()
-            }
-          }
+          onResolve(asyncSetupResult)
+
           // only decrease deps count if suspense is not already resolved
           if (isInPendingSuspense && --suspense.deps === 0) {
             suspense.resolve()

packages/runtime-core/src/renderer.ts

@@ -24,6 +24,7 @@ import {
   type LifecycleHook,
   createComponentInstance,
   getComponentPublicInstance,
+  handleSetupResult,
   setupComponent,
 } from './component'
 import {
@@ -1273,9 +1274,45 @@ function baseCreateRenderer(
     // setup() is async. This component relies on async logic to be resolved
     // before proceeding
     if (__FEATURE_SUSPENSE__ && instance.asyncDep) {
-      parentSuspense &&
-        parentSuspense.registerDep(instance, setupRenderEffect, optimized)
-
+      if (parentSuspense) {
+        const hydratedEl = instance.vnode.el
+        parentSuspense.registerDep(instance, setupResult => {
+          const { vnode } = instance
+          if (__DEV__) {
+            pushWarningContext(vnode)
+          }
+          handleSetupResult(instance, setupResult, false)
+          if (hydratedEl) {
+            // vnode may have been replaced if an update happened before the
+            // async dep is resolved.
+            vnode.el = hydratedEl
+          }
+          const placeholder = !hydratedEl && instance.subTree.el
+          setupRenderEffect(
+            instance,
+            vnode,
+            // component may have been moved before resolve.
+            // if this is not a hydration, instance.subTree will be the comment
+            // placeholder.
+            hostParentNode(hydratedEl || instance.subTree.el!)!,
+            // anchor will not be used if this is hydration, so only need to
+            // consider the comment placeholder case.
+            hydratedEl ? null : getNextHostNode(instance.subTree),
+            parentSuspense,
+            namespace,
+            optimized,
+          )
+          if (placeholder) {
+            // clean up placeholder reference
+            vnode.placeholder = null
+            hostRemove(placeholder)
+          }
+          updateHOCHostEl(instance, vnode.el)
+          if (__DEV__) {
+            popWarningContext()
+          }
+        })
+      }
       // Give it a placeholder if this is not hydration
       // TODO handle self-defined fallback
       if (!initialVNode.el) {

packages/runtime-vapor/src/component.ts

@@ -775,19 +775,15 @@ export function mountComponent(
     !instance.asyncResolved
   ) {
     const component = instance.type
-    instance.suspense.registerDep(
-      instance as any,
-      (setupResult: any) => {
-        handleSetupResult(
-          setupResult,
-          component,
-          instance,
-          isFunction(component) ? component : component.setup,
-        )
-        mountComponent(instance, parent, anchor)
-      },
-      false,
-    )
+    instance.suspense.registerDep(instance as any, setupResult => {
+      handleSetupResult(
+        setupResult,
+        component,
+        instance,
+        isFunction(component) ? component : component.setup,
+      )
+      mountComponent(instance, parent, anchor)
+    })
     return
   }
 
@@ -932,6 +928,10 @@ function handleSetupResult(
   instance: VaporComponentInstance,
   setupFn: VaporSetupFn | undefined,
 ) {
+  if (__DEV__) {
+    pushWarningContext(instance)
+  }
+
   if (__DEV__ && !isBlock(setupResult)) {
     if (isFunction(component)) {
       warn(`Functional vapor component must return a block directly.`)
@@ -994,4 +994,8 @@ function handleSetupResult(
       warnExtraneousAttributes(instance.attrs)
     }
   }
+
+  if (__DEV__) {
+    popWarningContext()
+  }
 }