From e51423a071d72146008d772c257b86285ebe84b2 Mon Sep 17 00:00:00 2001 From: yangchangtao Date: Mon, 25 Nov 2024 14:12:01 +0800 Subject: [PATCH 1/4] fix(transition): align the different transition behaviors of dev and prod --- packages/runtime-core/src/components/BaseTransition.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts index 2b58bc3fc43..f147d945945 100644 --- a/packages/runtime-core/src/components/BaseTransition.ts +++ b/packages/runtime-core/src/components/BaseTransition.ts @@ -503,7 +503,7 @@ function getInnerChild(vnode: VNode): VNode | undefined { } // #7121 ensure get the child component subtree in case // it's been replaced during HMR - if (__DEV__ && vnode.component) { + if (vnode.component) { return vnode.component.subTree } From e2771dfca7caf1a486f87022dab83e39aa4718df Mon Sep 17 00:00:00 2001 From: yangchangtao Date: Wed, 27 Nov 2024 19:08:47 +0800 Subject: [PATCH 2/4] test: add testcase --- .../components/BaseTransition.spec.ts | 49 +++++++++++++++++++ .../src/components/BaseTransition.ts | 3 +- 2 files changed, 50 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts index aaeae3fb4f0..f16f2e7bdd7 100644 --- a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts +++ b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts @@ -1198,4 +1198,53 @@ describe('BaseTransition', () => { test('should not error on KeepAlive w/ function children', () => { expect(() => mount({}, () => () => h('div'), true)).not.toThrow() }) + + // #12465 + test('mode: "out-in" KeepAlive fallthroughAttrs by PROD', async () => { + __DEV__ = false + async function testOutIn({ trueBranch, falseBranch }: ToggleOptions) { + const toggle = ref(true) + const { props, cbs } = mockProps({ mode: 'out-in' }, true) + const root = nodeOps.createElement('div') + const show = ref(true) + const App = { + render() { + return show.value + ? h( + BaseTransition, + { + ...props, + class: 'test', + }, + h(KeepAlive, null, toggle.value ? trueBranch() : falseBranch()), + ) + : null + }, + } + render(h(App), root) + + expect(serializeInner(root)).toBe(`
0
`) + + // trigger toggle + toggle.value = false + await nextTick() + expect(props.onBeforeLeave).toHaveBeenCalledTimes(1) + expect(serialize((props.onBeforeLeave as any).mock.calls[0][0])).toBe( + `
0
`, + ) + expect(props.onLeave).toHaveBeenCalledTimes(1) + expect(serialize((props.onLeave as any).mock.calls[0][0])).toBe( + `
0
`, + ) + expect(props.onAfterLeave).not.toHaveBeenCalled() + // enter should not have started + expect(props.onBeforeEnter).not.toHaveBeenCalled() + expect(props.onEnter).not.toHaveBeenCalled() + expect(props.onAfterEnter).not.toHaveBeenCalled() + cbs.doneLeave[`
0
`]() + expect(serializeInner(root)).toBe(`0`) + } + await runTestWithKeepAlive(testOutIn) + __DEV__ = true + }) }) diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts index f147d945945..0b6c92f6aae 100644 --- a/packages/runtime-core/src/components/BaseTransition.ts +++ b/packages/runtime-core/src/components/BaseTransition.ts @@ -501,8 +501,7 @@ function getInnerChild(vnode: VNode): VNode | undefined { return vnode } - // #7121 ensure get the child component subtree in case - // it's been replaced during HMR + // #7121,#12465 ensure get the child component subtree in case if (vnode.component) { return vnode.component.subTree } From 3fd4ef73cb1caacb1f4c9d695620e94087345327 Mon Sep 17 00:00:00 2001 From: daiwei Date: Wed, 27 Nov 2024 20:54:12 +0800 Subject: [PATCH 3/4] test: update test --- .../components/BaseTransition.spec.ts | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts index f16f2e7bdd7..b40113fb5b8 100644 --- a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts +++ b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts @@ -1200,25 +1200,23 @@ describe('BaseTransition', () => { }) // #12465 - test('mode: "out-in" KeepAlive fallthroughAttrs by PROD', async () => { + test('mode: "out-in" w/ KeepAlive + fallthrough attrs (prod mode)', async () => { __DEV__ = false async function testOutIn({ trueBranch, falseBranch }: ToggleOptions) { const toggle = ref(true) const { props, cbs } = mockProps({ mode: 'out-in' }, true) const root = nodeOps.createElement('div') - const show = ref(true) const App = { render() { - return show.value - ? h( - BaseTransition, - { - ...props, - class: 'test', - }, - h(KeepAlive, null, toggle.value ? trueBranch() : falseBranch()), - ) - : null + return h( + BaseTransition, + { + ...props, + class: 'test', + }, + () => + h(KeepAlive, null, toggle.value ? trueBranch() : falseBranch()), + ) }, } render(h(App), root) From 732c3988e512c19e13e1af46edac7842c18f8db8 Mon Sep 17 00:00:00 2001 From: daiwei Date: Wed, 27 Nov 2024 20:58:02 +0800 Subject: [PATCH 4/4] chore: update comments --- packages/runtime-core/src/components/BaseTransition.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts index 0b6c92f6aae..fbb449ec8cb 100644 --- a/packages/runtime-core/src/components/BaseTransition.ts +++ b/packages/runtime-core/src/components/BaseTransition.ts @@ -501,7 +501,7 @@ function getInnerChild(vnode: VNode): VNode | undefined { return vnode } - // #7121,#12465 ensure get the child component subtree in case + // #7121,#12465 get the component subtree if it's been mounted if (vnode.component) { return vnode.component.subTree }