fix(ssr): ensure app can be unmounted when created with createSSRApp() (#5992)

fix #5990
This commit is contained in:
Thorsten Lünborg 2022-05-24 14:30:40 +02:00 committed by GitHub
parent 160d5df34a
commit d4d3319c1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 2 deletions

View File

@ -922,7 +922,9 @@ describe('SSR hydration', () => {
])
}
}
const { container, vnode } = mountWithHydration('<!--[--><!--]-->', () => h(Comp))
const { container, vnode } = mountWithHydration('<!--[--><!--]-->', () =>
h(Comp)
)
expect(container.childNodes.length).toBe(3)
const text = container.childNodes[1]
expect(text.nodeType).toBe(3)
@ -931,6 +933,33 @@ describe('SSR hydration', () => {
expect((vnode as any).component?.subTree.children[0].el).toBe(text)
})
test('app.unmount()', async () => {
const container = document.createElement('DIV')
container.innerHTML = '<button></button>'
const App = defineComponent({
setup(_, { expose }) {
const count = ref(0)
expose({ count })
return () =>
h('button', {
onClick: () => count.value++
})
}
})
const app = createSSRApp(App)
const vm = app.mount(container)
await nextTick()
expect((container as any)._vnode).toBeDefined()
// @ts-expect-error - expose()'d properties are not available on vm type
expect(vm.count).toBe(0)
app.unmount()
expect((container as any)._vnode).toBe(null)
})
describe('mismatch handling', () => {
test('text node', () => {
const { container } = mountWithHydration(`foo`, () => 'bar')

View File

@ -27,7 +27,7 @@ import { isAsyncWrapper } from './apiAsyncComponent'
export type RootHydrateFunction = (
vnode: VNode<Node, Element>,
container: Element | ShadowRoot
container: (Element | ShadowRoot) & { _vnode?: VNode }
) => void
const enum DOMNodeTypes {
@ -75,11 +75,13 @@ export function createHydrationFunctions(
)
patch(null, vnode, container)
flushPostFlushCbs()
container._vnode = vnode
return
}
hasMismatch = false
hydrateNode(container.firstChild!, vnode, null, null, null)
flushPostFlushCbs()
container._vnode = vnode
if (hasMismatch && !__TEST__) {
// this error should show up in production
console.error(`Hydration completed but contains mismatches.`)