From 9036f88d8304a3455265f1ecd86ec8f4a5ea4715 Mon Sep 17 00:00:00 2001 From: HcySunYang Date: Fri, 26 Mar 2021 23:59:50 +0800 Subject: [PATCH] fix(hydration): handle camel-case tag name when performing match assertion (#3247) fix #3243 --- packages/runtime-core/__tests__/hydration.spec.ts | 9 +++++++++ packages/runtime-core/src/hydration.ts | 3 ++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index 3f9feb4e..a1213145 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -626,6 +626,15 @@ describe('SSR hydration', () => { expect(spy).toHaveBeenCalled() }) + test('elements with camel-case in svg ', () => { + const { vnode, container } = mountWithHydration( + '', + () => h('animateTransform') + ) + expect(vnode.el).toBe(container.firstChild) + expect(`Hydration node mismatch`).not.toHaveBeenWarned() + }) + test('SVG as a mount container', () => { const svgContainer = document.createElement('svg') svgContainer.innerHTML = '' diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index 8f30cadb..0085ce6e 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -158,7 +158,8 @@ export function createHydrationFunctions( if (shapeFlag & ShapeFlags.ELEMENT) { if ( domType !== DOMNodeTypes.ELEMENT || - vnode.type !== (node as Element).tagName.toLowerCase() + (vnode.type as string).toLowerCase() !== + (node as Element).tagName.toLowerCase() ) { nextNode = onMismatch() } else {