fix(hmr): force full update in child component on slot update

This commit is contained in:
Evan You
2020-05-29 10:50:01 -04:00
parent 5ddd9d2417
commit 2408a65662
6 changed files with 24 additions and 17 deletions

View File

@@ -45,7 +45,7 @@ describe('hot module replacement', () => {
const Child: ComponentOptions = {
__hmrId: childId,
render: compileToFunction(`<slot/>`)
render: compileToFunction(`<div><slot/></div>`)
}
createRecord(childId, Child)
@@ -62,13 +62,13 @@ describe('hot module replacement', () => {
createRecord(parentId, Parent)
render(h(Parent), root)
expect(serializeInner(root)).toBe(`<div>00</div>`)
expect(serializeInner(root)).toBe(`<div>0<div>0</div></div>`)
// Perform some state change. This change should be preserved after the
// re-render!
triggerEvent(root.children[0] as TestElement, 'click')
await nextTick()
expect(serializeInner(root)).toBe(`<div>11</div>`)
expect(serializeInner(root)).toBe(`<div>1<div>1</div></div>`)
// // Update text while preserving state
rerender(
@@ -77,7 +77,7 @@ describe('hot module replacement', () => {
`<div @click="count++">{{ count }}!<Child>{{ count }}</Child></div>`
)
)
expect(serializeInner(root)).toBe(`<div>1!1</div>`)
expect(serializeInner(root)).toBe(`<div>1!<div>1</div></div>`)
// Should force child update on slot content change
rerender(
@@ -86,7 +86,7 @@ describe('hot module replacement', () => {
`<div @click="count++">{{ count }}!<Child>{{ count }}!</Child></div>`
)
)
expect(serializeInner(root)).toBe(`<div>1!1!</div>`)
expect(serializeInner(root)).toBe(`<div>1!<div>1!</div></div>`)
// Should force update element children despite block optimization
rerender(
@@ -97,7 +97,7 @@ describe('hot module replacement', () => {
</div>`
)
)
expect(serializeInner(root)).toBe(`<div>1<span>1</span>1!</div>`)
expect(serializeInner(root)).toBe(`<div>1<span>1</span><div>1!</div></div>`)
// Should force update child slot elements
rerender(
@@ -108,7 +108,7 @@ describe('hot module replacement', () => {
</div>`
)
)
expect(serializeInner(root)).toBe(`<div><span>1</span></div>`)
expect(serializeInner(root)).toBe(`<div><div><span>1</span></div></div>`)
})
test('reload', async () => {