Skip to content

Commit

Permalink
fix(hydration): handle appear transition before patch props (#9837)
Browse files Browse the repository at this point in the history
close #9832
  • Loading branch information
edison1105 authored Dec 16, 2023
1 parent 0a387df commit e70f4c4
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 21 deletions.
35 changes: 35 additions & 0 deletions packages/runtime-core/__tests__/hydration.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1114,6 +1114,41 @@ describe('SSR hydration', () => {
expect(`mismatch`).not.toHaveBeenWarned()
})

test('transition appear w/ event listener', async () => {
const container = document.createElement('div')
container.innerHTML = `<template><button>0</button></template>`
createSSRApp({
data() {
return {
count: 0
}
},
template: `
<Transition appear>
<button @click="count++">{{count}}</button>
</Transition>
`
}).mount(container)

expect(container.firstChild).toMatchInlineSnapshot(`
<button
class="v-enter-from v-enter-active"
>
0
</button>
`)

triggerEvent('click', container.querySelector('button')!)
await nextTick()
expect(container.firstChild).toMatchInlineSnapshot(`
<button
class="v-enter-from v-enter-active"
>
1
</button>
`)
})

describe('mismatch handling', () => {
test('text node', () => {
const { container } = mountWithHydration(`foo`, () => 'bar')
Expand Down
43 changes: 22 additions & 21 deletions packages/runtime-core/src/hydration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -344,6 +344,28 @@ export function createHydrationFunctions(
if (dirs) {
invokeDirectiveHook(vnode, null, parentComponent, 'created')
}

// handle appear transition
let needCallTransitionHooks = false
if (isTemplateNode(el)) {
needCallTransitionHooks =
needTransition(parentSuspense, transition) &&
parentComponent &&
parentComponent.vnode.props &&
parentComponent.vnode.props.appear

const content = (el as HTMLTemplateElement).content
.firstChild as Element

if (needCallTransitionHooks) {
transition!.beforeEnter(content)
}

// replace <template> node with inner children
replaceNode(content, el, parentComponent)
vnode.el = el = content
}

// props
if (props) {
if (
Expand Down Expand Up @@ -390,27 +412,6 @@ export function createHydrationFunctions(
invokeVNodeHook(vnodeHooks, parentComponent, vnode)
}

// handle appear transition
let needCallTransitionHooks = false
if (isTemplateNode(el)) {
needCallTransitionHooks =
needTransition(parentSuspense, transition) &&
parentComponent &&
parentComponent.vnode.props &&
parentComponent.vnode.props.appear

const content = (el as HTMLTemplateElement).content
.firstChild as Element

if (needCallTransitionHooks) {
transition!.beforeEnter(content)
}

// replace <template> node with inner children
replaceNode(content, el, parentComponent)
vnode.el = el = content
}

if (dirs) {
invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
}
Expand Down

0 comments on commit e70f4c4

Please sign in to comment.