From bb02a22d3e295bdd8eb8f291ab724616a106d45f Mon Sep 17 00:00:00 2001
From: Hofer Ivan <ivan.hofer@outlook.com>
Date: Mon, 25 Jul 2022 21:09:03 +0200
Subject: [PATCH] [feat] add convenience type for `ComponentEvents` (#7702)

---
 generate-type-definitions.js |  2 +-
 src/runtime/internal/dev.ts  | 26 ++++++++++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/generate-type-definitions.js b/generate-type-definitions.js
index 00b079eb5d69..d8f6e9f826ed 100644
--- a/generate-type-definitions.js
+++ b/generate-type-definitions.js
@@ -16,7 +16,7 @@ function modify(path, modifyFn) {
 
 modify(
     'types/runtime/index.d.ts',
-    content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps')
+    content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps, ComponentEvents')
 );
 modify(
     'types/compiler/index.d.ts',
diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
index 5b00e7dc5b4f..df40f94230a4 100644
--- a/src/runtime/internal/dev.ts
+++ b/src/runtime/internal/dev.ts
@@ -264,18 +264,18 @@ export class SvelteComponentTyped<
 /**
  * Convenience type to get the type of a Svelte component. Useful for example in combination with
  * dynamic components using `<svelte:component>`.
- * 
+ *
  * Example:
  * ```html
  * <script lang="ts">
  * 	import type { ComponentType, SvelteComponentTyped } from 'svelte';
  * 	import Component1 from './Component1.svelte';
  * 	import Component2 from './Component2.svelte';
- * 
+ *
  * 	const component: ComponentType = someLogic() ? Component1 : Component2;
  * 	const componentOfCertainSubType: ComponentType<SvelteComponentTyped<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
  * </script>
- * 
+ *
  * <svelte:component this={component} />
  * <svelte:component this={componentOfCertainSubType} needsThisProp="hello" />
  * ```
@@ -292,7 +292,7 @@ export type ComponentType<Component extends SvelteComponentTyped = SvelteCompone
  * <script lang="ts">
  * 	import type { ComponentProps } from 'svelte';
  * 	import Component from './Component.svelte';
- * 
+ *
  * 	const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
  * </script>
  * ```
@@ -301,6 +301,24 @@ export type ComponentProps<Component extends SvelteComponent> = Component extend
 	? Props
 	: never;
 
+/**
+ * Convenience type to get the events the given component expects. Example:
+ * ```html
+ * <script lang="ts">
+ *    import type { ComponentEvents } from 'svelte';
+ *    import Component from './Component.svelte';
+ *
+ *    function handleCloseEvent(event: ComponentEvents<Component>['close']) {
+ *       console.log(event.detail);
+ *    }
+ * </script>
+ *
+ * <Component on:close={handleCloseEvent} />
+ * ```
+ */
+export type ComponentEvents<Component extends SvelteComponent> =
+	Component extends SvelteComponentTyped<any, infer Events> ? Events : never;
+
 export function loop_guard(timeout) {
 	const start = Date.now();
 	return () => {