fix(types):fix Spreading data functional components TSX type error (fix #12778)

types/test/vue-test.ts

@@ -42,7 +42,7 @@ class Test extends Vue {
     this.$delete({}, 'key')
     this.$watch('a', (val: number, oldVal: number) => {}, {
       immediate: true,
-      deep: false
+      deep: false,
     })()
     this.$watch(
       () => this.a,
@@ -85,9 +85,9 @@ class Test extends Vue {
     this.extend({
       data() {
         return {
-          msg: ''
+          msg: '',
         }
-      }
+      },
     })
     this.nextTick(() => {})
     this.nextTick(
@@ -110,7 +110,7 @@ class Test extends Vue {
       functional: true,
       render(h) {
         return h('div', 'hello!')
-      }
+      },
     })
     this.use
     this.mixin(Test)
@@ -126,32 +126,32 @@ const HelloWorldComponent = Vue.extend({
   props: ['name'],
   data() {
     return {
-      message: 'Hello ' + this.name
+      message: 'Hello ' + this.name,
     }
   },
   computed: {
     shouted(): string {
       return this.message.toUpperCase()
-    }
+    },
   },
   methods: {
     getMoreExcited() {
       this.message += '!'
-    }
+    },
   },
   watch: {
     message(a: string) {
       console.log(`Message ${this.message} was changed!`)
-    }
-  }
+    },
+  },
 })
 
 const FunctionalHelloWorldComponent = Vue.extend({
   functional: true,
   props: ['name'],
   render(createElement, ctxt) {
     return createElement('div', 'Hello ' + ctxt.props.name)
-  }
+  },
 })
 
 const FunctionalScopedSlotsComponent = Vue.extend({
@@ -161,29 +161,29 @@ const FunctionalScopedSlotsComponent = Vue.extend({
       (ctx.scopedSlots.default && ctx.scopedSlots.default({})) ||
       h('div', 'functional scoped slots')
     )
-  }
+  },
 })
 
 const Parent = Vue.extend({
   data() {
     return { greeting: 'Hello' }
-  }
+  },
 })
 
 const Child = Parent.extend({
   methods: {
     foo() {
       console.log(this.greeting.toLowerCase())
-    }
-  }
+    },
+  },
 })
 
 const GrandChild = Child.extend({
   computed: {
     lower(): string {
       return this.greeting.toLowerCase()
-    }
-  }
+    },
+  },
 })
 
 new GrandChild().lower.toUpperCase()
@@ -198,11 +198,11 @@ new Vue(options)
 Vue.extend({
   props: {
     bar: {
-      type: String
-    }
+      type: String,
+    },
   },
   methods: {
-    foo() {}
+    foo() {},
   },
   mounted() {
     this.foo()
@@ -211,7 +211,7 @@ Vue.extend({
   render(h): VNode {
     const a = this.bar
     return h('canvas', {}, [a])
-  }
+  },
 })
 
 declare function decorate<VC extends typeof Vue>(v: VC): VC
@@ -228,23 +228,23 @@ obj.a++
 const ComponentWithStyleInVNodeData = Vue.extend({
   render(h) {
     const elementWithStyleAsString = h('div', {
-      style: 'background-color: red;'
+      style: '--theme-color: black;',
     })
 
-    const elementWithStyleAsObject = h('div', {
-      style: { backgroundColor: 'green' }
+    const elementWithStyleCSSProperties = h('div', {
+      style: { ['--theme-color' as any]: 'black' },
     })
 
-    const elementWithStyleAsArrayOfObjects = h('div', {
-      style: [{ backgroundColor: 'blue' }]
+    const elementWithStyleAsArrayOfStyleValues = h('div', {
+      style: [{ ['--theme-color' as any]: 'black' }],
     })
 
     return h('div', undefined, [
       elementWithStyleAsString,
-      elementWithStyleAsObject,
-      elementWithStyleAsArrayOfObjects
+      elementWithStyleCSSProperties,
+      elementWithStyleAsArrayOfStyleValues,
     ])
-  }
+  },
 })
 
 // infer mixin type with new Vue() #12730
@@ -255,31 +255,31 @@ new Vue({
         p1: String,
         p2: {
           type: Number,
-          default: 0
-        }
+          default: 0,
+        },
       },
       data() {
         return {
-          foo: 123
+          foo: 123,
         }
       },
       computed: {
         bar() {
           return 123
-        }
-      }
+        },
+      },
     }),
     {
       methods: {
-        hello(n: number) {}
-      }
-    }
+        hello(n: number) {},
+      },
+    },
   ],
   created() {
     this.hello(this.foo)
     this.hello(this.bar)
     // @ts-expect-error
     this.hello(this.p1)
     this.hello(this.p2)
-  }
+  },
 })

types/vnode.d.ts

@@ -1,3 +1,4 @@
+import { StyleValue } from './jsx'
 import { Vue } from './vue'
 import { DirectiveFunction, DirectiveOptions } from './options'
 
@@ -75,7 +76,7 @@ export interface VNodeData {
   staticClass?: string
   class?: any
   staticStyle?: { [key: string]: any }
-  style?: string | object[] | object
+  style?: StyleValue
   props?: { [key: string]: any }
   attrs?: { [key: string]: any }
   domProps?: { [key: string]: any }