From d93ad3ba1e8c28c2facaec49e19d2ac1ed577e9f Mon Sep 17 00:00:00 2001
From: FoHoOV <53280503+FoHoOV@users.noreply.github.com>
Date: Thu, 31 Oct 2024 14:55:49 +0330
Subject: [PATCH] feat: add `ComponentExports` utility type (#13441)

Safer/clearer/backwards/forward-compatibale way to reference them

---------

Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>
---
 .changeset/rotten-cups-float.md          |  5 +++++
 packages/svelte/src/index.d.ts           | 20 ++++++++++++++++++
 packages/svelte/tests/types/component.ts | 26 +++++++++++++++++++++++-
 packages/svelte/types/index.d.ts         | 20 ++++++++++++++++++
 4 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/rotten-cups-float.md

diff --git a/.changeset/rotten-cups-float.md b/.changeset/rotten-cups-float.md
new file mode 100644
index 000000000000..e58d4f26dfe1
--- /dev/null
+++ b/.changeset/rotten-cups-float.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: provide `ComponentExports` utility type
diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts
index 5130721cbed2..262337ef0aaf 100644
--- a/packages/svelte/src/index.d.ts
+++ b/packages/svelte/src/index.d.ts
@@ -237,6 +237,26 @@ export type ComponentProps<Comp extends SvelteComponent | Component<any, any>> =
 			? Props
 			: never;
 
+/**
+ * Convenience type to get the properties that given component exports.
+ *
+ * Example: Typing the `bind:this` for a component named `MyComponent`
+ * ```
+ * <script lang="ts">
+ * 	import MyComponent from '$lib/component';
+ * 	let component: ComponentExports<typeof MyComponent> | undefined = undefined;
+ * <script>
+ *
+ * <MyComponent bind:this={component} />
+ * ```
+ */
+export type ComponentExports<TComponent extends Component<any, any> | typeof SvelteComponent<any>> =
+	TComponent extends typeof SvelteComponent<any>
+		? InstanceType<TComponent>
+		: TComponent extends Component<any, infer TExports>
+			? TExports
+			: never;
+
 /**
  * @deprecated This type is obsolete when working with the new `Component` type.
  *
diff --git a/packages/svelte/tests/types/component.ts b/packages/svelte/tests/types/component.ts
index 06749e993776..f439d3ea5dd0 100644
--- a/packages/svelte/tests/types/component.ts
+++ b/packages/svelte/tests/types/component.ts
@@ -7,7 +7,8 @@ import {
 	mount,
 	hydrate,
 	type Component,
-	type ComponentInternals
+	type ComponentInternals,
+	type ComponentExports
 } from 'svelte';
 import { render } from 'svelte/server';
 
@@ -180,6 +181,16 @@ render(NewComponent, {
 	}
 });
 
+const newComponentExports: ComponentExports<typeof NewComponent> = {
+	anExport: '',
+	$$events_def: null as any,
+	$$prop_def: null as any,
+	$$slot_def: null as any,
+	$set: null as any,
+	$destroy: null as any,
+	$on: null as any
+};
+
 // --------------------------------------------------------------------------- interop
 
 const AsLegacyComponent = asClassComponent(newComponent);
@@ -337,6 +348,19 @@ render(functionComponent, {
 	}
 });
 
+const functionComponentExports: ComponentExports<typeof functionComponent> = {
+	foo: 'bar',
+	// @ts-expect-error
+	x: ''
+};
+
+type AdhocFunctionComponent = (a: unknown, b: { a: true }) => { foo: string };
+const adhocFunctionComponentExport: ComponentExports<AdhocFunctionComponent> = {
+	foo: 'bar',
+	// @ts-expect-error
+	x: ''
+};
+
 // --------------------------------------------------------------------------- *.svelte components
 
 // import from a nonexistent file to trigger the declare module '*.svelte' in ambient.d.ts
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index b4da4c79b865..7ffa022060e3 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -234,6 +234,26 @@ declare module 'svelte' {
 				? Props
 				: never;
 
+	/**
+	 * Convenience type to get the properties that given component exports.
+	 *
+	 * Example: Typing the `bind:this` for a component named `MyComponent`
+	 * ```
+	 * <script lang="ts">
+	 * 	import MyComponent from '$lib/component';
+	 * 	let component: ComponentExports<typeof MyComponent> | undefined = undefined;
+	 * <script>
+	 *
+	 * <MyComponent bind:this={component} />
+	 * ```
+	 */
+	export type ComponentExports<TComponent extends Component<any, any> | typeof SvelteComponent<any>> =
+		TComponent extends typeof SvelteComponent<any>
+			? InstanceType<TComponent>
+			: TComponent extends Component<any, infer TExports>
+				? TExports
+				: never;
+
 	/**
 	 * @deprecated This type is obsolete when working with the new `Component` type.
 	 *