wip: refactor async component handling

Author: edison1105

packages/runtime-vapor/__tests__/apiDefineAsyncComponent.spec.ts

@@ -9,6 +9,7 @@ import {
   defineVaporComponent,
   renderEffect,
   template,
+  withVaporCtx,
 } from '@vue/runtime-vapor'
 import { setElementText } from '../src/dom/prop'
 
@@ -785,12 +786,13 @@ describe('api: defineAsyncComponent', () => {
     const { html } = define({
       setup() {
         return createComponent(VaporKeepAlive, null, {
-          default: () =>
+          default: withVaporCtx(() =>
             createIf(
               () => toggle.value,
               () => createComponent(Foo),
               () => createComponent(Bar),
             ),
+          ),
         })
       },
     }).render()
@@ -834,7 +836,7 @@ describe('api: defineAsyncComponent', () => {
           VaporKeepAlive,
           { include: () => 'Foo' },
           {
-            default: () => createComponent(Foo),
+            default: withVaporCtx(() => createComponent(Foo)),
           },
         )
       },

packages/runtime-vapor/src/apiDefineAsyncComponent.ts

@@ -5,7 +5,6 @@ import {
   createAsyncComponentContext,
   currentInstance,
   handleError,
-  isKeepAlive,
   markAsyncBoundary,
   performAsyncHydrate,
   useAsyncComponentState,
@@ -29,7 +28,6 @@ import {
 import { invokeArrayFns } from '@vue/shared'
 import { type TransitionOptions, insert, remove } from './block'
 import { parentNode } from './dom/node'
-import type { KeepAliveInstance } from './components/KeepAlive'
 import { setTransitionHooks } from './components/Transition'
 
 /*@ __NO_SIDE_EFFECTS__ */
@@ -193,14 +191,6 @@ function createInnerComp(
     appContext,
   )
 
-  if (parent.parent && isKeepAlive(parent.parent)) {
-    // If there is a parent KeepAlive, let it handle the resolved async component
-    // This will process shapeFlag and cache the component
-    ;(parent.parent as KeepAliveInstance).cacheComponent(instance)
-    // cache the wrapper instance as well
-    ;(parent.parent as KeepAliveInstance).cacheComponent(parent)
-  }
-
   // set transition hooks
   if ($transition) setTransitionHooks(instance, $transition)
 

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

@@ -43,7 +43,6 @@ export interface KeepAliveInstance extends VaporComponentInstance {
     anchor?: Node | null | 0,
   ) => void
   deactivate: (instance: VaporComponentInstance) => void
-  cacheComponent: (instance: VaporComponentInstance) => void
   getCachedComponent: (
     comp: VaporComponent,
   ) => VaporComponentInstance | VaporFragment | undefined
@@ -82,14 +81,6 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
 
     keepAliveInstance.getCachedComponent = comp => cache.get(comp)
 
-    keepAliveInstance.cacheComponent = (instance: VaporComponentInstance) => {
-      if (!shouldCache(instance as GenericComponentInstance, props)) {
-        return
-      }
-      instance.shapeFlag! |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
-      innerCacheBlock(instance.type, instance)
-    }
-
     keepAliveInstance.activate = (instance, parentNode, anchor) => {
       current = instance
       activate(instance, parentNode, anchor)
@@ -241,28 +232,18 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
       return children
     }
 
-    // process shapeFlag
-    if (isVaporComponent(children)) {
-      children.shapeFlag! |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
-    } else if (isInteropFragment(children)) {
-      children.vnode!.shapeFlag! |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
-    } else if (isDynamicFragment(children)) {
-      processFragment(children)
-
-      // re-process fragment when fragment updates
-      ;(children.beforeTeardown || (children.beforeTeardown = [])).push(
+    const injectKeepAliveHooks = (frag: DynamicFragment) => {
+      ;(frag.beforeTeardown || (frag.beforeTeardown = [])).push(
         (oldKey, nodes, scope) => {
-          processFragment(children)
+          processFragment(frag)
           keptAliveScopes.set(oldKey, scope)
           return true
         },
       )
-      ;(children.beforeMount || (children.beforeMount = [])).push(() =>
-        cacheFragment(children),
+      ;(frag.beforeMount || (frag.beforeMount = [])).push(() =>
+        cacheFragment(frag),
       )
-
-      // get scope for fragment
-      children.getScope = key => {
+      frag.getScope = key => {
         const scope = keptAliveScopes.get(key)
         if (scope) {
           keptAliveScopes.delete(key)
@@ -271,6 +252,22 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
       }
     }
 
+    // process shapeFlag
+    if (isVaporComponent(children)) {
+      children.shapeFlag! |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
+      if (isAsyncWrapper(children)) {
+        injectKeepAliveHooks(children.block as DynamicFragment)
+      }
+    } else if (isInteropFragment(children)) {
+      children.vnode!.shapeFlag! |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
+    } else if (isDynamicFragment(children)) {
+      processFragment(children)
+      injectKeepAliveHooks(children)
+      if (isVaporComponent(children.nodes) && isAsyncWrapper(children.nodes)) {
+        injectKeepAliveHooks(children.nodes.block as DynamicFragment)
+      }
+    }
+
     return children
   },
 })
@@ -287,10 +284,9 @@ const shouldCache = (
       : (block as GenericComponentInstance).type
   ) as GenericComponent & AsyncComponentInternalOptions
 
-  // For unresolved async wrappers, skip caching
-  // Wait for resolution and re-process in createInnerComp
+  // always cache unresolved async components
   if (isAsync && !type.__asyncResolved) {
-    return false
+    return true
   }
 
   const { include, exclude } = props