Skip to content

Commit

Permalink
fix: type-level back-compat for default slot and children prop
Browse files Browse the repository at this point in the history
If someone has an existing SvelteComponent type definition and using the slot generic to type the default slot, automatically add that slot to the prop type as "children"
  • Loading branch information
dummdidumm committed Nov 24, 2023
1 parent cb4b1f0 commit a3bc7d5
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 8 deletions.
5 changes: 5 additions & 0 deletions .changeset/wet-games-fly.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: type-level back-compat for default slot and children prop
12 changes: 10 additions & 2 deletions packages/svelte/src/main/public.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,14 @@ export interface ComponentConstructorOptions<
$$inline?: boolean;
}

// Utility type for ensuring backwards compatibility on a type level: If there's a default slot, add 'children' to the props if it doesn't exist there already
type PropsWithChildren<Props, Slots> = Props &
(Props extends { children?: any }
? {}
: Slots extends { default: any }
? { children?: Snippet }
: {});

/**
* Can be used to create strongly typed Svelte components.
*
Expand Down Expand Up @@ -57,13 +65,13 @@ export class SvelteComponent<
* is a stop-gap solution. Migrate towards using `mount` or `createRoot` instead. See
* https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more info.
*/
constructor(options: ComponentConstructorOptions<Props>);
constructor(options: ComponentConstructorOptions<PropsWithChildren<Props, Slots>>);
/**
* For type checking capabilities only.
* Does not exist at runtime.
* ### DO NOT USE!
* */
$$prop_def: Props;
$$prop_def: PropsWithChildren<Props, Slots>;
/**
* For type checking capabilities only.
* Does not exist at runtime.
Expand Down
18 changes: 12 additions & 6 deletions packages/svelte/tests/types/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ class LegacyComponent extends SvelteComponent<
{ slot: { slotProps: boolean } }
> {}

// @ts-expect-error
const legacyComponent = new LegacyComponent({
target: null as any as Document | Element | ShadowRoot,
props: {
prop: 'foo',
// @ts-expect-error
x: ''
}
});
Expand Down Expand Up @@ -56,14 +56,20 @@ class NewComponent extends SvelteComponent<
anExport: string = '';
}

// @ts-expect-error
new NewComponent({
prop: 'foo',
x: ''
target: null as any,
props: {
prop: 'foo',
// @ts-expect-error
x: ''
}
});

const newComponent: NewComponent = new NewComponent({
prop: 'foo'
target: null as any,
props: {
prop: 'foo'
}
});
newComponent.$$events_def.event;
// @ts-expect-error
Expand Down Expand Up @@ -123,11 +129,11 @@ instance.anExport === 1;
// --------------------------------------------------------------------------- interop

const AsLegacyComponent = asClassComponent(newComponent);
// @ts-expect-error
new AsLegacyComponent({
target: null as any,
props: {
prop: '',
// @ts-expect-error
x: ''
}
});
Expand Down

0 comments on commit a3bc7d5

Please sign in to comment.