diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index e39ecfdb..947d1f29 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -56,10 +56,31 @@ describe('SSR hydration', () => { test('static', () => { const html = '
hello
' const { vnode, container } = mountWithHydration(html, () => - createStaticVNode(html) + createStaticVNode('', 1) ) expect(vnode.el).toBe(container.firstChild) expect(vnode.el.outerHTML).toBe(html) + expect(vnode.anchor).toBe(container.firstChild) + expect(vnode.children).toBe(html) + }) + + test('static (multiple elements)', () => { + const staticContent = '
hello' + const html = `
hi
` + staticContent + `
ho
` + + const n1 = h('div', 'hi') + const s = createStaticVNode('', 2) + const n2 = h('div', 'ho') + + const { container } = mountWithHydration(html, () => h('div', [n1, s, n2])) + + const div = container.firstChild! + + expect(n1.el).toBe(div.firstChild) + expect(n2.el).toBe(div.lastChild) + expect(s.el).toBe(div.childNodes[1]) + expect(s.anchor).toBe(div.childNodes[2]) + expect(s.children).toBe(staticContent) }) test('element with text children', async () => { diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index 4b7cd5a3..5816b183 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -117,7 +117,18 @@ export function createHydrationFunctions( if (domType !== DOMNodeTypes.ELEMENT) { return onMismatch() } - return nextSibling(node) + // determine anchor, adopt content + let content = '' + let cur = node + for (let i = 0; i < vnode.staticCount; i++) { + content += (cur as Element).outerHTML + if (i === vnode.staticCount - 1) { + vnode.anchor = cur + } + cur = nextSibling(cur)! + } + vnode.children = content + return cur case Fragment: if (!isFragmentStart) { return onMismatch()