Skip to content
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.

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

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

Merged
merged 1 commit into from May 24, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 30 additions & 1 deletion packages/runtime-core/__tests__/hydration.spec.ts
Expand Up @@ -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)
Expand All @@ -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')
Expand Down
4 changes: 3 additions & 1 deletion packages/runtime-core/src/hydration.ts
Expand Up @@ -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 {
Expand Down Expand Up @@ -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.`)
Expand Down