From ca90a7a0489f17c54fa34f2efc172ae8182084a2 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 30 Jul 2024 18:08:44 +0200
Subject: [PATCH] fix: widen `ComponentProps` constraint to accept more
 component shapes

language tools has to type its own shape for backwards compatibility, and it currently doesn't include the `$on` and `$set` methods, which means without widening the type as done here you would get a "this shape is not accepted" type error when passing it to `ComponentProps`

closes #12627
---
 .changeset/warm-cycles-call.md           | 5 +++++
 packages/svelte/src/index.d.ts           | 4 ++--
 packages/svelte/tests/types/component.ts | 5 +++++
 packages/svelte/types/index.d.ts         | 4 ++--
 4 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/warm-cycles-call.md

diff --git a/.changeset/warm-cycles-call.md b/.changeset/warm-cycles-call.md
new file mode 100644
index 000000000000..17d52f8c62e2
--- /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 897d468ebcb5..802dfbc79036 100644
--- a/packages/svelte/src/index.d.ts
+++ b/packages/svelte/src/index.d.ts
@@ -226,10 +226,10 @@ export type ComponentEvents<Comp extends SvelteComponent> =
  * withProps(MyComponent, { foo: 'bar' });
  * ```
  */
-export type ComponentProps<Comp extends SvelteComponent | Component<any>> =
+export type ComponentProps<Comp extends SvelteComponent | Component<any, any>> =
 	Comp extends SvelteComponent<infer Props>
 		? Props
-		: Comp extends Component<infer Props>
+		: Comp extends Component<infer Props, any>
 			? Props
 			: never;
 
diff --git a/packages/svelte/tests/types/component.ts b/packages/svelte/tests/types/component.ts
index eccf08548ec1..06749e993776 100644
--- a/packages/svelte/tests/types/component.ts
+++ b/packages/svelte/tests/types/component.ts
@@ -261,6 +261,11 @@ const functionComponentProps: ComponentProps<typeof functionComponent> = {
 	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 78ffc1774870..b3230c941304 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<Comp extends SvelteComponent | Component<any>> =
+	export type ComponentProps<Comp extends SvelteComponent | Component<any, any>> =
 		Comp extends SvelteComponent<infer Props>
 			? Props
-			: Comp extends Component<infer Props>
+			: Comp extends Component<infer Props, any>
 				? Props
 				: never;