From 95e92412bddaa3175d3c9b022c8f71f65bce55e8 Mon Sep 17 00:00:00 2001 From: k-furusho Date: Sun, 18 Sep 2022 22:18:37 +0900 Subject: [PATCH 1/3] fix(types):fix error fuctional components style type --- types/vnode.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/types/vnode.d.ts b/types/vnode.d.ts index 7a543f0a39b..6b9eebee875 100644 --- a/types/vnode.d.ts +++ b/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 } From f2781750f1ff736957362babe7b5998c55ef6491 Mon Sep 17 00:00:00 2001 From: k-furusho Date: Mon, 19 Sep 2022 00:15:48 +0900 Subject: [PATCH 2/3] [Add]testOfComponentsStyleType --- types/test/vue-test.ts | 74 +++++++++++++++++++++--------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/types/test/vue-test.ts b/types/test/vue-test.ts index b792cec583d..d07a2003c4d 100644 --- a/types/test/vue-test.ts +++ b/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,24 +126,24 @@ 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({ @@ -151,7 +151,7 @@ const FunctionalHelloWorldComponent = Vue.extend({ 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(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,25 +255,25 @@ 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) @@ -281,5 +281,5 @@ new Vue({ // @ts-expect-error this.hello(this.p1) this.hello(this.p2) - } + }, }) From 2591228224feef0a9d32aeb7659cf54f46f1990d Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 9 Nov 2022 04:29:00 -0500 Subject: [PATCH 3/3] Update vue-test.ts --- types/test/vue-test.ts | 68 +++++++++++++++++++++--------------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/types/test/vue-test.ts b/types/test/vue-test.ts index d07a2003c4d..fdf37b52abb 100644 --- a/types/test/vue-test.ts +++ b/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,24 +126,24 @@ 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({ @@ -151,7 +151,7 @@ const FunctionalHelloWorldComponent = Vue.extend({ 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(v: VC): VC @@ -228,23 +228,23 @@ obj.a++ const ComponentWithStyleInVNodeData = Vue.extend({ render(h) { const elementWithStyleAsString = h('div', { - style: '--theme-color: black;', + style: '--theme-color: black;' }) const elementWithStyleCSSProperties = h('div', { - style: { ['--theme-color' as any]: 'black' }, + style: { ['--theme-color' as any]: 'black' } }) const elementWithStyleAsArrayOfStyleValues = h('div', { - style: [{ ['--theme-color' as any]: 'black' }], + style: [{ ['--theme-color' as any]: 'black' }] }) return h('div', undefined, [ elementWithStyleAsString, elementWithStyleCSSProperties, - elementWithStyleAsArrayOfStyleValues, + elementWithStyleAsArrayOfStyleValues ]) - }, + } }) // infer mixin type with new Vue() #12730 @@ -255,25 +255,25 @@ 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) @@ -281,5 +281,5 @@ new Vue({ // @ts-expect-error this.hello(this.p1) this.hello(this.p2) - }, + } })