diff --git a/packages/runtime-core/__tests__/vnode.spec.ts b/packages/runtime-core/__tests__/vnode.spec.ts index 2cab3215d40..ad3575610a9 100644 --- a/packages/runtime-core/__tests__/vnode.spec.ts +++ b/packages/runtime-core/__tests__/vnode.spec.ts @@ -265,6 +265,56 @@ describe('vnode', () => { setCurrentRenderingInstance(null) }) + test('cloneVNode class normalization', () => { + const vnode = createVNode('div') + const expectedProps = { + class: 'a b' + } + expect(cloneVNode(vnode, { class: 'a b' }).props).toMatchObject( + expectedProps + ) + expect(cloneVNode(vnode, { class: ['a', 'b'] }).props).toMatchObject( + expectedProps + ) + expect( + cloneVNode(vnode, { class: { a: true, b: true } }).props + ).toMatchObject(expectedProps) + expect( + cloneVNode(vnode, { class: [{ a: true, b: true }] }).props + ).toMatchObject(expectedProps) + }) + + test('cloneVNode style normalization', () => { + const vnode = createVNode('div') + const expectedProps = { + style: { + color: 'blue', + width: '300px' + } + } + expect( + cloneVNode(vnode, { style: 'color: blue; width: 300px;' }).props + ).toMatchObject(expectedProps) + expect( + cloneVNode(vnode, { + style: { + color: 'blue', + width: '300px' + } + }).props + ).toMatchObject(expectedProps) + expect( + cloneVNode(vnode, { + style: [ + { + color: 'blue', + width: '300px' + } + ] + }).props + ).toMatchObject(expectedProps) + }) + describe('mergeProps', () => { test('class', () => { let props1: Data = { class: 'c' } diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index b444215ca26..0f20a534675 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -433,11 +433,7 @@ export function cloneVNode( // This is intentionally NOT using spread or extend to avoid the runtime // key enumeration cost. const { props, patchFlag } = vnode - const mergedProps = extraProps - ? props - ? mergeProps(props, extraProps) - : extend({}, extraProps) - : props + const mergedProps = extraProps ? mergeProps(props || {}, extraProps) : props return { __v_isVNode: true, [ReactiveFlags.SKIP]: true,