diff --git a/packages/dts-built-test/src/index.ts b/packages/dts-built-test/src/index.ts index 1cdf6de7214..3fc3efba7f0 100644 --- a/packages/dts-built-test/src/index.ts +++ b/packages/dts-built-test/src/index.ts @@ -1,10 +1,31 @@ -import { defineComponent } from 'vue' +import { type PropType, defineComponent } from 'vue' const _CustomPropsNotErased = defineComponent({ props: {}, setup() {}, }) +export const RegularComponent = defineComponent({ + props: {}, + setup() { + return () => {} + }, +}) + +type MyInterface = + | { + a: string + } + | { b: string } +export const RegularComponentProps = defineComponent({ + props: { + a: Object as () => MyInterface, + b: Object as PropType, + }, + setup(props) { + return () => {} + }, +}) // #8376 export const CustomPropsNotErased = _CustomPropsNotErased as typeof _CustomPropsNotErased & { diff --git a/packages/dts-test/component.test-d.ts b/packages/dts-test/component.test-d.ts index d08eca12a6c..8e2ed1b4243 100644 --- a/packages/dts-test/component.test-d.ts +++ b/packages/dts-test/component.test-d.ts @@ -1,33 +1,30 @@ import { - type Component, + type ComponentData, + type ComponentProps, type ComponentPublicInstance, - type EmitsOptions, + type EmitsToProps, + type ExtractComponentEmitOptions, + type ExtractComponentSlotOptions, type FunctionalComponent, type PropType, type Ref, type SetupContext, - type ShallowUnwrapRef, defineComponent, ref, toRefs, } from 'vue' import { type IsAny, describe, expectAssignable, expectType } from './utils' -declare function extractComponentOptions< - Props, - RawBindings, - Emits extends EmitsOptions | Record, - Slots extends Record, ->( - obj: Component, -): { - props: Props - emits: Emits - slots: Slots - rawBindings: RawBindings - setup: ShallowUnwrapRef +declare function extractComponentOptions(obj: T): { + props: ComponentProps + emits: ExtractComponentEmitOptions + slots: ExtractComponentSlotOptions + + data: ComponentData } +declare function extractComponentProps(obj: T): ComponentProps + describe('object props', () => { interface ExpectedProps { a?: number | undefined @@ -163,6 +160,9 @@ describe('object props', () => { expectType(refs.object) expectType>(true) + // @ts-expect-error should not be any + expectType(props) + return { setupA: 1, setupB: ref(1), @@ -175,7 +175,9 @@ describe('object props', () => { }, }) - const { props, rawBindings, setup } = extractComponentOptions(MyComponent) + const { data } = extractComponentOptions(MyComponent) + + const props = extractComponentProps(MyComponent) // props expectType(props.a) @@ -197,55 +199,30 @@ describe('object props', () => { expectType(props.validated) expectType(props.object) - // raw bindings - expectType(rawBindings.setupA) - expectType>(rawBindings.setupB) - expectType>(rawBindings.setupC.a) - expectType | undefined>(rawBindings.setupD) - - // raw bindings props - expectType(rawBindings.setupProps.a) - expectType(rawBindings.setupProps.b) - expectType(rawBindings.setupProps.e) - expectType(rawBindings.setupProps.bb) - expectType(rawBindings.setupProps.bbb) - expectType(rawBindings.setupProps.cc) - expectType(rawBindings.setupProps.dd) - expectType(rawBindings.setupProps.ee) - expectType(rawBindings.setupProps.ff) - expectType(rawBindings.setupProps.ccc) - expectType(rawBindings.setupProps.ddd) - expectType(rawBindings.setupProps.eee) - expectType(rawBindings.setupProps.fff) - expectType(rawBindings.setupProps.hhh) - expectType(rawBindings.setupProps.ggg) - expectType(rawBindings.setupProps.ffff) - expectType(rawBindings.setupProps.validated) - // setup - expectType(setup.setupA) - expectType(setup.setupB) - expectType>(setup.setupC.a) - expectType(setup.setupD) + expectType(data.setupA) + expectType(data.setupB) + expectType>(data.setupC.a) + expectType(data.setupD) // raw bindings props - expectType(setup.setupProps.a) - expectType(setup.setupProps.b) - expectType(setup.setupProps.e) - expectType(setup.setupProps.bb) - expectType(setup.setupProps.bbb) - expectType(setup.setupProps.cc) - expectType(setup.setupProps.dd) - expectType(setup.setupProps.ee) - expectType(setup.setupProps.ff) - expectType(setup.setupProps.ccc) - expectType(setup.setupProps.ddd) - expectType(setup.setupProps.eee) - expectType(setup.setupProps.fff) - expectType(setup.setupProps.hhh) - expectType(setup.setupProps.ggg) - expectType(setup.setupProps.ffff) - expectType(setup.setupProps.validated) + expectType(data.setupProps.a) + expectType(data.setupProps.b) + expectType(data.setupProps.e) + expectType(data.setupProps.bb) + expectType(data.setupProps.bbb) + expectType(data.setupProps.cc) + expectType(data.setupProps.dd) + expectType(data.setupProps.ee) + expectType(data.setupProps.ff) + expectType(data.setupProps.ccc) + expectType(data.setupProps.ddd) + expectType(data.setupProps.eee) + expectType(data.setupProps.fff) + expectType(data.setupProps.hhh) + expectType(data.setupProps.ggg) + expectType(data.setupProps.ffff) + expectType(data.setupProps.validated) // instance const instance = new MyComponent() @@ -331,8 +308,9 @@ describe('object props', () => { }, } as const - const { props, rawBindings, setup } = extractComponentOptions(MyComponent) + const { data } = extractComponentOptions(MyComponent) + const props = extractComponentProps(MyComponent) // props expectType(props.a) expectType(props.b) @@ -349,15 +327,14 @@ describe('object props', () => { expectType(props.fff) expectType(props.hhh) expectType(props.ggg) - // expectType(props.ffff) // todo fix + expectType(props.ffff) expectType(props.validated) expectType(props.object) - // rawBindings - expectType(rawBindings.setupA) - - //setup - expectType(setup.setupA) + // data + expectType(data.setupA) + // @ts-expect-error not any + expectType(data.setupA) }) }) @@ -372,15 +349,16 @@ describe('array props', () => { }, }) - const { props, rawBindings, setup } = extractComponentOptions(MyComponent) + const { props, data } = extractComponentOptions(MyComponent) // @ts-expect-error props should be readonly props.a = 1 expectType(props.a) expectType(props.b) + // @ts-expect-error should not be any + expectType(props.DoesNotExist) - expectType(rawBindings.c) - expectType(setup.c) + expectType(data.c) }) describe('options', () => { @@ -393,17 +371,17 @@ describe('array props', () => { }, } - const { props, rawBindings, setup } = extractComponentOptions(MyComponent) + const { data } = extractComponentOptions(MyComponent) + + const props = extractComponentProps(MyComponent) // @ts-expect-error props should be readonly props.a = 1 - // TODO infer the correct keys - // expectType(props.a) - // expectType(props.b) + expectType(props.a) + expectType(props.b) - expectType(rawBindings.c) - expectType(setup.c) + expectType(data.c) }) }) @@ -417,10 +395,9 @@ describe('no props', () => { }, }) - const { rawBindings, setup } = extractComponentOptions(MyComponent) + const { data } = extractComponentOptions(MyComponent) - expectType(rawBindings.setupA) - expectType(setup.setupA) + expectType(data.setupA) // instance const instance = new MyComponent() @@ -438,22 +415,20 @@ describe('no props', () => { }, } - const { rawBindings, setup } = extractComponentOptions(MyComponent) + const { data } = extractComponentOptions(MyComponent) - expectType(rawBindings.setupA) - expectType(setup.setupA) + expectType(data.setupA) }) }) describe('functional', () => { - // TODO `props.foo` is `number|undefined` - // describe('defineComponent', () => { - // const MyComponent = defineComponent((props: { foo: number }) => {}) + describe('defineComponent', () => { + const MyComponent = defineComponent((props: { foo: number }) => () => {}) - // const { props } = extractComponentOptions(MyComponent) + const { props } = extractComponentOptions(MyComponent) - // expectType(props.foo) - // }) + expectType(props.foo) + }) describe('function', () => { const MyComponent = (props: { foo: number }) => props.foo @@ -482,6 +457,10 @@ describe('functional', () => { const { props, emits, slots } = extractComponentOptions(MyComponent) expectType(props) + // should contain emits + expectType>(props) + //@ts-expect-error cannot be any + expectType(props) expectType(emits) expectType(slots) }) diff --git a/packages/dts-test/componentInstance.test-d.tsx b/packages/dts-test/componentInstance.test-d.tsx index a804bb10d5d..a42f30f3d66 100644 --- a/packages/dts-test/componentInstance.test-d.tsx +++ b/packages/dts-test/componentInstance.test-d.tsx @@ -7,6 +7,8 @@ import { } from 'vue' import { describe, expectType } from './utils' +declare function getComponentInstance(comp: T): ComponentInstance + describe('defineComponent', () => { const CompSetup = defineComponent({ props: { @@ -18,25 +20,265 @@ describe('defineComponent', () => { } }, }) - const compSetup: ComponentInstance = {} as any + const compSetup = getComponentInstance(CompSetup) expectType(compSetup.test) expectType(compSetup.a) expectType(compSetup) + + describe('ComponentInstance is ComponentPublicInstance', () => { + const EmptyObj = getComponentInstance(defineComponent({})) + expectType(EmptyObj) + //@ts-expect-error not valid + expectType<{ error: true }>(EmptyObj) + + const EmptyPropsObj = getComponentInstance( + defineComponent({ + props: {}, + }), + ) + expectType(EmptyPropsObj) + //@ts-expect-error not valid + expectType<{ error: true }>(EmptyPropsObj) + //@ts-expect-error not valid + expectType<{ a?: any }>(EmptyPropsObj.$props) + + const EmptyArrayPropsObj = getComponentInstance( + defineComponent({ + props: [], + }), + ) + expectType(EmptyArrayPropsObj) + //@ts-expect-error not valid + expectType<{ error: true }>(EmptyArrayPropsObj) + //@ts-expect-error not valid + expectType<{ a?: any }>(EmptyArrayPropsObj.$props) + + const ArrayPropsStringObj = getComponentInstance( + defineComponent({ + props: [] as string[], + }), + ) + expectType(ArrayPropsStringObj) + //@ts-expect-error not valid + expectType<{ error: true }>(ArrayPropsStringObj) + // props could not be resolved + expectType<{ a?: any }>(ArrayPropsStringObj.$props) + + const PropsObject = getComponentInstance( + defineComponent({ + props: { + a: String, + }, + }), + ) + //@ts-expect-error not valid + expectType<{ error: true }>(PropsObject) + expectType(PropsObject) + expectType<{ a?: string | undefined }>(PropsObject.$props) + expectType<{ + a: StringConstructor + }>(PropsObject.$options.props) + //@ts-expect-error not valid + expectType<{ __a?: any }>(PropsObject.$props) + + const PropsArray = getComponentInstance( + defineComponent({ + props: ['a'], + }), + ) + //@ts-expect-error not valid + expectType<{ error: true }>(PropsArray) + + expectType(PropsArray) + expectType<{ a?: any }>(PropsArray.$props) + expectType<'a'[]>(PropsArray.$options.props) + //@ts-expect-error not valid + expectType<{ __a?: any }>(PropsArray.$props) + + const EmitsArray = getComponentInstance( + defineComponent({ + emits: ['a'], + }), + ) + //@ts-expect-error not valid + expectType<{ error: true }>(EmitsArray) + + expectType(EmitsArray) + expectType<(event: 'a', ...args: any[]) => void>(EmitsArray.$emit) + expectType<'a'[]>(EmitsArray.$options.emits) + //@ts-expect-error not valid + expectType<{ __a?: any }>(EmitsArray.$options.emits) + //@ts-expect-error not valid + expectType<{ __a?: any }>(EmitsArray.$emit) + + const EmitsArrayCast = getComponentInstance( + defineComponent({ + emits: ['a'] as ['a'], + }), + ) + //@ts-expect-error not valid + expectType<{ error: true }>(EmitsArrayCast) + + expectType(EmitsArrayCast) + expectType<(event: 'a', ...args: any[]) => void>(EmitsArrayCast.$emit) + expectType<['a']>(EmitsArrayCast.$options.emits) + //@ts-expect-error not valid + expectType<{ __a?: any }>(EmitsArrayCast.$options.emits) + //@ts-expect-error not valid + expectType<{ __a?: any }>(EmitsArrayCast.$emit) + + const EmitsOptions = getComponentInstance( + defineComponent({ + emits: { + foo: (a: string) => true, + }, + }), + ) + + //@ts-expect-error not valid + expectType<{ error: true }>(EmitsOptions) + expectType(EmitsOptions) + + expectType<(event: 'foo', a: string) => void>(EmitsOptions.$emit) + expectType<{ + foo: (a: string) => true + }>(EmitsOptions.$options.emits) + //@ts-expect-error not valid + expectType<{ __a?: any }>(EmitsOptions.$options.emits) + //@ts-expect-error not valid + expectType<{ __a?: any }>(EmitsOptions.$emit) + + // full Component + + const MixinFoo = defineComponent({ + props: { + foo: { type: String, required: true }, + }, + data() { + return { + fooExtra: 'foo', + } + }, + methods: { + fooMethod() { + return true + }, + }, + computed: { + fooComputed() { + return 'fooX' + }, + }, + }) + const MixinBar = defineComponent({ + props: ['bar'], + }) + + const fullComponent = getComponentInstance( + defineComponent({ + props: { + a: String, + }, + mixins: [MixinFoo, MixinBar], + + randomOption: true, + + data() { + return { + b: 1, + } + }, + + setup() { + return { + c: 1, + } + }, + + methods: { + testMethod(r: number) { + return this.bar + r + }, + }, + computed: { + testComputed() { + return `${this.a}:${this.b}` + }, + }, + }), + ) + expectType(fullComponent) + + //@ts-expect-error not valid + expectType<{ error: true }>(fullComponent) + + expectType<{ a?: string | undefined; bar?: any; foo: string }>( + fullComponent.$props, + ) + expectType<{ b: number; fooExtra: string }>(fullComponent.$data) + + //@ts-expect-error not valid + expectType<{ __a?: any }>(fullComponent.$options.props) + //@ts-expect-error not valid + expectType<{ __a?: any }>(fullComponent.$props) + //@ts-expect-error not valid + expectType<{ __a?: any }>(fullComponent.$emit) + + //TODO This should not be valid + expectType<{ __a?: any }>(fullComponent.$options.emits) + + expectType<{ + fooMethod(): boolean + testMethod(r: number): any + + fooComputed: string + testComputed: string + + c: number + b: number + }>(fullComponent) + + expectType<{ + props: { + a: StringConstructor + } + randomOption: boolean + + methods: { + testMethod(r: number): any + } + computed: { + testComputed: any + } + + mixins: Array + + setup: () => { c: number } + }>(fullComponent.$options) + }) }) describe('functional component', () => { // Functional const CompFunctional: FunctionalComponent<{ test?: string }> = {} as any - const compFunctional: ComponentInstance = {} as any + const compFunctional = getComponentInstance(CompFunctional) expectType(compFunctional.test) expectType(compFunctional) const CompFunction: (props: { test?: string }) => any = {} as any - const compFunction: ComponentInstance = {} as any + const compFunction = getComponentInstance(CompFunction) expectType(compFunction.test) expectType(compFunction) + + const CompDefineFunction = defineComponent( + (props: { test?: string }) => () => {}, + ) + const compDefineFunction = getComponentInstance(CompDefineFunction) + + expectType(compDefineFunction.test) + expectType(compDefineFunction) }) describe('options component', () => { @@ -66,6 +308,187 @@ describe('options component', () => { expectType(compOptions.a) expectType<(a: string) => boolean>(compOptions.func) expectType(compOptions) + + describe('ComponentInstance is ComponentPublicInstance', () => { + const EmptyObj = getComponentInstance({}) + expectType(EmptyObj) + //@ts-expect-error not valid + expectType<{ error: true }>(EmptyObj) + + const EmptyPropsObj = getComponentInstance({ + props: {}, + }) + expectType(EmptyPropsObj) + //@ts-expect-error not valid + expectType<{ error: true }>(EmptyPropsObj) + //@ts-expect-error not valid + expectType<{ a?: any }>(EmptyPropsObj.$props) + + const EmptyArrayPropsObj = getComponentInstance({ + props: [], + }) + expectType(EmptyArrayPropsObj) + //@ts-expect-error not valid + expectType<{ error: true }>(EmptyArrayPropsObj) + //@ts-expect-error not valid + expectType<{ a?: any }>(EmptyArrayPropsObj.$props) + + const ArrayPropsStringObj = getComponentInstance({ + props: [] as string[], + }) + expectType(ArrayPropsStringObj) + //@ts-expect-error not valid + expectType<{ error: true }>(ArrayPropsStringObj) + // props could not be resolved + expectType<{ a?: any }>(ArrayPropsStringObj.$props) + + const PropsObject = getComponentInstance({ + props: { + a: String, + }, + }) + //@ts-expect-error not valid + expectType<{ error: true }>(PropsObject) + expectType(PropsObject) + expectType<{ a?: string | undefined }>(PropsObject.$props) + expectType<{ + a: StringConstructor + }>(PropsObject.$options.props) + + const PropsArray = getComponentInstance({ + props: ['a'] as ['a'], + }) + //@ts-expect-error not valid + expectType<{ error: true }>(PropsArray) + + expectType(PropsArray) + expectType<{ a?: any }>(PropsArray.$props) + expectType<'a'[]>(PropsArray.$options.props) + + const EmitsArray = getComponentInstance({ + emits: ['a'] as ['a'], + }) + //@ts-expect-error not valid + expectType<{ error: true }>(EmitsArray) + + expectType(EmitsArray) + expectType<(event: 'a', ...args: any[]) => void>(EmitsArray.$emit) + expectType<'a'[]>(EmitsArray.$options.emits) + + const EmitsArrayCast = getComponentInstance({ + emits: ['a'] as ['a'], + }) + //@ts-expect-error not valid + expectType<{ error: true }>(EmitsArrayCast) + + expectType(EmitsArrayCast) + expectType<(event: 'a', ...args: any[]) => void>(EmitsArrayCast.$emit) + expectType<['a']>(EmitsArrayCast.$options.emits) + + const EmitsOptions = getComponentInstance({ + emits: { + foo: (a: string) => true, + }, + }) + + //@ts-expect-error not valid + expectType<{ error: true }>(EmitsOptions) + expectType(EmitsOptions) + + expectType<(event: 'foo', a: string) => void>(EmitsOptions.$emit) + expectType<{ + foo: (a: string) => true + }>(EmitsOptions.$options.emits) + + // full Component + + const MixinFoo = defineComponent({ + props: { + foo: { type: String, required: true }, + }, + data() { + return { + fooExtra: 'foo', + } + }, + methods: { + fooMethod() { + return true + }, + }, + computed: { + fooComputed() { + return 'fooX' + }, + }, + }) + const MixinBar = defineComponent({ + props: ['bar'], + }) + + const fullComponent = getComponentInstance({ + props: { + a: String, + }, + mixins: [MixinFoo, MixinBar], + + randomOption: true, + + data() { + return { + b: 1, + } + }, + + methods: { + // @ts-expect-error cannot infer this, using `defineComponent` + testMethod(r: number) { + // @ts-expect-error cannot infer this, using `defineComponent` + return this.bar + r + }, + }, + computed: { + // @ts-expect-error cannot infer this, using `defineComponent` + testComputed() { + // @ts-expect-error cannot infer this, using `defineComponent` + return `${this.a}:${this.b}` + }, + }, + }) + expectType(fullComponent) + + //@ts-expect-error not valid + expectType<{ error: true }>(fullComponent) + + expectType<{ a?: string | undefined; bar?: any; foo: string }>( + fullComponent.$props, + ) + expectType<{ b: number; fooExtra: string }>(fullComponent.$data) + + expectType<{ + fooMethod(): boolean + testMethod(r: number): any + + fooComputed: string + testComputed: string + }>(fullComponent) + + expectType<{ + props: { + a: StringConstructor + } + randomOption: boolean + + methods: { + testMethod(r: number): any + } + computed: { + testComputed: any + } + + mixins: Array + }>(fullComponent.$options) + }) }) describe('object no defineComponent', () => { diff --git a/packages/dts-test/componentTypeExtensions.test-d.tsx b/packages/dts-test/componentTypeExtensions.test-d.tsx index 68364191945..a97b834c4ef 100644 --- a/packages/dts-test/componentTypeExtensions.test-d.tsx +++ b/packages/dts-test/componentTypeExtensions.test-d.tsx @@ -1,5 +1,6 @@ -import { defineComponent } from 'vue' +import { type DeclareComponent, defineComponent } from 'vue' import { expectType } from './utils' +import type { SlotsType } from 'vue' declare module 'vue' { interface ComponentCustomOptions { @@ -61,3 +62,30 @@ expectType() ; // @ts-expect-error ; + +type ErrorLevel = 'debug' | 'warning' | 'error' + +declare function ErrorComponent(options: T): T & + DeclareComponent<{ + new (): { + $props: { type: T } & { + [K in `on${Capitalize}`]: (msg: string) => void + } + $slots: SlotsType any[]>> + } + }> + +const Comp = ErrorComponent( + defineComponent({ + props: { + type: { + type: String as () => ErrorLevel, + default: 'debug', + }, + }, + emits: ['debug', 'warning', 'error'], + }), +) +; {}} /> +// @ts-expect-error onError is not there +; {}} /> diff --git a/packages/dts-test/componentTypeHelpers.test-d.tsx b/packages/dts-test/componentTypeHelpers.test-d.tsx new file mode 100644 index 00000000000..c1801e83b6a --- /dev/null +++ b/packages/dts-test/componentTypeHelpers.test-d.tsx @@ -0,0 +1,1547 @@ +import { describe, expectType } from './utils' + +import { + Component, + type ComponentData, + type ComponentEmits, + type ComponentExpectedProps, + type ComponentInstance, + type ComponentProps, + type ComponentPublicInstance, + type ComponentSlots, + type DeclareComponent, + type DeclareEmits, + type DynamicComponent, + type ExtractComponentOptions, + type FunctionalComponent, + type ObjectToComponentProps, + type PropType, + type SetupContext, + type SlotsType, + defineAsyncComponent, + defineComponent, + defineProps, +} from 'vue' + +const propsOptions = { + props: { + a: String, + b: Boolean, + + bb: { + type: Boolean, + required: true as true, + }, + }, + slots: { + default(arg: { msg: string }) {}, + }, + foo: 'bar', + emits: { + a: (arg: string) => arg === 'foo', + b: (arg: number) => arg === 1, + }, + data() { + return { + test: 1, + } + }, +} + +const arrayOptions = { + // preventing from set as readonly otherwise it breaks typing + props: ['a', 'b', 'c'] as ['a', 'b', 'c'], + slots: { + default(arg: { msg: string }) {}, + }, + foo: 'bar', + emits: { + a: (arg: string) => arg === 'foo', + b: (arg: number) => arg === 1, + }, + data() { + return { + testA: 1, + } + }, +} + +const noPropsOptions = { + slots: { + default(arg: { msg: string }) {}, + }, + foo: 'bar', + emits: { + a: (arg: string) => arg === 'foo', + b: (arg: number) => arg === 1, + }, + data() { + return { + testN: 1, + } + }, +} + +const fakeClassComponent = {} as { + new (): { + $props: { a: string } + + $slots: { + default: (arg: { msg: string }) => any + } + + $emits: ((event: 'a', arg: string) => void) & + ((event: 'b', arg: number) => void) + + someMethod: (a: number) => void + foo: number + + data(): { test: number } + } +} + +const functionalComponent = + ( + props: { a: string }, + ctx: SetupContext< + { + a: (arg: string) => true + b: (arg: number) => true + }, + SlotsType<{ + foo: (arg: { bar: string }) => any + }> + >, + ) => + () => {} + +describe('Extract Component Options', () => { + describe('defineComponent', () => { + // Component with props + const CompProps = defineComponent(propsOptions) + expectType>(propsOptions) + // @ts-expect-error checking if is not any + expectType>({ bar: 'foo' }) + + // component array props + const CompPropsArray = defineComponent(arrayOptions) + expectType>(arrayOptions) + // @ts-expect-error checking if is not any + expectType>({ bar: 'foo' }) + + // component no props + const CompNoProps = defineComponent(noPropsOptions) + expectType>(noPropsOptions) + // @ts-expect-error checking if is not any + expectType>({ bar: 'foo' }) + + const Mixins = defineComponent({ + props: ['a1'], + mixins: [propsOptions, arrayOptions, noPropsOptions], + }) + + expectType>({ + props: ['a1'], + mixins: [propsOptions, arrayOptions, noPropsOptions], + }) + // @ts-expect-error checking if is not any + expectType>({ bar: 'foo' }) + }) + + describe('options object', () => { + // Component with props + expectType>(propsOptions) + // @ts-expect-error checking if is not any + expectType>({ bar: 'foo' }) + + // component array props + expectType>(arrayOptions) + // @ts-expect-error checking if is not any + expectType>({ bar: 'foo' }) + + // component no props + expectType>(noPropsOptions) + // @ts-expect-error checking if is not any + expectType>({ bar: 'foo' }) + }) + + describe('class component', () => { + expectType>( + fakeClassComponent, + ) + }) +}) + +describe('Component Props', () => { + describe('defineComponent', () => { + // Component with props + const CompProps = defineComponent(propsOptions) + expectType<{ + readonly a?: string | undefined + readonly b: boolean | undefined + readonly bb: boolean + }>({} as ComponentProps) + // @ts-expect-error checking if is not any + expectType<{ bar: string }>({} as ComponentProps) + + // component array props + const CompPropsArray = defineComponent(arrayOptions) + // aX + expectType<{ + readonly a?: any + readonly b?: any + readonly c?: any + }>({} as ComponentProps) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>({} as ComponentProps) + + // component no props + const CompNoProps = defineComponent(noPropsOptions) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>({} as ComponentProps) + + const mixin = defineComponent({ + props: ['a1'], + mixins: [CompProps, CompPropsArray, CompNoProps], + + setup(props) { + props.a, props.a1 + props.bb + }, + }) + + expectType<{ + a1?: any + a?: any + b?: any + c?: any + bb: boolean + }>({} as ComponentProps) + }) + + describe('async component', () => { + const Component = defineAsyncComponent({ + loader: () => + Promise.resolve( + defineComponent({ + props: { + foo: String, + }, + }), + ), + }) + + expectType<{ + foo?: string | undefined + }>({} as ComponentProps) + }) + + describe('options object', () => { + expectType<{ + readonly a?: string | undefined + readonly b: boolean | undefined + readonly bb: boolean + }>({} as ComponentProps) + // @ts-expect-error checking if is not any + expectType<{ bar: string }>({} as ComponentProps) + + // component array props + expectType<{ + readonly a?: any + readonly b?: any + readonly c?: any + }>({} as ComponentProps) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>({} as ComponentProps) + + // component no props + expectType<{}>({} as ComponentProps) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>({} as ComponentProps) + + const mixin = { + props: ['a1'] as ['a1'], + // casting cost to keep the types + mixins: [propsOptions, arrayOptions, noPropsOptions] as const, + } + expectType<{ + a1?: any + a?: any + b?: any + c?: any + bb: boolean + }>({} as ComponentProps) + }) + + describe('class component', () => { + const props = {} as ComponentProps + expectType<{ a: string }>(props) + // @ts-expect-error not any + expectType(props) + }) + + describe('functional', () => { + const props = {} as ComponentProps + expectType<{ a: string }>(props) + // @ts-expect-error not any + expectType(props) + }) + describe('functional typed', () => { + const props = {} as ComponentProps< + FunctionalComponent<{ a: string }, {}, {}> + > + expectType<{ a: string }>(props) + // @ts-expect-error not any + expectType(props) + }) + + describe('declare component', () => { + { + const __options = defineComponent({ + props: { + foo: String, + getFn: Function, + }, + }) + + const DeclaredComp = {} as DeclareComponent< + { + foo: string + getFn: (a: string) => void + }, + {}, + {}, + {}, + typeof __options + > + const props = {} as ComponentProps + + expectType<{ foo: string | undefined; getFn: (a: string) => void }>(props) + + expectType<((a: string) => void) | undefined>(props.getFn) + + // @ts-expect-error not function + expectType<(() => void) | undefined>(props.getFn) + + // @ts-expect-error not any + expect<{ random: string }>(props) + } + + { + // usage with defineProps + const props = defineProps(['foo', 'bar']) + + const __options = defineComponent({ + props: ['foo', 'bar'], + setup() { + return () => {} + }, + }) + + const Comp = {} as DeclareComponent< + typeof props, + {}, + {}, + {}, + typeof __options + > + + const p = {} as ComponentProps + + expectType<{ + foo?: any + bar?: any + }>(p) + + // @ts-expect-error not any + expectType<{ random: any }>(p) + + expectType>(Comp.props) + } + { + // generic + const __options = defineComponent({ + props: { + item: null, + getFn: Function, + }, + }) + + const Comp = {} as DeclareComponent< + { + new (): { + $props: { + item: T + getFn: (a: T) => void + } + } + }, + {}, + {}, + {}, + typeof __options + > + + const props = {} as ComponentProps + + expectType<{ + item: unknown + getFn: (a: unknown) => void + }>(props) + + // @ts-expect-error not any + expectType(props.test) + } + }) +}) + +describe('Component Emits', () => { + describe('string array', () => { + const emitArray = { + emits: ['a', 'b'] as ['a', 'b'], + } + expectType< + ((event: 'a', arg: string) => void) & ((event: 'b', arg: number) => void) + >({} as ComponentEmits) + // @ts-expect-error not empty function + expectType<() => void>({} as ComponentEmits) + + const constEmitArray = { + emits: ['a', 'b'] as const, + } + expectType< + ((event: 'a', arg: string) => void) & ((event: 'b', arg: number) => void) + >({} as ComponentEmits) + // @ts-expect-error not empty function + expectType<() => void>({} as ComponentEmits) + }) + + describe('defineComponent', () => { + // Component with props + const CompProps = defineComponent(propsOptions) + expectType< + ((event: 'a', arg: string) => void) & ((event: 'b', arg: number) => void) + >({} as ComponentEmits) + // @ts-expect-error checking if is not any + expectType<() => void>({} as ComponentEmits) + + // component array props + const CompPropsArray = defineComponent(arrayOptions) + expectType< + ((event: 'a', arg: string) => void) & ((event: 'b', arg: number) => void) + >({} as ComponentEmits) + // @ts-expect-error checking if is not any + expectType<() => void>({} as ComponentEmits) + + // component no props + const CompNoProps = defineComponent(noPropsOptions) + expectType< + ((event: 'a', arg: string) => void) & ((event: 'b', arg: number) => void) + >({} as ComponentEmits) + // @ts-expect-error checking if is not any + expectType<() => void>({} as ComponentEmits) + + // with SlotsTyped + const CompSlotsTyped = defineComponent({ + slots: {} as SlotsType<{ + default: (arg: { msg: string }) => any + }>, + + emits: { + foo: (arg: string) => true, + }, + }) + + expectType<(event: 'foo', arg: string) => void>( + {} as ComponentEmits, + ) + // @ts-expect-error checking if is not any or emtpy + expectType<() => void>({} as ComponentEmits) + }) + + describe('async component', () => { + const Component = defineAsyncComponent({ + loader: () => + Promise.resolve( + defineComponent({ + emits: { + a: (arg: string) => arg === 'foo', + }, + }), + ), + }) + + expectType<(event: 'a', arg: string) => void>( + {} as ComponentEmits, + ) + + // @ts-expect-error checking if is not any + expectType<() => void>({} as ComponentEmits) + // @ts-expect-error checking if is not any + expectType<{ bar: string }>({} as ComponentEmits) + }) + + describe('options object', () => { + expectType< + ((event: 'a', arg: string) => void) & ((event: 'b', arg: number) => void) + >({} as ComponentEmits) + // @ts-expect-error checking if is not any + expectType<{ bar: string }>({} as ComponentEmits) + + // component array props + expectType< + ((event: 'a', arg: string) => void) & ((event: 'b', arg: number) => void) + >({} as ComponentEmits) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>({} as ComponentEmits) + + // component no props + expectType<{}>({} as ComponentEmits) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>({} as ComponentEmits) + }) + + describe('functional', () => { + const emits = {} as ComponentEmits + expectType< + ((event: 'a', arg: string) => void) & ((event: 'b', arg: number) => void) + >(emits) + // @ts-expect-error not empty function + expectType<() => void>(emits) + // @ts-expect-error not any + expectType(emits) + }) + describe('functional typed', () => { + const emits = {} as ComponentEmits< + FunctionalComponent< + { a: string }, + { + a: (arg: string) => true + b: (arg: number) => true + }, + {} + > + > + expectType< + ((event: 'a', arg: string) => void) & ((event: 'b', arg: number) => void) + >(emits) + // @ts-expect-error not empty function + expectType<() => void>(emits) + // @ts-expect-error not any + expectType(emits) + }) + + describe('declare component', () => { + { + // string[] + const Component = defineComponent({ + emits: ['foo'], + }) + + const DeclaredComp = {} as DeclareComponent< + {}, + {}, + ['foo'], + {}, + typeof Component + > + expectType<(event: 'foo', ...args: any[]) => void>( + {} as ComponentEmits, + ) + // @ts-expect-error not empty function + expectType<() => void>({} as ComponentEmits) + } + + { + // Options + const Component = defineComponent({ + emits: ['foo'], + }) + + const DeclaredComp = {} as DeclareComponent< + {}, + {}, + { + foo: (arg: string) => true + }, + {}, + typeof Component + > + expectType<(event: 'foo', arg: string) => void>( + {} as ComponentEmits, + ) + expectType<(event: 'foo', arg: number) => void>( + // @ts-expect-error arguments are correct + {} as ComponentEmits, + ) + // @ts-expect-error not empty function + expectType<() => void>({} as ComponentEmits) + } + + { + // short Options + const Component = defineComponent({ + emits: ['foo'], + }) + + const DeclaredComp = {} as DeclareComponent< + {}, + {}, + { + foo: [string] + }, + {}, + typeof Component + > + expectType<(event: 'foo', arg: string) => void>( + {} as ComponentEmits, + ) + expectType<(event: 'foo', arg: number) => void>( + // @ts-expect-error arguments are correct + {} as ComponentEmits, + ) + // @ts-expect-error not empty function + expectType<() => void>({} as ComponentEmits) + } + + { + // bypass with function + const Component = defineComponent({ + props: { + foo: String, + }, + emits: ['foo'], + }) + + const DeclaredComp = {} as DeclareComponent< + { + foo: string + }, + {}, + { + (event: 'foo', arg: string): void + }, + {}, + typeof Component + > + expectType<(event: 'foo', arg: string) => void>( + {} as ComponentEmits, + ) + expectType<(event: 'foo', arg: number) => void>( + // @ts-expect-error arguments are correct + {} as ComponentEmits, + ) + // @ts-expect-error not empty function + expectType<() => void>({} as ComponentEmits) + } + }) +}) + +declare function getOptionalProps(o: T): ComponentExpectedProps +describe('ComponentPropsWithDefaultOptional', () => { + describe('defineComponent', () => { + // Component with props + const CompProps = defineComponent(propsOptions) + const compProps = getOptionalProps(CompProps) + expectType<{ + a?: string | undefined + b?: boolean | undefined + bb: boolean + }>(compProps) + + // @ts-expect-error checking if is not any + expectType<{ random: true }>(compProps) + + // component array props + const CompPropsArray = defineComponent(arrayOptions) + const compPropsArray = getOptionalProps(CompPropsArray) + expectType<{ + a?: any + b?: any + c?: any + }>(compPropsArray) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(compPropsArray) + + // component no props + const CompNoProps = defineComponent(noPropsOptions) + const compNoProps = getOptionalProps(CompNoProps) + expectType<{}>(compNoProps) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(compNoProps) + + const Mixin = defineComponent({ + props: ['a1'], + mixins: [CompProps, CompPropsArray, CompNoProps], + + setup(props) { + props.a, props.a1 + props.bb + }, + }) + const mixin = getOptionalProps(Mixin) + expectType<{ + a1?: any + a?: any + b?: any + c?: any + bb: boolean + }>(mixin) + // @ts-expect-error checking if is not any + expectType<{ random: true }>(mixin) + }) + + describe('async component', () => { + const Component = defineAsyncComponent({ + loader: () => + Promise.resolve( + defineComponent({ + props: { + foo: String, + }, + }), + ), + }) + const component = getOptionalProps(Component) + + expectType<{ + foo?: string | undefined + }>(component) + }) + + describe('options object', () => { + const options = getOptionalProps(propsOptions) + + expectType<{ + a?: string | undefined + b?: boolean | undefined + bb: boolean + }>(options) + // @ts-expect-error checking if is not any + expectType<{ bar: string }>(options) + + // component array props + + const array = getOptionalProps(arrayOptions) + expectType<{ + a?: any + b?: any + c?: any + }>(array) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(array) + + // component no props + const noProps = getOptionalProps(noPropsOptions) + expectType<{}>(noProps) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(noProps) + + const mixin = getOptionalProps({ + props: ['a1'] as ['a1'], + // using defineComponent, otherwise is not guaranteed to work + mixins: [ + defineComponent(propsOptions), + defineComponent(arrayOptions), + defineComponent(noPropsOptions), + ], + }) + expectType<{ + a1?: any + a?: any + b?: any + c?: any + bb: boolean + }>(mixin) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(mixin) + }) + + describe('class component', () => { + const cc = getOptionalProps(fakeClassComponent) + expectType<{ a: string }>(cc) + + // @ts-expect-error checking if is not any + expectType<{ random: number }>(cc) + }) + + describe('functional component', () => { + const fc = getOptionalProps(functionalComponent) + expectType<{ a: string }>(fc) + // @ts-expect-error checking if is not any + expectType<{ random: number }>(fc) + }) +}) + +declare function getData(o: T): ComponentData +describe('ComponentData', () => { + describe('defineComponent', () => { + // Component with props + const CompProps = defineComponent(propsOptions) + const compProps = getData(CompProps) + expectType<{ test: number }>(compProps) + + // @ts-expect-error checking if is not any + expectType<{ random: true }>(compProps) + + // component array props + const CompPropsArray = defineComponent(arrayOptions) + const compPropsArray = getData(CompPropsArray) + expectType<{ testA: number }>(compPropsArray) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(compPropsArray) + + // component no props + const CompNoProps = defineComponent(noPropsOptions) + const compNoProps = getData(CompNoProps) + expectType<{ + testN: number + }>(compNoProps) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(compNoProps) + + const Mixin = defineComponent({ + props: ['a1'], + mixins: [CompProps, CompPropsArray, CompNoProps], + + setup(props) { + props.a, props.a1 + props.bb + }, + }) + const mixin = getData(Mixin) + expectType<{ + test: number + testA: number + testN: number + }>(mixin) + // @ts-expect-error checking if is not any + expectType<{ random: true }>(mixin) + }) + + describe('async component', () => { + const Component = defineAsyncComponent({ + loader: () => + Promise.resolve( + defineComponent({ + data() { + return { + foo: 'foo', + } + }, + }), + ), + }) + const component = getData(Component) + expectType<{ + foo?: string + }>(component) + }) + + describe('options object', () => { + const options = getData(propsOptions) + + expectType<{ test: number }>(options) + // @ts-expect-error checking if is not any + expectType<{ bar: string }>(options) + + // component array props + + const array = getData(arrayOptions) + expectType<{ testA: number }>(array) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(array) + + // component no props + const noProps = getData(noPropsOptions) + expectType<{ + testN: number + }>(noProps) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(noProps) + + const mixin = getData({ + props: ['a1'] as ['a1'], + // using defineComponent, otherwise is not guaranteed to work + mixins: [ + defineComponent(propsOptions), + defineComponent(arrayOptions), + defineComponent(noPropsOptions), + ], + }) + expectType<{ test: number; testA: number; testN: number }>(mixin) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(mixin) + }) + + describe('class component', () => { + const cc = getData(fakeClassComponent) + expectType<{ test: number }>(cc) + + // @ts-expect-error checking if is not any + expectType<{ random: number }>(cc) + }) + + describe('functional component', () => { + const fc = getData(functionalComponent) + expectType<{}>(fc) + // @ts-expect-error checking if is not any + expectType<{ random: number }>(fc) + }) + + describe('complex cases', () => { + const setup = getData( + defineComponent({ + setup() { + return { + a: 1, + } + }, + }), + ) + expectType<{ a: number }>(setup) + // @ts-expect-error + expectType<{ a: string }>(setup) + + const dataSetup = getData( + defineComponent({ + data: () => ({ a: 1 }), + setup() { + return { + b: 1, + } + }, + }), + ) + expectType<{ a: number; b: number }>(dataSetup) + // @ts-expect-error + expectType<{ a: string }>(dataSetup) + + const setupOverride = getData( + defineComponent({ + data: () => ({ foo: 1 }), + + setup() { + return { + foo: '1', + } + }, + }), + ) + expectType<{ foo: string }>(setupOverride) + // @ts-expect-error + expectType<{ foo: number }>(setupOverride) + + const mixin = getData( + defineComponent({ + mixins: [ + defineComponent(propsOptions), + defineComponent(arrayOptions), + defineComponent(noPropsOptions), + ], + }), + ) + + expectType<{ + test: number + testN: number + testA: number + }>(mixin) + // @ts-expect-error + expectType<{ test: 'string' }>(mixin) + + const mixinData = getData({ + mixins: [ + defineComponent(propsOptions), + defineComponent(arrayOptions), + defineComponent(noPropsOptions), + ], + data() { + return { foo: 1 } + }, + }) + expectType<{ + test: number + testN: number + testA: number + foo: number + }>(mixinData) + // @ts-expect-error + expectType<{ test: string }>(mixinData) + + const mixinDataOverride = getData({ + mixins: [ + defineComponent(propsOptions), + defineComponent(arrayOptions), + defineComponent(noPropsOptions), + ], + data() { + return { test: 'string' } + }, + }) + expectType<{ + test: string + testN: number + testA: number + }>(mixinDataOverride) + // @ts-expect-error + expectType<{ test: number }>(mixinDataOverride) + + const mixinSetup = getData({ + mixins: [ + defineComponent(propsOptions), + defineComponent(arrayOptions), + defineComponent(noPropsOptions), + ], + setup() { + return { foo: 1 } + }, + }) + expectType<{ + test: number + testN: number + testA: number + foo: number + }>(mixinSetup) + // @ts-expect-error + expectType<{ test: string }>(mixinSetup) + + const mixinSetupOverride = getData({ + mixins: [ + defineComponent(propsOptions), + defineComponent(arrayOptions), + defineComponent(noPropsOptions), + ], + setup() { + return { test: 'string' } + }, + }) + + expectType<{ + test: string + testN: number + testA: number + }>(mixinSetupOverride) + // @ts-expect-error + expectType<{ test: number }>(mixinSetupOverride) + + const mixinOverride = getData({ + mixins: [ + defineComponent(propsOptions), + defineComponent(arrayOptions), + defineComponent(noPropsOptions), + ], + setup() { + return { test: 'string' } + }, + data() { + return { test: { a: 1 } } + }, + }) + + expectType<{ + test: string + testN: number + testA: number + }>(mixinOverride) + // @ts-expect-error + expectType<{ test: number }>(mixinOverride) + + const extend = getData( + defineComponent({ + extends: defineComponent(propsOptions), + data() { + return { foo: 1 } + }, + }), + ) + expectType<{ + test: number + foo: number + }>(extend) + // @ts-expect-error + expectType<{ test: string }>(extend) + }) +}) + +declare function getSlots(o: T): ComponentSlots +describe('ComponentSlots', () => { + describe('defineComponent', () => { + // Component with props + const CompProps = defineComponent(propsOptions) + const compProps = getSlots(CompProps) + + expectType<{ + default: (arg: { msg: string }) => any + }>(compProps) + + // @ts-expect-error checking if is not any + expectType<{ default: true }>(compProps) + + // component array props + const CompPropsArray = defineComponent(arrayOptions) + const compPropsArray = getSlots(CompPropsArray) + expectType<{ + default: (arg: { msg: string }) => any + }>(compPropsArray) + // @ts-expect-error checking if is not any + expectType<{ default: true }>(compPropsArray) + + // component no props + const CompNoProps = defineComponent(noPropsOptions) + const compNoProps = getSlots(CompNoProps) + expectType<{}>(compNoProps) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(compNoProps) + + const Mixin = defineComponent({ + props: ['a1'], + mixins: [CompProps, CompPropsArray, CompNoProps], + + slots: {} as SlotsType<{ + default: (arg: { test: number }) => any + test: { foo: string } + }>, + + setup(props) { + props.a, props.a1 + props.bb + }, + }) + const mixin = getSlots(Mixin) + expectType<{ + default: (arg: { test: number }) => any + test: (arg: { foo: string }) => any + }>(mixin) + // @ts-expect-error checking if is not any + expectType<{ random: true }>(mixin) + + // slotType + + const slotType = getSlots( + defineComponent({ + slots: {} as SlotsType<{ + default: { foo: number } + test: { bar?: string } + }>, + }), + ) + + expectType<{ + default: (arg: { foo: number }) => any + test: (arg: { bar?: string }) => any + }>(slotType) + + // object based slots + + const objSlots = getSlots( + defineComponent({ + slots: { + test: {} as { a: number }, + }, + }), + ) + + expectType<{ + test: (arg: { a: number }) => any + }>(objSlots) + + expectType<{ + test: (arg: number) => any + // @ts-expect-error not any + }>(objSlots) + }) + + describe('async component', () => { + const Component = defineAsyncComponent({ + loader: () => + Promise.resolve( + defineComponent({ + slots: {} as SlotsType<{ + test: { foo: number } + }>, + }), + ), + }) + const component = getSlots(Component) + expectType<{ + test: (arg: { foo: number }) => any + }>(component) + }) + + describe('options object', () => { + const options = getSlots(propsOptions) + + expectType<{ default: (arg: { msg: string }) => any }>(options) + // @ts-expect-error checking if is not any + expectType<{ bar: string }>(options) + + // component array props + + const array = getSlots(arrayOptions) + expectType<{ + default: (arg: { msg: string }) => any + }>(array) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(array) + + // component no props + const noProps = getSlots(noPropsOptions) + expectType<{}>(noProps) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(noProps) + + const mixin = getSlots({ + props: ['a1'] as ['a1'], + // using defineComponent, otherwise is not guaranteed to work + mixins: [ + defineComponent(propsOptions), + defineComponent(arrayOptions), + defineComponent(noPropsOptions), + ], + slots: {} as SlotsType<{ + default: (arg: { test: number }) => any + test: { foo: string } + }>, + }) + expectType<{ + default: (arg: { test: number }) => any + test: (arg: { foo: string }) => any + }>(mixin) + // @ts-expect-error checking if is not any + expectType<{ bar: 'foo' }>(mixin) + + // slotType + + const slotType = getSlots({ + slots: {} as SlotsType<{ + default: { foo: number } + test: { bar?: string } + }>, + }) + + expectType<{ + default: (arg: { foo: number }) => any + test: (arg: { bar?: string }) => any + }>(slotType) + + // object based slots + + const objSlots = getSlots({ + slots: { + test: {} as { a: number }, + }, + }) + + expectType<{ + test: (arg: { a: number }) => any + }>(objSlots) + + expectType<{ + test: (arg: number) => any + // @ts-expect-error not any + }>(objSlots) + }) + + describe('class component', () => { + const cc = getSlots(fakeClassComponent) + expectType<{ default: (arg: { msg: string }) => any }>(cc) + + // @ts-expect-error checking if is not any + expectType<{ random: number }>(cc) + + // Volar + const volar = getSlots( + {} as { + new (): { + $slots: { + default?(_: {}): any + named?(_: {}): any + withDefault?(_: {}): any + scoped?(_: { aBoolean: any; aString: any; anObject: any }): any + insideTable?(_: {}): any + scopedWithDefault?(_: { + aBoolean: any + aString: any + anObject: any + }): any + } + } + }, + ) + + expectType<{ + default?(_: {}): any + named?(_: {}): any + withDefault?(_: {}): any + scoped?(_: { aBoolean: any; aString: any; anObject: any }): any + insideTable?(_: {}): any + scopedWithDefault?(_: { aBoolean: any; aString: any; anObject: any }): any + }>(volar) + }) + + describe('functional component', () => { + const fc = getSlots(functionalComponent) + expectType<{ foo: (arg: { bar: string }) => any }>(fc) + // @ts-expect-error checking if is not any + expectType<{ random: number }>(fc) + }) + + describe('declare component', () => { + const __options = defineComponent({}) + + const DeclaredComp = {} as DeclareComponent< + {}, + {}, + {}, + SlotsType<{ + default: (arg: { foo: string }) => any + test: (arg: { bar: string }) => any + }>, + typeof __options + > + + const slots = getSlots(DeclaredComp) + expectType<{ + default: (arg: { foo: string }) => any + test: (arg: { bar: string }) => any + }>(slots) + }) +}) + +describe('DeclareComponent', () => { + const __options = defineComponent({ + props: { + test: String, + }, + }) + const CompProps = {} as DeclareComponent< + { test: string | undefined }, + {}, + {}, + {}, + typeof __options + > + + expectType(CompProps.props.test) + + // @ts-expect-error not any + expectType<{ a: 1 }>(CompProps.$props.test) + + const GenericCompDeclaration = defineComponent({ + props: { + test: { + type: String, + required: true, + }, + }, + }) as DeclareComponent< + { + new (): { + $props: { + test: T + } + } + }, + any, + any, + any, + // props need to be passed to generate the correct type + // otherwise the original type information might be lost + { + props: { + test: { + type: StringConstructor + required: true + } + } + } + > + + expectType<{ + type: PropType + required: true + }>(GenericCompDeclaration.props.test) + + const GenericComp = new GenericCompDeclaration<'bar'>() + expectType<'bar'>(GenericComp.$props.test) + + // @ts-expect-error not any + expectType<{ a: 1 }>(GenericComp.$props.test) + + describe('Full Generic example', () => { + const Comp = defineComponent({ + props: { + multiple: Boolean, + modelValue: { + type: null, + required: true, + }, + options: { + type: Array, + required: true, + }, + }, + }) as unknown as DeclareComponent<{ + new (): { + $props: { + multiple?: Multiple + modelValue: Multiple extends true ? Array : TOption + options: Array<{ label: string; value: TOption }> + } + } + }> + + ; + // @ts-expect-error not right value + ; + ; + // @ts-expect-error not right value + ; + }) +}) + +describe('DeclareEmits', () => { + { + // empty object + const emit = {} as DeclareEmits<{}> + expectType<{ (event: never, ...args: any[]): void }>(emit) + + // @ts-expect-error not any + expectType<{ (event: 'random', ...args: any[]): void }>(emit) + } + { + // array + const emit = {} as DeclareEmits<['foo', 'bar']> + expectType<{ (event: 'foo' | 'bar', ...args: any[]): void }>(emit) + // @ts-expect-error not any + expectType<{ (event: 'random', ...args: any[]): void }>(emit) + } + { + // options + const emit = {} as DeclareEmits<{ + foo: (arg: number) => true + bar: (arg: string, other: number) => true + }> + expectType<{ + (event: 'foo', arg: number): void + (event: 'bar', arg: string, other: number): void + }>(emit) + + // @ts-expect-error not any + expectType<{ (event: 'random', ...args: any[]): void }>(emit) + } + { + // short options + const emit = {} as DeclareEmits<{ foo: [number]; bar: [string, number] }> + expectType<{ + (event: 'foo', args_0: number): void + (event: 'bar', args_0: string, args_1: number): void + }>(emit) + + // @ts-expect-error not any + expectType<{ (event: 'random', ...args: any[]): void }>(emit) + } + { + // emit function + const emit = {} as DeclareEmits<{ + (event: 'foo', arg: number): void + (event: 'bar', test: string): void + }> + expectType<{ + (event: 'foo', arg: number): void + (event: 'bar', test: string): void + }>(emit) + // @ts-expect-error not any + expectType<{ (event: 'random', ...args: any[]): void }>(emit) + } +}) + +// ObjectToComponentProps +describe('ObjectToComponentProps', () => { + // PASSING RAW PROPS is not supported and should be causing error! + // { + // // prop options + // const props = { + // foo: String, + // bar: { + // type: String, + // default: 'bar', + // }, + // } + // const s = {} as ObjectToComponentProps + + // expectType<{ + // foo: StringConstructor + // bar: { + // type: StringConstructor + // default: string + // } + // }>(s) + // // @ts-expect-error not any + // expectType<{ bar: string }>(s) + // } + { + // array props + const props = ['foo', 'bar'] as const + const s = {} as ObjectToComponentProps + + expectType(s) + // @ts-expect-error not any + expectType<{ bar: string }>(s) + } + + { + // types + const s = {} as ObjectToComponentProps<{ + foo?: string + bar: string + }> + + expectType<{ + foo: { + type: PropType + required: false + } + bar: { + type: PropType + required: true + } + }>(s) + // @ts-expect-error not any + expectType<{ bar: string }>(s) + } +}) + +// Component Instance + +declare function retrieveComponentInstance( + component: T, +): ComponentInstance + +expectType( + retrieveComponentInstance(defineComponent({})), +) + +expectType( + retrieveComponentInstance( + defineComponent({ + props: { + a: String, + }, + }), + ), +) + +declare const Component: DynamicComponent + +const MyComp = defineComponent({ + props: { + test: String, + }, +}) +; +// @ts-expect-error test should be string +; +; +; diff --git a/packages/dts-test/defineAsyncComponent.test-d.tsx b/packages/dts-test/defineAsyncComponent.test-d.tsx new file mode 100644 index 00000000000..76cf34a61ed --- /dev/null +++ b/packages/dts-test/defineAsyncComponent.test-d.tsx @@ -0,0 +1,56 @@ +import { + type AsyncComponentLoader, + defineAsyncComponent, + defineComponent, +} from 'vue' +import { describe, expectType } from './utils' + +describe('defineAsyncComponent', () => { + const Comp = defineAsyncComponent(async () => ({ + props: { n: Number }, + myProp: 'foo', + setup(props) { + expectType(props.n) + + // @ts-expect-error not any + expectType(props.n) + + return { + foo: 'foo', + } + }, + })) + + // @ts-expect-error should not be part of the type + Comp.props + // @ts-expect-error should not be part of the type + Comp.myProp + + // @ts-expect-error should not be an array + Comp.__asyncResolved.props.at + + expectType<{ n: NumberConstructor }>(Comp.__asyncResolved!.props) + expectType(Comp.__asyncResolved!.myProp) + + expectType<'AsyncComponentWrapper'>(Comp.name) + ; + // @ts-expect-error invalid prop type + ; + + expectType(new Comp().foo) + + expectType(new Comp().$props.n) + expectType(new Comp().n) +}) + +describe('with component', () => { + const Comp = defineComponent({ + props: ['a'], + foo: 'foo', + }) + + const AsyncComp = defineAsyncComponent(async () => Comp) + + expectType(AsyncComp.__asyncResolved!) + expectType>(AsyncComp.__asyncLoader) +}) diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx index 41646751b8b..5243ab96332 100644 --- a/packages/dts-test/defineComponent.test-d.tsx +++ b/packages/dts-test/defineComponent.test-d.tsx @@ -293,17 +293,17 @@ describe('with object props', () => { />, ) - expectType( - ({ a: 'eee' })} - fff={(a, b) => ({ a: a > +b })} - hhh={false} - jjj={() => ''} - />, - ) + // expectType( + // ({ a: 'eee' })} + // fff={(a, b) => ({ a: a > +b })} + // hhh={false} + // jjj={() => ''} + // />, + // ) // @ts-expect-error missing required props let c = @@ -320,11 +320,11 @@ describe('with object props', () => { props: { myProp: { type: Number, - validator(val: unknown): boolean { + validator: (val: unknown) => { // @ts-expect-error return val !== this.otherProp }, - default(): number { + default: () => { // @ts-expect-error return this.otherProp + 1 }, @@ -337,26 +337,28 @@ describe('with object props', () => { }) }) -describe('type inference w/ optional props declaration', () => { - const MyComponent = defineComponent<{ a: string[]; msg: string }>({ - setup(props) { - expectType(props.msg) - expectType(props.a) - return { - b: 1, - } - }, - }) - - expectType() - // @ts-expect-error - ; - // @ts-expect-error - ; -}) +// describe('type inference w/ optional props declaration', () => { +// const MyComponent = defineComponent<{ a: string[]; msg: string }>({ +// setup(props) { +// expectType(props.msg) +// expectType(props.a) +// return { +// b: 1, +// } +// }, +// }) + +// expectType() +// // @ts-expect-error +// ; +// // @ts-expect-error +// ; +// }) describe('type inference w/ direct setup function', () => { - const MyComponent = defineComponent((_props: { msg: string }) => () => {}) + const MyComponent = defineComponent( + (_props: { msg: string }) => () => h('div'), + ) expectType() // @ts-expect-error ; @@ -535,6 +537,7 @@ describe('with mixins', () => { }, }, }) + const MyComponent = defineComponent({ mixins: [MixinA, MixinB, MixinC, MixinD], emits: ['click'], @@ -1491,7 +1494,7 @@ describe('should work when props type is incompatible with setup returned type ' } }, }) - type CompInstance = InstanceType + type CompInstance = ComponentInstance const CompA = {} as CompInstance expectType(CompA) @@ -1499,7 +1502,172 @@ describe('should work when props type is incompatible with setup returned type ' expectType(CompA.$props.size) }) -describe('withKeys and withModifiers as pro', () => { +describe('overriding public instance props should still allow it to work', () => { + const Comp = defineComponent({ + props: { + test: String, + }, + + slots: {} as SlotsType<{ + default: (arg: { foo: string }) => VNode[] + }>, + }) + + const GenericComp = Comp as typeof Comp & { + new (): { + $props: { test: T } + $slots: { default: (arg: { foo: T }) => VNode[] } + } + } + + const GenericInstance = new GenericComp<'bar'>() + GenericInstance.$props.test + const CompInstance = {} as ComponentInstance + + expectType(CompInstance) + expectType<'bar'>(CompInstance.$props.test) + expectType<(arg: { foo: 'bar' }) => any>(CompInstance.$slots.default) + // @ts-expect-error not any + expectType(CompInstance) + expectType<'bar'>(GenericInstance.$props.test) + expectType<(arg: { foo: 'bar' }) => any>(GenericInstance.$slots.default) +}) + +describe('should work with props null', () => { + defineComponent({ + props: { + test: null, + }, + }) + + defineComponent({ + props: { + test: { + type: null, + }, + }, + }) + + defineComponent({ + props: { + test: [Boolean, null], + }, + }) + + defineComponent({ + props: { + test: { + type: [Boolean, null], + }, + }, + }) + + defineComponent({ + props: { + bar: BigInt, + foo: { + type: BigInt, + }, + }, + }) +}) + +describe('InstanceType should be supported', () => { + const Comp = defineComponent({ + props: { a: String }, + }) + expectType>(new Comp()) +}) + +describe('type should be inferred correctly', () => { + const a = defineComponent({ + setup(props, { slots, attrs, emit }) { + return { + test: true, + } + }, + }) + + expectType(new a().test) +}) + +declare function fnDefineComponentArg(comp: DefineComponent): T +describe('defineComponent usages', () => { + // @ts-expect-error should not allow non object and functions + defineComponent(1) + // @ts-expect-error should not allow + defineComponent('test-my-component') + fnDefineComponentArg(defineComponent({})) + const a = defineComponent({}) + fnDefineComponentArg(a) + + defineComponent({ + render() { + return null + }, + }) + + defineComponent({ + props: { + n: Number, + }, + data: () => ({ msg: 'hello' }), + render() { + expectType(this.msg) + // @ts-expect-error not any + expectType(this.msg) + + return h('div', this.n) + }, + }) + + defineComponent({ + props: { + n: Number, + }, + data() { + return { msg: 'hello' } + }, + mounted() { + expectType(this.msg) + // @ts-expect-error not any + expectType(this.msg) + }, + render() { + expectType(this.msg) + // @ts-expect-error not any + expectType(this.msg) + + expectType<{ + msg: string + }>(this.$data) + // @ts-expect-error not any + expectType(this.$data) + + return h('div', this.n) + }, + }) + + defineComponent({ + mixins: [ + defineComponent({ + data() { + return { msg: 'hello' } + }, + render() { + expectType<{ + msg: string + }>(this.$data) + // @ts-expect-error not any + expectType(this.$data) + return h('div', this.msg) + }, + }), + ], + }) +}) + +describe('withKeys and withModifiers as props', () => { const onKeydown = withKeys(e => {}, ['']) const onClick = withModifiers(e => {}, ['']) ; @@ -1508,6 +1676,7 @@ describe('withKeys and withModifiers as pro', () => { import type { AllowedComponentProps, ComponentCustomProps, + ComponentInstance, ComponentOptionsMixin, DefineComponent, EmitsOptions, diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts index 2d48dbc1bc9..289ee79cdf6 100644 --- a/packages/dts-test/defineCustomElement.test-d.ts +++ b/packages/dts-test/defineCustomElement.test-d.ts @@ -1,5 +1,6 @@ import { type VueElementConstructor, + defineAsyncComponent, defineComponent, defineCustomElement, } from 'vue' @@ -83,3 +84,21 @@ describe('defineCustomElement using defineComponent return type', () => { expectType(new Comp().a) }) }) + +describe('dynamic element', () => { + const D = defineAsyncComponent(async () => ({ + props: { n: Number }, + setup(props) { + expectType(props.n) + + // @ts-expect-error not any + expectType(props.n) + }, + })) + const E = defineCustomElement(D) + + const e1 = new E() + expectType(e1.n) + // @ts-expect-error not any + expectType(e1.n) +}) diff --git a/packages/dts-test/h.test-d.ts b/packages/dts-test/h.test-d.ts index 62e619c22bd..9b6b34b0dbd 100644 --- a/packages/dts-test/h.test-d.ts +++ b/packages/dts-test/h.test-d.ts @@ -1,9 +1,11 @@ import { type Component, + type ConcreteComponent, type DefineComponent, Fragment, Suspense, Teleport, + type VNode, defineComponent, h, ref, @@ -95,7 +97,10 @@ describe('h support w/ plain object component', () => { foo: String, }, } - h(Foo, { foo: 'ok' }) + + expectType(Foo) + + h(Foo, { test: 'asd' }) h(Foo, { foo: 'ok', class: 'extra' }) // no inference in this case }) @@ -140,20 +145,22 @@ describe('h inference w/ defineComponent', () => { // h(Foo, { bar: 1, foo: 1 }) // }) -// describe('h inference w/ defineComponent + direct function', () => { -// const Foo = defineComponent((_props: { foo?: string; bar: number }) => {}) +describe('h inference w/ defineComponent + direct function', () => { + const Foo = defineComponent( + (_props: { foo?: string; bar: number }) => () => {}, + ) -// h(Foo, { bar: 1 }) -// h(Foo, { bar: 1, foo: 'ok' }) -// // should allow extraneous props (attrs fallthrough) -// h(Foo, { bar: 1, foo: 'ok', class: 'extra' }) -// // @ts-expect-error should fail on missing required prop -// h(Foo, {}) -// // @ts-expect-error -// h(Foo, { foo: 'ok' }) -// // @ts-expect-error should fail on wrong type -// h(Foo, { bar: 1, foo: 1 }) -// }) + h(Foo, { bar: 1 }) + h(Foo, { bar: 1, foo: 'ok' }) + // should allow extraneous props (attrs fallthrough) + h(Foo, { bar: 1, foo: 'ok', class: 'extra' }) + // @ts-expect-error should fail on missing required prop + h(Foo, {}) + // @ts-expect-error + h(Foo, { foo: 'ok' }) + // @ts-expect-error should fail on wrong type + h(Foo, { bar: 1, foo: 1 }) +}) // #922 and #3218 describe('h support for generic component type', () => { @@ -258,3 +265,9 @@ describe('h should work with multiple types', () => { h(sampleComponent, {}) h(sampleComponent, {}, []) }) + +// usage in test-utils +describe('should allow to assign vnode', () => { + h(h('div', 'test')) + h({} as unknown as VNode | string | { render(): any } | Component) +}) diff --git a/packages/runtime-core/__tests__/apiCreateApp.spec.ts b/packages/runtime-core/__tests__/apiCreateApp.spec.ts index 300daaaca8b..8b33c7e26a0 100644 --- a/packages/runtime-core/__tests__/apiCreateApp.spec.ts +++ b/packages/runtime-core/__tests__/apiCreateApp.spec.ts @@ -473,8 +473,8 @@ describe('api: createApp', () => { let merged: string const App = defineComponent({ render() {}, - mixins: [{ foo: 'mixin' }], - extends: { foo: 'extends' }, + mixins: [defineComponent({ foo: 'mixin' })], + extends: defineComponent({ foo: 'extends' }), foo: 'local', beforeCreate() { merged = this.$options.foo diff --git a/packages/runtime-core/__tests__/apiOptions.spec.ts b/packages/runtime-core/__tests__/apiOptions.spec.ts index 521b359e22d..ac479d0c49d 100644 --- a/packages/runtime-core/__tests__/apiOptions.spec.ts +++ b/packages/runtime-core/__tests__/apiOptions.spec.ts @@ -789,11 +789,10 @@ describe('api: options', () => { const MixinB = { data() {}, } + // @ts-expect-error edge case after #7963, unlikely to happen in practice + // since the user will want to type the mixins themselves. defineComponent({ - // @ts-expect-error edge case after #7963, unlikely to happen in practice - // since the user will want to type the mixins themselves. mixins: [defineComponent(MixinA), defineComponent(MixinB)], - // @ts-expect-error data() {}, }) }) @@ -1013,6 +1012,7 @@ describe('api: options', () => { const Comp = defineComponent({ extends: defineComponent(Extends), mixins: [defineComponent(Mixin)], + render() { return `${this.$options.msg1},${this.$options.msg2}` }, diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts index 6760a957f12..2de765b0b23 100644 --- a/packages/runtime-core/__tests__/componentProps.spec.ts +++ b/packages/runtime-core/__tests__/componentProps.spec.ts @@ -289,7 +289,7 @@ describe('component props', () => { props: { foo: { type: Number, - validator: (value, props) => mockFn(value, props), + validator: (value: unknown, props: unknown) => mockFn(value, props), }, bar: { type: Number, @@ -311,11 +311,11 @@ describe('component props', () => { props: { foo: { type: Number, - validator: (value, props) => !!(props.bar = 1), + validator: (value: unknown, props: any) => !!(props.bar = 1), }, bar: { type: Number, - validator: value => mockFn(value), + validator: (value: unknown) => mockFn(value), }, }, template: `
`, @@ -547,6 +547,17 @@ describe('component props', () => { }, } + defineComponent({ + props: { + foo: { type: BigInt }, + }, + }) + defineComponent({ + props: { + foo: BigInt, + }, + }) + const root = nodeOps.createElement('div') render( h(Comp, { @@ -679,6 +690,13 @@ describe('component props', () => { }, render() {}, } + + defineComponent({ + props: { + foo: [Function, null], + }, + }) + const root = nodeOps.createElement('div') expect(() => { render(h(Comp, { foo: () => {} }), root) diff --git a/packages/runtime-core/__tests__/vnode.spec.ts b/packages/runtime-core/__tests__/vnode.spec.ts index 653613ddb2e..1b18e0e6e14 100644 --- a/packages/runtime-core/__tests__/vnode.spec.ts +++ b/packages/runtime-core/__tests__/vnode.spec.ts @@ -14,7 +14,7 @@ import { import type { Data } from '../src/component' import { PatchFlags, ShapeFlags } from '@vue/shared' import { h, isReactive, reactive, ref, setBlockTracking, withCtx } from '../src' -import { createApp, nodeOps, serializeInner } from '@vue/runtime-test' +import { createApp, nodeOps, render, serializeInner } from '@vue/runtime-test' import { setCurrentRenderingInstance } from '../src/componentRenderContext' describe('vnode', () => { @@ -634,7 +634,7 @@ describe('vnode', () => { } const vnode = (openBlock(), createBlock(Parent, null, { default: slotFn })) - createApp(vnode).mount(nodeOps.createElement('div')) + render(vnode, nodeOps.createElement('div')) expect(isBlockTreeEnabled).toStrictEqual(1) }) }) diff --git a/packages/runtime-core/src/apiAsyncComponent.ts b/packages/runtime-core/src/apiAsyncComponent.ts index 4c6e4bad11b..d7df0cf9f9d 100644 --- a/packages/runtime-core/src/apiAsyncComponent.ts +++ b/packages/runtime-core/src/apiAsyncComponent.ts @@ -6,10 +6,23 @@ import { currentInstance, isInSSRComponentSetup, } from './component' +import type { + ComponentInjectOptions, + ComponentOptionsMixin, + ComputedOptions, + MethodOptions, +} from './componentOptions' +import type { ComponentInstance } from './componentTypeHelpers' +import type { EmitsOptions } from './componentEmits' +import type { SlotsType } from './componentSlots' import { isFunction, isObject } from '@vue/shared' import type { ComponentPublicInstance } from './componentPublicInstance' import { type VNode, createVNode } from './vnode' -import { defineComponent } from './apiDefineComponent' +import { + type DefineComponentFromOptions, + type DefineComponentOptions, + defineComponent, +} from './apiDefineComponent' import { warn } from './warning' import { ref } from '@vue/reactivity' import { ErrorCodes, handleError } from './errorHandling' @@ -22,6 +35,12 @@ export type AsyncComponentLoader = () => Promise< AsyncComponentResolveResult > +export type DefineAsyncComponent = { + name: 'AsyncComponentWrapper' + __asyncLoader: AsyncComponentLoader + get __asyncResolved(): TComponent | undefined +} & { new (): ComponentInstance } + export interface AsyncComponentOptions { loader: AsyncComponentLoader loadingComponent?: Component @@ -43,7 +62,81 @@ export const isAsyncWrapper = (i: ComponentInternalInstance | VNode): boolean => /*! #__NO_SIDE_EFFECTS__ */ export function defineAsyncComponent< T extends Component = { new (): ComponentPublicInstance }, ->(source: AsyncComponentLoader | AsyncComponentOptions): T { +>( + source: AsyncComponentLoader | AsyncComponentOptions, +): DefineAsyncComponent +export function defineAsyncComponent< + Props = undefined, + RawBindings = {}, + D = {}, + C extends ComputedOptions = {}, + M extends MethodOptions = {}, + Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, + Extends extends ComponentOptionsMixin = ComponentOptionsMixin, + E extends EmitsOptions = {}, + EE extends string = string, + I extends ComponentInjectOptions = {}, + II extends string = string, + S extends SlotsType = {}, + Options extends Record = {}, +>( + source: + | AsyncComponentLoader< + DefineComponentOptions< + Props, + RawBindings, + D, + C, + M, + Mixin, + Extends, + E, + EE, + I, + II, + S, + Options + > + > + | AsyncComponentOptions< + DefineComponentOptions< + Props, + RawBindings, + D, + C, + M, + Mixin, + Extends, + E, + EE, + I, + II, + S, + Options + > + >, +): DefineAsyncComponent< + DefineComponentFromOptions< + Props, + RawBindings, + D, + C, + M, + Mixin, + Extends, + E, + EE, + I, + II, + S, + Options + > +> + +// Implementation +export function defineAsyncComponent( + source: AsyncComponentLoader | AsyncComponentOptions, +): DefineAsyncComponent { if (isFunction(source)) { source = { loader: source } } @@ -58,8 +151,8 @@ export function defineAsyncComponent< onError: userOnError, } = source - let pendingRequest: Promise | null = null - let resolvedComp: ConcreteComponent | undefined + let pendingRequest: Promise | null = null + let resolvedComp: T | undefined let retries = 0 const retry = () => { @@ -68,7 +161,7 @@ export function defineAsyncComponent< return load() } - const load = (): Promise => { + const load = (): Promise => { let thisRequest: Promise return ( pendingRequest || @@ -208,7 +301,8 @@ export function defineAsyncComponent< } } }, - }) as T + // casting as unknown to avoid too much of a complex type + }) as unknown as DefineAsyncComponent } function createInnerComp( diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts index b99d06e01ff..24a08ec36be 100644 --- a/packages/runtime-core/src/apiCreateApp.ts +++ b/packages/runtime-core/src/apiCreateApp.ts @@ -39,7 +39,7 @@ export interface App { ): this use(plugin: Plugin, options: Options): this - mixin(mixin: ComponentOptions): this + mixin(mixin: ComponentOptions & Record): this component(name: string): Component | undefined component(name: string, component: Component | DefineComponent): this directive(name: string): Directive | undefined diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts index 47bcf9f2acb..b0bf018d7a0 100644 --- a/packages/runtime-core/src/apiDefineComponent.ts +++ b/packages/runtime-core/src/apiDefineComponent.ts @@ -3,9 +3,6 @@ import type { ComponentOptions, ComponentOptionsBase, ComponentOptionsMixin, - ComponentOptionsWithArrayProps, - ComponentOptionsWithObjectProps, - ComponentOptionsWithoutProps, ComputedOptions, MethodOptions, RenderFunction, @@ -17,7 +14,6 @@ import type { } from './component' import type { ComponentObjectPropsOptions, - ComponentPropsOptions, ExtractDefaultPropTypes, ExtractPropTypes, } from './componentProps' @@ -34,27 +30,42 @@ export type PublicProps = VNodeProps & AllowedComponentProps & ComponentCustomProps -type ResolveProps = Readonly< - PropsOrPropOptions extends ComponentPropsOptions - ? ExtractPropTypes - : PropsOrPropOptions -> & - ({} extends E ? {} : EmitsToProps) +export type ResolveProps = Readonly< + ([Props] extends [string] + ? { [key in Props]?: any } + : [Props] extends [ComponentObjectPropsOptions] + ? ExtractPropTypes + : Props extends never[] + ? {} + : [Props] extends [string[]] + ? { [key: string]: any } + : [Props] extends [never] + ? {} + : [Props] extends [undefined] + ? {} + : Props) & + ({} extends E ? {} : EmitsToProps) +> + +export declare const RawOptionsSymbol: '__rawOptions' export type DefineComponent< - PropsOrPropOptions = {}, - RawBindings = {}, - D = {}, + PropsOrPropOptions = any, + RawBindings = any, + D = any, C extends ComputedOptions = ComputedOptions, M extends MethodOptions = MethodOptions, - Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, - Extends extends ComponentOptionsMixin = ComponentOptionsMixin, + Mixin extends ComponentOptionsMixin = {}, + Extends extends ComponentOptionsMixin = {}, E extends EmitsOptions = {}, EE extends string = string, PP = PublicProps, Props = ResolveProps, Defaults = ExtractDefaultPropTypes, - S extends SlotsType = {}, + I extends ComponentInjectOptions = any, + II extends string = string, + S extends SlotsType = any, + Options extends Record = {}, > = ComponentPublicInstanceConstructor< CreateComponentPublicInstance< Props, @@ -68,26 +79,194 @@ export type DefineComponent< PP & Props, Defaults, true, - {}, - S + I, + S, + Options > > & - ComponentOptionsBase< - Props, - RawBindings, - D, - C, - M, - Mixin, - Extends, - E, - EE, - Defaults, - {}, - string, - S + Omit< + ComponentOptionsBase< + Props, + RawBindings, + D, + C, + M, + Mixin, + Extends, + E, + EE, + Defaults, + I, + II, + S + >, + 'props' | 'emits' > & - PP + Omit & { + // Emits needs to be ignored and then re-added, otherwise + // the EE (string) of the emits will be inferred along side of the Object based + // causing the returned type to be incorrect. + emits: Options['emits'] + // There's a test failing when extends is not re-added + extends: Options['extends'] + } & { + [RawOptionsSymbol]: Options + } + +type BuildComponentInstance< + MakeDefaultsOptional extends boolean = false, + Props = never, + RawBindings = {}, + D = {}, + C extends ComputedOptions = {}, + M extends MethodOptions = {}, + Mixin extends ComponentOptionsMixin = {}, + Extends extends ComponentOptionsMixin = {}, + E extends EmitsOptions = {}, + I extends ComponentInjectOptions = {}, + S extends SlotsType = {}, + Defaults extends Record = {}, + Options = {}, +> = CreateComponentPublicInstance< + Props, + RawBindings, + D, + C, + M, + Mixin, + Extends, + E, + Props, + Defaults, + MakeDefaultsOptional, + I, + S, + Options +> + +type NamedProps = [PropNames] extends [string] + ? PropNames[] + : PropNames extends string[] + ? PropNames + : PropNames extends never[] + ? PropNames + : never +type OptionProps = [Props] extends [ComponentObjectPropsOptions] + ? Props + : never + +export type DefineComponentOptions< + Props = never, + RawBindings = {}, + D = {}, + C extends ComputedOptions = {}, + M extends MethodOptions = {}, + Mixin extends ComponentOptionsMixin = {}, + Extends extends ComponentOptionsMixin = {}, + E extends EmitsOptions = {}, + EE extends string = string, + I extends ComponentInjectOptions = {}, + II extends string = string, + S extends SlotsType = {}, + Options extends {} = {}, + PrettyProps = Readonly< + ExtractPropTypes< + [Props] extends [string] + ? { [K in Props]: any } + : [Props] extends [string[]] + ? { [K in string]: any } + : [Props] extends [never] + ? {} + : [Props] extends [undefined] + ? {} + : [Props] extends [never[]] + ? {} + : Props + > & + EmitsToProps + >, +> = + | (Options & { + props?: NamedProps | OptionProps | undefined + } & Omit< + ComponentOptionsBase< + PrettyProps, + RawBindings, + D, + C, + M, + Mixin, + Extends, + E, + EE, + {}, + I, + II, + S + >, + 'props' | 'render' + > & + ThisType< + BuildComponentInstance< + false, + PrettyProps, + RawBindings, + D, + C, + M, + Mixin, + Extends, + E, + I, + S, + ExtractPropTypes, + Options + > + >) + | ((( + props: Props, + ctx: SetupContext, + ) => RenderFunction | Promise) & + Options) + +export type DefineComponentFromOptions< + Props = never, + RawBindings = {}, + D = {}, + C extends ComputedOptions = {}, + M extends MethodOptions = {}, + Mixin extends ComponentOptionsMixin = {}, + Extends extends ComponentOptionsMixin = {}, + E extends EmitsOptions = {}, + EE extends string = string, + I extends ComponentInjectOptions = {}, + II extends string = string, + S extends SlotsType = {}, + Options extends Record = {}, +> = DefineComponent< + [Props] extends [string] + ? Props[] + : undefined extends Props + ? {} + : Props extends never[] + ? string[] + : Props, + RawBindings, + D, + C, + M, + Mixin, + Extends, + E, + EE, + PublicProps, + ResolveProps, + ExtractDefaultPropTypes, + I, + II, + S, + Options +> // defineComponent is a utility that is primarily used for type inference // when declaring components. Type inference is provided in the component @@ -95,7 +274,6 @@ export type DefineComponent< // for TSX / manual render function / IDE support. // overload 1: direct setup function -// (uses user defined props interface) export function defineComponent< Props extends Record, E extends EmitsOptions = {}, @@ -129,121 +307,24 @@ export function defineComponent< }, ): (props: Props & EmitsToProps) => any -// overload 2: object format with no props -// (uses user defined props interface) -// return type is for Vetur and TSX support +// overload 3: DefineComponentOptions export function defineComponent< - Props = {}, + Props = undefined, RawBindings = {}, D = {}, C extends ComputedOptions = {}, M extends MethodOptions = {}, - Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, - Extends extends ComponentOptionsMixin = ComponentOptionsMixin, + Mixin extends ComponentOptionsMixin = {}, + Extends extends ComponentOptionsMixin = {}, E extends EmitsOptions = {}, EE extends string = string, - S extends SlotsType = {}, I extends ComponentInjectOptions = {}, II extends string = string, ->( - options: ComponentOptionsWithoutProps< - Props, - RawBindings, - D, - C, - M, - Mixin, - Extends, - E, - EE, - I, - II, - S - >, -): DefineComponent< - Props, - RawBindings, - D, - C, - M, - Mixin, - Extends, - E, - EE, - PublicProps, - ResolveProps, - ExtractDefaultPropTypes, - S -> - -// overload 3: object format with array props declaration -// props inferred as { [key in PropNames]?: any } -// return type is for Vetur and TSX support -export function defineComponent< - PropNames extends string, - RawBindings, - D, - C extends ComputedOptions = {}, - M extends MethodOptions = {}, - Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, - Extends extends ComponentOptionsMixin = ComponentOptionsMixin, - E extends EmitsOptions = {}, - EE extends string = string, - S extends SlotsType = {}, - I extends ComponentInjectOptions = {}, - II extends string = string, - Props = Readonly<{ [key in PropNames]?: any }>, ->( - options: ComponentOptionsWithArrayProps< - PropNames, - RawBindings, - D, - C, - M, - Mixin, - Extends, - E, - EE, - I, - II, - S - >, -): DefineComponent< - Props, - RawBindings, - D, - C, - M, - Mixin, - Extends, - E, - EE, - PublicProps, - ResolveProps, - ExtractDefaultPropTypes, - S -> - -// overload 4: object format with object props declaration -// see `ExtractPropTypes` in ./componentProps.ts -export function defineComponent< - // the Readonly constraint allows TS to treat the type of { required: true } - // as constant instead of boolean. - PropsOptions extends Readonly, - RawBindings, - D, - C extends ComputedOptions = {}, - M extends MethodOptions = {}, - Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, - Extends extends ComponentOptionsMixin = ComponentOptionsMixin, - E extends EmitsOptions = {}, - EE extends string = string, S extends SlotsType = {}, - I extends ComponentInjectOptions = {}, - II extends string = string, + Options extends Record = {}, >( - options: ComponentOptionsWithObjectProps< - PropsOptions, + options: DefineComponentOptions< + Props, RawBindings, D, C, @@ -254,10 +335,11 @@ export function defineComponent< EE, I, II, - S + S, + Options >, -): DefineComponent< - PropsOptions, +): DefineComponentFromOptions< + undefined extends Props ? {} : Props, RawBindings, D, C, @@ -266,18 +348,15 @@ export function defineComponent< Extends, E, EE, - PublicProps, - ResolveProps, - ExtractDefaultPropTypes, - S + I, + II, + S, + Options > // implementation, close to no-op /*! #__NO_SIDE_EFFECTS__ */ -export function defineComponent( - options: unknown, - extraOptions?: ComponentOptions, -) { +export function defineComponent(options: unknown, extraOptions?: unknown) { return isFunction(options) ? // #8326: extend call and options.name access are considered side-effects // by Rollup, so we have to wrap it in a pure-annotated IIFE. diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts index 244e30ac9a8..16a57b5b2b1 100644 --- a/packages/runtime-core/src/apiSetupHelpers.ts +++ b/packages/runtime-core/src/apiSetupHelpers.ts @@ -2,7 +2,6 @@ import { EMPTY_OBJ, type LooseRequired, type Prettify, - type UnionToIntersection, extend, hasChanged, isArray, @@ -16,7 +15,7 @@ import { setCurrentInstance, unsetCurrentInstance, } from './component' -import type { EmitFn, EmitsOptions, ObjectEmitsOptions } from './componentEmits' +import type { EmitFn, EmitsOptions } from './componentEmits' import type { ComponentOptionsMixin, ComponentOptionsWithoutProps, @@ -141,7 +140,7 @@ export function defineEmits( ): EmitFn export function defineEmits< T extends ((...args: any[]) => any) | Record, ->(): T extends (...args: any[]) => any ? T : ShortEmits +>(): T extends (...args: any[]) => any ? T : EmitFn // implementation export function defineEmits() { if (__DEV__) { @@ -150,14 +149,6 @@ export function defineEmits() { return null as any } -type RecordToUnion> = T[keyof T] - -type ShortEmits> = UnionToIntersection< - RecordToUnion<{ - [K in keyof T]: (evt: K, ...args: T[K]) => void - }> -> - /** * Vue `