Support TypeScript generics on snippets

[WarningImHack3r]

Describe the problem

I just noticed it's not possible to use generics in a raw snippet declaration:

{#snippet mySnippet<T extends { prop: string }>(item: T)}
    <div>{item.prop}</div>
{/snippet}

Is it intentional? Is such a feature expected to be supported in the future? Snippets passed as props do support generics, so I think this should be added, in my opinion.

Describe the proposed solution

Add full TypeScript support for snippets in the markup

Importance

nice to have

[jhwz]

What's the use case for generics in snippets?

Your example should just be:

{#snippet mySnippet(item: { prop: string })}
    <div>{item.prop}</div>
{/snippet}

Generics doesn't do anything there 🙂

[WarningImHack3r]

Generics doesn't do anything there 🙂

Yeah, this was a stub example to showcase the problem; my real-world use case looks more like this:

<script lang="ts">
	type Parent = A | B; // A and B have common properties as well as some unique ones, `Parent` is here used to get easily the common ones

	const a: A;
	const b: B;
</script>

{#snippet mySnippet<T extends Parent>(item: T, strFromItem: (item: T) => string)}
	<span>{item.someCommonProp}</span>
	<!-- `strFromItem` allows here to access the specific properties of the passed item without needing to know about them, hence the `T extends Parent` -->
	<!-- there might be better ways to achieve this, I'm not a TS wizard, but I think it's enough to get the usefulness of generic snippets -->
	<div>{strFromItem(item)}</div>
{/snippet}

{@render mySnippet(a, item => `hi from A: ${item.aSpecificProp}`)}
{@render mySnippet(b, item => `hi from B: ${item.bSpecificProp}`)}

[jhwz]

Generics are usually useful for tying the type of a function argument with the type of the function return. Because snippets don't "return" anything in theory it shouldn't be needed, but there may be situations I'm missing. In that case you would just do:

{#snippet mySnippet(item: Parent, str: string)}
	<span>{item.someCommonProp}</span>
	<div>{str}</div>
{/snippet}

{@render mySnippet(a, `hi from A: ${item.aSpecificProp}`)}
{@render mySnippet(b, `hi from B: ${item.bSpecificProp}`)}

i.e. you resolve the field access outside of the snippet

[WarningImHack3r]

My bad again! I gave another look at my code and it's more complicated than that; my argument is an array:

<script lang="ts">
	type Parent = A | B; // A and B have common properties as well as some unique ones, `Parent` is here used to get easily the common ones

	const a: A;
	const b: B;
</script>

{#snippet mySnippet<T extends Parent>(items: T[], strFromItem: (item: T) => string)}
	<span>{item.someCommonProp}</span>
	{#each items as item}
		<!-- `strFromItem` allows here to access the specific properties of the passed item without needing to know about them, hence the `T extends Parent` -->
		<!-- there might be better ways to achieve this, I'm not a TS wizard, but I think it's enough to get the usefulness of generic snippets -->
		<div>{strFromItem(item)}</div>
	{/each}
{/snippet}

{@render mySnippet(a, item => `hi from A: ${item.aSpecificProp}`)}
{@render mySnippet(b, item => `hi from B: ${item.bSpecificProp}`)}

[jhwz]

My bad again! I gave another look at my code and it's more complicated than that; my argument is an array:

Ah that makes sense! I didn't think of that case