refactor(keep-alive): refactor KeepAlive to use new fragment hooks. (#14121)

Author: edison1105

packages/runtime-core/src/index.ts

@@ -669,3 +669,8 @@ export {
   checkTransitionMode,
   leaveCbKey,
 } from './components/BaseTransition'
+
+/**
+ * @internal
+ */
+export type { GenericComponent } from './component'

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/block.ts

@@ -160,11 +160,6 @@ export function remove(block: Block, parent?: ParentNode): void {
     if (block.anchor) remove(block.anchor, parent)
     if ((block as DynamicFragment).scope) {
       ;(block as DynamicFragment).scope!.stop()
-      const scopes = (block as DynamicFragment).keptAliveScopes
-      if (scopes) {
-        scopes.forEach(scope => scope.stop())
-        scopes.clear()
-      }
     }
   }
 }