diff --git a/.changeset/warm-cycles-call.md b/.changeset/warm-cycles-call.md new file mode 100644 index 0000000000..17d52f8c62 --- /dev/null +++ b/.changeset/warm-cycles-call.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: widen `ComponentProps` constraint to accept more component shapes diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts index 897d468ebc..802dfbc790 100644 --- a/packages/svelte/src/index.d.ts +++ b/packages/svelte/src/index.d.ts @@ -226,10 +226,10 @@ export type ComponentEvents = * withProps(MyComponent, { foo: 'bar' }); * ``` */ -export type ComponentProps> = +export type ComponentProps> = Comp extends SvelteComponent ? Props - : Comp extends Component + : Comp extends Component ? Props : never; diff --git a/packages/svelte/tests/types/component.ts b/packages/svelte/tests/types/component.ts index eccf08548e..06749e9937 100644 --- a/packages/svelte/tests/types/component.ts +++ b/packages/svelte/tests/types/component.ts @@ -261,6 +261,11 @@ const functionComponentProps: ComponentProps = { prop: 1 }; +// Test that self-typed functions are correctly inferred, too (use case: language tools has its own shape for backwards compatibility) +const functionComponentProps2: ComponentProps<(a: any, b: { a: true }) => { foo: string }> = { + a: true +}; + mount(functionComponent, { target: null as any as Document | Element | ShadowRoot, props: { diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 78ffc17748..b3230c9413 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -223,10 +223,10 @@ declare module 'svelte' { * withProps(MyComponent, { foo: 'bar' }); * ``` */ - export type ComponentProps> = + export type ComponentProps> = Comp extends SvelteComponent ? Props - : Comp extends Component + : Comp extends Component ? Props : never;