feat(runtime-vapor): vapor transition work with vapor keep-alive (#14050)

Author: edison1105

packages-private/vapor-e2e-test/__tests__/transition.spec.ts

@@ -903,7 +903,25 @@ describe('vapor transition', () => {
     )
   })
 
-  describe.todo('transition with KeepAlive', () => {})
+  describe('transition with KeepAlive', () => {
+    test('unmount innerChild (out-in mode)', async () => {
+      const btnSelector = '.keep-alive > button'
+      const containerSelector = '.keep-alive > div'
+
+      await transitionFinish()
+      expect(await html(containerSelector)).toBe('<div>0</div>')
+
+      await click(btnSelector)
+
+      await transitionFinish()
+      expect(await html(containerSelector)).toBe('')
+      const calls = await page().evaluate(() => {
+        return (window as any).getCalls('unmount')
+      })
+      expect(calls).toStrictEqual(['TrueBranch'])
+    })
+  })
+
   describe.todo('transition with Suspense', () => {})
   describe.todo('transition with Teleport', () => {})
 

packages-private/vapor-e2e-test/transition/App.vue

@@ -7,6 +7,7 @@ import {
   VaporTransition,
   createIf,
   template,
+  onUnmounted,
 } from 'vue'
 const show = ref(true)
 const toggle = ref(true)
@@ -28,6 +29,8 @@ let calls = {
   showLeaveCancel: [],
   showAppear: [],
   notEnter: [],
+
+  unmount: [],
 }
 window.getCalls = key => calls[key]
 window.resetCalls = key => (calls[key] = [])
@@ -90,6 +93,25 @@ const viewInOut = shallowRef(SimpleOne)
 function changeViewInOut() {
   viewInOut.value = viewInOut.value === SimpleOne ? Two : SimpleOne
 }
+
+const TrueBranch = defineVaporComponent({
+  name: 'TrueBranch',
+  setup() {
+    onUnmounted(() => {
+      calls.unmount.push('TrueBranch')
+    })
+    return template('<div>0</div>')()
+  },
+})
+const includeRef = ref(['TrueBranch'])
+const click = () => {
+  toggle.value = !toggle.value
+  if (toggle.value) {
+    includeRef.value = ['TrueBranch']
+  } else {
+    includeRef.value = []
+  }
+}
 </script>
 
 <template>
@@ -481,6 +503,19 @@ function changeViewInOut() {
     </div>
     <!-- mode end -->
 
+    <!-- with keep-alive -->
+    <div class="keep-alive">
+      <div>
+        <transition mode="out-in">
+          <KeepAlive :include="includeRef">
+            <TrueBranch v-if="toggle"></TrueBranch>
+          </KeepAlive>
+        </transition>
+      </div>
+      <button @click="click">button</button>
+    </div>
+    <!-- with keep-alive end -->
+
     <!-- vdom interop -->
     <div class="vdom">
       <button @click="toggleVdom = !toggleVdom">toggle vdom component</button>

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

@@ -150,6 +150,7 @@ export const VaporKeepAliveImpl: ObjectVaporComponent = defineVaporComponent({
     }
 
     keepAliveInstance.deactivate = instance => {
+      current = undefined
       deactivate(instance, storageContainer)
     }