fix(transition): isolate transition leaving cache by resolved child type

Author: edison1105

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

@@ -1316,6 +1316,56 @@ describe('vapor transition', () => {
         '<div class="">vapor compA</div>',
       )
     })
+
+    test(
+      'different pre-resolved async types during leave',
+      async () => {
+        const rootSelector = '.different-pre-resolved-async-types-during-leave'
+        const btnSelector = `${rootSelector} > button`
+        const hiddenASelector = `${rootSelector} #hidden-a`
+        const hiddenBSelector = `${rootSelector} #hidden-b`
+        const containerSelector = `${rootSelector} #container`
+
+        await waitForInnerHTML(
+          hiddenASelector,
+          '<div style="display: none;">vapor compA</div>',
+        )
+        await waitForInnerHTML(
+          hiddenBSelector,
+          '<div style="display: none;">vapor compB</div>',
+        )
+        await waitForInnerHTML(containerSelector, '<div>vapor compA</div>')
+
+        await page().evaluate(() => {
+          ;(window as any).resetCalls()
+        })
+        await domClick(btnSelector)
+        await nextTick()
+
+        let calls = await page().evaluate(() => {
+          return (window as any).getCalls()
+        })
+        expect(calls).toContain('beforeEnter:vapor compB')
+        expect(calls).toContain('enter:vapor compB')
+        expect(calls).toContain('beforeLeave:vapor compA')
+        expect(calls).toContain('leave:vapor compA')
+        expect(calls).not.toContain('afterLeave:vapor compA')
+
+        await timeout(50 + buffer)
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls()
+        })
+        expect(calls).toStrictEqual([
+          'beforeLeave:vapor compA',
+          'leave:vapor compA',
+          'beforeEnter:vapor compB',
+          'enter:vapor compB',
+          'afterLeave:vapor compA',
+          'afterEnter:vapor compB',
+        ])
+      },
+      E2E_TIMEOUT,
+    )
   })
 
   describe('transition with v-show', () => {
@@ -1788,6 +1838,44 @@ describe('vapor transition', () => {
     )
   })
 
+  describe('dynamic component', () => {
+    test(
+      'different type during leave',
+      async () => {
+        const btnSelector = '.different-type-during-leave > button'
+
+        await page().evaluate(() => {
+          ;(window as any).resetCalls()
+        })
+        await domClick(btnSelector)
+        await nextTick()
+
+        let calls = await page().evaluate(() => {
+          return (window as any).getCalls()
+        })
+        expect(calls).toContain('beforeEnter:span')
+        expect(calls).toContain('enter:span')
+        expect(calls).toContain('beforeLeave:div')
+        expect(calls).toContain('leave:div')
+        expect(calls).not.toContain('afterLeave:div')
+
+        await timeout(50 + buffer)
+        calls = await page().evaluate(() => {
+          return (window as any).getCalls()
+        })
+        expect(calls).toStrictEqual([
+          'beforeLeave:div',
+          'leave:div',
+          'beforeEnter:span',
+          'enter:span',
+          'afterLeave:div',
+          'afterEnter:span',
+        ])
+      },
+      E2E_TIMEOUT,
+    )
+  })
+
   describe('mode', () => {
     test(
       'in-out mode with v-if',

packages-private/vapor-e2e-test/transition/cases/dynamic-component/different-type-during-leave.vue

@@ -0,0 +1,52 @@
+<script setup vapor lang="ts">
+import { computed, ref } from 'vue'
+
+const tags = ['div', 'span', 'p']
+const view = ref(0)
+const calls: string[] = []
+const wait = (fn: () => void, time: number) => setTimeout(fn, time)
+
+const advanceView = () => {
+  view.value = (view.value + 1) % tags.length
+}
+
+const currentTag = computed(() => tags[view.value])
+
+;(window as any).getCalls = () => [...calls]
+;(window as any).resetCalls = () => {
+  calls.length = 0
+}
+
+const record = (phase: string, el: Element) => {
+  calls.push(`${phase}:${el.tagName.toLowerCase()}`)
+}
+</script>
+
+<template>
+  <div class="different-type-during-leave">
+    <button @click="advanceView">toggle</button>
+    <div>
+      <transition
+        :css="false"
+        @before-enter="el => record('beforeEnter', el)"
+        @enter="
+          (el, done) => {
+            record('enter', el)
+            wait(done, 50)
+          }
+        "
+        @after-enter="el => record('afterEnter', el)"
+        @before-leave="el => record('beforeLeave', el)"
+        @leave="
+          (el, done) => {
+            record('leave', el)
+            wait(done, 50)
+          }
+        "
+        @after-leave="el => record('afterLeave', el)"
+      >
+        <component :is="currentTag">content</component>
+      </transition>
+    </div>
+  </div>
+</template>

packages-private/vapor-e2e-test/transition/cases/transition-with-asynccomponent/different-pre-resolved-async-types-during-leave.vue

@@ -0,0 +1,67 @@
+<script setup vapor lang="ts">
+import { computed, defineVaporAsyncComponent, ref } from 'vue'
+import VaporCompA from '../../components/VaporCompA.vue'
+import VaporCompB from '../../components/VaporCompB.vue'
+
+const AsyncCompResolvedA = defineVaporAsyncComponent(() =>
+  Promise.resolve(VaporCompA),
+)
+const AsyncCompResolvedB = defineVaporAsyncComponent(() =>
+  Promise.resolve(VaporCompB),
+)
+
+const components = [AsyncCompResolvedA, AsyncCompResolvedB]
+const view = ref(0)
+const calls: string[] = []
+const wait = (fn: () => void, time: number) => setTimeout(fn, time)
+
+const advanceView = () => {
+  view.value = (view.value + 1) % components.length
+}
+
+const currentComponent = computed(() => components[view.value])
+
+;(window as any).getCalls = () => [...calls]
+;(window as any).resetCalls = () => {
+  calls.length = 0
+}
+
+const record = (phase: string, el: Element) => {
+  calls.push(`${phase}:${el.textContent?.trim()}`)
+}
+</script>
+
+<template>
+  <div class="different-pre-resolved-async-types-during-leave">
+    <div id="hidden-a">
+      <AsyncCompResolvedA v-show="false" />
+    </div>
+    <div id="hidden-b">
+      <AsyncCompResolvedB v-show="false" />
+    </div>
+    <button @click="advanceView">toggle</button>
+    <div id="container">
+      <transition
+        :css="false"
+        @before-enter="el => record('beforeEnter', el)"
+        @enter="
+          (el, done) => {
+            record('enter', el)
+            wait(done, 50)
+          }
+        "
+        @after-enter="el => record('afterEnter', el)"
+        @before-leave="el => record('beforeLeave', el)"
+        @leave="
+          (el, done) => {
+            record('leave', el)
+            wait(done, 50)
+          }
+        "
+        @after-leave="el => record('afterLeave', el)"
+      >
+        <component :is="currentComponent" />
+      </transition>
+    </div>
+  </div>
+</template>