Skip to content

fix(transition): optimize prop handling in VaporTransition using Proxy #14225

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
edison1105 wants to merge 13 commits into
base: minor
Choose a base branch
from
Open

fix(transition): optimize prop handling in VaporTransition using Proxy #14225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
07e02dc
fix(transition): optimize prop handling in VaporTransition using Proxy
edison1105 Dec 19, 2025
b6d633d
fix(runtime-vapor): optimize prop handling in VaporTransitionGroup us…
edison1105 Dec 19, 2025
1120298
fix(runtime-vapor): remove unused isResolved parameter from applyTran…
edison1105 Dec 19, 2025
17372a9
fix(runtime-vapor): refactor transition hooks application to use call…
edison1105 Dec 19, 2025
1f5b70c
fix(runtime-vapor): add move function for block repositioning with tr…
edison1105 Dec 19, 2025
f7c9c6e
fix(runtime-vapor): refactor move function into insert with MoveType …
edison1105 Dec 19, 2025
e2ca9d1
refactor(runtime-core): move MoveType export to public API
edison1105 Dec 19, 2025
84be655
test(vapor-e2e): add transition test for keep-alive include update
edison1105 Dec 19, 2025
f04a024
fix(Transition): prevent unmounted block from being inserted after tr…
edison1105 Dec 19, 2025
8633e30
fix(runtime-vapor): fix scope preservation logic in onBeforeTeardown …
edison1105 Dec 19, 2025
c64c19b
fix(KeepAlive): preserve fragment's scope only if it include a compon…
edison1105 Dec 19, 2025
d462cb4
chore(runtime-vapor): simplify HMR unregistering condition in unmount…
edison1105 Dec 19, 2025
3ddba38
chore(test): add todo tests
edison1105 Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
374 changes: 374 additions & 0 deletions packages-private/vapor-e2e-test/__tests__/transition.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -922,6 +922,380 @@ describe('vapor transition', () => {
})
expect(calls).toStrictEqual(['TrueBranch'])
})

test(
'switch child then update include (out-in mode)',
async () => {
const containerSelector = '.keep-alive-update-include > div'
const btnSwitchToB = '.keep-alive-update-include > #switchToB'
const btnSwitchToA = '.keep-alive-update-include > #switchToA'
const btnSwitchToC = '.keep-alive-update-include > #switchToC'

await transitionFinish()
expect(await html(containerSelector)).toBe('<div>CompA</div>')

await click(btnSwitchToB)
await nextTick()
await click(btnSwitchToC)
await transitionFinish()
await transitionFinish()
expect(await html(containerSelector)).toBe('<div class="">CompC</div>')

await click(btnSwitchToA)
await transitionFinish()
await transitionFinish()
expect(await html(containerSelector)).toBe('<div class="">CompA</div>')

let calls = await page().evaluate(() => {
return (window as any).getCalls('unmount')
})
expect(calls).toStrictEqual(['CompC unmounted'])

// Unlike vdom, CompA does not update because there are no state changes
// expect CompA only update once
// calls = await page().evaluate(() => {
// return (window as any).getCalls('updated')
// })
// expect(calls).toStrictEqual(['CompA updated'])
},
E2E_TIMEOUT,
)

// #11775
// test(
// 'switch child then update include (out-in mode)',
// async () => {
// const onUpdatedSpyA = vi.fn()
// const onUnmountedSpyC = vi.fn()

// await page().exposeFunction('onUpdatedSpyA', onUpdatedSpyA)
// await page().exposeFunction('onUnmountedSpyC', onUnmountedSpyC)

// await page().evaluate(() => {
// const { onUpdatedSpyA, onUnmountedSpyC } = window as any
// const { createApp, ref, shallowRef, h, onUpdated, onUnmounted } = (
// window as any
// ).Vue
// createApp({
// template: `
// <div id="container">
// <transition mode="out-in">
// <KeepAlive :include="includeRef">
// <component :is="current" />
// </KeepAlive>
// </transition>
// </div>
// <button id="switchToB" @click="switchToB">switchToB</button>
// <button id="switchToC" @click="switchToC">switchToC</button>
// <button id="switchToA" @click="switchToA">switchToA</button>
// `,
// components: {
// CompA: {
// name: 'CompA',
// setup() {
// onUpdated(onUpdatedSpyA)
// return () => h('div', 'CompA')
// },
// },
// CompB: {
// name: 'CompB',
// setup() {
// return () => h('div', 'CompB')
// },
// },
// CompC: {
// name: 'CompC',
// setup() {
// onUnmounted(onUnmountedSpyC)
// return () => h('div', 'CompC')
// },
// },
// },
// setup: () => {
// const includeRef = ref(['CompA', 'CompB', 'CompC'])
// const current = shallowRef('CompA')
// const switchToB = () => (current.value = 'CompB')
// const switchToC = () => (current.value = 'CompC')
// const switchToA = () => {
// current.value = 'CompA'
// includeRef.value = ['CompA']
// }
// return { current, switchToB, switchToC, switchToA, includeRef }
// },
// }).mount('#app')
// })

// await transitionFinish()
// expect(await html('#container')).toBe('<div>CompA</div>')

// await click('#switchToB')
// await nextTick()
// await click('#switchToC')
// await transitionFinish()
// expect(await html('#container')).toBe('<div class="">CompC</div>')

// await click('#switchToA')
// await transitionFinish()
// expect(await html('#container')).toBe('<div class="">CompA</div>')

// // expect CompA only update once
// expect(onUpdatedSpyA).toBeCalledTimes(1)
// expect(onUnmountedSpyC).toBeCalledTimes(1)
// },
// E2E_TIMEOUT,
// )

// // #10827
// test(
// 'switch and update child then update include (out-in mode)',
// async () => {
// const onUnmountedSpyB = vi.fn()
// await page().exposeFunction('onUnmountedSpyB', onUnmountedSpyB)

// await page().evaluate(() => {
// const { onUnmountedSpyB } = window as any
// const {
// createApp,
// ref,
// shallowRef,
// h,
// provide,
// inject,
// onUnmounted,
// } = (window as any).Vue
// createApp({
// template: `
// <div id="container">
// <transition name="test-anim" mode="out-in">
// <KeepAlive :include="includeRef">
// <component :is="current" />
// </KeepAlive>
// </transition>
// </div>
// <button id="switchToA" @click="switchToA">switchToA</button>
// <button id="switchToB" @click="switchToB">switchToB</button>
// `,
// components: {
// CompA: {
// name: 'CompA',
// setup() {
// const current = inject('current')
// return () => h('div', current.value)
// },
// },
// CompB: {
// name: 'CompB',
// setup() {
// const current = inject('current')
// onUnmounted(onUnmountedSpyB)
// return () => h('div', current.value)
// },
// },
// },
// setup: () => {
// const includeRef = ref(['CompA'])
// const current = shallowRef('CompA')
// provide('current', current)

// const switchToB = () => {
// current.value = 'CompB'
// includeRef.value = ['CompA', 'CompB']
// }
// const switchToA = () => {
// current.value = 'CompA'
// includeRef.value = ['CompA']
// }
// return { current, switchToB, switchToA, includeRef }
// },
// }).mount('#app')
// })

// await transitionFinish()
// expect(await html('#container')).toBe('<div>CompA</div>')

// await click('#switchToB')
// await transitionFinish()
// await transitionFinish()
// expect(await html('#container')).toBe('<div class="">CompB</div>')

// await click('#switchToA')
// await transitionFinish()
// await transitionFinish()
// expect(await html('#container')).toBe('<div class="">CompA</div>')

// expect(onUnmountedSpyB).toBeCalledTimes(1)
// },
// E2E_TIMEOUT,
// )

// // #12860
// test(
// 'unmount children',
// async () => {
// const unmountSpy = vi.fn()
// let storageContainer: ElementHandle<HTMLDivElement>
// const setStorageContainer = (container: any) =>
// (storageContainer = container)
// await page().exposeFunction('unmountSpy', unmountSpy)
// await page().exposeFunction('setStorageContainer', setStorageContainer)
// await page().evaluate(() => {
// const { unmountSpy, setStorageContainer } = window as any
// const { createApp, ref, h, onUnmounted, getCurrentInstance } = (
// window as any
// ).Vue
// createApp({
// template: `
// <div id="container">
// <transition>
// <KeepAlive :include="includeRef">
// <TrueBranch v-if="toggle"></TrueBranch>
// </KeepAlive>
// </transition>
// </div>
// <button id="toggleBtn" @click="click">button</button>
// `,
// components: {
// TrueBranch: {
// name: 'TrueBranch',
// setup() {
// const instance = getCurrentInstance()
// onUnmounted(() => {
// unmountSpy()
// setStorageContainer(instance.__keepAliveStorageContainer)
// })
// 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)
// expect(await storageContainer!.evaluate(x => x.innerHTML)).toBe(``)
// },
// E2E_TIMEOUT,
// )

// // #13153
// test(
// 'move kept-alive node before v-show transition leave finishes',
// async () => {
// await page().evaluate(() => {
// const { createApp, ref } = (window as any).Vue
// const show = ref(true)
// createApp({
// template: `
// <div id="container">
// <KeepAlive :include="['Comp1', 'Comp2']">
// <component :is="state === 1 ? 'Comp1' : 'Comp2'"/>
// </KeepAlive>
// </div>
// <button id="toggleBtn" @click="click">button</button>
// `,
// setup: () => {
// const state = ref(1)
// const click = () => (state.value = state.value === 1 ? 2 : 1)
// return { state, click }
// },
// components: {
// Comp1: {
// components: {
// Item: {
// name: 'Item',
// setup() {
// return { show }
// },
// template: `
// <Transition name="test">
// <div v-show="show" >
// <h2>{{ show ? "I should show" : "I shouldn't show " }}</h2>
// </div>
// </Transition>
// `,
// },
// },
// name: 'Comp1',
// setup() {
// const toggle = () => (show.value = !show.value)
// return { show, toggle }
// },
// template: `
// <Item />
// <h2>This is page1</h2>
// <button id="changeShowBtn" @click="toggle">{{ show }}</button>
// `,
// },
// Comp2: {
// name: 'Comp2',
// template: `<h2>This is page2</h2>`,
// },
// },
// }).mount('#app')
// })

// expect(await html('#container')).toBe(
// `<div><h2>I should show</h2></div>` +
// `<h2>This is page1</h2>` +
// `<button id="changeShowBtn">true</button>`,
// )

// // trigger v-show transition leave
// await click('#changeShowBtn')
// await nextTick()
// expect(await html('#container')).toBe(
// `<div class="test-leave-from test-leave-active"><h2>I shouldn't show </h2></div>` +
// `<h2>This is page1</h2>` +
// `<button id="changeShowBtn">false</button>`,
// )

// // switch to page2, before leave finishes
// // expect v-show element's display to be none
// await click('#toggleBtn')
// await nextTick()
// expect(await html('#container')).toBe(
// `<div class="test-leave-from test-leave-active" style="display: none;"><h2>I shouldn't show </h2></div>` +
// `<h2>This is page2</h2>`,
// )

// // switch back to page1
// // expect v-show element's display to be none
// await click('#toggleBtn')
// await nextTick()
// expect(await html('#container')).toBe(
// `<div class="test-enter-from test-enter-active" style="display: none;"><h2>I shouldn't show </h2></div>` +
// `<h2>This is page1</h2>` +
// `<button id="changeShowBtn">false</button>`,
// )

// await transitionFinish()
// expect(await html('#container')).toBe(
// `<div class="" style="display: none;"><h2>I shouldn't show </h2></div>` +
// `<h2>This is page1</h2>` +
// `<button id="changeShowBtn">false</button>`,
// )
// },
// E2E_TIMEOUT,
// )
})

describe.todo('transition with Suspense', () => {})
Expand Down
Loading
Loading