diff --git a/packages/compiler-core/__tests__/hydration.spec.ts b/packages/compiler-core/__tests__/hydration.spec.ts index af7c632c3..0fd3f7232 100644 --- a/packages/compiler-core/__tests__/hydration.spec.ts +++ b/packages/compiler-core/__tests__/hydration.spec.ts @@ -1,4 +1,12 @@ -import { createSSRApp, h, ref, nextTick, VNode, Portal } from '@vue/runtime-dom' +import { + createSSRApp, + h, + ref, + nextTick, + VNode, + Portal, + createStaticVNode +} from '@vue/runtime-dom' function mountWithHydration(html: string, render: () => any) { const container = document.createElement('div') @@ -28,6 +36,21 @@ describe('SSR hydration', () => { expect(container.textContent).toBe('bar') }) + test('comment', () => { + const { vnode, container } = mountWithHydration('', () => null) + expect(vnode.el).toBe(container.firstChild) + expect(vnode.el.nodeType).toBe(8) // comment + }) + + test('static', () => { + const html = '
hello
' + const { vnode, container } = mountWithHydration(html, () => + createStaticVNode(html) + ) + expect(vnode.el).toBe(container.firstChild) + expect(vnode.el.outerHTML).toBe(html) + }) + test('element with text children', async () => { const msg = ref('foo') const { vnode, container } = mountWithHydration( @@ -148,10 +171,6 @@ describe('SSR hydration', () => { ) }) - test('comment', () => {}) - - test('static', () => {}) - // compile SSR + client render fn from the same template & hydrate test('full compiler integration', () => {}) diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index 7091f65db..efb11cf71 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -131,14 +131,16 @@ export function createHydrationFunctions({ parentComponent: ComponentInternalInstance | null, optimized: boolean ) => { + optimized = optimized || vnode.dynamicChildren !== null const { props, patchFlag, shapeFlag } = vnode // skip props & children if this is hoisted static nodes if (patchFlag !== PatchFlags.HOISTED) { // props if (props !== null) { if ( - patchFlag & PatchFlags.FULL_PROPS || - patchFlag & PatchFlags.HYDRATE_EVENTS + !optimized || + (patchFlag & PatchFlags.FULL_PROPS || + patchFlag & PatchFlags.HYDRATE_EVENTS) ) { for (const key in props) { if (!isReservedProp(key) && isOn(key)) { @@ -172,7 +174,7 @@ export function createHydrationFunctions({ vnode, el, parentComponent, - optimized || vnode.dynamicChildren !== null + optimized ) while (next) { hasMismatch = true