fix(vue): fix format vue3 h function props (#2609)

packages/vue/src/__tests__/utils.spec.ts

@@ -0,0 +1,56 @@
+import { formatVue3VNodeData } from '../utils/formatVNodeData'
+
+test('valid formatVNodeData', () => {
+  const onClick = () => {}
+  const ondblclick = () => {}
+
+  const vNodeData = {
+    class: [{ bar: false }, { 'test-component': true }],
+    style: {
+      border: '4px solid red',
+      padding: '20px',
+      borderRadius: '10px',
+    },
+    attrs: {
+      id: 'foo',
+    },
+    props: {
+      value: 'leader',
+      user: {
+        name: '张三',
+        age: 18,
+        sex: 1,
+      },
+    },
+    domProps: {
+      innerHTML: 'innerHTML - baz',
+    },
+    on: {
+      click: onClick,
+    },
+    nativeOn: {
+      dblclick: ondblclick,
+    },
+  }
+
+  const vue3VNodeData = {
+    class: [{ bar: false }, { 'test-component': true }],
+    style: {
+      border: '4px solid red',
+      padding: '20px',
+      borderRadius: '10px',
+    },
+    id: 'foo',
+    value: 'leader',
+    user: {
+      name: '张三',
+      age: 18,
+      sex: 1,
+    },
+    innerHTML: 'innerHTML - baz',
+    onClick,
+    ondblclick,
+  }
+
+  expect(formatVue3VNodeData(vNodeData)).toEqual(vue3VNodeData)
+})

packages/vue/src/shared/h.ts

@@ -1,5 +1,6 @@
 import { h, isVue2 } from 'vue-demi'
 import { Fragment, FragmentComponent } from './fragment'
+import { formatVue3VNodeData } from '../utils/formatVNodeData'
 
 type RenderChildren = {
   [key in string]?: (...args: any[]) => (VNode | string)[]
@@ -80,23 +81,7 @@ const compatibleCreateElement = (
       data?: VNodeData,
       components?: RenderChildren
     ) => VNode
-    const newData = {}
-    Object.keys(data).forEach((key) => {
-      if (key === 'on') {
-        if (data[key]) {
-          const events = Object.keys(data[key])
-          events.forEach((event) => {
-            const eventName = `on${event[0].toUpperCase()}${event.slice(1)}`
-            newData[eventName] = data[key][event]
-          })
-        }
-      } else if (typeof data[key] === 'object' && data[key] !== null) {
-        Object.assign(newData, data[key])
-      } else {
-        newData[key] = data[key]
-      }
-    })
-    return hInVue3(tag, newData, components)
+    return hInVue3(tag, formatVue3VNodeData(data), components)
   }
 }
 

packages/vue/src/utils/formatVNodeData.ts

@@ -0,0 +1,24 @@
+import { each } from '@formily/shared'
+
+type VNodeData = Record<string, any>
+
+export const formatVue3VNodeData = (data: VNodeData) => {
+  const newData = {}
+  each(data, (value, key) => {
+    if (key === 'on' || key === 'nativeOn') {
+      if (value) {
+        each(value, (func, name) => {
+          const eventName = `on${
+            key === 'on' ? name[0].toUpperCase() : name[0]
+          }${name.slice(1)}`
+          newData[eventName] = func
+        })
+      }
+    } else if (key === 'attrs' || key === 'props' || key === 'domProps') {
+      Object.assign(newData, value)
+    } else {
+      newData[key] = value
+    }
+  })
+  return newData
+}