fix(runtime-core): class and style should be properly normalized in c…

…loneVNode (#1967) fix #1964
vuejs · Aug 26, 2020 · 9153fc2 · 9153fc2
1 parent 2178473
commit 9153fc2
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 5 deletions.
diff --git 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
@@ -433,11 +433,7 @@ export function cloneVNode<T, U>(
   // 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,