fix(Transition): re-fix #10620 (#10832)

revert #10632 re-fix #10620 close #10827
vuejs · Apr 29, 2024 · accf839 · accf839
1 parent 09b4df8
commit accf839
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 40 deletions.
diff --git a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
@@ -7,7 +7,6 @@ import {
   h,
   nextTick,
   nodeOps,
-  onUnmounted,
   ref,
   render,
   serialize,
@@ -769,42 +768,6 @@ describe('BaseTransition', () => {
     test('w/ KeepAlive', async () => {
       await runTestWithKeepAlive(testOutIn)
     })
-
-    test('w/ KeepAlive + unmount innerChild', async () => {
-      const unmountSpy = vi.fn()
-      const includeRef = ref(['TrueBranch'])
-      const trueComp = {
-        name: 'TrueBranch',
-        setup() {
-          onUnmounted(unmountSpy)
-          const count = ref(0)
-          return () => h('div', count.value)
-        },
-      }
-
-      const toggle = ref(true)
-      const { props } = mockProps({ mode: 'out-in' }, true /*withKeepAlive*/)
-      const root = nodeOps.createElement('div')
-      const App = {
-        render() {
-          return h(BaseTransition, props, () => {
-            return h(
-              KeepAlive,
-              { include: includeRef.value },
-              toggle.value ? h(trueComp) : h('div'),
-            )
-          })
-        },
-      }
-      render(h(App), root)
-
-      // trigger toggle
-      toggle.value = false
-      includeRef.value = []
-
-      await nextTick()
-      expect(unmountSpy).toHaveBeenCalledTimes(1)
-    })
   })
 
   // #6835

diff --git a/packages/runtime-core/__tests__/hmr.spec.ts b/packages/runtime-core/__tests__/hmr.spec.ts
@@ -356,7 +356,7 @@ describe('hot module replacement', () => {
     triggerEvent(root.children[1] as TestElement, 'click')
     await nextTick()
     await new Promise(r => setTimeout(r, 0))
-    expect(serializeInner(root)).toBe(`<button></button><!---->`)
+    expect(serializeInner(root)).toBe(`<button></button><!--v-if-->`)
     expect(unmountSpy).toHaveBeenCalledTimes(1)
     expect(mountSpy).toHaveBeenCalledTimes(1)
     expect(activeSpy).toHaveBeenCalledTimes(1)

diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
@@ -224,7 +224,7 @@ const BaseTransitionImpl: ComponentOptions = {
         // update old tree's hooks in case of dynamic transition
         setTransitionHooks(oldInnerChild, leavingHooks)
         // switching between different views
-        if (mode === 'out-in') {
+        if (mode === 'out-in' && innerChild.type !== Comment) {
           state.isLeaving = true
           // return placeholder node and queue update when leave finishes
           leavingHooks.afterLeave = () => {

diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts
@@ -254,7 +254,7 @@ const KeepAliveImpl: ComponentOptions = {
       pendingCacheKey = null
 
       if (!slots.default) {
-        return (current = null)
+        return null
       }
 
       const children = slots.default()

diff --git a/packages/vue/__tests__/e2e/Transition.spec.ts b/packages/vue/__tests__/e2e/Transition.spec.ts
@@ -1214,6 +1214,63 @@ describe('e2e: Transition', () => {
       },
       E2E_TIMEOUT,
     )
+
+    test(
+      'w/ KeepAlive + unmount innerChild',
+      async () => {
+        const unmountSpy = vi.fn()
+        await page().exposeFunction('unmountSpy', unmountSpy)
+        await page().evaluate(() => {
+          const { unmountSpy } = window as any
+          const { createApp, ref, h, onUnmounted } = (window as any).Vue
+          createApp({
+            template: `
+            <div id="container">
+              <transition mode="out-in">
+                <KeepAlive :include="includeRef">
+                  <TrueBranch v-if="toggle"></TrueBranch>
+                </KeepAlive>
+              </transition>
+            </div>
+            <button id="toggleBtn" @click="click">button</button>
+          `,
+            components: {
+              TrueBranch: {
+                name: 'TrueBranch',
+                setup() {
+                  onUnmounted(unmountSpy)
+                  const count = ref(0)
+                  return () => h('div', count.value)
+                },
+              },
+            },
+            setup: () => {
+              const includeRef = ref(['TrueBranch'])
+              const toggle = ref(true)
+              const click = () => {
+                toggle.value = !toggle.value
+                if (toggle.value) {
+                  includeRef.value = ['TrueBranch']
+                } else {
+                  includeRef.value = []
+                }
+              }
+              return { toggle, click, unmountSpy, includeRef }
+            },
+          }).mount('#app')
+        })
+
+        await transitionFinish()
+        expect(await html('#container')).toBe('<div>0</div>')
+
+        await click('#toggleBtn')
+
+        await transitionFinish()
+        expect(await html('#container')).toBe('<!--v-if-->')
+        expect(unmountSpy).toBeCalledTimes(1)
+      },
+      E2E_TIMEOUT,
+    )
   })
 
   describe('transition with Suspense', () => {