Skip to content

Commit bb02a22

Browse files
authored
[feat] add convenience type for ComponentEvents (#7702)
1 parent 01ba78a commit bb02a22

File tree

2 files changed

+23
-5
lines changed

2 files changed

+23
-5
lines changed

generate-type-definitions.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function modify(path, modifyFn) {
1616

1717
modify(
1818
'types/runtime/index.d.ts',
19-
content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps')
19+
content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps, ComponentEvents')
2020
);
2121
modify(
2222
'types/compiler/index.d.ts',

src/runtime/internal/dev.ts

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -264,18 +264,18 @@ export class SvelteComponentTyped<
264264
/**
265265
* Convenience type to get the type of a Svelte component. Useful for example in combination with
266266
* dynamic components using `<svelte:component>`.
267-
*
267+
*
268268
* Example:
269269
* ```html
270270
* <script lang="ts">
271271
* import type { ComponentType, SvelteComponentTyped } from 'svelte';
272272
* import Component1 from './Component1.svelte';
273273
* import Component2 from './Component2.svelte';
274-
*
274+
*
275275
* const component: ComponentType = someLogic() ? Component1 : Component2;
276276
* const componentOfCertainSubType: ComponentType<SvelteComponentTyped<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
277277
* </script>
278-
*
278+
*
279279
* <svelte:component this={component} />
280280
* <svelte:component this={componentOfCertainSubType} needsThisProp="hello" />
281281
* ```
@@ -292,7 +292,7 @@ export type ComponentType<Component extends SvelteComponentTyped = SvelteCompone
292292
* <script lang="ts">
293293
* import type { ComponentProps } from 'svelte';
294294
* import Component from './Component.svelte';
295-
*
295+
*
296296
* const props: ComponentProps<Component> = { foo: 'bar' }; // Errors if these aren't the correct props
297297
* </script>
298298
* ```
@@ -301,6 +301,24 @@ export type ComponentProps<Component extends SvelteComponent> = Component extend
301301
? Props
302302
: never;
303303

304+
/**
305+
* Convenience type to get the events the given component expects. Example:
306+
* ```html
307+
* <script lang="ts">
308+
* import type { ComponentEvents } from 'svelte';
309+
* import Component from './Component.svelte';
310+
*
311+
* function handleCloseEvent(event: ComponentEvents<Component>['close']) {
312+
* console.log(event.detail);
313+
* }
314+
* </script>
315+
*
316+
* <Component on:close={handleCloseEvent} />
317+
* ```
318+
*/
319+
export type ComponentEvents<Component extends SvelteComponent> =
320+
Component extends SvelteComponentTyped<any, infer Events> ? Events : never;
321+
304322
export function loop_guard(timeout) {
305323
const start = Date.now();
306324
return () => {

0 commit comments

Comments
 (0)