wip: pass attrs fallthrough tests

packages/runtime-core/src/vnode.ts

@@ -1,9 +1,17 @@
-import { isArray, isFunction, isString, isObject, EMPTY_ARR } from '@vue/shared'
-import { ComponentInstance, Data } from './component'
+import {
+  isArray,
+  isFunction,
+  isString,
+  isObject,
+  EMPTY_ARR,
+  extend
+} from '@vue/shared'
+import { ComponentInstance, Data, SetupProxySymbol } from './component'
 import { HostNode } from './createRenderer'
 import { RawSlots } from './componentSlots'
 import { PatchFlags } from './patchFlags'
 import { ShapeFlags } from './shapeFlags'
+import { isReactive } from '@vue/reactivity'
 
 export const Fragment = Symbol('Fragment')
 export const Text = Symbol('Text')
@@ -100,6 +108,28 @@ export function createVNode(
   // Allow passing 0 for props, this can save bytes on generated code.
   props = props || null
 
+  // class & style normalization.
+  if (props !== null) {
+    // for reactive or proxy objects, we need to clone it to enable mutation.
+    if (isReactive(props) || SetupProxySymbol in props) {
+      props = extend({}, props)
+    }
+    // class normalization only needed if the vnode isn't generated by
+    // compiler-optimized code
+    if (props.class != null && !(patchFlag & PatchFlags.CLASS)) {
+      props.class = normalizeClass(props.class)
+    }
+    let { style } = props
+    if (style != null) {
+      // reactive state objects need to be cloned since they are likely to be
+      // mutated
+      if (isReactive(style) && !isArray(style)) {
+        style = extend({}, style)
+      }
+      props.style = normalizeStyle(style)
+    }
+  }
+
   // encode the vnode type information into a bitmap
   const shapeFlag = isString(type)
     ? ShapeFlags.ELEMENT
@@ -127,18 +157,6 @@ export function createVNode(
 
   normalizeChildren(vnode, children)
 
-  // class & style normalization.
-  if (props !== null) {
-    // class normalization only needed if the vnode isn't generated by
-    // compiler-optimized code
-    if (props.class != null && !(patchFlag & PatchFlags.CLASS)) {
-      props.class = normalizeClass(props.class)
-    }
-    if (props.style != null) {
-      props.style = normalizeStyle(props.style)
-    }
-  }
-
   // presence of a patch flag indicates this node is dynamic
   // component nodes also should always be tracked, because even if the
   // component doesn't need to update, it needs to persist the instance on to
@@ -257,9 +275,7 @@ const handlersRE = /^on|^vnode/
 
 export function mergeProps(...args: Data[]) {
   const ret: Data = {}
-  for (const key in args[0]) {
-    ret[key] = args[0][key]
-  }
+  extend(ret, args[0])
   for (let i = 1; i < args.length; i++) {
     const toMerge = args[i]
     for (const key in toMerge) {